@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── DESIGN TOKENS — LIGHT THEME (default) ── */
:root {
  /* Backgrounds */
  --bg:         #f0f2f5;
  --surface:    #ffffff;
  --panel:      #f0f2f5;
  --raised:     #e4e8ef;
  --hover-bg:   rgba(0,0,0,0.03);

  /* Borders */
  --border:     #dce1ea;
  --border-dk:  #b8c0cc;

  /* Radius */
  --radius-sm:  0;
  --radius:     0;
  --radius-lg:  0;
  --radius-pill: 0;

  /* Text */
  --text:       #151516;
  --text2:      #4a5568;
  --muted:      #8896a8;

  /* Accent */
  --accent:     #0095ff;
  --accent2:    #0080dd;
  --accent-soft: rgba(0,149,255,0.08);

  /* Semantic */
  --success:    #059669;
  --success-soft: rgba(5,150,105,0.1);
  --success-border: rgba(16,185,129,0.18);
  --success-border-strong: rgba(16,185,129,0.25);
  --error:      #c62828;
  --error-soft: rgba(198,40,40,0.08);
  --error-border: rgba(239,68,68,0.25);
  --error-border-soft: rgba(239,68,68,0.2);
  --warning:    #f59e0b;
  --warning-soft: rgba(245,158,11,0.1);
  --warning-bg-soft: rgba(245,158,11,0.09);
  --warning-border: rgba(245,158,11,0.35);
  --warning-border-strong: rgba(245,158,11,0.3);
  --warning-border-soft: rgba(245,158,11,0.25);
  --error-border-strong: rgba(239,68,68,0.5);

  /* Accent (extra) */
  --accent-bg-soft:   rgba(0,149,255,0.12);
  --accent-bg-soft-2: rgba(0,149,255,0.15);
  --accent-bg-tint:   rgba(0,149,255,0.05);
  --accent-bg-input:  rgba(0,149,255,0.04);
  --accent-border:    rgba(0,149,255,0.25);
  --accent-border-strong: rgba(0,149,255,0.35);
  --accent-glow:      0 0 30px rgba(0,149,255,0.08);
  --accent-focus-ring: 0 0 0 3px rgba(0,149,255,0.1);
  --error-text-on-soft: #c62828;
  --warning-text-on-soft: #b45309;
  --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.1);

  /* Dashboard revenue chart tokens */
  --chart-axis:         rgba(0,0,0,0.08);
  --chart-tooltip-bg:   #ffffff;
  --chart-tooltip-fg:   #151516;

  /* Toast / sd-modal tokens (authenticated pages only) */
  --toast-shadow:    0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  --toast-ok-bg:     #10b981;
  --toast-ok-fg:     #fff;
  --toast-err-bg:    #ef4444;
  --toast-err-fg:    #fff;
  --toast-warn-bg:   #f59e0b;
  --toast-warn-fg:   #1a1d27;
  --toast-info-bg:   #0095ff;
  --toast-info-fg:   #fff;
  --sd-modal-bg:        #ffffff;
  --sd-modal-border:    rgba(0,0,0,0.08);
  --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.18);
  --sd-modal-text:      #1a1d27;
  --sd-modal-title:     #0b0d12;
  --sd-modal-msg:       #4a5568;
  --sd-cancel-fg:       #64748b;
  --sd-cancel-border:   rgba(0,0,0,0.12);
  --sd-cancel-hover-bg: rgba(0,0,0,0.04);
  --sd-primary-hover:   #0080e0;
  --sd-danger-bg:       #ef4444;
  --sd-danger-hover:    #dc2626;
  --sd-form-input-bg:   #f6f7f9;
  --sd-pill-border:     rgba(0,0,0,0.14);
  --sd-pill-fg:         #475569;
  --sd-success-fg:      #10b981;
  --sd-code-fg:         #0095ff;

  /* Super-admin specific (uses app.css tokens on superadmin-themed pages) */
  --sa-err-bg:            #0f1117;
  --sa-err-fg:            #fff;
  --sa-err-sub:           #666;
  --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #6366f1);
  --sa-badge-fg:          #fff;
  --sa-violet:            #8b5cf6;
  --sa-violet-bg:         rgba(139,92,246,0.12);
  --sa-violet-border:     rgba(139,92,246,0.3);
  --sa-violet-soft:       rgba(139,92,246,0.06);
  --sa-preview-bg:        #f4f6f8;
  --sa-preview-email-bg:  #fff;
  --sa-ws-danger-bg:      rgba(239,68,68,0.08);
  --sa-ws-danger-fg:      #fca5a5;
  --sa-ws-danger-border:  rgba(239,68,68,0.3);
  --sa-ws-danger-outline: rgba(239,68,68,0.45);
  --sa-ws-danger-inset:   rgba(239,68,68,0.15);
  --sa-ticket-new-bg:     rgba(239,68,68,0.12);
  --sa-ticket-replied-bg: rgba(245,158,11,0.12);
  --sa-ticket-closed-bg:  rgba(16,185,129,0.12);
  --sa-ticket-num-bg:     rgba(0,149,255,0.1);
  --sa-code-bg-opaque:    rgba(0,0,0,0.25);
  --sa-flash-bg:          rgba(0,149,255,0.25);
  --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.08);
  --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
  --sa-storage-heavy-bg:  rgba(245,158,11,0.06);
  --sa-storage-warn-bg:   rgba(245,158,11,0.08);
  --sa-storage-warn-border: rgba(245,158,11,0.3);
  --sa-storage-expired-fg: #ef4444;
  --sa-storage-saved-fg:  #22c55e;
  --sa-storage-purge-bg:  rgba(239,68,68,0.06);
  --sa-storage-purge-border: rgba(239,68,68,0.25);
  --sa-storage-purge-h4:  #ef4444;
  --sa-storage-err-bg:    rgba(239,68,68,0.08);
  --sa-storage-err-border: rgba(239,68,68,0.3);
  --sa-storage-err-fg:    #ef8080;

  /* Auth violet (plan team badge) */
  --auth-violet:           #8b5cf6;
  --auth-violet-fg:        #a78bfa;
  --auth-violet-soft:      rgba(139,92,246,0.04);
  --auth-violet-bg-soft:   rgba(139,92,246,0.15);
  --auth-violet-border:    rgba(139,92,246,0.35);

  /* Shadows (extra) */
  --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.5);

  /* Edge types */
  --fin:        #2979ff;
  --seam:       #ef4444;
  --cut:        #f97316;
  --miter:      #8b5cf6;
  --ref:        #6b7280;
  --lam:        #c8850a;

  /* Canvas */
  --canvas-bg:       #eef1f6;
  --canvas-grid:     rgba(44,95,46,0.14);
  --canvas-grid-mid: rgba(0,0,0,0.06);
  --canvas-grid-fine: rgba(0,0,0,0.03);
  --canvas-ruler-bg: #f9f7f0;
  --canvas-ruler-alt: #ede9dc;
  --canvas-ruler-corner: #1e2a3a;

  /* Header */
  --hdr-bg:     #0d0e14;
  --hdr-text:   rgba(255,255,255,0.82);
  --hdr-muted:  rgba(255,255,255,0.45);
  --hdr-border: rgba(255,255,255,0.08);
  --hdr-hover:  rgba(255,255,255,0.12);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.15);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.25);
  --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.35);

  /* Modal overlay */
  --overlay:    rgba(0,0,0,0.45);
  --overlay-strong: rgba(0,0,0,0.55);

  /* Danger button surfaces */
  --danger-bg:        rgba(239,68,68,0.08);
  --danger-bg-hover:  rgba(239,68,68,0.16);
  --danger-border:    rgba(239,68,68,0.2);

  /* Solid-button foreground (white on accent/error/success button surfaces) */
  --on-accent: #fff;

  /* ── Status pill identity tokens (bg + fg) ── */
  --status-draft-bg:     rgba(148,163,184,0.12);
  --status-draft-fg:     #94a3b8;
  --status-estimate-bg:  rgba(245,158,11,0.15);
  --status-estimate-fg:  #fbbf24;
  --status-accepted-bg:  rgba(16,185,129,0.15);
  --status-accepted-fg:  #34d399;
  --status-invoiced-bg:  rgba(59,130,246,0.15);
  --status-invoiced-fg:  #93c5fd;
  --status-invsent-bg:   rgba(6,182,212,0.15);
  --status-invsent-fg:   #67e8f9;
  --status-deposit-bg:   rgba(217,119,6,0.18);
  --status-deposit-fg:   #fcd34d;
  --status-complete-bg:  rgba(139,92,246,0.15);
  --status-complete-fg:  #c4b5fd;
  --status-onhold-bg:    rgba(148,163,184,0.1);
  --status-onhold-fg:    #94a3b8;
  --status-followup-bg:  rgba(244,63,94,0.14);
  --status-followup-fg:  #fb7185;
  --status-cancelled-bg: rgba(239,68,68,0.12);
  --status-cancelled-fg: #f87171;
  --status-custom-bg:    rgba(139,92,246,0.12);
  --status-custom-fg:    #a78bfa;
  --status-paid-bg:      rgba(16,185,129,0.2);
  --status-paid-fg:      #6ee7b7;

  /* ── Status pill border tokens (for outlined .ip-st-* pills) ── */
  --status-draft-border:     rgba(148,163,184,0.3);
  --status-estimate-border:  rgba(245,158,11,0.4);
  --status-accepted-border:  rgba(16,185,129,0.4);
  --status-invoiced-border:  rgba(59,130,246,0.4);
  --status-invsent-border:   rgba(6,182,212,0.4);
  --status-deposit-border:   rgba(217,119,6,0.45);
  --status-paid-border:      rgba(16,185,129,0.45);
  --status-onhold-border:    rgba(148,163,184,0.2);
  --status-followup-border:  rgba(244,63,94,0.3);
  --status-cancelled-border: rgba(239,68,68,0.3);
  --status-custom-border:    rgba(100,116,139,0.25);

  /* ── Kanban column identity stripes (border-left-color) ── */
  --kanban-draft:     #94a3b8;
  --kanban-estimate:  #f59e0b;
  --kanban-accepted:  #10b981;
  --kanban-invoiced:  #3b82f6;
  --kanban-invsent:   #06b6d4;
  --kanban-deposit:   #d97706;
  --kanban-complete:  #8b5cf6;
  --kanban-onhold:    #94a3b8;
  --kanban-followup:  #f43f5e;
  --kanban-cancelled: #ef4444;
  --kanban-custom:    #8b5cf6;

  /* ── Priority pill tokens ── */
  --priority-low-bg:     rgba(148,163,184,0.12);
  --priority-low-fg:     #94a3b8;
  --priority-medium-bg:  rgba(245,158,11,0.15);
  --priority-medium-fg:  #fbbf24;
  --priority-high-bg:    rgba(239,68,68,0.15);
  --priority-high-fg:    #f87171;

  /* ── Badge tokens ── */
  --badge-repeat-bg:     rgba(139,92,246,0.12);
  --badge-repeat-fg:     #7c3aed;
  --badge-archive-bg:    rgba(148,163,184,0.12);
  --badge-archive-fg:    #94a3b8;
  --badge-archive-toggle-bg: rgba(100,116,139,0.15);

  /* ── Upsell / pro-lock gradient accent ── */
  --pro-gradient-start:  #0095ff;
  --pro-gradient-end:    #6366f1;
  --free-banner-mix:     rgba(99,102,241,0.07);
  --upgrade-modal-bg:    #1e2538;
  --upgrade-modal-backdrop: rgba(0,0,0,0.45);
  --upgrade-modal-shadow: 0 20px 60px rgba(0,0,0,0.6);

  /* ── Component semantic tokens (tokenization pass) ── */
  /* Black overlays / shadows (alpha steps) */
  --black-a02:  rgba(0,0,0,0.02);
  --black-a03:  rgba(0,0,0,0.03);
  --black-a04:  rgba(0,0,0,0.04);
  --black-a05:  rgba(0,0,0,0.05);
  --black-a06:  rgba(0,0,0,0.06);
  --black-a08:  rgba(0,0,0,0.08);
  --black-a10:  rgba(0,0,0,0.10);
  --black-a12:  rgba(0,0,0,0.12);
  --black-a15:  rgba(0,0,0,0.15);
  --black-a18:  rgba(0,0,0,0.18);
  --black-a25:  rgba(0,0,0,0.25);
  --black-a30:  rgba(0,0,0,0.30);
  --black-a35:  rgba(0,0,0,0.35);
  --black-a40:  rgba(0,0,0,0.40);
  --black-a42:  rgba(0,0,0,0.42);
  --black-a45:  rgba(0,0,0,0.45);
  --black-a50:  rgba(0,0,0,0.50);
  --black-a55:  rgba(0,0,0,0.55);
  --black-a60:  rgba(0,0,0,0.60);
  --black-a65:  rgba(0,0,0,0.65);
  --black-a70:  rgba(0,0,0,0.70);
  --black-a72:  rgba(0,0,0,0.72);
  --black-a80:  rgba(0,0,0,0.80);
  --black-a92:  rgba(10,14,24,0.92);
  /* White overlays (alpha steps on dark surfaces) */
  --white-a03:  rgba(255,255,255,0.03);
  --white-a06:  rgba(255,255,255,0.06);
  --white-a08:  rgba(255,255,255,0.08);
  --white-a10:  rgba(255,255,255,0.10);
  --white-a12:  rgba(255,255,255,0.12);
  --white-a18:  rgba(255,255,255,0.18);
  --white-a20:  rgba(255,255,255,0.20);
  --white-a28:  rgba(255,255,255,0.28);
  --white-a35:  rgba(255,255,255,0.35);
  --white-a40:  rgba(255,255,255,0.40);
  --white-a45:  rgba(255,255,255,0.45);
  --white-a50:  rgba(255,255,255,0.50);
  --white-a55:  rgba(255,255,255,0.55);
  --white-a70:  rgba(255,255,255,0.70);
  --white-a80:  rgba(255,255,255,0.80);
  --white-a85:  rgba(255,255,255,0.85);
  --white-a90:  rgba(255,255,255,0.90);
  --white-a92:  rgba(255,255,255,0.92);
  /* Accent-blue alpha family (site primary 0,149,255) */
  --accent-a04: rgba(0,149,255,0.04);
  --accent-a05: rgba(0,149,255,0.05);
  --accent-a06: rgba(0,149,255,0.06);
  --accent-a07: rgba(0,149,255,0.07);
  --accent-a08: rgba(0,149,255,0.08);
  --accent-a10: rgba(0,149,255,0.10);
  --accent-a12: rgba(0,149,255,0.12);
  --accent-a13: rgba(0,149,255,0.13);
  --accent-a14: rgba(0,149,255,0.14);
  --accent-a15: rgba(0,149,255,0.15);
  --accent-a16: rgba(0,149,255,0.16);
  --accent-a18: rgba(0,149,255,0.18);
  --accent-a20: rgba(0,149,255,0.20);
  --accent-a22: rgba(0,149,255,0.22);
  --accent-a25: rgba(0,149,255,0.25);
  --accent-a28: rgba(0,149,255,0.28);
  --accent-a30: rgba(0,149,255,0.30);
  --accent-a32: rgba(0,149,255,0.32);
  --accent-a35: rgba(0,149,255,0.35);
  --accent-a40: rgba(0,149,255,0.40);
  --accent-a45: rgba(0,149,255,0.45);
  --accent-a50: rgba(0,149,255,0.50);
  --accent-a55: rgba(0,149,255,0.55);
  --accent-a85: rgba(0,149,255,0.85);
  --accent-alt: #0080dd;
  /* Error-red alpha family (brick 198,40,40) */
  --error-a04:  rgba(198,40,40,0.04);
  --error-a05:  rgba(198,40,40,0.05);
  --error-a06:  rgba(198,40,40,0.06);
  --error-a08:  rgba(198,40,40,0.08);
  --error-a10:  rgba(198,40,40,0.10);
  --error-a12:  rgba(198,40,40,0.12);
  --error-a18:  rgba(198,40,40,0.18);
  --error-a20:  rgba(198,40,40,0.20);
  --error-a30:  rgba(198,40,40,0.30);
  --error-a35:  rgba(198,40,40,0.35);
  --error-a40:  rgba(198,40,40,0.40);
  /* Danger (220,38,38) */
  --danger-a07: rgba(220,38,38,0.07);
  --danger-a10: rgba(220,38,38,0.10);
  --danger-a25: rgba(220,38,38,0.25);
  --danger-a30: rgba(220,38,38,0.30);
  /* Success (5,150,105) */
  --success-a07: rgba(5,150,105,0.07);
  --success-a08: rgba(5,150,105,0.08);
  --success-a10: rgba(5,150,105,0.10);
  --success-a12: rgba(5,150,105,0.12);
  --success-a15: rgba(5,150,105,0.15);
  --success-a25: rgba(5,150,105,0.25);
  --success-a35: rgba(5,150,105,0.35);
  --success-a40: rgba(5,150,105,0.40);
  --success-a50: rgba(5,150,105,0.50);
  --success-a60: rgba(5,150,105,0.60);
  /* Warning amber (245,158,11) */
  --warning-a07: rgba(245,158,11,0.07);
  --warning-a10: rgba(245,158,11,0.10);
  --warning-a12: rgba(245,158,11,0.12);
  --warning-a25: rgba(245,158,11,0.25);
  --warning-a40: rgba(245,158,11,0.40);
  /* Follow-up red (239,68,68) */
  --red2-a06:    rgba(239,68,68,0.06);
  --red2-a10:    rgba(239,68,68,0.10);
  --red2-a15:    rgba(239,68,68,0.15);
  --red2-a18:    rgba(239,68,68,0.18);
  --red2-a20:    rgba(239,68,68,0.20);
  --red2-a30:    rgba(239,68,68,0.30);
  --red2-a35:    rgba(239,68,68,0.35);
  --red2-a45:    rgba(239,68,68,0.45);
  --red2-a55:    rgba(239,68,68,0.55);
  --red2-a60:    rgba(239,68,68,0.60);
  /* Purple/violet (168,85,247 — quote badge) */
  --violet-a14:  rgba(168,85,247,0.14);
  --violet-a18:  rgba(168,85,247,0.18);
  --violet-a26:  rgba(168,85,247,0.26);
  --violet-a30:  rgba(168,85,247,0.30);
  --violet-a35:  rgba(168,85,247,0.35);
  --violet-a50:  rgba(168,85,247,0.50);
  --violet-a60:  rgba(168,85,247,0.60);
  --violet-a80:  rgba(168,85,247,0.80);
  /* Teal (15,118,110 — invoice hbtn) */
  --teal-a08:    rgba(15,118,110,0.08);
  --teal-a10:    rgba(15,118,110,0.10);
  --teal-a12:    rgba(15,118,110,0.12);
  --teal-a14:    rgba(15,118,110,0.14);
  --teal-a28:    rgba(15,118,110,0.28);
  --teal-a30:    rgba(15,118,110,0.30);
  --teal-a50:    rgba(15,118,110,0.50);
  /* Indigo (99,102,241 — upsell banner) */
  --indigo-a08:  rgba(99,102,241,0.08);
  --indigo-a15:  rgba(99,102,241,0.15);
  --indigo-a16:  rgba(99,102,241,0.16);
  --indigo-a30:  rgba(99,102,241,0.30);
  --indigo-a50:  rgba(99,102,241,0.50);
  /* Bid gold / lam (184,134,11 + 234,179,8) */
  --bid-gold-a08: rgba(184,134,11,0.08);
  --bid-gold-a12: rgba(184,134,11,0.12);
  --bid-gold-a30: rgba(184,134,11,0.30);
  --bid-gold-a50: rgba(234,179,8,0.10);
  --bid-gold-border-a40: rgba(180,83,9,0.40);
  /* Secondary palette colors used inline */
  --accent-deep-a08:  rgba(21,101,192,0.08);
  --accent-deep-a12:  rgba(21,101,192,0.12);
  --accent-deep-a20:  rgba(21,101,192,0.20);
  --accent-cta-a20:   rgba(0,87,217,0.12);
  --cut-orange-a12:   rgba(230,81,0,0.12);
  --cut-sink-a15:     rgba(0,120,255,0.15);
  --cut-cooktop-a15:  rgba(255,80,0,0.15);
  --cut-faucet-a15:   rgba(180,140,0,0.15);
  --cut-faucet-a180-a30: rgba(180,140,0,0.30);
  --cut-custom-a15:   rgba(130,0,200,0.15);
  --cut-sink-fg:      #0070ee;
  --cut-cooktop-fg:   #d44000;
  --cut-faucet-fg:    #8a6a00;
  --cut-custom-fg:    #7800cc;
  --cut-link-a07:     rgba(0,128,221,0.07);
  --cut-link-a13:     rgba(0,128,221,0.13);
  --cut-link-a20:     rgba(0,128,221,0.20);
  --cut-link-a30:     rgba(0,128,221,0.30);
  --cut-link-fg:      #0080dd;
  --cut-lock-a12:     rgba(255,140,0,0.12);
  --cut-lock-a22:     rgba(255,140,0,0.22);
  --cut-lock-a50:     rgba(255,165,0,0.50);
  --cut-lock-a70:     rgba(255,140,0,0.70);
  --cut-lock-fg:      #cc7700;
  --miter-a12:        rgba(123,31,162,0.12);
  --ref-a12:          rgba(85,85,85,0.12);
  --lam-a12:          rgba(200,133,10,0.12);
  --lam-a15:          rgba(200,133,10,0.15);
  --seam-conn-bg:     rgba(198,40,40,0.06);
  --seam-conn-border: rgba(198,40,40,0.18);
  --seam-ok-fg:       #16a34a;
  --seam-ok-bg:       rgba(22,163,74,0.08);
  --seam-ok-border:   rgba(22,163,74,0.30);
  --seam-err-fg:      #ef4444;
  --seam-reset-fg:    #b45309;
  --seam-cutout-link: var(--cut-link-a07);
  --cutout-link-row-border: var(--cut-link-a20);
  /* 3D assembly canvas */
  --asm3d-toolbar-bg:  rgba(15,15,28,0.85);
  --asm3d-y-a06:       rgba(34,197,94,0.06);
  --asm3d-y-a18:       rgba(34,197,94,0.18);
  --asm3d-y-a30:       rgba(34,197,94,0.30);
  --asm3d-y-a35:       rgba(34,197,94,0.35);
  --asm3d-y-a60:       rgba(34,197,94,0.60);
  --asm3d-y-lbl:       rgba(134,239,172,0.85);
  --asm3d-y-icon:      rgba(187,247,208,0.95);
  --asm3d-x-a06:       rgba(239,68,68,0.06);
  --asm3d-x-a18:       rgba(239,68,68,0.18);
  --asm3d-x-a30:       rgba(239,68,68,0.30);
  --asm3d-x-a35:       rgba(239,68,68,0.35);
  --asm3d-x-a60:       rgba(239,68,68,0.60);
  --asm3d-x-lbl:       rgba(252,165,165,0.85);
  --asm3d-x-icon:      rgba(254,202,202,0.95);
  --asm3d-z-a06:       rgba(59,130,246,0.06);
  --asm3d-z-a18:       rgba(59,130,246,0.18);
  --asm3d-z-a30:       rgba(59,130,246,0.30);
  --asm3d-z-a35:       rgba(59,130,246,0.35);
  --asm3d-z-a60:       rgba(59,130,246,0.60);
  --asm3d-z-lbl:       rgba(147,197,253,0.85);
  --asm3d-z-icon:      rgba(191,219,254,0.95);
  --asm3d-cut-label:   rgba(124,58,237,0.40);
  /* Quote card selected in dark theme */
  --quote-card-sel-bg: #261f3a;
  /* CRM job card header / bid-hdr-row3 */
  --crm-hdr-row-bg:    rgba(0,0,0,0.04);
  /* Payment milestone badges */
  --pay-violet-a06:    rgba(139,92,246,0.06);
  --pay-violet-a08:    rgba(139,92,246,0.08);
  --pay-violet-a12:    rgba(139,92,246,0.12);
  --pay-violet-fg:     #8b5cf6;
  --pay-violet-fg2:    #7c3aed;
  --pay-violet-fg3:    #a78bfa;
  --pay-violet-border: #c4b5fd;
  /* Signout red-ish text */
  --signout-fg:        rgba(255,100,100,0.85);
  --signout-fg-muted:  rgba(220,100,100,0.80);
  --quotes-del-fg:     rgba(255,100,100,0.80);
  --quotes-del-strong: #ff6b6b;
  --quotes-del-a10:    rgba(255,80,80,0.10);
  --quotes-del-a22:    rgba(255,80,80,0.22);
  --quotes-del-a25:    rgba(255,80,80,0.25);
  --quotes-del-border: rgba(255,80,80,0.22);
  /* Status dark-theme invoice pills */
  --inv-dark-draft-bg:     rgba(107,114,128,0.15);
  --inv-dark-draft-fg:     #9ca3af;
  --inv-dark-draft-border: rgba(107,114,128,0.30);
  --inv-dark-estimate-bg:     rgba(124,58,237,0.15);
  --inv-dark-estimate-fg:     #a78bfa;
  --inv-dark-estimate-border: rgba(124,58,237,0.30);
  --inv-dark-invoiced-bg:     rgba(3,105,161,0.15);
  --inv-dark-invoiced-fg:     #7dd3fc;
  --inv-dark-invoiced-border: rgba(3,105,161,0.30);
  --inv-dark-sent-bg:         rgba(2,132,199,0.15);
  --inv-dark-sent-fg:         #7dd3fc;
  --inv-dark-sent-border:     rgba(2,132,199,0.30);
  --inv-dark-deposit-bg:      rgba(217,119,6,0.15);
  --inv-dark-deposit-fg:      #fcd34d;
  --inv-dark-deposit-border:  rgba(217,119,6,0.30);
  --inv-dark-paid-bg:         rgba(5,150,105,0.15);
  --inv-dark-paid-fg:         #6ee7b7;
  --inv-dark-paid-border:     rgba(5,150,105,0.30);
  --inv-dark-accepted-bg:     rgba(5,150,105,0.12);
  --inv-dark-accepted-fg:     #6ee7b7;
  --inv-dark-accepted-border: rgba(5,150,105,0.25);
  --inv-dark-cancelled-bg:    rgba(153,27,27,0.15);
  --inv-dark-cancelled-fg:    #fca5a5;
  --inv-dark-cancelled-border:rgba(153,27,27,0.30);
  --inv-dark-paused-bg:       rgba(154,52,18,0.15);
  --inv-dark-paused-fg:       #fed7aa;
  --inv-dark-paused-border:   rgba(154,52,18,0.30);
  /* Settings OK/Err messages */
  --settings-ok-bg:     rgba(5,150,105,0.10);
  --settings-ok-border: rgba(5,150,105,0.25);
  --settings-ok-fg:     #6ee7b7;
  --settings-err-bg:    rgba(220,38,38,0.10);
  --settings-err-border:rgba(220,38,38,0.25);
  --settings-err-fg:    #fca5a5;
  /* Cost button override bar */
  --cost-btn-a15:    rgba(234,88,12,0.15);
  --cost-btn-a40:    rgba(234,88,12,0.40);
  --cost-btn-fg:     #ea580c;
  /* Admin avatar / invite amber */
  --admin-invite-bg:     rgba(245,158,11,0.12);
  --admin-invite-border: rgba(245,158,11,0.25);
  --admin-invite-fg:     #fbbf24;
  --admin-badge-fg:      #f59e0b;
  --admin-badge-bg:      rgba(245,158,11,0.10);
  --admin-badge-border:  rgba(245,158,11,0.25);
  /* Material & bid type badges */
  --mat-cat-bg:       rgba(0,149,255,0.10);
  --mat-type-bg:      rgba(139,92,246,0.12);
  --mat-type-fg:      #a78bfa;
  --mat-del-border:   rgba(220,38,38,0.30);
  --mat-instock-bg:   rgba(5,150,105,0.12);
  --mat-outstock-bg:  rgba(220,38,38,0.10);
  /* Bid PDF teal label */
  --bid-teal-fg:      #0f766e;
  --bid-teal-bg:      rgba(15,118,110,0.08);
  --bid-teal-border:  rgba(15,118,110,0.30);
  --bid-teal-ring-hi: #99d6cf;
  /* Autosave label colors */
  --asl-unsaved-fg:   rgba(255,165,60,0.85);
  --asl-fresh-fg:     rgba(80,220,120,0.90);
  /* Add-slab mint hint */
  --slab-mint-a08:    rgba(44,95,46,0.08);
  --cutout-link-mint: rgba(74,143,77,0.25);
  /* Bid sidebar accent strip */
  --bid-sidebar-strip: #1a2744;
  /* Trial/Grace header pills use warning alpha */
  --grace-pill-bg:    rgba(245,158,11,0.10);
  --grace-pill-border:rgba(245,158,11,0.40);
  --trial-pill-bg:    rgba(0,149,255,0.08);
  --trial-pill-border:rgba(0,149,255,0.30);
  /* Header border-bottom accent */
  --hdr-accent-line:  rgba(0,149,255,0.50);
  --hdr-dropdown-shadow: 0 6px 20px rgba(0,0,0,0.50);
  /* Mobile-specific overlays */
  --mob-scrim-a30:    rgba(0,0,0,0.30);
  --mob-drawer-shadow-r: rgba(0,0,0,0.35);
  --mob-drawer-shadow-l: rgba(0,0,0,0.35);
  --mob-drawer-shadow-deep: rgba(0,0,0,0.45);
  --mob-tap-accent:   rgba(0,149,255,0.20);
  --mob-tap-accent-soft: rgba(0,149,255,0.18);
  --mob-tap-accent-strong: rgba(0,149,255,0.30);
  /* Tokenization pass stragglers */
  --pay-violet-a12-deep: rgba(124,58,237,0.12);
  --violet-a26-b:        rgba(168,85,247,0.26);
  --accent-cta-a10:      rgba(0,87,217,0.10);

  /* Edge profile swatches (leg-line) */
  --edge-prof-polished:   #1565c0;
  --edge-prof-eased:      #0277bd;
  --edge-prof-half-bull:  #00838f;
  --edge-prof-demi-bull:  #2e7d32;
  --edge-prof-full-bull:  #6a1b9a;
  --edge-prof-ogee:       #ad1457;
  --edge-prof-dupont:     #c62828;
  --edge-prof-cove-dupont:#e65100;
  --edge-prof-mitered:    #7b1fa2;
  --edge-prof-waterfall:  #00695c;
  --edge-prof-chiseled:   #4e342e;

  /* Deep hover shades */
  --btn-danger-hover:     #b71c1c;
  --btn-pricing-hover:    #a07809;
  --accent-bright:        #00b4ff;

  /* Fallback defaults (used as the 2nd arg in var(--x, #fallback)) */
  --fallback-error:       #c62828;
  --fallback-success:     #059669;
  --fallback-bg-dark1:    #1a1a2e;
  --fallback-bg-dark2:    #0d0d1a;
  --fallback-surface2:    #f1f5f9;
  --fallback-hover-bg:    #f0f2f8;

  /* Invoice light-theme status pill palette */
  --inv-lt-draft-bg:      #f3f4f6;
  --inv-lt-draft-fg:      #6b7280;
  --inv-lt-draft-border:  #e2e8f0;
  --inv-lt-draft-alt-bg:  #f1f5f9;
  --inv-lt-draft-alt-fg:  #64748b;
  --inv-lt-draft-alt-border: #cbd5e1;
  --inv-lt-estimate-bg:   #ede9fe;
  --inv-lt-invoiced-bg:   #dbeafe;
  --inv-lt-invoiced-fg:   #0369a1;
  --inv-lt-invoiced-border: #93c5fd;
  --inv-lt-sent-bg:       #bfdbfe;
  --inv-lt-sent-fg:       #0284c7;
  --inv-lt-sent-alt-fg:   #1d4ed8;
  --inv-lt-deposit-bg:    #fef3c7;
  --inv-lt-deposit-fg:    #d97706;
  --inv-lt-paid-bg:       #dcfce7;
  --inv-lt-paid-alt-fg:   #15803d;
  --inv-lt-accepted-bg:   #f0fdf4;
  --inv-lt-accepted-fg:   #065f46;
  --inv-lt-cancelled-bg:  #fee2e2;
  --inv-lt-cancelled-fg:  #991b1b;
  --inv-lt-paused-bg:     #fff7ed;
  --inv-lt-paused-fg:     #9a3412;

  /* CRM job status selects (light) */
  --crm-st-active-bg:     #e8f5e9;
  --crm-st-active-fg:     #2e7d32;
  --crm-st-complete-bg:   #e3f2fd;
  --crm-st-complete-fg:   #1565c0;
  --crm-st-onhold-bg:     #fff8e1;
  --crm-st-onhold-fg:     #f57f17;
  --crm-st-cancelled-bg:  #fce4ec;

  /* Quote / template panels */
  --quote-badge-num-fg:   #d8b4fe;
  --quote-cb-accent:      #a855f7;
  --qsp-title-fg:         #d8b4fe;
  --qsp-save-hover:       #9333ea;
  --qsp-panel-bg:         #150e2a;
  --tpl-save-panel-bg:    #0f1a14;
  --tpl-panel-title-fg:   #86efac;
  --tpl-panel-save-bg:    #166534;
  --tpl-panel-save-hover: #15803d;

  /* Invoice hover / view-btn */
  --inv-copy-hover:       #0d5f58;
  --inv-view-btn-bg:      #f0faf9;
  --inv-view-btn-hover:   #ccfbf1;

  /* Miscellaneous tokens */
  --pay-flat-fg:          #10b981;
  --pay-validate-ok-fg:   #10b981;
  --nest-auto-fg:         #22c55e;
  --annot-green:          #10b981;
  --onboarding-accepted:  #34d399;
  --resume-label-fg:      #60b8ff;
  --override-active-border:#dc2626;
  --hero-gradient-bg:     #1e293b;
  --crm-accepted-badge-bg:#f0fdf4;
  --crm-accepted-badge-fg:#065f46;
  --bidhint-indigo-fg:    #4338ca;
  --bid-overlay-bg:       #1a1b26;
  --surface-222:          #222;
  --email-type-active-bg: #0369a1;

  /* Mobile FAB palette (deep-dark fills with accent-hued outlines + soft fg) */
  --fab-neutral-bg:       #111821;
  --fab-neutral-border:   #394655;
  --fab-neutral-fg:       #e8ecf1;
  --fab-save-bg:          #0f2e1c;
  --fab-save-border:      #22c55e;
  --fab-save-fg:          #bff5c6;
  --fab-bid-border:       #33a9ff;
  --fab-bid-gradient-b:   #0077cc;
  --fab-slabs-bg:         #0f2b2f;
  --fab-slabs-border:     #22d3a6;
  --fab-slabs-fg:         #bff5e4;
  --fab-3d-bg:            #261947;
  --fab-3d-fg:            #e4d9ff;
  --fab-qa-bg:            #2a1d0a;
  --fab-qa-fg:            #fce8bb;
  --fab-layers-bg:        #1a0f2e;
  --fab-canvas-bg:        #0a1628;
  --fab-canvas-fg:        #cfe6ff;
  --fab-fullscreen-bg:    #14202b;
  --fab-fullscreen-border:#6b7a8c;
  --fab-fullscreen-fg:    #d6dde6;
  --fab-fullscreen-svg:   #9aa6b6;
  --fab-delete-fg:        #f87171;
  --asm3d-tb-active:      #10b981;

  /* Fonts */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', monospace;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:         #0f1117;
  --surface:    #1a1d27;
  --panel:      #141620;
  --raised:     #252836;
  --hover-bg:   rgba(255,255,255,0.04);

  --border:     rgba(255,255,255,0.1);
  --border-dk:  rgba(255,255,255,0.18);

  --text:       #e2e8f0;
  --text2:      #b0b8c8;
  --muted:      #64748b;

  --accent:     #38a3ff;
  --accent2:    #60b8ff;
  --accent-soft: rgba(56,163,255,0.12);

  --success:    #10b981;
  --success-soft: rgba(16,185,129,0.12);
  --success-border: rgba(16,185,129,0.22);
  --success-border-strong: rgba(16,185,129,0.3);
  --error:      #f87171;
  --error-soft: rgba(248,113,113,0.12);
  --error-border: rgba(248,113,113,0.35);
  --error-border-soft: rgba(248,113,113,0.25);
  --warning:    #fbbf24;
  --warning-soft: rgba(251,191,36,0.12);
  --warning-bg-soft: rgba(251,191,36,0.1);
  --warning-border: rgba(251,191,36,0.4);
  --warning-border-strong: rgba(251,191,36,0.35);
  --warning-border-soft: rgba(251,191,36,0.28);
  --error-border-strong: rgba(248,113,113,0.5);

  /* Accent (extra) */
  --accent-bg-soft:   rgba(56,163,255,0.14);
  --accent-bg-soft-2: rgba(56,163,255,0.18);
  --accent-bg-tint:   rgba(56,163,255,0.08);
  --accent-bg-input:  rgba(56,163,255,0.06);
  --accent-border:    rgba(56,163,255,0.3);
  --accent-border-strong: rgba(56,163,255,0.4);
  --accent-glow:      0 0 30px rgba(56,163,255,0.15);
  --accent-focus-ring: 0 0 0 3px rgba(56,163,255,0.18);
  --error-text-on-soft: #fca5a5;
  --warning-text-on-soft: #fcd34d;
  --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.3);

  /* Dashboard revenue chart tokens (dark) */
  --chart-axis:         rgba(255,255,255,0.1);
  --chart-tooltip-bg:   #252836;
  --chart-tooltip-fg:   #e2e8f0;

  /* Toast / sd-modal tokens (dark) */
  --toast-shadow:    0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
  --toast-ok-bg:     #10b981;
  --toast-ok-fg:     #fff;
  --toast-err-bg:    #ef4444;
  --toast-err-fg:    #fff;
  --toast-warn-bg:   #f59e0b;
  --toast-warn-fg:   #1a1d27;
  --toast-info-bg:   #0095ff;
  --toast-info-fg:   #fff;
  --sd-modal-bg:        #1a1d27;
  --sd-modal-border:    rgba(255,255,255,0.08);
  --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.5);
  --sd-modal-text:      #e2e8f0;
  --sd-modal-title:     #fff;
  --sd-modal-msg:       #a1a5b7;
  --sd-cancel-fg:       #94a3b8;
  --sd-cancel-border:   rgba(255,255,255,0.12);
  --sd-cancel-hover-bg: rgba(255,255,255,0.05);
  --sd-primary-hover:   #0080e0;
  --sd-danger-bg:       #ef4444;
  --sd-danger-hover:    #dc2626;
  --sd-form-input-bg:   #0f1218;
  --sd-pill-border:     rgba(255,255,255,0.14);
  --sd-pill-fg:         #cbd5e1;
  --sd-success-fg:      #10b981;
  --sd-code-fg:         #60a5fa;

  /* Super-admin specific (dark) */
  --sa-err-bg:            #0f1117;
  --sa-err-fg:            #fff;
  --sa-err-sub:           #8896a8;
  --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #8b5cf6);
  --sa-badge-fg:          #fff;
  --sa-violet:            #a78bfa;
  --sa-violet-bg:         rgba(167,139,250,0.18);
  --sa-violet-border:     rgba(167,139,250,0.4);
  --sa-violet-soft:       rgba(167,139,250,0.08);
  --sa-preview-bg:        #22252e;
  --sa-preview-email-bg:  #1a1d27;
  --sa-ws-danger-bg:      rgba(248,113,113,0.14);
  --sa-ws-danger-fg:      #fca5a5;
  --sa-ws-danger-border:  rgba(248,113,113,0.4);
  --sa-ws-danger-outline: rgba(248,113,113,0.5);
  --sa-ws-danger-inset:   rgba(248,113,113,0.2);
  --sa-ticket-new-bg:     rgba(248,113,113,0.2);
  --sa-ticket-replied-bg: rgba(251,191,36,0.2);
  --sa-ticket-closed-bg:  rgba(16,185,129,0.2);
  --sa-ticket-num-bg:     rgba(56,163,255,0.18);
  --sa-code-bg-opaque:    rgba(0,0,0,0.35);
  --sa-flash-bg:          rgba(56,163,255,0.3);
  --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.4);
  --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35);
  --sa-storage-heavy-bg:  rgba(251,191,36,0.1);
  --sa-storage-warn-bg:   rgba(251,191,36,0.12);
  --sa-storage-warn-border: rgba(251,191,36,0.35);
  --sa-storage-expired-fg: #f87171;
  --sa-storage-saved-fg:  #4ade80;
  --sa-storage-purge-bg:  rgba(248,113,113,0.1);
  --sa-storage-purge-border: rgba(248,113,113,0.3);
  --sa-storage-purge-h4:  #f87171;
  --sa-storage-err-bg:    rgba(248,113,113,0.12);
  --sa-storage-err-border: rgba(248,113,113,0.35);
  --sa-storage-err-fg:    #fca5a5;

  /* Auth violet (plan team badge) */
  --auth-violet:           #a78bfa;
  --auth-violet-fg:        #c4b5fd;
  --auth-violet-soft:      rgba(167,139,250,0.08);
  --auth-violet-bg-soft:   rgba(167,139,250,0.2);
  --auth-violet-border:    rgba(167,139,250,0.4);

  /* Shadows (extra) */
  --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.7);

  --canvas-bg:       #1a1d27;
  --canvas-grid:     rgba(100,180,100,0.1);
  --canvas-grid-mid: rgba(255,255,255,0.05);
  --canvas-grid-fine: rgba(255,255,255,0.02);
  --canvas-ruler-bg: #1e2028;
  --canvas-ruler-alt: #252836;
  --canvas-ruler-corner: #0d0e14;

  --hdr-bg:     #0a0b10;
  --hdr-text:   rgba(255,255,255,0.88);
  --hdr-muted:  rgba(255,255,255,0.45);
  --hdr-border: rgba(255,255,255,0.06);
  --hdr-hover:  rgba(255,255,255,0.1);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.7);

  --overlay:    rgba(0,0,0,0.65);
  --overlay-strong: rgba(0,0,0,0.75);

  --danger-bg:        rgba(248,113,113,0.12);
  --danger-bg-hover:  rgba(248,113,113,0.2);
  --danger-border:    rgba(248,113,113,0.3);

  /* Solid-button foreground stays white in dark mode — accent is bright blue */
  --on-accent: #fff;

  /* Status identity tokens — these are semantic identity, not themed.
     Same values across light/dark so pills keep their recognizable color. */
  --status-draft-bg:     rgba(148,163,184,0.12);
  --status-draft-fg:     #94a3b8;
  --status-estimate-bg:  rgba(245,158,11,0.15);
  --status-estimate-fg:  #fbbf24;
  --status-accepted-bg:  rgba(16,185,129,0.15);
  --status-accepted-fg:  #34d399;
  --status-invoiced-bg:  rgba(59,130,246,0.15);
  --status-invoiced-fg:  #93c5fd;
  --status-invsent-bg:   rgba(6,182,212,0.15);
  --status-invsent-fg:   #67e8f9;
  --status-deposit-bg:   rgba(217,119,6,0.18);
  --status-deposit-fg:   #fcd34d;
  --status-complete-bg:  rgba(139,92,246,0.15);
  --status-complete-fg:  #c4b5fd;
  --status-onhold-bg:    rgba(148,163,184,0.1);
  --status-onhold-fg:    #94a3b8;
  --status-followup-bg:  rgba(244,63,94,0.14);
  --status-followup-fg:  #fb7185;
  --status-cancelled-bg: rgba(239,68,68,0.12);
  --status-cancelled-fg: #f87171;
  --status-custom-bg:    rgba(139,92,246,0.12);
  --status-custom-fg:    #a78bfa;
  --status-paid-bg:      rgba(16,185,129,0.2);
  --status-paid-fg:      #6ee7b7;

  --status-draft-border:     rgba(148,163,184,0.3);
  --status-estimate-border:  rgba(245,158,11,0.4);
  --status-accepted-border:  rgba(16,185,129,0.4);
  --status-invoiced-border:  rgba(59,130,246,0.4);
  --status-invsent-border:   rgba(6,182,212,0.4);
  --status-deposit-border:   rgba(217,119,6,0.45);
  --status-paid-border:      rgba(16,185,129,0.45);
  --status-onhold-border:    rgba(148,163,184,0.2);
  --status-followup-border:  rgba(244,63,94,0.3);
  --status-cancelled-border: rgba(239,68,68,0.3);
  --status-custom-border:    rgba(100,116,139,0.25);

  --kanban-draft:     #94a3b8;
  --kanban-estimate:  #f59e0b;
  --kanban-accepted:  #10b981;
  --kanban-invoiced:  #3b82f6;
  --kanban-invsent:   #06b6d4;
  --kanban-deposit:   #d97706;
  --kanban-complete:  #8b5cf6;
  --kanban-onhold:    #94a3b8;
  --kanban-followup:  #f43f5e;
  --kanban-cancelled: #ef4444;
  --kanban-custom:    #8b5cf6;

  --priority-low-bg:     rgba(148,163,184,0.12);
  --priority-low-fg:     #94a3b8;
  --priority-medium-bg:  rgba(245,158,11,0.15);
  --priority-medium-fg:  #fbbf24;
  --priority-high-bg:    rgba(239,68,68,0.15);
  --priority-high-fg:    #f87171;

  --badge-repeat-bg:     rgba(139,92,246,0.18);
  --badge-repeat-fg:     #c4b5fd;
  --badge-archive-bg:    rgba(148,163,184,0.18);
  --badge-archive-fg:    #94a3b8;
  --badge-archive-toggle-bg: rgba(100,116,139,0.2);

  --pro-gradient-start:  #38a3ff;
  --pro-gradient-end:    #6366f1;
  --free-banner-mix:     rgba(99,102,241,0.1);
  --upgrade-modal-bg:    #1e2538;
  --upgrade-modal-backdrop: rgba(0,0,0,0.6);
  --upgrade-modal-shadow: 0 20px 60px rgba(0,0,0,0.7);

  /* ── Component semantic token dark overrides ── */
  /* Black overlays keep same base but modal scrims are darker in dark theme */
  --black-a02:  rgba(0,0,0,0.02);
  --black-a03:  rgba(0,0,0,0.03);
  --black-a04:  rgba(0,0,0,0.04);
  --black-a05:  rgba(0,0,0,0.05);
  --black-a06:  rgba(0,0,0,0.06);
  --black-a08:  rgba(0,0,0,0.08);
  --black-a10:  rgba(0,0,0,0.10);
  --black-a12:  rgba(0,0,0,0.12);
  --black-a15:  rgba(0,0,0,0.15);
  --black-a18:  rgba(0,0,0,0.18);
  --black-a25:  rgba(0,0,0,0.25);
  --black-a30:  rgba(0,0,0,0.30);
  --black-a35:  rgba(0,0,0,0.35);
  --black-a40:  rgba(0,0,0,0.40);
  --black-a42:  rgba(0,0,0,0.42);
  --black-a45:  rgba(0,0,0,0.45);
  --black-a50:  rgba(0,0,0,0.50);
  --black-a55:  rgba(0,0,0,0.55);
  --black-a60:  rgba(0,0,0,0.60);
  --black-a65:  rgba(0,0,0,0.65);
  --black-a70:  rgba(0,0,0,0.70);
  --black-a72:  rgba(0,0,0,0.72);
  --black-a80:  rgba(0,0,0,0.80);
  --black-a92:  rgba(10,14,24,0.92);
  --white-a03:  rgba(255,255,255,0.03);
  --white-a06:  rgba(255,255,255,0.06);
  --white-a08:  rgba(255,255,255,0.08);
  --white-a10:  rgba(255,255,255,0.10);
  --white-a12:  rgba(255,255,255,0.12);
  --white-a18:  rgba(255,255,255,0.18);
  --white-a20:  rgba(255,255,255,0.20);
  --white-a28:  rgba(255,255,255,0.28);
  --white-a35:  rgba(255,255,255,0.35);
  --white-a40:  rgba(255,255,255,0.40);
  --white-a45:  rgba(255,255,255,0.45);
  --white-a50:  rgba(255,255,255,0.50);
  --white-a55:  rgba(255,255,255,0.55);
  --white-a70:  rgba(255,255,255,0.70);
  --white-a80:  rgba(255,255,255,0.80);
  --white-a85:  rgba(255,255,255,0.85);
  --white-a90:  rgba(255,255,255,0.90);
  --white-a92:  rgba(255,255,255,0.92);
  --accent-a04: rgba(0,149,255,0.04);
  --accent-a05: rgba(0,149,255,0.05);
  --accent-a06: rgba(0,149,255,0.06);
  --accent-a07: rgba(0,149,255,0.07);
  --accent-a08: rgba(0,149,255,0.08);
  --accent-a10: rgba(0,149,255,0.10);
  --accent-a12: rgba(0,149,255,0.12);
  --accent-a13: rgba(0,149,255,0.13);
  --accent-a14: rgba(0,149,255,0.14);
  --accent-a15: rgba(0,149,255,0.15);
  --accent-a16: rgba(0,149,255,0.16);
  --accent-a18: rgba(0,149,255,0.18);
  --accent-a20: rgba(0,149,255,0.20);
  --accent-a22: rgba(0,149,255,0.22);
  --accent-a25: rgba(0,149,255,0.25);
  --accent-a28: rgba(0,149,255,0.28);
  --accent-a30: rgba(0,149,255,0.30);
  --accent-a32: rgba(0,149,255,0.32);
  --accent-a35: rgba(0,149,255,0.35);
  --accent-a40: rgba(0,149,255,0.40);
  --accent-a45: rgba(0,149,255,0.45);
  --accent-a50: rgba(0,149,255,0.50);
  --accent-a55: rgba(0,149,255,0.55);
  --accent-a85: rgba(0,149,255,0.85);
  --accent-alt: #0080dd;
  --error-a04:  rgba(198,40,40,0.04);
  --error-a05:  rgba(198,40,40,0.05);
  --error-a06:  rgba(198,40,40,0.06);
  --error-a08:  rgba(198,40,40,0.08);
  --error-a10:  rgba(198,40,40,0.10);
  --error-a12:  rgba(198,40,40,0.12);
  --error-a18:  rgba(198,40,40,0.18);
  --error-a20:  rgba(198,40,40,0.20);
  --error-a30:  rgba(198,40,40,0.30);
  --error-a35:  rgba(198,40,40,0.35);
  --error-a40:  rgba(198,40,40,0.40);
  --danger-a07: rgba(220,38,38,0.07);
  --danger-a10: rgba(220,38,38,0.10);
  --danger-a25: rgba(220,38,38,0.25);
  --danger-a30: rgba(220,38,38,0.30);
  --success-a07: rgba(5,150,105,0.07);
  --success-a08: rgba(5,150,105,0.08);
  --success-a10: rgba(5,150,105,0.10);
  --success-a12: rgba(5,150,105,0.12);
  --success-a15: rgba(5,150,105,0.15);
  --success-a25: rgba(5,150,105,0.25);
  --success-a35: rgba(5,150,105,0.35);
  --success-a40: rgba(5,150,105,0.40);
  --success-a50: rgba(5,150,105,0.50);
  --success-a60: rgba(5,150,105,0.60);
  --warning-a07: rgba(245,158,11,0.07);
  --warning-a10: rgba(245,158,11,0.10);
  --warning-a12: rgba(245,158,11,0.12);
  --warning-a25: rgba(245,158,11,0.25);
  --warning-a40: rgba(245,158,11,0.40);
  --red2-a06:    rgba(239,68,68,0.06);
  --red2-a10:    rgba(239,68,68,0.10);
  --red2-a15:    rgba(239,68,68,0.15);
  --red2-a18:    rgba(239,68,68,0.18);
  --red2-a20:    rgba(239,68,68,0.20);
  --red2-a30:    rgba(239,68,68,0.30);
  --red2-a35:    rgba(239,68,68,0.35);
  --red2-a45:    rgba(239,68,68,0.45);
  --red2-a55:    rgba(239,68,68,0.55);
  --red2-a60:    rgba(239,68,68,0.60);
  --violet-a14:  rgba(168,85,247,0.14);
  --violet-a18:  rgba(168,85,247,0.18);
  --violet-a26:  rgba(168,85,247,0.26);
  --violet-a30:  rgba(168,85,247,0.30);
  --violet-a35:  rgba(168,85,247,0.35);
  --violet-a50:  rgba(168,85,247,0.50);
  --violet-a60:  rgba(168,85,247,0.60);
  --violet-a80:  rgba(168,85,247,0.80);
  --teal-a08:    rgba(15,118,110,0.08);
  --teal-a10:    rgba(15,118,110,0.10);
  --teal-a12:    rgba(15,118,110,0.12);
  --teal-a14:    rgba(15,118,110,0.14);
  --teal-a28:    rgba(15,118,110,0.28);
  --teal-a30:    rgba(15,118,110,0.30);
  --teal-a50:    rgba(15,118,110,0.50);
  --indigo-a08:  rgba(99,102,241,0.08);
  --indigo-a15:  rgba(99,102,241,0.15);
  --indigo-a16:  rgba(99,102,241,0.16);
  --indigo-a30:  rgba(99,102,241,0.30);
  --indigo-a50:  rgba(99,102,241,0.50);
  --bid-gold-a08: rgba(184,134,11,0.08);
  --bid-gold-a12: rgba(184,134,11,0.12);
  --bid-gold-a30: rgba(184,134,11,0.30);
  --bid-gold-a50: rgba(234,179,8,0.10);
  --bid-gold-border-a40: rgba(180,83,9,0.40);
  --accent-deep-a08:  rgba(21,101,192,0.08);
  --accent-deep-a12:  rgba(21,101,192,0.12);
  --accent-deep-a20:  rgba(21,101,192,0.20);
  --accent-cta-a20:   rgba(0,87,217,0.12);
  --cut-orange-a12:   rgba(230,81,0,0.12);
  --cut-sink-a15:     rgba(0,120,255,0.15);
  --cut-cooktop-a15:  rgba(255,80,0,0.15);
  --cut-faucet-a15:   rgba(180,140,0,0.15);
  --cut-faucet-a180-a30: rgba(180,140,0,0.30);
  --cut-custom-a15:   rgba(130,0,200,0.15);
  --cut-sink-fg:      #0070ee;
  --cut-cooktop-fg:   #d44000;
  --cut-faucet-fg:    #8a6a00;
  --cut-custom-fg:    #7800cc;
  --cut-link-a07:     rgba(0,128,221,0.07);
  --cut-link-a13:     rgba(0,128,221,0.13);
  --cut-link-a20:     rgba(0,128,221,0.20);
  --cut-link-a30:     rgba(0,128,221,0.30);
  --cut-link-fg:      #0080dd;
  --cut-lock-a12:     rgba(255,140,0,0.12);
  --cut-lock-a22:     rgba(255,140,0,0.22);
  --cut-lock-a50:     rgba(255,165,0,0.50);
  --cut-lock-a70:     rgba(255,140,0,0.70);
  --cut-lock-fg:      #cc7700;
  --miter-a12:        rgba(123,31,162,0.12);
  --ref-a12:          rgba(85,85,85,0.12);
  --lam-a12:          rgba(200,133,10,0.12);
  --lam-a15:          rgba(200,133,10,0.15);
  --seam-conn-bg:     rgba(198,40,40,0.06);
  --seam-conn-border: rgba(198,40,40,0.18);
  --seam-ok-fg:       #16a34a;
  --seam-ok-bg:       rgba(22,163,74,0.08);
  --seam-ok-border:   rgba(22,163,74,0.30);
  --seam-err-fg:      #ef4444;
  --seam-reset-fg:    #b45309;
  --seam-cutout-link: var(--cut-link-a07);
  --cutout-link-row-border: var(--cut-link-a20);
  --asm3d-toolbar-bg:  rgba(15,15,28,0.85);
  --asm3d-y-a06:       rgba(34,197,94,0.06);
  --asm3d-y-a18:       rgba(34,197,94,0.18);
  --asm3d-y-a30:       rgba(34,197,94,0.30);
  --asm3d-y-a35:       rgba(34,197,94,0.35);
  --asm3d-y-a60:       rgba(34,197,94,0.60);
  --asm3d-y-lbl:       rgba(134,239,172,0.85);
  --asm3d-y-icon:      rgba(187,247,208,0.95);
  --asm3d-x-a06:       rgba(239,68,68,0.06);
  --asm3d-x-a18:       rgba(239,68,68,0.18);
  --asm3d-x-a30:       rgba(239,68,68,0.30);
  --asm3d-x-a35:       rgba(239,68,68,0.35);
  --asm3d-x-a60:       rgba(239,68,68,0.60);
  --asm3d-x-lbl:       rgba(252,165,165,0.85);
  --asm3d-x-icon:      rgba(254,202,202,0.95);
  --asm3d-z-a06:       rgba(59,130,246,0.06);
  --asm3d-z-a18:       rgba(59,130,246,0.18);
  --asm3d-z-a30:       rgba(59,130,246,0.30);
  --asm3d-z-a35:       rgba(59,130,246,0.35);
  --asm3d-z-a60:       rgba(59,130,246,0.60);
  --asm3d-z-lbl:       rgba(147,197,253,0.85);
  --asm3d-z-icon:      rgba(191,219,254,0.95);
  --asm3d-cut-label:   rgba(124,58,237,0.40);
  --quote-card-sel-bg: #261f3a;
  --crm-hdr-row-bg:    rgba(255,255,255,0.04);
  --pay-violet-a06:    rgba(139,92,246,0.06);
  --pay-violet-a08:    rgba(139,92,246,0.08);
  --pay-violet-a12:    rgba(139,92,246,0.12);
  --pay-violet-fg:     #8b5cf6;
  --pay-violet-fg2:    #7c3aed;
  --pay-violet-fg3:    #a78bfa;
  --pay-violet-border: #c4b5fd;
  --signout-fg:        rgba(255,100,100,0.85);
  --signout-fg-muted:  rgba(220,100,100,0.80);
  --quotes-del-fg:     rgba(255,100,100,0.80);
  --quotes-del-strong: #ff6b6b;
  --quotes-del-a10:    rgba(255,80,80,0.10);
  --quotes-del-a22:    rgba(255,80,80,0.22);
  --quotes-del-a25:    rgba(255,80,80,0.25);
  --quotes-del-border: rgba(255,80,80,0.22);
  --inv-dark-draft-bg:     rgba(107,114,128,0.15);
  --inv-dark-draft-fg:     #9ca3af;
  --inv-dark-draft-border: rgba(107,114,128,0.30);
  --inv-dark-estimate-bg:     rgba(124,58,237,0.15);
  --inv-dark-estimate-fg:     #a78bfa;
  --inv-dark-estimate-border: rgba(124,58,237,0.30);
  --inv-dark-invoiced-bg:     rgba(3,105,161,0.15);
  --inv-dark-invoiced-fg:     #7dd3fc;
  --inv-dark-invoiced-border: rgba(3,105,161,0.30);
  --inv-dark-sent-bg:         rgba(2,132,199,0.15);
  --inv-dark-sent-fg:         #7dd3fc;
  --inv-dark-sent-border:     rgba(2,132,199,0.30);
  --inv-dark-deposit-bg:      rgba(217,119,6,0.15);
  --inv-dark-deposit-fg:      #fcd34d;
  --inv-dark-deposit-border:  rgba(217,119,6,0.30);
  --inv-dark-paid-bg:         rgba(5,150,105,0.15);
  --inv-dark-paid-fg:         #6ee7b7;
  --inv-dark-paid-border:     rgba(5,150,105,0.30);
  --inv-dark-accepted-bg:     rgba(5,150,105,0.12);
  --inv-dark-accepted-fg:     #6ee7b7;
  --inv-dark-accepted-border: rgba(5,150,105,0.25);
  --inv-dark-cancelled-bg:    rgba(153,27,27,0.15);
  --inv-dark-cancelled-fg:    #fca5a5;
  --inv-dark-cancelled-border:rgba(153,27,27,0.30);
  --inv-dark-paused-bg:       rgba(154,52,18,0.15);
  --inv-dark-paused-fg:       #fed7aa;
  --inv-dark-paused-border:   rgba(154,52,18,0.30);
  --settings-ok-bg:     rgba(5,150,105,0.10);
  --settings-ok-border: rgba(5,150,105,0.25);
  --settings-ok-fg:     #6ee7b7;
  --settings-err-bg:    rgba(220,38,38,0.10);
  --settings-err-border:rgba(220,38,38,0.25);
  --settings-err-fg:    #fca5a5;
  --cost-btn-a15:    rgba(234,88,12,0.15);
  --cost-btn-a40:    rgba(234,88,12,0.40);
  --cost-btn-fg:     #ea580c;
  --admin-invite-bg:     rgba(245,158,11,0.12);
  --admin-invite-border: rgba(245,158,11,0.25);
  --admin-invite-fg:     #fbbf24;
  --admin-badge-fg:      #f59e0b;
  --admin-badge-bg:      rgba(245,158,11,0.10);
  --admin-badge-border:  rgba(245,158,11,0.25);
  --mat-cat-bg:       rgba(0,149,255,0.10);
  --mat-type-bg:      rgba(139,92,246,0.12);
  --mat-type-fg:      #a78bfa;
  --mat-del-border:   rgba(220,38,38,0.30);
  --mat-instock-bg:   rgba(5,150,105,0.12);
  --mat-outstock-bg:  rgba(220,38,38,0.10);
  --bid-teal-fg:      #0f766e;
  --bid-teal-bg:      rgba(15,118,110,0.08);
  --bid-teal-border:  rgba(15,118,110,0.30);
  --bid-teal-ring-hi: #99d6cf;
  --asl-unsaved-fg:   rgba(255,165,60,0.85);
  --asl-fresh-fg:     rgba(80,220,120,0.90);
  --slab-mint-a08:    rgba(44,95,46,0.08);
  --cutout-link-mint: rgba(74,143,77,0.25);
  --bid-sidebar-strip: #1a2744;
  --grace-pill-bg:    rgba(245,158,11,0.10);
  --grace-pill-border:rgba(245,158,11,0.40);
  --trial-pill-bg:    rgba(0,149,255,0.08);
  --trial-pill-border:rgba(0,149,255,0.30);
  --hdr-accent-line:  rgba(0,149,255,0.50);
  --hdr-dropdown-shadow: 0 6px 20px rgba(0,0,0,0.50);
  --mob-scrim-a30:    rgba(0,0,0,0.30);
  --mob-drawer-shadow-r: rgba(0,0,0,0.35);
  --mob-drawer-shadow-l: rgba(0,0,0,0.35);
  --mob-drawer-shadow-deep: rgba(0,0,0,0.45);
  --mob-tap-accent:   rgba(0,149,255,0.20);
  --mob-tap-accent-soft: rgba(0,149,255,0.18);
  --mob-tap-accent-strong: rgba(0,149,255,0.30);
  --pay-violet-a12-deep: rgba(124,58,237,0.12);
  --violet-a26-b:        rgba(168,85,247,0.26);
  --accent-cta-a10:      rgba(0,87,217,0.10);

  /* Edge profile swatches — identity, unchanged across themes */
  --edge-prof-polished:   #1565c0;
  --edge-prof-eased:      #0277bd;
  --edge-prof-half-bull:  #00838f;
  --edge-prof-demi-bull:  #2e7d32;
  --edge-prof-full-bull:  #6a1b9a;
  --edge-prof-ogee:       #ad1457;
  --edge-prof-dupont:     #c62828;
  --edge-prof-cove-dupont:#e65100;
  --edge-prof-mitered:    #7b1fa2;
  --edge-prof-waterfall:  #00695c;
  --edge-prof-chiseled:   #4e342e;
  --btn-danger-hover:     #b71c1c;
  --btn-pricing-hover:    #a07809;
  --accent-bright:        #00b4ff;
  --fallback-error:       #c62828;
  --fallback-success:     #059669;
  --fallback-bg-dark1:    #1a1a2e;
  --fallback-bg-dark2:    #0d0d1a;
  --fallback-surface2:    #1a1d27;
  --fallback-hover-bg:    #252836;
  --inv-lt-draft-bg:      #f3f4f6;
  --inv-lt-draft-fg:      #6b7280;
  --inv-lt-draft-border:  #e2e8f0;
  --inv-lt-draft-alt-bg:  #f1f5f9;
  --inv-lt-draft-alt-fg:  #64748b;
  --inv-lt-draft-alt-border: #cbd5e1;
  --inv-lt-estimate-bg:   #ede9fe;
  --inv-lt-invoiced-bg:   #dbeafe;
  --inv-lt-invoiced-fg:   #0369a1;
  --inv-lt-invoiced-border: #93c5fd;
  --inv-lt-sent-bg:       #bfdbfe;
  --inv-lt-sent-fg:       #0284c7;
  --inv-lt-sent-alt-fg:   #1d4ed8;
  --inv-lt-deposit-bg:    #fef3c7;
  --inv-lt-deposit-fg:    #d97706;
  --inv-lt-paid-bg:       #dcfce7;
  --inv-lt-paid-alt-fg:   #15803d;
  --inv-lt-accepted-bg:   #f0fdf4;
  --inv-lt-accepted-fg:   #065f46;
  --inv-lt-cancelled-bg:  #fee2e2;
  --inv-lt-cancelled-fg:  #991b1b;
  --inv-lt-paused-bg:     #fff7ed;
  --inv-lt-paused-fg:     #9a3412;
  --crm-st-active-bg:     #e8f5e9;
  --crm-st-active-fg:     #2e7d32;
  --crm-st-complete-bg:   #e3f2fd;
  --crm-st-complete-fg:   #1565c0;
  --crm-st-onhold-bg:     #fff8e1;
  --crm-st-onhold-fg:     #f57f17;
  --crm-st-cancelled-bg:  #fce4ec;
  --quote-badge-num-fg:   #d8b4fe;
  --quote-cb-accent:      #a855f7;
  --qsp-title-fg:         #d8b4fe;
  --qsp-save-hover:       #9333ea;
  --qsp-panel-bg:         #150e2a;
  --tpl-save-panel-bg:    #0f1a14;
  --tpl-panel-title-fg:   #86efac;
  --tpl-panel-save-bg:    #166534;
  --tpl-panel-save-hover: #15803d;
  --inv-copy-hover:       #0d5f58;
  --inv-view-btn-bg:      #f0faf9;
  --inv-view-btn-hover:   #ccfbf1;
  --pay-flat-fg:          #10b981;
  --pay-validate-ok-fg:   #10b981;
  --nest-auto-fg:         #22c55e;
  --annot-green:          #10b981;
  --onboarding-accepted:  #34d399;
  --resume-label-fg:      #60b8ff;
  --override-active-border:#dc2626;
  --hero-gradient-bg:     #1e293b;
  --crm-accepted-badge-bg:#f0fdf4;
  --crm-accepted-badge-fg:#065f46;
  --bidhint-indigo-fg:    #4338ca;
  --bid-overlay-bg:       #1a1b26;
  --surface-222:          #222;
  --email-type-active-bg: #0369a1;
  --fab-neutral-bg:       #111821;
  --fab-neutral-border:   #394655;
  --fab-neutral-fg:       #e8ecf1;
  --fab-save-bg:          #0f2e1c;
  --fab-save-border:      #22c55e;
  --fab-save-fg:          #bff5c6;
  --fab-bid-border:       #33a9ff;
  --fab-bid-gradient-b:   #0077cc;
  --fab-slabs-bg:         #0f2b2f;
  --fab-slabs-border:     #22d3a6;
  --fab-slabs-fg:         #bff5e4;
  --fab-3d-bg:            #261947;
  --fab-3d-fg:            #e4d9ff;
  --fab-qa-bg:            #2a1d0a;
  --fab-qa-fg:            #fce8bb;
  --fab-layers-bg:        #1a0f2e;
  --fab-canvas-bg:        #0a1628;
  --fab-canvas-fg:        #cfe6ff;
  --fab-fullscreen-bg:    #14202b;
  --fab-fullscreen-border:#6b7a8c;
  --fab-fullscreen-fg:    #d6dde6;
  --fab-fullscreen-svg:   #9aa6b6;
  --fab-delete-fg:        #f87171;
  --asm3d-tb-active:      #10b981;
}

