@import url('https://fonts.cdnfonts.com/css/academy');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Roboto:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&family=Lobster&family=Pacifico&family=Permanent+Marker&family=Bangers&family=Bungee&family=Russo+One&family=Black+Ops+One&family=Righteous&family=Fredoka+One&family=Luckiest+Guy&family=Passion+One:wght@400;700;900&family=Anton&family=Abril+Fatface&family=Alfa+Slab+One&family=Archivo+Black&family=Teko:wght@400;500;600;700&family=Staatliches&family=Rubik+Mono+One&family=Bungee+Shade&family=Press+Start+2P&family=Audiowide&family=Orbitron:wght@400;700;900&family=Racing+Sans+One&family=Saira+Stencil+One&family=Graduate&family=Faster+One&family=Monoton&family=Ultra&family=Bowlby+One+SC&family=Raleway:wght@400;700;900&family=Poppins:wght@400;600;700;800;900&family=Lato:wght@400;700;900&family=Open+Sans:wght@400;600;700;800&family=Nunito:wght@400;700;900&family=Merriweather:wght@400;700;900&family=Caveat:wght@400;700&family=Dancing+Script:wght@400;700&family=Great+Vibes&family=Sacramento&family=Satisfy&family=Kaushan+Script&family=Shadows+Into+Light&family=Indie+Flower&family=Amatic+SC:wght@400;700&family=Special+Elite&family=Rock+Salt&family=Creepster&family=Nosifer&family=Metal+Mania&family=Rubik+Burned&family=Rubik+Glitch&family=Silkscreen&family=DM+Serif+Display&family=Cinzel:wght@400;700;900&family=Philosopher:wght@400;700&family=Saira+Condensed:wght@400;600;700;800;900&family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg:           #0a0a0a;
  --bg2:          #111111;
  --panel:        #141414;
  --panel2:       #1c1c1c;
  --border:       #242424;
  --border2:      #2e2e2e;
  --accent:       #7c5cbf;
  --accent-h:     #6de4f0;
  --accent-dim:   rgba(124,92,191,0.15);
  --accent-light: rgba(124,92,191,0.08);
  --danger:       #ff4444;
  --success:      #7c5cbf;
  --warn:         #f59e0b;
  --text:         #ffffff;
  --text2:        #b8b8b8;
  --text3:        #888888;
  --radius:       8px;
  --shadow:       0 2px 12px rgba(0,0,0,0.6);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.8);
  --mag-grad:     linear-gradient(135deg, #7c5cbf 0%, #7c5cbf 50%, #7c5cbf 100%);
  --canvas-bg:    radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
  --cob-bg:       #0e0e0e;
  --cob-btn-bg:   #181818;
  --cob-btn-border:#2a2a2a;
  --cob-btn-text: #aaa;
  --tabs-bg:      #0e0e0e;
  --tabs-border:  #222;
  --tabs-btn-bg:  #181818;
  --tabs-btn-text:#666;
  --zoom-btn-bg:  #1a1a1a;
  --zoom-btn-border:#333;
  --zoom-btn-text:#aaa;
}

/* ─── LIGHT THEME ───
   MONOCHROME + PURPLE — brand constraint locked to purple, white, black only.
   No teal, no cyan, no green, no blue, no warm beige. Premium, restrained.
   Brand: #7C5CBF (existing). Surfaces: white & faint off-white. Text: near-black.
   Contrast (WCAG, all on white #FFFFFF unless noted):
     #0F0F12 (text)         → 19.1:1  (AAA, all sizes)
     #3A3A40 (text2)        →  9.9:1  (AAA Normal)
     #71717A (text3)        →  4.65:1 (AA Normal)
     #5A3F94 (purple text)  →  7.4:1  (AAA Normal)
     #FFFFFF on #6A4DAB     →  5.78:1 (AA Normal, AAA Large) — preferred button bg
     #FFFFFF on #7C5CBF     →  4.66:1 (AA Normal — semibold/bold OK)
     #FFFFFF on #5A3F94     →  7.4:1  (AAA) — pressed state
     #B45309 on #FEF3C7 (warn pill)   →  5.4:1 (AA)
     #B42318 on #FEE4E2 (danger pill) →  6.4:1 (AAA)
*/
[data-theme="light"] {
  /* Base surfaces — pure white panels, faint off-white page bg */
  --bg:           #FAFAFA;   /* page background — faint off-white, never flat */
  --bg2:          #F4F4F5;
  --panel:        #FFFFFF;   /* cards, panels — pure white */
  --panel2:       #F7F7F8;   /* inset surfaces (rows, headers) */
  --border:       #E4E4E7;
  --border2:      #D4D4D8;

  /* Text — near-black + charcoal grays, no chromatic tint */
  --text:         #0F0F12;
  --text2:        #3A3A40;
  --text3:        #71717A;

  /* Brand purple — the ONLY chromatic accent. Tints + shades only. */
  --accent:       #7C5CBF;   /* brand — same purple shipping today */
  --accent-h:     #6A4DAB;   /* hover/pressed — preferred button bg, AA white */
  --accent-active:#5A3F94;   /* deep, pressed */
  --accent-dim:   rgba(124,92,191,0.10);
  --accent-light: #F5F0FA;   /* subdued purple surface (banner bg, hover lift) */
  --accent-text:  #5A3F94;   /* purple text on white — AAA contrast */

  /* Status — minimal. Default to monochrome+purple; warn/danger only where strictly needed. */
  --success:      #5A3F94;   /* deep brand purple stands in for "success" — no green */
  --success-bg:   #F5F0FA;
  --success-text: #5A3F94;
  --warn:         #B45309;   /* warm amber — tasteful, only for true warnings */
  --warn-bg:      #FEF3C7;
  --warn-text:    #92400E;
  --danger:       #B42318;   /* muted red — only where semantics require */
  --danger-bg:    #FEE4E2;
  --danger-text:  #912018;
  --info:         #5A3F94;   /* informational uses brand purple */
  --info-bg:      #F5F0FA;
  --info-text:    #5A3F94;

  /* Shape & elevation — Shopify-flat, near-zero shadow */
  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    12px;
  --shadow:       0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05);
  --shadow-md:    0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg:    0 4px 16px rgba(0,0,0,0.08);

  /* Brand gradient — monochromatic purple, no cyan crossover */
  --mag-grad:     linear-gradient(135deg, #7C5CBF 0%, #5A3F94 50%, #7C5CBF 100%);

  /* Canvas surround */
  --canvas-bg:    #EFEFF1;

  /* Builder chrome sub-tokens */
  --cob-bg:       #F4F4F5;
  --cob-btn-bg:   #FFFFFF;
  --cob-btn-border:#D4D4D8;
  --cob-btn-text: #3A3A40;
  --tabs-bg:      #F4F4F5;
  --tabs-border:  #D4D4D8;
  --tabs-btn-bg:  #FFFFFF;
  --tabs-btn-text:#71717A;
  --zoom-btn-bg:  #FFFFFF;
  --zoom-btn-border:#D4D4D8;
  --zoom-btn-text:#3A3A40;
}

/* ─── Light-theme cyan/teal/green eradication ───
   Shared rules in this stylesheet use rgba(124,92,191,X) — the dark-mode cyan
   accent — for hovers, glows, and tints. In light mode (monochrome+purple
   palette) those bleed in as faint cyan smudges. Override every offender
   with the same alpha but the brand purple.
   `#a89fd6` mint-green status dots also recolored to the purple status palette.
*/
[data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 16px rgba(124,92,191,0.4); }
[data-theme="light"] .quick-order-btn::before,
[data-theme="light"] .nest-all-btn::before { background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(124,92,191,0.18) 0%, rgba(124,92,191,0.06) 40%, transparent 70%) !important; }
[data-theme="light"] .quick-order-btn:hover::before,
[data-theme="light"] .topbar-action-btn:hover::before,
[data-theme="light"] .nest-all-btn:hover::before { background: radial-gradient(ellipse at center, rgba(124,92,191,0.4) 0%, transparent 70%) !important; }
[data-theme="light"] .thumb-btn.upscale-btn { border-color: rgba(124,92,191,0.4); }
[data-theme="light"] .dl-cat-btn:hover { background: rgba(124,92,191,0.04); }
[data-theme="light"] .dl-cat-btn.active { border-color: rgba(124,92,191,0.18); }
[data-theme="light"] .dl-cat-btn:hover .dl-cat-icon { background: rgba(124,92,191,0.08); }
[data-theme="light"] .dl-cat-btn.active .dl-cat-icon { background: rgba(124,92,191,0.14); }
[data-theme="light"] .dl-shape-item:hover { background: rgba(124,92,191,0.06); }
[data-theme="light"] .dl-ai-act-btn.primary { border-color: rgba(124,92,191,0.3); }
[data-theme="light"] .stk-quick-tags button:hover { background: rgba(124,92,191,0.08); }
[data-theme="light"] .sheets-sb-card-add:hover { background: rgba(124,92,191,0.15); }
[data-theme="light"] .qa-go { background: rgba(124,92,191,0.06); border-color: rgba(124,92,191,0.25); color: var(--accent-text); }
[data-theme="light"] .topbar::after,
[data-theme="light"] .panel-tabs::before,
[data-theme="light"] .rp-price-card::before,
[data-theme="light"] .drip-preview::before { background: var(--mag-grad); }
/* Status indicators — kill green mint, swap to brand purple */
[data-theme="light"] .osi-dpi-ok { background: var(--accent-dim); color: var(--accent-text); }
[data-theme="light"] .odv-dl-icon.ost-dl-done { background: var(--accent-dim) !important; border-color: rgba(124,92,191,0.5) !important; color: var(--accent-text) !important; }
[data-theme="light"] .drip-btn-green:hover { background: var(--accent-dim); color: var(--accent-text); border-color: rgba(124,92,191,0.35); }
/* Topbar "All Sheets" button — was using `#a89fd6` mint green text */
[data-theme="light"] #optimizeAllBtn span[style*="color:#a89fd6"] { color: var(--accent-text) !important; }

/* ─── WCAG audit fixes (v3) — every visible text node now meets AA on white surfaces.
   Bumps --text3 to a darker zinc and adds targeted overrides for inline-styled elements
   that bypassed earlier sweeps. */
