/* DRLAAK Designer Tool - Frontend Styles - WordPress Compatible */
@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;700;800&family=Cousine:wght@400;700&family=Cutive+Mono&display=swap');

/* ===== WRAPPER — contains the entire tool ===== */
#drlaak-wrapper {
  --bg: #F5F5F5;
  --bg2: #FFFFFF;
  --bg3: #F0F0F0;
  --panel: #FFFFFF;
  --border: #E0E0E0;
  --border2: #CCCCCC;
  --text: #111111;
  --text2: #555555;
  --text3: #888888;
  --black: #111111;
  --gold: #B8860B;
  --gold2: #DAA520;
  --accent: #111111;
  --red: #C0392B;
  --green: #1E7A4A;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow2: 0 4px 24px rgba(0,0,0,0.12);
  --sb: 300px;
  --pr: 220px;
  --hdr: 52px;
  --radius: 8px;

  position: relative;
  width: 100%;
  /* No min-width — wrapper fills the theme container and uses 100% width */
  height: 100vh; /* overridden to calc(100vh-32px) by page CSS when admin bar present */
  min-height: 600px;
  overflow: hidden;
  font-family: 'Cousine', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
/* If no WP admin bar, use full height */
/* height handled by class-drlaak-page.php inline CSS */

/* Reset inside wrapper only */
#drlaak-wrapper *, #drlaak-wrapper *::before, #drlaak-wrapper *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}
#drlaak-wrapper a { text-decoration: none; }
#drlaak-wrapper ul { list-style: none; }

/* SCROLLBARS */
#drlaak-wrapper ::-webkit-scrollbar { width:4px; height:4px; }
#drlaak-wrapper ::-webkit-scrollbar-track { background:transparent; }
#drlaak-wrapper ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ===== HEADER ===== */
/* Use position:sticky/relative inside the wrapper, not fixed */
#drlaak-wrapper #hdr {
  position: relative;
  height: var(--hdr);
  z-index: 300;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
#drlaak-wrapper .brand { display:flex; align-items:center; gap:10px; flex-shrink:0; padding-right:16px; border-right:1px solid #333; }
#drlaak-wrapper .brand-logo {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#DAA520,#8B6914);
  display:flex; align-items:center; justify-content:center;
  font-family:'BioRhyme',serif; font-weight:900; font-size:12px; color:#000;
  box-shadow:0 0 8px rgba(218,165,32,0.5);
}
#drlaak-wrapper .brand-text { line-height:1.25; }
#drlaak-wrapper .brand-name { font-family:'BioRhyme',serif; font-size:13px; font-weight:700; color:#DAA520; letter-spacing:0.06em; }
#drlaak-wrapper .brand-sub { font-size:9px; color:#888; letter-spacing:0.15em; text-transform:uppercase; font-family:'Cutive Mono',monospace; }
#drlaak-wrapper .hdr-tools { display:flex; align-items:center; gap:3px; flex:1; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
#drlaak-wrapper .hdr-tools::-webkit-scrollbar { display:none; }
#drlaak-wrapper .hb {
  background:none; border:1px solid transparent; border-radius:5px; color:#aaa;
  cursor:pointer; padding:5px 9px; font-size:11px; font-family:'Cousine',sans-serif;
  display:flex; align-items:center; gap:4px; transition:all 0.15s; white-space:nowrap; flex-shrink:0;
}
#drlaak-wrapper .hb:hover { border-color:#444; color:#fff; background:#222; }
#drlaak-wrapper .hb.on { background:#DAA520; color:#000; border-color:transparent; font-weight:600; }
#drlaak-wrapper .hb.danger:hover { border-color:#C0392B; color:#e74c3c; }
#drlaak-wrapper .hsep { width:1px; height:22px; background:#333; margin:0 3px; flex-shrink:0; }
#drlaak-wrapper .hdr-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#drlaak-wrapper .checkout-btn {
  background:linear-gradient(135deg,#DAA520,#8B6914); color:#000; border:none;
  padding:7px 16px; border-radius:var(--radius); font-weight:700; font-size:12px;
  cursor:pointer; display:flex; align-items:center; gap:6px; font-family:'Cousine',sans-serif;
  box-shadow:0 2px 8px rgba(218,165,32,0.4); transition:all 0.15s; letter-spacing:0.02em;
}
#drlaak-wrapper .checkout-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ===== APP LAYOUT — flex row fills remaining height ===== */
#drlaak-wrapper #app {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ===== SIDEBAR ===== */
#drlaak-wrapper #sb {
  width:var(--sb); flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  box-shadow:var(--shadow); overflow:hidden;
}
#drlaak-wrapper .tab-nav { display:flex; border-bottom:1px solid var(--border); background:#FAFAFA; flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
#drlaak-wrapper .tab-nav::-webkit-scrollbar { display:none; }
#drlaak-wrapper .tnav {
  flex:1; min-width:40px; padding:8px 2px 7px; border:none; background:none; cursor:pointer;
  color:var(--text3); font-size:10px; display:flex; flex-direction:column; align-items:center;
  gap:2px; transition:all 0.15s; position:relative; font-family:'Cousine',sans-serif;
}
#drlaak-wrapper .tnav .ticon { font-size:14px; line-height:1; }
#drlaak-wrapper .tnav .tlabel { font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; }
#drlaak-wrapper .tnav.on { color:var(--black); }
#drlaak-wrapper .tnav.on::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:var(--black); border-radius:1px 1px 0 0; }
#drlaak-wrapper .tpane { display:none; flex:1; overflow-y:auto; padding:12px; flex-direction:column; gap:10px; }
#drlaak-wrapper .tpane.on { display:flex; }