/* Auto dark theme based on OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0f1117;
    --surface:    #1a1d27;
    --panel:      #141620;
    --raised:     #252836;
    --hover-bg:   rgba(255,255,255,0.04);
    --border:     rgba(255,255,255,0.1);
    --border-dk:  rgba(255,255,255,0.18);
    --text:       #e2e8f0;
    --text2:      #b0b8c8;
    --muted:      #64748b;
    --accent:     #38a3ff;
    --accent2:    #60b8ff;
    --accent-soft: rgba(56,163,255,0.12);
    --success:    #10b981;
    --success-soft: rgba(16,185,129,0.12);
    --success-border: rgba(16,185,129,0.22);
    --success-border-strong: rgba(16,185,129,0.3);
    --error:      #f87171;
    --error-soft: rgba(248,113,113,0.12);
    --error-border: rgba(248,113,113,0.35);
    --error-border-soft: rgba(248,113,113,0.25);
    --warning:    #fbbf24;
    --warning-soft: rgba(251,191,36,0.12);
    --warning-bg-soft: rgba(251,191,36,0.1);
    --warning-border: rgba(251,191,36,0.4);
    --warning-border-strong: rgba(251,191,36,0.35);
    --warning-border-soft: rgba(251,191,36,0.28);
    --error-border-strong: rgba(248,113,113,0.5);
    --accent-bg-soft:   rgba(56,163,255,0.14);
    --accent-bg-soft-2: rgba(56,163,255,0.18);
    --accent-bg-tint:   rgba(56,163,255,0.08);
    --accent-bg-input:  rgba(56,163,255,0.06);
    --accent-border:    rgba(56,163,255,0.3);
    --accent-border-strong: rgba(56,163,255,0.4);
    --accent-glow:      0 0 30px rgba(56,163,255,0.15);
    --accent-focus-ring: 0 0 0 3px rgba(56,163,255,0.18);
    --error-text-on-soft: #fca5a5;
    --warning-text-on-soft: #fcd34d;
    --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.3);
    --toast-shadow:    0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
    --toast-ok-bg:     #10b981;
    --toast-ok-fg:     #fff;
    --toast-err-bg:    #ef4444;
    --toast-err-fg:    #fff;
    --toast-warn-bg:   #f59e0b;
    --toast-warn-fg:   #1a1d27;
    --toast-info-bg:   #0095ff;
    --toast-info-fg:   #fff;
    --sd-modal-bg:        #1a1d27;
    --sd-modal-border:    rgba(255,255,255,0.08);
    --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.5);
    --sd-modal-text:      #e2e8f0;
    --sd-modal-title:     #fff;
    --sd-modal-msg:       #a1a5b7;
    --sd-cancel-fg:       #94a3b8;
    --sd-cancel-border:   rgba(255,255,255,0.12);
    --sd-cancel-hover-bg: rgba(255,255,255,0.05);
    --sd-primary-hover:   #0080e0;
    --sd-danger-bg:       #ef4444;
    --sd-danger-hover:    #dc2626;
    --sd-form-input-bg:   #0f1218;
    --sd-pill-border:     rgba(255,255,255,0.14);
    --sd-pill-fg:         #cbd5e1;
    --sd-success-fg:      #10b981;
    --sd-code-fg:         #60a5fa;
    --sa-err-bg:            #0f1117;
    --sa-err-fg:            #fff;
    --sa-err-sub:           #8896a8;
    --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #8b5cf6);
    --sa-badge-fg:          #fff;
    --sa-violet:            #a78bfa;
    --sa-violet-bg:         rgba(167,139,250,0.18);
    --sa-violet-border:     rgba(167,139,250,0.4);
    --sa-violet-soft:       rgba(167,139,250,0.08);
    --sa-preview-bg:        #22252e;
    --sa-preview-email-bg:  #1a1d27;
    --sa-ws-danger-bg:      rgba(248,113,113,0.14);
    --sa-ws-danger-fg:      #fca5a5;
    --sa-ws-danger-border:  rgba(248,113,113,0.4);
    --sa-ws-danger-outline: rgba(248,113,113,0.5);
    --sa-ws-danger-inset:   rgba(248,113,113,0.2);
    --sa-ticket-new-bg:     rgba(248,113,113,0.2);
    --sa-ticket-replied-bg: rgba(251,191,36,0.2);
    --sa-ticket-closed-bg:  rgba(16,185,129,0.2);
    --sa-ticket-num-bg:     rgba(56,163,255,0.18);
    --sa-code-bg-opaque:    rgba(0,0,0,0.35);
    --sa-flash-bg:          rgba(56,163,255,0.3);
    --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.4);
    --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35);
    --sa-storage-heavy-bg:  rgba(251,191,36,0.1);
    --sa-storage-warn-bg:   rgba(251,191,36,0.12);
    --sa-storage-warn-border: rgba(251,191,36,0.35);
    --sa-storage-expired-fg: #f87171;
    --sa-storage-saved-fg:  #4ade80;
    --sa-storage-purge-bg:  rgba(248,113,113,0.1);
    --sa-storage-purge-border: rgba(248,113,113,0.3);
    --sa-storage-purge-h4:  #f87171;
    --sa-storage-err-bg:    rgba(248,113,113,0.12);
    --sa-storage-err-border: rgba(248,113,113,0.35);
    --sa-storage-err-fg:    #fca5a5;
    --auth-violet:           #a78bfa;
    --auth-violet-fg:        #c4b5fd;
    --auth-violet-soft:      rgba(167,139,250,0.08);
    --auth-violet-bg-soft:   rgba(167,139,250,0.2);
    --auth-violet-border:    rgba(167,139,250,0.4);
    --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.7);
    --canvas-bg:       #1a1d27;
    --canvas-grid:     rgba(100,180,100,0.1);
    --canvas-grid-mid: rgba(255,255,255,0.05);
    --canvas-grid-fine: rgba(255,255,255,0.02);
    --canvas-ruler-bg: #1e2028;
    --canvas-ruler-alt: #252836;
    --canvas-ruler-corner: #0d0e14;
    --hdr-bg:     #0a0b10;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
    --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
    --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.7);
    --overlay:    rgba(0,0,0,0.65);
    --overlay-strong: rgba(0,0,0,0.75);
    --danger-bg:        rgba(248,113,113,0.12);
    --danger-bg-hover:  rgba(248,113,113,0.2);
    --danger-border:    rgba(248,113,113,0.3);
  }
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--sans); }

/* ── SCROLLBARS ── */
/* Hide number input spinners */
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; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-sm); }

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
header {
  background:var(--hdr-bg);
  display:flex; flex-direction:column; flex-shrink:0;
  box-shadow:0 2px 14px var(--black-a50);
  border-bottom:2px solid var(--accent-a50);
}

