/* =========================================================
   DBG Signs & Graphics — Design Studio
   A built-in canvas designer for business cards, flyers,
   brochures, decals and more. Matches the store design system.
   ========================================================= */

.dsg-mask{
  position:fixed;inset:0;background:rgba(6,26,51,.72);z-index:400;
  display:none;align-items:stretch;justify-content:center;padding:0;
}
.dsg-mask.open{display:flex}

.dsg{
  background:#eef3f8;width:100%;height:100%;display:flex;flex-direction:column;
  overflow:hidden;
}

/* ---------- header ---------- */
.dsg-head{
  display:flex;align-items:center;gap:14px;padding:12px 18px;background:#fff;
  border-bottom:1px solid var(--silver-2);flex:0 0 auto;
}
.dsg-head .ttl{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dsg-head .ttl h3{
  color:var(--navy-800);font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dsg-head .ttl .sz{font-size:.76rem;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dsg-head .spacer{flex:1}
.dsg-head .x{
  background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--slate);
}
.dsg-head .x:hover{color:var(--navy-800)}
.dsg-head .zoom{display:flex;align-items:center;gap:6px}
.dsg-head .zoom button{
  width:34px;height:34px;border-radius:9px;border:1.5px solid var(--silver);background:#fff;
  cursor:pointer;font-weight:700;color:var(--navy-800);font-size:1.1rem;line-height:1;
}
.dsg-head .zoom button:hover{border-color:var(--blue-500);color:var(--blue-600)}
.dsg-head .zoom .zval{font-size:.8rem;color:var(--slate);min-width:42px;text-align:center;font-weight:600}

/* ---------- body layout ---------- */
.dsg-body{flex:1 1 auto;display:flex;min-height:0}

/* left toolbar */
.dsg-tools{
  flex:0 0 190px;background:#fff;border-right:1px solid var(--silver-2);
  padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}
.dsg-tools .grp{display:flex;flex-direction:column;gap:8px}
.dsg-tools .grp .lbl{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  color:var(--slate);font-weight:700;
}
.dsg-tool{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--silver-2);background:#fff;cursor:pointer;transition:.18s;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.92rem;color:var(--navy-800);text-align:left;
}
.dsg-tool:hover{border-color:var(--blue-500);background:#f2f8fd;color:var(--blue-600)}
.dsg-tool svg{width:18px;height:18px;flex:0 0 18px}
.dsg-tool.active{border-color:var(--blue-600);background:#eaf4fc;color:var(--blue-600)}

.dsg-tools select,.dsg-tools input[type=color]{
  width:100%;padding:9px 10px;border:1.5px solid var(--silver);border-radius:9px;
  font-family:var(--font-body);font-size:.9rem;color:var(--ink);background:#fff;
}
.dsg-tools input[type=color]{height:40px;padding:3px;cursor:pointer}
.dsg-color-row{display:flex;align-items:center;gap:8px}
.dsg-color-row input[type=color]{flex:1}
.dsg-color-row .hex{font-size:.78rem;color:var(--slate);width:64px;text-transform:uppercase}

/* stage */
.dsg-stage{
  flex:1 1 auto;min-width:0;overflow:auto;display:flex;align-items:flex-start;
  justify-content:center;padding:28px;background:
    repeating-conic-gradient(#e3eaf1 0% 25%, #eef3f8 0% 50%) 50%/26px 26px;
}
.dsg-artboard-wrap{position:relative;margin:auto;box-shadow:0 18px 50px rgba(6,26,51,.28);background:#fff}
.dsg-artboard-wrap canvas{display:block;touch-action:none;cursor:default}
.dsg-canvas-holder{position:relative;line-height:0}
.dsg-inline-edit{
  position:absolute;z-index:5;border:2px solid var(--blue-600);border-radius:4px;
  background:#fff;color:#0a2342;font-family:var(--font-body);resize:none;outline:none;
  padding:2px 4px;line-height:1.2;overflow:hidden;box-shadow:0 6px 20px rgba(6,26,51,.25);
}
.dsg-hint{
  position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:.78rem;color:var(--slate);
}

/* right panel */
.dsg-panel{
  flex:0 0 268px;background:#fff;border-left:1px solid var(--silver-2);
  padding:16px;overflow-y:auto;
}
.dsg-panel .ph{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--navy-800);
  font-size:1.05rem;margin-bottom:4px;
}
.dsg-panel .psub{font-size:.8rem;color:var(--slate);margin-bottom:14px}
.dsg-field{margin-bottom:12px}
.dsg-field label{
  display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--slate);margin-bottom:5px;
}
.dsg-field input[type=text],.dsg-field input[type=number],.dsg-field select,.dsg-field textarea{
  width:100%;padding:9px 10px;border:1.5px solid var(--silver);border-radius:9px;
  font-family:var(--font-body);font-size:.9rem;color:var(--ink);background:#fff;
}
.dsg-field textarea{min-height:70px;resize:vertical;line-height:1.4}
.dsg-field input[type=color]{width:100%;height:40px;padding:3px;border:1.5px solid var(--silver);border-radius:9px;cursor:pointer}
.dsg-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dsg-seg{display:flex;gap:6px}
.dsg-seg button{
  flex:1;padding:8px;border:1.5px solid var(--silver);background:#fff;border-radius:8px;cursor:pointer;
  font-weight:700;color:var(--navy-800);
}
.dsg-seg button.active{border-color:var(--blue-600);background:#eaf4fc;color:var(--blue-600)}
.dsg-rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dsg-mini{
  flex:1;min-width:64px;padding:9px;border:1.5px solid var(--silver);background:#fff;border-radius:9px;
  cursor:pointer;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.82rem;color:var(--navy-800);
}
.dsg-mini:hover{border-color:var(--blue-500);color:var(--blue-600)}
.dsg-mini.danger:hover{border-color:#e0453a;color:#e0453a}
.dsg-empty{color:var(--slate);font-size:.86rem;line-height:1.5}
.dsg-layers{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.dsg-layer{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--silver-2);
  border-radius:9px;cursor:pointer;font-size:.84rem;color:var(--navy-800);
}
.dsg-layer:hover{border-color:var(--blue-500)}
.dsg-layer.active{border-color:var(--blue-600);background:#eaf4fc}
.dsg-layer svg{width:15px;height:15px;color:var(--blue-600);flex:0 0 15px}
.dsg-layer .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* footer */
.dsg-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff;
  border-top:1px solid var(--silver-2);
}
.dsg-foot .note{font-size:.8rem;color:var(--slate);flex:1}
.dsg-foot .btn{flex:0 0 auto;min-width:150px;justify-content:center}
.dsg-foot .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- product chooser ---------- */
.dsg-choose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dsg-choose{
  display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--silver-2);
  border-radius:var(--radius-sm);cursor:pointer;transition:.2s;background:#fff;text-align:left;
}
.dsg-choose:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.dsg-choose .ic{flex:0 0 42px;width:42px;height:42px;border-radius:10px;background:var(--paper);display:grid;place-items:center}
.dsg-choose .ic svg{width:22px;height:22px;color:var(--blue-600)}
.dsg-choose .tx b{display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase;color:var(--navy-800);font-size:1rem}
.dsg-choose .tx span{font-size:.8rem;color:var(--slate)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .dsg-body{flex-direction:column}
  .dsg-tools{
    flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--silver-2);gap:10px;padding:10px;
  }
  .dsg-tools .grp{flex-direction:row;flex:0 0 auto}
  .dsg-tools .grp .lbl{display:none}
  .dsg-tool{padding:9px 12px;white-space:nowrap}
  .dsg-tool .tlabel{display:none}
  .dsg-tools select,.dsg-tools input[type=color]{width:auto;min-width:120px}
  .dsg-color-row{min-width:150px}
  .dsg-stage{padding:16px}
  .dsg-panel{flex:0 0 auto;max-height:38vh;border-left:0;border-top:1px solid var(--silver-2)}
  .dsg-foot{flex-wrap:wrap}
  .dsg-foot .note{flex:1 1 100%;order:3}
  .dsg-foot .btn{flex:1}
}
@media (max-width:560px){
  .dsg-choose-grid{grid-template-columns:1fr}
  .dsg-head .ttl h3{font-size:1.05rem}
}

/* fold-line guide toggle */
.dsg-check{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink);cursor:pointer;user-select:none}
.dsg-check input{width:16px;height:16px;accent-color:var(--blue-600);cursor:pointer}
.dsg-hint{margin:2px 0 0;font-size:.74rem;line-height:1.35;color:var(--slate)}

/* ---------- two-sided toggle (Outside / Inside) ---------- */
.dsg-head .dsg-sides{
  display:inline-flex;align-items:center;gap:3px;padding:3px;
  background:#eef3f8;border:1.5px solid var(--silver-2);border-radius:11px;
}
.dsg-head .dsg-sides button{
  border:0;background:transparent;cursor:pointer;padding:8px 20px;border-radius:8px;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.82rem;color:var(--slate);transition:.16s;white-space:nowrap;
}
.dsg-head .dsg-sides button:hover:not(.active){color:var(--blue-600)}
.dsg-head .dsg-sides button.active{background:var(--navy-800);color:#fff;box-shadow:0 2px 8px rgba(10,35,66,.25)}