/* ===== CANVAS AREA ===== */
#drlaak-wrapper #cw { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg); position:relative; }
#drlaak-wrapper #cinfo {
  height:28px; flex-shrink:0; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; gap:10px;
}
#drlaak-wrapper .ctag { font-size:10px; color:var(--text3); font-family:'Cutive Mono',monospace; }
#drlaak-wrapper .csep { width:1px; height:12px; background:var(--border); }
#drlaak-wrapper #stage {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#E8E8E8;
  background-image: radial-gradient(circle, #D0D0D0 1px, transparent 1px);
  background-size: 20px 20px;
  position:relative; min-height: 0;
}
/* Keep Fabric canvas elements above the finish bg canvas */
#drlaak-wrapper #stage .canvas-container { z-index: 1; position: relative; }
#drlaak-wrapper #stage .canvas-container canvas { background: transparent !important; }
/* ── Side switcher bar — now sits ABOVE the canvas ── */
#drlaak-wrapper #side-bar {
  flex-shrink:0;
  background:var(--bg2);
  border-bottom:2px solid var(--border);
  padding:8px 16px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* Pill-shaped toggle container */
#drlaak-wrapper .side-switch {
  display:flex;
  align-items:center;
  gap:0;
  background:var(--bg3);
  border:1.5px solid var(--border);
  border-radius:30px;
  padding:3px;
}
#drlaak-wrapper .side-lbl {
  font-size:11px; color:var(--text2); font-weight:600;
  margin-right:10px; letter-spacing:0.04em; text-transform:uppercase;
  font-family:'Cousine',sans-serif;
}
#drlaak-wrapper .side-btn {
  padding:6px 22px;
  border:none;
  border-radius:26px;
  background:transparent;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:all 0.18s;
  font-family:'Cousine',sans-serif;
  color:var(--text2);
  white-space:nowrap;
}
#drlaak-wrapper .side-btn.on {
  background:var(--black);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
#drlaak-wrapper .side-btn:not(.on):hover {
  color:var(--black);
  background:rgba(0,0,0,0.06);
}

/* Price display — sits below the A/B buttons, centred */
#drlaak-wrapper .price-strip {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  font-family:'Cutive Mono',monospace;
}
#drlaak-wrapper .price-label {
  font-size:9px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
#drlaak-wrapper .price-big {
  font-size:22px;
  font-weight:800;
  color:var(--black);
  font-family:'BioRhyme',serif;
  line-height:1;
}
/* A+B breakdown sits inline after the big price */
#drlaak-wrapper .price-strip-inner {
  display:flex;
  align-items:baseline;
  gap:6px;
}
/* Gold dot separator between big price and breakdown */
#drlaak-wrapper .price-strip-inner::before {
  content:'·';
  color:var(--gold2);
  font-size:14px;
  font-weight:700;
}
#drlaak-wrapper #zbar {
  height:30px; flex-shrink:0; background:var(--bg3); border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 10px; gap:6px;
}
#drlaak-wrapper .zb { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; padding:0 5px; }
#drlaak-wrapper .zb:hover { color:var(--black); }
#drlaak-wrapper #zval { font-size:10px; color:var(--text3); min-width:36px; text-align:center; font-family:'Cutive Mono',monospace; }
#drlaak-wrapper #zrange { flex:1; accent-color:var(--black); }