/* ── Row 1: Global nav bar ──────────────────────────────── */
.hrow-1 {
  display:flex; align-items:center; gap:2px;
  padding:0 12px; height:34px; flex-shrink:0;
  background:var(--surface);
  border-bottom:1px solid var(--border-dk);
}
.h-brand {
  font-weight:800; font-size:16px; color:var(--text); letter-spacing:.3px;
  white-space:nowrap; line-height:1; text-decoration:none;
  margin-right:4px; flex-shrink:0;
}
.h-brand span { color:var(--accent); font-weight:400; }
.h-navlink {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-sm); font-size:12px; font-weight:500;
  color:var(--muted); background:none; border:none; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:color 0.15s, background 0.15s;
  font-family:inherit;
}
.h-navlink:hover { color:var(--text); background:var(--hover-bg); }
.h-navlink-active, .h-navlink.active { color:var(--accent) !important; background:var(--accent-soft) !important; font-weight:600; }
.h-navlink svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.h-nav-right { margin-left:auto; display:flex; align-items:center; gap:3px; }

/* Workspace + plan pill — always visible in header */
.h-ws-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:600; color:var(--text2);
  background:var(--raised);
  border:1px solid var(--border);
  text-decoration:none;
  transition:border-color .15s, background .15s;
  max-width:260px;
}
.h-ws-pill:hover { border-color:var(--accent); color:var(--text); }
.h-ws-name { color:var(--text); font-weight:700; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-ws-sep { color:var(--muted); }
.h-ws-plan { color:var(--text2); }
.h-ws-pill--free  .h-ws-plan { color:var(--muted); }
.h-ws-pill--trial { background:var(--accent-a08); border-color:var(--accent-a30); }
.h-ws-pill--trial .h-ws-plan { color:var(--accent); }
.h-ws-pill--grace { background:var(--warning-a10); border-color:var(--warning-a40); }
.h-ws-pill--grace .h-ws-plan { color:var(--admin-badge-fg); }
.h-ws-pill--super { background:linear-gradient(135deg, var(--accent-a15), var(--indigo-a15)); border-color:var(--accent-a40); }
.h-ws-pill--super .h-ws-plan { background:linear-gradient(135deg, var(--accent), var(--pro-gradient-end)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }

@media(max-width:720px) {
  .h-ws-name { max-width:80px; }
}
@media(max-width:560px) {
  .h-ws-pill { display:none; }
}
.h-navbtn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--radius-sm); font-size:11px; font-weight:500;
  color:var(--muted); background:none; border:none; cursor:pointer;
  white-space:nowrap; transition:color 0.15s, background 0.15s; font-family:inherit;
  text-decoration:none;
}
.h-navbtn:hover { color:var(--text); background:var(--hover-bg); }
.h-navbtn svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.h-navbtn.bug-btn { color:var(--muted); }
.h-navbtn.bug-btn:hover { color:var(--text); }

/* ── Row 2: File / Document bar ────────────────────────── */
.hrow-2 {
  display:flex; align-items:center; gap:4px;
  padding:0 12px; height:34px; flex-shrink:0;
  background:var(--panel);
  border-bottom:1px solid var(--border-dk);
}
.hrow-2 .hbtn { height:22px; font-size:11.5px; padding:0 8px; }
.hrow-2 .vd { height:14px; }
.h-back {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--accent);
  padding:4px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--accent-a30);
  background:var(--accent-a06);
  text-decoration:none;
  transition:background .15s, border-color .15s;
}
.h-back:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.h-page-title {
  font-size:13px; font-weight:700; color:var(--text);
  margin-left:8px;
}

/* ── Row 3: Drawing tools ───────────────────────────────── */
.hrow-3 {
  display:flex; align-items:center; gap:4px;
  padding:0 12px; height:44px; flex-shrink:0;
  background:var(--surface);
  border-bottom:1px solid var(--border-dk);
}

/* Keep old .hrow alias working */
.hrow { display:flex; align-items:center; gap:4px; padding:0 12px; height:44px; flex-shrink:0; }

/* Off-canvas pages: dim rows 2 & 3, keep row 1 fully active */
header.off-canvas .hrow-2,
header.off-canvas .hrow-3 {
  opacity: 0.28;
  pointer-events: none;
  filter: grayscale(0.4);
}

.logo { font-weight:800; font-size:18px; color:var(--hdr-text); letter-spacing:.3px; white-space:nowrap; line-height:1; }
.logo span { color:var(--accent); font-weight:400; }
.logo-sub { font-size:8.5px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; text-align:center; margin-top:3px; }
.brand-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.brand-tag { font-size:8.5px; font-weight:600; color:var(--muted); letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.vd { width:1px; height:20px; background:var(--border); margin:0 5px; flex-shrink:0; }
.hrow-2 .vd { height:14px; }
.hright { margin-left:auto; display:flex; gap:4px; align-items:center; }

/* header buttons */
.hbtn {
  display:inline-flex; align-items:center; gap:4px;
  padding:0 9px; height:28px;
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text2);
  font-family:var(--sans); font-size:12px; font-weight:500;
  cursor:pointer; transition:background .12s,color .12s; white-space:nowrap; flex-shrink:0;
}
.hbtn:hover  { background:var(--border); color:var(--text); }
.hbtn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.hbtn.active svg { stroke:var(--on-accent); }
.hbtn svg    { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.hbtn.disabled { opacity:0.38; pointer-events:none; }
/* row-2 buttons slightly smaller */
.hrow-2 .hbtn { height:24px; font-size:11.5px; padding:0 8px; }
.hbtn.nest-btn { background:var(--warning-soft); color:var(--warning); border-color:var(--warning-soft); font-weight:600; }
.hbtn.nest-btn:hover { background:var(--warning); color:var(--on-accent); }
.hbtn.pdf-btn  { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); font-weight:600; }
.hbtn.new-btn  { background:var(--hover-bg); color:var(--muted); border-color:var(--border); }
.hbtn.new-btn:hover { background:var(--raised); color:var(--text); }
/* Save button — accent-tinted so it reads as the primary commit action in the
   toolbar. `.saving` is toggled by sdSaveProject while the POST is in flight
   so rapid clicks can't double-submit. */
.hbtn.hbtn-save { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); font-weight:600; }
.hbtn.hbtn-save:hover { background:var(--accent); color:var(--on-accent); }
.hbtn.hbtn-save.saving { opacity:0.6; pointer-events:none; }
.hbtn.hbtn-save:disabled { opacity:0.6; cursor:default; }
.hbtn.tpl-btn  { background:var(--success-soft); color:var(--success); border-color:var(--success-soft); }
.hbtn.tpl-btn:hover { background:var(--success); color:var(--on-accent); }
.hbtn.pdf-btn:hover { background:var(--accent); color:var(--on-accent); }
.hbtn.bug-btn  { background:transparent; color:var(--muted); border-color:var(--border); font-size:11px; }
.hbtn.bug-btn:hover { background:var(--hover-bg); color:var(--text); }
.hbtn--signout { color:var(--signout-fg); text-decoration:none; }

/* ── Bug Report Modal ─────────────────────────────── */
#bugModal { display:none; position:fixed; inset:0; z-index:9999; background:var(--black-a55); backdrop-filter:blur(3px); align-items:center; justify-content:center; }
#bugModal.open { display:flex; }
#bugModalBox {
  background:var(--panel); border:1px solid var(--border-dk); border-radius:var(--radius-lg);
  width:min(680px,90vw); padding:32px 32px 28px;
  box-shadow:0 24px 70px var(--black-a55); display:flex; flex-direction:column; gap:16px;
}
#bugModalBox h3 { margin:0; font-size:15px; font-weight:600; color:var(--text); }
#bugModalBox p.bug-sub { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.bug-field { display:flex; flex-direction:column; gap:5px; }
.bug-field label { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.bug-field textarea, .bug-field input[type=text] {
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:var(--sans); font-size:13px; padding:8px 10px;
  outline:none; resize:vertical; line-height:1.5;
}
.bug-field textarea:focus, .bug-field input[type=text]:focus { border-color:var(--accent); }
.bug-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.bug-cancel { background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); font-size:13px; padding:7px 16px; cursor:pointer; font-family:var(--sans); }
.bug-cancel:hover { border-color:var(--border-dk); color:var(--text); }
.bug-send { background:var(--accent); border:none; border-radius:var(--radius); color:var(--on-accent); font-size:13px; font-weight:600; padding:7px 18px; cursor:pointer; font-family:var(--sans); }
.bug-send:hover { background:var(--accent2); }
#bugScreenshotName { font-size:11px; color:var(--accent); margin-top:3px; display:none; }

/* ─────────────────────────────────────────
   APP SHELL
───────────────────────────────────────── */
.app { display:flex; height:calc(100vh - 112px); overflow:hidden; }

/* sidebars */
.lsb, .rsb {
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; flex-shrink:0;
  background:var(--surface);
}
.lsb {
  display:block;
  width:360px;
  height:calc(100vh - 112px);      /* explicit height required for overflow-y:auto to work */
  border-right:1px solid var(--border);
  padding:10px 0 20px;
  background:var(--bg);
  overflow-y:auto;
  overflow-x:hidden;
  flex-shrink:0;
}
.rsb { width:360px; border-left:1px solid var(--border); padding-bottom:20px; }

/* RSB wrapper — holds RSB; drawer is fixed-positioned when unpinned */
.rsb-wrap {
  display:flex;
  flex-shrink:0;
  width:360px;
  transition:width 120ms ease-out;
}
/* When pinned: no layout change — drawer stays fixed, just won't auto-close */
.rsb-wrap.drawer-pinned .rsb { border-left-color:var(--accent); }

/* ── Cutout Drawer ─────────────────────────────────── */
/* Unpinned: fixed, anchored to the LEFT edge of the RSB (right:360px).
   Hides behind the RSB via translateX(100%) and slides LEFT to appear. */
.cutout-drawer {
  position:fixed;
  top:112px; /* below the 3-row app header */
  right:360px; /* RSB width — so drawer's right edge touches RSB's left edge */
  bottom:0;
  width:284px;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateX(100%); /* hidden: shifted right, out of view */
  visibility:hidden;          /* invisible + can't block clicks when closed */
  pointer-events:none;
  transition:transform 120ms ease-out, visibility 0s 120ms; /* visibility hides AFTER slide-out */
  z-index:300;
  box-shadow:-4px 0 18px var(--black-a12);
}
/* When open: visible immediately, slides into view */
.cutout-drawer.open {
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform 120ms ease-out, visibility 0s; /* visibility shows instantly */
}

/* Pinned: drawer stays fixed-positioned and open — no layout changes */
.rsb-wrap.drawer-pinned .cutout-drawer {
  /* stays position:fixed; click-outside close is disabled via JS only */
}

/* Drawer header */
.cd-hdr {
  display:flex; align-items:center; gap:6px;
  padding:10px 12px 9px;
  border-bottom:2px solid var(--accent);
  flex-shrink:0;
  background:var(--surface);
}
.cd-piece-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.cd-piece-name {
  font-size:12px; font-weight:600; color:var(--text); flex:1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cd-actions { display:flex; gap:4px; align-items:center; }
.cd-btn {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:11px; padding:2px 7px; cursor:pointer; color:var(--text2);
  transition:background .1s, color .1s;
}
.cd-btn:hover { background:var(--raised); }
.cd-btn.pinned { background:var(--accent-a12); border-color:var(--accent); color:var(--accent); }

/* Drawer scrollable body */
.cd-body {
  flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 10px 20px;
}

/* Pieces section collapse-all / expand-all row */
.pieces-ctrl-row {
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin-bottom:6px;
}
.pieces-ctrl-btn {
  font-size:9px; padding:1px 7px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); cursor:pointer;
}
.pieces-ctrl-btn:hover { color:var(--text2); border-color:var(--border-dk); }

/* section — base (RSB flat style) */
.sec { padding:10px 12px; border-bottom:1px solid var(--border); }
.sec-title {
  font-size:10px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}

/* LSB section cards */
.lsb .sec {
  padding:0;
  border-bottom:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:0 12px 10px;
}
.lsb .sec-title {
  font-size:11px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text2);
  padding:10px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  margin-bottom:0;
  cursor:pointer;
}
.lsb .sec-title:hover { color:var(--text); }
.lsb .sec-body { padding:14px; }

/* RSB empty-state messages */
.rsb-empty { font-size:10px; color:var(--muted); padding:4px 12px 6px; }

/* form rows */
.fr { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fr:last-child { margin-bottom:0; }
.fr label { font-size:12px; color:var(--text2); width:70px; flex-shrink:0; font-weight:500; }
.fr input, .fr select {
  flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:var(--sans); font-size:13px; padding:7px 10px;
  outline:none; min-width:0;
}
.fr input:focus, .fr select:focus { border-color:var(--accent); }
.fr .u { font-size:11px; color:var(--muted); width:18px; flex-shrink:0; font-family:var(--mono); }

/* buttons */
.btn { width:100%; padding:10px; border:none; border-radius:var(--radius); font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; margin-top:8px; transition:all .12s; }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:0 2px 8px var(--accent-a20); }
.btn-primary:hover { background:var(--accent2); }
.btn-ghost { background:var(--panel); color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--raised); color:var(--text); }
.btn-danger { background:var(--error); color:var(--on-accent); }
.btn-danger:hover { background:var(--btn-danger-hover); }
.btn-pricing { background:var(--warning); color:var(--on-accent); border-color:var(--warning); font-weight:600; }
.btn-pricing:hover { background:var(--btn-pricing-hover); border-color:var(--btn-pricing-hover); }

/* ─────────────────────────────────────────
   CANVAS AREA
───────────────────────────────────────── */
.canvas-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.carea {
  flex:1; overflow:auto; background:var(--bg);
  display:flex; align-items:flex-start; justify-content:flex-start; padding:0;
}
#mc { display:block; box-shadow:var(--shadow-md); outline:none; touch-action:none; -webkit-user-select:none; user-select:none; }
#mc.cursor-select    { cursor:default; }
#mc.cursor-draw      { cursor:crosshair; }
#mc.cursor-crosshair { cursor:crosshair; }
#mc.cursor-move      { cursor:move; }
#mc.cursor-grab      { cursor:grab; }

/* ─────────────────────────────────────────
   SLAB TABS
───────────────────────────────────────── */
.slab-tabs {
  display:flex; align-items:stretch; background:var(--surface);
  border-bottom:2px solid var(--border); padding:0 8px;
  flex-shrink:0; overflow-x:auto; min-height:40px; gap:2px;
}
.slab-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:0 14px; margin-bottom:-2px;
  border:none; border-bottom:3px solid transparent;
  font-size:12.5px; font-weight:500; color:var(--text2);
  cursor:pointer; white-space:nowrap; transition:all .12s; flex-shrink:0;
  background:none;
}
.slab-tab:hover  { color:var(--text); background:var(--panel); }
.slab-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; background:var(--surface); }
.slab-tab-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0 2px; border-radius:var(--radius-sm); }
.slab-tab-del:hover { color:var(--error); }
.add-slab-btn {
  display:inline-flex; align-items:center; gap:4px; padding:0 14px;
  font-size:12.5px; font-weight:600; color:var(--accent2);
  cursor:pointer; white-space:nowrap; background:none; border:none;
  transition:all .12s; flex-shrink:0;
}
.add-slab-btn:hover { background:var(--slab-mint-a08); }

/* ─────────────────────────────────────────
   LEFT SIDEBAR
───────────────────────────────────────── */
.slab-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:4px; }
.slab-grid-mb { margin-bottom:7px; }
.slab-grid .fr { margin-bottom:0; }