[data-theme="light"] { --text3: #5C5C66; }   /* was #71717A (4.65:1) → #5C5C66 (5.4:1) */
[data-theme="light"] .cs-tool-row,
[data-theme="light"] .cs-tool-row * { color: var(--text) !important; }
[data-theme="light"] .cs-tool-row.v2-active { background: var(--accent-light) !important; border-color: var(--accent) !important; }
[data-theme="light"] .cs-tool-row.v2-active * { color: var(--text) !important; }
[data-theme="light"] .cs-tool-row:hover { background: var(--bg2) !important; }
[data-theme="light"] .sheets-sidebar [style*="color:#fff"],
[data-theme="light"] .sheets-sidebar [style*="color: #fff"],
[data-theme="light"] .sheets-sidebar [style*="color:#FFFFFF"],
[data-theme="light"] .sheets-sidebar [style*="color: #FFFFFF"],
[data-theme="light"] .sheets-sidebar [style*="color:#b8b8b8"],
[data-theme="light"] .sheets-sidebar [style*="color: #b8b8b8"] { color: var(--text) !important; }
[data-theme="light"] .ntb-tag { color: var(--accent-text) !important; background: var(--accent-light) !important; border: 1px solid var(--border2) !important; padding: 1px 4px !important; border-radius: 3px !important; }
[data-theme="light"] .sheet-extend-arrow-label { color: var(--accent-text) !important; background: var(--accent-light) !important; padding: 1px 6px !important; border-radius: 4px !important; }
[data-theme="light"] .rp-fill-badge,
[data-theme="light"] .stat-val,
[data-theme="light"] .stat-efficiency *,
[data-theme="light"] [class*="usage"] * { color: var(--accent-text) !important; }
[data-theme="light"] [style*="color:#7c5cbf"],
[data-theme="light"] [style*="color: #7c5cbf"],
[data-theme="light"] [style*="color:#7c5cbf"],
[data-theme="light"] [style*="color: #7c5cbf"] { color: var(--accent-text) !important; }
[data-theme="light"] [style*="color:#d4d4d8"],
[data-theme="light"] [style*="color: #d4d4d8"],
[data-theme="light"] [style*="color:#D4D4D8"] { color: var(--text3) !important; }
[data-theme="light"] [style*="color:#888"],
[data-theme="light"] [style*="color: #888"],
[data-theme="light"] [style*="color:#999"],
[data-theme="light"] [style*="color: #999"],
[data-theme="light"] [style*="color:#aaa"],
[data-theme="light"] [style*="color: #aaa"],
[data-theme="light"] [style*="color:#bbb"],
[data-theme="light"] [style*="color: #bbb"] { color: var(--text3) !important; }
[data-theme="light"] #uploadZone p,
[data-theme="light"] .upload-zone p { color: var(--text3) !important; }
[data-theme="light"] input[type=range] { accent-color: var(--accent) !important; }
[data-theme="light"] svg[fill="#4dd9e8"],
[data-theme="light"] svg[stroke="#4dd9e8"],
[data-theme="light"] svg [fill="#4dd9e8"],
[data-theme="light"] svg [stroke="#4dd9e8"] { fill: var(--accent) !important; stroke: var(--accent) !important; }

/* ─── HSL audit fixes (v4) — kill any cyan/green/blue surfaces that bypass earlier sweeps
   via inline custom-prop values or JS-set backgrounds. Hue-range scan caught these. */
[data-theme="light"] .nest-type-btn { --ntb-color: var(--accent) !important; }
[data-theme="light"] .nest-type-btn.active { border-color: var(--accent) !important; background: var(--accent-light) !important; }
[data-theme="light"] .nest-type-btn .nest-type-label { color: var(--accent-text) !important; }
[data-theme="light"] .rp-bar-fill,
[data-theme="light"] #efficiencyBar { background: var(--accent) !important; background-color: var(--accent) !important; }
[data-theme="light"] input[type=range] { accent-color: var(--accent) !important; }
[data-theme="light"] .cs-tool-row svg,
[data-theme="light"] .cs-tool-row svg *,
[data-theme="light"] .v2-dot svg,
[data-theme="light"] .v2-dot svg * { fill: var(--accent) !important; stroke: var(--accent) !important; }

[data-theme="light"] .topbar { background:#ffffff; border-bottom-color:var(--border); }
[data-theme="light"] .topbar::after { background:linear-gradient(90deg, var(--success) 0%, #6a4dab 50%, var(--success) 100%); }
[data-theme="light"] .logo-royal { color:var(--text); }
[data-theme="light"] .btn-outline { color:var(--text2); border-color:var(--border2); }
[data-theme="light"] .btn-outline:hover { background:#f0f2f5; border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .btn-success { background:rgba(5,150,105,0.08); color:var(--success); border-color:var(--success); }
[data-theme="light"] .btn-icon { color:var(--text2); border-color:var(--border2); }
[data-theme="light"] .btn-icon:hover { background:#f0f2f5; color:var(--accent); border-color:var(--accent); }
[data-theme="light"] .btn-icon.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
[data-theme="light"] .panel-tabs { background:var(--panel2); border-color:var(--border); }
[data-theme="light"] .panel-tabs::before { background:linear-gradient(90deg, var(--accent) 0%, var(--success) 50%, var(--accent) 100%); }
[data-theme="light"] .sheets-sidebar { background:#ffffff; border-left-color:var(--border); }
[data-theme="light"] .sheets-sb-header { border-bottom-color:var(--border); }
[data-theme="light"] .sheets-sb-title { color:var(--text); }
[data-theme="light"] .sheets-sb-btn { color:#333; border-color:var(--border); }
[data-theme="light"] .sheets-sb-btn:hover { background:rgba(0,0,0,0.06); color:#000; }
[data-theme="light"] .sheet-row { background:#f4f5f7; border-color:var(--border); color:var(--text); }
[data-theme="light"] .sheet-row.active { background:#eee8ff; border-color:var(--accent); color:var(--text); font-weight:600; }
[data-theme="light"] .sheet-row:hover:not(.active) { background:#ebebee; }
[data-theme="light"] .sheet-row-name { color:inherit; }
[data-theme="light"] .sheet-row-act { color:#555; }
[data-theme="light"] .sheet-row-act:hover { background:rgba(0,0,0,0.07); color:#000; }
[data-theme="light"] .panel-tab { color:#999; }
[data-theme="light"] .panel-tab.active { color:var(--accent); }
[data-theme="light"] .panel-tab:hover { color:#555; }
[data-theme="light"] .upload-zone { border-color:var(--border2); background:var(--panel2); }
[data-theme="light"] .upload-zone:hover { border-color:var(--accent); background:var(--accent-light); }
[data-theme="light"] .upload-zone h4 { color:var(--text); }
[data-theme="light"] .upload-zone p { color:#888; }
[data-theme="light"] select, [data-theme="light"] input[type=number] { color:var(--text); background:var(--panel2); border-color:var(--border2); }
[data-theme="light"] input[type=text], [data-theme="light"] .drip-input { color:var(--text); background:var(--panel2); border-color:var(--border2); }
[data-theme="light"] .drip-input:focus, [data-theme="light"] input:focus { color:var(--text); }
[data-theme="light"] .drip-input:active, [data-theme="light"] input:active { color:var(--text); }
[data-theme="light"] select option { background:#fff; color:var(--text); }
[data-theme="light"] .setting-label { color:var(--text2); }
[data-theme="light"] .sb-spin { border-color:var(--border2); background:var(--panel2); color:#555; }
[data-theme="light"] .sb-spin:hover { background:#e8eaed; color:var(--text); }
[data-theme="light"] .sb-spin:active { background:var(--accent); color:#fff; }
[data-theme="light"] .design-thumb { border-color:#d0d3da; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
[data-theme="light"] .design-thumb:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(106,77,171,0.12); }
[data-theme="light"] .design-thumb img { background:#f0f1f4; }
[data-theme="light"] .design-thumb-info { background:#fff; border-top-color:#e5e7eb; }
[data-theme="light"] .design-thumb-name { color:var(--text); }
[data-theme="light"] .design-thumb-actions { background:#f8f9fa; border-top-color:#e5e7eb; }
[data-theme="light"] .design-thumb-onsheet { color:#888; }
[data-theme="light"] .design-thumb-dpi { }
[data-theme="light"] .thumb-btn { background:#fff; border-color:#d0d3da; color:#444; }
[data-theme="light"] .thumb-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
[data-theme="light"] .qa-toggle { background:#fff; border-color:#d0d3da; color:#444; }
[data-theme="light"] .qa-toggle:hover { background:#f0f1f4; border-color:#bbb; color:var(--text); }
[data-theme="light"] .qa-field label { color:#555; }
[data-theme="light"] .qa-u { color:#888; }
[data-theme="light"] .qa-go { background:rgba(124,92,191,0.06); border-color:rgba(124,92,191,0.25); color:var(--accent); }
[data-theme="light"] .ds-size-btn { background:#fff; border-color:#d0d3da; color:#444; }
[data-theme="light"] .ds-size-btn:hover { background:#f0f1f4; border-color:#bbb; color:var(--text); }
[data-theme="light"] .ds-size-field label { color:#555; }
[data-theme="light"] .thumb-dpi-warn-bar { background:rgba(255,68,68,0.06); border-top-color:rgba(255,68,68,0.12); }
[data-theme="light"] .design-thumb-divider { background:rgba(0,0,0,0.12); }
[data-theme="light"] .settings-title { color:#555; }
[data-theme="light"] .thumb-add-badge { box-shadow:0 1px 4px rgba(0,0,0,0.15); background:#fff; color:#333; border-color:#d0d3da; }
[data-theme="light"] .thumb-add-badge:hover { background:#f0f1f4; }
[data-theme="light"] .thumb-minus-badge { box-shadow:0 1px 4px rgba(0,0,0,0.15); background:#fff; color:#333; border-color:#d0d3da; }
[data-theme="light"] .thumb-minus-badge:not(.disabled):hover { background:#f0f1f4; }
[data-theme="light"] .thumb-minus-badge.disabled { background:var(--panel2); color:#bbb; border-color:#e5e7eb; }
[data-theme="light"] .thumb-remove-lib { background:#fff; border-color:#d0d3da; color:#666; }
[data-theme="light"] .thumb-remove-lib:hover { background:rgba(255,68,68,0.08); color:var(--danger); border-color:rgba(255,68,68,0.3); }
[data-theme="light"] .zoom-display { color:#555; }
[data-theme="light"] .cob-swatch.white { border-color:#ccc; }
[data-theme="light"] .cob-swatch.black { background:#222; border-color:#ccc; }
[data-theme="light"] .canvas-scroll { background:var(--canvas-bg); }
[data-theme="light"] #mainCanvas { box-shadow:0 4px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .right-panel { background:#fff; border-left-color:var(--border); }
[data-theme="light"] .right-panel-header { color:#888; }
[data-theme="light"] .rp-price-card { background:var(--panel2); border-color:var(--border); }
[data-theme="light"] .rp-price-card::before { background:linear-gradient(90deg, var(--accent) 0%, var(--success) 50%, var(--accent) 100%); }
[data-theme="light"] .rp-stat-label { color:#8b8da0; }
[data-theme="light"] .rp-stat-value { color:var(--text); }
[data-theme="light"] .rp-price-amount { color:var(--text) !important; }
[data-theme="light"] .rp-section-label { color:var(--text) !important; }
[data-theme="light"] .rp-price-eyebrow { color:#71717a !important; }
[data-theme="light"] .rp-price-context { color:#71717a !important; }
[data-theme="light"] .rp-price-context strong { color:#555 !important; }
[data-theme="light"] .rp-fill-label { color:#555 !important; }
[data-theme="light"] .rp-stat-row { border-bottom-color:rgba(0,0,0,0.05); }
[data-theme="light"] .nest-type-btn { background:var(--panel2); border-color:var(--border); }
[data-theme="light"] .nest-type-btn .nest-type-label { color:var(--text) !important; }
[data-theme="light"] .nest-type-btn .nest-type-tag { color:#666 !important; }
[data-theme="light"] .odv-ghost-btn { color:#555; border-color:rgba(0,0,0,0.1); }
[data-theme="light"] .odv-ghost-btn:hover { background:rgba(0,0,0,0.03); color:var(--text); }
[data-theme="light"] .odv-ghost-btn.danger { color:#dc2626; border-color:rgba(220,38,38,0.2); }
[data-theme="light"] .odv-sidebar-card { background:#f9f9fb; border-color:#e5e7eb; }
[data-theme="light"] .odv-sidebar-card h4 { color:#71717a; }
[data-theme="light"] .odv-sidebar-card .odv-val { color:var(--text); }
[data-theme="light"] .odv-sidebar-card .odv-label { color:#8b8da0; }
[data-theme="light"] .order-sheet-card { background:#f9f9fb; border-color:#e5e7eb; }
[data-theme="light"] .order-sheet-card:hover { background:#f0f1f4; border-color:#d5d7dc; }
[data-theme="light"] .order-sheet-card .osi-name { color:var(--text); }
[data-theme="light"] .order-sheet-card .osi-detail { color:#71717a; }
[data-theme="light"] .odv-dl-icon { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); color:#555; }
[data-theme="light"] .odv-dl-icon:hover { background:rgba(106,77,171,0.08); border-color:rgba(106,77,171,0.25); color:#6a4dab; }
[data-theme="light"] .odv-preview-icon { border-color:rgba(0,0,0,0.06); color:#888; }
[data-theme="light"] .odv-preview-icon:hover { background:rgba(0,0,0,0.04); color:#333; }
[data-theme="light"] .odv-step-label { color:#888; }
[data-theme="light"] .odv-step.active .odv-step-label { color:var(--step-color); }
[data-theme="light"] .odv-step-dot { background:var(--panel2); border-color:#ccc; }
[data-theme="light"] .odv-step-line { background:#ddd; }
[data-theme="light"] .adm-table th { color:#71717a; border-bottom-color:#e5e7eb; }
[data-theme="light"] .adm-table td { color:#555; border-bottom-color:rgba(0,0,0,0.04); }
[data-theme="light"] .adm-table tr:hover td { background:rgba(0,0,0,0.02); }
[data-theme="light"] .adm-table .at-name { color:var(--text); }
[data-theme="light"] #creditsBadgeWrap { background:rgba(106,77,171,0.06); border-color:rgba(106,77,171,0.15); }
[data-theme="light"] .osi-dpi-ok { background:rgba(34,197,94,0.1); color:#5a3f94; }
[data-theme="light"] .osi-dpi-low { background:rgba(239,68,68,0.1); color:#dc2626; }
[data-theme="light"] .osi-badge { background:rgba(106,77,171,0.1); color:#6a4dab; }
[data-theme="light"] .ost-num { background:rgba(0,0,0,0.55); }
[data-theme="light"] .prop-label { color:#888; }
[data-theme="light"] .prop-row label { color:#555; }
[data-theme="light"] .no-selection { color:#999; }
[data-theme="light"] .stats-bar { background:#fff; border-top-color:var(--border); color:#888; }
[data-theme="light"] .stat-val { color:#333; }
[data-theme="light"] .toast { background:#fff; border-color:var(--border); color:var(--text); }
[data-theme="light"] .modal-overlay { background:rgba(0,0,0,0.4); }
[data-theme="light"] .modal-box { background:#fff; border-color:var(--border); }
[data-theme="light"] .modal-box h3 { color:var(--text); }
[data-theme="light"] .modal-step { background:var(--panel2); color:#888; }
[data-theme="light"] .modal-step.active { background:rgba(106,77,171,0.06); color:var(--accent); }
[data-theme="light"] .modal-step.done { background:rgba(5,150,105,0.06); color:var(--success); }
[data-theme="light"] .settings-title { color:#71717A; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  display:flex; align-items:center; gap:7px; margin-right:4px;
}
.theme-toggle-label {
  font-size:10px; font-weight:600; color:var(--text3); letter-spacing:0.04em;
  text-transform:uppercase; font-family:'Inter',sans-serif;
}
.theme-switch {
  position:relative; width:40px; height:22px; cursor:pointer;
}
.theme-switch input { opacity:0; width:0; height:0; position:absolute; }
.theme-switch .slider {
  position:absolute; inset:0;
  background:#333;
  border-radius:11px;
  transition:all 0.3s;
  border:1px solid #444;
}
.theme-switch .slider::before {
  content:'';
  position:absolute;
  width:16px; height:16px;
  left:2px; top:2px;
  background:#fff;
  border-radius:50%;
  transition:all 0.3s;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.theme-switch input:checked + .slider {
  background:var(--accent);
  border-color:var(--accent);
}
.theme-switch.unit-toggle-switch input:checked + .slider {
  background:#555;
  border-color:#666;
}
.theme-switch.unit-toggle-switch input + .slider {
  background:#333;
  border-color:#444;
}
[data-theme="light"] .theme-switch.unit-toggle-switch input:checked + .slider {
  background:#bbb;
  border-color:#aaa;
}
[data-theme="light"] .theme-switch.unit-toggle-switch input + .slider {
  background:#ccc;
  border-color:#bbb;
}
.theme-switch input:checked + .slider::before {
  transform:translateX(18px);
  background:#fff;
}
.theme-icon {
  font-size:13px; line-height:1;
}

/* Right panel footer — theme + shortcuts */
.right-panel-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; border-top:1px solid var(--border);
  background:var(--panel); flex-shrink:0;
}
.rpf-btn {
  background:none; border:1px solid var(--border2); cursor:pointer;
  font-size:10px; font-weight:600; padding:4px 8px; color:var(--text3);
  border-radius:5px; transition:all 0.15s; font-family:'Inter',sans-serif;
}
.rpf-btn:hover { color:var(--accent); border-color:var(--accent); }
.rpf-theme {
  display:flex; align-items:center; gap:4px;
}

/* Fix button active/focus states for light theme */
.btn:active, .btn:focus { outline:none; }
.btn-outline:active { color:var(--text); }
.drip-btn-full:active, .drip-btn-full:focus { outline:none; }
.drip-btn-primary:active, .drip-btn-primary:focus { color:#fff !important; }
.drip-btn-teal:active, .drip-btn-green:active, .drip-btn-outline-del:active { color:var(--text2); }
.spin-btn:active { color:var(--text); background:var(--border2); }

/* ─── KEYBOARD SHORTCUTS PANEL ─── */
.shortcuts-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:#888;
  background:transparent; border:1px solid #333;
  border-radius:6px; padding:5px 10px; cursor:pointer;
  transition:all 0.15s; font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.shortcuts-btn:hover { border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .shortcuts-btn { color:#777; border-color:var(--border2); }
[data-theme="light"] .shortcuts-btn:hover { border-color:var(--accent); color:var(--accent); }

.shortcuts-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.7); z-index:600;
  align-items:center; justify-content:center;
}
.shortcuts-overlay.open { display:flex; }
[data-theme="light"] .shortcuts-overlay { background:rgba(0,0,0,0.3); }

.shortcuts-panel {
  background:var(--panel);
  border:1px solid var(--border2);
  border-top:2px solid var(--accent);
  border-radius:14px;
  width:580px; max-width:94vw;
  max-height:80vh;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation:shortcutsIn 0.2s ease-out;
}
@keyframes shortcutsIn {
  from { opacity:0; transform:scale(0.95) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.shortcuts-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border);
}
.shortcuts-header h3 {
  font-size:15px; font-weight:700; color:var(--text);
  font-family:'Montserrat',sans-serif; letter-spacing:0.02em;
  display:flex; align-items:center; gap:8px;
}
.shortcuts-close {
  width:28px; height:28px; border-radius:6px; border:1px solid var(--border2);
  background:transparent; color:var(--text2); font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.shortcuts-close:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.shortcuts-body {
  overflow-y:auto; padding:10px 22px 18px;
}
.sc-category {
  margin-bottom:14px;
}
.sc-category-title {
  font-size:10px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.1em;
  font-family:'Montserrat',sans-serif;
  margin-bottom:8px; padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.sc-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 0;
}
.sc-desc {
  font-size:12px; color:var(--text2); font-weight:400;
}
.sc-keys {
  display:flex; gap:4px; align-items:center; flex-shrink:0;
}
.sc-key {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 7px;
  background:var(--panel2); border:1px solid var(--border2);
  border-radius:5px; font-size:10px; font-weight:700;
  color:var(--text2); font-family:'Inter',sans-serif;
  letter-spacing:0.02em; line-height:1;
}
.sc-plus {
  font-size:10px; color:var(--text3); font-weight:400;
}
[data-theme="light"] .sc-key { background:#eee; border-color:#ccc; color:#444; }
[data-theme="light"] .shortcuts-close { border-color:#ccc; color:#888; }
[data-theme="light"] .shortcuts-close:hover { background:var(--accent-dim); color:var(--accent); }

* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-size:14px;
  -webkit-text-size-adjust:100%;
}

/* TOP BAR */
.topbar {
  background:var(--panel);
  border-bottom:1px solid var(--border);
  height:54px;
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:14px;
  flex-shrink:0;
  z-index:10;
  position:relative;
  font-family:'Inter',sans-serif;
}
.topbar::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, #7c5cbf 0%, #7c5cbf 50%, #7c5cbf 100%);
}
.topbar-logo {
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:0;
}
.logo-royal { color:#ffffff; }
.logo-dtf   { color:var(--accent); }
.logo-dot   { color:var(--accent); margin:0 1px; }
.topbar-logo span { color:var(--text); }
.topbar-divider { width:1px; height:24px; background:var(--border2); }
.topbar-sheet-info { display:flex; align-items:center; gap:6px; }
.sheet-tag {
  background:var(--accent-dim);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  border:1px solid var(--accent);
  font-family:'Montserrat',sans-serif;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  padding:7px 14px; border-radius:6px; border:none; cursor:pointer;
  transition:all 0.15s; white-space:nowrap; line-height:1;
  letter-spacing:0.02em;
}
.btn-primary { background:var(--mag-grad); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,92,191,0.4); }
.btn-outline { background:transparent; color:var(--text2); border:1px solid var(--border2); }
.btn-outline:hover { background:var(--panel2); border-color:var(--accent); color:var(--accent); }
.btn-outline:active { color:var(--text2); }
.btn-success { background:rgba(124,92,191,0.12); color:var(--success); border:1px solid var(--success); }
.btn-success:hover { background:rgba(124,92,191,0.22); }
.btn-danger { background:transparent; color:var(--danger); border:1px solid rgba(255,68,68,0.3); font-size:12px; padding:5px 10px; }
.btn-danger:hover { background:rgba(255,68,68,0.1); }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-icon {
  padding:7px; border-radius:6px; background:transparent;
  border:1px solid var(--border2); cursor:pointer;
  color:var(--text2); display:inline-flex; align-items:center;
  justify-content:center; transition:all 0.15s; font-size:13px;
}
.btn-icon:hover { background:var(--panel2); color:var(--accent); border-color:var(--accent); }
.btn-icon.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }

/* LAYOUT */
.app-body { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:1fr auto; flex:1; overflow:hidden; }
.app-body > .left-panel { grid-row:1 / -1; grid-column:1; }
.app-body > .canvas-area { grid-row:1; grid-column:2; }
.app-body > .right-panel { grid-row:1; grid-column:3; }
.app-body > .stats-bar { grid-row:2; grid-column:2 / -1; }

/* LEFT PANEL */
.left-panel {
  width:400px;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  flex-shrink:0;
  position:relative;
}

.panel-tabs {
  position:relative;
  display:flex;
  margin:10px 12px 0;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.panel-tabs::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(124,92,191,0.8) 50%, var(--accent) 100%);
  opacity:0.7; z-index:1;
}
.panel-tab {
  position:relative;
  flex:1; padding:14px 6px 12px; font-size:12.5px; font-weight:600;
  font-family:'Manrope',sans-serif; letter-spacing:0.06em; line-height:1;
  text-align:center; cursor:pointer; color:var(--text3);
  border:none;
  background:transparent;
  transition:all 0.18s;
  display:flex; align-items:center; justify-content:center;
}
.panel-tab:hover { color:var(--text2); }
.panel-tab.active {
  color:var(--accent);
}

.panel-content {
  flex:1; overflow-y:auto; overflow-x:hidden; padding:12px;
  display:flex; flex-direction:column; gap:12px;
}

/* Quick Order Button */
.quick-order-btn, .topbar-action-btn {
  position:relative; overflow:hidden;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:8px; color:var(--text2);
  font-weight:600;
  font-family:'Inter',sans-serif; letter-spacing:0.03em;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all 0.18s;
  box-shadow:none;
}
.quick-order-btn {
  width:100%; padding:9px 12px; margin-bottom:0;
  font-size:11px;
}
.topbar-action-btn {
  padding:6px 14px; font-size:12px;
}
.quick-order-btn::before, .topbar-action-btn::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:radial-gradient(ellipse at center, rgba(124,92,191,0.35) 0%, transparent 70%);
  transition:opacity 0.18s;
}
.topbar-action-btn::after {
  content:''; position:absolute; bottom:-1px; left:5%; right:5%; height:8px;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(124,92,191,0.35) 0%, rgba(124,92,191,0.15) 40%, transparent 70%);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  opacity:0.8;
  transition:opacity 0.18s;
  pointer-events:none;
}
.quick-order-btn:hover, .topbar-action-btn:hover { border-color:rgba(124,92,191,0.35); color:#fff !important; background:rgba(124,92,191,0.06); }
.quick-order-btn:hover::before, .topbar-action-btn:hover::before { background:radial-gradient(ellipse at center, rgba(124,92,191,0.5) 0%, transparent 70%); }
.topbar-action-btn:hover::after { opacity:1; }
/* Light-theme primary CTA: brand purple solid with white text. AA Normal contrast. */
[data-theme="light"] .quick-order-btn, [data-theme="light"] .topbar-action-btn { background:var(--accent-h); border-color:var(--accent-h); color:#FFFFFF !important; box-shadow:none; }
[data-theme="light"] .quick-order-btn:hover, [data-theme="light"] .topbar-action-btn:hover { background:var(--accent-active) !important; border-color:var(--accent-active) !important; color:#FFFFFF !important; box-shadow:none; }

.nest-all-btn {
  color:var(--text2) !important; background:var(--panel2) !important; border-color:var(--border) !important;
}
.nest-all-btn::before {
  background:radial-gradient(ellipse at center, rgba(124,92,191,0.35) 0%, transparent 70%) !important;
}
.nest-all-btn:hover { border-color:rgba(124,92,191,0.35) !important; color:#fff !important; background:rgba(124,92,191,0.06) !important; }
.nest-all-btn:hover::before { background:radial-gradient(ellipse at center, rgba(124,92,191,0.5) 0%, transparent 70%) !important; }
/* Auto-Fill Sheet / Nest All — secondary action: outlined purple on white */
[data-theme="light"] .nest-all-btn { background:#FFFFFF !important; border:1px solid var(--accent) !important; color:var(--accent-text) !important; box-shadow:none !important; }
[data-theme="light"] .nest-all-btn:hover { background:var(--accent-light) !important; border-color:var(--accent-h) !important; color:var(--accent-active) !important; box-shadow:none !important; }

/* Upload zone */
.upload-zone {
  border:1.5px dashed rgba(255,255,255,0.2);
  border-radius:var(--radius);
  padding:18px 14px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  background:var(--panel2);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color:var(--accent);
  background:rgba(124,92,191,0.04);
}
.upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-icon { display:none; }
.upload-zone h4 { font-size:13px; font-weight:600; color:#fff; margin-bottom:5px; display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; }
.upload-zone h4 svg { opacity:0.85; }
.upload-zone p { font-size:9px; color:rgba(255,255,255,0.5); line-height:1.5; margin:0; }

/* Design library */
.design-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:24px 16px; padding-right:12px; align-items:start; overflow-x:hidden; }

/* ── Visual Asset Tile ── */
.design-thumb {
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:all 0.15s;
  background:var(--panel2);
  position:relative;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  overflow:visible;
  min-width:0;
}
.design-thumb:active { opacity:0.9; }
.design-thumb:hover {
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.design-thumb img {
  width:100%; height:60px; object-fit:contain;
  display:block; padding:6px; background:var(--bg2);
  -webkit-tap-highlight-color:transparent;
  user-select:none; pointer-events:auto;
  border-radius:6px 6px 0 0;
  box-sizing:border-box;
}
.thumb-add-badge, .thumb-minus-badge { -webkit-tap-highlight-color:transparent; }
.design-thumb-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:60px; background:var(--bg2); gap:4px;
}
.design-thumb-loading-ring { transform:rotate(-90deg); }
.design-thumb-loading-ring-track { fill:none; stroke:var(--border2); stroke-width:3; }
.design-thumb-loading-ring-arc  { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 0.2s ease; }
.design-thumb-loading-label {
  font-size:8px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.07em; font-family:'Inter',sans-serif;
}
.design-thumb-info { text-align:center;
  padding:4px 4px 2px;
  border-top:1px solid var(--border);
  background:var(--panel2);
  overflow:hidden;
  min-width:0;
}
.design-thumb-name { font-size:9px; color:rgba(255,255,255,0.85); overflow:hidden; text-overflow:ellipsis; text-align:center; white-space:nowrap; line-height:1.3; font-weight:600; font-family:'Inter',sans-serif; max-width:100%; cursor:default; }
.design-thumb-meta { display:flex; align-items:center; justify-content:center; gap:0; margin-top:2px; white-space:nowrap; flex-wrap:nowrap; }
.design-thumb-dpi { font-size:8px; font-weight:400; display:inline-flex; align-items:center; gap:2px; letter-spacing:0.04em; text-transform:uppercase; font-family:'Inter',sans-serif; padding:1px 4px 1px 3px; white-space:nowrap; }
.design-thumb-divider { width:1px; height:10px; background:var(--border2); opacity:0.6; flex-shrink:0; }
.design-thumb-onsheet { font-size:8px; font-weight:400; color:rgba(255,255,255,0.55); letter-spacing:0.02em; font-family:'Inter',sans-serif; padding:1px 4px; display:inline-flex; align-items:center; white-space:nowrap; }
.dpi-good { color:#7c5cbf; }
.dpi-warn { color:#eab308; }
.dpi-bad  { color:#ef4444; }
.design-thumb-actions {
  display:flex; gap:3px; padding:4px 5px;
  background:var(--bg2); border-top:1px solid var(--border);
}
.thumb-btn {
  flex:1; font-size:9px; font-weight:600; padding:4px 0;
  border-radius:4px; border:1px solid var(--border2);
  background:var(--panel2); cursor:pointer; color:var(--text2);
  transition:all 0.12s; text-align:center; letter-spacing:0.03em;
  text-transform:uppercase;
}
.thumb-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.thumb-btn.upscale-btn { border-color:rgba(124,92,191,0.4); color:var(--accent); background:var(--accent-dim); }
.thumb-btn.upscale-btn:hover { background:var(--accent); color:#fff; }
.thumb-btn.done-btn { border-color:rgba(124,92,191,0.4); color:var(--success); background:rgba(124,92,191,0.08); cursor:default; }

/* ── Low-DPI warning bar in library thumb ── */
.thumb-dpi-warn-bar {
  display:flex; align-items:center; gap:4px;
  padding:3px 7px;
  background:rgba(255,68,68,0.08);
  border-top:1px solid rgba(255,68,68,0.15);
}
.thumb-dpi-warn-text {
  font-size:9px; color:#ff6b6b; font-weight:600; flex:1;
  font-family:'Inter',sans-serif; white-space:nowrap;
}

/* Sheet settings */
.settings-section { padding:12px; border-top:1px solid var(--border); flex-shrink:0; }
.settings-title {
  font-size:9px; font-weight:700; color:#71717A;
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px;
  font-family:'Montserrat',sans-serif;
}
.setting-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.setting-label { font-size:12px; color:var(--text2); white-space:nowrap; min-width:65px; }
.setting-control { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.left-panel select { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.left-panel input[type=number] { width:60px; }

/* ── Design Library Panel ── */
.dl-panel { display:flex; flex-direction:column; height:100%; }
.dl-search-wrap {
  position:relative; margin-bottom:8px;
}
.dl-search {
  width:100%; padding:8px 10px 8px 32px; border-radius:6px;
  border:1px solid var(--border2); background:var(--bg2);
  color:var(--text); font-size:11px; font-family:'Inter',sans-serif;
  outline:none; transition:border-color 0.15s;
}
.dl-search:focus { border-color:var(--accent); }
.dl-search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--text3); font-size:12px; pointer-events:none;
}
.dl-cats { display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto; }
.dl-cat-btn {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; border:1px solid transparent;
  background:var(--panel2); color:var(--text2); cursor:pointer;
  font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
  transition:all 0.15s; text-align:left; width:100%;
  position:relative; overflow:hidden;
}
.dl-cat-btn::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%; width:2px;
  background:transparent; border-radius:0 2px 2px 0; transition:background 0.15s;
}
.dl-cat-btn:hover { border-color:var(--border); background:rgba(124,92,191,0.04); color:var(--text); }
.dl-cat-btn:hover::before { background:var(--accent); }
.dl-cat-btn.active { background:var(--accent-dim); color:var(--accent); border-color:rgba(124,92,191,0.15); }
.dl-cat-btn.active::before { background:var(--accent); }
.dl-cat-icon {
  width:30px; height:30px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; font-size:15px;
  background:rgba(255,255,255,0.04); flex-shrink:0; transition:all 0.15s;
}
.dl-cat-btn:hover .dl-cat-icon { background:rgba(124,92,191,0.08); }
.dl-cat-btn.active .dl-cat-icon { background:rgba(124,92,191,0.12); }
.dl-cat-label { flex:1; letter-spacing:0.01em; }
.dl-cat-arrow { color:var(--text3); font-size:14px; transition:all 0.15s; opacity:0.4; }
.dl-cat-btn:hover .dl-cat-arrow { opacity:0.8; transform:translateX(2px); }
.dl-cat-btn.active .dl-cat-arrow { color:var(--accent); opacity:1; }

/* Category sub-panels */
.dl-subpanel { display:none; flex-direction:column; gap:8px; height:100%; }
.dl-subpanel.active { display:flex; }
.dl-back-btn {
  display:flex; align-items:center; gap:6px; padding:6px 0; margin-bottom:4px;
  background:none; border:none; color:var(--accent); cursor:pointer;
  font-size:11px; font-weight:600; font-family:'Inter',sans-serif;
}
.dl-back-btn:hover { text-decoration:underline; }
.dl-sub-title {
  font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.08em; margin-bottom:6px; font-family:'Montserrat',sans-serif;
}
.dl-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  overflow-y:auto; flex:1;
}
.dl-grid-2col { grid-template-columns:1fr 1fr; }
.dl-shape-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
}
.dl-shape-item {
  aspect-ratio:1; border-radius:8px; border:1px solid var(--border);
  background:var(--panel2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:8px;
  transition:all 0.15s; position:relative;
}
.dl-shape-item:hover { border-color:var(--accent); background:rgba(124,92,191,0.06); transform:scale(1.05); }
.dl-shape-item:active { transform:scale(0.95); }
.dl-shape-item svg { width:70%; height:70%; }
.dl-item {
  border:1px solid var(--border); border-radius:6px; overflow:hidden;
  cursor:pointer; transition:all 0.12s; background:var(--panel2);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; position:relative;
}
.dl-item:hover { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); transform:scale(1.03); }
.dl-item:active { transform:scale(0.97); }
.dl-item svg, .dl-item img { width:60%; height:60%; object-fit:contain; }
.dl-item-label {
  position:absolute; bottom:0; left:0; right:0;
  font-size:8px; text-align:center; padding:2px;
  background:rgba(0,0,0,0.6); color:#ccc;
  font-family:'Inter',sans-serif;
}
/* AI Generator */
.dl-ai-prompt {
  width:100%; padding:10px; border-radius:6px; border:1px solid var(--border2);
  background:var(--bg2); color:var(--text); font-size:12px;
  font-family:'Inter',sans-serif; resize:vertical; min-height:64px;
  outline:none; transition:border-color 0.15s;
}
.dl-ai-prompt:focus { border-color:var(--accent); }
.dl-ai-prompt::placeholder { color:var(--text3); }
.dl-ai-generate-btn {
  width:100%; padding:10px; border-radius:6px; border:none;
  background:var(--mag-grad); color:#fff; font-size:12px;
  font-weight:700; font-family:'Montserrat',sans-serif;
  cursor:pointer; transition:all 0.15s; letter-spacing:0.03em;
}
.dl-ai-generate-btn:hover { opacity:0.9; transform:translateY(-1px); }
.dl-ai-generate-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.dl-ai-results {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:8px; overflow-y:auto;
}
.dl-ai-result-item {
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
  cursor:pointer; transition:all 0.15s; background:var(--bg2);
  display:flex; flex-direction:column; position:relative;
}
.dl-ai-result-item:hover { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.dl-ai-result-img { width:100%; aspect-ratio:1; object-fit:contain; padding:4px; display:block; }
.dl-ai-result-actions {
  display:flex; gap:2px; padding:3px; border-top:1px solid var(--border);
  background:var(--panel2);
}
.dl-ai-act-btn {
  flex:1; padding:4px 2px; font-size:8px; font-weight:700; text-align:center;
  border:1px solid var(--border2); border-radius:4px; cursor:pointer;
  background:var(--bg2); color:var(--text3); transition:all 0.12s;
  font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:0.03em;
}
.dl-ai-act-btn:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.dl-ai-act-btn.primary { background:var(--accent-dim); color:var(--accent); border-color:rgba(124,92,191,0.3); }
.dl-ai-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:30px 0; color:var(--text3); font-size:12px;
  grid-column:1/-1;
}
.dl-ai-spinner {
  width:28px; height:28px; border:3px solid var(--border2);
  border-top-color:var(--accent); border-radius:50%;
  animation:dlSpin 0.8s linear infinite;
}
@keyframes dlSpin { to { transform:rotate(360deg); } }
/* Style preset chips */
.dl-ai-styles { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.dl-ai-style-chip {
  padding:4px 10px; border-radius:20px; border:1px solid var(--border2);
  background:var(--panel2); color:var(--text3); font-size:10px;
  font-weight:600; cursor:pointer; transition:all 0.12s;
  font-family:'Inter',sans-serif; white-space:nowrap;
}
.dl-ai-style-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.dl-ai-style-chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
/* Pipeline steps */
.dl-ai-pipeline {
  display:flex; align-items:center; gap:2px; padding:5px 0; margin:4px 0;
}
.dl-ai-pipe-step {
  flex:1; text-align:center; font-size:8px; font-weight:700; padding:4px 2px;
  border-radius:4px; background:var(--panel2); color:var(--text3);
  font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:0.04em;
  transition:all 0.2s; border:1px solid transparent;
}
.dl-ai-pipe-step.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.dl-ai-pipe-step.done { background:rgba(34,197,94,0.15); color:#7c5cbf; border-color:rgba(34,197,94,0.3); }
.dl-ai-pipe-arrow { color:var(--text3); font-size:10px; flex-shrink:0; }
/* API Config */
.dl-ai-config {
  margin-top:6px; padding:6px 8px; border-radius:5px;
  border:1px solid var(--border); background:var(--panel2);
}
.dl-ai-config-toggle {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:10px; color:var(--text3); font-weight:600; padding:2px 0;
}
.dl-ai-config-toggle:hover { color:var(--text2); }
.dl-ai-config-body { display:none; padding-top:6px; }
.dl-ai-config-body.open { display:block; }
.dl-ai-config-input {
  width:100%; padding:6px 8px; border-radius:4px; border:1px solid var(--border2);
  background:var(--bg2); color:var(--text); font-size:11px; font-family:'Inter',monospace;
  outline:none; margin-top:4px;
}
.dl-ai-config-input:focus { border-color:var(--accent); }
.dl-ai-status {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:600; padding:2px 6px; border-radius:10px;
}
.dl-ai-status.connected { color:#7c5cbf; background:rgba(34,197,94,0.12); }
.dl-ai-status.offline { color:var(--text3); background:var(--panel2); }
.dl-ai-status-dot { width:6px; height:6px; border-radius:50%; }
.dl-ai-status.connected .dl-ai-status-dot { background:#7c5cbf; }
.dl-ai-status.offline .dl-ai-status-dot { background:var(--text3); }

/* Text panel */
.dl-text-input {
  width:100%; padding:10px; border-radius:6px; border:1px solid var(--border2);
  background:var(--bg2); color:var(--text); font-size:14px;
  font-family:'Inter',sans-serif; outline:none; text-align:center;
}
.dl-text-input:focus { border-color:var(--accent); }
.dl-text-opts { display:flex; flex-direction:column; gap:6px; }
.dl-text-opt-row { display:flex; align-items:center; gap:6px; width:100%; }
.dl-text-opt-label { font-size:10px; color:var(--text3); min-width:44px; font-weight:600; flex-shrink:0; }
.dl-text-add-btn {
  width:100%; padding:9px; border-radius:6px; border:1px solid var(--accent);
  background:var(--accent-dim); color:var(--accent); font-size:12px;
  font-weight:700; cursor:pointer; font-family:'Montserrat',sans-serif;
  transition:all 0.15s;
}
.dl-text-add-btn:hover { background:var(--accent); color:#000; }

/* Size spinner with hold-arrows */
.dl-size-spinner {
  display:flex; align-items:center; gap:0; border:1px solid var(--border2);
  border-radius:5px; overflow:hidden; background:var(--bg2); flex-shrink:0;
}
.dl-size-spinner input {
  width:52px; padding:5px 2px; border:none; background:transparent;
  color:var(--text); font-size:12px; text-align:center; outline:none;
  font-family:'Inter',sans-serif; font-weight:600;
  -moz-appearance:textfield;
}
.dl-size-spinner input::-webkit-outer-spin-button,
.dl-size-spinner input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dl-size-arrow {
  width:22px; height:28px; display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:none; color:var(--text3); cursor:pointer;
  font-size:11px; transition:all 0.1s; user-select:none; -webkit-user-select:none;
}
.dl-size-arrow:hover { background:var(--accent-dim); color:var(--accent); }
.dl-size-arrow:active { background:var(--accent); color:#000; }
.dl-size-arrow-left { border-right:1px solid var(--border2); }
.dl-size-arrow-right { border-left:1px solid var(--border2); }

/* Stroke mode toggle (Inside / Outside) */
.dl-stroke-mode-wrap {
  display:flex; border:1px solid var(--border2); border-radius:5px; overflow:hidden;
}
.dl-stroke-mode-btn {
  padding:3px 8px; font-size:9px; font-weight:600; cursor:pointer;
  background:var(--panel2); color:var(--text3); border:none;
  transition:all 0.12s; font-family:'Inter',sans-serif; letter-spacing:0.02em;
}
.dl-stroke-mode-btn.active {
  background:var(--accent-dim); color:var(--accent); font-weight:700;
}
.dl-stroke-mode-btn:first-child { border-right:1px solid var(--border2); }

/* Number styles */
.dl-number-grid {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:4px;
}
.dl-number-item {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
  font-weight:800; font-size:18px; color:var(--text);
  background:var(--panel2); transition:all 0.12s;
  font-family:'Montserrat',sans-serif;
}
.dl-number-item:hover { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
.dl-number-style-tabs {
  display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap;
}
.dl-number-style-tab {
  padding:4px 10px; border-radius:20px; border:1px solid var(--border2);
  background:var(--panel2); color:var(--text3); font-size:10px;
  font-weight:600; cursor:pointer; transition:all 0.12s;
}
.dl-number-style-tab.active, .dl-number-style-tab:hover {
  border-color:var(--accent); color:var(--accent); background:var(--accent-dim);
}

/* Recent & Favorites */
.dl-section-header {
  font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.08em; margin:8px 0 4px; font-family:'Montserrat',sans-serif;
  display:flex; align-items:center; justify-content:space-between;
}
.dl-recent-strip {
  display:flex; gap:6px; overflow-x:auto; padding:4px 0 8px;
}
.dl-recent-strip::-webkit-scrollbar { height:3px; }
.dl-recent-strip::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.dl-recent-item {
  width:42px; height:42px; flex-shrink:0; border-radius:6px;
  border:1px solid var(--border); background:var(--panel2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.12s; overflow:hidden;
}
.dl-recent-item:hover { border-color:var(--accent); }
.dl-recent-item img, .dl-recent-item svg { width:80%; height:80%; object-fit:contain; }

/* ── Sticker Library Styles ── */
.stk-quick-tags {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px;
}
.stk-quick-tags button {
  padding:4px 8px; border-radius:10px; border:1px solid var(--border2); background:var(--panel2);
  color:var(--text2); font-size:10px; cursor:pointer; transition:all 0.12s; white-space:nowrap;
}
.stk-quick-tags button:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,92,191,0.08); }
.stk-spinner {
  width:20px; height:20px; border:2px solid var(--border2); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.6s linear infinite; margin:0 auto 8px;
}
#stkSearchGrid .dl-item { position:relative; border-radius:8px; overflow:hidden; }
#stkSearchGrid .dl-item img { width:100%; height:100%; object-fit:contain; }
#stkSearchGrid .dl-item .stk-px-badge {
  position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,0.6); color:#fff;
  font-size:8px; padding:1px 4px; border-radius:3px; pointer-events:none;
}

/* Integrations in stats bar */
.sb-intg { display:flex; gap:5px; align-items:center; }
.sb-intg-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border2);
  background:var(--panel); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all 0.15s; padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.18);
}
.sb-intg-btn:hover { background:var(--panel2); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.22); }
.sb-intg-btn:active { transform:translateY(0); box-shadow:0 1px 3px rgba(0,0,0,0.18); }
[data-theme="light"] .sb-intg-btn { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.12); }
[data-theme="light"] .sb-intg-btn:hover { background:#f5f0fb; border-color:var(--accent); }
.sb-spin { 
  width:22px; height:22px; border:1px solid var(--border2); background:var(--panel2); 
  color:var(--text3); border-radius:4px; font-size:13px; cursor:pointer; display:flex; 
  align-items:center; justify-content:center; padding:0; line-height:1; font-weight:700;
  flex-shrink:0; user-select:none; transition: background 0.1s;
}
.sb-spin:hover { background:var(--border2); color:var(--text); }
.sb-spin:active { background:var(--accent); color:#fff; }

select, input[type=number] {
  font-family:'Inter',sans-serif; font-size:12px; font-weight:500;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--border2);
  border-radius:5px;
  padding:5px 8px; outline:none; transition:border-color 0.15s;
}
select:focus, input:focus { border-color:var(--accent); }
select option { background:var(--panel2); color:var(--text); }
input[type=number] { width:60px; text-align:center; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }
input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; }

/* CANVAS AREA */
.canvas-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); position:relative; -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
.canvas-area img, .canvas-area canvas { -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; pointer-events:auto; }

/* ── Sheet Extending Arrow Indicator (top of canvas with shadow) ── */
.sheet-extend-arrow {
  position:absolute; top:0; left:0; right:148px; z-index:110;
  pointer-events:none; opacity:0; transition:opacity 0.35s ease;
}
.sheet-extend-arrow.visible { opacity:1; }
.sheet-extend-arrow-shadow {
  position:absolute; top:0; left:0; right:0; height:120px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.sheet-extend-arrow-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-top:7px;
}
.sheet-extend-arrow-label {
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; white-space:nowrap; font-family:'Inter',system-ui,sans-serif;
  -webkit-text-stroke:2px #000; text-stroke:2px #000;
  paint-order:stroke fill;
  text-shadow:0 1px 4px rgba(0,0,0,0.85);
  margin-bottom:4px;
}
.sheet-extend-arrow-chevrons {
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.sheet-extend-arrow-chevron {
  width:24px; height:12px; opacity:0;
  animation:sheetArrowPulse 1.2s ease-in-out infinite;
}
.sheet-extend-arrow-chevron:nth-child(1) { animation-delay:0s; }
.sheet-extend-arrow-chevron:nth-child(2) { animation-delay:0.15s; }
.sheet-extend-arrow-chevron:nth-child(3) { animation-delay:0.3s; }
.sheet-extend-arrow-chevron svg { display:block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); }
@keyframes sheetArrowPulse {
  0%   { opacity:0; transform:translateY(-4px); }
  35%  { opacity:1; transform:translateY(0); }
  75%  { opacity:0; transform:translateY(4px); }
  100% { opacity:0; transform:translateY(4px); }
}
.left-panel img, .right-panel img, .cart-sheet-thumb img { -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }

/* Left Sheets Sidebar (inside canvas-viewport) */
/* ══ SHEETS SIDEBAR — redesigned ══ */
.sheets-sidebar {
  position:absolute; top:0; right:0; bottom:0;
  width:148px; z-index:15;
  display:flex; flex-direction:column;
  background:var(--bg2);
  border-left:1px solid var(--border);
  overflow:hidden;
}

/* Header */
.sheets-sb-header {
  padding:8px 8px 0;
  flex-shrink:0;
}
.sheets-sb-title-row {
  display:flex; align-items:center; justify-content:space-between;
}
.sheets-sb-title {
  font-size:13px; font-weight:800; color:#ffffff;
  letter-spacing:0.02em;
  font-family:'Inter',sans-serif;
  position:relative; top:1px;
}
.sheets-sb-summary { font-size:9px; color:var(--text3); white-space:nowrap; }

/* Header action card — unified container */
.sheets-sb-actions { display:flex; gap:3px; }
.sheets-sb-action-card {
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 8px 7px 12px;
  border-radius:8px;
  background:var(--panel2);
  border:1px solid var(--border);
  overflow:hidden;
}
.sheets-sb-action-card-glow {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(124,92,191,0.8) 50%, var(--accent) 100%);
  opacity:0.7;
}
.sheets-sb-card-actions { display:flex; align-items:center; gap:2px; position:relative; top:2px; }
.sheets-sb-card-btn {
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  background:transparent; border:none;
  color:var(--text3); border-radius:5px;
  cursor:pointer; transition:all 0.15s;
}
.sheets-sb-card-add:hover { background:rgba(124,92,191,0.15); color:var(--accent); }
.sheets-sb-card-del:hover { background:rgba(255,68,68,0.12); color:#ff4444; }
.sheets-sb-btn {
  width:22px; height:22px; border:1px solid var(--border2);
  background:var(--panel2); color:var(--text2);
  border-radius:6px; cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; flex-shrink:0;
}
.sheets-sb-btn:hover {
  background:var(--accent); color:#000;
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(124,92,191,0.4);
  transform:scale(1.08);
}
.sheets-sb-danger:hover {
  background:rgba(255,68,68,0.15) !important; color:#ff4444 !important;
  border-color:rgba(255,68,68,0.4) !important;
  box-shadow:0 0 8px rgba(255,68,68,0.25) !important;
}

/* Add sheet CTA button */
.sheets-add-cta {
  width:100%; height:28px;
  border:1.5px dashed var(--border2);
  background:transparent;
  color:#ffffff; border-radius:7px;
  cursor:pointer; font-size:11px; font-weight:600;
  font-family:'Montserrat',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:all 0.18s; letter-spacing:0.03em;
}
.sheets-add-cta:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-light);
  box-shadow:0 0 12px rgba(124,92,191,0.12);
}

/* Scrollable list */
.sheets-sb-list { flex:1; overflow-y:auto; overflow-x:hidden; padding:0 8px 8px; display:flex; flex-direction:column; }
.sheets-sb-list::before {
  content:'';
  display:block;
  height:1px;
  margin:6px 4px;
  background:linear-gradient(90deg, transparent, rgba(124,92,191,0.35), transparent);
  flex-shrink:0;
}
.sheets-sb-list::-webkit-scrollbar { width:3px; }
.sheets-sb-list::-webkit-scrollbar-track { background:transparent; }
.sheets-sb-list::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
#sheetTabs { display:flex; flex-direction:column; gap:6px; }

/* Sheet cards */
.sheet-card {
  position:relative;
  display:flex; flex-direction:column;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  cursor:pointer;
  transition:all 0.18s;
  overflow:hidden;
}
.sheet-card::before { display:none; }
.sheet-card:hover { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); }
.sheet-card:hover .sheet-card-name { color:#ccc; }
.sheet-card.active {
  padding:8px 10px 6px;
  border-color:rgba(124,92,191,0.5);
  background:rgba(124,92,191,0.06);
  box-shadow:0 2px 12px rgba(124,92,191,0.08);
}
.sheet-card.active::before { display:none; }

/* Card top row: actions only */
.sheet-card-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;
}

/* Shared action icon buttons (pencil, copy, delete) */
.sheet-card-action-btn {
  width:20px; height:20px; border:none; background:transparent;
  color:#52525B; border-radius:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.12s; padding:0; line-height:1;
}
.sheet-card.active .sheet-card-action-btn { color:var(--text3); }
.sheet-card-action-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }

.sheet-card-del {
  font-size:14px;
}
.sheet-card-del:hover { background:rgba(255,68,68,0.15); color:#ff4444; }

/* Copy button */
.sheet-card-copy {
  position:relative;
}
.sheet-card-copy:hover { background:rgba(124,92,191,0.15); color:var(--accent); }
.sheet-copy-badge {
  position:absolute; top:-5px; right:-6px;
  min-width:12px; height:12px; padding:0 3px;
  font-size:7px; font-weight:800; font-family:'Inter',sans-serif;
  background:var(--accent); color:#000;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* Card bottom row (action icons) — collapsed on inactive, visible on active */
.sheet-card-bottom {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:0; padding-top:0;
  border-top:1px solid rgba(124,58,237,0.35);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease, padding-top 0.2s ease;
}
.sheet-card.active .sheet-card-bottom {
  max-height:40px; opacity:1;
  margin-top:4px; padding-top:5px;
}

/* Nest Sheet button */
.sheet-card-nest-btn {
  display:flex; align-items:center; justify-content:center; gap:3px;
  margin-top:6px; padding:4px 0;
  font-size:8px; font-weight:700; font-family:'Inter',sans-serif;
  color:#fff; background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  border:none; border-radius:4px;
  cursor:pointer; transition:all 0.15s;
  width:100%; letter-spacing:0.02em;
}
.sheet-card-nest-btn:hover { background:linear-gradient(135deg,#6d28d9,#7c3aed); box-shadow:0 0 8px rgba(124,58,237,0.4); }

/* Card name */
.sheet-card-name {
  font-size:11.5px; font-weight:600; color:#71717a;
  font-family:'Inter',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:0.01em; line-height:1.3;
  padding-right:40px;
}
.sheet-card.active .sheet-card-name { color:#ffffff; font-weight:700; }

/* Top-right actions (eye + ×) on inactive cards */
.sheet-card-top-actions {
  position:absolute; top:5px; right:4px;
  display:flex; align-items:center; gap:1px; z-index:2;
}
.sheet-card-top-btn {
  width:18px; height:18px; border:none; background:transparent;
  color:#52525B; border-radius:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.12s; padding:0; line-height:1;
}
.sheet-card-top-btn.sc-eye:hover { background:rgba(124,92,191,0.15); color:var(--accent); }
.sheet-card-top-btn.sc-close { font-size:13px; font-weight:400; }
.sheet-card-top-btn.sc-close:hover { background:rgba(255,68,68,0.15); color:#ff4444; }
/* Hide top-right eye on active card (not needed - user is viewing it) */
.sheet-card.active .sheet-card-top-btn.sc-eye { display:none; }
.sheet-card.active .sheet-card-name { padding-right:22px; }

/* Card meta chips */
.sheet-card-meta {
  display:flex; gap:3px; margin-top:5px; flex-wrap:wrap;
}
.sheet-chip {
  font-size:8px; font-weight:600; font-family:'Inter',sans-serif;
  padding:1px 5px; border-radius:20px; letter-spacing:0.02em;
  white-space:nowrap;
}
.sheet-chip-designs {
  background:rgba(255,255,255,0.04); color:#52525B;
  border:1px solid rgba(255,255,255,0.08);
}
.sheet-card.active .sheet-chip-designs {
  background:rgba(124,92,191,0.15); border-color:rgba(124,92,191,0.35); color:var(--accent);
}

/* Quick Preview button */
.sheet-card-preview-btn {
  display:flex; align-items:center; justify-content:center; gap:3px;
  margin-top:6px; padding:3px 0;
  font-size:8px; font-weight:600; font-family:'Inter',sans-serif;
  color:#52525B; background:transparent;
  border:1px solid rgba(255,255,255,0.08); border-radius:4px;
  cursor:pointer; transition:all 0.15s;
  width:100%; position:relative;
}
.sheet-card-preview-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(124,92,191,0.06); }
.sheet-card-preview-btn svg { flex-shrink:0; color:inherit; }
.sheet-card.active .sheet-card-preview-btn { color:var(--text3); border-color:var(--border2); }
.sheet-card.active .sheet-card-preview-btn svg { color:var(--accent); }

/* Preview tooltip */
.sheet-preview-tooltip {
  display:none; position:fixed; z-index:9999;
  background:var(--panel); border:1px solid var(--accent);
  border-radius:8px; padding:6px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  pointer-events:none;
  max-height:calc(100vh - 20px);
  overflow:hidden;
}
.sheet-preview-tooltip canvas {
  display:block; border-radius:4px;
  max-height:calc(100vh - 40px);
  width:auto; height:auto;
}

/* Light theme overrides */
[data-theme="light"] .sheets-sidebar { background:#f0f1f5; }
[data-theme="light"] .sheets-sb-header { background:transparent; }
[data-theme="light"] .sheets-sb-action-card { background:#fff; border-color:var(--border); }
[data-theme="light"] .sheets-sb-title { color:var(--text); }
[data-theme="light"] .sheets-sb-card-btn { color:#888; }
[data-theme="light"] .sheets-sb-btn { background:var(--panel2); border-color:var(--border); color:#555; }
[data-theme="light"] .sheets-sb-btn:hover { background:var(--accent); color:#fff; }
[data-theme="light"] .sheets-add-cta { border-color:var(--border2); color:#888; }
[data-theme="light"] .sheets-add-cta:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
[data-theme="light"] .sheet-card { background:#fff; border-color:#e0e0e4; }
[data-theme="light"] .sheet-card::before { display:none; }
[data-theme="light"] .sheet-card:hover { background:var(--panel2); border-color:#c5c8d0; }
[data-theme="light"] .sheet-card:hover::before { background:var(--accent); }
[data-theme="light"] .sheet-card.active { background:rgba(106,77,171,0.05); border-color:rgba(106,77,171,0.3); }
[data-theme="light"] .sheet-card.active::before { display:none; }
[data-theme="light"] .sheet-card-name { color:#999; }
[data-theme="light"] .sheet-card.active .sheet-card-name { color:var(--text); }
[data-theme="light"] .sheet-chip-designs { background:rgba(106,77,171,0.08); color:var(--accent); border-color:rgba(106,77,171,0.2); }
[data-theme="light"] .sheet-card-preview-btn { color:#666; border-color:var(--border); }
[data-theme="light"] .sheet-card-preview-btn:hover { color:var(--accent); border-color:var(--accent); }
[data-theme="light"] .sheet-preview-tooltip { background:#fff; border-color:#ccc; }

/* Sheet row inline actions */
.sheet-row-actions { display:flex; gap:2px; flex-shrink:0; opacity:0; transition:opacity 0.15s; }
.layer-row:hover .sheet-row-actions { opacity:1; }
.layer-row.active .sheet-row-actions { opacity:0.6; }
.layer-row.active:hover .sheet-row-actions { opacity:1; }
.sheet-row-act {
  width:16px; height:16px; border:none; background:transparent; color:var(--text3);
  border-radius:3px; font-size:10px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding:0; transition:all 0.12s;
}
.sheet-row-act:hover { background:rgba(255,255,255,0.1); color:var(--accent); }
.sheet-row-act-del:hover { color:#ff4757; }
[data-theme="light"] .sheet-row-act:hover { background:rgba(0,0,0,0.06); }
.sheets-sb-danger:hover { background:rgba(255,60,60,0.15); color:#ff4444; }

/* Vertical Toolbar (right edge of canvas) */
.vtoolbar {
  position:absolute; top:50%; left:12px; transform:translateY(-50%);
  z-index:15;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:2px 0 8px rgba(0,0,0,0.15);
  overflow:hidden;
  transition:opacity 0.2s;
}
.vtoolbar::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(124,92,191,0.8) 50%, var(--accent) 100%);
  opacity:0.7; z-index:1;
}
.vt-btn {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--text2);
  border-radius:5px; cursor:pointer; font-size:14px;
  transition:all 0.1s;
}
.vt-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }
[data-theme="light"] .vt-btn:hover { background:rgba(0,0,0,0.06); color:var(--text); }
.vt-btn:disabled { opacity:0.3; cursor:default; }
.vt-btn.active { background:var(--accent-dim); color:var(--accent); }
.vt-sep { width:20px; height:1px; background:var(--border2); margin:2px 0; }

.canvas-toolbar {
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:6px 14px;
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.toolbar-group { display:flex; align-items:center; gap:4px; }
.toolbar-sep { width:1px; height:22px; background:var(--border2); margin:0 4px; }
.zoom-display { font-size:12px; color:var(--text2); min-width:38px; text-align:center; font-weight:600; }

/* ── Canvas Options (reused styles for sidebar panel) ── */
.cob-pop-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:5px; border:1px solid var(--border2);
  background:var(--panel2); cursor:pointer; transition:all 0.1s; color:var(--text3); font-size:10px; font-weight:600;
}
.cob-pop-btn:hover { border-color:var(--accent); color:var(--accent); }
.cob-pop-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .cob-pop-btn { background:var(--panel2); border-color:var(--border); color:#666; }
[data-theme="light"] .cob-pop-btn:hover { border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .cob-pop-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.cob-swatch {
  width:13px; height:13px; border-radius:2px; flex-shrink:0; display:inline-block;
}
.cob-swatch.white  { background:#fff; border:1px solid #555; }
.cob-swatch.black  { background:#111; border:1px solid #555; }
.cob-swatch.checker {
  background-image:
    linear-gradient(45deg,#888 25%,transparent 25%),
    linear-gradient(-45deg,#888 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#888 75%),
    linear-gradient(-45deg,transparent 75%,#888 75%);
  background-size:6px 6px;
  background-position:0 0,0 3px,3px -3px,-3px 0;
  background-color:#bbb;
}
/* Color picker button */
.cob-color-wrap { position:relative; display:inline-flex; align-items:center; }
.cob-color-swatch {
  width:13px; height:13px; border-radius:2px; border:1px solid #555; flex-shrink:0;
  background:#7c5cbf;
}
.cob-color-input {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
/* Grid size input */
.cob-grid-size {
  display:none; align-items:center; gap:4px;
}
.cob-grid-size.visible { display:inline-flex; }
.cob-grid-size input {
  width:44px; font-size:11px; font-weight:600; color:var(--text);
  background:var(--panel2); border:1px solid var(--border2); border-radius:5px;
  padding:3px 6px; font-family:'Inter',sans-serif;
  text-align:center; outline:none;
}
.cob-grid-size input:focus { border-color:#7c5cbf; color:var(--text); }
.cob-grid-size select {
  font-size:11px; font-weight:600; color:var(--text);
  background:var(--panel2); border:1px solid var(--border2); border-radius:5px;
  padding:3px 4px; font-family:'Inter',sans-serif; cursor:pointer; outline:none;
}
.cs-tool-row.cs-size-btn { font-weight:600; }
.cs-tool-row.cs-size-btn:hover { background:rgba(255,255,255,0.06); color:var(--accent); }
[data-theme="light"] .cs-tool-row.cs-size-btn:hover { background:rgba(0,0,0,0.04); color:var(--accent); }

/* ── Size Modal ── */
.sm-box {
  background:var(--panel); border:1px solid var(--border2); border-radius:14px;
  width:340px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  overflow:hidden; animation:smIn 0.15s ease;
}
@keyframes smIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.sm-header {
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  font-size:14px; font-weight:700; color:var(--text); border-bottom:1px solid var(--border);
  font-family:'Inter',sans-serif;
}
.sm-close {
  margin-left:auto; background:none; border:none; color:var(--text3);
  font-size:16px; cursor:pointer; width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; transition:all 0.1s;
}
.sm-close:hover { background:rgba(239,68,68,0.1); color:#ef4444; }
.sm-body { padding:18px; }
.sm-row { display:flex; gap:14px; margin-bottom:14px; }
.sm-row:last-child { margin-bottom:0; }
.sm-field { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sm-label {
  font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.06em; text-align:center;
}
.sm-input-wrap { display:flex; align-items:center; width:100%; }
.sm-spin {
  width:32px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--border2); color:var(--text3);
  font-size:16px; font-weight:700; cursor:pointer; transition:all 0.1s;
  user-select:none; flex-shrink:0;
}
.sm-spin:first-child { border-radius:8px 0 0 8px; }
.sm-spin:last-child { border-radius:0 8px 8px 0; }
.sm-spin:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.sm-spin:active { background:var(--accent); color:#fff; }
.sm-input {
  flex:1; min-width:0; height:36px; text-align:center; font-size:16px; font-weight:700;
  color:var(--text); background:var(--panel2); border:1px solid var(--border2);
  border-left:none; border-right:none; outline:none;
  font-family:'Inter',sans-serif; -moz-appearance:textfield;
}
.sm-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.sm-input:focus { color:var(--accent); border-color:var(--accent); }
.sm-unit {
  font-size:9px; font-weight:600; color:var(--text3); text-align:center;
}
.sm-footer {
  padding:0 18px 16px; display:flex; justify-content:flex-end;
}
.sm-done {
  padding:8px 24px; background:var(--accent); color:#fff; border:none; border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
  transition:opacity 0.1s;
}
.sm-done:hover { opacity:0.85; }
[data-theme="light"] .sm-box { background:#fff; border-color:var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.15); }
[data-theme="light"] .sm-spin { background:var(--panel2); border-color:var(--border); }
[data-theme="light"] .sm-input { background:var(--panel2); border-color:var(--border); color:var(--text); }

/* ── Vertical Canvas Settings Panel (inside sheets sidebar) ── */
.cs-panel {
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.cs-section-header {
  display:flex; align-items:center; gap:5px;
  padding:7px 10px; font-size:10px; font-weight:700;
  color:#fff; letter-spacing:0.04em;
  cursor:pointer; user-select:none; transition:color 0.12s;
}
[data-theme="light"] .cs-section-header { color:var(--text); }
.cs-section-header:hover { opacity:0.85; }
.cs-header {
  display:flex; align-items:center; gap:5px;
  padding:7px 10px; font-size:9px; font-weight:700;
  color:var(--text3); text-transform:uppercase; letter-spacing:0.06em;
  cursor:pointer; user-select:none; transition:color 0.12s;
}
.cs-header:hover { color:var(--text); }
.cs-chevron { margin-left:auto; font-size:8px; transition:transform 0.15s; }
.cs-panel.collapsed .cs-chevron { transform:rotate(-90deg); }
.cs-panel.collapsed .cs-body { display:none; }
.cs-body { padding:0 0 6px; }
.cs-tool { position:relative; }
.cs-tool-row {
  display:flex; align-items:center; gap:6px;
  padding:5px 10px; cursor:pointer;
  font-size:10px; color:var(--text2);
  transition:background 0.1s, color 0.1s;
  border:none; background:none; width:100%;
  text-align:left; font-family:'Inter',sans-serif;
}
.cs-tool-row:hover { background:rgba(255,255,255,0.04); color:var(--text); }
[data-theme="light"] .cs-tool-row:hover { background:rgba(0,0,0,0.03); }
.cs-toggle.active { color:var(--accent); }
.cs-toggle.active .cs-ico { color:var(--accent); }
.cs-ico {
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text3); flex-shrink:0;
}
.cs-label { font-weight:600; white-space:nowrap; }
.cs-hint {
  margin-left:auto; font-size:8px; color:var(--text3); opacity:0;
  transition:opacity 0.15s; font-weight:400; white-space:nowrap;
}
.cs-tool-row:hover .cs-hint { opacity:1; }
.cs-badge {
  margin-left:auto; font-size:7px; font-weight:800; color:var(--accent);
  background:var(--accent-dim); padding:1px 5px; border-radius:3px;
  letter-spacing:0.04em;
}
.cs-expand { display:none; }
.cs-tool.open .cs-expand { display:block; animation:csExpand 0.12s ease; }
@keyframes csExpand { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.cs-sep { height:1px; background:var(--border); margin:4px 10px; opacity:0.5; }
.cs-danger { color:#E11D48 !important; }
.cs-danger .cs-ico { color:#E11D48; }
.cs-danger:hover { background:rgba(225,29,72,0.1) !important; color:#E11D48 !important; }
.cs-danger:hover .cs-ico { color:#E11D48; }
[data-theme="dark"] .cs-danger { color:#E11D48 !important; }
[data-theme="dark"] .cs-danger .cs-ico { color:#E11D48; }
[data-theme="dark"] .cs-danger:hover { background:rgba(225,29,72,0.1) !important; color:#fb2c5a !important; }
[data-theme="dark"] .cs-danger:hover .cs-ico { color:#fb2c5a; }
/* ── Nesting Type Buttons ── */
.nest-type-btn {
  display:flex; align-items:center; gap:3px;
  width:100%; padding:6px 8px; border-radius:6px;
  border:1.5px solid var(--border); background:transparent;
  cursor:pointer; transition:all 0.15s ease;
  font-family:'Inter',sans-serif; position:relative; overflow:visible;
}
.nest-type-btn:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.12); }
[data-theme="light"] .nest-type-btn:hover { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.12); }
[data-theme="light"] .nest-type-header { color:var(--text) !important; }
[data-theme="light"] .nest-type-header svg { stroke:var(--text) !important; }
.nest-type-btn.active { border-color:var(--ntb-color, var(--accent)); background:color-mix(in srgb, var(--ntb-color, var(--accent)) 8%, transparent); }
.nest-type-btn.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:0 3px 3px 0;
  background:var(--ntb-color, var(--accent));
}
.ntb-icon { font-size:11px; width:16px; text-align:center; flex-shrink:0; position:relative; top:-1px; display:inline-flex; align-items:center; justify-content:center; }
.ntb-label { font-size:10px; font-weight:600; color:var(--text2); white-space:nowrap; text-align:left; }
.nest-type-btn.active .ntb-label { color:var(--text); }
.ntb-tag {
  font-size:7px; font-weight:700; letter-spacing:0.3px;
  text-transform:uppercase; padding:2px 4px; border-radius:3px;
  background:rgba(255,255,255,0.04); color:var(--text3); transition:all 0.15s;
  white-space:nowrap; flex-shrink:0; margin-left:auto;
}
.nest-type-btn.active .ntb-tag {
  background:color-mix(in srgb, var(--ntb-color, var(--accent)) 18%, transparent);
  color:var(--ntb-color, var(--accent));
}
.canvas-scroll {
  width:100%; height:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:18px 28px 12px;
  background: var(--canvas-bg);
  position:relative;
  margin-right:148px;
  width:calc(100% - 148px);
}
.canvas-scroll.overflowing { overflow:auto; }
.canvas-container { position:relative; flex-shrink:0; overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.sheet-name-banner-inner {
  display:inline-flex; align-items:center; gap:7px;
  background:#141414;
  color:#fff;
  -webkit-text-stroke:1px #000; text-stroke:1px #000;
  paint-order:stroke fill;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:5px 14px;
  border-radius:20px;
  letter-spacing:0.03em;
  box-shadow:0 1px 6px rgba(0,0,0,0.18);
  border:2px solid transparent;
  background-clip:padding-box;
  position:relative;
  white-space:nowrap;
}
.sheet-name-banner-inner::before {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background:linear-gradient(90deg, #7c5cbf 0%, #7c5cbf 50%, #7c5cbf 100%);
  z-index:-1;
}
.sheet-name-banner-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent,#0ff);
  flex-shrink:0;
}
[data-theme="light"] .sheet-name-banner-inner {
  background:#ffffff;
  color:var(--text);
  -webkit-text-stroke:0px transparent; text-stroke:0px transparent;
  box-shadow:0 1px 6px rgba(0,0,0,0.12);
}
[data-theme="light"] .sheet-name-banner-dot { background:var(--accent); }
[data-theme="light"] #sheetNameBannerSize { color:var(--text) !important; }

#mainCanvas {
  display:block;
  cursor:default;
  box-shadow: var(--shadow-lg);
}

/* Photoshop-style Layers Panel */
.layers-panel {
  border-top:1px solid var(--border);
  display:flex; flex-direction:column;
  flex:1; min-height:0;
  flex-shrink:0; flex-grow:1;
  background:var(--panel);
}
.layers-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  background:var(--cob-bg);
  flex-shrink:0;
}
.layers-tab {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.08em;
  font-family:'Inter',sans-serif;
  padding:3px 0; border-bottom:2px solid transparent;
}
.layers-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.layers-summary {
  font-size:9px; color:var(--text3);
  font-family:'Inter',sans-serif;
}
.layers-list {
  flex:1; overflow-y:auto; overflow-x:hidden;
}
.layer-row {
  display:flex; align-items:center; gap:3px;
  padding:4px 5px; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background 0.1s;
  font-family:'Inter',sans-serif;
  min-height:28px;
}
.layer-row:hover { background:rgba(255,255,255,0.03); }
.layer-row.active { background:rgba(124,92,191,0.08); }
[data-theme="light"] .layer-row:hover { background:rgba(0,0,0,0.03); }
[data-theme="light"] .layer-row.active { background:rgba(106,77,171,0.08); }
.layer-eye {
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--text3); cursor:pointer; flex-shrink:0;
  border-radius:3px; transition:all 0.1s;
}
.layer-eye:hover { background:rgba(255,255,255,0.08); color:var(--text); }
[data-theme="light"] .layer-eye:hover { background:rgba(0,0,0,0.06); }
.layer-thumb {
  width:32px; height:32px; border-radius:3px; flex-shrink:0;
  border:1px solid var(--border2); overflow:hidden;
  background:#fff;
}
.layer-thumb canvas { width:100%; height:100%; display:block; }
.layer-info { flex:1; min-width:0; }
.layer-name {
  font-size:10px; font-weight:600; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.layer-row.active .layer-name { color:var(--text); }
.layer-meta {
  font-size:8px; color:var(--text3); margin-top:0px;
}
.layer-close {
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--text3); cursor:pointer; flex-shrink:0;
  border-radius:3px; opacity:0; transition:all 0.1s;
}
.layer-row:hover .layer-close { opacity:1; }
.layer-close:hover { background:rgba(239,68,68,0.15); color:#ef4444; }
.layers-toolbar {
  display:flex; align-items:center; justify-content:center; gap:2px;
  padding:5px 10px;
  border-top:1px solid var(--border);
  background:var(--cob-bg);
  flex-shrink:0;
}
.layers-tool-btn {
  width:28px; height:24px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--text3);
  border-radius:3px; cursor:pointer; transition:all 0.1s;
}
.layers-tool-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }
[data-theme="light"] .layers-tool-btn:hover { background:rgba(0,0,0,0.06); color:var(--text); }
.layers-tool-danger:hover { color:#ef4444 !important; background:rgba(239,68,68,0.1) !important; }

/* RIGHT PANEL */
.right-panel {
  width:260px;
  background:var(--panel);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  overflow:hidden;
}
.rp-header {
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.rp-tab {
  font-size:11px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif;
  padding:3px 0;
  border-bottom:2px solid var(--accent);
  cursor:default;
}
.right-panel-header {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:10px;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-family:'Montserrat',sans-serif;
}
.prop-section { padding:12px 14px; border-bottom:1px solid var(--border); }
.prop-label { font-size:10px; color:var(--text3); font-weight:600; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
.prop-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.prop-row label { font-size:12px; color:var(--text2); width:18px; }
.prop-row input[type=number] { flex:1; width:auto; }
.prop-row input[type=range] { flex:1; accent-color:var(--accent); }

.no-selection {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:#888888; font-size:12px;
  text-align:center; padding:24px; gap:10px; line-height:1.6;
}
.no-selection-icon { font-size:2.2rem; opacity:0.5; }

/* STATS BAR */
.stats-bar {
  background:var(--panel);
  border-top:1px solid var(--border);
  padding:6px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  color:#888888;
  flex-shrink:0;
  min-height:46px;
}
.stat-item { display:flex; align-items:center; gap:5px; }
.stat-val { font-weight:700; color:#cccccc; }
.util-bar-wrap {
  flex:1; max-width:160px; height:4px;
  background:var(--panel2); border-radius:3px; overflow:hidden;
}
.util-bar-fill {
  height:100%;
  background:var(--mag-grad);
  border-radius:3px; transition:width 0.4s;
}

/* TOAST */
.toast {
  position:fixed; bottom:48px; left:20px; transform:translateY(20px); z-index:999;
  background:var(--panel2);
  border:1px solid var(--border2);
  color:var(--text);
  font-size:13px;
  padding:10px 16px; border-radius:8px;
  opacity:0;
  transition:all 0.25s; pointer-events:none;
  box-shadow:var(--shadow-lg);
  border-left:3px solid var(--accent);
  white-space:nowrap;
}
.toast.show { opacity:1; transform:translateY(0); }

/* UPSCALE MODAL */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85); z-index:500;
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--panel);
  border:1px solid var(--border2);
  border-top:2px solid var(--accent);
  border-radius:12px;
  padding:24px 28px; width:680px; max-width:96vw;
  box-shadow:var(--shadow-lg);
}
.modal-box h3 { font-size:16px; font-weight:700; margin-bottom:4px; color:var(--text); }
.modal-sub { font-size:12px; color:var(--text3); margin-bottom:16px; }
.modal-steps { display:flex; flex-direction:column; gap:1px; margin-bottom:16px; }
.modal-step {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px;
  background:var(--panel2); font-size:12px; color:var(--text3);
}
.modal-step.active { background:var(--accent-dim); color:var(--accent); }
.modal-step.done { background:rgba(124,92,191,0.08); color:var(--success); }
.sdot { width:8px; height:8px; border-radius:50%; background:var(--border2); flex-shrink:0; }
.modal-step.active .sdot { background:var(--accent); animation:spin-pulse 1s infinite; }
.modal-step.done .sdot { background:var(--success); }
@keyframes spin-pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.compare-viewer { display:none; flex-direction:column; gap:8px; margin:14px 0; }
.compare-labels { display:flex; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:0.06em; color:var(--text3); }
.compare-stage {
  position:relative; width:100%; height:340px;
  border-radius:8px; overflow:hidden;
  border:1px solid var(--border); background:#111;
  cursor:grab; user-select:none;
}
.compare-stage.dragging-slider { cursor:ew-resize; }
.compare-stage.panning { cursor:grabbing; }
.cs-after { position:absolute; inset:0; overflow:hidden; }
.cs-after img { position:absolute; transform-origin:0 0; max-width:none; max-height:none; display:block; }
.cs-before { position:absolute; top:0; left:0; bottom:0; overflow:hidden; }
.cs-before img { position:absolute; transform-origin:0 0; max-width:none; max-height:none; display:block; }
.cs-divider {
  position:absolute; top:0; bottom:0; width:44px;
  transform:translateX(-50%); cursor:ew-resize; z-index:10;
  display:flex; align-items:stretch; justify-content:center;
}
.cs-divider::before { content:''; display:block; width:3px; background:var(--accent); flex-shrink:0; align-self:stretch; }
.cs-handle {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; font-weight:700;
  pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.compare-hint { font-size:10px; color:var(--text3); text-align:center; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.compare-row { display:none; }

/* ─── QUICK ORDER MODAL ─── */
.qo-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85); z-index:550;
  align-items:stretch; justify-content:center;
}
.qo-overlay.open { display:flex; }
[data-theme="light"] .qo-overlay { background:rgba(0,0,0,0.4); }

.qo-panel {
  background:var(--bg);
  width:100%; height:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.qo-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:var(--panel);
  border-bottom:2px solid var(--accent);
  flex-shrink:0;
}
.qo-header h2 {
  font-size:17px; font-weight:800; color:var(--text);
  font-family:'Montserrat',sans-serif; letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.qo-header h2 span { font-size:11px; font-weight:500; color:var(--text3); }
.qo-close {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border2);
  background:transparent; color:var(--text2); font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.qo-close:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }

.qo-toolbar {
  display:flex; align-items:center; gap:14px;
  padding:10px 24px; background:var(--panel2);
  border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.qo-toolbar label {
  font-size:11px; font-weight:600; color:var(--text2);
  display:flex; align-items:center; gap:6px;
}
.qo-toolbar input[type=number] {
  width:55px; padding:5px 8px; font-size:12px; font-weight:600;
  background:var(--panel); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); font-family:'Inter',sans-serif; text-align:center; outline:none;
}
.qo-toolbar input[type=number]:focus { border-color:var(--accent); }
.qo-toolbar select {
  padding:5px 8px; font-size:11px; font-weight:600;
  background:var(--panel); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); font-family:'Inter',sans-serif; cursor:pointer; outline:none;
}
.qo-toolbar select:focus { border-color:var(--accent); }
.qo-toolbar .qo-stat {
  margin-left:auto; font-size:11px; color:var(--text3); font-weight:500;
}

/* qo-body used to be a clickable upload hotspot (inline style
   cursor:pointer + onclick=_qoBodyClick). Both are now neutered —
   only the centered `.qo-empty` icon + header button trigger upload.
   Override the inline cursor so the whole black area doesn't look
   clickable. */
.qo-body {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  cursor: default !important;
  min-height:0;
}
.qo-empty { cursor: pointer; }
/* Tab content wrappers default to display:block — which means `flex:1`
   on `.qo-body` has nothing to fill vertically. Force flex column so the
   body (and therefore the centered empty state) can use the full height. */
#qoTabContentDesigns, #qoTabContentPremade {
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.qo-upload-bar {
  display:flex; align-items:center; gap:16px;
  padding:10px 24px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.qo-upload-zone {
  border:2px dashed var(--border2); border-radius:8px;
  padding:10px 20px; text-align:center; cursor:pointer;
  transition:all 0.2s; background:var(--panel2);
  display:flex; align-items:center; gap:12px;
}
.qo-upload-zone:hover { border-color:var(--accent); background:var(--accent-light); }
.qo-upload-zone .qo-upload-icon { font-size:20px; }
.qo-upload-zone h4 { font-size:12px; font-weight:700; color:var(--text); margin:0; }
.qo-upload-zone p { font-size:9px; color:var(--text3); margin:0; }
.qo-grid-area {
  flex:1; overflow-y:auto; padding:16px 20px;
  display:flex; flex-direction:column;
}
.qo-designs-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
  align-content:start; flex:1;
}
/* When the grid only contains the empty state, pin it to the TOP of the
   available space, horizontally centered. The `.qo-empty` box itself is
   compact (icon + label) so this puts the icon near the top edge. */
.qo-designs-grid:has(.qo-empty) {
  align-content:start;
  justify-content:center;
  justify-items:center;
  min-height:100%;
  padding-top:40px;
}
.qo-design-card {
  display:flex; flex-direction:column; gap:4px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px;
  transition:border-color 0.15s; position:relative;
}
.qo-design-card:hover { border-color:var(--border2); }
.qo-card-body {
  display:flex; align-items:stretch; gap:10px;
}
.qo-card-left {
  display:flex; flex-direction:column; align-items:center; align-self:center; gap:4px; flex-shrink:0;
}
.qo-design-thumb {
  width:52px; height:52px; flex-shrink:0; border-radius:6px;
  background:var(--panel2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.qo-design-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.qo-card-mid { flex:1; min-width:0; align-self:center; }
.qo-design-name {
  font-size:11px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif; padding-left:9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qo-dpi-good { color:var(--success); font-weight:700; }
.qo-dpi-low { color:var(--warn); font-weight:700; }
.qo-dpi-bad { color:var(--danger); font-weight:700; }
.qo-dpi-badge {
  font-size:9px; font-weight:700; letter-spacing:0.04em;
  padding:0 8px; border-radius:3px; white-space:nowrap;
  height:18px; display:inline-flex; align-items:center; justify-content:center;
}
.qo-dpi-badge-great { background:rgba(34,197,94,0.15); color:#7c5cbf; border:1px solid rgba(34,197,94,0.35); }
.qo-dpi-badge-good { background:rgba(245,158,11,0.15); color:var(--warn); border:1px solid rgba(245,158,11,0.3); }
.qo-dpi-badge-bad { background:rgba(239,68,68,0.15); color:var(--danger); border:1px solid rgba(239,68,68,0.3); }
.qo-card-fields { display:flex; flex-direction:column; gap:6px; }
.qo-field-row { display:flex; align-items:center; gap:3px; }
.qo-field-label { font-size:9px; font-weight:600; color:var(--text3); width:18px; flex-shrink:0; }
.qo-field-wrap {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--border2); border-radius:3px; overflow:hidden;
}
.qo-field-btn {
  width:16px; height:18px; border:none; padding:0;
  background:var(--panel2); color:var(--text3);
  font-size:10px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.1s;
}
.qo-field-btn:hover { background:var(--accent); color:#fff; }
.qo-field-input {
  width:48px; height:18px; border:none;
  border-left:1px solid var(--border2); border-right:1px solid var(--border2);
  background:var(--panel); color:var(--text); font-size:10px; font-weight:600;
  text-align:center; font-family:'Inter',sans-serif; outline:none;
  -moz-appearance:textfield;
}
.qo-field-input::-webkit-inner-spin-button,
.qo-field-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.qo-field-unit { font-size:8px; color:var(--text3); margin-left:2px; }
.qo-upscale-btn {
  font-size:9px; font-weight:600; color:var(--text2);
  background:var(--panel2); border:1px solid var(--border2);
  border-radius:6px; cursor:pointer;
  transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center; gap:3px;
  height:20px; padding:0 10px; white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.qo-upscale-btn:hover {
  background:var(--accent); color:#000; border-color:var(--accent);
  box-shadow:0 0 8px rgba(124,92,191,0.4); transform:scale(1.05);
}
.qo-card-right {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex-shrink:0;
}
.qo-qty-wrap {
  display:flex; align-items:center; gap:0; border-radius:4px;
  border:1px solid var(--border2); overflow:hidden;
}
.qo-qty-btn {
  width:22px; height:24px; border:none;
  background:var(--panel2); color:var(--text2);
  font-size:13px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.1s;
}
.qo-qty-btn:hover { background:var(--accent); color:#fff; }
.qo-qty-input {
  width:48px; height:24px; border:none;
  border-left:1px solid var(--border2); border-right:1px solid var(--border2);
  background:var(--panel); color:var(--text); font-size:12px; font-weight:700;
  text-align:center; font-family:'Inter',sans-serif; outline:none;
  -moz-appearance:textfield;
}
.qo-qty-input::-webkit-inner-spin-button,
.qo-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.qo-remove-x {
  font-size:9px; color:var(--text3); background:none; border:none;
  cursor:pointer; padding:2px 4px; transition:color 0.1s;
}
.qo-remove-x:hover { color:var(--danger); }

/* Quick Edit button */
.qo-edit-btn {
  flex-shrink:0; font-size:9px; font-weight:600; color:var(--text2);
  background:var(--panel2); border:1px solid var(--border2);
  border-radius:6px; cursor:pointer;
  transition:all 0.15s; font-family:'Inter',sans-serif; white-space:nowrap;
  width:82px; height:20px; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.qo-edit-btn:hover {
  background:var(--accent); color:#000; border-color:var(--accent);
  box-shadow:0 0 8px rgba(124,92,191,0.4); transform:scale(1.05);
}

/* PRO buttons (Topaz) */
.topaz-pro-btn {
  font-size:8px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#f59e0b,#f97316); border:none;
  border-radius:4px; padding:2px 7px; font-family:'Inter',sans-serif;
  transition:all 0.15s; white-space:nowrap; letter-spacing:0.02em;
}
.topaz-pro-btn:hover { background:linear-gradient(135deg,#d97706,#ea580c); }
.topaz-pro-btn:disabled { opacity:0.5; cursor:wait; }
.topaz-pro-btn.pro-green { background:linear-gradient(135deg,#6a4dab,#7c5cbf); }
.topaz-pro-btn.pro-green:hover { background:linear-gradient(135deg,#5a3d9b,#6a4dab); }
.topaz-pro-btn.pro-gold {
  background:linear-gradient(135deg,#8b6914 0%,#c9a227 30%,#e8d277 55%,#c9a227 75%,#8b6914 100%);
  color:#1a1000; text-shadow:0 1px 0 rgba(255,215,0,0.3);
  border:1px solid rgba(201,162,39,0.4);
}
.topaz-pro-btn.pro-gold:hover {
  background:linear-gradient(135deg,#a07c1c 0%,#d4b33a 30%,#f0dc82 55%,#d4b33a 75%,#a07c1c 100%);
  box-shadow:0 2px 12px rgba(201,162,39,0.3);
}
.topaz-pro-badge {
  display:inline-block; font-size:6px; font-weight:800;
  background:linear-gradient(135deg,#8b6914,#c9a227,#e8d277,#c9a227); color:#1a1000;
  border-radius:3px;
  padding:1px 5px; vertical-align:middle; margin-left:3px; letter-spacing:0.06em;
  border:1px solid rgba(201,162,39,0.5);
}
/* Topaz settings dialog */
.topaz-settings-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:700; align-items:center; justify-content:center;
}
.topaz-settings-overlay.open { display:flex; }
.topaz-settings-box {
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:24px; width:420px; max-width:90vw;
}
.topaz-settings-box h3 { margin:0 0 12px; font-size:15px; color:var(--text); }
.topaz-settings-box p { font-size:11px; color:var(--text3); margin:0 0 12px; }
.topaz-key-input {
  width:100%; padding:8px 12px; font-size:12px; font-family:'Inter',sans-serif;
  background:var(--panel2); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); box-sizing:border-box;
}
.topaz-key-input:focus { outline:none; border-color:var(--accent); }
.topaz-credits { font-size:11px; color:var(--text2); margin-top:8px; }
.topaz-credits b { color:#f59e0b; }
/* Admin panel tabs */
.topaz-tab {
  padding:8px 14px; font-size:11px; font-weight:600; color:var(--text3);
  background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;
}
.topaz-tab:hover { color:var(--text); }
.topaz-tab.active { color:#f59e0b; border-bottom-color:#f59e0b; }
/* User row */
.topaz-user-row {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--border); border-radius:6px; margin-bottom:6px;
  background:var(--panel2); transition:background 0.15s;
}
.topaz-user-row:hover { background:var(--border); }
.topaz-user-row .tu-name {
  flex:1; font-size:11px; font-weight:600; color:var(--text);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topaz-user-row .tu-credits {
  font-size:12px; font-weight:700; color:#f59e0b; min-width:60px; text-align:center;
}
.topaz-user-row .tu-used {
  font-size:9px; color:var(--text3); min-width:50px; text-align:center;
}
.topaz-user-row input {
  width:60px; padding:3px 6px; font-size:11px; text-align:center;
  background:var(--panel); border:1px solid var(--border2); border-radius:4px; color:var(--text);
}
.topaz-user-row button {
  background:none; border:none; cursor:pointer; font-size:14px; padding:2px;
  opacity:0.5; transition:opacity 0.15s;
}
.topaz-user-row button:hover { opacity:1; }
/* Log row */
.topaz-log-row {
  display:flex; gap:8px; padding:5px 8px; border-bottom:1px solid var(--border);
  font-size:10px; color:var(--text2);
}
.topaz-log-row:nth-child(even) { background:var(--panel2); }
.topaz-log-row .tl-time { color:var(--text3); min-width:120px; }
.topaz-log-row .tl-user { font-weight:600; color:var(--text); min-width:80px; }
.topaz-log-row .tl-action { flex:1; }
.topaz-log-row .tl-cost { font-weight:700; color:#f59e0b; min-width:40px; text-align:right; }

/* Cart / Checkout */
.cart-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75);
  z-index:650; align-items:center; justify-content:center;
}
.cart-overlay.open { display:flex; }
.cart-box {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  width:700px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column;
  overflow:hidden;
}
.cart-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.cart-header h2 { margin:0; font-size:16px; color:var(--text); }
.cart-body { flex:1; overflow-y:auto; padding:16px 20px; }
.cart-footer {
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.cart-sheet-card {
  display:flex; gap:14px; padding:12px; border:1px solid var(--border);
  border-radius:10px; margin-bottom:10px; background:var(--panel2);
}
.cart-sheet-thumb {
  width:120px; height:120px; border-radius:6px; overflow:hidden;
  background:repeating-conic-gradient(var(--border) 0% 25%, transparent 0% 50%) 50%/12px 12px;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.cart-sheet-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.cart-sheet-info { flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.cart-sheet-name { font-size:13px; font-weight:700; color:var(--text); }
.cart-sheet-detail { font-size:10px; color:var(--text3); }
.cart-sheet-price { font-size:14px; font-weight:700; color:var(--success); }
.cart-sheet-qty {
  display:flex; align-items:center; gap:6px; margin-top:4px;
}
.cart-sheet-qty button {
  width:24px; height:24px; border-radius:4px; border:1px solid var(--border2);
  background:var(--panel); color:var(--text); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.cart-sheet-qty button:hover { background:var(--accent); color:#fff; }
.cart-sheet-qty span { font-size:13px; font-weight:700; color:var(--text); min-width:24px; text-align:center; }
.cart-total-row {
  display:flex; justify-content:space-between; padding:8px 0;
  font-size:12px; color:var(--text2);
}
.cart-total-row.grand { font-size:15px; font-weight:700; color:var(--text); border-top:2px solid var(--border); padding-top:10px; margin-top:6px; }
.cart-form-row {
  display:flex; gap:10px; margin-bottom:10px;
}
.cart-form-row label {
  font-size:10px; font-weight:600; color:var(--text3); display:block; margin-bottom:3px;
}
.cart-form-row input, .cart-form-row textarea {
  width:100%; padding:8px 10px; font-size:12px; font-family:'Inter',sans-serif;
  background:var(--panel2); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); box-sizing:border-box;
}
.cart-form-row input:focus, .cart-form-row textarea:focus { outline:none; border-color:var(--accent); }
.cart-place-btn {
  padding:10px 28px; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#6a4dab,#7c5cbf); border:none; border-radius:8px;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;
}
.cart-place-btn:hover { background:linear-gradient(135deg,#5a3d9b,#6a4dab); }
.cart-place-btn:disabled { opacity:0.5; cursor:not-allowed; }
/* Confirmation */
.cart-confirm {
  text-align:center; padding:40px 20px;
}
.cart-confirm .check { font-size:48px; margin-bottom:12px; }
.cart-confirm h2 { color:var(--success); margin:0 0 8px; }
.cart-confirm p { color:var(--text3); font-size:12px; margin:4px 0; }

/* Orders Dashboard */
.orders-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8);
  z-index:660; align-items:stretch; justify-content:center;
}
.orders-overlay.open { display:flex; }
.orders-box {
  background:var(--panel); width:100%; max-width:1100px; margin:20px;
  border-radius:14px; border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;
}
.orders-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.orders-header h2 { margin:0; font-size:16px; color:var(--text); }
.orders-toolbar {
  display:flex; gap:8px; padding:10px 20px; border-bottom:1px solid var(--border);
  align-items:center; flex-shrink:0; flex-wrap:wrap;
}
.orders-toolbar select, .orders-toolbar input {
  padding:5px 10px; font-size:11px; background:var(--panel2); border:1px solid var(--border2);
  border-radius:5px; color:var(--text); font-family:'Inter',sans-serif;
}
.orders-content { flex:1; overflow-y:auto; padding:12px 20px; }
/* Order list view */
.order-row {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; margin-bottom:8px;
  background:var(--panel2); cursor:pointer; transition:all 0.15s;
}
.order-row:hover { border-color:var(--accent); background:var(--border); }
.order-row .or-id { font-size:11px; font-weight:700; color:var(--accent); min-width:110px; }
.order-row .or-date { font-size:10px; color:var(--text3); min-width:130px; }
.order-row .or-customer { font-size:11px; color:var(--text); flex:1; font-weight:600; }
.order-row .or-sheets { font-size:10px; color:var(--text3); min-width:70px; text-align:center; }
.order-row .or-total { font-size:12px; font-weight:700; color:var(--success); min-width:70px; text-align:right; }
.order-status-badge {
  font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase;
  letter-spacing:0.03em; min-width:70px; text-align:center; display:inline-block;
}
.order-status-badge.new { background:rgba(59,130,246,0.15); color:#7c5cbf; }
.order-status-badge.processing { background:rgba(245,158,11,0.15); color:#f59e0b; }
.order-status-badge.completed { background:rgba(124,92,191,0.15); color:#7c5cbf; }
.order-status-badge.shipped { background:rgba(139,92,246,0.15); color:#8b5cf6; }
.order-status-badge.cancelled { background:rgba(239,68,68,0.15); color:#ef4444; }
/* Order detail view */
.order-detail-back { font-size:11px; color:var(--text3); cursor:pointer; margin-bottom:12px; display:inline-flex; align-items:center; gap:4px; transition:color 0.15s; }
.order-detail-back:hover { color:var(--text); }
.order-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.order-detail-header h3 { margin:0; font-size:16px; color:var(--text); }

/* Progress stepper */
.odv-stepper { display:flex; align-items:center; gap:0; margin-bottom:18px; position:relative; }
.odv-step { display:flex; align-items:center; gap:0; cursor:pointer; position:relative; z-index:1; }
.odv-step-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--border2); background:var(--panel2); transition:all 0.2s; flex-shrink:0; }
.odv-step-label { font-size:10px; font-weight:600; color:var(--text3); padding:4px 10px; transition:all 0.15s; white-space:nowrap; }
.odv-step:hover .odv-step-label { color:var(--text); }
.odv-step.active .odv-step-dot { border-color:var(--step-color); background:var(--step-color); box-shadow:0 0 8px var(--step-color); }
.odv-step.active .odv-step-label { color:var(--step-color); font-weight:700; }
.odv-step.done .odv-step-dot { border-color:var(--step-color); background:var(--step-color); }
.odv-step-line { flex:1; height:2px; background:var(--border); min-width:12px; transition:background 0.2s; }
.odv-step-line.done { background:var(--step-color,var(--border2)); }

.odv-layout { display:grid; grid-template-columns:1fr 300px; gap:24px; margin-top:0; }
@media(max-width:900px) { .odv-layout { grid-template-columns:1fr; } }
.odv-main { min-width:0; }
.odv-sidebar { display:flex; flex-direction:column; gap:10px; }
.odv-sidebar-card { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.odv-sidebar-card h4 { margin:0 0 10px; font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }
.odv-sidebar-card .odv-row { display:flex; justify-content:space-between; align-items:flex-start; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.03); font-size:11px; }
.odv-sidebar-card .odv-row:last-child { border-bottom:none; }
.odv-sidebar-card .odv-label { color:var(--text3); flex-shrink:0; margin-right:10px; font-size:10px; }
.odv-sidebar-card .odv-val { color:var(--text); font-weight:600; text-align:right; word-break:break-word; }

/* Ghost tint sidebar buttons */
.odv-ghost-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:8px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:transparent; color:var(--text2); font-size:11px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; }
.odv-ghost-btn:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.14); color:var(--text); }
.odv-ghost-btn.danger { color:#ef4444; border-color:rgba(239,68,68,0.15); }
.odv-ghost-btn.danger:hover { background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.25); }

.order-detail-grid { display:flex; flex-direction:column; gap:8px; }
.order-sheet-card {
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; transition:all 0.15s; cursor:pointer; user-select:none;
}
.order-sheet-card:hover { background:rgba(255,255,255,0.04); border-color:var(--border2); }
.order-sheet-card.osc-selected { background:rgba(124,92,191,0.06); border-color:rgba(124,92,191,0.25); }
.ost-num { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:5px; background:rgba(0,0,0,0.65); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:2; font-family:'Inter',sans-serif; backdrop-filter:blur(4px); }
.order-sheet-thumb {
  width:64px; height:64px; border-radius:8px; overflow:visible; flex-shrink:0; position:relative; cursor:pointer;
  background:repeating-conic-gradient(var(--border) 0% 25%, transparent 0% 50%) 50%/8px 8px;
  display:flex; align-items:center; justify-content:center;
}
.order-sheet-thumb img { width:100%; height:100%; object-fit:contain; border-radius:6px; }
.order-sheet-thumb .ost-hover-big {
  display:none; position:fixed; z-index:9999;
  width:320px; height:320px; border-radius:12px; overflow:hidden; pointer-events:none;
  background:repeating-conic-gradient(#444 0% 25%,#333 0% 50%) 50%/14px 14px;
  box-shadow:0 16px 48px rgba(0,0,0,0.7); border:2px solid var(--border2);
}
.order-sheet-thumb .ost-hover-big img { width:100%; height:100%; object-fit:contain; }
.order-sheet-info { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.order-sheet-info .osi-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-sheet-info .osi-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.order-sheet-info .osi-detail { font-size:10px; color:var(--text3); white-space:nowrap; }
.order-sheet-info .osi-price { font-size:13px; font-weight:800; color:var(--success); white-space:nowrap; }
.order-sheet-info .osi-badge { font-size:8px; background:rgba(124,92,191,0.15); color:#a78bda; padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap; }
.osi-dpi-tag { font-size:8px; font-weight:600; padding:2px 7px; border-radius:4px; white-space:nowrap; }
.osi-dpi-ok { background:rgba(52,211,153,0.12); color:#a89fd6; }
.osi-dpi-warn { background:rgba(245,158,11,0.12); color:#f59e0b; }
.osi-dpi-low { background:rgba(239,68,68,0.12); color:#ef4444; }
.order-sheet-actions { display:flex; gap:6px; flex-shrink:0; align-items:center; }
.order-sheet-actions button { padding:9px 14px; border-radius:8px; border:none; font-size:12px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; height:38px; box-sizing:border-box; }
/* Muted icon button for individual download */
.odv-dl-icon { width:36px; height:36px; min-width:36px; max-width:36px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); color:var(--text2); font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all 0.3s; font-family:'Inter',sans-serif; padding:0; overflow:hidden; box-sizing:border-box; }
.odv-dl-icon:hover { background:rgba(124,92,191,0.15); border-color:rgba(124,92,191,0.3); color:#a78bda; }
.odv-dl-icon.ost-dl-ing { background:rgba(245,158,11,0.2) !important; border-color:rgba(245,158,11,0.5) !important; color:#f59e0b !important; animation:pulse 1s infinite; }
.odv-dl-icon.ost-dl-done { background:rgba(52,211,153,0.2) !important; border-color:rgba(52,211,153,0.5) !important; color:#a89fd6 !important; animation:none; }
.odv-dl-icon.ost-dl-err { background:rgba(239,68,68,0.2) !important; border-color:rgba(239,68,68,0.5) !important; color:#ef4444 !important; animation:none; }
.odv-preview-icon { width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:var(--text3); font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all 0.15s; padding:0; }
.odv-preview-icon:hover { background:rgba(255,255,255,0.04); color:var(--text); }
.ost-dl-done { background:rgba(124,92,191,0.15) !important; border-color:rgba(124,92,191,0.3) !important; color:#a78bda !important; }
.ost-dl-ing { background:rgba(245,158,11,0.15) !important; border-color:rgba(245,158,11,0.3) !important; color:#f59e0b !important; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.order-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.order-info-card {
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:12px;
}
.order-info-card h4 { margin:0 0 8px; font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.05em; }
.order-info-card p { margin:2px 0; font-size:11px; color:var(--text); }
.order-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.order-actions select {
  padding:6px 12px; font-size:11px; background:var(--panel2); border:1px solid var(--border2);
  border-radius:6px; color:var(--text); font-family:'Inter',sans-serif;
}
.order-actions button {
  padding:6px 14px; font-size:11px; font-weight:700; border-radius:6px; border:none;
  cursor:pointer; font-family:'Inter',sans-serif; color:#fff;
}
/* Admin Panel Sidebar */
.adm-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 18px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--text3); transition:all 0.15s;
  border-left:3px solid transparent; font-family:'Inter',sans-serif;
}
.adm-nav-item:hover { background:var(--panel2); color:var(--text); }
.adm-nav-item.active { background:var(--accent-light); color:var(--accent); border-left-color:var(--accent); }
.adm-nav-divider { height:1px; background:var(--border); margin:8px 14px; }
.adm-nav-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:0.08em; padding:10px 18px 4px; font-weight:700; }
/* Admin cards */
.adm-stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.adm-stat-card {
  background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; text-align:center;
}
.adm-stat-card .asc-label { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.adm-stat-card .asc-value { font-size:22px; font-weight:800; color:var(--text); margin-top:4px; font-family:'Inter',sans-serif; }
.adm-stat-card .asc-sub { font-size:11px; color:#888; margin-top:2px; }
/* Admin tables */
.adm-table { width:100%; border-collapse:collapse; font-size:11px; }
.adm-table th { text-align:left; padding:10px 12px; color:#9ca3af; font-size:9px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
.adm-table td { padding:10px 12px; color:var(--text2); border-bottom:1px solid rgba(255,255,255,0.03); vertical-align:middle; }
.adm-table tr:hover td { background:rgba(255,255,255,0.02); transition:background 0.1s; }
.adm-table .at-name { font-weight:700; color:var(--text); }
.adm-table .at-badge { font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; }
.adm-table .at-active { background:rgba(124,92,191,0.15); color:#7c5cbf; }
.adm-table .at-inactive { background:rgba(239,68,68,0.15); color:#ef4444; }
.adm-table .at-actions button {
  background:none; border:none; cursor:pointer; font-size:13px; padding:2px 4px; opacity:0.5; transition:opacity 0.15s;
}
.adm-table .at-actions button:hover { opacity:1; }
/* Form sections */
.adm-form-section { max-width:560px; margin-bottom:24px; }
.adm-form-section h3 { font-size:14px; color:var(--text); margin:0 0 6px; }
.adm-form-section p { font-size:10px; color:var(--text3); margin:0 0 10px; }
.adm-form-row { display:flex; gap:10px; margin-bottom:10px; }
.adm-form-row label { font-size:10px; font-weight:600; color:var(--text3); display:block; margin-bottom:3px; }
.adm-form-row input, .adm-form-row select, #adminContent input[type="text"], #adminContent input[type="number"], #adminContent select {
  width:100%; padding:8px 10px; font-size:12px; background:var(--panel2); border:1px solid var(--border2);
  border-radius:6px; color:var(--text); box-sizing:border-box; font-family:'Inter',sans-serif;
}
.adm-form-row input:focus, #adminContent input:focus, #adminContent select:focus { outline:none; border-color:var(--accent); }
.adm-btn {
  padding:8px 18px; font-size:12px; font-weight:700; border:none; border-radius:6px; cursor:pointer;
  font-family:'Inter',sans-serif; color:#fff; transition:all 0.15s;
}
.adm-btn-primary { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.adm-btn-primary:hover { background:linear-gradient(135deg,#6d28d9,#7c3aed); }
.adm-btn-green { background:linear-gradient(135deg,#6a4dab,#7c5cbf); }
.adm-btn-green:hover { background:linear-gradient(135deg,#5a3d9b,#6a4dab); }
.adm-btn-red { background:linear-gradient(135deg,#dc2626,#ef4444); }
.adm-btn-orange { background:linear-gradient(135deg,#f59e0b,#f97316); }
.adm-btn-outline { background:var(--panel2); border:1px solid var(--border2); color:var(--text); }
.adm-btn-outline:hover { border-color:var(--accent); }

/* Quick Edit Overlay — Photoshop-style 3-panel layout */
.qe-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92); z-index:600;
  font-family:'Inter',sans-serif;
}
.qe-overlay.open { display:flex; }
[data-theme="light"] .qe-overlay { background:rgba(0,0,0,0.5); }
.qe-panel {
  display:flex; flex-direction:column; width:100%; height:100%;
}
.qe-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px; border-bottom:1px solid var(--border);
  background:var(--panel); flex-shrink:0;
}
.qe-header h3 { font-size:12px; font-weight:700; color:var(--text); margin:0; }
.qe-header h3 span { font-weight:400; color:var(--text3); font-size:10px; }
.qe-header-btns { display:flex; gap:6px; align-items:center; }
.qe-btn { padding:5px 12px; border-radius:5px; font-size:10px; font-weight:600; cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:all 0.15s; }
.qe-btn-cancel { background:transparent; color:var(--text2); border:1px solid var(--border2); }
.qe-btn-cancel:hover { background:var(--panel2); }
.qe-btn-apply { background:var(--accent); color:#fff; }
.qe-btn-apply:hover { filter:brightness(1.15); }
/* Info bar between header and body */
.qe-info-bar {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:4px 12px; border-bottom:1px solid var(--border);
  background:var(--bg2); flex-shrink:0; font-size:9px; color:var(--text3);
}
.qe-info-item { display:flex; align-items:center; gap:4px; }
.qe-info-val { font-weight:700; color:var(--text2); }
.qe-body { flex:1; display:flex; overflow:hidden; }
/* Left tool strip */
.qe-tool-strip {
  width:72px; flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:8px 0; gap:2px; overflow-y:auto;
}
.qe-strip-btn {
  width:56px; height:50px; border:none; background:transparent;
  color:var(--text3); border-radius:8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; transition:all 0.12s; position:relative;
}
.qe-strip-btn svg { width:22px; height:22px; flex-shrink:0; }
.qe-strip-btn span { font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; line-height:1; }
.qe-strip-btn:hover { background:rgba(124,92,191,0.1); color:var(--accent); }
.qe-strip-btn.active { background:var(--accent-dim); color:var(--accent); }
.qe-strip-sep { width:40px; height:1px; background:var(--border2); margin:4px 0; opacity:0.4; }
/* Center canvas */
.qe-canvas-area {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:auto; position:relative;
  background-color:#0d0d0d;
  background-image:radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:24px 24px;
}
[data-theme="light"] .qe-canvas-area {
  background-color:#e0e0e0;
  background-image:radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size:24px 24px;
}
.qe-canvas-area canvas#qeCanvas {
  max-width:90%; max-height:90%;
  box-shadow:0 4px 30px rgba(0,0,0,0.5); border-radius:4px;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  background-color:#fff;
}
#qeCanvasWrap { display:contents; }
#qeSelCanvas { position:absolute; pointer-events:none; }
/* Canvas edge expansion handles */
/* Edge bars hidden — only corner dots remain */
.qe-edge-h { position:absolute; z-index:15; }
.qe-edge-h[data-edge="n"],
.qe-edge-h[data-edge="s"],
.qe-edge-h[data-edge="w"],
.qe-edge-h[data-edge="e"] { display:none !important; }
.qe-corner-h { width:12px !important; height:12px !important; border-radius:2px !important; background:#ffffff; border:1.5px solid #222222; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.qe-corner-h:hover { background:#f0f0f0; border-color:#000; }
.qe-corner-h[data-edge="nw"] { cursor:nw-resize; }
.qe-corner-h[data-edge="ne"] { cursor:ne-resize; }
.qe-corner-h[data-edge="sw"] { cursor:sw-resize; }
.qe-corner-h[data-edge="se"] { cursor:se-resize; }
.qe-zoom-bar {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:4px 10px;
  background:rgba(0,0,0,0.7); border-radius:20px; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.08);
}
.qe-flt-card {
  cursor:pointer; border-radius:6px; padding:0; overflow:hidden;
  background:var(--panel2); border:2px solid transparent;
  display:flex; flex-direction:column; align-items:center;
  transition:all 0.15s; position:relative;
}
.qe-flt-card .qe-flt-bar {
  width:100%; height:28px; background:var(--flt-g);
  border-radius:4px 4px 0 0;
}
.qe-flt-card span {
  font-size:8px; font-weight:600; color:var(--text2); padding:3px 0 4px;
  font-family:'Inter',sans-serif; letter-spacing:0.02em;
}
.qe-flt-card:hover { border-color:var(--accent); transform:scale(1.04); }
.qe-flt-card.active { border-color:var(--accent); box-shadow:0 0 8px rgba(124,92,191,0.3); }
.qe-flt-card.active span { color:var(--accent); }
.qe-zoom-btn {
  width:22px; height:22px; border:none; background:transparent; color:#ccc;
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; transition:all 0.1s;
}
.qe-zoom-btn:hover { background:rgba(255,255,255,0.1); color:#fff; }
.qe-zoom-val { font-size:10px; font-weight:700; color:#ccc; min-width:36px; text-align:center; font-family:'Inter',sans-serif; }
/* Right options panel */
.qe-tools {
  width:260px; flex-shrink:0; background:var(--panel);
  border-left:1px solid var(--border); overflow-y:auto; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.qe-tool-panel { display:none; padding:10px; }
.qe-tool-panel.active { display:block; }
.qe-tool-panel-title {
  font-size:11px; font-weight:700; color:var(--text);
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
}
.qe-tool-section {
  background:transparent; border:none;
  border-bottom:1px solid var(--border);
  border-radius:0; padding:10px 4px;
}
.qe-tool-section:last-child { border-bottom:none; }
.qe-tool-title {
  font-size:9px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;
  display:flex; align-items:center; gap:5px;
}
.qe-tool-row {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
}
.qe-tool-row:last-child { margin-bottom:0; }
.qe-tool-label { font-size:8px; font-weight:600; color:var(--text3); width:52px; flex-shrink:0; }
.qe-slider {
  flex:1; -webkit-appearance:none; height:3px; border-radius:2px;
  background:var(--border2); outline:none; cursor:pointer;
}
.qe-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--accent); cursor:pointer;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.qe-slider-val { font-size:8px; font-weight:700; color:var(--text); width:30px; text-align:right; }
.qe-action-btn {
  width:100%; padding:6px; border-radius:5px; font-size:10px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;
  display:flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--border2); background:transparent; color:var(--text2);
}
.qe-action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.qe-action-btn.active { background:rgba(124,92,191,0.08); color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 1px rgba(124,92,191,0.15); }
.qe-color-preview {
  width:24px; height:24px; border-radius:5px; border:2px solid var(--border2);
  cursor:pointer; flex-shrink:0;
}

/* ─── Change Image Color ─── */
.qe-recolor-toggle {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.qe-recolor-toggle label {
  font-size:10px; font-weight:700; color:var(--text2); cursor:pointer;
}
.qe-recolor-switch {
  position:relative; width:38px; height:20px; cursor:pointer; display:inline-block;
}
.qe-recolor-switch input { opacity:0; width:0; height:0; position:absolute; }
.qe-recolor-switch .rc-slider {
  position:absolute; inset:0;
  background:var(--border2);
  border-radius:10px;
  transition:all 0.25s;
}
.qe-recolor-switch .rc-slider::before {
  content:'';
  position:absolute;
  width:14px; height:14px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition:all 0.25s;
}
.qe-recolor-switch input:checked + .rc-slider {
  background:var(--accent);
}
.qe-recolor-switch input:checked + .rc-slider::before {
  transform:translateX(18px);
}
.qe-recolor-controls { display:none; }
.qe-recolor-controls.open { display:block; }
.qe-recolor-hex-row {
  display:flex; align-items:center; gap:5px; margin-bottom:6px;
}
.qe-recolor-hex {
  flex:1; padding:4px 6px; font-size:10px; font-weight:700; font-family:'Inter',monospace;
  background:var(--panel2); border:1px solid var(--border2); border-radius:4px;
  color:var(--text); outline:none; text-transform:uppercase;
}
.qe-recolor-hex:focus { border-color:var(--accent); }
.qe-recolor-swatch-big {
  width:26px; height:26px; border-radius:5px; border:2px solid var(--border2);
  flex-shrink:0; transition:border-color 0.2s;
}
.qe-recolor-mode-row {
  display:flex; gap:0; margin-bottom:8px; border-radius:5px; overflow:hidden;
  border:1px solid var(--border2);
}
.qe-recolor-mode-btn {
  flex:1; padding:4px 0; font-size:8px; font-weight:700; text-align:center;
  cursor:pointer; border:none; background:transparent; color:var(--text3);
  font-family:'Inter',sans-serif; transition:all 0.15s;
}
.qe-recolor-mode-btn.active {
  background:var(--accent); color:#fff;
}
.qe-recolor-mode-btn:hover:not(.active) {
  background:var(--border); color:var(--text2);
}
.qe-recolor-swatches {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px;
}
.qe-recolor-sw {
  width:20px; height:20px; border-radius:4px; cursor:pointer;
  border:1.5px solid transparent; transition:all 0.15s;
}
.qe-recolor-sw:hover { transform:scale(1.2); }
.qe-recolor-sw.selected { border-color:#fff; box-shadow:0 0 0 1px var(--accent); }
.qe-recolor-spectrum {
  width:100%; height:100px; border-radius:6px; cursor:crosshair;
  margin-bottom:6px; position:relative; overflow:hidden;
}
.qe-recolor-spectrum canvas { width:100%; height:100%; display:block; border-radius:6px; }
.qe-recolor-hue-bar {
  width:100%; height:14px; border-radius:4px; cursor:crosshair;
  margin-bottom:10px; position:relative; overflow:hidden;
}
.qe-recolor-hue-bar canvas { width:100%; height:100%; display:block; border-radius:4px; }
.qe-recolor-spectrum-cursor, .qe-recolor-hue-cursor {
  position:absolute; width:10px; height:10px; border:2px solid #fff;
  border-radius:50%; box-shadow:0 0 2px rgba(0,0,0,0.5);
  pointer-events:none; transform:translate(-50%,-50%);
}
.qe-recolor-hue-cursor {
  width:4px; height:12px; border-radius:2px; top:50%;
  transform:translate(-50%,-50%);
}
.qe-recolor-alpha-row {
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
}
.qe-recolor-alpha-label {
  font-size:8px; font-weight:600; color:var(--text3); width:50px;
}

/* Empty state: compact click target centered in the body. Previously the
   box filled 100% of the container, making the entire black panel a
   massive upload hotspot — any click anywhere (including accidental
   mouse moves) would open the file picker. Now the clickable area is
   only the icon + label group. */
.qo-empty {
  text-align:center; padding:28px 32px; color:var(--text3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  grid-column:1/-1;
  width:max-content; max-width:90%;
  margin:auto;
  border-radius:14px;
  transition:background 0.15s, transform 0.1s;
}
.qo-empty:hover { background:rgba(255,255,255,0.03); }
.qo-empty:active { transform:scale(0.98); }
.qo-empty .qo-empty-icon { font-size:72px; margin-bottom:14px; opacity:0.35; }
.qo-empty p { font-size:17px; font-weight:600; opacity:0.6; margin:0; }

.qo-generate-btn {
  padding:8px 18px;
  background:var(--panel); border:1px solid rgba(124,58,237,0.3);
  border-radius:8px; color:var(--text);
  font-size:11px; font-weight:500;
  font-family:'Inter',sans-serif; letter-spacing:0.02em;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all 0.15s; white-space:nowrap;
}
.qo-generate-btn:hover { background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.5); }
.qo-generate-btn:disabled { opacity:0.4; pointer-events:none; }
[data-theme="light"] .qo-generate-btn { background:#fff; color:var(--text); }
[data-theme="light"] .qo-generate-btn:hover { background:rgba(124,58,237,0.05); border-color:rgba(124,58,237,0.4); color:var(--text); }

.qo-field-row {
  display:flex; align-items:center; gap:3px;
}
.qo-field-label {
  font-size:9px; font-weight:600; color:var(--text3); width:22px; flex-shrink:0;
}
.qo-field-wrap {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--border2); border-radius:4px; overflow:hidden;
}
.qo-field-btn {
  width:18px; height:20px; border:none; padding:0;
  background:var(--panel2); color:var(--text3);
  font-size:11px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.1s; font-family:'Inter',sans-serif;
}
.qo-field-btn:hover { background:var(--accent); color:#fff; }
.qo-field-input {
  width:48px; height:20px; border:none;
  border-left:1px solid var(--border2); border-right:1px solid var(--border2);
  background:var(--panel); color:var(--text); font-size:10px; font-weight:600;
  text-align:center; font-family:'Inter',sans-serif; outline:none;
  -moz-appearance:textfield;
}
.qo-field-input::-webkit-inner-spin-button,
.qo-field-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.qo-field-input:focus { background:var(--accent-light); }
.qo-field-unit {
  font-size:8px; color:var(--text3); margin-left:2px; font-weight:500;
}
.qo-dpi-display {
  display:inline-flex; align-items:center; gap:4px;
}

/* RIGHT PANEL — property panel */
.drip-prop-panel { display:flex; flex-direction:column; flex:1; }

.drip-preview {
  position:relative;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
  margin:10px 10px 0;
  padding:16px 12px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  overflow:hidden;
}
.drip-preview::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(124,92,191,0.8) 50%, var(--accent) 100%);
  opacity:0.7;
}
.drip-preview-img {
  width:60px; height:60px; object-fit:contain;
  border:2px solid var(--border2); border-radius:10px;
  background:var(--bg2); flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.drip-preview-meta { width:100%; text-align:center; }
.drip-preview-name {
  font-size:12px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:0.01em;
}
.drip-preview-dpi {
  display:inline-block;
  font-size:10px; margin-top:5px; font-weight:700;
  padding:2px 12px; border-radius:20px;
  letter-spacing:0.03em;
}
.drip-preview-details {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:5px; font-size:9px; color:var(--text3);
}
.drip-preview-details span { white-space:nowrap; }
.drip-preview-divider {
  width:100%; height:1px; background:var(--border); margin:8px 0 4px; opacity:0.5;
}
.drip-preview-stats {
  display:flex; align-items:center; justify-content:center; gap:16px;
  width:100%; position:relative;
}
.drip-preview-stat {
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.drip-preview-stat-val {
  font-size:16px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1;
}
.drip-preview-stat-label {
  font-size:8px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.08em;
}
.drip-preview-stat-sep {
  width:1px; height:24px; background:var(--border2); opacity:0.5;
}
.drip-preview-total {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:700; color:var(--accent);
  background:rgba(124,92,191,0.08); border:1px solid rgba(124,92,191,0.2);
  padding:3px 10px; border-radius:20px; letter-spacing:0.02em;
}
.drip-preview-total-all {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:700; color:#a78bfa;
  background:rgba(124,92,191,0.1); border:1px solid rgba(124,92,191,0.25);
  padding:3px 10px; border-radius:20px; letter-spacing:0.02em;
}
[data-theme="light"] .drip-preview { background:var(--panel2); border-color:var(--border); }
[data-theme="light"] .drip-preview::before { background:linear-gradient(90deg, var(--accent) 0%, var(--success) 50%, var(--accent) 100%); }
[data-theme="light"] .drip-preview-img { border-color:var(--border); box-shadow:0 2px 8px rgba(0,0,0,0.08); }

/* Field rows */
.drip-field-group { padding:8px 12px; border-bottom:1px solid var(--border); }
.drip-field-row {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:6px; gap:6px;
}
.drip-field-row:last-child { margin-bottom:0; }
.drip-field-label { font-size:11px; color:var(--text2); font-weight:500; white-space:nowrap; min-width:80px; }
[data-tip]{position:relative}[data-tip]:hover::after{content:attr(data-tip);position:absolute;z-index:9999;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);width:200px;max-width:220px;padding:8px 10px;background:#1a1a1a;color:#ccc;border:1px solid #444;border-radius:8px;font-size:10px;line-height:1.45;font-weight:400;text-align:center;font-family:Inter,sans-serif;white-space:normal;word-wrap:break-word;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none}[data-tip]:hover::before{content:"";position:absolute;z-index:9999;left:50%;transform:translateX(-50%);bottom:calc(100% + 4px);border:5px solid transparent;border-top-color:#1a1a1a;pointer-events:none}[data-theme="light"] [data-tip]:hover::after{background:#fff;color:#333;border-color:#ddd}[data-theme="light"] [data-tip]:hover::before{border-top-color:#fff}
.drip-field-control { display:flex; align-items:center; gap:4px; flex:1; justify-content:flex-end; }

.drip-input {
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  color:var(--text); background:var(--panel2);
  border:1px solid var(--border2); border-radius:5px;
  padding:5px 8px; outline:none; width:80px; text-align:right;
  transition:border-color 0.15s;
}
.drip-input:focus { border-color:var(--accent); }
.drip-unit { font-size:10px; color:var(--text3); font-weight:500; width:14px; }

.aspect-lock {
  background:var(--panel2); border:1px solid var(--border2); border-radius:5px;
  width:26px; height:26px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px;
  transition:all 0.15s; color:var(--text3);
}
.aspect-lock.locked { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* Spinner stepper */
.drip-spinner { display:flex; align-items:center; }
.drip-spinner input { width:70px; text-align:center; border-radius:0; border-left:none; border-right:none; }
.spin-btn {
  background:var(--panel2); border:1px solid var(--border2); color:var(--text2);
  width:24px; height:28px; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:all 0.12s;
}
.spin-btn:first-child { border-radius:5px 0 0 5px; }
.spin-btn:last-child  { border-radius:0 5px 5px 0; }
.spin-btn:hover { background:var(--border2); color:var(--text); border-color:var(--border); }

/* Toggle switch */
.toggle { position:relative; width:36px; height:20px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--border2);
  border-radius:20px; cursor:pointer; transition:0.2s;
}
.toggle-slider:before {
  content:''; position:absolute; width:14px; height:14px;
  border-radius:50%; background:white; left:3px; top:3px; transition:0.2s;
}
.toggle input:checked + .toggle-slider { background:var(--accent); }
.toggle input:checked + .toggle-slider:before { transform:translateX(16px); }

/* Action buttons in property panel — minimalistic */
.drip-actions { padding:6px 12px; display:flex; flex-direction:column; gap:4px; }
.drip-btn-full {
  width:100%; padding:7px; border-radius:6px; border:1px solid var(--border2); cursor:pointer;
  font-family:'Inter',sans-serif; font-size:10px; font-weight:600;
  transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:5px;
  background:transparent; color:var(--text2);
}
.drip-btn-full:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.15); color:var(--text); }
.drip-btn-primary { 
  background:transparent; color:var(--text2); 
  border:1px solid var(--border2); border-radius:6px;
  font-weight:600;
  padding:7px;
}
.drip-btn-primary::before { display:none; }
.drip-btn-primary:hover { background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.4); color:#a78bfa; }
[data-theme="light"] .drip-btn-primary { background:transparent; color:#555; border-color:var(--border); box-shadow:none; }
[data-theme="light"] .drip-btn-primary:hover { background:rgba(124,58,237,0.04); border-color:rgba(124,58,237,0.4); color:#7c3aed; }
[data-theme="light"] .drip-btn-primary::before { display:none; }
.drip-btn-blue  { background:transparent; color:var(--text2); border-color:var(--border2); }
.drip-btn-blue:hover  { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.15); color:var(--text); }
.drip-btn-teal  { background:transparent; color:var(--text2); border-color:var(--border2); }
.drip-btn-teal:hover  { background:rgba(124,92,191,0.08); color:var(--accent); border-color:rgba(124,92,191,0.35); }
.drip-btn-green { background:transparent; color:var(--text2); border-color:var(--border2); }
.drip-btn-green:hover { background:rgba(52,211,153,0.08); color:#a89fd6; border-color:rgba(52,211,153,0.35); }
.drip-btn-red   { background:transparent; color:var(--text3); border-color:var(--border2); }
.drip-btn-red:hover   { background:rgba(255,68,68,0.06); color:var(--danger); border-color:rgba(255,68,68,0.3); }
.drip-btn-outline-del { background:transparent; color:var(--text3); border:1px solid var(--border2); }
.drip-btn-outline-del:hover { background:rgba(255,68,68,0.06); color:var(--danger); border-color:rgba(255,68,68,0.3); }
.drip-btn-row { display:flex; gap:5px; }
.drip-btn-row .drip-btn-full { flex:1; }
.drip-btn-edit-artwork {
  background:transparent !important;
  color:var(--text2) !important; 
  border:1px solid var(--border2) !important;
  border-radius:6px !important;
  font-weight:600 !important; font-size:10px !important;
  padding:7px !important; gap:5px;
  box-shadow:none !important;
  overflow:hidden !important;
}
.drip-btn-edit-artwork::before { display:none; }
.drip-btn-edit-artwork:hover { background:rgba(124,92,191,0.08) !important; border-color:rgba(124,92,191,0.35) !important; color:var(--accent) !important; }

/* Remove BG loading spinner */
.rmbg-spinner {
  display:none; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color:white; border-radius:50%;
  animation:rmbg-spin 0.7s linear infinite;
}
@keyframes rmbg-spin { to { transform:rotate(360deg); } }

.design-thumb { position:relative; }
.design-thumb img { position:relative; }
.design-thumb:hover .thumb-add-badge { opacity:1; }
.thumb-badge-pill { display:contents; }
.thumb-add-badge {
  position:absolute; top:6px; right:-12px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  background:#2A2A2A; color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:all 0.12s;
  cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.3);
  pointer-events:auto; padding:0; border:3px solid var(--panel); outline:none;
}
.thumb-add-badge::before { display:none; }
.thumb-add-badge:hover { background:#3a3a3a; transform:scale(1.1); box-shadow:0 2px 6px rgba(0,0,0,0.35); }
.thumb-add-badge svg { width:12px; height:12px; }
.thumb-minus-badge {
  position:absolute; top:32px; right:-12px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  background:#2A2A2A; color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:all 0.12s;
  cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.3);
  pointer-events:auto; padding:0; border:3px solid var(--panel); outline:none;
}
.thumb-minus-badge::before { display:none; }
.thumb-minus-badge.disabled { cursor:not-allowed; pointer-events:none; background:#1a1a1a; color:#444; border:3px solid var(--panel); box-shadow:none; }
.design-thumb:hover .thumb-minus-badge { opacity:1; }
.design-thumb:hover .thumb-minus-badge.disabled { opacity:1; }
.thumb-minus-badge:not(.disabled):hover { background:#3a3a3a; transform:scale(1.1); box-shadow:0 2px 6px rgba(0,0,0,0.35); }
.thumb-minus-badge svg { width:12px; height:12px; }
.thumb-remove-lib {
  display:flex; align-items:center; justify-content:center;
  margin:4px 5px 4px; padding:6px 8px; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.12); color:#E0E0E0;
  font-size:8px; font-weight:500; cursor:pointer;
  text-transform:uppercase; letter-spacing:0.06em;
  transition:all 0.15s; font-family:'Inter',sans-serif;
}
.thumb-remove-lib:hover { background:linear-gradient(180deg, rgba(255,68,68,0.1) 0%, rgba(255,68,68,0.04) 100%); color:var(--danger); border-color:rgba(255,68,68,0.2); }
.design-thumb.lib-selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.design-thumb-number { position:absolute;top:3px;left:3px;z-index:5;background:rgba(0,0,0,0.65);color:#fff;font-size:8px;font-weight:700;font-family:'Inter',sans-serif;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:0 3px;line-height:1;letter-spacing:0.02em;pointer-events:none; }
/* Quick Add inline form */
.qa-wrap { padding:2px 5px 0; overflow:hidden; }
.qa-toggle {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:6px 8px; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.12); color:#E0E0E0;
  font-size:8px; font-weight:500; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all 0.15s;
  text-transform:uppercase; letter-spacing:0.06em;
  overflow:hidden; box-sizing:border-box;
}
.qa-toggle:hover { background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%); border-color:rgba(255,255,255,0.2); color:#fff; }
.qa-form { padding:4px 0 2px; }
.qa-row { display:flex; gap:4px; align-items:flex-end; justify-content:center; }
.qa-field { display:flex; flex-direction:column; gap:1px; align-items:center; }
.qa-field label {
  font-size:8px; font-weight:700; color:var(--text2);
  text-align:center; padding-bottom:1px;
}
.qa-u { font-weight:500; color:var(--text3); }
.qa-input {
  width:100%; height:20px; text-align:center; font-size:10px; font-weight:700;
  color:var(--text); background:var(--panel2); border:1px solid var(--border2);
  border-radius:4px; outline:none; font-family:'Inter',sans-serif;
  -moz-appearance:textfield;
}
.qa-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.qa-input:focus { border-color:var(--accent); color:var(--accent); }
.qa-go {
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:4px; padding:6px 8px; border-radius:6px;
  background:linear-gradient(180deg, rgba(124,92,191,0.1) 0%, rgba(124,92,191,0.03) 100%);
  border:1px solid rgba(124,92,191,0.2); color:var(--accent);
  font-size:8px; font-weight:500; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all 0.15s;
  text-transform:uppercase; letter-spacing:0.06em;
}
.qa-go:hover { background:linear-gradient(180deg, rgba(124,92,191,0.15) 0%, rgba(124,92,191,0.05) 100%); border-color:rgba(124,92,191,0.35); }
[data-theme="light"] .qa-toggle:hover { background:rgba(0,0,0,0.06); }
[data-theme="light"] .qa-go:hover { background:rgba(124,92,191,0.22); }
/* Design size display (clickable to edit) */
.ds-size-wrap { padding:2px 5px; overflow:hidden; }
.ds-size-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:6px 8px; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.12);
  color:#E0E0E0; font-size:8px; font-weight:500; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all 0.15s;
  text-transform:uppercase; letter-spacing:0.05em;
  overflow:hidden; box-sizing:border-box;
}
.ds-size-btn:hover { background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%); border-color:rgba(255,255,255,0.2); color:#fff; }
.ds-size-val { letter-spacing:0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-size-edit { padding:4px 0 2px; }
.ds-size-row { display:flex; flex-direction:column; gap:4px; padding:0; }
.ds-size-field { display:flex; flex-direction:row; align-items:center; gap:4px; }
.ds-input { height:22px; font-size:10px; padding:0 2px; border-radius:4px; flex:1; min-width:0; }
.ds-size-field label { font-size:8px; font-weight:700; color:var(--text2); text-align:left; min-width:48px; white-space:nowrap; }
[data-theme="light"] .ds-size-btn:hover { background:rgba(0,0,0,0.06); }
/* Unit switcher */
.unit-switcher {
  display:flex; gap:0; border-radius:7px; overflow:hidden;
  border:1px solid var(--border2); margin-bottom:4px;
}
.unit-btn {
  flex:1; padding:7px 0; font-size:12px; font-weight:600;
  background:var(--panel2); color:#777; border:none; cursor:pointer;
  transition:all 0.15s; text-transform:uppercase; letter-spacing:0.06em;
  font-family:'Montserrat',sans-serif;
}
.unit-btn.active { background:var(--accent); color:#fff; }
.unit-btn:hover:not(.active) { background:var(--border2); color:#ccc; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.35); }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — ADDITIONAL OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* --- Scrollbars --- */
[data-theme="light"] ::-webkit-scrollbar-track { background:rgba(0,0,0,0.03); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); }

/* --- Fix white hover text on tool buttons (Design Library) --- */
[data-theme="light"] .drip-field-group button[style*="color: rgb(255, 255, 255)"],
[data-theme="light"] .drip-field-group button[style*="color:#fff"] { color:var(--accent) !important; }
[data-theme="light"] .drip-field-group button[style*="color: rgb(239, 68, 68)"],
[data-theme="light"] .drip-field-group button[style*="border-color:#ef4444"][style*="color: rgb(255, 255, 255)"] { color:var(--danger) !important; }

/* --- Names & Numbers Panel --- */
[data-theme="light"] #jrsOverlay { background:var(--bg) !important; }
[data-theme="light"] #jrsOverlay > div:first-child { background:var(--panel) !important; border-bottom-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay > div:first-child h3 { color:var(--text) !important; }
[data-theme="light"] #jrsOverlay > div:first-child button[onclick*="jrsClose"] { background:var(--panel2) !important; border-color:var(--border2) !important; color:var(--text3) !important; }
[data-theme="light"] #jrsOverlay > div:first-child button[onclick*="jrsClose"]:hover { border-color:var(--text3) !important; color:var(--text) !important; }
[data-theme="light"] #jrsOverlay > div:last-child > div:first-child { background:var(--panel) !important; border-right-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay > div:last-child > div:nth-child(2) { background:var(--bg2) !important; }
[data-theme="light"] #jrsOverlay > div:last-child > div:last-child { background:var(--panel) !important; border-left-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay div[style*="color:#888"] { color:var(--text3) !important; }
[data-theme="light"] #jrsOverlay div[style*="color:#999"] { color:var(--text3) !important; }
[data-theme="light"] #jrsOverlay div[style*="border-bottom:1px solid #2a2a2e"],
[data-theme="light"] #jrsOverlay div[style*="border-right:1px solid #2a2a2e"] { border-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay button[onclick*="jrsAdd"] { border-color:var(--border2) !important; color:var(--text3) !important; }
[data-theme="light"] #jrsOverlay button[onclick*="jrsAdd"]:hover { border-color:var(--accent) !important; color:var(--accent) !important; }
[data-theme="light"] #jrsFontList { background:var(--panel2) !important; border-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay input[type="color"] { border-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay .jrs-jc[style*="border:2px solid transparent"] { border-color:var(--border2) !important; }
[data-theme="light"] #jrsOverlay div[style*="border:1px solid #555"] { border-color:var(--border2) !important; }

/* --- Background Remover Modal --- */
[data-theme="light"] #bgRemovalModal { background:rgba(0,0,0,0.4) !important; }
[data-theme="light"] #bgRemovalModal > div:first-child { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 40px 100px rgba(0,0,0,0.15) !important; }
[data-theme="light"] #bgRemovalModal div[style*="border-bottom:1px solid #1c1c1c"],
[data-theme="light"] #bgRemovalModal div[style*="border-top:1px solid #1c1c1c"] { border-color:var(--border2) !important; }
[data-theme="light"] #bgRemovalModal div[style*="color:#fff"][style*="font-size:13px"] { color:var(--text) !important; }
[data-theme="light"] #bgRemovalModal #bgrModeRow { background:var(--panel2) !important; }
[data-theme="light"] #bgRemovalModal .bgrModeBtn { color:var(--text3) !important; }
[data-theme="light"] #bgRemovalModal .bgrModeBtn[style*="background:#1e1e22"] { background:var(--accent-dim) !important; color:var(--accent) !important; }
[data-theme="light"] #bgRemovalModal button[onclick*="bgrClose"] { color:var(--text3) !important; }
[data-theme="light"] #bgRemovalModal button[onclick*="bgrClose"]:hover { color:var(--text) !important; }
[data-theme="light"] #bgRemovalModal #bgrPickedRow2 { background:var(--panel2) !important; border-bottom-color:var(--border2) !important; }
[data-theme="light"] #bgRemovalModal #bgrPickedRow2 span { color:var(--text3) !important; }
[data-theme="light"] #bgRemovalModal div[style*="background:#111"] { background:var(--border2) !important; }
[data-theme="light"] #bgRemovalModal #bgrLoading { background:rgba(255,255,255,0.95) !important; }
[data-theme="light"] #bgRemovalModal #bgrLoadingText { color:var(--text2) !important; }
[data-theme="light"] #bgRemovalModal #bgrLoadingPct { color:var(--text) !important; }

/* --- Overflow Modal --- */
[data-theme="light"] #overflowModal { background:rgba(0,0,0,0.35) !important; }
[data-theme="light"] #overflowModal > div:first-child { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 24px 80px rgba(0,0,0,0.12) !important; }
[data-theme="light"] #overflowModal div[style*="color:#fff"][style*="font-size:15px"] { color:var(--text) !important; }
[data-theme="light"] #overflowModal div[style*="color:#555"] { color:var(--text3) !important; }
[data-theme="light"] #overflowModal div[style*="background:#1e1e1e"] { background:var(--border) !important; }
[data-theme="light"] #overflowModal div[style*="background:#0e0e0e"] { background:var(--panel2) !important; border-color:var(--border2) !important; }
[data-theme="light"] #overflowModal div[style*="color:#444"] { color:var(--text3) !important; }
[data-theme="light"] #overflowModal div[style*="color:#aaa"] { color:var(--text2) !important; }
[data-theme="light"] #overflowModal input[style*="background:#0a0a0a"] { background:var(--bg2) !important; color:var(--text3) !important; border-color:var(--border2) !important; }
[data-theme="light"] #overflowModal input[style*="background:#111"] { background:var(--panel) !important; color:var(--text) !important; border-color:var(--border2) !important; }
[data-theme="light"] #overflowModal div[style*="color:rgba(255,255,255,0.5)"] { color:var(--text3) !important; }

/* --- Sheet Full Modal --- */
[data-theme="light"] #sheetFullModal { background:rgba(0,0,0,0.3) !important; }
[data-theme="light"] #sheetFullModal > div:first-child { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 16px 48px rgba(0,0,0,0.12) !important; }
[data-theme="light"] #sheetFullModal div[style*="color:#fff"][style*="font-size:15px"] { color:var(--text) !important; }
[data-theme="light"] #sheetFullModal div[style*="color:#888"] { color:var(--text2) !important; }
[data-theme="light"] #sheetFullModal button[onclick*="hideSheetFull"] { background:var(--panel2) !important; border-color:var(--border2) !important; color:var(--text2) !important; }

/* --- Quantity Modal --- */
[data-theme="light"] #qtyModal { background:rgba(0,0,0,0.25) !important; }
[data-theme="light"] #qtyModal > div:first-child { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 16px 48px rgba(0,0,0,0.12) !important; }
[data-theme="light"] #qtyModal div[style*="color:#fff"][style*="font-size:14px"] { color:var(--text) !important; }
[data-theme="light"] #qtyModal #qtyModalName { color:var(--text3) !important; }
[data-theme="light"] #qtyModal button[style*="background:#2a2a2a"] { background:var(--panel2) !important; border-color:var(--border2) !important; color:var(--text) !important; }
[data-theme="light"] #qtyModal input[style*="background:#111"] { background:var(--panel2) !important; border-color:var(--border2) !important; color:var(--text) !important; }
[data-theme="light"] #qtyModal button[style*="color:#aaa"] { color:var(--text2) !important; }

/* --- Font Dropdowns (Design Library + QE) --- */
[data-theme="light"] #dlFontDropdown,
[data-theme="light"] #qeFontDropdown { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 8px 24px rgba(0,0,0,0.12) !important; }
[data-theme="light"] #dlFontDropdown input[type="text"],
[data-theme="light"] #qeFontDropdown input[type="text"],
[data-theme="light"] #dlFontDropdown #dlFontSearch,
[data-theme="light"] #qeFontDropdown #qeFontSearch { background:var(--panel2) !important; color:var(--text) !important; border-bottom-color:var(--border2) !important; }
[data-theme="light"] #dlFontDropdown > div[style*="color:#7c5cbf"],
[data-theme="light"] #qeFontDropdown > div[style*="color:#7c5cbf"] { color:var(--accent) !important; }
[data-theme="light"] #dlFontDropdown > div[style*="color:#e0e0e0"],
[data-theme="light"] #qeFontDropdown > div[style*="color:#e0e0e0"] { color:var(--text) !important; }
[data-theme="light"] #dlFontDropdown > div[style*="color:#666"],
[data-theme="light"] #qeFontDropdown > div[style*="color:#666"] { color:var(--text3) !important; }
[data-theme="light"] #dlFontDropdown > div[style*="cursor:pointer"]:hover,
[data-theme="light"] #qeFontDropdown > div[style*="cursor:pointer"]:hover { background:var(--panel2) !important; }
[data-theme="light"] #dlFontDropdown > div[style*="background:#383838"],
[data-theme="light"] #qeFontDropdown > div[style*="background:#383838"],
[data-theme="light"] #dlFontDropdown > div[style*="background: rgb(56, 56, 56)"],
[data-theme="light"] #qeFontDropdown > div[style*="background: rgb(56, 56, 56)"] { background:var(--accent-dim) !important; }

/* --- Footer Price Label --- */
[data-theme="light"] #footerPCLabel { color:var(--text) !important; }

/* --- Auto-Fill, Sheet Manager, Clear Sheets overlays --- */
[data-theme="light"] #afOverlay,
[data-theme="light"] #sfmOverlay,
[data-theme="light"] #clearSheetsOverlay { background:rgba(0,0,0,0.3) !important; }
[data-theme="light"] #afOverlay > div,
[data-theme="light"] #sfmOverlay > div,
[data-theme="light"] #clearSheetsOverlay > div { background:var(--panel) !important; border-color:var(--border2) !important; box-shadow:0 16px 48px rgba(0,0,0,0.12) !important; }

/* --- Too Wide Modal --- */
[data-theme="light"] #tooWideModal { background:rgba(0,0,0,0.3) !important; }
[data-theme="light"] #tooWideModal > div:first-child { background:var(--panel) !important; border-color:var(--border2) !important; }
[data-theme="light"] #tooWideModal div[style*="color:#fff"] { color:var(--text) !important; }
[data-theme="light"] #tooWideModal div[style*="color:#888"],
[data-theme="light"] #tooWideModal div[style*="color:#aaa"] { color:var(--text2) !important; }
[data-theme="light"] #tooWideModal div[style*="background:#1e1e1e"],
[data-theme="light"] #tooWideModal div[style*="background:#1a1a1a"] { background:var(--panel2) !important; }
[data-theme="light"] #tooWideModal input[style*="background:#111"] { background:var(--panel2) !important; color:var(--text) !important; border-color:var(--border2) !important; }

/* --- QE Quick Edit additional --- */
[data-theme="light"] #qeUndoRedoBar { background:rgba(255,255,255,0.92) !important; }
[data-theme="light"] #qeUndoRedoBar button:hover { background:rgba(0,0,0,0.06) !important; }
[data-theme="light"] .qe-info-bar { background:rgba(255,255,255,0.95) !important; }
[data-theme="light"] .qe-info-bar button:hover { background:rgba(0,0,0,0.06) !important; }
[data-theme="light"] #qePanel_text #qeTextPreviewSpan { color:var(--text) !important; }
[data-theme="light"] #qePanel_text #qeOptBold span[style*="color:#fff"],
[data-theme="light"] #qePanel_text #qeOptItalic span[style*="color:#fff"],
[data-theme="light"] #qePanel_text #qeOptUpper span[style*="color:#fff"],
[data-theme="light"] #qePanel_text #qeOptShadow span[style*="color:#fff"] { color:var(--text) !important; }
[data-theme="light"] .qe-tool-panel div[style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] .qe-tool-panel div[style*="border:2px solid transparent"] { border-color:var(--border2) !important; }
[data-theme="light"] .qe-tool-panel div[style*="background:#FFFFFF"][style*="cursor:pointer"],
[data-theme="light"] .qe-tool-panel div[style*="background:#ffffff"][style*="cursor:pointer"] { border-color:var(--border2) !important; }
[data-theme="light"] #qePanel_border div[style*="border:1px solid rgba(255,255,255"] { border-color:var(--border2) !important; }
[data-theme="light"] .qe-strip-btn:hover { color:var(--text); background:rgba(0,0,0,0.04); }
[data-theme="light"] .qe-strip-btn.active { color:var(--accent) !important; background:var(--accent-dim) !important; }
[data-theme="light"] .qerp-heading::after { background:var(--border2) !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
/* ═══ MOBILE SHEET NAVIGATION ═══ */
.mob-sheet-bar { display:none; }
.mob-sheets-manager { display:none; }

@media (max-width:768px) {
  /* ── Sticky horizontal sheet tab bar ── */
  .mob-sheet-bar {
    display:flex; align-items:center; gap:0;
    position:fixed; top:40px; left:0; right:0; z-index:90;
    height:44px; background:var(--panel);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    padding:0;
  }
  .mob-sheet-tabs-scroll {
    flex:1; overflow-x:auto; overflow-y:hidden;
    display:flex; align-items:stretch; gap:0;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:0 2px;
  }
  .mob-sheet-tabs-scroll::-webkit-scrollbar { display:none; }
  .mob-sheet-tab {
    display:flex; align-items:center; gap:5px;
    padding:0 14px; height:44px; min-width:0;
    white-space:nowrap; border:none; background:transparent;
    color:var(--text3); font-family:'Inter',sans-serif;
    font-size:12px; font-weight:600; cursor:pointer;
    border-bottom:2px solid transparent;
    transition:all 0.15s; flex-shrink:0;
    position:relative;
  }
  .mob-sheet-tab:active { background:var(--accent-light); }
  .mob-sheet-tab.active {
    color:var(--accent); border-bottom-color:var(--accent);
    background:var(--accent-light);
  }
  .mob-sheet-tab .mst-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--text3); flex-shrink:0; opacity:0.5;
  }
  .mob-sheet-tab.active .mst-dot { background:var(--accent); opacity:1; }
  .mob-sheet-tab .mst-count {
    font-size:9px; color:var(--text3); font-weight:500;
    background:var(--bg2); padding:1px 5px; border-radius:8px;
  }
  .mob-sheet-tab.active .mst-count { color:var(--accent); background:var(--accent-dim); }
  .mob-sheet-add {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px;
    border:none; background:transparent; color:var(--accent);
    font-size:22px; font-weight:400; cursor:pointer;
    flex-shrink:0; transition:all 0.12s;
  }
  .mob-sheet-add:active { background:var(--accent-dim); transform:scale(0.9); }
  .mob-sheet-manage {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:44px; min-width:40px;
    border:none; background:transparent; color:var(--text3);
    font-size:16px; cursor:pointer; flex-shrink:0;
    border-left:1px solid var(--border);
  }
  .mob-sheet-manage:active { background:var(--accent-dim); color:var(--accent); }

  /* No padding needed — sheet bar removed, sheets accessed via right toolbar */
  .canvas-area { padding-top:0 !important; }

  /* ── Swipe indicator ── */
  .mob-swipe-indicator {
    position:fixed; top:88px; left:50%; transform:translateX(-50%);
    padding:6px 16px; border-radius:20px;
    background:rgba(0,0,0,0.75); color:#fff; font-size:12px;
    font-weight:700; font-family:'Inter',sans-serif;
    pointer-events:none; z-index:95; opacity:0;
    transition:opacity 0.2s; backdrop-filter:blur(8px);
  }
  .mob-swipe-indicator.show { opacity:1; }

  /* ── Sheets Manager Modal (bottom sheet) ── */
  .mob-sheets-manager {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  }
  .mob-sheets-manager.open { display:flex; flex-direction:column; justify-content:flex-end; }
  .mob-sm-panel {
    background:var(--panel); border-radius:16px 16px 0 0;
    max-height:70vh; display:flex; flex-direction:column;
    box-shadow:0 -8px 40px rgba(0,0,0,0.5);
    animation:mobSmSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes mobSmSlideUp {
    from { transform:translateY(100%); }
    to { transform:translateY(0); }
  }
  .mob-sm-handle {
    width:36px; height:4px; background:var(--text3); opacity:0.4;
    border-radius:2px; margin:10px auto 6px;
  }
  .mob-sm-header {
    display:flex; align-items:center; padding:0 16px 10px;
    border-bottom:1px solid var(--border);
  }
  .mob-sm-title {
    flex:1; font-size:16px; font-weight:700; color:var(--text);
    font-family:'Montserrat',sans-serif;
  }
  .mob-sm-close {
    width:32px; height:32px; border-radius:50%;
    border:none; background:var(--bg2); color:var(--text3);
    font-size:18px; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
  }
  .mob-sm-close:active { background:var(--accent-dim); }
  .mob-sm-list {
    flex:1; overflow-y:auto; padding:8px 12px;
  }
  .mob-sm-item {
    display:flex; align-items:center; gap:10px;
    padding:12px 10px; border-radius:10px;
    border:1px solid transparent; margin-bottom:4px;
    transition:all 0.12s; min-height:52px;
  }
  .mob-sm-item.active {
    background:var(--accent-dim); border-color:var(--accent);
  }
  .mob-sm-item-icon {
    width:36px; height:36px; border-radius:8px;
    background:var(--bg2); display:flex; align-items:center;
    justify-content:center; font-size:16px; flex-shrink:0;
  }
  .mob-sm-item.active .mob-sm-item-icon { background:var(--accent-dim); }
  .mob-sm-item-info { flex:1; min-width:0; }
  .mob-sm-item-name {
    font-size:14px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mob-sm-item-meta {
    font-size:11px; color:var(--text3); margin-top:1px;
  }
  .mob-sm-item-actions {
    display:flex; gap:4px; flex-shrink:0;
  }
  .mob-sm-act {
    width:34px; height:34px; border-radius:8px;
    border:1px solid var(--border2); background:var(--panel2);
    color:var(--text3); font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.12s;
  }
  .mob-sm-act:active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
  .mob-sm-act.danger:active { background:rgba(255,68,68,0.15); color:#ff4444; border-color:#ff4444; }
  .mob-sm-footer {
    padding:10px 16px 20px; display:flex; gap:8px;
    border-top:1px solid var(--border);
  }
  .mob-sm-footer-btn {
    flex:1; padding:12px; border-radius:10px; border:none;
    font-size:13px; font-weight:700; cursor:pointer;
    font-family:'Montserrat',sans-serif; transition:all 0.12s;
  }
  .mob-sm-footer-btn.primary {
    background:var(--accent); color:#000;
  }
  .mob-sm-footer-btn.secondary {
    background:var(--bg2); color:var(--text2);
    border:1px solid var(--border);
  }
  .mob-sm-footer-btn:active { transform:scale(0.97); }
}
@media (max-width:480px) {
  .mob-sheet-tab { padding:0 10px; font-size:11px; }
  .mob-sheet-add { width:38px; min-width:38px; font-size:20px; }
  .mob-sheet-manage { width:36px; min-width:36px; }
}

.mob-toggle { display:none; }
.mob-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:98; backdrop-filter:blur(2px); }
.mob-backdrop.open { display:block; }
.mob-bottom-bar { display:none; }
.mob-canvas-ctrl { display:none; }
.mob-panel-close { display:none; }
.mob-topbar-sheet { display:none; }
.mob-hmenu-trigger { display:none !important; }
.mob-hmenu-overlay { display:none; }
.mob-topbar-icon { display:none !important; }
.mob-sheet-detail { display:none; }
.mob-sd-backdrop { display:none; }
.mob-sheetinfo { display:none; }

/* ── Tablet (768–1024px) ── */
@media (max-width:1024px) {
  .left-panel { width:320px; }
  .right-panel { width:230px; }
  .topbar { padding:0 10px; gap:8px; height:48px; }
  .topbar-logo span:last-child { display:none; }
  .stats-bar { gap:8px; padding:4px 10px; font-size:10px; }
}

/* ── Mobile (<768px) — Canva-style layout ── */
@media (max-width:768px) {
  /* Toggle buttons */
  .mob-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:6px; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer; font-size:15px;
    flex-shrink:0; padding:0; transition:all 0.15s;
  }
  .mob-toggle:hover, .mob-toggle.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

  /* Bottom action bar — solid box grid */
  .mob-bottom-bar {
    display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
    position:fixed; bottom:10px; left:10px; right:10px; z-index:100;
    padding:6px; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
    box-shadow:0 -2px 20px rgba(0,0,0,0.5);
  }
  .mob-bottom-bar button {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:var(--panel2); border:1px solid var(--border2); color:var(--text2);
    cursor:pointer; font-family:'Inter',sans-serif; font-size:7px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase;
    padding:6px 2px; border-radius:8px; transition:all 0.12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-bottom-bar button span.mbb-icon { font-size:16px; line-height:1; }
  .mob-bottom-bar button.active { color:var(--accent); background:var(--accent-dim); border-color:var(--accent); }
  .mob-bottom-bar button:active { transform:scale(0.92); background:var(--accent-dim); }
  [data-theme="light"] .mob-bottom-bar { background:#fff; box-shadow:0 -2px 20px rgba(0,0,0,0.10); }
  [data-theme="light"] .mob-bottom-bar button { background:var(--panel2); border-color:#e0e0e4; color:#555; }

  /* Keep advanced controls minimal on mobile */
  #nestMode { display:none !important; }

  /* Topbar: ultra-compact, semi-transparent */
  .topbar { height:40px; padding:0 8px; gap:4px; background:var(--topbar-bg); backdrop-filter:blur(12px); }
  .topbar::after { height:1px; }
  .topbar-logo { display:none !important; }
  .logo-royal, .logo-dtf { font-size:13px !important; }
  #langSelect, #topazUserBar { display:none !important; }
  #sheetSizeTag, #totalPriceTag { display:none !important; }
  .topbar-right .btn-outline { display:none; }
  .topbar-right .btn-sm { display:none !important; }
  .topbar-right { gap:4px !important; }
  /* Hide ALL desktop topbar items on mobile except toggle buttons */
  .topbar-right > * { display:none !important; }
  .topbar-right > .mob-topbar-icon { display:flex !important; }
  /* Swap hamburger: hide old designs toggle, show menu trigger */
  #mobLeftToggle { display:none !important; }
  #mobRightToggle { display:none !important; }
  .mob-hmenu-trigger { display:inline-flex !important; }
  .mob-topbar-sheet { display:flex; }

  /* Mobile topbar icons */
  .mob-topbar-icon {
    width:32px; height:32px; border-radius:8px; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text2); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.12s; padding:0; flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-topbar-icon:active { transform:scale(0.9); background:var(--accent-dim); }
  .mob-topbar-cart {
    background:linear-gradient(135deg,#6a4dab,#7c5cbf); border-color:#7c5cbf;
    color:#fff;
  }
  .mob-topbar-cart:active { background:#8b5cf6; }

  /* Mobile sheet info pill in topbar */
  .mob-topbar-sheet {
    display:flex; align-items:center; gap:6px;
    flex:1; min-width:0; justify-content:center; cursor:pointer;
  }
  .mob-topbar-sheet-inner {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--panel2);
    color:var(--text);
    font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
    padding:5px 10px; border-radius:8px;
    letter-spacing:0.01em;
    border:1px solid var(--border2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:calc(100vw - 120px);
    transition:all 0.12s;
  }
  .mob-topbar-sheet:active .mob-topbar-sheet-inner {
    background:var(--accent-dim); border-color:var(--accent);
  }
  .mob-topbar-sheet-ico { flex-shrink:0; color:var(--accent); }
  .mob-topbar-divider { opacity:0.3; font-weight:400; }
  .mob-topbar-size { opacity:0.55; font-size:10px; font-weight:500; }
  [data-theme="light"] .mob-topbar-sheet-inner {
    background:#f0f1f5; color:var(--text); border-color:var(--border);
  }

  /* ── Sheet Detail Full-Screen Overlay ── */
  .mob-sd-backdrop {
    display:none; position:fixed; inset:0; z-index:209;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(2px);
  }
  .mob-sd-backdrop.open { display:block; }
  .mob-sheet-detail {
    display:none; position:fixed; left:0; right:0; bottom:0;
    z-index:210; background:var(--panel);
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,0.6);
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height:85vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .mob-sheet-detail.open {
    display:block; transform:translateY(0);
  }
  .mob-sd-handle {
    width:36px; height:4px; background:var(--text3); opacity:0.35;
    border-radius:2px; margin:10px auto 0; cursor:grab;
  }
  .mob-sd-close {
    position:absolute; top:8px; right:12px; width:30px; height:30px;
    border-radius:50%; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer;
    font-size:16px; display:flex; align-items:center; justify-content:center;
  }
  .mob-sd-body { padding:20px 18px 28px; }
  .mob-sd-title {
    font-family:'Montserrat',sans-serif; font-size:18px; font-weight:800;
    color:var(--text); margin-bottom:16px; letter-spacing:0.02em;
  }
  .mob-sd-grid {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
    margin-bottom:18px;
  }
  .mob-sd-card {
    background:var(--panel2); border:1px solid var(--border2);
    border-radius:10px; padding:12px 10px; text-align:center;
  }
  .mob-sd-card-label {
    font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text3); margin-bottom:4px;
    font-family:'Montserrat',sans-serif;
  }
  .mob-sd-card-val {
    font-size:16px; font-weight:800; color:var(--text);
    font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums;
  }
  .mob-sd-actions {
    display:flex; gap:8px;
  }
  .mob-sd-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px; border-radius:10px; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    transition:all 0.12s;
  }
  .mob-sd-btn:active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

  /* ── Full-Screen Sheet Info Panel ── */
  .mob-sheetinfo {
    display:none; position:fixed; inset:0; z-index:210;
    background:var(--panel);
    flex-direction:column;
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .mob-sheetinfo.open { display:flex; transform:translateY(0); }
  .mob-si-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; height:48px; flex-shrink:0;
    border-bottom:1px solid var(--border); position:relative;
  }
  .mob-si-handle {
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; background:var(--text3); opacity:0.3;
    border-radius:2px;
  }
  .mob-si-title {
    font-family:'Montserrat',sans-serif; font-size:14px; font-weight:800;
    letter-spacing:0.03em; text-transform:uppercase; color:var(--text);
  }
  .mob-si-close {
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer;
    font-size:18px; display:flex; align-items:center; justify-content:center;
  }
  .mob-si-close:active { background:var(--accent-dim); }
  .mob-si-scroll {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:0;
  }
  .mob-si-scroll .rp-price-card { margin:0 14px 8px; }
  .mob-si-scroll .rp-section-label { padding-left:14px; padding-right:14px; }
  .mob-si-scroll .rp-stat-row { padding-left:14px; padding-right:14px; }
  .mob-si-scroll .rp-divider { margin-left:14px; margin-right:14px; }
  .mob-si-scroll .rp-fill-header { padding-left:14px; padding-right:14px; }
  .mob-si-scroll .rp-bar-track { margin-left:14px; margin-right:14px; }
  .mob-si-scroll .rp-micro { padding-left:14px; padding-right:14px; }
  .mob-si-footer {
    flex-shrink:0; padding:10px 16px 20px; padding-bottom:max(20px, env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
  }
  .mob-si-cart-btn {
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px; border-radius:12px; border:none; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
    background:linear-gradient(135deg,#6a4dab,#7c5cbf); color:#fff;
    transition:all 0.12s; box-shadow:0 4px 16px rgba(124,58,237,0.3);
  }
  .mob-si-cart-btn:active { transform:scale(0.97); }

  /* ── Canvas Hint Overlay — big, opaque, with Quick Order ── */
  #mobCanvasHint {
    position:absolute; inset:0;
    display:none; align-items:center; justify-content:center;
    padding:30px 20px 80px; text-align:center; z-index:25;
    pointer-events:none;
    background:rgba(10,10,12,0.75);
  }
  #mobCanvasHintInner {
    max-width:300px; width:90%;
    border-radius:16px;
    background:var(--panel);
    border:2px solid var(--accent);
    padding:24px 20px 20px;
    box-shadow:0 0 30px rgba(124,92,191,0.2), 0 12px 40px rgba(0,0,0,0.6);
    font-family:'Inter',sans-serif;
    pointer-events:auto;
  }
  #mobCanvasHintInner h3 {
    margin:0 0 6px; font-size:16px; font-weight:800;
    color:var(--text); letter-spacing:-0.01em;
  }
  #mobCanvasHintInner p {
    margin:0 0 14px; font-size:11px; color:var(--text3); line-height:1.4;
  }
  .mob-hint-btns {
    display:flex; flex-direction:column; gap:8px;
  }
  .mob-hint-btn {
    width:100%; padding:11px 14px; border-radius:10px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all 0.12s; border:none;
  }
  .mob-hint-btn:active { transform:scale(0.96); }
  .mob-hint-upload {
    background:var(--accent); color:#000;
  }
  .mob-hint-qo {
    background:var(--panel2); color:var(--text);
    border:1px solid var(--border2) !important;
  }

  /* ── Mobile Hamburger Menu (slide-down overlay) ── */
  .mob-hmenu-overlay {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  }
  .mob-hmenu-overlay.open { display:flex; flex-direction:column; }
  .mob-hmenu {
    background:var(--panel); border-radius:0 0 16px 16px;
    box-shadow:0 8px 40px rgba(0,0,0,0.5);
    max-height:80vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0;
  }
  .mob-hmenu-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border);
  }
  .mob-hmenu-title {
    font-family:'Montserrat',sans-serif; font-size:14px; font-weight:800;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--text);
  }
  .mob-hmenu-close {
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer;
    font-size:18px; display:flex; align-items:center; justify-content:center;
  }
  .mob-hmenu-section {
    padding:12px 16px;
    border-bottom:1px solid var(--border);
  }
  .mob-hmenu-section:last-child { border-bottom:none; }
  .mob-hmenu-label {
    font-size:8px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:#71717A; margin-bottom:8px;
    font-family:'Montserrat',sans-serif;
  }
  .mob-hmenu-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 0; cursor:pointer; color:var(--text);
    font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  }
  .mob-hmenu-row:active { opacity:0.7; }
  .mob-hmenu-icon {
    width:32px; height:32px; border-radius:8px;
    background:var(--panel2); border:1px solid var(--border2);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0;
  }
  .mob-hmenu-select {
    width:100%; padding:8px 10px; font-size:12px; font-weight:600;
    background:var(--panel2); border:1px solid var(--border2);
    border-radius:8px; color:var(--text); cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .mob-hmenu-theme {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
  }
  .mob-hmenu-theme-label {
    display:flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--text);
  }

  /* App body — maximize canvas */
  .app-body { position:relative; display:flex !important; flex-direction:column; }

  /* Left panel: bottom sheet overlay */
  .left-panel {
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100% !important; max-height:65vh; z-index:101;
    transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.3s ease, top 0.3s ease, border-radius 0.2s ease;
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,0.5);
  }
  .left-panel.mob-open { transform:translateY(0); }
  .left-panel.mob-expanded {
    max-height:100vh !important; max-height:100dvh !important;
    top:0; border-radius:0;
    transform:translateY(0);
  }
  .left-panel.mob-expanded .panel-content {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .left-panel.mob-expanded .design-grid {
    max-height:none; overflow-y:visible;
  }
  .left-panel::before {
    content:''; display:block; width:36px; height:4px;
    background:var(--text3); opacity:0.4; border-radius:2px;
    margin:8px auto 4px; flex-shrink:0; cursor:grab;
  }
  /* Close button — mobile expanded only */
  .mob-panel-close {
    position:absolute; top:6px; right:10px; z-index:10;
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border2);
    background:var(--panel2); color:var(--text); cursor:pointer;
    font-size:18px; line-height:1; display:none; align-items:center; justify-content:center;
    transition:all 0.15s;
  }
  .mob-panel-close:active { transform:scale(0.9); background:var(--accent-dim); }
  .left-panel.mob-expanded .mob-panel-close { display:flex; }
  .left-panel.mob-expanded::before { display:none; }
  /* Hide rotation handles when panel is expanded */
  body.mob-panel-fullscreen #rotateHandleGlobal,
  body.mob-panel-fullscreen #rotateHandleStem,
  body.mob-panel-fullscreen #rotateDegreeBadge { display:none !important; }
  /* Hide bottom bar + right controls when panel is fullscreen */
  body.mob-panel-fullscreen .mob-bottom-bar { display:none !important; }
  body.mob-panel-fullscreen .mob-canvas-ctrl { display:none !important; }

  /* Hide sheet bar on mobile — replaced by right toolbar sheets button */
  .mob-sheet-bar { display:none !important; }
  .canvas-area { padding-top:0px !important; }

  /* Right panel: bottom sheet overlay */
  .right-panel {
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100% !important; max-height:55vh; z-index:101;
    transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,0.5);
  }
  .right-panel.mob-open { transform:translateY(0); }
  .right-panel::before {
    content:''; display:block; width:36px; height:4px;
    background:var(--text3); opacity:0.4; border-radius:2px;
    margin:8px auto 4px; flex-shrink:0;
  }

  /* Canvas options bar — hide on mobile, accessible via bottom bar */
  .canvas-options-bar {
    display:none !important;
  }

  /* ── Mobile Right Canvas Controls ── */
  .mob-canvas-ctrl {
    position:fixed; right:6px; top:50%; transform:translateY(-50%);
    z-index:55; display:flex; flex-direction:column; align-items:center; gap:3px;
    pointer-events:auto;
  }
  .mcc-btn {
    width:36px; height:36px; border-radius:10px;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text2); font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
    transition:all 0.12s; padding:0; line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .mcc-btn:active { transform:scale(0.88); }
  .mcc-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  .mcc-sep { width:22px; height:1px; background:var(--border2); margin:1px 0; }
  .mcc-logo-btns { display:flex; flex-direction:column; gap:3px; }
  .mcc-logo-btns.hidden { display:none; }
  .mcc-btn.mcc-add { background:rgba(124,92,191,0.15); border-color:var(--accent); color:var(--accent); }
  .mcc-btn.mcc-remove { background:rgba(255,68,68,0.12); border-color:#ff4444; color:#ff4444; }
  .mcc-zoom-label {
    font-size:8px; font-weight:700; color:var(--text3);
    font-family:'Montserrat',sans-serif; letter-spacing:0.02em;
    text-align:center; line-height:1; margin:-1px 0;
  }

  /* Sheets sidebar inside canvas-viewport — hidden by default on mobile */
  .sheets-sidebar { display:none !important; }
  .canvas-scroll { margin-right:0 !important; width:100% !important; }
  #sheetNameBanner { display:none !important; }
  .sheets-sb-header { padding:3px 4px; }
  .sheets-sb-title { font-size:7px; }
  .layer-row { padding:2px 3px; gap:2px; min-height:22px; }
  .layer-name { font-size:8px; }
  .layer-meta { font-size:6px; }
  .sheet-row-actions { opacity:1; }
  .sheet-row-act { width:12px; height:12px; font-size:7px; }
  .sheets-sb-btn { min-width:18px; height:16px; font-size:9px; }

  /* Canvas viewport — maximize space */
  .canvas-area { min-height:0; }
  /* Mobile helper overlay that sits above the checkerboard canvas */
  .canvas-scroll { touch-action:none; overscroll-behavior:none; padding:8px !important; overflow:hidden !important; -webkit-overflow-scrolling:auto; }
  .canvas-scroll.overflowing { overflow:hidden !important; }
  #mainCanvas { touch-action:none; }

  /* Floating vertical toolbar — auto-shows on selection */
  .vtoolbar {
    position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
    right:auto; top:auto;
    flex-direction:row; flex-wrap:nowrap; justify-content:center;
    padding:4px 6px; gap:1px; border-radius:14px;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
    max-width:90vw; z-index:50;
    background:var(--panel); border:1px solid var(--border);
    backdrop-filter:blur(12px);
    transition:opacity 0.25s ease, transform 0.25s ease;
    opacity:0; pointer-events:none;
  }
  .vt-sep { width:1px; height:20px; margin:0 1px; }
  .vt-btn { width:28px; height:28px; font-size:14px; }

  /* Stats bar: minimal, single line */
  .stats-bar {
    display:none !important;
  }

  /* Design grid: flat list compact */
  .design-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; gap:12px 16px !important; }
  .upload-zone { padding:10px 10px !important; }
  .upload-zone h4 { font-size:12px !important; }
  .upload-zone p { font-size:8px !important; }
  .panel-content { padding:8px !important; gap:8px !important; }
  .panel-tab { padding:8px 4px !important; font-size:10px !important; }

  /* Quick Order overlay: full screen */
  .qo-overlay { padding:0 !important; }
  .qo-panel { border-radius:0 !important; max-height:100% !important; width:100% !important; max-width:100% !important; }
  .qo-body { flex-direction:column !i