/* ===== PROPS PANEL ===== */
#drlaak-wrapper #props {
  width:var(--pr); flex-shrink:0; background:var(--panel);
  border-left:1px solid var(--border); overflow-y:auto;
  padding:12px; display:flex; flex-direction:column; gap:8px;
}

/* ===== SHARED COMPONENTS ===== */
#drlaak-wrapper .sec { font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text3); margin-bottom:5px; font-weight:600; }
#drlaak-wrapper .card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
#drlaak-wrapper .card.dark { background:var(--black); color:#fff; border-color:#333; }
#drlaak-wrapper .row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
#drlaak-wrapper .row:last-child { margin-bottom:0; }
#drlaak-wrapper .lbl { font-size:10px; color:var(--text2); min-width:42px; flex-shrink:0; }
#drlaak-wrapper .val { font-size:10px; min-width:28px; text-align:right; color:var(--text3); font-family:'Cutive Mono',monospace; }

#drlaak-wrapper input[type="number"],
#drlaak-wrapper select,
#drlaak-wrapper textarea {
  background:#fff; border:1px solid var(--border); color:var(--text);
  border-radius:5px; padding:4px 7px; font-size:11px; outline:none;
  font-family:'Cousine',sans-serif; transition:border-color 0.15s;
}
#drlaak-wrapper input[type="number"]:focus,
#drlaak-wrapper select:focus,
#drlaak-wrapper textarea:focus { border-color:var(--black); }
#drlaak-wrapper input[type="number"] { width:58px; }
#drlaak-wrapper select { cursor:pointer; }
#drlaak-wrapper input[type="range"] { flex:1; accent-color:var(--black); cursor:pointer; }
#drlaak-wrapper input[type="color"] { width:30px; height:26px; padding:1px; cursor:pointer; border-radius:4px; background:#fff; border:1px solid var(--border); }
#drlaak-wrapper textarea { width:100%; resize:none; min-height:56px; font-size:12px; }

#drlaak-wrapper .btn {
  border:1px solid var(--border2); border-radius:5px; cursor:pointer;
  font-size:11px; padding:6px 10px; font-family:'Cousine',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:all 0.15s; background:#fff; color:var(--text2);
}
#drlaak-wrapper .btn:hover { border-color:var(--black); color:var(--black); }
#drlaak-wrapper .btn.prim { background:var(--black); color:#fff; border-color:var(--black); font-weight:600; }
#drlaak-wrapper .btn.prim:hover { background:#333; }
#drlaak-wrapper .btn.gold { background:linear-gradient(135deg,#DAA520,#8B6914); color:#000; border:none; font-weight:700; }
#drlaak-wrapper .btn.gold:hover { filter:brightness(1.1); }
#drlaak-wrapper .btn.full { width:100%; }
#drlaak-wrapper .btn.sm { padding:4px 8px; font-size:10px; }
#drlaak-wrapper .btn.danger { color:var(--text3); }
#drlaak-wrapper .btn.danger:hover { border-color:var(--red); color:var(--red); background:rgba(192,57,43,0.05); }

/* ===== STAMP SIZE TABS ===== */
#drlaak-wrapper .sz-wrap { display:flex; gap:5px; }
#drlaak-wrapper .szb {
  flex:1; border:2px solid var(--border); border-radius:var(--radius);
  background:#fff; cursor:pointer; text-align:center; padding:6px 4px; transition:all 0.15s;
}
#drlaak-wrapper .szb:hover { border-color:var(--black); }
#drlaak-wrapper .szb.on { border-color:var(--black); background:var(--black); }
#drlaak-wrapper .szb .sz-name { display:block; font-size:10px; font-weight:600; color:var(--text2); }
#drlaak-wrapper .szb.on .sz-name { color:#fff; }
#drlaak-wrapper .szb .sz-price { display:block; font-size:9px; color:var(--gold2); font-family:'Cutive Mono',monospace; margin-top:2px; }
#drlaak-wrapper .szb.on .sz-price { color:#DAA520; }