/* collapsible section title */
.collapsible { cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.collapsible:hover { color:var(--accent); }
.collapsible.is-collapsed .collapse-arrow { color:var(--accent); }
.collapse-arrow { font-size:12px; color:var(--muted); transition:transform .2s; display:inline-block; }
.collapse-arrow.collapsed { transform:rotate(-90deg); }

/* shape tabs */
.shape-tabs { display:flex; gap:0; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.stab {
  flex:1; padding:8px 4px; text-align:center; font-size:12px; font-weight:600;
  background:var(--surface); border:none; border-right:1px solid var(--border);
  cursor:pointer; transition:all .12s; color:var(--text2);
}
.stab:last-child { border-right:none; }
.stab:hover { background:var(--hover-bg); color:var(--text); }
.stab.active { background:var(--accent); color:var(--on-accent); }

/* L-shape preview */
.l-preview-wrap { display:flex; justify-content:center; margin:8px 0; }

/* L-shape visual picker */
.l-picker { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; margin-bottom:10px; }
.l-pick { cursor:pointer; border:2px solid var(--border); padding:6px; display:flex; align-items:center; justify-content:center; transition:all .1s; }
.l-pick:hover { border-color:var(--accent); }
.l-pick.active { border-color:var(--accent); background:var(--accent-soft); }
.l-pick svg { width:100%; height:28px; }
.l-seg-form { display:flex; flex-direction:column; gap:8px; }
.l-seg-form .l-preview-wrap { width:100%; }
.fracinput.auto-filled { color:var(--error); border-color:var(--error); }
.l-seg-form .l-prev { width:100%; height:auto; }
.l-seg-inputs { width:100%; }
canvas.l-prev { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }

/* fraction hints */
.frac-hint {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 10px; margin-bottom:8px;
  font-size:11px; line-height:1.6; color:var(--muted);
}
.frac-hint code, .lshape-hint code { font-family:var(--mono); color:var(--text); font-size:11.5px; }
.lshape-hint { font-size:11px; color:var(--muted); margin-bottom:6px; line-height:1.6; }
.l-seg-hint { color:var(--accent); font-size:10px; font-weight:400; margin-left:3px; }
.frac-preview { font-family:var(--mono); font-size:10.5px; color:var(--accent); margin:-4px 0 4px 56px; min-height:14px; }

/* poly hint */
.poly-hint {
  background:var(--accent-deep-a08); border:1px solid var(--accent-deep-a20);
  border-radius:var(--radius-sm); padding:7px 9px; font-size:11px; color:var(--accent); line-height:1.5; margin-top:6px;
}
.poly-hint.paused { background:var(--warning-soft); border-color:var(--cut-faucet-a180-a30); color:var(--warning); }
/* polyHint uses .hidden */

/* ─────────────────────────────────────────
   RIGHT SIDEBAR
───────────────────────────────────────── */

/* cursor bar */
.cursor-bar { padding:7px 13px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; flex-wrap:nowrap; min-height:36px; overflow:hidden; }
.cursor-xy { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12.5px; flex-shrink:0; white-space:nowrap; }
.cv-k { font-size:11.5px; color:var(--text2); }
.cv-v { font-family:var(--mono); font-size:13px; font-weight:600; }
.cv-k-y { margin-left:8px; }

/* draw info inline */
.draw-info-inline { display:none; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; min-width:0; overflow:hidden; white-space:nowrap; }
.draw-info-inline.active { display:flex; }
.draw-area-lbl { margin-left:4px; }

.pcount-accent { color:var(--accent); }

/* ── Unified Layers Panel ── */
.layers-list { display:flex; flex-direction:column; overflow-y:auto; max-height:calc(100vh - 220px); position:relative; }
.layers-title-wrap { display:flex; align-items:center; justify-content:space-between; }
.layers-title-lbl { font-weight:500; }

/* ── Types Panel (v-next Sprint 2) ── */
.types-list { display:flex; flex-direction:column; gap:2px; overflow-y:auto; max-height:240px; }
.types-empty { padding:10px 6px; color:var(--muted, #888); font-size:11px; font-style:italic; }
.types-row {
  display:grid;
  grid-template-columns: 10px 1fr auto auto auto auto;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:4px;
  border:1px solid transparent;
  min-height:28px;
}
.types-row:hover { background:var(--hover-bg, rgba(127,127,127,0.08)); }
.types-sw { width:8px; height:16px; border-radius:2px; }
.types-name {
  background:transparent; border:none; padding:1px 2px; font-size:12px;
  color:var(--text, inherit); min-width:0; outline:none;
}
.types-name:focus { background:var(--surface, rgba(127,127,127,0.15)); border-radius:3px; }
.types-dims, .types-qty { font-size:10.5px; color:var(--muted, #888); white-space:nowrap; }
.types-hand {
  font-size:9px; font-weight:700; padding:1px 4px; border-radius:3px;
  background:var(--accent, #0095ff); color:#fff; line-height:1;
}
.types-hand--left  { background:#10b981; }
.types-hand--right { background:#ef4444; }
.types-hand--both  { background:#8b5cf6; }
.types-actions { display:flex; gap:2px; }
.types-act {
  background:transparent; border:none; cursor:pointer; font-size:11px;
  color:var(--muted, #888); padding:2px 4px; line-height:1; border-radius:3px;
}
.types-act:hover { color:var(--text, inherit); background:var(--hover-bg, rgba(127,127,127,0.12)); }
.types-act--del:hover { color:#ef4444; }

/* ── Type Editor drawer (v-next Sprint 2b) ── */
.type-drawer {
  position:fixed; top:0; right:0; width:min(440px, 100vw); height:100vh;
  background:var(--surface, #fff); color:var(--text, inherit);
  border-left:1px solid var(--border, rgba(127,127,127,0.25));
  box-shadow:-4px 0 16px rgba(0,0,0,0.12);
  z-index:99000;
  display:flex; flex-direction:column;
  transform:translateX(0); transition:transform .18s ease;
}
.type-drawer.hidden { transform:translateX(100%); pointer-events:none; }
.type-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border, rgba(127,127,127,0.2));
}
.type-drawer__title { font-size:14px; font-weight:600; margin:0; letter-spacing:-0.01em; }
.type-drawer__close {
  background:transparent; border:none; cursor:pointer; font-size:16px; color:var(--muted, #888);
  width:28px; height:28px; border-radius:4px;
}
.type-drawer__close:hover { background:var(--hover-bg, rgba(127,127,127,0.12)); color:var(--text, inherit); }
.type-drawer__body {
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.type-drawer__row {
  display:grid; grid-template-columns: 110px 1fr; align-items:center; gap:10px;
}
.type-drawer__row--tall { align-items:start; }
.type-drawer__lbl { font-size:12px; color:var(--muted, #888); }
.type-drawer__inp {
  background:var(--bg, transparent); color:var(--text, inherit);
  border:1px solid var(--border, rgba(127,127,127,0.25));
  border-radius:4px; padding:6px 8px; font-size:13px; min-width:0; width:100%;
  font-family:inherit;
}
.type-drawer__inp[type="color"] { height:32px; padding:2px 4px; }
.type-drawer__inp:focus { outline:none; border-color:var(--accent, #0095ff); }
.type-drawer__hint {
  font-size:11px; color:var(--muted, #888); font-style:italic; margin-top:8px;
  padding:8px 10px; background:var(--hover-bg, rgba(127,127,127,0.06)); border-radius:4px;
}
.type-drawer__foot {
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid var(--border, rgba(127,127,127,0.2));
}
.layer-row {
  display:grid; grid-template-columns:auto auto auto 1fr auto auto auto;
  grid-template-rows:auto auto; align-items:center; gap:2px 4px;
  padding:6px 8px; cursor:pointer; font-size:11px;
  transition:background .08s;
}
.layer-drag { grid-row:1/3; font-size:14px; padding:4px; cursor:grab; }
.layer-row[draggable="true"] { cursor:grab; }
.layer-row[draggable="true"]:active { cursor:grabbing; }
.layer-vis { grid-row:1/3; font-size:14px; padding:4px; }
.layer-dot { grid-row:1/3; width:10px; height:10px; }
.layer-name { grid-column:4; grid-row:1; font-size:13px; font-weight:600; }
.layer-tag { grid-column:5; grid-row:1; font-size:10px; }
.layer-dims { grid-column:4/7; grid-row:2; font-size:11px; color:var(--text2); }
.layer-del { grid-column:7; grid-row:1/3; font-size:16px; padding:4px 6px; }
.layer-row:hover { background:var(--hover-bg); }
.layer-row.layer-sel { background:var(--accent-soft); border-left:3px solid var(--accent); }
.layer-row.layer-hidden { opacity:0.4; }
.layer-drag { cursor:grab; color:var(--muted); font-size:10px; flex-shrink:0; user-select:none; }
.layer-vis { background:none; border:none; cursor:pointer; font-size:10px; padding:0 2px; flex-shrink:0; color:var(--muted); }
.layer-vis:hover { color:var(--text); }
.layer-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.layer-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:500; }
.layer-tag { font-size:9px; color:var(--muted); flex-shrink:0; font-family:var(--mono); }
.layer-dims { font-size:9px; color:var(--muted); flex-shrink:0; font-family:var(--mono); white-space:nowrap; }
.layer-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 2px; flex-shrink:0; line-height:1; }
.layer-del:hover { color:var(--error); }
.layer-item { border-bottom:1px solid var(--border); }
.layer-item:last-child { border-bottom:none; }
.layer-item.layer-sel { background:var(--accent-soft); }
.layer-item.layer-sel .layer-row { border-left:4px solid var(--piece-color, var(--accent)); }
.layer-item.layer-hidden { opacity:0.4; }
.layer-item.layer-dragging { opacity:0.5; background:var(--accent-soft); }
.layer-item.layer-drop-over { outline:3px dashed var(--accent); outline-offset:-3px; background:var(--accent-soft); }
.layer-item.layer-drop-over .layer-row--group { background:var(--accent-soft); }
.layer-drag-ghost { position:fixed; z-index:9999; pointer-events:none; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:600; padding:6px 14px; border-radius:var(--radius); box-shadow:0 4px 16px var(--black-a30); transform:translate(-50%,-50%); white-space:nowrap; font-family:var(--sans); }
.layer-drop-line { position:absolute; left:8px; right:8px; height:3px; background:var(--accent); border-radius:var(--radius-sm); pointer-events:none; z-index:10; display:none; }
.layer-row { border-bottom:none; }

/* Layer detail panel — shown when selected */
.layer-detail { padding:6px 8px 8px 24px; background:var(--bg); border-top:1px solid var(--border); }
.layer-detail-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; font-size:11px; }
.layer-detail-row:last-child { margin-bottom:0; }
.layer-detail-lbl { font-size:9px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); width:44px; flex-shrink:0; }
.layer-detail-inp { flex:1; font-size:11px; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px 5px; outline:none; }
.layer-detail-inp:focus { border-color:var(--accent2); }
.layer-detail-inp--sm { width:50px; flex:none; }
.layer-detail-btn { font-size:10px; padding:2px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text2); cursor:pointer; }
.layer-detail-btn:hover { background:var(--raised); }
.layer-detail-btn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* Layer detail sub-sections */
.ld-sec { border-top:1px solid var(--border); }
.ld-sec:first-child { border-top:none; }
.ld-sec-title { font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:8px 0 5px; cursor:default; display:flex; align-items:center; gap:5px; }
.ld-sec-title.ld-collapsible { cursor:pointer; }
.ld-sec-title.ld-collapsible:hover { color:var(--text2); }
.ld-arrow { font-size:8px; transition:transform .15s; }
.ld-arrow.collapsed { transform:rotate(-90deg); }
.ld-sec-body { padding:0 0 6px; }
.ld-sec-body.hidden { display:none; }
.ld-sec--ctx { border-left:3px solid var(--accent); background:var(--accent-soft); padding-left:8px; margin:4px 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.ld-sec-title--ctx { color:var(--accent); }
.ld-row { display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.ld-row:last-child { margin-bottom:0; }
.ld-row--grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ld-field { display:flex; align-items:center; gap:3px; }
.ld-lbl { font-size:9px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; display:block; }
.ld-lbl-sm { font-size:9px; font-weight:500; color:var(--muted); width:14px; flex-shrink:0; }
.ld-inp { width:100%; font-size:13px; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; outline:none; box-sizing:border-box; }
.ld-inp:focus { border-color:var(--accent); }
.ld-inp--sm { width:80px; flex:none; }
.ld-unit { font-size:9px; color:var(--muted); flex-shrink:0; }
.ld-info { font-size:10px; color:var(--text2); font-family:var(--mono); }
/* Parent link chip shown below the Role dropdown when piece.parentId is set. */
.ld-parent-row { gap:6px; margin-top:2px; }
.ld-parent-chip {
  flex:1; min-width:0;
  padding:4px 8px; font-size:11px; font-weight:500; color:var(--text);
  background:var(--accent-a10); border:1px solid var(--accent-a30);
  border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ld-btn--xs { padding:4px 8px; font-size:10px; min-height:0; }
.ld-btn--ghost {
  background:transparent; border:1px solid var(--border); color:var(--muted);
}
.ld-btn--ghost:hover { color:var(--text); border-color:var(--text2); }
/* "Add Splash" quick-action shown when the selected piece has role=top. */
.ld-splash-row { margin-top: 4px; }
.ld-btn--splash {
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-a08);
  border: 1px dashed var(--accent-a45);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ld-btn--splash:hover {
  background: var(--accent-a16);
  border-color: var(--accent);
}
.ld-btn { font-size:12px; font-weight:500; padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text2); cursor:pointer; white-space:nowrap; }
.ld-btn:hover { background:var(--raised); color:var(--text); }
.ld-btn--primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ld-btn--primary:hover { opacity:0.85; }
.ld-btn--danger { color:var(--error); border-color:var(--error); }
.ld-btn--danger:hover { background:var(--error); color:var(--on-accent); }
.ld-btn--seam { color:var(--accent); border-color:var(--accent); }
.ld-tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.ld-pills { display:flex; flex-wrap:wrap; gap:4px; }
.ld-edge-grid { display:flex; flex-wrap:wrap; gap:3px; }
.ld-footer { display:flex; align-items:center; gap:4px; padding:8px 0 2px; border-top:1px solid var(--border); flex-wrap:wrap; }
.ld-actions { border-top:1px solid var(--border); padding:8px 0 2px; }
.ld-actions-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ld-spacer { flex:1; }
.ld-feedback { font-size:10px; }
.ld-feedback.fb-ok { color:var(--success); }
.ld-feedback.fb-err { color:var(--error); }
.ld-badge { font-size:9px; font-weight:600; color:var(--accent); }
.ld-seam-info { font-size:10px; color:var(--text2); margin-top:2px; }
.ld-seam-wrap { margin-top:4px; }

/* Group folders in layers */
.layer-row--group { background:var(--raised); font-weight:600; padding:12px 10px; font-size:13px; min-height:44px; }
.layer-row--group:hover { background:var(--border); }
.layer-row--child { padding-left:28px; }
.layer-group-children { }
.layer-group-children.collapsed { display:none; }
.layer-group-arrow { font-size:10px; transition:transform .15s; flex-shrink:0; cursor:pointer; }
.layer-group-arrow.collapsed { transform:rotate(-90deg); }
.layer-count { font-size:10px; color:var(--muted); flex-shrink:0; }
.layer-grp-add, .layer-grp-sel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text2); cursor:pointer; font-size:12px; padding:4px 8px; flex-shrink:0; font-weight:500; }
.layer-grp-add:hover, .layer-grp-sel:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

.annot-swatch { width:16px; height:16px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0; }
.p-drag-handle { color:var(--muted); font-size:13px; cursor:grab; padding:0 2px; flex-shrink:0; user-select:none; }
.p-drag-handle:active { cursor:grabbing; }
.p-warn { color:var(--error); }

/* ─── ANNOTATION SWATCH ─── */
.annot-swatch {
  width:17px; height:17px; border-radius:50%;
  border:2px solid var(--border);
  cursor:pointer; padding:0; flex-shrink:0;
  transition:transform .1s, box-shadow .1s;
}
.annot-swatch:hover { transform:scale(1.25); box-shadow:0 0 0 2px var(--border-dk); }

/* Edge buttons compact single-line pills */
#edgeGrid { display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
/* Fixed 4-column grid for rect/lshape (always 4 sides) so label length never changes layout */
#edgeGrid.grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
#edgeGrid.grid-4 .ef { padding:3px 6px; }
#edgeGrid.grid-4 .ef .ef-type { overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:640px){ #edgeGrid.grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
#edgeGrid .ef {
  display:flex; flex-direction:row; align-items:center; gap:3px;
  padding:3px 8px; border-radius:var(--radius-sm); white-space:nowrap; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface);
  min-width:0; transition:all .1s;
}
#edgeGrid .ef:hover { border-color:var(--border-dk); transform:translateY(-1px); }
#edgeGrid .ef.sel-seg { border-color:var(--accent); background:var(--accent-a14); box-shadow:0 0 0 2px var(--accent-a25); }
#edgeGrid .ef.sel-seg .ef-side { color:var(--accent); }
#edgeGrid .ef .ef-side {
  font-size:8.5px; font-weight:600; letter-spacing:0.5px; color:var(--muted);
  margin-bottom:0; text-transform:uppercase; flex-shrink:0;
}
#edgeGrid .ef .ef-sep { font-size:9px; color:var(--muted); opacity:0.5; }
#edgeGrid .ef .ef-type {
  font-size:10px; font-weight:600; padding:0; border-radius:0;
  background:transparent !important; display:inline;
}
#edgeGrid .ef.finished { border-color:var(--fin); } #edgeGrid .ef.finished .ef-type { color:var(--fin); }
#edgeGrid .ef.seam     { border-color:var(--seam);} #edgeGrid .ef.seam     .ef-type { color:var(--seam);}
#edgeGrid .ef.cut      { border-color:var(--cut); } #edgeGrid .ef.cut      .ef-type { color:var(--cut); }
#edgeGrid .ef.miter    { border-color:var(--miter);}#edgeGrid .ef.miter    .ef-type { color:var(--miter);}
#edgeGrid .ef.ref      { border-color:var(--ref);  }#edgeGrid .ef.ref      .ef-type { color:var(--ref);  }
#edgeGrid .ef.lam      { border-color:var(--lam);  }#edgeGrid .ef.lam      .ef-type { color:var(--lam);  }

.pedge-row { display:flex; align-items:center; gap:5px; margin-bottom:5px; border-radius:var(--radius-sm); padding:2px 3px; transition:background .1s; cursor:pointer; }
/* ── Cutouts panel ──────────────────────────────────── */
.cutout-item { background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.cutout-item.dragging { opacity:0.4; }
.cutout-item.drag-over { border-color:var(--accent2); box-shadow:0 0 0 2px var(--cutout-link-mint); }
.cutout-item-hdr {
  display:flex; flex-direction:column; align-items:stretch;
  padding:0; cursor:pointer; user-select:none;
}
.cutout-item-hdr:hover { background:var(--hover-bg); }
.cutout-item:has(.cutout-body:not(.hidden)) .cutout-item-hdr { border-bottom:1px solid var(--border); }
/* Top row: badge only */
.cutout-hdr-top { display:flex; align-items:center; gap:6px; padding:6px 10px 4px; }
/* Bottom row: all action buttons, full width, evenly spread */
.cutout-hdr-btns {
  display:flex; align-items:center; justify-content:space-around;
  padding:4px 8px 6px; gap:4px;
  border-top:1px solid var(--border);
}
.cutout-hdr-left { display:flex; align-items:center; gap:5px; }
.cutout-body { padding:8px 10px 10px; }
.cutout-body.hidden { display:none; }
/* icon buttons in the cutout header — 28px tall for easy tapping */
.ctb-icon { height:28px !important; padding:0 8px !important; font-size:13px !important; min-width:28px; display:inline-flex !important; align-items:center; justify-content:center; flex:1; }
.cutout-type-badge { font-size:10px; font-weight:600; padding:2px 6px; border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.ctb-sink    { background:var(--cut-sink-a15);  color:var(--cut-sink-fg); }
.ctb-cooktop { background:var(--cut-cooktop-a15);   color:var(--cut-cooktop-fg); }
.ctb-faucet  { background:var(--cut-faucet-a15);  color:var(--cut-faucet-fg); }
.ctb-custom  { background:var(--cut-custom-a15);  color:var(--cut-custom-fg); }
.cutout-sec-hdr { font-size:9px; font-weight:600; letter-spacing:.07em; color:var(--muted); text-transform:uppercase; margin:10px 0 5px; }
.cutout-sec-hdr:first-child { margin-top:0; }
.cutout-sec-hint { font-weight:400; font-size:8px; text-transform:none; letter-spacing:0; opacity:.75; }
.cutout-hint { margin-top:8px; font-size:10px; color:var(--muted); line-height:1.4; }
/* Link row — sits between header and body, always visible (no margin/border-radius — flush with item) */
.cutout-link-row { display:flex; align-items:center; gap:6px; padding:5px 10px; background:var(--cut-link-a07); border-bottom:1px solid var(--cut-link-a20); }
.cutout-link-label { font-size:10px; font-weight:600; color:var(--accent-alt); white-space:nowrap; flex-shrink:0; }
.cutout-link-sel { flex:1; font-size:11px; padding:3px 5px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); min-width:0; }
/* Small badge in header showing linked target */
.cutout-link-badge { font-size:9px; font-weight:600; color:var(--accent-alt); background:var(--cut-link-a13); border:1px solid var(--cut-link-a30); border-radius:var(--radius-sm); padding:1px 5px; white-space:nowrap; margin-left:auto; }
.cutout-fixed-val { padding:4px 6px; font-size:12px; color:var(--muted); border:1px solid transparent; }
.cutout-fields { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin-top:0; }
.cutout-field { display:flex; flex-direction:column; gap:2px; }
.cutout-field label { font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.03em; }
.cutout-field input, .cutout-field select { padding:4px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:12px; width:100%; box-sizing:border-box; }
.cutout-field.full { grid-column:1/-1; }
.cutout-lock-btn { height:28px; padding:0 8px; border:1.5px solid var(--cut-lock-a50); border-radius:var(--radius-sm); cursor:pointer; background:var(--cut-lock-a12); color:var(--cut-lock-fg); transition:.15s; display:inline-flex; align-items:center; justify-content:center; flex:1; }
.cutout-lock-btn:hover { background:var(--cut-lock-a22); border-color:var(--cut-lock-a70); }
.cutout-lock-btn.locked { background:var(--accent-a13); border-color:var(--accent-a45); color:var(--accent-alt); }
.cutout-lock-btn.locked:hover { background:var(--accent-a22); }
.pedge-row:last-child { margin-bottom:0; }
.pedge-row:hover { background:var(--hover-bg); }
.pedge-row.active-seg { background:var(--accent-a12); }
.pedge-row.active-seg .pedge-lbl { color:var(--accent); }
.pedge-lbl { width:46px; flex-shrink:0; font-size:10px; color:var(--muted); font-weight:600; font-family:var(--mono); text-transform:uppercase; }
.pedge-inp { width:68px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--mono); font-size:11.5px; padding:3px 5px; outline:none; text-align:right; }
.pedge-inp:focus { border-color:var(--accent); }
.pedge-sel { flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:11px; padding:3px 4px; outline:none; }
.pedge-sel:focus { border-color:var(--accent); }
.pedge-unit { font-size:10px; color:var(--muted); }

/* selected piece edit — visibility controlled by .hidden class toggle in JS */
.sel-sec-title {
  font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sel-info-dims-bar { font-family:var(--mono); font-size:11px; color:var(--text2); margin-bottom:8px; }

/* dim edit grid */
.dim-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:8px; }
.dim-field-label { font-size:10px; font-weight:600; letter-spacing:1px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; }
.dim-input-primary {
  width:100%; font-size:13px; padding:6px 7px;
  border:2px solid var(--accent2); border-radius:var(--radius);
  background:var(--bg); color:var(--text); font-family:var(--mono); outline:none;
}
.dim-input-primary:focus  { border-color:var(--accent); }
.dim-input-secondary {
  width:100%; font-size:13px; padding:6px 7px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text); font-family:var(--mono); outline:none;
}
.dim-input-secondary:focus { border-color:var(--accent2); }

/* name row inside edit */
.name-row-inline { margin-bottom:6px; }
.name-label { width:44px; font-weight:600; color:var(--text); font-size:12px; }
.name-input {
  flex:1; font-family:var(--sans); font-size:13px; padding:6px 8px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); outline:none;
}
.name-input:focus { border-color:var(--accent2); }
.sel-edit-row { display:flex; gap:6px; align-items:center; }
.edit-feedback { font-family:var(--mono); font-size:11px; min-height:15px; margin-bottom:6px; text-align:center; }

/* stats */
.stat-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:none; }
.sk { font-size:12px; color:var(--text2); font-weight:500; }
.sv { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); }
.sv.warn { color:var(--error); }
.sv.ok   { color:var(--accent); }

/* edge labels */
/* edgeSec uses .hidden */
.edge-cycle-hint { font-size:9px; font-weight:400; color:var(--muted); letter-spacing:0; text-transform:none; margin-left:6px; }
.edge-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ef {
  background:var(--bg); border:2px solid var(--border); border-radius:var(--radius);
  padding:7px 8px; cursor:pointer; transition:all .12s; user-select:none;
  min-width:0; overflow:hidden;
}
.ef:hover { border-color:var(--border-dk); transform:translateY(-1px); }
.ef-side { font-size:9.5px; font-weight:600; letter-spacing:1.5px; color:var(--muted); margin-bottom:2px; text-transform:uppercase; }
.ef-len { font-size:11px; font-weight:500; color:var(--text); font-family:var(--mono); display:block; margin-bottom:2px; }
.ef-type { font-size:11px; font-weight:600; padding:2px 5px; border-radius:var(--radius-sm); display:inline-block; background:var(--panel); color:var(--text2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ef.finished { border-color:var(--fin);   } .ef.finished .ef-type { background:var(--accent-deep-a12);  color:var(--fin);   }
.ef.seam     { border-color:var(--seam);  } .ef.seam     .ef-type { background:var(--error-a12);   color:var(--seam);  }
.ef.cut      { border-color:var(--cut);   } .ef.cut      .ef-type { background:var(--cut-orange-a12);    color:var(--cut);   }
.ef.miter    { border-color:var(--miter); } .ef.miter    .ef-type { background:var(--miter-a12);  color:var(--miter); }
.ef.ref      { border-color:var(--ref);   } .ef.ref      .ef-type { background:var(--ref-a12);    color:var(--ref);   }
.ef.lam      { border-color:var(--lam);   } .ef.lam      .ef-type { background:var(--lam-a12);  color:var(--lam);   }

/* ef-chev — menu button inside edge cell, opens flag+profile picker */
.ef { position:relative; }
.ef-chev {
  position:absolute; top:3px; right:3px;
  width:22px; height:22px; padding:0; line-height:1;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--muted); font-size:16px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s;
}
.ef:hover .ef-chev { border-color:var(--border); color:var(--text2); }
.ef-chev:hover { background:var(--panel); color:var(--text); border-color:var(--border-dk); }
.ef.has-profile { border-left-width:4px; }

/* Edge-picker dialog (flag + profile, two independent axes) */
.edge-picker-backdrop {
  position:fixed; inset:0; background:var(--black-a42);
  z-index:99998; opacity:0; transition:opacity .18s ease;
}
.edge-picker-backdrop.in { opacity:1; }
.edge-picker-sheet {
  position:fixed; z-index:99999; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 24px 60px var(--black-a35);
  display:flex; flex-direction:column;
  top:50%; left:50%; transform:translate(-50%,-50%) scale(0.96);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  width:min(640px, 92vw); max-height:86vh;
}
.edge-picker-sheet.in { opacity:1; transform:translate(-50%,-50%) scale(1); }
.ep-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.ep-title { font-size:16px; font-weight:700; color:var(--text); letter-spacing:0.3px; }
.ep-close {
  background:transparent; border:none; color:var(--muted);
  font-size:24px; line-height:1; cursor:pointer; padding:4px 10px; border-radius:var(--radius-sm);
}
.ep-close:hover { background:var(--panel); color:var(--text); }
.ep-body {
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  padding:16px 18px; overflow-y:auto; flex:1 1 auto;
}
.ep-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ep-col-label {
  font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted);
}
.ep-opts { display:flex; flex-direction:column; gap:6px; }
.ep-opt {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); cursor:pointer; transition:all .12s;
  font-size:13px; color:var(--text); user-select:none;
}
.ep-opt:hover { border-color:var(--border-dk); background:var(--panel); }
.ep-opt input[type=radio] { margin:0; accent-color:var(--accent, var(--accent)); flex-shrink:0; }
.ep-opt-label { flex:1 1 auto; font-weight:500; }
.ep-opt-swatch { width:14px; height:14px; border-radius:3px; background:var(--muted); flex-shrink:0; }
.ep-opt.selected { border-color:var(--accent, var(--accent)); background:var(--accent-a07); font-weight:600; }
.ep-opt.ef-finished .ep-opt-swatch { background:var(--fin); }
.ep-opt.ef-seam     .ep-opt-swatch { background:var(--seam); }
.ep-opt.ef-cut      .ep-opt-swatch { background:var(--cut); }
.ep-opt.ef-miter    .ep-opt-swatch { background:var(--miter); }
.ep-opt.ef-ref      .ep-opt-swatch { background:var(--ref); }
.ep-opt.ef-lam      .ep-opt-swatch { background:var(--lam); }
.ep-opt.ef-none     .ep-opt-swatch { background:transparent; border:1.5px dashed var(--border-dk); }
.ep-foot {
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 18px; border-top:1px solid var(--border); background:var(--bg);
  border-radius:0 0 var(--radius) var(--radius);
}
.ep-cancel, .ep-apply {
  padding:9px 18px; font-size:13px; font-weight:600; border-radius:var(--radius);
  border:1.5px solid var(--border); cursor:pointer; transition:all .12s;
  font-family:inherit;
}
.ep-cancel { background:var(--bg); color:var(--text2); }
.ep-cancel:hover { border-color:var(--border-dk); color:var(--text); }
.ep-apply { background:var(--accent, var(--accent)); border-color:var(--accent, var(--accent)); color:var(--on-accent); }
.ep-apply:hover { filter:brightness(1.08); }

/* SVG edge profile pill base — class applied to the pill background path */
.ep-pill { opacity: 1; }

/* SVG edge profile classes — subtle visual cues on the edge line.
   Pill label already conveys the profile; these add an extra visual hint. */
.sd-edge.ep-polished_straight { stroke-linecap:butt; }
.sd-edge.ep-eased             { stroke-linecap:round; }
.sd-edge.ep-half_bullnose     { stroke-linecap:round; }
.sd-edge.ep-full_bullnose     { stroke-linecap:round; stroke-width:7 !important; }
.sd-edge.ep-ogee              { stroke-dasharray:8 4 2 4 !important; }
.sd-edge.ep-dupont            { stroke-dasharray:4 2 !important; }
.sd-edge.ep-cove_dupont       { stroke-dasharray:4 2 10 2 !important; }
.sd-edge.ep-mitered_45        { stroke-dasharray:6 3 !important; }
.sd-edge.ep-waterfall         { stroke-linecap:square; }
.sd-edge.ep-chiseled          { stroke-dasharray:2 2 !important; }

/* seam auto-mark */
.seamBtnWrap-base { margin-top:8px; } /* uses .hidden */
.seam-btn {
  width:100%; padding:7px; background:var(--error-a10); color:var(--error);
  border:1.5px solid var(--error-a35); border-radius:var(--radius);
  font-family:var(--sans); font-weight:600; font-size:12px; cursor:pointer; transition:all .12s;
}
.seam-btn:hover { background:var(--error-a20); }

/* nest result */
/* nestSec uses .hidden class */
.nest-banner {
  background:var(--bid-gold-a12); border:1px solid var(--bid-gold-a30);
  border-radius:var(--radius); padding:8px 10px; font-size:11.5px; color:var(--warning); line-height:1.4;
}

/* legend */
.legend      { display:flex; flex-direction:column; gap:6px; }
.leg-row     { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text2); }
.leg-line    { height:4px; width:26px; border-radius:var(--radius-sm); flex-shrink:0; }
.leg-name    { font-weight:600; font-size:11.5px; }
.leg-desc    { font-size:10.5px; color:var(--muted); }
.leg-fin     { background:var(--fin); }
.leg-seam    { border-top:3px dashed var(--seam); height:0; margin-top:2px; }
.leg-cut     { background:var(--cut); }
.leg-miter   { background:var(--miter); }
.leg-ref     { background:var(--ref); opacity:.6; }
.leg-lam     { background:var(--lam); }
.leg-name-fin   { color:var(--fin);   }
.leg-name-seam  { color:var(--seam);  }
.leg-name-cut   { color:var(--cut);   }
.leg-name-miter { color:var(--miter); }
.leg-name-ref   { color:var(--ref);   }
.leg-name-lam   { color:var(--lam);   }
.leg-profile-title {
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); padding:10px 0 4px; margin-top:6px;
  border-top:1px solid var(--border); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.leg-profiles { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.leg-profiles .leg-line { background:var(--accent, var(--accent)); opacity:.75; }
.leg-profiles .leg-line[data-profile="polished_straight"] { background:var(--edge-prof-polished); }
.leg-profiles .leg-line[data-profile="eased"]             { background:var(--edge-prof-eased); }
.leg-profiles .leg-line[data-profile="half_bullnose"]     { background:var(--edge-prof-half-bull); }
.leg-profiles .leg-line[data-profile="demi_bullnose"]     { background:var(--edge-prof-demi-bull); }
.leg-profiles .leg-line[data-profile="full_bullnose"]     { background:var(--edge-prof-full-bull); height:6px; }
.leg-profiles .leg-line[data-profile="ogee"]              { background:var(--edge-prof-ogee); }
.leg-profiles .leg-line[data-profile="dupont"]            { background:var(--fallback-error); }
.leg-profiles .leg-line[data-profile="cove_dupont"]       { background:var(--edge-prof-cove-dupont); }
.leg-profiles .leg-line[data-profile="mitered_45"]        { background:var(--edge-prof-mitered); }
.leg-profiles .leg-line[data-profile="waterfall"]         { background:var(--edge-prof-waterfall); }
.leg-profiles .leg-line[data-profile="chiseled"]          { background:var(--edge-prof-chiseled); }
/* Front-edge selector buttons */
.fe-btn { font-size:10px; padding:3px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
          cursor:pointer; background:var(--raised); color:var(--text2); transition:.12s; }
.fe-btn:hover { border-color:var(--lam); color:var(--lam); }
.fe-btn.fe-active { background:var(--lam-a15); border-color:var(--lam); color:var(--lam); font-weight:600; }

/* fracinput */
.fracinput { font-family:var(--mono) !important; font-size:13px !important; letter-spacing:0.3px; }
.fracinput::placeholder { color:var(--border-dk); font-size:11px; font-style:italic; }
.fracinput:focus { background:var(--surface) !important; }

/* utils */
.hidden { display:none !important; }

/* ─────────────────────────────────────────
   QUICK ADD — bulk measurement entry modal
   ───────────────────────────────────────── */
.quick-add-row {
  display:flex; gap:6px; margin:8px 0;
}
.qa-open-btn, .qa-tpl-btn {
  flex:1 1 auto; justify-content:center; gap:6px;
  font-size:12px; padding:8px 10px;
}
.qa-open-btn svg, .qa-tpl-btn svg { flex-shrink:0; }

.qa-modal {
  position:fixed; inset:0; z-index:99990;
  background:var(--black-a50);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.qa-box {
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 24px 60px var(--black-a35);
  width:min(760px, 100%); max-height:90vh;
  display:flex; flex-direction:column;
}
.qa-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.qa-title { font-size:16px; font-weight:700; margin:0; }
.qa-close {
  background:transparent; border:none; color:var(--muted);
  font-size:24px; cursor:pointer; padding:4px 10px; border-radius:var(--radius-sm);
  line-height:1;
}
.qa-close:hover { background:var(--panel); color:var(--text); }
.qa-body {
  padding:14px 18px; overflow-y:auto; flex:1 1 auto;
  display:flex; flex-direction:column; gap:12px;
}
.qa-hint {
  font-size:12px; color:var(--text2); line-height:1.45;
}
.qa-hint code {
  background:var(--panel); padding:1px 5px; border-radius:3px;
  font-family:var(--mono); font-size:11px;
}
.qa-text {
  width:100%; min-height:150px; padding:10px 12px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:13px; line-height:1.55;
  resize:vertical;
}
.qa-text:focus { outline:none; border-color:var(--accent, var(--accent)); background:var(--surface); }
.qa-results {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.qa-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.qa-col-label {
  font-size:10.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted);
}
.qa-preview, .qa-errors {
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); padding:8px; max-height:180px; overflow-y:auto;
  font-family:var(--mono); font-size:12px; line-height:1.55;
}
.qa-empty { color:var(--muted); font-style:italic; font-family:inherit; padding:4px; }
.qa-row { padding:3px 4px; border-bottom:1px solid var(--border); }
.qa-row:last-child { border-bottom:none; }
.qa-more { color:var(--muted); font-style:italic; }
.qa-err {
  padding:4px 6px; color:var(--error, var(--fallback-error));
  border-left:3px solid var(--error, var(--fallback-error));
  margin-bottom:2px; background:var(--error-a05);
}
.qa-foot {
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 18px; border-top:1px solid var(--border); background:var(--bg);
}
.qa-foot .btn { padding:9px 18px; }
.qa-foot .btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ─────────────────────────────────────────
   ONBOARDING OVERLAY — 4 skippable steps
   ───────────────────────────────────────── */
.onb-overlay {
  position:fixed; inset:0; z-index:99995;
  background:var(--black-a60);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.onb-box {
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 30px 80px var(--black-a45);
  width:min(640px, 100%); max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column;
}
#onboardingBody { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.onb-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 10px;
}
.onb-step { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.onb-close {
  background:transparent; border:none; color:var(--muted);
  font-size:26px; cursor:pointer; padding:0 8px; line-height:1;
}
.onb-close:hover { color:var(--text); }
.onb-dots { display:flex; gap:6px; padding:0 20px 12px; }
.onb-dot {
  width:24px; height:4px; border-radius:2px; background:var(--border);
  transition:background .15s;
}
.onb-dot.active { background:var(--accent, var(--accent)); }
.onb-dot.done { background:var(--success, var(--fallback-success)); }
.onb-body-inner {
  padding:8px 24px 16px; overflow-y:auto; flex:1 1 auto; min-height:0;
}
.onb-title { font-size:22px; font-weight:700; margin:6px 0 6px; }
.onb-sub { color:var(--text2); font-size:14px; margin:0 0 18px; line-height:1.5; }
.onb-field { margin-bottom:14px; }
.onb-field label {
  display:block; font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.onb-field input {
  width:100%; padding:11px 14px; font-size:15px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text);
}
.onb-field input:focus { outline:none; border-color:var(--accent, var(--accent)); background:var(--surface); }
.onb-dims { display:flex; align-items:flex-end; gap:10px; margin-bottom:12px; }
.onb-dims .onb-field { flex:1 1 auto; margin:0; }
.onb-dim-x { font-size:22px; color:var(--muted); padding-bottom:10px; }
.onb-actions-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.onb-tiles {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px;
}
.onb-tile {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; padding:20px 12px;
  border:2px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text); cursor:pointer;
  transition:all .15s; font-family:inherit;
}
.onb-tile:hover {
  border-color:var(--accent, var(--accent));
  background:var(--accent-a05);
  transform:translateY(-2px);
}
.onb-tile-icon { font-size:28px; }
.onb-tile-title { font-size:14px; font-weight:700; }
.onb-tile-sub { font-size:11.5px; color:var(--text2); line-height:1.4; }
.onb-foot {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg);
}
.onb-foot-right { display:flex; align-items:center; gap:12px; }
.onb-skip {
  background:transparent; border:none; color:var(--muted);
  font-size:12.5px; cursor:pointer; text-decoration:underline;
}
.onb-skip:hover { color:var(--text2); }
body.sd-onboarding-open .mob-fab-group,
body.sd-onboarding-open .mob-fab-tray,
body.sd-onboarding-open .mob-fab-backdrop { display:none !important; }
body.sd-onboarding-open { overflow:hidden !important; }

/* ─────────────────────────────────────────
   3D ASSEMBLY VIEW
   ───────────────────────────────────────── */
.asm3d-overlay {
  position:fixed; inset:0; z-index:99980;
  background:var(--bg, var(--fallback-bg-dark1));
  display:flex; flex-direction:column;
}
.asm3d-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; height:52px;
  background:var(--surface, var(--black-a60)); border-bottom:1px solid var(--border, var(--white-a08));
  flex-shrink:0; z-index:2;
}
.asm3d-toolbar-left, .asm3d-toolbar-right { display:flex; gap:8px; align-items:center; }
.asm3d-toolbar-title {
  font-size:14px; font-weight:700; color:var(--text, var(--white-a90));
  letter-spacing:0.5px; text-transform:uppercase;
}
.asm3d-btn {
  padding:7px 14px; font-size:12px; font-weight:600;
  border:1px solid var(--border, var(--white-a20)); border-radius:6px;
  background:var(--raised, var(--white-a06)); color:var(--text, var(--white-a85));
  cursor:pointer; font-family:inherit; transition:all .12s;
}
.asm3d-btn:hover { background:var(--hover-bg, var(--white-a12)); border-color:var(--border-dk, var(--white-a35)); }
.asm3d-btn--primary { background:var(--accent, var(--accent)); border-color:var(--accent, var(--accent)); color:var(--on-accent); }
.asm3d-btn--primary:hover { filter:brightness(1.15); }
#asm3dCanvas {
  flex:1 1 auto; display:block; width:100%; cursor:grab;
}
#asm3dCanvas:active { cursor:grabbing; }
.asm3d-hint {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--muted, var(--white-a35));
  background:var(--panel, var(--black-a40)); padding:6px 14px; border-radius:20px;
  pointer-events:none; z-index:2;
}
body.sd-3d-open .mob-fab-group { display:none !important; }
body.sd-3d-open { overflow:hidden !important; }
.asm3d-open-btn { font-weight:600; }
.asm3d-label {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  background:var(--black-a80); color:var(--on-accent); padding:10px 16px;
  border-radius:8px; font-size:13px; line-height:1.5;
  pointer-events:none; opacity:0; transition:opacity .15s;
  text-align:center; z-index:3; max-width:280px;
  backdrop-filter:blur(8px);
}
.asm3d-label.visible { opacity:1; }
.asm3d-label strong { font-size:14px; }
.asm3d-label-role {
  display:inline-block; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px;
  background:var(--asm3d-cut-label); padding:1px 6px;
  border-radius:3px; margin-left:4px; vertical-align:middle;
}
.asm3d-label-cut { color:var(--white-a50); font-size:11px; }
.asm3d-layout-panel {
  flex:1 1 auto; display:flex; flex-direction:column;
  background:var(--bg, var(--fallback-bg-dark2)); position:relative;
}
.asm3d-layout-panel.hidden { display:none; }
#asm3dLayoutCanvas {
  flex:1 1 auto; display:block; cursor:grab; touch-action:none;
}
#asm3dLayoutCanvas:active { cursor:grabbing; }
.asm3d-layout-hint {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--white-a40);
  background:var(--black-a50); padding:6px 14px; border-radius:20px;
  pointer-events:none; z-index:2;
}
.asm3d-layout-done {
  position:absolute; bottom:20px; right:20px; z-index:2;
  padding:10px 20px !important; font-size:14px !important;
}

/* 3D action bar — compact top-center pill shown when a piece is tapped */
.asm3d-top-bar {
  position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 12px; border-radius:10px;
  background:var(--asm3d-toolbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--white-a12);
  box-shadow:0 6px 20px var(--black-a35);
  font-family:inherit; max-width:calc(100vw - 24px);
}
.asm3d-top-bar.hidden { display:none; }
.asm3d-tb-info { display:flex; flex-direction:column; gap:0; margin-right:6px; min-width:90px; }
.asm3d-tb-name { font-size:12px; font-weight:700; color:var(--on-accent); line-height:1.1; }
.asm3d-tb-dims { font-size:10px; color:var(--white-a55); line-height:1.2; }
.asm3d-tb-btn {
  padding:6px 10px; font-size:12px; font-weight:600;
  border:1px solid var(--white-a18); border-radius:6px;
  background:var(--white-a06); color:var(--white-a92);
  cursor:pointer; font-family:inherit; min-height:34px; transition:background .12s, border-color .12s;
}
.asm3d-tb-btn:hover { background:var(--white-a12); border-color:var(--white-a35); }
.asm3d-tb-btn.is-active { background:var(--success-a35); border-color:var(--success-a60); color:var(--on-accent); }
.asm3d-tb-btn--close { padding:6px 10px; font-weight:700; }

/* Directional rotation triplets — 3 axis-tinted icon buttons per axis, no
   text labels. Color convention: Y green (yaw/spin), X red (pitch/tip), Z
   blue (roll). Each button carries a small axis-letter badge in its top-right
   corner so every button is individually self-describing — the user doesn't
   have to infer which axis from the group's tint alone. */
.asm3d-tb-grp {
  display:flex; align-items:center; gap:4px;
  padding:4px; border-radius:9px;
  border:1px solid var(--white-a10);
  background:var(--white-a03);
}
.asm3d-tb-btn--icon {
  position:relative; padding:6px; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.asm3d-tb-btn--icon svg { width:26px; height:26px; display:block; }
.asm3d-tb-axis-badge {
  position:absolute; top:2px; right:3px;
  font-size:9px; font-weight:800; letter-spacing:0;
  line-height:1; padding:1px 3px; border-radius:3px;
  background:var(--white-a12); color:var(--white-a92);
  pointer-events:none; user-select:none;
}
.asm3d-tb-btn--axis-y .asm3d-tb-axis-badge { background:var(--asm3d-y-a35); color:var(--asm3d-y-icon); }
.asm3d-tb-btn--axis-x .asm3d-tb-axis-badge { background:var(--red2-a35);    color:var(--asm3d-x-icon); }
.asm3d-tb-btn--axis-z .asm3d-tb-axis-badge { background:var(--asm3d-z-a35); color:var(--asm3d-z-icon); }

/* Advanced row — hidden by default. Revealed when the toolbar carries
   .is-adv-open (toggled by the "Advanced" button). Full-width inside the
   flex-wrap toolbar so the three axis triplets sit on their own row below
   the primary controls, preserving the per-axis color tinting the power
   user learned in the old UI. */
.asm3d-tb-adv-row {
  display:none;
  flex-basis:100%; width:100%;
  gap:6px; align-items:center; flex-wrap:wrap;
  margin-top:4px; padding-top:6px;
  border-top:1px solid var(--white-a12);
}
.asm3d-top-bar.is-adv-open .asm3d-tb-adv-row { display:flex; }

/* Y axis — vertical spin (green) */
.asm3d-tb-grp--y                       { border-color:var(--asm3d-y-a35); background:var(--asm3d-y-a06); }
.asm3d-tb-grp--y .asm3d-tb-btn--icon   { color:var(--asm3d-y-icon); border-color:var(--asm3d-y-a30); background:var(--asm3d-y-a06); }
.asm3d-tb-grp--y .asm3d-tb-btn--icon:hover { background:var(--asm3d-y-a18); border-color:var(--asm3d-y-a60); }

/* X axis — pitch/tip (red) */
.asm3d-tb-grp--x                       { border-color:var(--red2-a35); background:var(--red2-a06); }
.asm3d-tb-grp--x .asm3d-tb-btn--icon   { color:var(--asm3d-x-icon); border-color:var(--red2-a30); background:var(--red2-a06); }
.asm3d-tb-grp--x .asm3d-tb-btn--icon:hover { background:var(--red2-a18); border-color:var(--red2-a60); }

/* Z axis — roll (blue) */
.asm3d-tb-grp--z                       { border-color:var(--asm3d-z-a35); background:var(--asm3d-z-a06); }
.asm3d-tb-grp--z .asm3d-tb-btn--icon   { color:var(--asm3d-z-icon); border-color:var(--asm3d-z-a30); background:var(--asm3d-z-a06); }
.asm3d-tb-grp--z .asm3d-tb-btn--icon:hover { background:var(--asm3d-z-a18); border-color:var(--asm3d-z-a60); }

/* Onboarding Step 2 — inline customer search + add */
.onb-cust-linked {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; margin-bottom:14px;
  background:var(--success-a08); border:1.5px solid var(--success-a35);
  border-radius:var(--radius);
}
.onb-cust-badge {
  flex:1; font-size:14px; font-weight:600; color:var(--success, var(--fallback-success));
}
.onb-cust-search-wrap { margin-bottom:10px; }
.onb-cust-search-wrap input {
  width:100%; padding:11px 14px; font-size:14px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--text);
}
.onb-cust-search-wrap input:focus { outline:none; border-color:var(--accent, var(--accent)); background:var(--surface); }
.onb-cust-results {
  max-height:200px; overflow-y:auto; margin-bottom:8px;
}
.onb-cust-row {
  display:block; width:100%; text-align:left;
  padding:10px 12px; border:none; border-bottom:1px solid var(--border);
  background:var(--bg); color:var(--text); cursor:pointer; transition:background .1s;
  font-family:inherit; font-size:13px; min-height:44px;
}
.onb-cust-row:hover { background:var(--panel); }
.onb-cust-row:last-child { border-bottom:none; }
.onb-cust-row-name { font-weight:600; }
.onb-cust-row-meta { font-size:11.5px; color:var(--muted); margin-top:2px; }
.onb-cust-noresult { padding:10px; font-size:12px; color:var(--muted); font-style:italic; }
.onb-cust-new-toggle {
  display:inline-block; padding:6px 0; margin-bottom:10px;
  background:transparent; border:none; color:var(--accent, var(--accent));
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.onb-cust-new-toggle:hover { text-decoration:underline; }
.onb-cust-form { margin-bottom:10px; }
.onb-cust-form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;
}
.onb-cust-form .onb-field { margin-bottom:0; }
.onb-cust-form-actions {
  display:flex; gap:10px; margin-top:10px;
}

/* ─────────────────────────────────────────
   BID PANEL
───────────────────────────────────────── */
.bid-tab {
  display:inline-flex; align-items:center; gap:5px;
  padding:0 16px; margin-bottom:-2px;
  border:none; border-bottom:3px solid transparent;
  font-size:12.5px; font-weight:600; color:var(--warning);
  cursor:pointer; white-space:nowrap; transition:all .12s;
  background:none; flex-shrink:0;
}
.bid-tab:hover { background:var(--bid-gold-a08); }
.bid-tab.active { color:var(--warning); border-bottom-color:var(--warning); background:var(--surface); }

.bid-panel {
  display:none; flex:1; flex-direction:column; overflow:hidden; background:var(--bg);
}
.bid-panel.active { display:flex; }
.bid-scroll { flex:1; overflow-y:auto; }

