.dtf-gs-root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden}
.dtf-gs-toolbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee;padding:10px}
.dtf-gs-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dtf-gs-group{display:flex;gap:6px;align-items:center;background:#f8f8f8;border:1px solid #eee;border-radius:10px;padding:8px}
.dtf-gs-group label{font-size:12px;opacity:.8;margin-right:4px}
.dtf-gs-group input[type="number"],.dtf-gs-group select{height:32px;border:1px solid #ddd;border-radius:8px;padding:0 8px;background:#fff}
.dtf-gs-group button{height:32px;border:1px solid #ddd;border-radius:8px;padding:0 10px;background:#fff;cursor:pointer}
.dtf-gs-group button:hover{background:#f2f2f2}
.dtf-gs-actions{margin-left:auto;background:transparent;border:none;padding:0}
.dtf-gs-actions .button{height:40px;border-radius:10px}
.dtf-gs-pricebox{gap:12px}
.dtf-gs-metric{font-size:13px;white-space:nowrap}
.dtf-gs-main{display:flex;min-height:620px}
.dtf-gs-left{width:320px;max-width:40vw;border-right:1px solid #eee;background:#fbfbfb;padding:10px;overflow:auto}
.dtf-gs-panel-title{font-weight:700;margin:8px 0 6px 0}
.dtf-gs-layers{border:1px solid #eee;border-radius:10px;background:#fff;overflow:hidden}
.dtf-gs-layer{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.dtf-gs-layer:last-child{border-bottom:none}
.dtf-gs-layer.active{background:#eef7ff}
.dtf-gs-layer small{opacity:.7}
.dtf-gs-inspector{border:1px solid #eee;border-radius:10px;background:#fff;padding:10px}
.dtf-gs-ins-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.dtf-gs-ins-row input{width:92px;height:32px;border:1px solid #ddd;border-radius:8px;padding:0 8px}
.dtf-gs-canvas-wrap{flex:1;position:relative;background:#fff}
.dtf-gs-rulers{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none}
.dtf-gs-ruler-top{position:absolute;left:44px;top:0;right:0;height:34px;background:#fafafa;border-bottom:1px solid #eee;overflow:visible}
.dtf-gs-ruler-left{position:absolute;left:0;top:44px;bottom:0;width:44px;background:#fafafa;border-right:1px solid #eee;overflow:visible}
.dtf-gs-stage-scroller{position:absolute;left:44px;top:44px;right:0;bottom:0;overflow:auto;background:#f6f6f6;outline:none}
.dtf-gs-stage{position:relative;margin:20px;background:transparent}
.dtf-gs-toast{position:fixed;bottom:20px;left:20px;z-index:9999;background:rgba(0,0,0,.85);color:#fff;padding:10px 12px;border-radius:10px;max-width:420px;display:none}
.dtf-gs-toast.show{display:block}
@media (max-width: 980px){
  .dtf-gs-main{flex-direction:column}
  .dtf-gs-left{width:100%;max-width:none;border-right:none;border-bottom:1px solid #eee}
}

.dtf-gs-length-note{font-size:12px;opacity:.75;padding:0 6px}

.dtf-gs-login{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:10px;padding:0 14px;text-decoration:none}


/* Busy overlay (export/save/add-to-cart) */
.dtf-gs-root{position:relative}
.dtf-gs-busy-overlay{
  position:absolute; inset:0;
  background:rgba(255,255,255,0.72);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.dtf-gs-busy-card{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.08);
}
.dtf-gs-spinner{
  width:22px; height:22px;
  border:3px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.55);
  border-radius:50%;
  animation: dtfGsSpin 0.9s linear infinite;
}
@keyframes dtfGsSpin { to { transform: rotate(360deg); } }
.dtf-gs-busy-text{font-weight:600}


/* Full-screen workspace toggle (hide footer) */
body.dtf-gs-hide-footer footer,
body.dtf-gs-hide-footer #colophon,
body.dtf-gs-hide-footer .site-footer,
body.dtf-gs-hide-footer .elementor-location-footer,
body.dtf-gs-hide-footer .footer,
body.dtf-gs-hide-footer .page-footer{
  display:none !important;
}


/* Workspace background: outside canvas bright white, canvas area remains grey */
.dtf-gs-workspace,
.dtf-gs-stage-wrap,
.dtf-gs-stage{
  background:#ffffff !important;
}
/* Canvas sheet (grid area) background stays grey */
.dtf-gs-sheet,
.dtf-gs-sheet *{
  /* keep existing styles; sheet bg is controlled below if needed */
}


/* Global busy overlay (covers entire page) */
.dtf-gs-global-busy{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2147483000;
}
.dtf-gs-global-busy.is-on{ display:flex; }
.dtf-gs-global-busy-card{
  background:#fff;
  border-radius:16px;
  padding:18px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 18px 50px rgba(0,0,0,0.25);
  max-width:min(520px, 92vw);
}
.dtf-gs-global-busy-spinner{
  width:26px; height:26px;
  border:4px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.65);
  border-radius:50%;
  animation: dtfGsSpin 0.9s linear infinite;
  flex:0 0 auto;
}
.dtf-gs-global-busy-text{
  font-weight:700;
  line-height:1.2;
}
.dtf-gs-global-busy-sub{
  font-weight:500;
  opacity:.75;
  margin-top:2px;
  font-size: 13px;
}


/* Ensure ruler canvases use their full box and don't get clipped/scaled */
.dtf-gs-ruler-top, .dtf-gs-ruler-left{pointer-events:none}
.dtf-gs-ruler-top, .dtf-gs-ruler-left{box-sizing:border-box}
.dtf-gs-ruler-top canvas, .dtf-gs-ruler-left canvas{display:block}