/* ===== STAMP GRID ===== */
#drlaak-wrapper .sgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#drlaak-wrapper .scard {
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:8px 4px 6px; cursor:pointer; text-align:center; transition:all 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
#drlaak-wrapper .scard:hover { border-color:var(--black); box-shadow:0 2px 8px rgba(0,0,0,0.1); transform:translateY(-1px); }
#drlaak-wrapper .scard:active { transform:scale(0.97); }
#drlaak-wrapper .scard img { object-fit:contain; }
#drlaak-wrapper .scard .sname { font-size:8px; color:var(--text3); line-height:1.3; }
#drlaak-wrapper .scard-img { display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
#drlaak-wrapper .sprice { font-size:10px; color:#B87333; font-weight:700; display:block; margin-top:1px; }
#drlaak-wrapper #stamp-count { font-size:11px; color:#9A9088; margin-left:8px; }

/* ===== COLOR PALETTE ===== */
#drlaak-wrapper .cpalette { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
#drlaak-wrapper .csw {
  aspect-ratio:1; border-radius:3px; cursor:pointer; border:2px solid transparent;
  transition:transform 0.12s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
#drlaak-wrapper .csw:hover { transform:scale(1.15); }
#drlaak-wrapper .csw.on { border-color:var(--black); box-shadow:0 0 0 1px var(--black); }

/* ===== SHAPE GRID ===== */
#drlaak-wrapper .shapegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
#drlaak-wrapper .shapebtn {
  aspect-ratio:1; background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--text2); transition:all 0.15s;
}
#drlaak-wrapper .shapebtn:hover { border-color:var(--black); color:var(--black); background:var(--bg3); }

/* ===== FINISH ===== */
#drlaak-wrapper .fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#drlaak-wrapper .fcard {
  border:2px solid var(--border); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:all 0.2s; background:#fff;
}
#drlaak-wrapper .fcard:hover { border-color:var(--black); box-shadow:var(--shadow); }
#drlaak-wrapper .fcard.on { border-color:var(--black); box-shadow:0 0 0 2px var(--black); }
#drlaak-wrapper .fimg { width:100%; height:60px; background-size:cover; background-position:center; }
#drlaak-wrapper .fname { font-size:10px; text-align:center; padding:5px 4px; color:var(--text2); font-weight:500; }
#drlaak-wrapper .fcard.on .fname { color:var(--black); font-weight:700; }

/* ===== LAYER LIST ===== */
#drlaak-wrapper .layeritem {
  background:#fff; border:1px solid var(--border); border-radius:5px;
  padding:6px 8px; display:flex; align-items:center; gap:6px; cursor:pointer;
  transition:all 0.15s; font-size:10px;
}
#drlaak-wrapper .layeritem:hover { border-color:var(--border2); }
#drlaak-wrapper .layeritem.sel { border-color:var(--black); background:var(--bg3); }
#drlaak-wrapper .lico { font-size:12px; flex-shrink:0; }
#drlaak-wrapper .lname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); }
#drlaak-wrapper .ldel { background:none; border:none; color:var(--text3); cursor:pointer; font-size:11px; padding:1px 4px; border-radius:3px; }
#drlaak-wrapper .ldel:hover { color:var(--red); background:rgba(192,57,43,0.08); }

/* ===== ORDER ROWS ===== */
#drlaak-wrapper .orow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; }
#drlaak-wrapper .orow:last-child { border-bottom:none; }
#drlaak-wrapper .olbl { color:var(--text2); }
#drlaak-wrapper .oval { font-weight:600; font-family:'Cutive Mono',monospace; }

/* ===== ARC TEXT CONTROLS ===== */
#drlaak-wrapper .arc-btns { display:flex; gap:5px; }
#drlaak-wrapper .arc-btn {
  flex:1; padding:6px; border:1.5px solid var(--border); border-radius:5px;
  background:#fff; cursor:pointer; text-align:center; font-size:10px;
  transition:all 0.15s; font-family:'Cousine',sans-serif; color:var(--text2);
}
#drlaak-wrapper .arc-btn:hover { border-color:var(--black); color:var(--black); }
#drlaak-wrapper .arc-btn.on { background:var(--black); color:#fff; border-color:var(--black); }