.settings-panel {
  display:none; flex:1; overflow-y:auto; background:var(--bg);
  flex-direction:column;
}
.settings-panel.active { display:flex; }
.settings-wrap { max-width:960px; margin:0 auto; padding:24px 28px; width:100%; }
.settings-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:20px; }
.settings-header h2 { font-size:22px; font-weight:600; color:var(--text); margin:0; }
.settings-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:20px; overflow:hidden; }
.settings-section-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--border); }
.settings-section-hdr h3 { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text2); margin:0; }
.settings-body { padding:18px 20px; display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.settings-body.single { grid-template-columns:1fr; }
.settings-field { display:flex; flex-direction:column; gap:5px; }
.settings-field.full { grid-column:1/-1; }
.settings-field label { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.settings-field input, .settings-field select {
  width:100%; background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 10px; font-family:var(--mono);
  font-size:13px; color:var(--text); outline:none; box-sizing:border-box;
}
.settings-field input:focus, .settings-field select:focus { border-color:var(--accent2); }
.settings-hint { font-size:12px; color:var(--muted); grid-column:1/-1; margin:0 0 12px; line-height:1.5; }
.settings-hint--mb0 { margin-bottom:0; }
.cust-st-key { font-size:10px; color:var(--muted); font-family:var(--mono); }
.settings-save-btn { padding:8px 20px; font-size:13px; font-weight:600; border:none; border-radius:var(--radius); background:var(--accent); color:var(--on-accent); cursor:pointer; }
.settings-save-btn:disabled { opacity:.6; cursor:default; }
.settings-field input[type="password"] { letter-spacing:0.1em; }
.settings-test-btn {
  padding:7px 16px; font-size:12px; font-weight:600;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; color:var(--text2);
  transition:all .12s; white-space:nowrap;
}
.settings-test-btn:hover { border-color:var(--accent2); color:var(--accent2); }
.settings-logo-row { display:flex; align-items:center; gap:10px; }
.settings-smtp-note { font-size:11px; color:var(--muted); line-height:1.6; padding:10px 20px 14px; border-top:1px solid var(--border); }

/* ── Settings: left-tab layout ───────────────────────────────────────── */
.settings-layout { display:flex; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; min-height:420px; }
.stab-nav { width:148px; flex-shrink:0; border-right:1px solid var(--border); padding:8px 0; background:var(--panel); align-self:stretch; }
.stab-btn { display:block; width:100%; text-align:left; padding:9px 16px; font-size:13px; font-weight:500; color:var(--text2); background:none; border:none; cursor:pointer; transition:background .12s,color .12s; position:relative; }
.stab-btn:hover { background:var(--hover-bg); color:var(--text); }
.stab-btn.active { color:var(--accent); font-weight:600; background:var(--accent-a07); }
.stab-btn.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.stab-sep { height:1px; background:var(--border); margin:6px 0; }
.stab-content { flex:1; padding:20px 24px 32px; min-width:0; overflow-y:auto; }
.stab-pane { display:none; }
.stab-pane.active { display:block; }
/* User row in admin tab */
.admin-user-row { display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid var(--border); }
.admin-user-row:last-child { border-bottom:none; }
.admin-avatar { width:32px; height:32px; border-radius:50%; background:var(--accent-a13); border:1.5px solid var(--accent-a22); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--accent); flex-shrink:0; text-transform:uppercase; }
.admin-badge { display:inline-block; font-size:9px; font-weight:600; color:var(--admin-badge-fg); background:var(--warning-a10); border:1px solid var(--warning-a25); border-radius:var(--radius-lg); padding:1px 6px; margin-left:5px; text-transform:uppercase; letter-spacing:.4px; vertical-align:middle; }
.admin-user-actions { display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; }

/* Plan badges (settings admin panel) */
.plan-badge { display:inline-block; font-size:9px; font-weight:800; border-radius:var(--radius-lg); padding:1px 7px; margin-left:5px; text-transform:uppercase; letter-spacing:.4px; vertical-align:middle; }
.plan-badge-free { background:var(--raised); color:var(--muted); border:1px solid var(--border); }
.plan-badge-paid { background:linear-gradient(135deg,var(--accent),var(--pro-gradient-end)); color:var(--on-accent); border:none; }

/* Plan editor inline */
.plan-editor { margin:0; padding:0 18px; display:none; }
.plan-editor-inner { padding:12px 0 14px; border-bottom:1px solid var(--border); }
.plan-radio-lbl {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 18px; border:1.5px solid var(--border); border-radius:var(--radius);
  cursor:pointer; transition:border-color 0.15s, background 0.15s;
}
.plan-radio-lbl input { display:none; }
.plan-radio-lbl.active { border-color:var(--accent,var(--accent)); background:var(--accent-a04); }
.plan-radio-lbl:hover  { border-color:var(--border-dk); }
@media(max-width:660px){
  .settings-layout { flex-direction:column; }
  .stab-nav { width:100%; border-right:none; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:2px; padding:8px 8px 0; }
  .stab-btn { padding:6px 10px; font-size:12px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
  .stab-btn.active::before { display:none; }
  .stab-sep { display:none; }
  .stab-content { padding:16px 16px 28px; }
}

.bid-wrap { max-width:100%; margin:0 auto; padding:16px 20px; width:100%; }
.bid-body { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.bid-col-main  { min-width:0; }
.bid-col-side  { min-width:0; position:sticky; top:12px; }
.bid-col-admin { min-width:0; grid-column:1; }

.bid-header {
  display:flex; flex-direction:column;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0; flex-shrink:0;
  box-shadow:0 1px 6px var(--black-a06);
}
.bid-header-row1 {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; gap:20px; border-bottom:1px solid var(--border);
}
.bid-header-row2 {
  display:flex; align-items:center; gap:6px;
  padding:8px 20px; flex-wrap:wrap; border-bottom:1px solid var(--border);
}
.bid-title-block h2 { font-size:18px; font-weight:600; color:var(--text); margin:0 0 2px; }
.bid-title-block p  { font-size:12px; color:var(--muted); margin:0; }
.bid-file-num { display:inline-block; font-size:10px; font-weight:600; color:var(--accent); letter-spacing:.5px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-sm); padding:2px 8px; margin-top:4px; }
.bid-file-num--mob { display:none; margin-top:0; margin-left:4px; align-self:center; }
/* ── Cost / margin columns ── */
.bid-cost-col { display:none; }
#bidPanel.bid-show-cost .bid-cost-col { display:table-cell; }
#bidPanel.bid-show-cost thead .bid-cost-col { font-size:8px; color:var(--warning); letter-spacing:.4px; }

/* ── Client autocomplete dropdown ── */
.clt-ac-wrap { position:relative; }
.clt-drop { position:absolute; top:calc(100% + 2px); left:0; right:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); z-index:300; box-shadow:0 6px 20px var(--black-a50); display:none; max-height:200px; overflow-y:auto; }
.clt-drop-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.clt-drop-item:last-child { border-bottom:none; }
.clt-drop-item:hover { background:var(--raised); }
.clt-drop-name { font-size:13px; font-weight:600; color:var(--text); }
.clt-drop-sub  { font-size:11px; color:var(--muted); margin-top:2px; }

.bid-nav-btns { display:flex; gap:6px; align-items:center; }
.bid-nav-btns .btn { width:auto; padding:6px 12px; margin-top:0; font-size:12px; }
.bid-action-btn {
  padding:6px 14px; font-size:12px; font-weight:500; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:all .1s;
}
.bid-action-btn:hover { opacity:0.85; }

/* pricing settings bar */
.bid-settings {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:14px;
}
.bid-setting label { display:block; font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.bid-setting-row { display:flex; gap:5px; align-items:center; }
.bid-setting-row input { flex:1; min-width:0; }
.bid-apply-btn { padding:4px 8px; font-size:10px; font-weight:500; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .1s; }
.bid-apply-btn:hover { opacity:0.85; }
.bid-setting input, .bid-setting select {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 10px; font-family:var(--mono);
  font-size:13px; color:var(--text); outline:none;
}
.bid-setting input:focus, .bid-setting select:focus { border-color:var(--accent); }

/* sections */
.bid-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; }
.bid-section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--border);
}
.bid-section-hdr h3 { font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
/* Consistent inner padding for section content that isn't a table */
.bid-section > div:not(.bid-section-hdr):not(.bid-tbl-scroll):not(.bid-quickadd):not(.bid-quickadd-more) { padding:12px 16px; }
.bid-section .photo-grid { padding:12px 16px; }
#bidPhotoEmpty { padding:20px 12px; text-align:center; cursor:pointer; color:var(--muted); font-size:12px; }
#bidPhotoEmpty:hover { background:var(--bg); }
#matOptionsList { padding:8px 12px; }
.bid-add-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; font-size:11px; font-weight:500; color:var(--text2);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; transition:all .1s;
}
.bid-add-btn:hover { border-color:var(--accent); color:var(--accent); }

/* line item table */
.bid-table { width:100%; border-collapse:collapse; }
.bid-table th {
  font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; background:var(--bg);
  color:var(--muted); text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.bid-table th.r, .bid-table td.r { text-align:right; }
.bid-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
/* Column minimums when empty — grow with content */
.bid-c1 { min-width:140px; } /* Description */
.bid-c2 { min-width:100px; } /* Dims/Notes */
.bid-c3 { min-width:50px; }  /* SqFt/Qty */
.bid-c4 { min-width:60px; }  /* Price */
.bid-c5 { min-width:60px; }  /* Cost */
.bid-c6 { min-width:60px; }  /* Margin */
.bid-c7 { min-width:80px; }  /* Amount */
.bid-c8 { min-width:30px; }  /* Delete */
.bid-tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Cols 1-2 wrap text. Cols 3-8 nowrap for numbers */
.bid-table td:nth-child(1), .bid-table td:nth-child(2) { white-space:normal; word-break:break-word; overflow-wrap:break-word; }
.bid-table td:nth-child(n+3) { white-space:nowrap; }

.bid-input {
  background:transparent; border:1px solid transparent;
  border-radius:var(--radius-sm); font-family:var(--mono); font-size:13px; color:var(--text);
  outline:none; width:100%; transition:background .1s, border-color .1s; padding:4px 6px;
  box-sizing:border-box;
}
.bid-input:hover { background:var(--bg); border-color:var(--border); }
.bid-input:focus { border-color:var(--accent); background:var(--bg); }
.bid-input.r { text-align:right; }
.bid-input.notes { resize:none; overflow:hidden; line-height:1.35; min-height:1.4em; white-space:pre-wrap; word-break:break-word; vertical-align:top; padding-top:1px; }

.bid-calc { color:var(--text2); font-family:var(--mono); font-size:12.5px; }
.bid-del { background:none; border:1px solid var(--border); color:var(--muted); cursor:pointer; font-size:13px; padding:4px 8px; border-radius:var(--radius-sm); display:inline-block; }
.bid-del:hover { color:var(--error); border-color:var(--error); background:var(--error-soft); }

/* 2-row line items */
.bid-input--sm { width:60px; }

/* Section headers inside the unified table */
.bid-sec-hdr-row td { padding:0; border-bottom:none; }
.bid-sec-hdr-row .bid-section-hdr { border-bottom:1px solid var(--border); border-top:1px solid var(--border); }
.bid-sec-hdr-row:first-child .bid-section-hdr { border-top:none; }
.bid-sec-hdr-row .bid-quickadd { border-bottom:1px solid var(--border); }
.bid-tfoot-row td { background:var(--bg); font-size:13px; font-weight:600; }

/* Line item table enhancements */
.bid-table .bid-line-desc { font-size:13px; font-weight:500; font-family:var(--sans); white-space:normal; overflow:visible; text-overflow:clip; }
.bid-table .bid-line-dims { font-size:11px; color:var(--text2); }
.bid-table .bid-line-sqft { font-family:var(--mono); font-size:11px; color:var(--text2); }
.bid-table .bid-line-notes { font-size:13px; color:var(--text2); font-family:var(--sans); background:transparent; border:none; outline:none; padding:2px 0; resize:none; overflow:visible; line-height:1.5; min-height:1.5em; width:100%; white-space:pre-wrap; word-break:break-word; field-sizing:content; }
.bid-table .bid-line-notes:hover, .bid-table .bid-line-notes:focus { background:var(--bg); color:var(--text); }
.bid-table .stone-margin, .bid-table .line-margin { font-family:var(--mono); font-size:10px; color:var(--muted); }
.margin-pos { color:var(--success) !important; }
.margin-neg { color:var(--error) !important; }
.bid-table .stone-amt, .bid-table .custom-amt { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text); }
.bid-table tfoot td { padding:9px 10px; background:var(--bg); border-top:1px solid var(--border); font-size:13px; font-weight:600; }
.bid-tfoot-lbl { color:var(--text); }
.bid-tfoot-val { font-family:var(--mono); }
.bid-tfoot-unit { color:var(--muted); font-size:11px; }

/* totals */
.bid-totals {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:14px;
}
.bid-total-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--border);
  font-size:14px;
}
.bid-total-row:last-child { border-bottom:none; }
.bid-total-row.grand {
  background:var(--accent); color:var(--on-accent);
  font-size:18px; font-weight:700; padding:14px 18px;
}
.bid-total-row.grand span { color:var(--white-a70); font-weight:400; font-size:12px; }
.bid-total-lbl { color:var(--muted); font-size:13px; font-weight:400; }
.bid-total-val { font-family:var(--mono); font-weight:600; font-size:14px; }
.bid-total-input {
  background:transparent; border:none; border-bottom:1.5px solid var(--white-a40);
  font-family:var(--mono); font-size:13px; color:var(--on-accent); outline:none;
  width:80px; text-align:right;
}
.bid-total-input:focus { border-bottom-color:var(--white-a80); }

/* quick-add buttons row */
.bid-quickadd {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 16px; border-bottom:1px solid var(--border);
  background:var(--bg);
}
.bid-quickadd-lbl { font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-right:2px; flex-shrink:0; }
.bid-quick-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; font-size:12px; font-weight:500; color:var(--text2);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; transition:all .1s; white-space:nowrap;
}
.bid-quick-btn:hover { border-color:var(--accent); color:var(--accent); }
.bid-more-btn {
  font-size:11px; font-weight:600; color:var(--accent); background:none; border:none;
  cursor:pointer; padding:2px 4px; white-space:nowrap; flex-shrink:0; letter-spacing:0.03em;
  text-decoration:underline; text-underline-offset:2px; margin-left:4px;
}
.bid-more-btn:hover { color:var(--accent2); }
.bid-quickadd-more {
  display:none; padding:10px 14px 12px; border-bottom:1px solid var(--border);
  background:var(--bg); gap:16px; flex-wrap:wrap;
}
.bid-quickadd-more.open { display:flex; }
.bid-more-group { display:flex; flex-direction:column; gap:5px; }
.bid-more-group-lbl {
  font-size:9.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.bid-more-btns { display:flex; flex-wrap:wrap; gap:5px; }

/* quote details (valid until + lead time) */
.quote-details-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.quote-detail-field {
  padding:10px 14px; border-right:1px solid var(--border);
}
.quote-detail-field:last-child { border-right:none; }
.quote-detail-field label {
  display:block; font-size:9px; font-weight:500; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.quote-detail-field input {
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--border);
  padding:3px 0; font-size:12px; font-family:var(--mono); color:var(--text); outline:none;
  transition:border-color .1s;
}
.quote-detail-field input:focus { border-bottom-color:var(--accent2); }
.quote-detail-field input::placeholder { color:var(--muted); font-family:var(--sans); font-size:12px; }

/* notes */
.bid-notes-area {
  width:calc(100% - 32px); min-height:100px; resize:vertical;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; font-family:var(--sans); font-size:13px;
  color:var(--text); outline:none; line-height:1.7;
  margin:14px 16px 16px; display:block; box-sizing:border-box;
}
.bid-notes-area:focus { border-color:var(--accent); }

/* payment schedule card */
.pay-sched-card {
  margin-top:10px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
}
.pay-sched-hdr {
  padding:10px 14px;
  font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border); background:var(--bg);
}
.pay-preset-row {
  display:flex; gap:0; padding:0; border:1px solid var(--border); border-radius:var(--radius); margin:10px 14px 8px; overflow:hidden;
}
.pay-preset-btn {
  flex:1; padding:8px 4px; text-align:center; font-size:11px; font-weight:600;
  background:var(--surface); border:none; border-right:1px solid var(--border);
  cursor:pointer; transition:all .1s; color:var(--text2);
}
.pay-preset-btn:last-child { border-right:none; }
.pay-preset-btn:hover  { background:var(--hover-bg); color:var(--text); }
.pay-preset-btn.active { background:var(--accent); color:var(--on-accent); }
.pay-milestone-list {
  display:flex; flex-direction:column; gap:8px; padding:4px 14px 10px;
}
.pay-milestone-row {
  display:flex; align-items:center; gap:8px;
}
.pay-milestone-pct {
  width:58px; padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--text);
  font-size:14px; font-family:var(--mono); text-align:right; flex-shrink:0;
}
.pay-milestone-pct.is-flat { width:68px; }
.pay-milestone-sign { color:var(--muted); font-size:12px; flex-shrink:0; }
/* Clickable type toggle — same size as the old % sign text */
.pay-milestone-type {
  background:none; border:none; padding:0 1px; cursor:pointer; flex-shrink:0;
  font-size:12px; font-weight:600; line-height:1; min-width:12px; text-align:center;
  color:var(--muted);
  transition:opacity .12s;
}
.pay-milestone-type:hover { opacity:0.65; }
.pay-milestone-type.is-flat    { color:var(--pay-flat-fg); }
.pay-milestone-type.is-balance { color:var(--pay-violet-fg); font-size:11px; }
.pay-balance-display {
  width:68px; padding:4px 5px; border:1px dashed var(--pay-violet-fg);
  border-radius:var(--radius-sm); background:var(--pay-violet-a06); color:var(--pay-violet-fg);
  font-size:11px; font-family:var(--mono); text-align:right;
  flex-shrink:0; white-space:nowrap; overflow:hidden;
}
.pay-milestone-label {
  flex:1; padding:8px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:14px;
}
.pay-milestone-del {
  width:22px; height:22px; border:none; border-radius:var(--radius-sm); line-height:1;
  background:transparent; color:var(--muted); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pay-milestone-del:hover { background:var(--red2-a10); color:var(--seam-err-fg); }
.pay-add-btn {
  font-size:11px; color:var(--accent); background:none;
  border:1px dashed var(--accent-a40); border-radius:var(--radius-sm);
  padding:3px 10px; cursor:pointer;
}
.pay-add-btn:hover { background:var(--accent-a06); }
.pay-validate { padding:2px 14px 6px; font-size:11px; }
.pay-validate-ok   { color:var(--pay-flat-fg); font-weight:600; }
.pay-validate-warn { color:var(--admin-badge-fg); font-weight:600; }
.pay-summary {
  border-top:1px solid var(--accent-a14);
  background:var(--black-a02);
}
.pay-sum-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 16px; border-bottom:1px solid var(--accent-a08);
}
.pay-sum-row:last-child { border-bottom:none; }
.pay-sum-label { font-size:12px; color:var(--muted); }
.pay-sum-pct   { font-size:10px; opacity:0.7; }
.pay-sum-amt   { font-size:13px; font-weight:500; color:var(--text); font-family:var(--mono); }
.pay-sum-first .pay-sum-amt { color:var(--accent); }
.pay-sum-first .pay-sum-label { color:var(--text); font-weight:400; }

/* payment methods */
.pay-grid {
  display:grid; grid-template-columns:1fr 1fr; padding:0;
}
.pay-row {
  display:flex; flex-direction:column; gap:3px;
  padding:7px 12px 6px; border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.pay-row:nth-child(even) { border-right:none; }
.pay-row:nth-last-child(-n+2):not(:nth-child(even)+*) { border-bottom:none; }
.pay-row:last-child { border-bottom:none; }
.pay-lbl {
  font-size:10px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.pay-input {
  width:100%; min-width:0; background:transparent; border:none; outline:none;
  font-size:11.5px; color:var(--text); font-family:var(--sans);
  padding:1px 0; border-bottom:1px solid transparent; transition:border-color .12s;
}
.pay-input::placeholder { color:var(--muted); }
.pay-input:focus { border-bottom-color:var(--accent2); }
.pay-input:hover { border-bottom-color:var(--border); }

/* Per-input save-state pill. Lets the user SEE the pay-method save fire
   and land — used to be a silent fire-and-forget POST that left users
   wondering whether their Zelle / Venmo handle was actually persisted. */
.pay-status {
  font-size:10px; font-weight:600; letter-spacing:0.4px;
  margin-top:2px; min-height:12px;
}
.pay-status--pending { color:var(--muted); }
.pay-status--ok      { color:#22a06b; }
.pay-status--err     { color:#dc4c4c; }

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE BID  (≤768px)
══════════════════════════════════════════ */

/* Legacy mobile quick-bid — always hidden, replaced by responsive bid */
#mobileBid { display:none !important; }

@media (max-width: 860px) {
  .bid-body { grid-template-columns:1fr; }
  .bid-col-side { position:static; }
}
@media (max-width: 480px) {
  .mb-row-3 { grid-template-columns:1fr 1fr; }
}

/* Column nav tabs — hidden on desktop */
.bid-col-tabs  { display:none; }
.bid-mob-nav   { display:none; }
.bid-mob-info  { display:none; }

/* Desktop defaults for mobile elements — overridden by css/mobile.css */
.h-hamburger { display:none; background:transparent; border:none; color:var(--text2); padding:6px 8px; cursor:pointer; border-radius:var(--radius-sm); }
.h-nav-group { display:contents; }
.h-nav-backdrop { display:none; position:fixed; inset:0; background:var(--black-a45); z-index:99000; opacity:0; transition:opacity .18s ease; }
.mob-fab-group { display:none !important; }

@media (max-width: 768px) {
  .hrow-1 { height:38px; padding:0 8px; }
  .hrow-2 { height:28px; padding:0 8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .hrow-2::-webkit-scrollbar { display:none; }
  .hrow-3 { height:38px; padding:0 8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .hrow-3::-webkit-scrollbar { display:none; }
  .h-brand { font-size:14px; }
  .app { height:calc(100vh - 104px); }

  /* Sidebars + canvas + FABs now in css/mobile.css */
  .slab-tabs { display:none; }

  /* Bid header row 1: compact */
  .bid-header-row1 { padding:8px 12px; gap:8px; }
  .bid-title-block h2 { font-size:15px; }
  .bid-title-block p  { display:none; }
  .bid-file-num:not(.bid-file-num--mob) { display:none; }
  .bid-file-num--mob { display:inline-block; }
  .bid-nav-btns .btn-back-canvas { display:none; }

  /* Mobile-only nav buttons */
  .bid-mob-nav  { display:flex !important; gap:5px; align-items:center; }

  /* Mobile-only job info inputs */
  .bid-mob-info {
    display:flex !important; flex-direction:column; gap:6px;
    padding:6px 12px; border-top:1px solid var(--border);
    background:var(--surface);
  }
  .bid-mob-info-row { display:flex; gap:8px; }
  .bid-mob-field {
    flex:1; padding:7px 10px; font-size:14px;
    background:var(--bg); border:1.5px solid var(--border);
    border-radius:var(--radius); color:var(--text); font-family:var(--sans);
    outline:none; min-width:0;
    -webkit-appearance:none;
  }
  .bid-mob-field:focus { border-color:var(--accent); }
  #mobBidStatus { width:100%; }

  /* Action buttons — horizontal scroll, no wrap */
  .bid-header-row2 {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:5px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:5px;
  }
  .bid-header-row2::-webkit-scrollbar { display:none; }

  /* Row 3 — hide complex share/status bar */
  .bid-header-row3 { display:none !important; }

  /* Column navigation tabs */
  .bid-col-tabs {
    display:flex;
    background:var(--panel);
    border-bottom:2px solid var(--border);
    flex-shrink:0;
    position:sticky; top:0; z-index:10;
  }
  .bid-col-tab {
    flex:1; padding:9px 4px; font-size:11px; font-weight:600;
    color:var(--muted); border:none; background:none; cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    transition:color .12s, border-color .12s; white-space:nowrap; text-align:center;
  }
  .bid-col-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

  /* Swipeable bid body */
  .bid-wrap { padding:0; max-width:100%; }
  .bid-body {
    display:flex;
    flex-direction:row;
    overflow-x:scroll;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:0;
    align-items:start;
    scrollbar-width:none;
  }
  .bid-body::-webkit-scrollbar { display:none; }

  .bid-col-meas,
  .bid-col-main,
  .bid-col-side,
  .bid-col-admin {
    min-width:100vw !important;
    width:100vw;
    flex-shrink:0;
    scroll-snap-align:start;
    padding:12px 14px calc(120px + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
  }

  /* Allow table scroll wrappers to work — section was clipping them */
  .bid-col-main .bid-section,
  .bid-col-side .bid-section,
  .bid-col-admin .bid-section { overflow:visible; }

  /* Bid tables: scroll horizontally, auto-size columns to content */
  .bid-tbl-scroll {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .bid-tbl-scroll .bid-table {
    table-layout:auto;
    width:auto;
    white-space:nowrap;
  }
  .bid-tbl-scroll .bid-table td { white-space:nowrap; }
}

/* Measurements column form fields (visible on mobile, desktop: col is hidden) */
.bid-col-meas { display:none; }
@media (max-width: 768px) {
  .bid-col-meas { display:block; }
  .mob-fields { display:flex; flex-direction:column; gap:12px; padding:14px; }
  .mob-field-row { display:flex; flex-direction:column; gap:5px; }
  .mob-field-row label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
  .mob-field-row input,
  .mob-field-row select {
    padding:10px 12px; font-size:15px; font-family:var(--sans);
    background:var(--bg); border:1.5px solid var(--border);
    border-radius:var(--radius); color:var(--text); outline:none;
    width:100%; box-sizing:border-box; -webkit-appearance:none;
  }
  .mob-field-row input:focus,
  .mob-field-row select:focus { border-color:var(--accent); }
  .mob-field-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  /* Hide frac-preview when empty — was showing as blank strip */
  .mob-fields .frac-preview:empty { display:none; }
  .mob-piece-row {
    display:flex; align-items:center; gap:8px;
    padding:9px 12px; border-bottom:1px solid var(--border);
    font-size:13px;
  }
  .mob-piece-dot { width:10px; height:10px; border-radius:var(--radius-sm); flex-shrink:0; }
  .mob-piece-name { flex:1; font-weight:600; color:var(--text); }
  .mob-piece-dim { font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; }
  .mob-piece-del { background:none; border:none; font-size:18px; color:var(--muted); cursor:pointer; padding:0 4px; line-height:1; }
  .mob-piece-del:hover { color:var(--error); }
}
#mobileBid {
  display:none;
  flex-direction:column;
  min-height:100vh;
  background:var(--bg);
  font-family:var(--sans);
}
.mb-header {
  background:var(--accent); color:var(--on-accent);
  padding:14px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.mb-logo { font-size:20px; font-weight:600; letter-spacing:-0.5px; }
.mb-logo span { opacity:0.7; }
.mb-saved { font-size:11px; opacity:0; transition:opacity 1.5s; color:var(--text); }
.mb-body { padding:12px; display:flex; flex-direction:column; gap:12px; padding-bottom:90px; }
.mb-card { background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; }
.mb-card-hdr {
  padding:12px 16px 10px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.mb-card-hdr h3 { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin:0; }
.mb-card-body { padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.mb-row { display:flex; flex-direction:column; gap:4px; }
.mb-row label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
.mb-input {
  width:100%; padding:12px 13px; font-size:16px;
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:var(--sans); outline:none;
  -webkit-appearance:none; box-sizing:border-box;
}
.mb-input:focus { border-color:var(--accent); background:var(--surface); }
.mb-input-terms { min-height:90px; resize:none; overflow:hidden; }
.mb-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mb-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.mb-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 16px; border-radius:var(--radius-lg); font-size:16px; font-weight:600;
  border:none; cursor:pointer; width:100%; font-family:var(--sans); letter-spacing:-0.2px;
}
.mb-btn-primary { background:var(--accent); color:var(--on-accent); }
.mb-btn-secondary { background:var(--raised); color:var(--text); border:1.5px solid var(--border); }
.mb-btn-sm {
  padding:9px 14px; font-size:13px; border-radius:var(--radius); font-weight:600;
  border:1.5px solid var(--border); background:var(--raised); color:var(--text);
  cursor:pointer; font-family:var(--sans);
}
.mb-btn-accent-sm { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.mb-chips { display:flex; flex-wrap:wrap; gap:7px; padding-bottom:2px; }
.mb-chip {
  padding:8px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600;
  background:var(--raised); border:1.5px solid var(--border); color:var(--text2);
  cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.mb-piece-list, .mb-svc-list { display:flex; flex-direction:column; gap:7px; }
.mb-piece-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--bg); border-radius:var(--radius); border:1px solid var(--border);
}
.mb-piece-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.mb-piece-info { flex:1; min-width:0; }
.mb-piece-name { font-size:14px; font-weight:600; color:var(--text); }
.mb-piece-dims { font-size:12px; color:var(--muted); margin-top:1px; }
.mb-piece-del, .mb-svc-del { background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; padding:0 4px; line-height:1; }
.mb-svc-row {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; background:var(--bg); border-radius:var(--radius); border:1px solid var(--border);
}
.mb-svc-name { flex:1; font-size:13px; font-weight:600; color:var(--text); min-width:0; }
.mb-svc-qty  { width:62px; padding:7px 9px; font-size:14px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); text-align:right; font-family:var(--mono); }
.mb-svc-price { width:90px; padding:7px 9px; font-size:14px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); text-align:right; font-family:var(--mono); }
.mb-totals { display:flex; flex-direction:column; }
.mb-total-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.mb-total-row:last-child { border-bottom:none; }
.mb-total-lbl { font-size:13px; color:var(--muted); }
.mb-total-val { font-size:14px; font-weight:600; color:var(--text); font-family:var(--mono); }
.mb-total-row.mb-grand { background:var(--accent-a05); }
.mb-total-row.mb-grand .mb-total-lbl { color:var(--accent); font-weight:600; font-size:15px; }
.mb-total-row.mb-grand .mb-total-val { color:var(--accent); font-size:18px; }
.mb-deposit-box {
  margin:0 16px 14px; padding:0; border-radius:var(--radius-lg);
  border:1.5px solid var(--accent); background:var(--accent-a04); overflow:hidden;
}
.mb-dep-row { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; }
.mb-dep-row + .mb-dep-row { border-top:1px solid var(--accent-a15); }
.mb-dep-lbl { font-size:13px; font-weight:600; color:var(--text2); }
.mb-dep-val { font-size:15px; font-weight:600; color:var(--text); font-family:var(--mono); }
.mb-send-status {
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--accent-a10); color:var(--accent);
}
.mb-bottom-bar {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface); border-top:2px solid var(--border);
  padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:8px; z-index:200;
}

/* ── PHOTO UPLOAD SECTION ─────────────────────────────────── */
.photo-upload-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; height:28px;
  background:var(--raised); border:1px solid var(--border-dk);
  border-radius:var(--radius-sm); color:var(--text2); font-size:11.5px; font-weight:600;
  cursor:pointer; transition:background .12s; white-space:nowrap; flex-shrink:0;
}
.photo-upload-btn:hover { background:var(--border); color:var(--text); }
.photo-upload-btn input[type=file] { display:none; }
.photo-grid { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; }
.photo-thumb {
  position:relative; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface);
  display:flex; flex-direction:column; align-items:stretch;
  width:130px; overflow:visible;
}
.photo-thumb img {
  width:130px; height:88px; object-fit:cover;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; display:block;
}
.photo-thumb .photo-remove {
  position:absolute; top:-6px; right:-6px;
  width:16px; height:16px; border-radius:50%;
  background:var(--text2); color:var(--on-accent); border:none;
  font-size:10px; line-height:16px; text-align:center;
  cursor:pointer; padding:0; font-weight:600; opacity:.7;
}
.photo-thumb .photo-remove:hover { background:var(--error); opacity:1; }
.photo-thumb .photo-lbl-input {
  width:100%; font-size:10.5px; padding:4px 7px;
  border:none; border-top:1px solid var(--border);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:var(--panel); color:var(--text2);
  font-family:var(--sans); text-align:center;
}

/* ── CRM DRAWER ─────────────────────────────────────────── */
#crmLinkBtn {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 9px; height:24px;
  font-size:11px; font-weight:500; color:var(--text2);
  cursor:pointer; flex-shrink:0; white-space:nowrap;
}
#crmLinkBtn:hover { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
#crmLinkBtn svg { stroke:currentColor; flex-shrink:0; }

#crmBadge {
  display:none; align-items:center; gap:6px;
  background:var(--accent-a16); border:1px solid var(--accent-a32);
  border-radius:var(--radius-sm); padding:0 8px; height:24px;
  font-size:11.5px; color:var(--on-accent); max-width:220px; flex-shrink:0;
}
#crmBadge.active { display:inline-flex; }
#crmBadgeName { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
#crmBadgeSave {
  background:var(--accent-a55); border:none; border-radius:var(--radius-sm);
  color:var(--on-accent); font-size:10px; font-weight:600; padding:3px 8px; cursor:pointer; flex-shrink:0;
}
#crmBadgeSave:hover { background:var(--accent-a85); }
#crmBadgeClose { cursor:pointer; color:var(--muted); font-size:16px; line-height:1; flex-shrink:0; }
#crmBadgeClose:hover { color:var(--on-accent); }
.crm-hbtn {
  display:inline-flex; align-items:center; gap:4px;
  height:24px; padding:0 9px; border-radius:var(--radius-sm); border:1px solid var(--accent-a40);
  background:var(--accent-a14); color:var(--text);
  font-family:var(--sans); font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.crm-hbtn:hover { background:var(--accent-a28); color:var(--on-accent); }
/* Quote badge + button */
.hbtn.quote-btn { background:var(--raised); color:var(--text2); border-color:var(--border); }
.hbtn.quote-btn:hover { background:var(--border); color:var(--text); }
#quoteBadge {
  display:none; align-items:center; gap:5px;
  background:var(--violet-a18); border:1px solid var(--violet-a35);
  border-radius:var(--radius-sm); padding:0 8px; height:24px;
  font-size:11.5px; color:var(--on-accent); flex-shrink:0;
}
#quoteBadge.active { display:inline-flex; }
#quoteBadgeNum { font-weight:600; color:var(--quote-badge-num-fg); flex-shrink:0; }
#quoteBadgeSave {
  background:var(--violet-a50); border:none; border-radius:var(--radius-sm);
  color:var(--on-accent); font-size:10px; font-weight:600; padding:3px 8px; cursor:pointer; flex-shrink:0;
}
#quoteBadgeSave:hover { background:var(--violet-a80); }
#quoteBadgeClose { cursor:pointer; color:var(--muted); font-size:16px; line-height:1; flex-shrink:0; }
#quoteBadgeClose:hover { color:var(--on-accent); }
/* Quotes list modal */
#quotesModal {
  display:none; position:fixed; inset:0; background:var(--black-a50);
  z-index:902; align-items:center; justify-content:center;
}
#quotesModal.open { display:flex; }
#quotesBox {
  background:var(--surface); border-radius:var(--radius-lg); width:min(820px,92vw); height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px var(--black-a25); font-family:var(--sans);
}
.quotes-head {
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
}
.quotes-head-title { font-size:14px; font-weight:600; flex:1; color:var(--text); }
.quotes-head-new {
  background:var(--accent); border:none; border-radius:var(--radius-sm);
  color:var(--on-accent); font-size:11px; font-weight:500; padding:5px 12px; cursor:pointer;
}
.quotes-head-new:hover { opacity:0.85; }
.quotes-head-close {
  background:none; border:none; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer; padding:0 0 0 6px;
}
.quotes-head-close:hover { color:var(--text); }
.quotes-body { flex:1; overflow-y:auto; padding:12px; background:var(--bg); }
.quotes-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.quote-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color .1s;
  display:flex; flex-direction:column;
}
.quote-card:hover { border-color:var(--accent); }
.quote-card.active-quote { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-a15); }
.quote-card-thumb {
  width:100%; height:90px; object-fit:cover; display:block; background:var(--bg);
}
.quote-card-nothumb {
  width:100%; height:90px; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:11px;
}
.quote-card-body { padding:8px 10px; flex:1; }
.quote-card-num { font-weight:500; color:var(--accent); font-size:11px; }
.quote-card-title { font-size:12px; color:var(--text); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quote-card-date { font-size:10px; color:var(--muted); margin-top:3px; }
.quote-card-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 10px 8px; gap:6px;
}
.quote-load-btn {
  flex:1; background:var(--accent); border:none; border-radius:var(--radius-sm); color:var(--on-accent);
  font-size:11px; font-weight:500; padding:5px 0; cursor:pointer;
}
.quote-load-btn:hover { opacity:0.85; }
.quote-del {
  background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--muted);
  cursor:pointer; font-size:13px; padding:4px 8px; flex-shrink:0;
}
.quote-del:hover { border-color:var(--error); color:var(--error); }
.quotes-empty { padding:36px 16px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }

