/* === CSS BLOCK 1 (line 790) === */
.mi{font-family:"Material Symbols Outlined";font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;user-select:none;vertical-align:middle;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}.mi.sm{font-size:20px}.mi.xs{font-size:14px}
/* 16-colour grid picker */
.colour-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.colour-swatch-lg{width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative}
.colour-swatch-lg:hover{transform:scale(1.08)}
.colour-swatch-lg.sel::after{content:'';position:absolute;inset:3px;border-radius:5px;border:2px solid #fff;pointer-events:none}
.colour-wheel-wrap{width:100%;height:140px;display:flex;align-items:center;justify-content:center}
.colour-wheel-wrap input[type=color]{width:100px;height:100px;border-radius:50%;border:none;padding:0;cursor:pointer;background:none;-webkit-appearance:none;appearance:none}

/* === CSS BLOCK 2 (line 800) === */
:root{
  --ai-field-bg:#0d1929;--ai-field-text:#f1f5f9;
  --font:"DM Sans",sans-serif;--mono:"DM Mono",monospace;
  --r:12px;--rs:8px;--sw:224px;
  --red:#dc2626;--rdim:rgba(220,38,38,0.08);
  --green:#059669;--gdim:rgba(5,150,105,0.08);
  --blue:#2563eb;--bdim:rgba(37,99,235,0.08);
  --orange:#d97706;--odim:rgba(217,119,6,0.08);
  --text:#1e1b4b;--text2:#6b7280;--text3:#9ca3af;
  /* Help panel variable mapping for Scope (light theme) */
  --bg-surface:#ffffff;--bg-card:rgba(0,0,0,.02);--bg-card-hover:rgba(0,0,0,.04);
  --border-subtle:rgba(0,0,0,.08);--border-mid:rgba(0,0,0,.12);
  --text-primary:#1e1b4b;--text-secondary:#6b7280;--text-muted:#9ca3af;
  --font-sans:"DM Sans",sans-serif;
}


html.light-mode{--ai-field-bg:#f8fafc;--ai-field-text:#1e293b;}
/* === CSS BLOCK 3 (line 905) === */
/* ── ADORN MARKETING — Purple theme (default) ── */
:root,[data-brand="marketing"]{
  --bg:#f4f3fc;--bg2:#ffffff;--bg3:#f0eeff;--bg4:#e8e5fa;--bg5:#dcd8f5;
  --border:rgba(124,58,237,0.1);--border2:rgba(124,58,237,0.2);--border3:rgba(124,58,237,0.35);
  --p:#7c3aed;--p2:#a78bfa;--p3:#5b21b6;--plight:#ede9fe;--plighter:#f5f3ff;
  --pdim:rgba(124,58,237,0.08);--pdim2:rgba(124,58,237,0.15);
  --sb-bg:linear-gradient(160deg,#5b21b6 0%,#7c3aed 60%,#a78bfa 100%);
  --sh:0 1px 3px rgba(124,58,237,0.08),0 4px 16px rgba(124,58,237,0.06);
  --sh2:0 2px 8px rgba(124,58,237,0.12),0 8px 24px rgba(124,58,237,0.08);}
/* ── ADORN MEDIA — Teal theme ── */
[data-brand="media"]{
  --bg:#f0fafa;--bg2:#ffffff;--bg3:#e6f7f7;--bg4:#cceeee;--bg5:#b3e5e5;
  --border:rgba(13,148,136,0.12);--border2:rgba(13,148,136,0.25);--border3:rgba(13,148,136,0.4);
  --p:#0d9488;--p2:#2dd4bf;--p3:#0f766e;--plight:#ccfbf1;--plighter:#f0fdfa;
  --pdim:rgba(13,148,136,0.08);--pdim2:rgba(13,148,136,0.15);
  --sb-bg:linear-gradient(160deg,#0f766e 0%,#0d9488 60%,#2dd4bf 100%);
  --sh:0 1px 4px rgba(13,148,136,0.08);--sh2:0 4px 16px rgba(13,148,136,0.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--font);font-size:14px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px}
#app{display:flex;height:100vh;overflow:hidden}
/* SIDEBAR */
#sb{width:var(--sw);background:var(--sb-bg);display:flex;flex-direction:column;flex-shrink:0;transition:width .25s;box-shadow:4px 0 20px rgba(91,33,182,0.15)}
#sb.col{width:80px}
/* ── COLLAPSED SIDEBAR — slim 1-col + flyout drawers ── */
#sb.col{width:52px;overflow:visible}
#sb.col .nlbl{opacity:0;height:0;padding:0;overflow:hidden;margin:0}
#sb.col .ntxt{display:none}
#sb.col .srw{opacity:0;pointer-events:none;height:0;margin:0;padding:0;border:none;overflow:hidden}
#sb.col .sb-rates-expanded{display:none !important}
#sb.col .sb-rates-collapsed{display:flex !important}
#sb:not(.col) .sb-rates-collapsed{display:none !important}
#sb.col .lt2{display:none}
#sb.col .slogo{padding:10px 0;justify-content:center;gap:0}
#sb.col #brand-name-label{display:none}
#sb.col #sb-col-logo{display:flex !important}
#sb.col .lm{display:none !important}
#sb:not(.col) #sb-col-logo{display:none !important}
/* Nav items: single column centered icons */
#sb.col .snav{padding:4px 4px;overflow-y:auto;overflow-x:visible;position:relative}
#sb.col .ni{justify-content:center;padding:10px 0;display:flex;align-items:center;width:100%;border-radius:8px;margin:0 0 1px 0;position:relative}
#sb.col .ni:hover{background:rgba(255,255,255,.15)}
#sb.col .ni.active{background:rgba(255,255,255,.22)}
#sb.col .nic{display:none}
#sb.col #ni-dashboard-arrow,#sb.col #ni-invoicing-arrow,#sb.col #ni-services-arrow,
#sb.col #ni-quotes-arrow,#sb.col #ni-reports-arrow,#sb.col #ni-journals-arrow,#sb.col #ni-staff-fin-arrow,#sb.col #ni-transactions-arrow,#sb.col #ni-clients-arrow,#sb.col #ni-coa-arrow{display:none}
#sb.col #ni-quotes>div,#sb.col #ni-reports>div,#sb.col #ni-journals>div,#sb.col #ni-staff>div,#sb.col #ni-transactions>div,#sb.col #ni-clients>div{justify-content:center;width:100%}
#sb.col #ni-quotes,#sb.col #ni-reports,#sb.col #ni-journals,#sb.col #ni-staff,#sb.col #ni-transactions,#sb.col #ni-clients{justify-content:center;padding:10px 0}
/* Force icon centering — hide text label wrapper gap in collapsed parent items */
#sb.col #ni-quotes>div>span.ntxt,#sb.col #ni-reports>div>span.ntxt,
#sb.col #ni-journals>div>span.ntxt,#sb.col #ni-staff>div>span.ntxt,
#sb.col #ni-transactions>div>span.ntxt,#sb.col #ni-clients>div>span.ntxt{display:none}
#sb.col .ni .mi.sm{font-size:22px;margin:0 auto;color:rgba(255,255,255,.75)}
#sb.col .ni:hover .mi.sm,#sb.col .ni.active .mi.sm{color:#fff}
/* Hide inline submenus in collapsed */
#sb.col #ni-dashboard-sub,#sb.col #ni-invoicing-sub,#sb.col #ni-services-sub,
#sb.col #ni-quotes-sub,#sb.col #ni-reports-sub,#sb.col #ni-journals-sub,
#sb.col #ni-staff-fin-sub,#sb.col #ni-transactions-sub,#sb.col #ni-coa-sub,#sb.col #ni-clients-sub{display:none !important}
/* Compact: force all expandable items to center their icon */
#sb.col .ni[style*="justify-content:space-between"]{justify-content:center !important}
#sb.col .ni[style*="justify-content:space-between"]>div:first-child{margin:0 auto;justify-content:center}
#sb.col #ni-coa-arrow,#sb.col #ni-reports-arrow,#sb.col #ni-staff-fin-arrow,#sb.col #ni-transactions-arrow,#sb.col #ni-quotes-arrow,#sb.col #ni-clients-arrow{display:none !important}
/* ── FLYOUT DRAWER ── */
.sb-flyout{
  position:fixed;
  left:52px;
  background:linear-gradient(160deg,#5b21b6 0%,#7c3aed 60%,#a78bfa 100%);
  border-radius:0 10px 10px 0;
  box-shadow:4px 0 20px rgba(0,0,0,0.25);
  min-width:180px;
  padding:6px 0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .15s ease,transform .15s ease;
}
.sb-flyout.open{opacity:1;transform:translateX(0);pointer-events:auto}
.sb-flyout-title{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:.1em;
  padding:6px 14px 4px;
}
.sb-flyout .ni{
  padding:8px 14px;border-radius:0;width:100%;justify-content:flex-start;
  gap:10px;display:flex;align-items:center;color:rgba(255,255,255,.8);
  white-space:nowrap;margin:0;
}
.sb-flyout .ni:hover{background:rgba(255,255,255,.15);color:#fff}
.sb-flyout .ni.active{background:rgba(255,255,255,.2);color:#fff}
.sb-flyout .ni .ntxt{display:block;font-size:13px}
.sb-flyout .ni .mi.sm{font-size:18px;color:inherit}
/* Collapsed: user block */
#sb.col .sb-user-full{display:none !important}
#sb.col .sb-version-full{display:none !important}
#sb.col #sidebar-user-block{padding:4px}
#sb.col .sb-user-collapsed{display:flex !important}
#sb.col~#main .app-switcher,body.sb-collapsed body.sb-col .app-switcher{left:64px}
/* Expanded: hide collapsed-only elements */
#sb:not(.col) .sb-user-collapsed{display:none !important}
/* Media brand flyout gets teal gradient */
[data-brand="media"] .sb-flyout{background:linear-gradient(160deg,#0f766e 0%,#0d9488 60%,#2dd4bf 100%)}
/* Rates flyout */
#sb-rates-flyout{
  position:fixed;
  left:52px;
  background:linear-gradient(160deg,#5b21b6 0%,#7c3aed 60%,#a78bfa 100%);
  border-radius:0 10px 10px 0;
  box-shadow:4px 0 20px rgba(0,0,0,0.25);
  min-width:200px;
  padding:12px 16px;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .15s ease,transform .15s ease;
}
#sb-rates-flyout.open{opacity:1;transform:translateX(0);pointer-events:auto}
[data-brand="media"] #sb-rates-flyout{background:linear-gradient(160deg,#0f766e 0%,#0d9488 60%,#2dd4bf 100%)}
.srf-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.srf-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.srf-row:last-child{border-bottom:none}
.srf-key{font-size:11px;color:rgba(255,255,255,.6)}
.srf-val{font-size:12px;font-weight:700;color:#fff;font-family:var(--mono)}
.srf-divider{border-top:1px solid rgba(255,255,255,.12);margin:8px 0}
.slogo{padding:18px 15px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.12);position:relative}
.lm{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,0.35)}
.lm img{width:108%;height:108%;object-fit:cover;display:block;margin-left:-2px;margin-top:-2px}
.lt2{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.lt2 span{display:block;font-size:10px;color:rgba(255,255,255,0.6);font-weight:400;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.snav{display:flex;flex-direction:column;padding:10px 8px;flex:1;overflow-y:auto}
.nlbl{font-size:10px;font-weight:600;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:.1em;padding:10px 10px 4px;white-space:nowrap;overflow:hidden}
.ni{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--rs);color:rgba(255,255,255,0.7);cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden;user-select:none;margin-bottom:2px}
.ni:hover{background:rgba(255,255,255,0.12);color:#fff}
.ni.active{background:rgba(255,255,255,0.2);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.ni-sub{padding-left:32px!important;font-size:11px!important;opacity:.9}
.nic{width:16px;flex-shrink:0;text-align:center;font-size:14px}
.ntxt{font-size:13px}
.srw{margin:0 8px 8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.13);border-radius:var(--r);padding:7px 10px;overflow:hidden;transition:opacity .25s}
.srw-lbl{font-size:9px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;font-weight:600}
.srw-rate{font-size:14px;font-weight:300;color:#fff;font-family:var(--mono);margin-bottom:2px}
.srw-info{font-size:9px;color:rgba(255,255,255,0.5);line-height:1.6}
.srw-fx{font-size:9px;color:rgba(255,255,255,0.35);margin-top:3px;line-height:1.5;border-top:1px solid rgba(255,255,255,0.08);padding-top:3px}
/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tbar{height:54px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;box-shadow:var(--sh);position:sticky;top:0;z-index:20}
.tbar-ttl{font-size:15px;font-weight:600;flex:1}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px;padding-bottom:32px}
/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.chdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.cttl{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--rs);font-size:13px;font-weight:500;transition:all .15s;cursor:pointer}
.bp{background:linear-gradient(135deg,var(--p3),var(--p));color:#fff;box-shadow:0 2px 8px rgba(124,58,237,0.3)}.bp:hover{filter:brightness(1.08)}
.bs{background:var(--bg2);color:var(--text);border:1px solid var(--border)}.bs:hover{background:var(--plight);border-color:var(--border2)}
.bg2{color:var(--text2)}.bg2:hover{color:var(--p);background:var(--pdim)}
.bd{background:var(--rdim);color:var(--red);border:1px solid rgba(220,38,38,0.15)}.bd:hover{background:rgba(220,38,38,0.14)}
.bsm{padding:5px 10px;font-size:12px}.bxs{padding:3px 8px;font-size:11px}.bic{padding:6px;border-radius:var(--rs)}
.bcard{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .15s;flex-shrink:0;border:1.5px solid var(--border);background:var(--bg3)}
.bcard.edit{color:var(--text2)}.bcard.edit:hover{background:var(--plight);border-color:var(--p);color:var(--p)}
.bcard.del{color:var(--text3)}.bcard.del:hover{background:rgba(220,38,38,.08);border-color:var(--red);color:var(--red)}.bcard.clone{color:var(--text2)}.bcard.clone:hover{background:var(--plight);border-color:var(--p);color:var(--p)}.bics{padding:3px;border-radius:4px}
/* INPUTS */
.fi,.fs,.ft{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--rs);color:var(--text);padding:8px 12px;transition:all .15s;outline:none;color-scheme:dark;font-family:'DM Sans',sans-serif;font-size:13px}
html.light-mode .fi,html.light-mode .fs,html.light-mode .ft{color-scheme:light}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pdim)}
.fs{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.fs option{background:var(--bg2);color:var(--text)}
.ft{resize:vertical;min-height:70px}
option{background:var(--bg2);color:var(--text)}
.fg{margin-bottom:13px}.flbl{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:5px}
/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500}
.b-p{background:var(--plight);color:var(--p)}.b-g{background:var(--gdim);color:var(--green)}.b-b{background:var(--bdim);color:var(--blue)}.b-o{background:var(--odim);color:var(--orange)}.b-gr{background:var(--bg3);color:var(--text2)}
/* MODALS */
.movl{position:fixed;inset:0;background:rgba(30,27,75,0.65);display:flex;align-items:center;justify-content:center;z-index:1500;opacity:0;pointer-events:none;transition:opacity .2s}
.movl.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:560px;max-width:96vw;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .2s;box-shadow:var(--sh2)}
.movl.open .modal{transform:translateY(0)}
.mhdr{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1}
.mttl{font-size:15px;font-weight:600}
.mbdy{padding:18px 22px;overflow-y:auto}.mftr{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
/* Searchable dropdown — fixed position to escape modal overflow */
.scope-dropdown{display:none;position:fixed;background:var(--bg2);border:1.5px solid var(--border2);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:9999;max-height:350px;overflow-y:auto;min-width:200px}
.scope-dropdown .dd-item{padding:8px 14px;cursor:pointer;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);transition:background .1s}
.scope-dropdown .dd-item:hover{background:var(--pdim,rgba(124,58,237,.06))}
.scope-dropdown .dd-item:last-child{border-bottom:none}
.scope-dropdown .dd-item .dd-sub{font-size:10px;color:var(--text3);margin-top:1px}
.scope-dropdown .dd-create{padding:9px 14px;cursor:pointer;font-size:12px;font-weight:700;color:var(--p);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px}
.scope-dropdown .dd-create:hover{background:var(--pdim,rgba(124,58,237,.06))}
/* CONFIRM */
.covl{position:fixed;inset:0;background:rgba(30,27,75,0.7);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;pointer-events:none;transition:opacity .15s}
.covl.open{opacity:1;pointer-events:all}
.cbox{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:380px;max-width:95vw;padding:26px;transform:scale(.96);transition:transform .15s;box-shadow:var(--sh2)}
.covl.open .cbox{transform:scale(1)}
/* QUOTE LAYOUT */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px;margin-bottom:20px}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.slbl{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.sval{font-size:22px;font-weight:300;color:var(--text)}.sval.ac{color:var(--p)}
.ssub{font-size:11px;color:var(--text3);margin-top:3px}
.qli{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:all .15s;box-shadow:var(--sh)}
.qli:hover{border-color:var(--border2);box-shadow:var(--sh2);transform:translateY(-1px)}
.qact{display:flex;gap:3px;opacity:0;transition:opacity .15s}.qli:hover .qact{opacity:1}
/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;background:var(--plighter);border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:500;color:var(--p);cursor:grab;transition:all .15s;user-select:none}
.chip:hover{background:var(--plight);border-color:var(--p);box-shadow:0 2px 8px rgba(124,58,237,0.15)}
.chip:active{cursor:grabbing;transform:scale(0.97)}
.chip-e{opacity:0;font-size:10px;color:var(--p2);margin-left:2px;transition:opacity .1s;cursor:pointer;padding:1px 4px;border-radius:3px}
.chip:hover .chip-e{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:5px}
/* TOTALS */
.totp{background:var(--plighter);border:1.5px solid var(--border2);border-radius:var(--r);padding:14px}
.trow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;color:var(--text2)}
.trow.grand{color:var(--p);font-weight:600;font-size:15px;padding-top:10px;border-top:2px solid var(--border2);margin-top:6px}
.tv{font-family:var(--mono);font-size:13px}.grand .tv{font-size:15px}
/* LINE ITEMS */
.lirow{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);position:relative;transition:background .15s}
.lirow:last-child{border-bottom:none}
.lirow.drag-over{border-top:2.5px solid var(--p)}
.lirow.lirow-sub-over{background:var(--pdim);border-radius:var(--rs);outline:2px solid var(--p2);outline-offset:-2px}
.chip-drop-over{border-color:var(--p)!important;background:var(--plight)!important;box-shadow:0 0 0 3px var(--pdim)!important}
.lirow.dragging{opacity:.35}
.lidrag{color:var(--text3);cursor:grab;font-size:15px;padding:4px 2px;flex-shrink:0;user-select:none;margin-top:4px}
.lidrag:active{cursor:grabbing}
.libody{flex:1;min-width:0}
.liname{font-size:13px;font-weight:600;background:transparent;border:1.5px solid transparent;border-radius:6px;padding:4px 7px;width:100%;color:var(--text);outline:none;transition:all .15s}
.liname:hover{border-color:var(--border);background:var(--bg3)}.liname:focus{border-color:var(--p);background:var(--bg2);box-shadow:0 0 0 3px var(--pdim)}
.lidesc{font-size:11px;color:var(--text2);background:transparent;border:1.5px solid transparent;border-radius:6px;padding:4px 7px;width:100%;outline:none;resize:vertical;min-height:32px;max-height:300px;overflow-y:auto;transition:border-color .15s,background .15s,box-shadow .15s;margin-top:2px;line-height:1.55;white-space:pre-wrap}
.lidesc:hover{border-color:var(--border);background:var(--bg3)}.lidesc:focus{border-color:var(--p);background:var(--bg2);box-shadow:0 0 0 3px var(--pdim)}.lidesc::-webkit-resizer{background:var(--bg5);border-radius:0 0 4px 0}
.licontrols{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex-shrink:0;min-width:260px;margin-top:1px}
.linum{background:var(--bg2);border:1.5px solid var(--border);border-radius:5px;color:var(--text);padding:4px 7px;font-size:12px;font-family:var(--mono);text-align:right;outline:none;transition:all .15s}
.linum:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--pdim)}
.lisel{background:var(--bg2);border:1.5px solid var(--border);border-radius:5px;color:var(--text2);padding:4px 22px 4px 8px;font-size:11px;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;cursor:pointer;transition:all .15s}
.lisel:focus{border-color:var(--p);outline:none}
.subrow{background:var(--plighter);border:1px solid var(--border);border-radius:var(--rs);margin:4px 0 4px 28px;padding:8px 10px}
/* QTY STEPPER */
.qty-wrap{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg2)}
.qty-btn{width:24px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--text2);background:var(--bg3);transition:all .15s;user-select:none;flex-shrink:0;border:none;font-family:var(--font)}
.qty-btn:hover{background:var(--plight);color:var(--p)}
.qty-input{width:52px;height:28px;border:none;background:transparent;color:var(--text);font-family:var(--mono);font-size:12px;text-align:center;outline:none;padding:0 2px}
.qty-wrap.disabled{opacity:.35;pointer-events:none}
/* DISC */
.disc-wrap{display:flex;align-items:center;gap:5px}
.disc-input{width:52px;height:28px;background:var(--bg2);border:1.5px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:12px;text-align:center;outline:none;padding:0 4px;transition:all .15s}
.disc-input:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--pdim)}
/* INDENT */
.indent-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;cursor:pointer;transition:all .15s;color:var(--text3);font-size:13px;border:1.5px solid var(--border);background:var(--bg2)}
.indent-btn:hover{color:var(--p);border-color:var(--p);background:var(--plight)}
/* RIGHT PANEL */
.rpanel{width:264px;flex-shrink:1;min-width:200px;display:flex;flex-direction:column;height:100%}
/* DROP ZONES */
.dropzone-empty{border:2px dashed var(--border2);border-radius:var(--r);padding:32px;text-align:center;color:var(--text3);transition:all .2s;background:var(--plighter)}
.dropzone-bottom{margin-top:10px;border:2px dashed var(--border);border-radius:var(--r);padding:10px;text-align:center;font-size:11px;color:var(--text3);transition:all .2s}
.dropzone-empty.chip-drop-over,.dropzone-bottom.chip-drop-over{border-color:var(--p);background:var(--plight);color:var(--p)}
/* MISC */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--plight);border:1.5px solid var(--border);border-radius:20px;font-size:11px;font-weight:500;color:var(--p);cursor:pointer;transition:all .15s;user-select:none}
.pill:hover{background:var(--pdim2);border-color:var(--p)}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.rq{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border)}.rq:last-child{border-bottom:none}
.div{height:1px;background:var(--border);margin:13px 0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.svccard{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:all .15s;box-shadow:var(--sh);cursor:default}
.svccard:hover{border-color:var(--border2);box-shadow:var(--sh2);transform:translateY(-1px)}
.svccard .svc-btns{opacity:0;transition:opacity .15s;pointer-events:none}
.svccard:hover .svc-btns{opacity:1;pointer-events:all}
.svccard.svc-over{border-color:var(--p);box-shadow:0 0 0 2px var(--pdim);transform:scale(1.01)}
.clcard{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;transition:all .15s;box-shadow:var(--sh);position:relative}
.clcard:hover{border-color:var(--border2)}
.clav{width:38px;height:38px;background:var(--plight);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--p);flex-shrink:0}
.acard{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:0;transition:all .15s;box-shadow:var(--sh)}
.acard:hover{border-color:var(--border2);box-shadow:var(--sh2);transform:translateY(-1px)}
.notif{position:fixed;bottom:22px;right:22px;background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--r);padding:11px 16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;z-index:300;transform:translateY(18px);opacity:0;transition:all .25s;pointer-events:none;box-shadow:var(--sh2);color:var(--text)}
.notif.show{transform:translateY(0);opacity:1}
.ndot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}.ndot.w{background:var(--orange)}
.spin{width:12px;height:12px;border:2px solid var(--border2);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* App Switcher */
.app-switcher{position:fixed;bottom:20px;left:14px;z-index:100;display:flex;flex-direction:column;gap:8px;align-items:flex-start;transition:left .25s}
.app-switcher-toggle{width:42px;height:42px;border-radius:12px;background:#1f2937;border:1.5px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.app-switcher-toggle:hover{background:#374151;color:#fff;border-color:rgba(255,255,255,.3)}
.app-switcher-menu{background:#0c1220;border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;display:none;flex-direction:column;gap:2px;box-shadow:0 8px 40px rgba(0,0,0,.55);min-width:188px}
.app-switcher-menu.open{display:flex}
.app-sw-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.app-sw-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;text-decoration:none;transition:background .15s;color:rgba(255,255,255,.6);font-size:12px;font-weight:500;border:none;background:none;font-family:inherit;width:100%;text-align:left}
.app-sw-item:hover{background:rgba(255,255,255,.07);color:#fff}
.app-sw-item.current{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.app-sw-sep{height:1px;background:rgba(255,255,255,.07);margin:2px 0}
html.light-mode .app-switcher-toggle{background:#fff;border-color:rgba(0,0,0,.15);color:#4b5563;box-shadow:0 2px 12px rgba(0,0,0,.1)}
html.light-mode .app-switcher-toggle:hover{background:#f3f4f6;color:#111}
html.light-mode .app-switcher-menu{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 8px 32px rgba(0,0,0,.12)}
html.light-mode .app-sw-item{color:#4b5563}
html.light-mode .app-sw-item:hover{background:rgba(0,0,0,.05);color:#111}
html.light-mode .app-sw-item.current{background:rgba(0,0,0,.06);color:#111}
html.light-mode .app-sw-sep{background:rgba(0,0,0,.07)}
/* ══ SCOPE DARK MODE ════════════════════════════════════════ */
html.dark-mode{
  --bg:#0f172a;--bg2:#1e293b;--bg3:#263548;--bg4:#2d3f57;--bg5:#374151;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);--border3:rgba(255,255,255,.22);
  --text:rgba(255,255,255,.92);--text2:rgba(255,255,255,.6);--text3:rgba(255,255,255,.35);
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);
  --sh2:0 2px 8px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  /* Help panel dark overrides */
  --bg-surface:#0c1220;--bg-card:rgba(255,255,255,.04);--bg-card-hover:rgba(255,255,255,.07);
  --border-subtle:rgba(255,255,255,.08);--border-mid:rgba(255,255,255,.12);
  --text-primary:rgba(255,255,255,.92);--text-secondary:rgba(255,255,255,.6);--text-muted:rgba(255,255,255,.35);
}
/* Body + main content */
html.dark-mode body{background:var(--bg);color:var(--text);}
html.dark-mode #main{background:var(--bg);}
html.dark-mode #ca{background:var(--bg);}
/* Topbar */
html.dark-mode .tbar{background:#0f172a;border-bottom-color:rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06);}
html.dark-mode .tbar-ttl{color:rgba(255,255,255,.9);}
html.dark-mode .btn.bg2{background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.1);}
html.dark-mode .btn.bg2:hover{background:rgba(255,255,255,.12);color:#fff;}
html.dark-mode #theme-btn{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.7) !important;}
/* Cards and panels */
html.dark-mode .card,.dark-mode .sc,.dark-mode .qli,.dark-mode .clcard,.dark-mode .svccard,.dark-mode .acard{background:#1e293b;border-color:rgba(255,255,255,.08);}
html.dark-mode .modal{background:#1e293b;border-color:rgba(255,255,255,.12);}
html.dark-mode .mhdr{background:#1e293b;border-bottom-color:rgba(255,255,255,.08);}
html.dark-mode .mhdr .mttl,.dark-mode .mhd-info h2{color:rgba(255,255,255,.9);}
html.dark-mode .mftr{border-top-color:rgba(255,255,255,.08);}
html.dark-mode .mbdy{background:#1e293b;}
html.dark-mode .mtab{color:rgba(255,255,255,.4);}
html.dark-mode .mtab.active{color:#a78bfa;border-bottom-color:#7c3aed;}
/* Form inputs */
html.dark-mode .fi,.dark-mode .fs,.dark-mode .ft{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.9);}
html.dark-mode .fi:focus,.dark-mode .fs:focus{border-color:#7c3aed;background:rgba(255,255,255,.08);}
html.dark-mode .fi::placeholder{color:rgba(255,255,255,.3);}
html.dark-mode .flbl,.dark-mode .fg label{color:rgba(255,255,255,.4);}
html.dark-mode option{background:#1e293b;color:rgba(255,255,255,.9);}
/* Tables */
html.dark-mode .tbl th{background:#263548;color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.07);}
html.dark-mode .tbl td{border-color:rgba(255,255,255,.05);}
html.dark-mode .tbl tr:hover td{background:rgba(255,255,255,.03);}
/* Quote items */
html.dark-mode .qli{background:#1e293b;border-color:rgba(255,255,255,.08);}
html.dark-mode .linum,.dark-mode .lisel,.dark-mode .disc-input,.dark-mode .qty-wrap{background:#263548;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
html.dark-mode .qty-btn{background:#2d3f57;color:rgba(255,255,255,.7);}
/* Sidebar panels */
html.dark-mode .cbox{background:#1e293b;border-color:rgba(255,255,255,.12);}
html.dark-mode .notif{background:#1e293b;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.9);}
/* Catch-all for JS-rendered inline light colours */
html.dark-mode [style*="background:#ffffff"]{background:#1e293b !important;}
html.dark-mode [style*="background:#fff"]{background:#1e293b !important;}
html.dark-mode [style*="background:rgba(255,255,255,.04)"]{background:rgba(255,255,255,.04) !important;}
html.dark-mode [style*="color:#111"],html.dark-mode [style*="color:#1e1b4b"],html.dark-mode [style*="color:#374151"],html.dark-mode [style*="color:#111827"]{color:rgba(255,255,255,.85) !important;}
html.dark-mode [style*="color:#6b7280"],html.dark-mode [style*="color:#9ca3af"]{color:rgba(255,255,255,.4) !important;}
html.dark-mode [style*="border-color:rgba(0,0,0"]{border-color:rgba(255,255,255,.1) !important;}

/* App switcher dark mode */
html.dark-mode .app-switcher-toggle{background:#1f2937;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.6);}
html.dark-mode .app-switcher-menu{background:#0c1220;border-color:rgba(255,255,255,.12);}
html.dark-mode .app-sw-item{color:rgba(255,255,255,.6);}
html.dark-mode .app-sw-item:hover{background:rgba(255,255,255,.07);color:#fff;}
html.dark-mode .app-sw-item.current{background:rgba(255,255,255,.08);color:#fff;}
html.dark-mode .app-sw-sep{background:rgba(255,255,255,.07);}


/* ── Searchable Client Dropdown ─────────────────── */
.cl-drop{position:relative;user-select:none}
.cl-drop-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--bg2);border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:border-color .15s}
.cl-drop-trigger:hover,.cl-drop.open .cl-drop-trigger{border-color:var(--p)}
.cl-drop-trigger .arrow{font-size:16px;color:var(--text3);transition:transform .2s;flex-shrink:0}
.cl-drop.open .cl-drop-trigger .arrow{transform:rotate(180deg)}
.cl-drop-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg);border:1.5px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:400;overflow:hidden;min-width:260px}
.cl-drop.open .cl-drop-panel{display:block}
.cl-drop-search{padding:8px 10px;border-bottom:1px solid var(--border)}
.cl-drop-search input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text);outline:none}
.cl-drop-search input:focus{border-color:var(--p)}
.cl-drop-list{max-height:220px;overflow-y:auto}
.cl-drop-item{padding:8px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .1s}
.cl-drop-item:hover{background:var(--bg2);color:var(--text)}
.cl-drop-item.selected{background:rgba(124,58,237,.1);color:var(--p);font-weight:600}
.cl-drop-item.empty{color:var(--text3);font-style:italic;cursor:default}


/* ── Dark mode additional fixes ─────────────────── */
html.dark-mode .cl-drop-trigger{background:var(--bg2);border-color:var(--border2);color:var(--text)}
html.dark-mode .cl-drop-panel{background:var(--bg);border-color:var(--border2)}
html.dark-mode .cl-drop-search input{background:var(--bg2);border-color:var(--border);color:var(--text)}
html.dark-mode .cl-drop-item{color:var(--text2)}
html.dark-mode .cl-drop-item:hover{background:var(--bg2)}
html.dark-mode .cl-drop-item.selected{background:rgba(124,58,237,.15);color:var(--p)}
html.dark-mode select{background:var(--bg2);color:var(--text);border-color:var(--border2)}
html.dark-mode select option{background:var(--bg);color:var(--text)}
html.dark-mode optgroup{background:var(--bg);color:var(--text3)}
html.dark-mode table{color:var(--text)}
html.dark-mode th{color:var(--text3);border-bottom-color:var(--border)!important}
html.dark-mode td{border-color:var(--border)!important}
html.dark-mode tr:hover td{background:var(--bg2)}
html.dark-mode .notif{background:var(--bg2);border-color:var(--border2);color:var(--text)}
html.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1)}
html.dark-mode input[type="color"]{background:var(--bg2);border-color:var(--border)}
html.dark-mode .tbar{background:var(--bg)!important;border-bottom:1px solid var(--border)!important}
html.dark-mode #pt{color:var(--text)!important}
html.dark-mode .sb-rates-expanded{color:rgba(255,255,255,.6)!important}
html.dark-mode .bcard{background:var(--bg2);border-color:var(--border);color:var(--text2)}
html.dark-mode .bcard:hover{background:var(--bg3);color:var(--text)}
html.dark-mode .ask-modal,html.dark-mode .ask-box{background:var(--bg2)!important;border-color:var(--border2)!important;color:var(--text)!important}


/* ── Dark mode: hardcoded inline color fixes ─────── */
html.dark-mode .bank-box{background:var(--bg2)!important;border-color:var(--border)!important;color:var(--text2)!important}
html.dark-mode [style*="background:#f9fafb"]{background:var(--bg2)!important;border-color:var(--border)!important}
html.dark-mode [style*="background:#fffbeb"]{background:rgba(251,191,36,.1)!important;border-color:rgba(251,191,36,.3)!important}
html.dark-mode [style*="background:#fee2e2"]{background:rgba(220,38,38,.15)!important}
html.dark-mode [style*="background:#fff"],.dark-mode [style*="background: #fff"]{background:var(--bg2)!important}
html.dark-mode [style*="color:#1f2937"],html.dark-mode [style*="color:#111"]{color:var(--text)!important}
html.dark-mode [style*="color:#374151"]{color:var(--text2)!important}
html.dark-mode [style*="color:#6b7280"]{color:var(--text3)!important}

/* ── Dark mode — missing component overrides ─────── */
html.dark-mode .chip{background:var(--bg3)!important;border-color:var(--border2)!important;color:var(--p2)!important}
html.dark-mode .chip:hover{background:var(--bg4)!important;border-color:var(--p)!important}
html.dark-mode .subrow{background:var(--bg3)!important;border-color:var(--border)!important}
html.dark-mode .totp{background:var(--bg3)!important;border-color:var(--border2)!important}
html.dark-mode .dropzone-empty{background:var(--bg3)!important;border-color:var(--border2)!important}
html.dark-mode .lirow{border-bottom-color:var(--border)!important}
html.dark-mode .rpanel .card{background:var(--bg2)!important}
html.dark-mode [style*="background:var(--plighter)"]{background:var(--bg3)!important}
html.dark-mode [style*="background: var(--plighter)"]{background:var(--bg3)!important}
html.dark-mode [style*="background:rgba(124,58,237,0.04)"]{background:var(--bg3)!important}
html.dark-mode [style*="background:#f5f3ff"]{background:var(--bg3)!important}
html.dark-mode [style*="background:#f0fdfa"]{background:var(--bg3)!important}
html.dark-mode [style*="background:#faf9ff"]{background:var(--bg2)!important}
html.dark-mode [style*="background:#f9f7ff"]{background:var(--bg2)!important}
html.dark-mode [style*="background:#ede9fe"]{background:var(--bg3)!important}
html.dark-mode [style*="background:#ccfbf1"]{background:var(--bg3)!important}
html.dark-mode [style*="color:#1e1b4b"]{color:var(--text)!important}
html.dark-mode [style*="color:#4b5563"]{color:var(--text2)!important}
html.dark-mode [style*="border-bottom:1px solid #e5e7eb"]{border-bottom-color:var(--border)!important}
html.dark-mode [style*="border:1px solid #e5e7eb"]{border-color:var(--border)!important}
html.dark-mode [style*="border-color:#e5e7eb"]{border-color:var(--border)!important}
html.dark-mode .qty-wrap input,.dark-mode .linum,.dark-mode .lisel{background:var(--bg3)!important;border-color:var(--border)!important;color:var(--text)!important}
html.dark-mode .qty-btn{background:var(--bg4)!important;color:var(--text2)!important}
@media(max-width:1280px){
.rpanel{width:220px}
.licontrols{min-width:220px}
.sg{gap:10px}
}