/* ===== OVERLAYS — fixed to viewport but still scoped ===== */
#drlaak-wrapper .overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99500;
  background:rgba(0,0,0,0.6); align-items:center; justify-content:center;
}
#drlaak-wrapper .overlay.show { display:flex; }
#drlaak-wrapper .obox {
  background:#fff; border-radius:12px; padding:22px; max-width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
#drlaak-wrapper .obox h3 { font-family:'BioRhyme',serif; font-size:18px; margin-bottom:14px; color:var(--black); }
#drlaak-wrapper #ink-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:12px; }
#drlaak-wrapper .isw {
  aspect-ratio:1; border-radius:4px; cursor:pointer; border:2px solid transparent;
  transition:transform 0.12s; box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
#drlaak-wrapper .isw:hover { transform:scale(1.12); }
#drlaak-wrapper .isw.on { border-color:#000; box-shadow:0 0 0 2px rgba(0,0,0,0.3); }
#drlaak-wrapper .prevcvs { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
#drlaak-wrapper .prevside { text-align:center; }
#drlaak-wrapper .prevside span { display:block; font-size:10px; color:var(--text3); margin-top:6px; }
#drlaak-wrapper .prevcircle { border-radius:50%; overflow:hidden; border:2px solid var(--border); }

/* ===== MOBILE TOGGLES ===== */
#drlaak-wrapper #sb-tog,
#drlaak-wrapper #pr-tog {
  display:none; position:absolute; z-index:400; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:50%;
  align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 3px 12px rgba(0,0,0,0.2);
}
#drlaak-wrapper #sb-tog { bottom:65px; left:10px; background:var(--black); color:#fff; }
#drlaak-wrapper #pr-tog { bottom:65px; right:10px; background:#fff; color:var(--black); border:1px solid var(--border); }

/* ── Download instruction strip below canvas ── */
#drlaak-wrapper #dl-tip {
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 14px; background:#FFF8E7;
  border-top:1px solid #F0C040; flex-shrink:0;
  font-size:11px; color:#5A4000; line-height:1.5;
}
#drlaak-wrapper .dl-tip-ico { font-size:14px; flex-shrink:0; margin-top:1px; }
#drlaak-wrapper .dl-tip-txt { flex:1; }
#drlaak-wrapper .dl-tip-link {
  background:none; border:none; padding:0; margin:0;
  color:#B87333; font-weight:700; font-size:11px;
  cursor:pointer; text-decoration:underline; font-family:inherit;
}
#drlaak-wrapper .dl-tip-link:hover { color:#DAA520; }


/* ── Screen recorder compatibility ─────────────────────────────────────────
   GPU-composited layers (created by position:fixed, transform, will-change,
   or high z-index) are captured differently by screen recorders like Camtasia,
   OBS, and Windows Game Bar — they appear blank or frozen in the recording.
   These rules ensure the canvas renders in the normal CPU compositing path
   so screen recorders capture it correctly alongside the rest of the screen. */

/* Prevent Fabric.js canvas from being promoted to its own GPU layer */
#drlaak-wrapper #stage canvas,
#drlaak-wrapper #stage .canvas-container,
#drlaak-wrapper #stage .canvas-container canvas {
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    isolation: auto !important;
}