/* ── Quotes bulk-delete bar ──────────────────────────────────────── */
.quotes-bulk-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; flex-shrink:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.quotes-sel-all-lbl {
  display:flex; align-items:center; gap:6px; flex:1;
  font-size:12px; color:var(--muted); cursor:pointer; user-select:none;
}
.quotes-sel-all-lbl input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; margin:0; }
.quotes-del-sel-btn {
  background:var(--violet-a14); border:1px solid var(--violet-a30);
  border-radius:var(--radius); color:var(--quote-cb-accent); font-size:11px; font-weight:600;
  padding:5px 10px; cursor:pointer; white-space:nowrap;
}
.quotes-del-sel-btn:disabled { opacity:.35; cursor:not-allowed; }
.quotes-del-sel-btn:not(:disabled):hover { background:var(--violet-a26-b); }
.quotes-del-all-btn {
  background:var(--quotes-del-a10); border:1px solid var(--quotes-del-a22);
  border-radius:var(--radius); color:var(--quotes-del-fg); font-size:11px; font-weight:600;
  padding:5px 10px; cursor:pointer; white-space:nowrap;
}
.quotes-del-all-btn:hover { background:var(--quotes-del-a22); color:var(--quotes-del-strong); }

/* ── Quote card checkbox ──────────────────────────────────────────── */
.quote-card-top { position:relative; }
.quote-cb-lbl {
  position:absolute; top:6px; left:6px; z-index:2;
  line-height:0; cursor:pointer;
}
.quote-cb-lbl input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--quote-cb-accent); margin:0; }
.quote-card--selected { border-color:var(--violet-a60) !important; background:var(--quote-card-sel-bg) !important; }

/* ── Templates modal ── */
#templatesModal {
  display:none; position:fixed; inset:0; background:var(--black-a50);
  z-index:902; align-items:center; justify-content:center;
}
#templatesModal.open { display:flex; }
#templatesBox {
  background:var(--surface); border-radius:var(--radius-lg); width:min(1000px,94vw); height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px var(--black-a25); font-family:var(--sans);
}
.tpl-head {
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
}
.tpl-head-title { font-size:14px; font-weight:600; flex:1; color:var(--text); }
.tpl-head-close {
  background:none; border:none; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer; padding:0;
}
.tpl-head-close:hover { color:var(--text); }
.tpl-toolbar {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--bg); border-bottom:1px solid var(--border); flex-shrink:0;
}
#tplCatFilter {
  flex:1; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text); font-family:var(--sans);
  font-size:12px; padding:5px 8px; cursor:pointer;
}
.tpl-save-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); border:none;
  border-radius:var(--radius-sm); color:var(--on-accent); font-size:11px; font-weight:500;
  padding:5px 11px; cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.tpl-save-btn:hover { opacity:0.85; }
.tpl-save-btn svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.tpl-body { flex:1; overflow-y:auto; padding:12px; background:var(--bg); }
.tpl-category-label {
  font-size:9px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); padding:4px 2px 8px; margin-top:4px;
}
.tpl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:6px; }
.tpl-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color .1s;
  display:flex; flex-direction:column;
}
.tpl-card:hover { border-color:var(--accent); }
.tpl-card-thumb { width:100%; height:110px; object-fit:contain; display:block; background:var(--bg); }
.tpl-card-thumb-svg {
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--bg), var(--panel));
}
.tpl-card-thumb-svg svg { width:100%; height:100%; }
.tpl-param-badge {
  font-size:8px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:var(--pay-violet-a12-deep); color:var(--pay-violet-fg2);
  padding:1px 5px; border-radius:var(--radius-sm); margin-right:4px;
}
.tpl-import-btn {
  font-size:10px; padding:5px 8px; background:var(--surface); border:1px solid var(--border);
  color:var(--text2); border-radius:var(--radius-sm); cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.tpl-import-btn:hover { border-color:var(--accent); color:var(--accent); }
.tpl-export-btn {
  font-size:13px; padding:2px 6px; background:transparent; border:1px solid var(--border);
  color:var(--muted); border-radius:var(--radius-sm); cursor:pointer;
  line-height:1; min-width:24px;
}
.tpl-export-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ─────────────────────────────────────────
   PARAMETRIC TEMPLATE INSERT PANEL
   ───────────────────────────────────────── */
.tpp-panel {
  padding:14px 16px; display:flex; flex-direction:column; gap:14px;
}
.tpp-head { display:flex; align-items:center; gap:12px; }
.tpp-back {
  background:transparent; border:1px solid var(--border); color:var(--text2);
  font-size:12px; padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer;
}
.tpp-back:hover { border-color:var(--accent); color:var(--accent); }
.tpp-title { font-size:15px; font-weight:700; color:var(--text); }
.tpp-grid {
  display:grid; grid-template-columns:260px 1fr; gap:18px;
}
.tpp-section-label {
  font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.tpp-fields { display:flex; flex-direction:column; gap:10px; }
.tpp-field {
  display:flex; align-items:center; gap:8px;
}
.tpp-field label {
  flex:1 1 auto; font-size:12px; font-weight:500; color:var(--text2);
  text-transform:none; letter-spacing:0;
}
.tpp-inp {
  width:90px; padding:7px 9px; font-size:13px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); font-family:var(--mono);
}
.tpp-inp:focus { outline:none; border-color:var(--accent, var(--accent)); background:var(--surface); }
.tpp-unit { font-size:11px; color:var(--muted); min-width:18px; }
.tpp-preview {
  border:1px dashed var(--border); border-radius:var(--radius);
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  min-height:260px; padding:8px;
}
.tpp-preview svg { max-width:100%; max-height:260px; }
.tpp-summary {
  font-size:11.5px; color:var(--muted); margin-top:8px; text-align:center;
}
.tpp-foot {
  display:flex; justify-content:flex-end; gap:10px;
  padding-top:10px; border-top:1px solid var(--border);
}
.tpl-card-nothumb {
  width:100%; height:110px; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:10px;
}
.tpl-card-body { padding:8px 10px 4px; flex:1; }
.tpl-card-name { font-size:12px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpl-card-meta { font-size:10px; color:var(--muted); margin-top:3px; }
.tpl-card-foot { display:flex; align-items:center; gap:6px; padding:4px 10px 8px; }
.tpl-insert-btn {
  flex:1; background:var(--accent); border:none; border-radius:var(--radius-sm); color:var(--on-accent);
  font-size:11px; font-weight:500; padding:6px 0; cursor:pointer;
}
.tpl-insert-btn:hover { opacity:0.85; }
.tpl-global-badge { font-size:8px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:var(--accent-soft); color:var(--accent); padding:1px 5px; border-radius:var(--radius-sm); margin-right:4px; }
.tpl-global-btn { font-size:9px; padding:4px 6px; background:var(--surface); border:1px solid var(--accent); color:var(--accent); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; }
.tpl-global-btn:hover { background:var(--accent); color:var(--on-accent); }
.tpl-suggest-btn { font-size:9px; padding:4px 6px; background:var(--surface); border:1px solid var(--border); color:var(--text2); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; }
.tpl-suggest-btn:hover { border-color:var(--accent); color:var(--accent); }
.tpl-suggested-badge { font-size:8px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:var(--warning-soft); color:var(--warning); padding:2px 6px; border-radius:var(--radius-sm); }
.tpl-del {
  background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--muted);
  cursor:pointer; font-size:13px; padding:4px 8px; flex-shrink:0;
}
.tpl-del:hover { background:var(--quotes-del-a25); color:var(--quotes-del-strong); }
.tpl-empty { padding:60px 24px; text-align:center; color:var(--muted); font-size:14px; line-height:1.8; }
/* Inline save panel (shown when saving a template) */
#tplSavePanel {
  display:none; padding:16px 18px; background:var(--tpl-save-panel-bg);
  border-bottom:2px solid var(--asm3d-y-a30); flex-shrink:0;
}
#tplSavePanel.open { display:block; }
.tpl-save-panel-title { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--tpl-panel-title-fg); margin-bottom:10px; }
.tpl-save-row { display:flex; gap:10px; align-items:flex-end; }
.tpl-save-field { display:flex; flex-direction:column; gap:5px; flex:1; }
.tpl-save-field label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.tpl-save-field input {
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--on-accent); font-family:var(--sans); font-size:13px;
  padding:9px 12px; outline:none;
}
.tpl-save-field input:focus { border-color:var(--asm3d-y-a60); background:var(--asm3d-y-a06); }
.tpl-panel-save {
  background:var(--tpl-panel-save-bg); border:none; border-radius:var(--radius); color:var(--on-accent);
  font-size:13px; font-weight:600; padding:9px 20px; cursor:pointer; flex-shrink:0;
}
.tpl-panel-save:hover { background:var(--tpl-panel-save-hover); }
.tpl-panel-cancel {
  background:var(--raised); border:1px solid var(--border-dk);
  border-radius:var(--radius); color:var(--text2); font-size:13px; padding:9px 14px; cursor:pointer; flex-shrink:0;
}
.tpl-panel-cancel:hover { background:var(--raised); color:var(--on-accent); }
/* Inline new-quote panel */
#quoteSavePanel {
  display:none; padding:16px 18px; background:var(--qsp-panel-bg);
  border-bottom:2px solid var(--violet-a30); flex-shrink:0;
}
#quoteSavePanel.open { display:block; }
.qsp-title { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--quote-badge-num-fg); margin-bottom:10px; }
.qsp-row { display:flex; gap:10px; align-items:flex-end; }
.qsp-field { display:flex; flex-direction:column; gap:5px; flex:1; }
.qsp-field label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.qsp-field input {
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--on-accent); font-family:var(--sans); font-size:13px;
  padding:9px 12px; outline:none;
}
.qsp-field input:focus { border-color:var(--violet-a60); background:var(--violet-a06); }
.qsp-save {
  background:var(--pay-violet-fg2); border:none; border-radius:var(--radius); color:var(--on-accent);
  font-size:13px; font-weight:600; padding:9px 20px; cursor:pointer; flex-shrink:0;
}
.qsp-save:hover { background:var(--qsp-save-hover); }
.qsp-cancel {
  background:var(--raised); border:1px solid var(--border-dk);
  border-radius:var(--radius); color:var(--text2); font-size:13px; padding:9px 14px; cursor:pointer; flex-shrink:0;
}
.qsp-cancel:hover { background:var(--raised); color:var(--on-accent); }
/* Quotes grid — override for save-panel context */
.quotes-grid { grid-template-columns:repeat(3,1fr); }
.quote-card { border-radius:var(--radius-lg); }
.quote-card-thumb { height:120px; }
/* Quote badge nav arrows */
#quoteBadge .q-nav {
  background:none; border:none; color:var(--text2);
  font-size:14px; cursor:pointer; padding:0 3px; line-height:1; flex-shrink:0;
}
#quoteBadge .q-nav:hover { color:var(--on-accent); }
#crmOverlay {
  display:none; position:fixed; inset:0; background:var(--black-a40); z-index:900;
}
#crmOverlay.open { display:block; }
#crmDrawer {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.97);
  width:min(900px,94vw); height:90vh;
  background:var(--bg); z-index:901; display:flex; flex-direction:column;
  box-shadow:0 24px 64px var(--black-a45); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform 0.18s ease, opacity 0.18s ease;
  font-family:var(--sans); opacity:0; pointer-events:none;
}
#crmDrawer.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.crm-head {
  display:flex; align-items:center; gap:8px; padding:13px 16px;
  background:var(--accent); color:var(--on-accent); flex-shrink:0;
}
.crm-head-title { font-size:14px; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-head-back {
  display:none; background:var(--raised); border:none; border-radius:var(--radius-sm);
  color:var(--on-accent); font-size:11px; padding:4px 9px; cursor:pointer; flex-shrink:0;
}
.crm-head-back:hover { background:var(--raised); }
.crm-head-close {
  background:none; border:none; color:var(--text2);
  font-size:20px; line-height:1; cursor:pointer; padding:0; flex-shrink:0;
}
.crm-head-close:hover { color:var(--on-accent); }
.crm-search-bar {
  display:flex; align-items:center; gap:8px; padding:10px 13px;
  border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.crm-search-bar input {
  flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; font-family:var(--sans); outline:none; color:var(--text);
}
.crm-search-bar input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-cta-a20); }
.crm-add-btn {
  background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius);
  padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.crm-add-btn:hover { background:var(--accent2); }
.crm-body { flex:1; overflow-y:auto; background:var(--bg); }

/* ── Customer list ── */
.crm-cust-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; background:var(--surface); transition:background .1s;
}
.crm-cust-item:hover { background:var(--hover-bg); }
.crm-cust-avatar {
  width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.crm-cust-info { flex:1; min-width:0; }
.crm-cust-name { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-cust-sub  { font-size:11px; color:var(--muted); margin-top:1px; }
.crm-cust-badge { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.crm-cust-badge-item {
  background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-lg); font-size:10px; font-weight:600; padding:2px 8px; white-space:nowrap;
}

/* ── Profile header ── */
.crm-detail-sticky { position:sticky; top:0; z-index:3; }
.crm-profile-head {
  display:flex; align-items:flex-start; gap:14px; padding:18px 18px 14px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.crm-avatar-xl {
  width:58px; height:58px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-bright) 100%);
  color:var(--on-accent); font-size:22px; font-weight:800; letter-spacing:-0.5px;
  display:flex; align-items:center; justify-content:center;
}
.crm-profile-info { flex:1; min-width:0; padding-top:2px; }
.crm-profile-name { font-size:19px; font-weight:800; color:var(--text); line-height:1.2; margin-bottom:4px; }
.crm-profile-company { font-size:12.5px; color:var(--text2); font-weight:600; margin-bottom:3px; }
.crm-profile-contact { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:3px 10px; }
.crm-profile-contact a { color:var(--accent); text-decoration:none; }
.crm-profile-actions { flex-shrink:0; }

/* Stats row */
.crm-stats-row { display:flex; background:var(--surface); border-bottom:1px solid var(--border); }
.crm-stat { flex:1; padding:11px 8px; text-align:center; border-right:1px solid var(--border); }
.crm-stat:last-child { border-right:none; }
.crm-stat-value { font-size:20px; font-weight:900; color:var(--accent); line-height:1; letter-spacing:-0.5px; }
.crm-stat-label { font-size:9.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-top:3px; }

/* Tabs */
.crm-tabs { display:flex; background:var(--surface); border-bottom:2px solid var(--border); }
.crm-tab {
  flex:1; padding:10px 0; font-size:12px; font-weight:600; color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  margin-bottom:-2px; font-family:var(--sans); transition:color .12s, border-color .12s;
}
.crm-tab:hover { color:var(--accent); }
.crm-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Edit form (Info tab) */
.crm-form { padding:16px; display:flex; flex-direction:column; gap:0; background:var(--surface); margin:10px; border-radius:var(--radius-lg); box-shadow:0 1px 4px var(--black-a06); }
.crm-field { margin-bottom:10px; }
.crm-field label { display:block; font-size:10px; font-weight:600; color:var(--muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.crm-field input, .crm-field textarea {
  width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; font-family:var(--sans); outline:none; color:var(--text);
}
.crm-field textarea { resize:vertical; min-height:72px; }
.crm-field input:focus, .crm-field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-cta-a20); }
.crm-field-row { display:flex; gap:8px; }
.crm-field-row .crm-field { flex:1; }
.crm-form-btns { display:flex; gap:8px; margin-top:4px; }
.crm-save-btn {
  flex:1; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius);
  padding:9px 0; font-size:13px; font-weight:600; cursor:pointer;
}
.crm-save-btn:hover { background:var(--accent2); }
.crm-del-btn {
  background:var(--surface); color:var(--error); border:1px solid var(--error);
  border-radius:var(--radius); padding:7px 12px; font-size:12px; cursor:pointer; white-space:nowrap;
}
.crm-del-btn:hover { background:var(--error-soft); }

/* Jobs tab */
.crm-sect-head {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2;
}
.crm-sect-title { font-size:11px; font-weight:600; color:var(--text2); flex:1; text-transform:uppercase; letter-spacing:.6px; }
.crm-new-job-btn {
  background:var(--success-soft); color:var(--success); border:1px solid var(--success);
  border-radius:var(--radius-sm); padding:5px 11px; font-size:11px; font-weight:600; cursor:pointer;
}
.crm-new-job-btn:hover { background:var(--success); color:var(--on-accent); }

/* New job inline form */
.crm-new-job-form { display:none; background:var(--surface); border-bottom:1px solid var(--border); padding:14px 14px 12px; }
.crm-new-job-form.open { display:block; }
.crm-new-job-row { display:flex; gap:8px; flex-wrap:wrap; }
.crm-new-job-row .crm-field { flex:1; min-width:120px; margin-bottom:0; }
.crm-new-job-btns { display:flex; gap:6px; margin-top:10px; }

/* Job cards */
.crm-job-card {
  background:var(--surface); margin:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--border);
  overflow:hidden; transition:box-shadow .12s, border-color .12s;
}
.crm-job-card:hover { box-shadow:0 3px 14px var(--accent-cta-a10); border-color:var(--accent); }
.crm-job-card.is-active { border-color:var(--accent); border-width:2px; }
.crm-job-card-top { display:flex; gap:12px; padding:12px 12px 10px; }
.crm-job-thumb { width:100px; height:70px; border-radius:var(--radius); object-fit:cover; border:1px solid var(--border); background:var(--raised); flex-shrink:0; }
.crm-job-nothumb { width:100px; height:70px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:9px; text-align:center; }
.crm-job-info { flex:1; min-width:0; }
.crm-job-title { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.crm-job-sub   { font-size:11px; color:var(--muted); margin-bottom:2px; }
.crm-status-select {
  font-size:11px; font-weight:600; border-radius:var(--radius-lg); padding:3px 9px; margin-top:5px;
  border:none; cursor:pointer; font-family:var(--sans); outline:none; -webkit-appearance:none; appearance:none;
}
.crm-status-select.status-active    { background:var(--crm-st-active-bg); color:var(--edge-prof-demi-bull); }
.crm-status-select.status-completed { background:var(--crm-st-complete-bg); color:var(--edge-prof-polished); }
.crm-status-select.status-on-hold   { background:var(--crm-st-onhold-bg); color:var(--crm-st-onhold-fg); }
.crm-status-select.status-cancelled { background:var(--crm-st-cancelled-bg); color:var(--error); }
.crm-job-card-foot {
  display:flex; gap:6px; padding:9px 12px; border-top:1px solid var(--border); background:var(--bg); align-items:center;
}
.crm-job-load { background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius); padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.crm-job-load:hover { background:var(--accent2); }
.crm-job-del { margin-left:auto; background:var(--surface); color:var(--error); border:1px solid var(--error); border-radius:var(--radius); padding:5px 10px; font-size:11px; cursor:pointer; }
.crm-job-del:hover { background:var(--error-soft); }

/* Invoice list */
.crm-inv-item {
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin:10px 12px;
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border);
}
.crm-inv-item:hover { border-color:var(--accent); }
.crm-inv-num { font-size:13px; font-weight:800; color:var(--accent); min-width:80px; }
.crm-inv-client { font-size:12.5px; color:var(--text); font-weight:600; }
.crm-inv-ref { font-size:11px; color:var(--muted); margin-top:1px; }
.crm-inv-amount { font-size:15px; font-weight:800; color:var(--text); margin-left:auto; white-space:nowrap; }
.crm-inv-status { border-radius:var(--radius-lg); font-size:10px; font-weight:600; padding:3px 10px; white-space:nowrap; flex-shrink:0; }
/* Invoice status colors — shared by CRM badges (.crm-inv-status.s-*),
   invoice list selects (.inv-st-*), and bid panel select (_applyInvStatusColor) */
.crm-inv-status.s-draft,          .inv-st-draft          { background:var(--inv-lt-draft-bg); color:var(--inv-lt-draft-fg); border-color:var(--inv-lt-draft-border); }
.crm-inv-status.s-estimate_given, .inv-st-estimate_given { background:var(--inv-lt-estimate-bg); color:var(--pay-violet-fg2); border-color:var(--pay-violet-border); }
.crm-inv-status.s-invoiced,       .inv-st-invoiced       { background:var(--inv-lt-invoiced-bg); color:var(--inv-lt-invoiced-fg); border-color:var(--inv-lt-invoiced-border); }
.crm-inv-status.s-sent,           .inv-st-sent           { background:var(--inv-lt-sent-bg); color:var(--inv-lt-sent-fg); border-color:var(--inv-dark-invoiced-fg); }
.crm-inv-status.s-deposit,        .inv-st-deposit        { background:var(--inv-lt-deposit-bg); color:var(--inv-lt-deposit-fg); border-color:var(--inv-dark-deposit-fg); }
.crm-inv-status.s-paid,           .inv-st-paid           { background:var(--inv-lt-paid-bg); color:var(--success); border-color:var(--inv-dark-paid-fg); }
.crm-inv-status.s-accepted                               { background:var(--inv-lt-accepted-bg); color:var(--inv-lt-accepted-fg); border-color:var(--inv-dark-paid-fg); }
.crm-inv-status.s-cancelled,      .inv-st-cancelled      { background:var(--inv-lt-cancelled-bg); color:var(--inv-lt-cancelled-fg); border-color:var(--inv-dark-cancelled-fg); }
.crm-inv-status.s-paused,         .inv-st-paused         { background:var(--inv-lt-paused-bg); color:var(--inv-lt-paused-fg); border-color:var(--inv-dark-paused-fg); }
[data-theme="dark"] .crm-inv-status.s-draft,          [data-theme="dark"] .inv-st-draft          { background:var(--inv-dark-draft-bg); color:var(--inv-dark-draft-fg); border-color:var(--inv-dark-draft-border); }
[data-theme="dark"] .crm-inv-status.s-estimate_given, [data-theme="dark"] .inv-st-estimate_given { background:var(--inv-dark-estimate-bg); color:var(--pay-violet-fg3); border-color:var(--inv-dark-estimate-border); }
[data-theme="dark"] .crm-inv-status.s-invoiced,       [data-theme="dark"] .inv-st-invoiced       { background:var(--inv-dark-invoiced-bg); color:var(--inv-dark-invoiced-fg); border-color:var(--inv-dark-invoiced-border); }
[data-theme="dark"] .crm-inv-status.s-sent,           [data-theme="dark"] .inv-st-sent           { background:var(--inv-dark-sent-bg); color:var(--inv-dark-invoiced-fg); border-color:var(--inv-dark-sent-border); }
[data-theme="dark"] .crm-inv-status.s-deposit,        [data-theme="dark"] .inv-st-deposit        { background:var(--inv-dark-deposit-bg); color:var(--inv-dark-deposit-fg); border-color:var(--inv-dark-deposit-border); }
[data-theme="dark"] .crm-inv-status.s-paid,           [data-theme="dark"] .inv-st-paid           { background:var(--success-a15); color:var(--inv-dark-paid-fg); border-color:var(--success-a30); }
[data-theme="dark"] .crm-inv-status.s-accepted                                                   { background:var(--success-a12); color:var(--inv-dark-paid-fg); border-color:var(--success-a25); }
[data-theme="dark"] .crm-inv-status.s-cancelled,      [data-theme="dark"] .inv-st-cancelled      { background:var(--inv-dark-cancelled-bg); color:var(--inv-dark-cancelled-fg); border-color:var(--inv-dark-cancelled-border); }
[data-theme="dark"] .crm-inv-status.s-paused,         [data-theme="dark"] .inv-st-paused         { background:var(--inv-dark-paused-bg); color:var(--inv-dark-paused-fg); border-color:var(--inv-dark-paused-border); }
.crm-inv-view {
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius);
  padding:5px 11px; font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.crm-inv-view:hover { background:var(--accent); color:var(--on-accent); }

/* Email log */
.crm-email-item {
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px; margin:10px 12px;
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border);
}
.crm-email-subject { font-size:12.5px; font-weight:600; color:var(--text); }
.crm-email-to { font-size:11px; color:var(--muted); margin-top:2px; }
.crm-email-meta { text-align:right; flex-shrink:0; }
.crm-email-date { font-size:10px; color:var(--muted); }
.crm-email-type { font-size:10px; color:var(--accent); font-weight:600; margin-top:3px; }

.crm-empty { padding:40px 20px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.crm-load-area { padding:28px 20px; text-align:center; color:var(--muted); font-size:13px; }
.crm-active-badge {
  display:inline-block; background:var(--accent-soft); color:var(--accent);
  border-radius:var(--radius-sm); font-size:10px; font-weight:600; padding:1px 6px; vertical-align:middle;
}
/* ── INVOICE PANEL ─────────────────────────────────────────── */
.inv-hbtn {
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px;
  border-radius:var(--radius-sm); border:1px solid var(--teal-a50);
  background:var(--teal-a14); color:var(--text);
  font-family:var(--sans); font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.inv-hbtn:hover { background:var(--teal-a28); color:var(--on-accent); }
#invOverlay { display:none; position:fixed; inset:0; background:var(--black-a40); z-index:900; }
#invOverlay.open { display:block; }
#invDrawer {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.97);
  width:min(960px,95vw); height:90vh;
  background:var(--bg); z-index:901; display:flex; flex-direction:column;
  box-shadow:0 24px 64px var(--black-a45); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform 0.18s ease, opacity 0.18s ease;
  font-family:var(--sans); opacity:0; pointer-events:none;
}
#invDrawer.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.inv-panel-head { display:flex; align-items:center; gap:8px; padding:13px 16px; background:var(--bid-teal-fg); color:var(--on-accent); flex-shrink:0; }
.inv-panel-title { font-size:14px; font-weight:600; flex:1; }
.inv-panel-close { background:none; border:none; color:var(--text2); font-size:20px; line-height:1; cursor:pointer; padding:0; }
.inv-panel-close:hover { color:var(--on-accent); }
.inv-search-bar { display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.inv-search-bar input { flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-family:var(--sans); outline:none; color:var(--text); }
.inv-search-bar input:focus { border-color:var(--bid-teal-fg); box-shadow:0 0 0 2px var(--teal-a12); }
.inv-panel-body { flex:1; overflow-y:auto; background:var(--bg); }
.inv-list-card { background:var(--surface); margin:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; transition:box-shadow .12s,border-color .12s; }
.inv-list-card:hover { box-shadow:0 3px 14px var(--teal-a10); border-color:var(--bid-teal-ring-hi); }
.inv-list-card-top { display:flex; align-items:flex-start; gap:0; padding:14px 16px 10px; }
.inv-list-num { font-size:14px; font-weight:800; color:var(--bid-teal-fg); white-space:nowrap; }
.inv-list-status-sel {
  font-size:11px; font-weight:600; border-radius:var(--radius-lg); padding:3px 9px; margin-top:6px;
  border:none; cursor:pointer; font-family:var(--sans); outline:none; display:block;
  -webkit-appearance:none; appearance:none;
}
.inv-st-draft          { background:var(--inv-lt-draft-bg); color:var(--inv-lt-draft-fg); }
.inv-st-estimate_given { background:var(--inv-lt-estimate-bg); color:var(--pay-violet-fg2); }
.inv-st-sent           { background:var(--inv-lt-invoiced-bg); color:var(--inv-lt-sent-alt-fg); }
.inv-st-deposit        { background:var(--inv-lt-deposit-bg); color:var(--inv-lt-deposit-fg); }
.inv-st-paid           { background:var(--inv-lt-paid-bg); color:var(--tpl-panel-save-hover); }
.inv-st-accepted       { background:var(--inv-lt-accepted-bg); color:var(--inv-lt-accepted-fg); }
.inv-st-cancelled      { background:var(--inv-lt-cancelled-bg); color:var(--inv-lt-cancelled-fg); }
.inv-st-paused         { background:var(--inv-lt-paused-bg); color:var(--inv-lt-paused-fg); }
.inv-st-custom         { background:var(--inv-lt-draft-alt-bg); color:var(--inv-lt-draft-alt-fg); }

/* Custom status add-row in workflow settings */
/* Pipeline status rows */
.pipe-status-row { display:flex; align-items:center; gap:6px; padding:6px 4px; border-bottom:1px solid var(--border); }
.pipe-status-row:last-child { border-bottom:none; }
.pipe-order { width:18px; font-size:10px; color:var(--muted); text-align:center; flex-shrink:0; }
.pipe-label-inp { flex:1; font-size:12px; color:var(--text); background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); padding:4px 6px; outline:none; font-family:var(--sans); }
.pipe-label-inp:hover { border-color:var(--border); background:var(--bg); }
.pipe-label-inp:focus { border-color:var(--accent2); background:var(--bg); }
.pipe-builtin-tag { font-size:8px; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1px 5px; flex-shrink:0; letter-spacing:.3px; }
.pipe-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:0 4px; border-radius:var(--radius-sm); flex-shrink:0; line-height:1; }
.pipe-del:hover { color:var(--error); background:var(--error-a08); }
.pipe-status-custom .pipe-label-inp { border-left:2px solid var(--pay-violet-fg); padding-left:8px; }
.pipe-add-row { display:flex; gap:8px; align-items:center; margin-top:10px; }
.pipe-add-row .mysvc-inp { flex:1; }
.pipe-save-row { margin-top:10px; }

/* Email template cards */
.tpl-card { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; background:var(--surface); }
.tpl-card:last-child { margin-bottom:0; }
.tpl-inactive { opacity:0.5; }
.tpl-card-hdr { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; background:var(--surface); }
.tpl-card-hdr:hover { background:var(--bg); }
.tpl-name { font-size:12px; font-weight:500; color:var(--text); flex:1; }
.tpl-meta { font-size:10px; color:var(--muted); white-space:nowrap; }
.tpl-toggle { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.tpl-toggle input { width:14px; height:14px; accent-color:var(--accent); }

/* Template edit panel */
.tpl-edit { border-top:1px solid var(--border); background:var(--surface); }
.tpl-form { padding:12px; }
.tpl-form-row { margin-bottom:10px; }
.tpl-form-row label { display:block; font-size:9px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.tpl-form-row--half { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tpl-inp { width:100%; padding:6px 8px; font-size:12px; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; box-sizing:border-box; }
.tpl-inp:focus { border-color:var(--accent2); }
.tpl-inp--sm { width:60px; }
.tpl-sel { width:100%; padding:6px 8px; font-size:12px; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; }
.tpl-delay-row { display:flex; align-items:center; gap:6px; }
.tpl-delay-row span { font-size:11px; color:var(--muted); }
.tpl-var-btns { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.tpl-var-btn { font-size:9px; font-family:var(--mono); color:var(--accent); background:var(--accent-a06); border:1px solid var(--accent-a20); border-radius:var(--radius-sm); padding:2px 6px; cursor:pointer; }
.tpl-var-btn:hover { background:var(--accent-a12); }
.tpl-email-body { width:100%; padding:8px; font-size:12px; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; resize:vertical; line-height:1.5; box-sizing:border-box; }
.tpl-email-body:focus { border-color:var(--accent2); }
.tpl-form-actions { display:flex; align-items:center; gap:8px; }
.settings-cancel-btn { padding:5px 12px; font-size:11px; font-weight:500; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; color:var(--text2); }
.settings-cancel-btn:hover { background:var(--raised); }
.tpl-save-msg { font-size:11px; margin-left:8px; }
.tpl-save-ok { color:var(--success); }
.tpl-save-err { color:var(--error); }

.inv-list-meta { flex:1; padding-left:14px; min-width:0; }
.inv-list-client { font-size:13.5px; font-weight:600; color:var(--text); }
.inv-list-job { font-size:11px; color:var(--muted); margin-top:2px; }
.inv-list-date { font-size:11px; color:var(--muted); margin-top:2px; }
.inv-list-amount { font-size:17px; font-weight:900; color:var(--text); text-align:right; white-space:nowrap; letter-spacing:-0.5px; }
.inv-link-row { display:flex; align-items:center; gap:6px; padding:0 14px 10px; }
.inv-link-url {
  flex:1; font-size:11px; color:var(--text2); font-family:var(--mono,monospace);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px;
}
.inv-list-card-foot { display:flex; gap:6px; padding:9px 14px; border-top:1px solid var(--border); background:var(--bg); align-items:center; flex-wrap:wrap; }
.inv-copy-btn { background:var(--bid-teal-fg); color:var(--on-accent); border:none; border-radius:var(--radius); padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.inv-copy-btn:hover { background:var(--inv-copy-hover); }
.inv-view-btn { background:var(--inv-view-btn-bg); color:var(--bid-teal-fg); border:1px solid var(--bid-teal-ring-hi); border-radius:var(--radius); padding:5px 12px; font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; }
.inv-view-btn:hover { background:var(--inv-view-btn-hover); }
.inv-load-btn { background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:var(--radius); padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.inv-load-btn:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.inv-del-btn { margin-left:auto; background:var(--surface); color:var(--error); border:1px solid var(--error); border-radius:var(--radius); padding:5px 9px; font-size:11px; cursor:pointer; }
.inv-del-btn:hover { background:var(--error-soft); }
.inv-log-btn { background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:var(--radius); padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.inv-log-btn:hover { background:var(--pay-violet-a08); color:var(--pay-violet-fg2); border-color:var(--pay-violet-border); }
.inv-log-panel { border-top:1px solid var(--border); background:var(--bg); padding:4px 0 8px; display:none; }
.inv-log-panel.open { display:block; }
.inv-log-list { display:flex; flex-direction:column; }
.inv-log-entry { display:flex; gap:10px; align-items:flex-start; padding:6px 16px; }
.inv-log-entry:not(:last-child) { border-bottom:1px solid var(--border); }
.inv-log-icon { font-size:13px; color:var(--pay-violet-fg2); width:16px; flex-shrink:0; margin-top:1px; }
.inv-log-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
.inv-log-note { font-size:12.5px; color:var(--text); font-weight:500; }
.inv-log-meta { font-size:11px; color:var(--muted); }
.inv-state-msg { padding:40px; text-align:center; color:var(--muted); font-size:13px; }
.inv-state-empty { padding:52px 24px; line-height:1.7; }
.inv-state-err { padding:40px; color:var(--error); }
.inv-card-num-wrap { flex-shrink:0; }
.inv-log-loading { padding:10px 14px; font-size:12px; color:var(--muted); }
.inv-log-empty { padding:10px 14px; font-size:12px; color:var(--muted); font-style:italic; }
.inv-log-err { padding:10px 14px; font-size:12px; color:var(--error); }
.ip-list-spinner { padding:60px; text-align:center; }
.ip-list-empty { padding:80px; text-align:center; }
.ip-list-err { padding:60px; text-align:center; }
.ip-date-lbl + .ip-date-lbl { margin-top:4px; }

/* ── My Quick-Add Services ─────────────────────────────────────────────────── */
.bid-quick-btn-mine {
  background:var(--indigo-a08);
  border-color:var(--indigo-a30);
  color:var(--bidhint-indigo-fg);
}
.bid-quick-btn-mine:hover {
  background:var(--indigo-a16);
  border-color:var(--indigo-a50);
}
.mqb-desc { font-weight:400; font-size:10px; opacity:0.72; }
.bid-quickadd-cfg {
  font-size:15px; color:var(--muted); text-decoration:none;
  padding:2px 4px; border-radius:var(--radius-sm); flex-shrink:0; line-height:1;
}
.bid-quickadd-cfg:hover { color:var(--accent); background:var(--hover-bg,var(--black-a05)); }

/* Settings list rows */
.mysvc-row {
  display:flex; gap:5px; align-items:center;
  margin-bottom:6px; flex-wrap:wrap;
}
.mysvc-inp {
  padding:5px 8px; font-size:12px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface,var(--on-accent)); color:var(--text);
  font-family:inherit;
}
.mysvc-inp:focus { outline:none; border-color:var(--accent); }
.mysvc-name  { flex:2; min-width:80px; }
.mysvc-desc  { flex:3; min-width:100px; }
.mysvc-price { width:72px; flex-shrink:0; }
.mysvc-unit  { width:68px; flex-shrink:0; padding:5px 4px; font-size:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface,var(--on-accent)); color:var(--text); }
.mysvc-move {
  padding:3px 6px; font-size:12px; line-height:1;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface,var(--on-accent)); color:var(--muted);
  cursor:pointer; flex-shrink:0;
}
.mysvc-move:hover:not([disabled]) { background:var(--hover-bg,var(--fallback-hover-bg)); color:var(--text); }
.mysvc-move[disabled] { opacity:0.3; cursor:default; }
.mysvc-del {
  padding:3px 7px; font-size:14px; line-height:1;
  border:1px solid var(--error); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--error);
  cursor:pointer; flex-shrink:0;
}
.mysvc-del:hover { background:var(--error-soft); }

/* Add-new form */
.mysvc-add-form {
  display:flex; gap:6px; align-items:center;
  margin-top:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid var(--border);
}
.mysvc-add-btn {
  padding:5px 14px; background:var(--accent); color:var(--on-accent);
  border:none; border-radius:var(--radius-sm); font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.mysvc-add-btn:hover { filter:brightness(1.1); }
.svc-empty { font-size:12px; color:var(--muted); padding:4px 0 8px; }

/* ── Material Library cards ───────────────────────────────────────────── */
.mat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s;
}
.mat-card:hover { box-shadow: 0 3px 14px var(--black-a18); }

/* ── Material library card internals ─────────────────────────────────────── */
.mat-grid-empty { grid-column:1/-1; padding:24px; text-align:center; color:var(--muted); font-size:13px; }
.mat-card-img { width:100%; height:130px; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; display:block; }
.mat-card-no-img { width:100%; height:130px; background:var(--surface2,var(--inv-lt-draft-alt-bg)); border-radius:var(--radius) var(--radius) 0 0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
.mat-card-body  { padding:10px 10px 8px; }
.mat-card-name  { font-weight:600; font-size:13px; color:var(--text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-card-badges { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.mat-card-meta  { font-size:11px; color:var(--muted); margin-bottom:2px; }
.mat-card-price { font-size:12px; font-weight:600; color:var(--accent); margin-top:4px; }
.mat-card-cost  { font-size:10px; color:var(--muted); display:block; margin-top:1px; }
.mat-card-margin { font-size:10px; font-weight:600; display:block; margin-top:1px; }
.mat-margin-pos  { color:var(--success); }
.mat-margin-neg  { color:var(--error); }
.mat-card-usecount { font-size:10px; color:var(--muted); margin-top:2px; }
.mat-card-use-wrap { padding:0 8px 4px; }
.mat-card-use-btn { width:100%; padding:5px 0; font-size:12px; font-weight:600; border:none; border-radius:var(--radius-sm); background:var(--accent); cursor:pointer; color:var(--on-accent); }
.mat-card-actions { display:flex; gap:4px; padding:0 8px 8px; }
.mat-card-act-btn { flex:1; padding:4px 0; font-size:11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; color:var(--text); }
.mat-card-act-btn--muted { color:var(--muted); }
.mat-card-del-btn { padding:4px 8px; font-size:11px; border:1px solid var(--danger-a30); border-radius:var(--radius-sm); background:transparent; cursor:pointer; color:var(--error); }
.mat-badge { padding:1px 6px; border-radius:var(--radius-lg); font-size:10px; }
.mat-badge-instock  { background:var(--success-a12); color:var(--success); }
.mat-badge-outstock { background:var(--danger-a10);  color:var(--error); }
.mat-badge-cat  { background:var(--accent-a10);   color:var(--accent); }
.mat-badge-type { background:var(--pay-violet-a12); color:var(--pay-violet-fg3); }
#matToast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--hero-gradient-bg); color:var(--on-accent); padding:9px 20px; border-radius:var(--radius);
  font-size:13px; z-index:99999; pointer-events:none; transition:opacity .3s;
}

/* ── Bid panel utilities ──────────────────────────────────────────────────── */
.mob-piece-empty { padding:10px 12px; font-size:12px; color:var(--muted); font-style:italic; }
.bid-inp-hint    { font-size:11px; color:var(--muted); }
.bid-inp-qty     { width:54px; }
.bid-inp-qty-sm  { width:50px; }

/* ── Header stubs (off-canvas pages) ─────────────────────────────────────── */
.hbtn-disabled   { pointer-events:none; }
.h-user-display  { color:var(--muted); cursor:default; }
.h-signout       { color:var(--signout-fg-muted); }

/* ── Admin / Settings panel ──────────────────────────────────────────────── */
.admin-btn          { padding:4px 9px; font-size:11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; }
.admin-btn-danger   { padding:4px 9px; font-size:11px; border:1px solid var(--danger-a30); border-radius:var(--radius-sm); background:transparent; color:var(--error); cursor:pointer; }
.admin-btn-disabled { padding:4px 9px; font-size:11px; border:1px solid var(--border); border-radius:var(--radius-sm); opacity:0.3; cursor:default; }
.admin-invite-avatar { background:var(--warning-a12); border-color:var(--warning-a25); color:var(--admin-invite-fg); font-size:14px; }
.admin-user-info  { flex:1; min-width:0; }
.admin-user-name  { font-size:13.5px; font-weight:600; color:var(--text); }
.admin-user-sub   { font-size:11.5px; color:var(--muted); margin-top:1px; }
.admin-no-email   { font-style:italic; color:var(--border); }
.admin-meta-sep   { margin-left:8px; color:var(--border); }
.admin-meta-since { margin-left:4px; }
.admin-meta-note  { margin-left:4px; font-style:italic; }
.admin-invite-email { font-size:13px; font-weight:600; color:var(--text); }
.admin-invite-sub   { font-size:11px; color:var(--muted); }
.plan-editor-title  { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:10px; }
.plan-editor-plans  { display:flex; gap:8px; margin-bottom:10px; }
.plan-radio-hint    { font-size:11px; color:var(--muted); display:block; margin-top:2px; }
.plan-note-wrap     { margin-bottom:10px; }
.plan-note-lbl      { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; }
.plan-inp-sm        { font-size:12px; padding:6px 9px; }
.plan-editor-actions { display:flex; gap:8px; }
.plan-save-btn   { padding:6px 16px; font-size:12px; font-weight:600; border:none; border-radius:var(--radius); background:var(--accent,var(--accent)); color:var(--on-accent); cursor:pointer; }
.plan-cancel-btn { padding:6px 14px; font-size:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; }
.plan-save-msg   { font-size:11px; margin-top:8px; display:none; }

/* ── Dashboard utilities ─────────────────────────────────────────────────── */
.db-clickable   { cursor:pointer; }
.db-empty-td    { text-align:center; padding:32px; color:var(--muted); }
.db-row-archived { opacity:0.55; }
.db-chk-td      { width:32px; }
.db-err-text    { color:var(--error); }
.db-search-hint { padding:12px; font-size:12px; color:var(--muted); }
.db-search-err  { color:var(--error); }
.db-res-name    { font-size:12px; font-weight:600; color:var(--text); }
.db-res-company { font-size:11px; color:var(--muted); }
.db-load-hint   { color:var(--muted); font-size:13px; padding:8px 0; }
.db-no-items    { color:var(--muted); font-size:13px; }
.db-pill-xs     { font-size:9px; }
.db-followup-lbl { font-size:10px; color:var(--muted); display:block; margin-bottom:4px; }
.db-followup-row { display:flex; gap:6px; align-items:center; }
.db-btn-compact  { padding:2px 8px; font-size:11px; }
.db-no-payments  { color:var(--muted); font-size:12px; padding:8px 0; }
#_dbUpgradeOverlay { position:fixed; inset:0; background:var(--upgrade-modal-backdrop); z-index:9998; }
#_dbUpgradeModal {
  position:fixed; inset:0; margin:auto; z-index:9999;
  width:min(400px,92vw); height:fit-content;
  background:var(--upgrade-modal-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--upgrade-modal-shadow); overflow:hidden;
}
.db-pro-header   { background:linear-gradient(135deg,var(--pro-gradient-start),var(--pro-gradient-end)); padding:24px; text-align:center; }
.db-pro-star     { font-size:28px; margin-bottom:6px; }
.db-pro-title    { font-size:17px; font-weight:600; color:var(--on-accent); }
.db-pro-subtitle { font-size:12px; color:var(--text); margin-top:3px; }
.db-pro-body     { padding:20px; text-align:center; }
.db-pro-desc     { font-size:13px; color:var(--text2); margin:0 0 16px; line-height:1.6; }
.db-pro-cta      { padding:9px 24px; border:none; border-radius:var(--radius); background:linear-gradient(135deg,var(--pro-gradient-start),var(--pro-gradient-end)); color:var(--on-accent); font-size:13px; font-weight:600; cursor:pointer; }

/* ── Index.html — option select ──────────────────────────────────────────── */
.sel-opt { color:var(--text); background:var(--surface); }

/* ── Index.html — header utilities ──────────────────────────────────────── */
#autoSaveLbl { font-size:10px; color:var(--muted); pointer-events:none; white-space:nowrap; }
#sScale { height:28px; padding:0 6px; background:var(--raised); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--sans); font-size:12px; cursor:pointer; }
.badge-close-btn { background:none; border:none; font-size:16px; cursor:pointer; color:inherit; padding:0 2px; line-height:1; }
.lbl-hint { font-weight:400; text-transform:none; letter-spacing:0; opacity:0.5; }
.bug-hint-row { display:flex; align-items:center; gap:6px; margin-top:5px; }
.bug-screenshot-zone {
  border:2px dashed var(--border); border-radius:var(--radius); padding:16px;
  text-align:center; cursor:pointer; min-height:80px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:border-color .1s, background .1s; position:relative;
  color:var(--muted); font-size:12px; outline:none;
}
.bug-screenshot-zone:hover, .bug-screenshot-zone:focus { border-color:var(--accent); background:var(--accent-soft); }
.bug-screenshot-zone.dragover { border-color:var(--accent); background:var(--accent-soft); }
.bug-screenshot-zone.has-image { padding:8px; }
.bug-hint-sm { font-size:10px; color:var(--muted); }
.bug-screenshot-grid { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0; }
.bug-thumb-wrap { position:relative; width:80px; height:60px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.bug-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.bug-thumb-del { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:var(--error); color:var(--on-accent); border:none; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bug-thumb-num { position:absolute; bottom:2px; left:2px; font-size:9px; font-weight:600; color:var(--on-accent); background:var(--black-a50); padding:1px 4px; border-radius:var(--radius-sm); }
.bug-thumb-add { width:80px; height:60px; border:2px dashed var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--muted); cursor:pointer; }
.bug-thumb-add:hover { border-color:var(--accent); color:var(--accent); }
#bugScreenshotPreview { max-width:100%; max-height:200px; border-radius:var(--radius-sm); display:block; }
#bugScreenshotClear {
  position:absolute; top:4px; right:4px; background:var(--error); color:var(--on-accent);
  border:none; border-radius:var(--radius-sm); font-size:10px; padding:2px 6px; cursor:pointer;
}
.bug-hint-icon { stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.bug-hint-text { font-size:11px; color:var(--muted); line-height:1.4; }
.bug-hint-text a { color:var(--accent); text-decoration:none; }

/* ── Bid Customer Panel ───────────────────────────────────────────────────── */
#bidCustPanel { display:flex; position:fixed; inset:0; background:var(--black-a50); z-index:9000; align-items:flex-start; justify-content:center; padding-top:80px; }
.bc-panel-inner { background:var(--panel); border-radius:var(--radius-lg); width:540px; max-width:96vw; max-height:80vh; box-shadow:0 24px 70px var(--black-a45); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.bc-panel-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.bc-panel-title { font-size:14px; font-weight:600; color:var(--text); }
.modal-close-btn { background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; }
.bc-search-wrap { padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.bc-search-inp { width:100%; box-sizing:border-box; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; outline:none; }
#bidCustResults { flex:1; overflow-y:auto; min-height:80px; }
#bidCustNewForm { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; }
.bc-new-hdr { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text2); margin-bottom:12px; }
.bc-new-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.bc-new-inp { padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; outline:none; }
.bc-new-full { width:100%; box-sizing:border-box; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; outline:none; margin-bottom:12px; }
.bc-new-actions { display:flex; gap:8px; }
.bc-new-submit { flex:1; padding:10px; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; }
.bc-new-cancel { padding:10px 16px; background:none; border:1.5px solid var(--border); border-radius:var(--radius); font-size:13px; color:var(--muted); cursor:pointer; }
.bc-panel-foot { padding:12px 20px; border-top:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
#bidCustUnlinkBtn { font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer; }
#bidCustLinkedLbl { font-size:12px; color:var(--muted); flex:1; }
#bidCustNewBtn { font-size:12px; font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; }

/* ── Email Modal ─────────────────────────────────────────────────────────── */
#emailModal { display:flex; position:fixed; inset:0; background:var(--black-a55); z-index:9999; align-items:center; justify-content:center; }
.modal-box { background:var(--panel); border-radius:var(--radius-lg); padding:30px 28px 24px; width:92%; box-shadow:0 24px 80px var(--black-a50); border:1px solid var(--border); }
.modal-box--email { max-width:520px; }
.modal-box--share { max-width:500px; }
.modal-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.modal-head--share { margin-bottom:6px; }
.modal-icon { font-size:22px; }
.modal-title { margin:0; font-size:17px; font-weight:600; color:var(--text); }
.modal-close { margin-left:auto; background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; }
.email-type-toggle { display:flex; gap:0; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:14px; width:fit-content; }
.email-type-btn { padding:6px 20px; font-size:12px; font-weight:600; border:none; cursor:pointer; transition:background 0.15s; }
.modal-fields { display:flex; flex-direction:column; gap:12px; }
.modal-lbl { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px; }
.modal-inp { width:100%; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; box-sizing:border-box; }
.modal-textarea { width:100%; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; box-sizing:border-box; resize:vertical; font-family:var(--sans); line-height:1.5; }
.modal-actions { display:flex; align-items:center; gap:10px; margin-top:4px; }
.email-seq-opt { display:flex; align-items:center; gap:8px; margin:8px 0; padding:8px 10px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--border); }
.email-seq-opt label { font-size:12px; font-weight:500; color:var(--text); cursor:pointer; display:flex; align-items:center; gap:6px; }
.email-seq-opt input[type="checkbox"] { width:15px; height:15px; accent-color:var(--accent); }
.email-seq-hint { font-size:10px; color:var(--muted); margin-left:auto; }
.modal-btn-primary { padding:9px 22px; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; }
.modal-btn-cancel { padding:9px 16px; background:none; border:1.5px solid var(--border); border-radius:var(--radius); font-size:13px; color:var(--text2); cursor:pointer; }
#emailModalStatus { font-size:12px; color:var(--muted); margin-left:4px; }

/* ── Share Modal ─────────────────────────────────────────────────────────── */
#shareModal { display:flex; position:fixed; inset:0; background:var(--black-a55); z-index:9999; align-items:center; justify-content:center; }
.share-note { margin:0 0 14px; font-size:12.5px; color:var(--muted); }
.share-link-grp { margin-bottom:6px; }
.share-link-grp--pdf { margin-bottom:12px; }
.share-link-lbl { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.share-link-row { display:flex; gap:8px; }
.share-link-inp { flex:1; padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:11.5px; background:var(--bg); color:var(--text); font-family:var(--mono); outline:none; }
.share-copy-btn { padding:8px 14px; border:none; border-radius:var(--radius); font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; }
.share-copy-btn--web { background:var(--success); color:var(--on-accent); }
.share-copy-btn--pdf { background:var(--pay-violet-fg2); color:var(--on-accent); }
#shareSavedNote { margin:0 0 14px; font-size:11.5px; color:var(--muted); }
.share-foot { display:flex; justify-content:space-between; align-items:center; }
.share-view-btn { padding:8px 18px; background:var(--bid-teal-fg); color:var(--on-accent); border:none; border-radius:var(--radius); font-size:13px; cursor:pointer; font-weight:600; }
.share-close-btn { padding:8px 18px; background:transparent; border:1.5px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; cursor:pointer; font-weight:600; }

#selDims { font-size:10px; color:var(--muted); font-family:var(--mono); white-space:nowrap; }
#editFeedback { font-size:11px; min-width:60px; white-space:nowrap; color:var(--accent); }
#seamInfo { font-size:10px; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#segEditInfo { max-width:130px; overflow:hidden; text-overflow:ellipsis; }
#segFeedback { font-size:11px; min-width:50px; color:var(--accent); }
#vtxFeedback { font-size:11px; min-width:70px; color:var(--accent); }

/* ── Annotation color swatches ───────────────────────────────────────────── */
.annot-swatch--amber { background:var(--admin-badge-fg); }
.annot-swatch--blue  { background:var(--accent); }
.annot-swatch--green { background:var(--pay-flat-fg); }
.annot-swatch--red   { background:var(--seam-err-fg); }
.annot-swatch--white { background:var(--on-accent); border-color:var(--muted); }

/* ── Settings panel ──────────────────────────────────────────────────────── */
#profileAvatar { width:46px; height:46px; border-radius:50%; background:var(--accent-a14); border:2px solid var(--accent-a28); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:var(--accent); flex-shrink:0; text-transform:uppercase; }
#profileUsername { font-size:16px; font-weight:600; color:var(--text); }
#profileRole { font-size:12px; color:var(--muted); margin-top:2px; }
.sett-field-lbl { font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px; }
.sett-section-hdr { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.sett-inp-flex { flex:1; }
.sett-hint { font-size:11px; color:var(--muted); margin-top:4px; }
.sett-sig-area { width:100%; resize:vertical; font-family:var(--mono); font-size:12.5px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); color:var(--text); padding:8px 10px; outline:none; line-height:1.6; min-height:90px; }
.sett-notes-area { width:100%; box-sizing:border-box; resize:vertical; min-height:54px; font-family:var(--sans); font-size:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:8px 10px; outline:none; line-height:1.6; display:block; }
.sett-notes-area:focus { border-color:var(--accent); }
.mat-filter-sel { font-size:12px; padding:4px 8px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; }
.mat-filter-inp { flex:1; min-width:120px; font-size:12px; padding:4px 8px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); outline:none; }
#matLibraryList { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:12px; min-height:60px; margin-bottom:16px; }
.mat-lib-filter-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.mat-add-lbl-wrap { border-top:1px solid var(--border); padding-top:14px; }
.mat-add-hdr { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mat-add-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mat-add-inp-full { width:100%; box-sizing:border-box; }
.mat-add-sel { width:100%; box-sizing:border-box; padding:5px 6px; }
.mat-cat-custom-wrap { margin-top:5px; display:flex; align-items:center; gap:4px; }
.mat-cat-custom-inp { flex:1; min-width:0; box-sizing:border-box; }
.mat-cat-cancel-btn { padding:4px 7px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted); cursor:pointer; line-height:1; flex-shrink:0; }
.mat-add-desc-wrap { margin-top:10px; }
.mat-add-photo-wrap { margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mat-add-photo-lbl { display:inline-flex; align-items:center; padding:5px 12px; font-size:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:var(--surface); color:var(--accent); white-space:nowrap; }
#matAddImgPreview { width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }
.mat-add-textarea { width:100%; box-sizing:border-box; resize:vertical; font-family:inherit; }
.mat-add-img-preview { width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }

/* ── Bid panel elements ───────────────────────────────────────────────────── */
.bid-nav-btn-sm { margin:0; padding:6px 12px; font-size:12px; }
.bid-cust-btn { background:var(--accent-a10); border-color:var(--accent-a35); color:var(--accent); }
.bid-mob-nav-btn { background:var(--raised); border-color:var(--muted); color:var(--text); }
#mobBidStatus { padding:6px 10px; font-size:13px; font-weight:600; border-radius:var(--radius); border:1px solid var(--border); background:var(--raised); color:var(--muted); cursor:pointer; }
.bid-action-accent { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.bid-stone-sqft-td { padding:6px 12px; font-size:11px; color:var(--muted); font-family:var(--mono); }
.bid-services-hint { margin-left:auto; font-size:11px; color:var(--text2); font-family:var(--mono); white-space:nowrap; }
.bid-disc-amt { color:var(--error); }
#overrideBar { margin-top:10px; padding:10px 14px; border-radius:var(--radius); border:1.5px dashed var(--warning); background:var(--warning-soft); align-items:center; transition:background 0.2s,border-color 0.2s; }
.override-lbl { font-size:11px; font-weight:600; color:var(--warning); letter-spacing:0.03em; display:flex; align-items:center; gap:5px; }
.override-inp-wrap { display:flex; align-items:center; gap:4px; }
.override-dollar { color:var(--warning); font-size:13px; font-weight:600; }
.override-inp { width:110px; padding:4px 8px; border:1.5px solid var(--admin-badge-fg); border-radius:var(--radius-sm); background:var(--warning-soft); color:var(--warning); font-size:13px; font-weight:600; text-align:right; font-family:var(--mono); }
.pay-terms-sel { font-size:11px; padding:3px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); max-width:148px; cursor:pointer; }
.pay-save-btn-sm { font-size:11px; padding:3px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); cursor:pointer; white-space:nowrap; }
.pay-methods-hint { font-size:11px; color:var(--muted); }
.layout-hint-row { display:flex; align-items:center; gap:5px; margin-top:4px; }
.layout-hint-lbl { font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
#nestModeIndicator { font-size:11px; font-weight:600; color:var(--nest-auto-fg); cursor:pointer; user-select:none; }
.quick-add-hint { font-size:11px; color:var(--muted); }
.mat-save-btn-sm { margin-left:5px; padding:4px 10px; font-size:11px; font-weight:500; border:1px solid var(--accent); border-radius:var(--radius); background:var(--surface); color:var(--accent); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.mat-save-btn-sm:hover { background:var(--accent); color:var(--on-accent); }
.new-job-btn { margin:0; padding:4px 10px; font-size:11px; font-weight:500; width:auto; background:var(--surface); color:var(--text2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.new-job-btn:hover { border-color:var(--accent); color:var(--accent); }
.job-title-actions { display:inline-flex; align-items:center; gap:6px; }
.sett-tab-admin { display:none; }
.logo-preview-img { height:32px; max-width:120px; object-fit:contain; opacity:0.85; }
.logo-btn { margin:0; padding:6px 12px; font-size:12px; width:auto; background:var(--raised); color:var(--text2); }
.logo-remove-btn { margin:0; padding:6px 12px; font-size:12px; width:auto; background:none; color:var(--muted); }
.smtp-pass-saved { font-size:11px; color:var(--success); margin-top:3px; }
#smtpTestResult { font-size:12px; color:var(--muted); }
.sett-row-inline { flex-direction:row; align-items:center; gap:12px; margin-top:4px; }
.sett-notes-lbl { display:block; font-size:11px; color:var(--muted); margin-bottom:4px; }
.sett-notes-wrap { padding:2px 8px 8px; }
.addr-fr { align-items:center; gap:6px; }
.addr-lbl { flex-shrink:0; }
.addr-inp { flex:1; }
.profile-section { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.profile-email-section { margin-bottom:20px; }
.profile-email-row { display:flex; gap:8px; align-items:center; }
.profile-pw-section { margin-top:16px; }
.profile-pw-grid { display:grid; gap:7px; max-width:300px; }
#adminUserCount { font-size:11px; color:var(--muted); }
.admin-invite-note { font-size:12px; color:var(--muted); margin:0 0 12px; }
.admin-invite-row { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.admin-invite-inp { flex:1; min-width:180px; }
.groups-sec { margin-bottom:6px; margin-top:6px; }
.groups-sec-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.groups-lbl { font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; flex:1; }
.groups-new-btn { font-size:10px; padding:1px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); cursor:pointer; color:var(--text2); }
.pieces-title-wrap { display:flex; align-items:center; gap:4px; }
.pieces-title-lbl { flex:1; }

/* ── Bid header row 3 ────────────────────────────────────────────────────── */
.bid-hdr-row3 { display:flex; align-items:center; gap:8px; padding:5px 16px; border-top:1px solid var(--border); background:var(--black-a04); min-height:36px; flex-wrap:wrap; }
.bid-share-btn { display:flex; align-items:center; gap:6px; padding:4px 12px; font-size:12px; font-weight:600; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--raised); color:var(--muted); cursor:pointer; white-space:nowrap; }
#bidInvStatus  { padding:4px 10px; font-size:12px; font-weight:600; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--raised); color:var(--muted); cursor:pointer; height:28px; }
#bidAcceptedBadge { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--inv-lt-accepted-fg); background:var(--inv-lt-accepted-bg); border:1px solid var(--inv-dark-paid-fg); border-radius:var(--radius-sm); padding:3px 8px; white-space:nowrap; }
.bid-pdf-spacer { flex:1; }
.bid-pdf-lbl { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; user-select:none; }
.bid-pdf-lbl--teal { color:var(--bid-teal-fg); background:var(--teal-a08); border:1px solid var(--teal-a30); border-radius:var(--radius-sm); padding:2px 8px; }
.bid-pdf-hint { font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; }
.bid-pdf-chk { accent-color:var(--accent); cursor:pointer; width:13px; height:13px; }
.bid-pdf-chk--teal { accent-color:var(--bid-teal-fg); cursor:pointer; width:13px; height:13px; }

/* ── Export option dropdowns ─────────────────────────────────────────────── */
.exp-opt-dropdown { position:fixed; z-index:9999; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px var(--black-a18); padding:12px 16px; min-width:200px; font-size:13px; }
.exp-opt-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.exp-opt-title { font-weight:600; color:var(--text); }
.exp-opt-btns { display:flex; gap:6px; }
.exp-opt-sel-btn { font-size:11px; padding:2px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--raised); cursor:pointer; }
.exp-opt-lbl { display:flex; align-items:center; gap:8px; margin-bottom:6px; cursor:pointer; }
.exp-opt-lbl--last { margin-bottom:8px; }
.exp-opt-hr { margin:6px 0 8px; border:none; border-top:1px solid var(--border); }
.exp-opt-scope-hdr { font-size:11px; font-weight:600; color:var(--muted); margin-bottom:6px; letter-spacing:.04em; }
.exp-opt-lbl--scope { margin-bottom:5px; }
.exp-opt-lbl--scope-last { margin-bottom:10px; }
.exp-opt-dl-btn { width:100%; padding:7px 0; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; }
.exp-opt-dl-btn--blue { background:var(--accent); color:var(--on-accent); }
.exp-opt-dl-btn--indigo { background:var(--accent); color:var(--on-accent); }

/* ── Bid JPEG dropdown ───────────────────────────────────────────────────── */
.bid-jpeg-title { font-weight:600; color:var(--text); margin-bottom:8px; padding:0 4px; }
.bid-jpeg-btn { display:block; width:100%; text-align:left; padding:8px 10px; margin-bottom:4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); cursor:pointer; font-size:12px; line-height:1.4; }
.bid-jpeg-hint { color:var(--muted); }

/* ── Bid header button group separator ───────────────────────────────────── */
.bid-btn-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; align-self:center; }

/* ── Bid action button color modifiers ───────────────────────────────────── */
.bid-action-btn--dimmed { opacity:0.85; }
/* Uniform action button colors — 2 tones: primary (accent) and neutral */
.bid-action-btn--green  { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.bid-action-btn--teal   { background:var(--surface); border-color:var(--border); color:var(--text2); }
.bid-action-btn--teal:hover { background:var(--bg); border-color:var(--border-dk); color:var(--text); opacity:1; }
.bid-action-btn--blue   { background:var(--surface); border-color:var(--border); color:var(--text2); }
.bid-action-btn--blue:hover { background:var(--bg); border-color:var(--border-dk); color:var(--text); opacity:1; }
.bid-action-btn--purple { background:var(--surface); border-color:var(--border); color:var(--text2); }
.bid-action-btn--purple:hover { background:var(--bg); border-color:var(--border-dk); color:var(--text); opacity:1; }
.bid-action-btn--cyan   { background:var(--surface); border-color:var(--border); color:var(--text2); }
.bid-action-btn--cyan:hover { background:var(--bg); border-color:var(--border-dk); color:var(--text); opacity:1; }

/* ── Material save/edit modal ─────────────────────────────────────────────── */
#matSaveModal { display:flex; position:fixed; inset:0; background:var(--black-a55); z-index:9000; align-items:center; justify-content:center; }
.mat-modal-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 28px; width:min(460px,95vw); max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px var(--black-a50); }
.mat-modal-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.mat-modal-title { margin:0; font-size:15px; font-weight:600; }
.mat-modal-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted); padding:0 4px; line-height:1; }
.mat-modal-body { display:grid; gap:12px; }
.mat-modal-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mat-modal-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:start; }
.mat-modal-lbl { font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px; }
.mat-modal-lbl--mb6 { margin-bottom:6px; }
.mat-modal-inp { width:100%; box-sizing:border-box; }
.mat-modal-sel { width:100%; box-sizing:border-box; padding:5px 6px; }
.mat-modal-sel-sm { width:100%; padding:5px 6px; }
.mat-modal-catwrap { margin-top:5px; align-items:center; gap:4px; }
.mat-modal-catinp { flex:1; min-width:0; box-sizing:border-box; }
.mat-modal-catbtn { padding:4px 7px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted); cursor:pointer; line-height:1; flex-shrink:0; }
.mat-modal-photo-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mat-modal-preview { width:80px; height:60px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }
.mat-modal-photo-lbl { padding:6px 14px; font-size:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:var(--surface); color:var(--accent); white-space:nowrap; }
.mat-modal-textarea { width:100%; box-sizing:border-box; resize:vertical; font-family:inherit; }
.mat-modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.mat-modal-cancel-btn { padding:7px 18px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; }
.mat-modal-save-btn { padding:7px 20px; font-size:13px; font-weight:600; border:none; border-radius:var(--radius); background:var(--accent); color:var(--on-accent); cursor:pointer; }

/* ── Vendor list (Settings → Vendors tab) ───────────────────────────────── */
.vendor-list { display:grid; gap:8px; margin-bottom:16px; }
.vendor-row { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; display:flex; align-items:center; gap:10px; }
.vendor-row-info { flex:1; min-width:0; }
.vendor-row-name { font-size:13px; font-weight:600; color:var(--text); }
.vendor-row-sub  { font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vendor-row-acts { display:flex; gap:5px; flex-shrink:0; }
.vendor-row-btn  { padding:4px 11px; font-size:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text2); cursor:pointer; }
.vendor-row-btn--del { border-color:var(--danger-a30); color:var(--error); }
.vendor-add-form { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.vendor-add-title { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
.vendor-add-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.vendor-add-grid-full { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:8px; }
.vendor-add-lbl { font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:3px; }
.vendor-add-inp { width:100%; padding:6px 8px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); box-sizing:border-box; }
.vendor-add-inp:focus { outline:none; border-color:var(--accent); }
.vendor-add-btn { padding:7px 20px; font-size:13px; font-weight:600; border:none; border-radius:var(--radius); background:var(--accent); color:var(--on-accent); cursor:pointer; }
.vendor-empty { padding:18px; text-align:center; color:var(--muted); font-size:13px; }
/* vendor edit modal reuse */
#vendorEditModal { position:fixed; inset:0; background:var(--black-a55); z-index:9100; display:flex; align-items:center; justify-content:center; }
.vendor-edit-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 28px; width:min(420px,95vw); box-shadow:0 8px 40px var(--black-a50); }
.vendor-edit-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.vendor-edit-title { font-size:15px; font-weight:600; margin:0; }
.vendor-edit-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted); padding:0 4px; line-height:1; }
.vendor-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.vendor-edit-lbl { font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:3px; }
.vendor-edit-inp { width:100%; padding:6px 8px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); box-sizing:border-box; }
.vendor-edit-inp:focus { outline:none; border-color:var(--accent); }
.vendor-edit-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.vendor-edit-cancel { padding:7px 18px; font-size:13px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; }
.vendor-edit-save   { padding:7px 20px; font-size:13px; font-weight:600; border:none; border-radius:var(--radius); background:var(--accent); color:var(--on-accent); cursor:pointer; }
.vendor-edit-inp--full { width:100%; margin-bottom:8px; }

/* ── Mobile bid panel misc ───────────────────────────────────────────────── */
#mbPieceCount { font-size:12px; color:var(--muted); }
.mb-btn-accent-sm--tall { height:46px; }
.mb-pay-presets { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.mb-hdr-hint { font-size:11px; color:var(--muted); }
.mb-photo-add-label { width:auto; padding:10px 16px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.mb-card-body--pt4 { padding-top:4px; }
#mbPhotoGrid { margin-top:8px; }
#mbPhotoEmpty { margin-top:8px; border:2px dashed var(--border); border-radius:var(--radius); min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:12px; line-height:1.9; gap:2px; }
.mb-input-ta { resize:vertical; line-height:1.5; }
.mb-input-terms { line-height:1.5; }
.mb-send-link-row { display:flex; gap:8px; align-items:stretch; }
#mbShareUrl { flex:1; font-size:13px; color:var(--muted); background:var(--bg); }
#mbCopyBtn { width:auto; padding:0 18px; flex-shrink:0; font-size:14px; }
.mb-send-hint { font-size:11px; color:var(--muted); margin-top:2px; }
.mb-email-row { display:flex; gap:8px; }
#mbEmailTo { flex:1; }
#mbEmailBtn { width:auto; padding:0 18px; flex-shrink:0; font-size:14px; }
#mbEmailStatus { font-size:12px; color:var(--muted); }
.mb-dl-pdf-btn { margin-top:2px; }
.mb-clear-btn { flex:0 0 auto; width:auto; padding:14px 18px; }
.mb-photo-hint-sm { font-size:11px; opacity:0.65; }
#mobSqftLbl { font-size:11px; color:var(--muted); }
.mob-add-piece-btn { width:100%; margin-top:4px; padding:12px; font-size:15px; }

/* ── Bid services & photos misc ──────────────────────────────────────────── */
.bid-quick-btn--bold { font-weight:600; }
.bid-stone-ref { margin-left:auto; font-size:11px; color:var(--text2); font-family:var(--mono); white-space:nowrap; }
.bid-stone-sec-row { display:flex; align-items:center; gap:8px; }
.bid-section-hdr-right { display:flex; align-items:center; gap:10px; }
.bid-section-hint { font-size:10px; color:var(--muted); font-weight:400; }
.bid-sec-inner-row { display:flex; align-items:center; gap:6px; }
#bidPhotoGrid { margin-top:8px; }
#bidPhotoEmpty { margin:10px 12px; border:1px dashed var(--border); border-radius:var(--radius-sm); min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:11px; font-weight:400; line-height:1.8; gap:2px; transition:border-color .1s,background .1s; cursor:pointer; padding:16px 12px; }
.bid-photo-hint-sm { font-size:11px; opacity:0.65; }
#myServicesBtns { display:contents; }

/* ── Settings misc ───────────────────────────────────────────────────────── */
.sett-para-hint { font-size:12px; color:var(--muted); margin:0 0 12px; }
.bid-add-btn--ml-auto { margin-left:auto; }
#matAddBtn { margin-left:auto; }
#adminMsg { padding:8px 12px; border-radius:var(--radius); font-size:13px; margin-bottom:14px; }
.profile-pw-change-btn { width:fit-content; }

/* ── Templates modal ─────────────────────────────────────────────────────── */
.tpl-head-icon { flex-shrink:0; }
#tplSavePreview { flex-shrink:0; width:160px; height:110px; background:var(--hdr-bg); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
#tplSavePreviewImg { width:100%; height:100%; object-fit:contain; }
.tpl-save-content { display:flex; flex-direction:column; gap:10px; flex:1; }
.tpl-save-actions { display:flex; flex-direction:column; gap:8px; justify-content:flex-end; flex-shrink:0; }

/* ── Misc single-use IDs ─────────────────────────────────────────────────── */
#canvasToolRow { display:contents; }
#payAddRow { padding:4px 14px 8px; }

/* ── Context bar input sizes ─────────────────────────────────────────────── */
#eW, #eH { width:62px; }
#eX, #eY { width:50px; font-size:10.5px; }
#segLenInput { width:65px; }
#bevelInput { width:62px; }
.bid-jpeg-btn:last-child { margin-bottom:0; }
#bidJpegDropdown { border-radius:var(--radius); padding:10px; min-width:230px; }

/* ── Customer search hint / result rows (share.js) ───────────────────────── */
.cust-search-hint {
  padding:24px 20px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
.cust-search-hint--loading {
  padding:14px 20px;
  text-align:unset;
}
.cust-search-hint--err {
  padding:14px 20px;
  text-align:unset;
  color:var(--error);
}
.cust-result-row {
  padding:12px 20px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
}
.cust-result-row--linked { background:var(--success-a07); }
.cust-result-row:hover { background:var(--raised); }
.cust-result-name { font-size:13px; font-weight:600; color:var(--text); }
.cust-result-linked { color:var(--success); font-size:11px; }
.cust-result-sub { font-size:11px; color:var(--muted); margin-top:2px; }

/* ── Upgrade / paywall modal (share.js) ─────────────────────────────────── */
.share-upgrade-hero {
  background:linear-gradient(135deg,var(--accent),var(--pro-gradient-end));
  padding:28px 24px 20px;
  text-align:center;
}
.share-upgrade-icon { font-size:32px; margin-bottom:8px; }
.share-upgrade-title { font-size:18px; font-weight:600; color:var(--on-accent); }
.share-upgrade-sub { font-size:13px; color:var(--text); margin-top:4px; }
.share-upgrade-body { padding:24px; text-align:center; }
.share-upgrade-body p { font-size:14px; color:var(--text); margin:0 0 8px; line-height:1.6; }
.share-upgrade-body p + p { font-size:13px; color:var(--text2); margin:0 0 20px; }
.share-upgrade-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.share-upgrade-btn-ghost {
  padding:9px 20px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  font-size:13px;
  cursor:pointer;
  color:var(--text);
}
.share-upgrade-btn-primary {
  padding:9px 24px;
  border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent),var(--pro-gradient-end));
  color:var(--on-accent);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.share-upgrade-note { font-size:11px; color:var(--muted); margin:16px 0 0; }

/* ── Quotes / template error states ─────────────────────────────────────── */
.quotes-empty.err { color:var(--error); }
.tpl-empty.err    { color:var(--error); }

/* ── Payment milestone spacer ────────────────────────────────────────────── */
.pay-milestone-spacer { width:22px; display:inline-block; }

/* ── Slab tab thickness label ────────────────────────────────────────────── */
.slab-tab-thick { font-size:10px; opacity:0.7; margin-left:4px; }

/* ── Cutout / selection hint ─────────────────────────────────────────────── */
.cd-select-hint { font-size:11px; color:var(--muted); padding:8px 2px; }

/* ── Front-edge label ────────────────────────────────────────────────────── */
.cd-edge-lbl { font-size:9px; font-weight:600; letter-spacing:.07em; color:var(--muted); text-transform:uppercase; margin-bottom:5px; }
.cd-edge-lbl-sub { font-size:9px; font-weight:400; text-transform:none; }
.cd-edge-btns { display:flex; gap:4px; flex-wrap:wrap; }

/* ── Center-linked-cutout button ─────────────────────────────────────────── */
.cd-center-btn { width:100%; font-size:11px; margin-top:2px; }



/* ── Seam connection UI ──────────────────────────────────────────────────── */
.seam-sub { display:flex; flex-direction:column; gap:4px; padding:4px 4px 6px 14px; background:var(--error-a04); border-left:2px solid var(--error-a30); margin-bottom:3px; }
.seam-lbl { font-size:10px; color:var(--muted); white-space:nowrap; }
.seam-input       { font-size:10px; padding:1px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.seam-input--sm   { width:44px; }
.seam-input--md   { width:50px; }
.inp-err          { border-color:var(--error) !important; }
.inp-ok           { border-color:var(--accent) !important; }
.seam-apply-btn { font-size:10px; padding:2px 8px; border:1px solid var(--error-a40); border-radius:var(--radius-sm); background:var(--error-a10); color:var(--error); cursor:pointer; }
.seam-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.seam-row2 { display:flex; align-items:center; gap:4px; }
.seam-sel { flex:1; font-size:10px; padding:2px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.seam-note { font-size:10px; color:var(--muted); margin-bottom:6px; line-height:1.4; }
.seam-status-err { font-size:10px; color:var(--seam-err-fg); background:var(--error-a08); border:1px solid var(--error-a30); border-radius:var(--radius-sm); padding:5px 7px; margin-bottom:6px; line-height:1.5; }
.seam-status-ok { font-size:10px; color:var(--seam-ok-fg); background:var(--seam-ok-bg); border:1px solid var(--seam-ok-border); border-radius:var(--radius-sm); padding:5px 7px; margin-bottom:6px; line-height:1.4; }
.seam-warn { font-size:10px; color:var(--seam-err-fg); background:var(--error-a08); border:1px solid var(--error-a30); border-radius:var(--radius-sm); padding:5px 7px; margin-bottom:6px; line-height:1.4; }
.seam-reset-btn { font-size:10px; padding:3px 10px; margin-bottom:6px; border:1px solid var(--bid-gold-border-a40); border-radius:var(--radius-sm); background:var(--bid-gold-a50); color:var(--seam-reset-fg); cursor:pointer; width:100%; }
.seam-snap-btn { margin-top:4px; font-size:10px; padding:2px 8px; border:1px solid var(--error); border-radius:var(--radius-sm); background:var(--error-a12); color:var(--error); cursor:pointer; }
.seam-noterow { display:flex; flex-direction:column; gap:3px; padding:3px 4px 5px 14px; background:var(--error-a04); border-left:2px solid var(--error-a30); margin-bottom:2px; }
.seam-connrow { display:flex; align-items:center; gap:4px; }
.seam-arrow { font-size:10px; color:var(--muted); }
.seam-connsel { flex:1; font-size:10px; padding:2px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.seam-hint { font-size:9px; color:var(--muted); padding-left:2px; }
.seam-conn-sec { margin:6px 0 4px; padding:5px 8px; background:var(--error-a06); border-radius:var(--radius); border:1px solid var(--error-a18); }
.seam-conn-hdr { font-size:9px; font-weight:600; color:var(--error); letter-spacing:.05em; margin-bottom:3px; }
.seam-conn-row { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text2); padding:1px 0; }
.seam-conn-dot { color:var(--error); font-size:8px; }

/* ── Pay method checkboxes (desktop bid panel) ───────────────────────────── */
.pay-sel-all-btn {
  padding:2px 10px; font-size:10px; font-weight:600; letter-spacing:.5px;
  background:var(--accent-a10); border:1px solid var(--accent-a25);
  color:var(--accent2); border-radius:var(--radius-sm); cursor:pointer;
}
.pay-sel-none-btn {
  padding:2px 10px; font-size:10px; font-weight:600; letter-spacing:.5px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); border-radius:var(--radius-sm); cursor:pointer;
}
.pay-sel-row {
  display:flex; gap:6px; padding:7px 12px; border-bottom:1px solid var(--border);
}
.pay-method-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; cursor:pointer; opacity:1;
}
.pay-method-row--disabled { cursor:default; opacity:0.38; }
.pay-method-chk {
  width:13px; height:13px; flex-shrink:0;
  accent-color:var(--accent2); cursor:pointer;
}
.pay-method-chk--disabled { cursor:not-allowed; }
.pay-method-body { flex:1; min-width:0; }
.pay-method-name {
  font-size:10px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted);
}
.pay-method-val {
  font-size:12px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pay-method-val--empty { color:var(--muted); font-style:italic; }

/* ── Resume banner elements ──────────────────────────────────────────────── */
.resume-banner {
  position:fixed; top:112px; left:0; right:0; z-index:999;
  background:var(--bid-sidebar-strip); border-bottom:1px solid var(--accent-a35);
  display:flex; align-items:center; gap:10px; padding:7px 16px;
  font-family:var(--sans); font-size:12px; color:var(--text);
}
.resume-label { color:var(--resume-label-fg); font-weight:600; }
.resume-ago   { color:var(--muted); }
.resume-btn {
  margin-left:4px; padding:4px 13px; border-radius:var(--radius-sm);
  background:var(--accent); border:none; color:var(--on-accent);
  font-size:11px; font-weight:600; cursor:pointer; font-family:inherit;
}
.resume-dismiss-btn {
  margin-left:2px; padding:4px 10px; border-radius:var(--radius-sm);
  background:var(--raised); border:1px solid var(--border-dk);
  color:var(--text2); font-size:11px; cursor:pointer; font-family:inherit;
}
.resume-loading {
  padding:0 16px; color:var(--muted); font-size:12px;
}

/* ── Mobile bid pay method row ───────────────────────────────────────────── */
.mb-pay-btn-row { display:flex; gap:8px; margin-bottom:10px; }
.mb-pay-sel-btn {
  padding:5px 14px; font-size:12px; font-weight:600;
  border-radius:var(--radius); cursor:pointer;
}
.mb-pay-sel-btn--all {
  background:var(--accent-a12); border:1px solid var(--accent-a25); color:var(--accent);
}
.mb-pay-sel-btn--none {
  background:var(--hover-bg); border:1px solid var(--border); color:var(--muted);
}
.mb-pay-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.mb-pay-chk {
  width:16px; height:16px; flex-shrink:0;
  accent-color:var(--accent); cursor:pointer;
}
.mb-pay-chk--disabled { cursor:not-allowed; opacity:0.3; }
.mb-pay-lbl {
  width:110px; font-size:13px; font-weight:600;
  color:var(--text2); flex-shrink:0; cursor:pointer;
}
.mb-pay-inp { flex:1; padding:10px 12px; font-size:14px; }

/* ── Misc utility ─────────────────────────────────────────────────────────── */
.btn-disabled-dim { opacity:0.4; }
.svc-empty { font-size:12px; color:var(--muted); padding:4px 0 8px; }
.inv-log-err { padding:10px 14px; font-size:12px; color:var(--error); }

/* ── Inline-feedback text colours ───────────────────────────────────────── */
.fb-err { color:var(--seam-err-fg); }
.fb-ok  { color:var(--accent); }

/* ── Auto-save label states ─────────────────────────────────────────────── */
.asl-unsaved { color:var(--asl-unsaved-fg); opacity:1; }
.asl-fresh   { color:var(--asl-fresh-fg);  opacity:1; }
.asl-old     { color:var(--muted);opacity:1; }
.asl-hidden  { opacity:0; }

/* ── Section disabled (canvas/hrow dimmed while in bid/settings mode) ── */
.section-disabled { opacity:0.28; pointer-events:none; filter:grayscale(0.4); }

/* ── Cost toggle button active state ── */
.btn-cost-active { background:var(--cost-btn-a15) !important; color:var(--cost-btn-fg) !important; border-color:var(--cost-btn-a40) !important; }

/* ── Customer autocomplete dropdown open state ── */
.clt-drop.open { display:block; }

/* ── Pay method row separator ── */
.pay-method-row:not(:last-child) { border-bottom:1px solid var(--border); }

/* ── Override bar states ── */
.override-bar--warn   { border-color:var(--admin-badge-fg) !important; background:var(--warning-a07) !important; }
.override-bar--active { border-color:var(--override-active-border) !important; background:var(--danger-a07)  !important; }
.override-bar--warn   span { color:var(--warning); }
.override-bar--active span { color:var(--error); }
.override-inp--warn   { border-color:var(--admin-badge-fg) !important; background:var(--warning-soft) !important; color:var(--warning) !important; }
.override-inp--active { border-color:var(--error) !important; background:var(--error-soft) !important; color:var(--error) !important; }

/* ── Customer link button states ── */
#bidCustBtn.linked   { background:var(--success-a12);  border-color:var(--success-a40);  color:var(--success); }
#bidCustBtn.unlinked { background:var(--accent-a10);   border-color:var(--accent-a35); color:var(--accent); }

/* ── Fraction preview feedback colors ── */
.frac-preview--err { color:var(--error); }
.frac-preview--ok  { color:var(--accent); }

/* ── Copied button flash ── */
.btn-copied { background:var(--success) !important; }

/* ── Dashboard toolbar layout containers ── */
.db-toolbar-left  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.db-toolbar-right { display:flex; align-items:center; gap:10px; }

/* ── Dashboard misc ── */
.db-toggle-icon  { font-size:11px; color:var(--muted); }
.db-chart-icon   { font-size:12px; color:var(--muted); }
.db-kpi-sub      { font-size:10px; color:var(--muted); }
.db-loading-hint { padding:20px; color:var(--muted); font-size:12px; }
.db-empty-cell   { text-align:center; padding:32px; color:var(--muted); }
.db-pay-inp-amt  { width:120px; }
.db-pay-inp-date { width:140px; }
.db-pay-inp-note { flex:1; }
.db-pay-add-btn  { white-space:nowrap; }
.db-chk-col      { width:32px; }

/* ── Nesting mode indicator states ── */
#nestModeIndicator { cursor:pointer; }
#nestModeIndicator.nest-manual { color:var(--admin-badge-fg); }
#nestModeIndicator.nest-auto   { color:var(--nest-auto-fg); }

/* ── Mobile bid email status ── */
.mb-email--sending { color:var(--muted); }
.mb-email--ok      { color:var(--success); }
.mb-email--err     { color:var(--error); }

/* ── Settings/Admin message panels ── */
.settings-msg { padding:8px 12px; border-radius:var(--radius); font-size:13px; margin-bottom:14px; }
.settings-msg--ok  { background:var(--success-a10); border:1px solid var(--success-a25); color:var(--inv-dark-paid-fg); }
.settings-msg--err { background:var(--danger-a10);  border:1px solid var(--danger-a25); color:var(--inv-dark-cancelled-fg); }

/* ── Plan editor open state ── */
.plan-editor.open { display:block; }

/* ── Plan save message colors ── */
.plan-msg--ok  { color:var(--success); }
.plan-msg--err { color:var(--error); }

/* ── SMTP test result colors ── */
.smtp-result--ok  { color:var(--success); }
.smtp-result--err { color:var(--error); }

/* ── Photo drop zone drag-over ── */
.photo-drop-active { border-color:var(--accent) !important; background:var(--accent-a06) !important; }

/* ── Invoice status select — data-attribute driven colors ── */
.inv-status-sel[data-status="draft"]          { color:var(--inv-lt-draft-alt-fg); background:var(--inv-lt-draft-alt-bg); border-color:var(--inv-lt-draft-alt-border); }
.inv-status-sel[data-status="estimate_given"] { color:var(--pay-violet-fg2); background:var(--inv-lt-estimate-bg); border-color:var(--pay-violet-border); }
.inv-status-sel[data-status="accepted"]       { color:var(--inv-lt-accepted-fg); background:var(--inv-lt-accepted-bg); border-color:var(--inv-dark-paid-fg); }
.inv-status-sel[data-status="invoiced"]       { color:var(--inv-lt-invoiced-fg); background:var(--inv-lt-invoiced-bg); border-color:var(--inv-lt-invoiced-border); }
.inv-status-sel[data-status="sent"]           { color:var(--inv-lt-sent-fg); background:var(--inv-lt-sent-bg); border-color:var(--inv-dark-invoiced-fg); }
.inv-status-sel[data-status="deposit"]        { color:var(--inv-lt-deposit-fg); background:var(--inv-lt-deposit-bg); border-color:var(--inv-dark-deposit-fg); }
.inv-status-sel[data-status="paid"]           { color:var(--success); background:var(--inv-lt-paid-bg); border-color:var(--inv-dark-paid-fg); }
.inv-status-sel[data-status="paused"]         { color:var(--inv-lt-paused-fg); background:var(--inv-lt-paused-bg); border-color:var(--inv-dark-paused-fg); }
.inv-status-sel[data-status="cancelled"]      { color:var(--inv-lt-cancelled-fg); background:var(--inv-lt-cancelled-bg); border-color:var(--inv-dark-cancelled-fg); }

/* ── Email type toggle buttons ── */
#emailTypeEstimate.active { background:var(--pay-violet-fg2); color:var(--on-accent); }
#emailTypeInvoice.active  { background:var(--inv-lt-invoiced-fg); color:var(--on-accent); }

/* ── Email send status ── */
.email-status--err     { color:var(--error); }
.email-status--ok      { color:var(--success); }
.email-status--muted   { color:var(--muted); }

/* ── Share/Copy button flash ── */
.btn-share-flash { color:var(--success) !important; border-color:var(--success) !important; }

/* ── Dashboard follow-up message ── */
.db-fu-msg { font-size:12px; padding:8px 10px; border-radius:var(--radius-sm); margin-top:4px; }
.db-fu-msg--ok  { background:var(--success-soft); color:var(--success); border:1px solid var(--success); }
.db-fu-msg--err { background:var(--error-soft);   color:var(--error);   border:1px solid var(--error); }

/* ── Dashboard misc inline removals ── */
.db-bulk-label  { font-size:11px; color:var(--muted); }
.db-pay-inv-ref { font-weight:600; }
.db-pay-inv-sub { font-size:11px; color:var(--muted); }
#dbFuBody { resize:vertical; }

/* ── Toolbar separator (light bg context) ────────────────────────────────── */
.toolbar-sep { width:1px; height:22px; margin:0 4px; background:var(--black-a15); flex-shrink:0; }

/* ── Canvas: front edge section ──────────────────────────────────────────── */
.cd-fe-sec { margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.rsb-no-cutouts { font-size:11px; color:var(--muted); padding:6px 2px; }

/* ── Canvas: group pills bar ─────────────────────────────────────────────── */
.group-pill {
  font-size:10px; padding:2px 7px; border-radius:var(--radius-lg);
  border:1.5px solid transparent; cursor:pointer; font-weight:600; white-space:nowrap;
}
.group-pill--new {
  font-size:10px; padding:2px 7px; border-radius:var(--radius-lg);
  border:1.5px dashed var(--muted); background:transparent;
  color:var(--muted); cursor:pointer; white-space:nowrap;
}

/* ── Canvas: bug report toast ────────────────────────────────────────────── */
.canvas-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--hdr-bg); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:var(--radius); padding:10px 20px; font-size:13px;
  z-index:99999; box-shadow:0 4px 20px var(--black-a40);
}

/* ── Quotes toast ────────────────────────────────────────────────────────── */
.quotes-toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--hdr-bg); color:var(--on-accent); padding:8px 18px; border-radius:var(--radius);
  font-size:13px; z-index:9999; pointer-events:none; transition:opacity .3s; opacity:0;
}
.quotes-toast--show { opacity:1; }