/* Prevent the stage container from creating a stacking context */
#drlaak-wrapper #stage {
    will-change: auto !important;
    transform: none !important;
    isolation: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET (≤900px): slide-in sidebar, hide labels
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  #drlaak-wrapper { --sb:300px; --pr:240px; }
  #drlaak-wrapper #sb {
    position:absolute; left:0; top:0; bottom:0; z-index:200;
    transform:translateX(-100%); transition:transform 0.25s;
    box-shadow:4px 0 20px rgba(0,0,0,0.15);
  }
  #drlaak-wrapper #sb.open { transform:translateX(0); }
  #drlaak-wrapper #props {
    position:absolute; right:0; top:0; bottom:0; z-index:200;
    transform:translateX(100%); transition:transform 0.25s;
  }
  #drlaak-wrapper #props.open { transform:translateX(0); }
  #drlaak-wrapper #sb-tog, #drlaak-wrapper #pr-tog { display:flex; }
  #drlaak-wrapper .hb .hb-lbl { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (≤600px): full bottom-tab redesign
   The sidebar and props panel are replaced by a persistent bottom tab bar
   and a slide-up bottom sheet — all 6 tabs always visible.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:600px) {

  /* ── Wrapper: column layout, account for bottom bar ── */
  #drlaak-wrapper {
    flex-direction: column !important;
    --mob-tab-h: 60px;       /* bottom tab bar height */
    --mob-sheet-h: 52vh;     /* slide-up panel height */
    --hdr: 48px;
  }

  /* ── Header: compact — just logo + Pay Now ── */
  #drlaak-wrapper #hdr {
    padding: 0 10px;
    gap: 6px;
    flex-shrink: 0;
  }
  #drlaak-wrapper .brand-sub,
  #drlaak-wrapper .brand-name { display:none; }
  #drlaak-wrapper .brand { border-right:none; padding-right:4px; }
  #drlaak-wrapper .brand-logo { width:30px; height:30px; font-size:11px; }

  /* Collapse most toolbar buttons on mobile — keep Undo + Ink + Clear */
  #drlaak-wrapper .hdr-tools .hsep { display:none; }
  #drlaak-wrapper .hdr-tools .hb { padding:5px 6px; font-size:11px; }
  #drlaak-wrapper .hb .hb-lbl { display:none; }
  /* Hide duplicate/layer/flip/center/preview/download from hdr on mobile
     — these are accessible from the bottom sheet tabs instead */
  #drlaak-wrapper .hb[onclick*="dupSel"],
  #drlaak-wrapper .hb[onclick*="moveLyr"],
  #drlaak-wrapper .hb[onclick*="doFlip"],
  #drlaak-wrapper .hb[onclick*="doCenter"],
  #drlaak-wrapper .hb[onclick*="openPreview"],
  #drlaak-wrapper .hb[onclick*="doDownload"] { display:none; }

  /* Pay Now button: compact */
  #drlaak-wrapper .checkout-btn {
    font-size:11px; padding:6px 10px; border-radius:16px;
  }

  /* ── App area: takes remaining height above bottom bar ── */
  #drlaak-wrapper #app {
    flex: 1;
    flex-direction: column !important;
    overflow: hidden;
    /* Bottom bar + possible sheet */
    padding-bottom: var(--mob-tab-h);
  }

  /* ── Desktop sidebar: HIDDEN on mobile (replaced by bottom sheet) ── */
  #drlaak-wrapper #sb {
    display: none !important;
  }

  /* ── Desktop props panel: HIDDEN on mobile ── */
  #drlaak-wrapper #props {
    display: none !important;
  }

  /* Desktop toggle buttons: hide */
  #drlaak-wrapper #sb-tog,
  #drlaak-wrapper #pr-tog { display:none !important; }

  /* ── Canvas area fills all available space ── */
  #drlaak-wrapper #cw {
    flex: 1;
    min-height: 0;
    width: 100% !important;
  }

  /* ── Stage fills cw ── */
  #drlaak-wrapper #stage {
    flex: 1;
    min-height: 0;
  }

  /* ── Side bar: on mobile switch back to row layout to save vertical space ── */
  #drlaak-wrapper #side-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    flex-shrink: 0;
  }
  #drlaak-wrapper .side-lbl { font-size:9px; margin-right:5px; }
  #drlaak-wrapper .side-btn { font-size:10px; padding:4px 12px; }
  #drlaak-wrapper .price-strip {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }
  #drlaak-wrapper .price-strip-inner::before { display:none; }
  #drlaak-wrapper .price-big { font-size:18px; }
  #drlaak-wrapper .price-label { font-size:8px; }

  /* ── Zoom bar: compact ── */
  #drlaak-wrapper #zbar { padding:3px 10px; }

  /* ── Download tip: 2 lines max, smaller ── */
  #drlaak-wrapper #dl-tip {
    padding: 5px 10px;
    font-size: 10px;
  }

  /* cinfo bar: smaller */
  #drlaak-wrapper #cinfo {
    padding: 3px 10px;
    font-size: 9px;
  }
  #drlaak-wrapper .ctag { font-size:9px; }

  /* ════════════════════════════════════════════════════════════
     BOTTOM TAB BAR — always visible, all 6 tabs
     ════════════════════════════════════════════════════════════ */
  #drlaak-wrapper #mob-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mob-tab-h);
    background: #111111;
    border-top: 2px solid #333;
    z-index: 9000;
    align-items: stretch;
  }
  #drlaak-wrapper .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 9px;
    font-family: 'Cousine', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
  }
  #drlaak-wrapper .mob-tab .mob-ico { font-size: 18px; line-height: 1; }
  #drlaak-wrapper .mob-tab.active {
    color: #DAA520;
    background: rgba(218,165,32,0.08);
    border-top: 2px solid #DAA520;
    margin-top: -2px;
  }

  /* ════════════════════════════════════════════════════════════
     BOTTOM SHEET — slides up over canvas when a tab is tapped
     ════════════════════════════════════════════════════════════ */
  #drlaak-wrapper #mob-sheet {
    display: block !important;
    position: fixed;
    bottom: var(--mob-tab-h);
    left: 0; right: 0;
    height: var(--mob-sheet-h);
    background: #fff;
    border-top: 1px solid #ddd;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    z-index: 8500;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #drlaak-wrapper #mob-sheet.open {
    transform: translateY(0);
  }

  /* Sheet drag handle */
  #drlaak-wrapper #mob-sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 4px;
    flex-shrink: 0;
  }
  #drlaak-wrapper #mob-sheet-handle::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: #ddd;
    border-radius: 2px;
  }

  /* Sheet close button */
  #drlaak-wrapper #mob-sheet-close {
    position: absolute;
    top: 6px; right: 12px;
    background: none; border: none;
    font-size: 20px; color: #999;
    cursor: pointer; line-height: 1;
    padding: 4px;
  }

  /* Sheet content area — scrollable */
  #drlaak-wrapper #mob-sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 16px;
  }

  /* Sheet section heading */
  #drlaak-wrapper #mob-sheet-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    font-family: 'BioRhyme', serif;
    padding: 0 14px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
  }

  /* Dim canvas when sheet is open */
  #drlaak-wrapper #mob-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: var(--mob-tab-h);
    background: rgba(0,0,0,0.35);
    z-index: 8000;
  }
  #drlaak-wrapper #mob-overlay.show { display: block; }

  /* Stamp grid: 3 columns on mobile */
  #drlaak-wrapper .sgrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  #drlaak-wrapper .scard { padding: 6px 4px; }
  #drlaak-wrapper .scard-img img { width: 36px !important; height: 36px !important; }
  #drlaak-wrapper .sname { font-size: 8px; }
  #drlaak-wrapper .sprice { font-size: 8px; }

  /* Shapes grid: 4 columns on mobile */
  #drlaak-wrapper .shapegrid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Order pane: reduce padding */
  #drlaak-wrapper .orow { padding: 4px 0; }
  #drlaak-wrapper .obox { padding: 12px; }
}

/* Very small phones */
@media (max-width:380px) {
  #drlaak-wrapper { --mob-sheet-h: 60vh; }
  #drlaak-wrapper .mob-tab .mob-ico { font-size: 15px; }
}

/* STAMP SEARCH */
#drlaak-wrapper #stamp-search:focus { border-color:var(--black); box-shadow:0 0 0 2px rgba(0,0,0,0.08); }

/* EMPTY STATE */
#drlaak-wrapper .empty { text-align:center; color:var(--text3); font-size:10px; padding:18px 8px; line-height:2; }
#drlaak-wrapper .empty .eico { font-size:24px; display:block; margin-bottom:6px; }

/* TOAST */
#drlaak-wrapper #toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--black); color:#fff; padding:8px 18px; border-radius:20px;
  font-size:11px; font-weight:600; z-index:99999; opacity:0;
  transition:opacity 0.2s; pointer-events:none; white-space:nowrap;
  font-family:'Cutive Mono',monospace; letter-spacing:0.03em;
}
#drlaak-wrapper #toast.show { opacity:1; }

/* BADGE */
#drlaak-wrapper .badge {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font-size:9.5px; color:var(--text2); line-height:1.8;
}
#drlaak-wrapper .badge strong { color:var(--black); }