/* ── Share: quota upgrade overlay/modal ──────────────────────────────────── */
.quota-overlay { position:fixed; inset:0; background:var(--black-a45); z-index:9998; }
.quota-modal {
  position:fixed; inset:0; margin:auto; z-index:9999;
  width:min(420px,92vw); height:fit-content;
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 20px 60px var(--black-a25); overflow:hidden;
}

/* ── Invoice copy link feedback ──────────────────────────────────────────── */
.ip-btn-copy--copied {
  background:var(--success-a25) !important;
  border-color:var(--success-a50) !important;
  color:var(--onboarding-accepted) !important;
}

/* ── Slab Photo Upload ───────────────────────────────────────────────────── */
.slab-img-row   { display:flex; align-items:center; gap:8px; margin-top:6px; padding:4px 0; }
.slab-img-inp   { display:none; }
.slab-img-lbl   { font-size:12px; font-weight:500; color:var(--accent); cursor:pointer; padding:6px 12px; border:1.5px dashed var(--accent); border-radius:var(--radius); white-space:nowrap; }
.slab-img-lbl:hover { background:var(--accent-soft); }
.slab-img-clear { font-size:11px; color:var(--error); background:none; border:1px solid var(--error); border-radius:var(--radius-sm); padding:2px 7px; cursor:pointer; }
.slab-img-clear:hover { background:var(--error-a07); }

/* ── Material Options (bid panel) ───────────────────────────────────────── */
.mat-opt-empty        { font-size:12px; color:var(--muted); padding:12px 0; }
.mat-opt-card         { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.mat-opt-card:last-child { border-bottom:none; }
.mat-opt-card--default { background:var(--accent-a04); border-radius:var(--radius); padding:10px; }
.mat-opt-card-img     { width:56px; height:40px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.mat-opt-card-nophoto { width:56px; height:40px; background:var(--raised); border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted); }
.mat-opt-card-body    { flex:1; min-width:0; }
.mat-opt-card-name    { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-opt-card-meta    { font-size:10px; color:var(--muted); }
.mat-opt-card-price   { font-size:11px; color:var(--accent); font-weight:600; margin-top:2px; }
.mat-opt-default-badge{ font-size:9px; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.mat-opt-card-acts    { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.mat-opt-btn          { font-size:10px; font-weight:600; padding:3px 8px; border-radius:var(--radius-sm); border:1px solid; cursor:pointer; background:none; }
.mat-opt-btn--set     { color:var(--accent); border-color:var(--accent); }
.mat-opt-btn--set:hover { background:var(--accent-a08); }
.mat-opt-btn--del     { color:var(--error); border-color:var(--error); }
.mat-opt-btn--del:hover { background:var(--error-a07); }

/* ── Material Options Picker Modal ─────────────────────────────────────── */
#matOptPickerModal    { position:fixed; inset:0; background:var(--black-a55); display:flex; align-items:center; justify-content:center; z-index:1200; }
#matOptPickerModal.hidden { display:none; }
.mat-opt-picker-box   { background:var(--surface); border-radius:var(--radius-lg); width:520px; max-width:95vw; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px var(--black-a25); }
.mat-opt-picker-hdr   { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.mat-opt-picker-title { font-size:14px; font-weight:600; }
.mat-opt-picker-search{ padding:10px 16px; border-bottom:1px solid var(--border); }
.mat-opt-picker-search input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; }
.mat-opt-picker-list  { flex:1; overflow-y:auto; }
.mat-opt-picker-row   { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s; }
.mat-opt-picker-row:hover { background:var(--hover-bg); }
.mat-opt-picker-row--added{ opacity:.5; cursor:default; }
.mat-opt-picker-thumb { width:52px; height:38px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.mat-opt-picker-nophoto{ width:52px; height:38px; background:var(--raised); border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted); }
.mat-opt-picker-info  { flex:1; min-width:0; }
.mat-opt-picker-name  { font-size:13px; font-weight:600; }
.mat-opt-picker-meta  { font-size:11px; color:var(--text2); }
.mat-opt-picker-price { font-size:12px; color:var(--accent); font-weight:600; margin-top:2px; }
.mat-opt-picker-action{ font-size:11px; font-weight:600; color:var(--accent); flex-shrink:0; }
.mat-opt-picker-empty { padding:24px; text-align:center; font-size:13px; color:var(--muted); }
.mat-toast            { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface-222); color:var(--on-accent); padding:8px 18px; border-radius:var(--radius-pill); font-size:12px; font-weight:500; opacity:0; transition:opacity .25s; pointer-events:none; z-index:9999; }
.mat-toast--show      { opacity:1; }

/* ── Assembly System ─────────────────────────────────────────────────────── */
.assembly-title-wrap { display:flex; align-items:center; gap:6px; }
.assembly-title-lbl  { flex:1; font-weight:600; }
.assembly-new-btn    { margin-left:auto; font-size:12px; font-weight:600; color:var(--accent); }

.asm-empty { font-size:11.5px; color:var(--muted); padding:8px 4px; line-height:1.5; }

.asm-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.asm-card-hdr { display:flex; align-items:center; gap:6px; padding:8px 10px 6px; }
.asm-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.asm-name { font-size:12.5px; font-weight:600; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asm-type-lbl { font-size:10px; color:var(--muted); background:var(--raised); border-radius:var(--radius-sm); padding:2px 5px; white-space:nowrap; }
.asm-icon-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; padding:2px 4px; line-height:1; border-radius:var(--radius-sm); }
.asm-icon-btn:hover { background:var(--raised); color:var(--text); }
.asm-del-btn:hover { color:var(--seam-err-fg); }

.asm-preview-wrap {
  position:relative; cursor:pointer; display:block;
}
.asm-preview-wrap:hover .asm-preview-expand-hint { opacity:1; }
.asm-preview-cv { display:block; width:100%; height:148px; background:var(--surface); }
.asm-preview-expand-hint {
  position:absolute; bottom:6px; right:8px;
  background:var(--black-a55); color:var(--text);
  font-size:10px; font-weight:600; padding:3px 7px; border-radius:var(--radius-sm);
  opacity:0; transition:opacity .15s; pointer-events:none;
}

/* ── Assembly Elevation Fullscreen Modal ──────────────────────────── */
#asmElevModal {
  display:none; position:fixed; inset:0; background:var(--black-a72);
  z-index:920; align-items:center; justify-content:center;
}
#asmElevModal.open { display:flex; }
#asmElevBox {
  background:var(--bid-overlay-bg); border-radius:var(--radius-lg);
  width:min(1140px, 96vw); height:min(860px,92vh);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 80px var(--black-a70);
}
.asm-elev-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.asm-elev-title {
  font-size:14px; font-weight:600; color:var(--text); text-transform:capitalize;
}
.asm-elev-close {
  background:none; border:none; color:var(--muted);
  font-size:20px; cursor:pointer; line-height:1; padding:0 4px;
}
.asm-elev-close:hover { color:var(--on-accent); }
.asm-elev-canvas-wrap {
  flex:1; display:flex; align-items:stretch; justify-content:center;
  padding:10px 14px; background:var(--raised); min-height:0; overflow:hidden;
}
#asmPlanSvg {
  width:100%; height:100%; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); overflow:hidden;
}
#asmPlanSvg svg { width:100%; height:100%; display:block; }
.asm-elev-roles {
  display:flex; flex-wrap:wrap; gap:6px 20px;
  padding:12px 20px; border-top:1px solid var(--border); flex-shrink:0;
}
.asm-elev-role-row { display:flex; align-items:baseline; gap:6px; font-size:11px; }
.asm-elev-role-lbl { color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.asm-elev-role-val { color:var(--text); }
.asm-elev-role-val em { color:var(--muted); font-style:normal; font-size:10px; }
.asm-elev-role-unset { color:var(--muted); font-style:italic; }

.asm-roles { padding:6px 10px 8px; display:flex; flex-direction:column; gap:3px; }
.asm-role-row { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; }
.asm-role-lbl { color:var(--muted); flex-shrink:0; }
.asm-role-piece { color:var(--text2); font-weight:500; }
.asm-role-unassigned { color:var(--muted); font-style:italic; }

.asm-edge-row { display:flex; align-items:center; gap:6px; padding:5px 10px 7px; border-top:1px solid var(--border); }
.asm-edge-lbl { font-size:10px; color:var(--muted); flex-shrink:0; }
.asm-edge-val { font-size:10.5px; color:var(--text2); font-weight:500; }

/* Assembly Modal */
#asmModal { display:flex; position:fixed; inset:0; background:var(--black-a55); z-index:9990; align-items:center; justify-content:center; }
.asm-modal-box { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); width:min(420px,95vw); max-height:90vh; overflow-y:auto; box-shadow:0 16px 60px var(--black-a50); }
.asm-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; border-bottom:1px solid var(--border); }
.asm-modal-title { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.asm-modal-close { background:none; border:none; font-size:17px; color:var(--muted); cursor:pointer; padding:0 2px; line-height:1; }
.asm-modal-body { padding:16px 20px 4px; display:flex; flex-direction:column; gap:10px; }
.asm-modal-inp { width:100%; padding:7px 10px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; box-sizing:border-box; }
.asm-color-inp { width:100%; height:34px; padding:2px 4px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); cursor:pointer; box-sizing:border-box; }
.asm-modal-divider { border:none; border-top:1px solid var(--border); margin:2px 0; }
.asm-field-group { display:flex; flex-direction:column; gap:4px; }
.asm-field-lbl { font-size:11.5px; font-weight:600; color:var(--text2); }
.asm-role-sel { width:100%; padding:6px 8px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:12.5px; box-sizing:border-box; }
.asm-modal-footer { display:flex; gap:8px; padding:14px 20px 18px; border-top:1px solid var(--border); margin-top:10px; }
.asm-file-inp { font-size:11.5px; color:var(--text2); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:5px 8px; width:100%; box-sizing:border-box; cursor:pointer; }
.asm-slab-preview { width:100%; max-height:90px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); margin-top:6px; }
.asm-grain-warn { font-size:10px; font-weight:600; color:var(--admin-badge-fg); background:var(--warning-a12); border-radius:var(--radius-sm); padding:2px 6px; white-space:nowrap; }

/* ── Assembly modal — joint-based UI ── */
.asm-field-row { display:flex; gap:10px; align-items:flex-end; }
.asm-section-hdr { display:flex; align-items:center; justify-content:space-between; margin:2px 0 6px; }
.asm-section-title { font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; }
.asm-add-btn { font-size:11.5px; font-weight:600; padding:4px 10px; border:1.5px solid var(--accent); border-radius:var(--radius-sm); background:transparent; color:var(--accent); cursor:pointer; }
.asm-add-btn:hover { background:var(--accent-a08); }

/* Pieces list */
.asm-pieces-list { display:flex; flex-direction:column; gap:4px; min-height:28px; }
.asm-piece-row { display:flex; align-items:center; gap:8px; padding:5px 8px; background:var(--hover-bg); border-radius:var(--radius-sm); border:1px solid var(--border); }
.asm-piece-name { font-size:12.5px; font-weight:600; color:var(--text); flex:1; }
.asm-dim-lbl { font-size:10.5px; color:var(--muted); white-space:nowrap; }
.asm-empty-hint { font-size:11.5px; color:var(--muted); font-style:italic; padding:4px 0; }

/* Piece picker */
.asm-picker { display:flex; flex-direction:column; gap:6px; padding:10px; background:var(--bg); border:1.5px solid var(--accent); border-radius:var(--radius); margin:4px 0; }
.asm-picker-list { max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.asm-picker-item { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px; }
.asm-picker-item:hover { background:var(--accent-a10); }
.asm-picker-empty { font-size:11.5px; color:var(--muted); padding:6px; }
.asm-picker-cancel { align-self:flex-start; font-size:11.5px; margin-top:2px; }

/* Joints list */
.asm-joints-list { display:flex; flex-direction:column; gap:4px; min-height:28px; }
.asm-joint-row { display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--hover-bg); border-radius:var(--radius-sm); border:1px solid var(--border); }
.asm-joint-desc { flex:1; font-size:12px; color:var(--text); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.asm-edge-tag { font-size:10px; font-weight:600; padding:1px 5px; border-radius:var(--radius-sm); background:var(--accent-a15); color:var(--accent); }
.asm-joint-meta { font-size:10.5px; color:var(--muted); }

/* Joint wizard */
.asm-joint-wiz { border:1.5px solid var(--accent); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:10px; background:var(--accent-a04); margin:4px 0; }
.asm-wiz-title { font-size:12px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.asm-wiz-row { display:flex; gap:10px; align-items:flex-start; }
.asm-wiz-col { display:flex; flex-direction:column; gap:5px; flex:1; }
.asm-wiz-arrow { font-size:18px; color:var(--muted); padding-top:22px; }
.asm-wiz-footer { display:flex; gap:8px; justify-content:flex-end; }
.asm-edge-btns { display:flex; gap:4px; flex-wrap:wrap; }
.asm-edge-btn { font-size:10.5px; padding:3px 8px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text2); cursor:pointer; text-transform:capitalize; }
.asm-edge-btn.active { border-color:var(--accent); background:var(--accent-a15); color:var(--accent); font-weight:600; }
.asm-radio-row { display:flex; gap:12px; align-items:center; }
.asm-radio-col { display:flex; flex-direction:column; gap:5px; }
.asm-radio-row label, .asm-radio-col label { font-size:12px; color:var(--text); display:flex; align-items:center; gap:5px; cursor:pointer; }

/* Free plan banner — always visible for limited users */
.sd-free-banner {
  display:flex; align-items:center; gap:10px;
  padding:6px 16px; background:var(--accent-a06);
  border-bottom:1px solid var(--accent-a15);
  font-size:12px;
}
.sd-free-banner-plan {
  font-weight:700; color:var(--accent);
  padding:2px 8px; border:1px solid var(--accent);
  border-radius:10px; font-size:10px; text-transform:uppercase;
  letter-spacing:0.5px;
}
.sd-free-banner-quota { color:var(--text2); }
.sd-free-banner-upgrade {
  margin-left:auto; font-weight:700; font-size:12px;
  color:var(--on-accent); background:var(--accent);
  padding:4px 14px; border-radius:var(--radius-sm);
  text-decoration:none;
}
.sd-free-banner-upgrade:hover { filter:brightness(1.1); }

/* Billing link in settings */
.settings-billing-link {
  display:inline-block; font-size:13px; font-weight:600;
  color:var(--accent); text-decoration:none; padding:8px 0;
}
.settings-billing-link:hover { text-decoration:underline; }

/* Welcome banner for new users */
.sd-welcome-banner {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px; background:var(--accent-a08);
  border-bottom:1px solid var(--accent-a20);
  font-size:12px; color:var(--text);
}
.sd-welcome-banner a { color:var(--accent); font-weight:600; text-decoration:none; margin-left:auto; }
.sd-welcome-banner button {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text2); font-size:11px; padding:3px 10px; cursor:pointer; font-family:inherit;
}
.sd-welcome-banner button:hover { border-color:var(--text2); }