@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin.woff2) format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format('woff2')}
/* ===== erp.css ===== */
/* RappleOS ERP look — design tokens + components. Claude Design, 26 Sept 2026. DRAFT for Leon's approval. */


:root{
  /* brand (from rapple.co.za) */
  --ink:#141414; --ink-2:#2A2721; --gold:#C6A766; --gold-lt:#E5CD92; --gold-ink:#8A6D2F; --cream:#FAF8F2;
  /* neutrals */
  --canvas:#F5F3EE; --surface:#FFFFFF; --sunken:#EFECE5; --line:#E2DDD2; --line-strong:#CFC8BA;
  --text:#141414; --text-2:#5E594F; --text-3:#6F6A5F;
  /* sidebar */
  --side-bg:#141414; --side-text:#CFC9BD; --side-muted:#8A8578; --side-hover:#1F1D1A; --side-active:#2A2721;
  /* status */
  --ok:#2E6B3A; --ok-bg:#E6F0E4; --warn:#8A5A00; --warn-bg:#FBF0D6; --bad:#A1322B; --bad-bg:#F8E3E0;
  --info:#2F5575; --info-bg:#E3ECF3; --idle:#5E594F; --idle-bg:#ECE9E2;
  /* type */
  --f-ui:'Figtree',system-ui,sans-serif; --f-display:'Marcellus',Georgia,serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* spacing 4px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:4px; --r:8px; --r-lg:12px; --r-sheet:16px;
  --side-w:248px; --side-w-min:64px; --top-h:56px; --tabs-h:38px; --row-h:40px;
  --head:#FBFAF7; --line-soft:#EEEAE2; --hover:#FBF9F4; --sel:#F6F0E2; --tab-hover:#E7E3DB; --gold-bg:#F3EAD5; --top-bg:rgba(255,255,255,.86);
  --primary:#141414; --primary-2:#2A2721; --on-primary:#FFFFFF; --chart:#D9CFB8; --chart-cur:#141414; --err-bg:#FFFBFA;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --shadow-pop:0 8px 28px rgba(20,20,20,.16),0 1px 3px rgba(20,20,20,.08);
}
*{box-sizing:border-box} html,body{margin:0}
body{font:400 14px/1.45 var(--f-ui);color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.mono{font-family:var(--f-mono);font-size:12.5px}
a{color:var(--gold-ink);text-decoration:none} a:hover{text-decoration:underline}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}

/* ---------- desktop shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;background:var(--side-bg)}
.app.collapsed{grid-template-columns:var(--side-w-min) 1fr}
.side{background:var(--side-bg);color:var(--side-text);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.side .brand{height:64px;display:flex;align-items:center;gap:10px;padding:0 20px}
.side .brand img{height:17px;display:block}
.side .brand small{font:500 10px/1 var(--f-ui);letter-spacing:.14em;color:var(--side-muted);text-transform:uppercase;margin-top:5px;display:block}
.side nav{flex:1;overflow:auto;padding:10px 10px 16px}
.side .grp{margin-top:6px}
.side .grp>button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:var(--r);color:var(--side-text);cursor:pointer;font-weight:500}
.side .grp>button:hover{background:var(--side-hover)}
.side .grp>button .chev{margin-inline-start:auto;width:14px;height:14px;color:var(--side-muted)}
.side .grp.open>button{color:#fff}
.side .grp>button.on{background:var(--side-active);color:var(--gold-lt);font-weight:600}
.side .grp .lock{margin-inline-start:auto;width:14px;height:14px;color:var(--side-muted)}
.side .grp ul{list-style:none;margin:2px 0 6px;padding:0;padding-inline-start:30px}
.side .grp li a{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r);color:var(--side-text);font-size:13.5px}
.side .grp li a:hover{background:var(--side-hover);text-decoration:none;color:#fff}
.side .grp li a.on{background:var(--side-active);color:var(--gold-lt);font-weight:600}
.side .grp li a .ct{margin-inline-start:auto;font-size:11px;color:var(--side-muted)}
.side .foot{padding:10px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--side-muted)}
.app.collapsed .side .brand img,.app.collapsed .side .brand small,.app.collapsed .side .grp>button span,.app.collapsed .side .grp>button .chev,.app.collapsed .side .grp ul,.app.collapsed .side .grp .lock,.app.collapsed .side .foot span{display:none}
.app.collapsed .side .grp>button{justify-content:center;padding:0}
.app.collapsed .side .brand{justify-content:center;padding:0}
.side .mono-mark{display:none;font:400 20px var(--f-display);color:var(--gold)}
.app.collapsed .side .mono-mark{display:block}

.main{min-width:0;display:flex;flex-direction:column;background:var(--canvas);margin:8px 8px 8px 0;border-radius:var(--r-sheet);overflow:clip;min-height:calc(100vh - 16px)}
.top{height:var(--top-h);background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s5) 0 var(--s4);position:sticky;top:0;z-index:20}
.iconbtn{all:unset;box-sizing:border-box;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r);color:var(--text-2);cursor:pointer;position:relative}
.iconbtn:hover{background:var(--sunken);color:var(--text)}
.iconbtn .dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font:600 10px/16px var(--f-ui);text-align:center;padding:0 4px;border:2px solid var(--surface)}
.search{flex:0 1 560px;min-width:220px;white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 12px;background:var(--sunken);border:1px solid transparent;border-radius:var(--r);color:var(--text-3);cursor:text}
.search:hover{border-color:var(--line-strong)}
.kbd{white-space:nowrap;font:500 11px/1 var(--f-ui);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:3px 6px;color:var(--text-2);background:var(--surface)}
.search .kbd{margin-inline-start:auto}
.top .sp{flex:1}
.sample{font:600 10.5px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border:1px dashed #D9B45A;padding:5px 8px;border-radius:var(--r-sm);white-space:nowrap}
.user{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:var(--r);cursor:pointer}
.user:hover{background:var(--sunken)}
.av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font:600 12px var(--f-ui);flex:none}
.user b{display:block;font-weight:600;font-size:13px;line-height:1.1} .user small{color:var(--text-3);font-size:11.5px}

.rtabs{height:var(--tabs-h);background:var(--sunken);border-bottom:1px solid var(--line);display:flex;align-items:flex-end;gap:2px;padding:0 var(--s4);overflow:hidden}
.rtab{height:31px;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;font-size:12.5px;color:var(--text-2);max-width:220px;white-space:nowrap;cursor:pointer}
.rtab span{overflow:hidden;text-overflow:ellipsis}.rtab .kind{flex:none}
.rtab .x{width:14px;height:14px;color:var(--text-3)}
.rtab:hover{background:var(--tab-hover)}
.rtab.on{background:var(--surface);border-color:var(--line);color:var(--text);font-weight:600;margin-bottom:-1px;height:32px}
.rtab .kind{font:500 10px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

.page{padding:var(--s5) var(--s5) var(--s7);width:100%;max-width:1680px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);margin-bottom:6px}
.crumbs a{color:var(--text-2)} .crumbs svg.i{width:12px;height:12px}
.phead{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.phead h1{font:400 26px/1.15 var(--f-display);margin:0;letter-spacing:.2px}
.phead .sub{color:var(--text-2);font-size:13px;margin-top:4px}
.phead .acts{margin-inline-start:auto;display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r);font:600 13.5px/1 var(--f-ui);cursor:pointer;white-space:nowrap;border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}
.btn:hover{background:var(--sunken)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .btn.primary:hover{background:var(--primary-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)} .btn.gold:hover{background:#B8985A}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)} .btn.ghost:hover{background:var(--sunken);color:var(--text)}
.btn.danger{color:var(--bad);border-color:#E3B9B4} .btn.danger:hover{background:var(--bad-bg)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px} .btn.lg{height:44px;padding:0 18px;font-size:14.5px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn:focus-visible,.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.btngrp{display:inline-flex}.btngrp .btn{border-radius:0}.btngrp .btn:first-child{border-radius:var(--r) 0 0 var(--r)}.btngrp .btn:last-child{border-radius:0 var(--r) var(--r) 0}.btngrp .btn+.btn{margin-left:-1px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:11px;font:600 11.5px/1 var(--f-ui);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.open{color:var(--info);background:var(--info-bg)} .chip.waiting{color:var(--warn);background:var(--warn-bg)}
.chip.toinv{color:var(--gold-ink);background:var(--gold-bg)} .chip.invoiced{color:var(--ok);background:var(--ok-bg)}
.chip.quote{color:var(--idle);background:var(--idle-bg)} .chip.approved{color:var(--info);background:var(--info-bg)} .chip.insage{color:var(--gold-ink);background:var(--gold-bg)} .chip.paid{color:var(--ok);background:var(--ok-bg)} .chip.delivered{color:#fff;background:var(--ok)}
.chip.expired{color:var(--idle);background:var(--idle-bg)} .chip.lost{color:var(--bad);background:var(--bad-bg)}

/* ---------- panels, toolbar, table ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel>header{display:flex;align-items:center;gap:var(--s2);padding:12px var(--s4);border-bottom:1px solid var(--line)}
.panel>header h3{margin:0;font:600 14px var(--f-ui)} .panel>header .acts{margin-inline-start:auto;display:flex;gap:6px}
.panel .body{padding:var(--s4)}
.toolbar{display:flex;align-items:center;gap:var(--s2);padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.filter{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:15px;font-size:12.5px;color:var(--text-2);background:var(--surface);cursor:pointer}
.filter.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.filter b{font-weight:600}
.minisearch{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r);width:260px;color:var(--text-3);font-size:13px}
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--r);padding:3px;gap:2px}
.seg a{white-space:nowrap;padding:5px 10px;border-radius:4px;font-size:12.5px;color:var(--text-2);font-weight:500}
.seg a.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)} .seg a:hover{text-decoration:none}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{position:sticky;top:0;background:var(--head);text-align:start;font:600 11.5px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);height:36px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.num{text-align:end}
.tbl td{height:var(--row-h);padding:0 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tbl tr:hover td{background:var(--hover)}
.tbl tr.sel td{background:var(--sel)}
.tbl td.chk,.tbl th.chk{width:36px;padding-right:0}
.cb{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:3px;display:inline-block;vertical-align:middle;background:var(--surface)}
.cb.on{background:var(--primary);border-color:var(--primary);position:relative}
.cb.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tbl .who{font-weight:600} .tbl .sub2{color:var(--text-3);font-size:12px}
.tfoot{display:flex;align-items:center;gap:var(--s3);padding:10px 12px;font-size:12.5px;color:var(--text-2)}
.tfoot .pager{margin-inline-start:auto;display:flex;gap:4px}
.bulk{display:flex;align-items:center;gap:var(--s2);padding:8px 12px;background:var(--ink);color:#fff;font-size:13px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.bulk .btn{height:28px;background:transparent;color:#fff;border-color:#4a463e}.bulk .btn:hover{background:#2A2721}

/* ---------- list + side preview ---------- */
.listwrap{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.cards{display:none}

/* ---------- record ---------- */
.rechead{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.rechead h1{font:400 26px/1.15 var(--f-display);margin:0}
.rechead .meta{display:flex;gap:var(--s4);flex-wrap:wrap;color:var(--text-2);font-size:13px;margin-top:6px}
.rechead .acts{margin-inline-start:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.steps{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);font-size:12.5px;width:max-content;max-width:100%}
.steps span{padding:7px 14px 7px 18px;color:var(--text-3);position:relative;white-space:nowrap}
.steps span+span{border-left:1px solid var(--line)}
.steps span.done{color:var(--text-2)} .steps span.now{background:var(--primary-2);color:var(--gold-lt);font-weight:600}
.recgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s4);align-items:start}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line)}
.facts div{padding:12px var(--s4);border-right:1px solid var(--line)} .facts div:last-child{border-right:0}
.facts label{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.facts b{font-weight:600}
.ptabs{display:flex;gap:4px;padding:0 var(--s4);border-bottom:1px solid var(--line)}
.ptabs a{padding:11px 10px;color:var(--text-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:13.5px}
.ptabs a.on{color:var(--text);border-color:var(--text);font-weight:600} .ptabs a:hover{text-decoration:none;color:var(--text)}
.ptabs .ct{font-size:11px;color:var(--text-3);margin-left:4px}
.totals{margin-inline-start:auto;width:300px;padding:var(--s3) var(--s4);font-size:13.5px}
.totals div{display:flex;justify-content:space-between;padding:4px 0}
.totals .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:700;font-size:15px}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.feed li:last-child{border-bottom:0}
.feed .av{width:28px;height:28px;font-size:11px}
.feed time{display:block;color:var(--text-3);font-size:11.5px;margin-top:2px}
.note{display:flex;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);color:var(--text-3);font-size:13px;margin-bottom:8px}

/* ---------- form ---------- */
.formgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s4)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 12.5px var(--f-ui);color:var(--text)}
.field label .req{color:var(--bad)}
.field input,.field select,.field textarea{font:400 14px var(--f-ui);height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);width:100%}
.field textarea{height:80px;padding:10px 12px;resize:vertical}
.field .help{font-size:12px;color:var(--text-3)}
.field.err input{border-color:var(--bad);background:var(--err-bg)} .field.err .help{color:var(--bad)}
.field .ro{height:38px;display:flex;align-items:center;padding:0 12px;background:var(--sunken);border-radius:var(--r);color:var(--text-2)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
.sect{font:600 12px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:var(--s5) 0 var(--s3)}
.savebar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px var(--s5);display:flex;gap:var(--s2);align-items:center;z-index:5}
.savebar .msg{color:var(--text-2);font-size:13px;margin-inline-end:auto}
.linesed td{height:46px}
.linesed input{font:inherit;height:32px;border:1px solid var(--line);border-radius:4px;padding:0 8px;width:100%}
.linesed input.num{width:80px}
.addline{display:flex;gap:8px;padding:10px 12px;color:var(--gold-ink);font-weight:600;font-size:13px;align-items:center}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.kpi{padding:var(--s4)}
.kpi label{font:600 11.5px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.kpi .v{font:600 28px/1.1 var(--f-ui);font-variant-numeric:tabular-nums;margin:8px 0 6px;letter-spacing:-.3px}
.kpi .d{font-size:12.5px;color:var(--text-2)} .up{color:var(--ok);font-weight:600} .down{color:var(--bad);font-weight:600}
.dgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s4);margin-bottom:var(--s4)}
.bars{display:flex;align-items:flex-end;gap:10px;height:200px;padding:0 4px;border-bottom:1px solid var(--line)}
.bars div{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bars i{display:block;width:100%;max-width:44px;background:var(--chart);border-radius:3px 3px 0 0}
.bars i.cur{background:var(--chart-cur)}
.bars b{font:500 11px var(--f-ui);color:var(--text-3)}
.blabels{display:flex;gap:10px;padding:6px 4px 0}.blabels span{flex:1;min-width:0;text-align:center;font-size:11.5px;color:var(--text-3)}
.pipe{display:flex;flex-direction:column;gap:12px}
.pipe .row{display:grid;grid-template-columns:90px 1fr 70px;gap:10px;align-items:center;font-size:13px}
.pipe .track{height:8px;background:var(--sunken);border-radius:4px;overflow:hidden}.pipe .track i{display:block;height:100%;background:var(--chart-cur)}
.hidden-fig{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-weight:500;font-size:13px}
.hidden-fig svg.i{width:14px;height:14px}

/* ---------- states ---------- */
.empty{text-align:center;padding:56px 24px;color:var(--text-2)}
.empty .ill{width:56px;height:56px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;margin:0 auto 14px;color:var(--text-3)}
.empty h4{margin:0 0 6px;font:600 15px var(--f-ui);color:var(--text)} .empty p{margin:0 auto 16px;max-width:360px;font-size:13.5px}
.sk{display:block;height:12px;border-radius:3px;background:linear-gradient(90deg,var(--line-soft) 0,#F6F3EE 50%,var(--line-soft) 100%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.alert{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r);border:1px solid;font-size:13.5px;align-items:flex-start}
.alert.bad{background:var(--bad-bg);border-color:#E9C2BD;color:#5E1D18}
.alert.warn{background:var(--warn-bg);border-color:#EDD49A;color:#4D3400}
.alert.info{background:var(--info-bg);border-color:#C3D4E3;color:#1C3548}
.alert.ok{background:var(--ok-bg);border-color:#C3DBBF;color:#1C3F22}
.alert b{display:block;margin-bottom:2px}.alert .btn{margin-inline-start:auto}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r);box-shadow:var(--shadow-pop);font-size:13.5px;width:max-content}
.toast a{color:var(--gold-lt);font-weight:600}

/* ---------- popovers: Ctrl+K, notifications, user menu ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,20,20,.36);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.palette{width:min(640px,94vw);background:var(--surface);border-radius:10px;box-shadow:var(--shadow-pop);overflow:hidden}
.palette .q{display:flex;align-items:center;gap:10px;padding:0 16px;height:54px;border-bottom:1px solid var(--line);font-size:16px}
.palette .q .caret{width:1.5px;height:20px;background:var(--ink);margin-left:-8px}
.palette h5{margin:0;padding:10px 16px 4px;font:600 11px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.palette .it{display:flex;align-items:center;gap:12px;padding:0 16px;height:40px;font-size:13.5px}
.palette .it.on{background:var(--sel)}
.palette .it .r{margin-inline-start:auto;color:var(--text-3);font-size:12px}
.palette footer{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);background:var(--head)}
.pop{position:absolute;top:50px;right:0;width:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);z-index:40}
.pop header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)} .pop header b{font-size:14px} .pop header a{margin-inline-start:auto;font-size:12.5px}
.pop .n{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13px}
.pop .n i{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px} .pop .n.read i{background:transparent}
.pop .n time{display:block;color:var(--text-3);font-size:11.5px}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--text);font-size:13.5px}.menu a:hover{background:var(--sunken);text-decoration:none}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}

/* ---------- phone shell ---------- */
.mtop,.bnav,.fab,.mcards,.msearch,.mob-only{display:none}
@media (max-width:760px){
  .app,.app.collapsed{display:block;background:var(--canvas)}
  .main{margin:0;border-radius:0;min-height:0;overflow:visible}
  .side,.top,.rtabs,.crumbs{display:none}
  .mtop{display:flex;align-items:center;gap:8px;height:calc(56px + var(--sat));padding:var(--sat) calc(8px + var(--sar)) 0 calc(16px + var(--sal));background:var(--ink);color:#fff;position:sticky;top:0;z-index:20}
  .mtop img{height:14px} .mtop .iconbtn{color:#E8E2D6;width:44px;height:44px} .mtop .sp{flex:1}
  .mtop .iconbtn .dot{border-color:var(--ink)}
  .msearch{margin:12px 16px 0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text-3);font-size:14.5px}
  .page{padding:16px calc(16px + var(--sar)) calc(150px + var(--sab)) calc(16px + var(--sal))}
  .phead h1,.rechead h1{font-size:23px}
  .phead .acts{display:none}
  .desk-only{display:none!important}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:calc(68px + var(--sab));padding:0 var(--sar) max(6px,var(--sab)) var(--sal);background:var(--surface);border-top:1px solid var(--line);z-index:30}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--text-2);font-weight:500}
  .bnav a svg.i{width:22px;height:22px} .bnav a.on{color:var(--text);font-weight:700} .bnav a.on svg.i{stroke-width:2.1}
  .bnav a:hover{text-decoration:none}
  .bnav .midb{width:44px;height:34px;border-radius:17px;background:var(--ink);color:var(--gold-lt);display:grid;place-items:center;margin-top:-2px}.bnav .midb svg.i{width:20px;height:20px}
  .bnav a.mid{color:var(--text);font-weight:600}
  .mob-only{display:block!important}
  .fab{display:flex;position:fixed;left:calc(16px + var(--sal));right:calc(16px + var(--sar));bottom:calc(80px + var(--sab));z-index:29}
  .fab .btn{width:100%;height:52px;font-size:15.5px;border-radius:var(--r-lg);box-shadow:0 6px 18px rgba(20,20,20,.22)}
  .panel.listpanel .tbl,.panel.listpanel .tfoot,.panel.listpanel .toolbar .minisearch,.panel.listpanel .toolbar .desk-only{display:none}
  .panel.listpanel{background:transparent;border:0}
  .panel.listpanel .toolbar{padding:0 0 12px;border:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filter{height:36px;padding:0 14px;font-size:13.5px;flex:none}
  .mcards{display:flex;flex-direction:column;gap:10px}
  .mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;min-height:76px}
  .mcard .who{font-weight:600;font-size:15px}.mcard .amt{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;text-align:end}
  .mcard .sub2{color:var(--text-3);font-size:12.5px}
  .mcard .row2{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:6px}
  .mcard .row2 .btn{margin-inline-start:auto;height:40px}
  .recgrid,.dgrid{grid-template-columns:minmax(0,1fr)}
  .bulk{flex-wrap:wrap}
  .panel>header{flex-wrap:wrap}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kpi{padding:14px}.kpi .v{font-size:22px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .formgrid{grid-template-columns:1fr}.formgrid>*{grid-column:1/-1}
  .field input,.field select{height:46px;font-size:16px}
  .rechead .acts{display:none}
  .steps{width:100%;overflow-x:auto}
  .panel.lines .tbl{display:none} .panel.lines .mcards{display:flex;padding:12px}
  .panel.lines .mcard{border-color:var(--line-soft)}
  .totals{width:100%}
  .bars,.blabels{gap:4px}.bars b{display:none}.blabels span{font-size:10px}
  .savebar{margin:16px -16px 0!important;bottom:calc(68px + var(--sab));padding:10px 16px}.savebar .msg{display:none}.savebar .btn{flex:1;height:48px}
  .ptabs{overflow-x:auto}
  .scrim{padding-top:var(--sat);align-items:stretch}.palette{width:100%;border-radius:0}
  .pop{position:fixed;top:calc(56px + var(--sat));left:8px;right:8px;width:auto}
}
@media (min-width:1900px){
  :root{--side-w:264px}
  .page{max-width:none;padding:28px 40px 56px}
  .recgrid{grid-template-columns:minmax(0,1fr) 400px}
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
}

.rechead h1.rt{font:600 24px/1.2 var(--f-ui);letter-spacing:-.2px}
.mono-h{font:500 22px var(--f-mono);letter-spacing:0}
.msect{display:none}
@media (max-width:760px){.msect{display:block;margin:0;padding:14px 16px 0;font:600 14px var(--f-ui)} .recgrid{gap:12px} .rechead h1.rt{font-size:21px}.mono-h{font-size:19px}}

/* ---------- dark mode (user menu: Light / Dark / Match device) ---------- */
:root[data-theme="dark"]{
  --canvas:#171614; --surface:#1F1D1A; --sunken:#282622; --line:#34312C; --line-strong:#48443C; --line-soft:#2A2824;
  --text:#EDE8DE; --text-2:#B4AD9F; --text-3:#948E81; --head:#1C1B18; --hover:#24221E; --sel:#2E2A21; --tab-hover:#2A2824;
  --gold-ink:#D4B87A; --gold-bg:rgba(198,167,102,.16); --top-bg:rgba(31,29,26,.86); --err-bg:#2A1716;
  --primary:#C6A766; --primary-2:#D4B87A; --on-primary:#141414; --chart:#3A362F; --chart-cur:#C6A766;
  --side-bg:#0D0D0C; --side-hover:#1A1917; --side-active:#24211C;
  --ok:#86C592; --ok-bg:rgba(46,107,58,.26); --warn:#E3B660; --warn-bg:rgba(138,90,0,.26); --bad:#EE8E84; --bad-bg:rgba(161,50,43,.26);
  --info:#93B9DA; --info-bg:rgba(47,85,117,.32); --idle:#B4AD9F; --idle-bg:#2A2824;
  --shadow-pop:0 10px 32px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  color-scheme:dark;
}
:root[data-theme="dark"] .alert{color:var(--text)} :root[data-theme="dark"] .alert.bad{background:var(--bad-bg);border-color:#5A2A25}
:root[data-theme="dark"] .alert.warn{background:var(--warn-bg);border-color:#5A4518} :root[data-theme="dark"] .alert.info{background:var(--info-bg);border-color:#2E4458}
:root[data-theme="dark"] .alert.ok{background:var(--ok-bg);border-color:#2C4A31} :root[data-theme="dark"] .sample{border-color:#6B5320}
:root[data-theme="dark"] .chip.delivered{color:#10240F;background:var(--ok)} :root[data-theme="dark"] .mtop{background:#0D0D0C}
:root[data-theme="dark"] .bnav{background:var(--surface)} :root[data-theme="dark"] .bnav .midb{background:var(--primary);color:var(--on-primary)}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:var(--sunken)}
:root[data-theme="dark"] .sk{background:linear-gradient(90deg,#282622 0,#33302B 50%,#282622 100%);background-size:200% 100%}
:root[data-theme="dark"] .steps span.now{background:var(--primary);color:var(--on-primary)}
:root[data-theme="dark"] .toast,:root[data-theme="dark"] .bulk{background:#2A2721}
:root[data-theme="dark"] .scrim{background:rgba(0,0,0,.55)}

/* ---------- column picker, saved views ---------- */
.pop.cols{top:40px;right:0;width:280px}
.colrow{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13.5px}
.colrow .grip{color:var(--text-3);cursor:grab;letter-spacing:-2px;font-weight:700}
.colrow .lk{margin-inline-start:auto;font-size:11.5px;color:var(--text-3)}
.filter.saved{border-style:dashed}
.addview{font-size:12.5px;font-weight:600;color:var(--gold-ink);display:inline-flex;align-items:center;gap:4px;padding:0 6px;white-space:nowrap}
.addview svg.i{width:14px;height:14px}

/* ---------- phone notification sheet ---------- */
.nsheet{display:none}
@media (max-width:760px){
  .nsheet{display:block;position:fixed;inset:calc(56px + var(--sat)) 0 calc(68px + var(--sab)) 0;background:var(--canvas);z-index:25;overflow:auto}
  .nsheet header{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}.nsheet header b{font-size:18px}.nsheet header a{margin-inline-start:auto;font-size:13.5px}
  .nsheet .seg{margin:0 16px 12px;display:flex}.nsheet .seg a{flex:1;text-align:center;padding:8px 4px;font-size:13.5px}
  .nitem{margin:0 16px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:10px 1fr;gap:4px 12px}
  .nitem i{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:6px}.nitem.read i{background:transparent}
  .nitem b{font-weight:600;font-size:15px}.nitem p{margin:0;color:var(--text-2);font-size:14px}.nitem time{color:var(--text-3);font-size:12.5px}
  .nitem .acts{grid-column:2;display:flex;gap:8px;margin-top:8px}.nitem .acts .btn{height:44px;flex:1}
}

/* ---------- home ---------- */
.hello{font:400 28px/1.15 var(--f-display);margin:0}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.qa a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);font-weight:600;font-size:14px}
.qa a:hover{text-decoration:none;border-color:var(--line-strong)}
.qa a span.ic{width:36px;height:36px;border-radius:10px;background:var(--sunken);display:grid;place-items:center;color:var(--text);flex:none}
.qa a small{display:block;font-weight:400;color:var(--text-3);font-size:12px}
.hgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){.qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qa a{padding:12px;min-height:64px}.qa a small{display:none}.hgrid{grid-template-columns:minmax(0,1fr)}.hello{font-size:24px}}


/* ---------- no-bleed rules (phone) ---------- */
.btn{max-width:100%} .btn>span,.btn{overflow:hidden;text-overflow:ellipsis}
.who,.mcard .who,.nitem b,.phead h1,.rechead h1,.hello{overflow-wrap:anywhere}
.mcard>div{min-width:0}
.bnav a{min-width:0;text-align:center;line-height:1.1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}.todo span:not(.chip){min-width:0;overflow-wrap:anywhere}}

/* sideways strips on phones: soft fade on the right edge so people see there is more */
@media (max-width:760px){
  .panel.listpanel .toolbar,.seg,.steps,.ptabs,.nq .toolbar{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
  .seg,.steps{overflow-x:auto;scrollbar-width:none;max-width:100%}
}
.todo .btn,.row2 .btn,.mcard .btn{flex:none}
.qa a>span:last-child{min-width:0;overflow-wrap:anywhere}
@media (max-width:360px){.qa a{gap:8px;padding:10px;font-size:13px}.qa a span.ic{width:30px;height:30px}}
.todo .chip{flex:none}

/* ---------- notification cards (draft 2.1) ---------- */
.ncard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
.ncard.unread::after{content:"";position:absolute;top:18px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.nhead{display:flex;align-items:center;gap:12px;padding-right:14px}
.nav{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font:700 13px var(--f-ui);letter-spacing:.02em;flex:none}
.nsal{min-width:0;flex:1}.nsal b{display:block;font:700 16px/1.2 var(--f-ui);letter-spacing:-.1px;overflow-wrap:anywhere}.nsal small{color:var(--text-3);font-size:12.5px}
.nhead time{font-size:12px;color:var(--text-3);white-space:nowrap}
.nbody{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nbody p{margin:0;font-size:14px;color:var(--text-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}.nbody b{color:var(--text)}
.nrep{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--text)}
.nrep::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8578' stroke-width='2'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E") center/12px no-repeat}
.ndoc{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sunken);border-radius:10px;padding:9px 12px;font-size:13.5px}
.ndoc .mono{color:var(--gold-ink)}.ndoc .num{font-weight:700;color:var(--text)}
.nacts{display:flex;gap:8px}.nacts .btn{flex:1;height:40px}
.npop{width:400px}.npop header .sample{font-size:9.5px;padding:3px 6px}.npop header a{margin-inline-start:auto}
.nlist{display:grid;gap:8px;padding:10px;max-height:560px;overflow:auto;background:var(--canvas)}
.nsheet header .sample{margin-left:8px;font-size:9.5px;padding:3px 6px}
.nday{font:600 11.5px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:6px 16px 8px}
.nsheet .ncard{margin:0 16px 10px}
.nsheet .seg .ct{font-size:11px;background:var(--gold);color:var(--ink);border-radius:8px;padding:0 5px;margin-left:4px}
@media (max-width:760px){.ncard.big .nacts .btn{height:46px;font-size:14.5px}}

/* ---------- live pop-up (arrives while the app is open) ---------- */
.livepop{position:fixed;top:calc(var(--top-h) + 12px);right:20px;width:380px;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);overflow:hidden;animation:lvin .35s cubic-bezier(.2,.8,.2,1)}
.lvbar{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 0 14px;font:600 11px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.livepop .ncard{border:0;border-radius:0;padding-top:8px}
.livepop::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--gold);transform-origin:left;animation:lvtime 8s linear forwards}
@keyframes lvin{from{opacity:0;transform:translateY(-12px)}} @keyframes lvtime{to{transform:scaleX(0)}}
@media (max-width:760px){.livepop{top:calc(8px + var(--sat));left:8px;right:8px;width:auto}}

/* ---------- brand skin: MiSalon (same engine, own look) ---------- */
:root[data-brand="misalon"]{
  --ink:#1B2A41; --ink-2:#26395A; --gold:#C2461F; --gold-lt:#FFFFFF; --gold-ink:#3A4F73; --gold-bg:#F8E4DC;
  --canvas:#F6F4EF; --sunken:#EFECE5; --line:#E4E1D9; --line-strong:#D3CFC4; --text:#141820; --text-2:#4B5261; --text-3:#646B7A;
  --side-bg:#1B2A41; --side-text:#C9D2E0; --side-muted:#8E9BB3; --side-hover:#22334F; --side-active:#2C4166;
  --primary:#1B2A41; --primary-2:#26395A; --chart:#C9D2E0; --chart-cur:#1B2A41; --sel:#E4E9F1; --hover:#F1F4F8;
  --f-ui:'Plus Jakarta Sans',system-ui,sans-serif; --f-display:'Plus Jakarta Sans',system-ui,sans-serif;
}
:root[data-brand="misalon"] .phead h1,:root[data-brand="misalon"] .hello{font-weight:700;letter-spacing:-.4px}
:root[data-brand="misalon"] .side .brand img{height:38px}
:root[data-brand="misalon"] .mtop img{height:24px}
:root[data-brand="misalon"] .av{color:#fff}
:root[data-brand="misalon"] .iconbtn .dot{background:var(--gold)}
/* ---------- MiSalon special screens ---------- */
.board{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));position:relative;background:var(--surface)}
.board .hd{position:sticky;top:0;background:var(--surface);z-index:2;display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line);border-left:1px solid var(--line-soft);min-width:0}
.board .hd b{display:block;font-size:14px}.board .hd small{color:var(--text-3);font-size:12px}
.board .hd .nav{width:34px;height:34px;border-radius:10px;font-size:12px}
.board .tcol{border-right:1px solid var(--line-soft)}
.board .tcol div{height:72px;font:500 11.5px var(--f-ui);color:var(--text-3);padding:4px 8px;text-align:end;font-variant-numeric:tabular-nums}
.board .scol{position:relative;border-left:1px solid var(--line-soft);background:repeating-linear-gradient(180deg,transparent 0 71px,var(--line-soft) 71px 72px)}
.ap{position:absolute;left:6px;right:6px;border-radius:10px;padding:8px 10px;font-size:12.5px;overflow:hidden;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:2px}
.ap b{font-size:13.5px;color:var(--text)}.ap .tm{font:600 11.5px var(--f-ui);color:var(--text-2);font-variant-numeric:tabular-nums}.ap .sv{color:var(--text-2)}
.ap .st{margin-top:auto;display:flex;gap:6px;align-items:center}
.ap.done{opacity:.6}.ap.block{background:repeating-linear-gradient(135deg,var(--sunken) 0 8px,transparent 8px 16px)!important;border-style:dashed}
.nowline{position:absolute;left:56px;right:0;height:2px;background:var(--gold);z-index:3}.nowline::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.nowline span{position:absolute;left:-54px;top:-9px;font:700 11px var(--f-ui);color:var(--gold);background:var(--surface);padding:0 4px}
.agenda{display:none}
.stychips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.stychip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);font-weight:600;font-size:14px;flex:none}
.stychip .nav{width:28px;height:28px;border-radius:14px;font-size:11px}.stychip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.slot{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:stretch}
.slot .tt{font:600 13px var(--f-ui);color:var(--text-2);padding-top:12px;font-variant-numeric:tabular-nums}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border-left-width:1px}
.acard b{font-size:15.5px}.acard .sv{grid-column:1;color:var(--text-2);font-size:13.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acard .btn{grid-row:1/3;grid-column:2}
.free{border:1.5px dashed var(--line-strong);border-radius:14px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13.5px;font-weight:600}
@media (max-width:760px){.board{display:none}.agenda{display:grid;gap:10px}}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.svc{border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:2px;min-height:64px;cursor:pointer}
.svc b{font-size:14.5px}.svc span{color:var(--text-3);font-size:12.5px}.svc.on{border:2px solid var(--primary);background:var(--sel);padding:11px 13px}
.paybar{position:sticky;bottom:0;background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:14px 14px 0 0;margin:16px -24px 0;z-index:5}
.paybar .tot{font:700 24px var(--f-ui);font-variant-numeric:tabular-nums}.paybar small{display:block;color:#A9B6CB;font-size:12.5px}
.paybar .btn{margin-inline-start:auto;height:48px;padding:0 22px;background:#fff;color:var(--ink);border-color:#fff;font-size:15px}
@media (max-width:760px){.paybar{position:fixed;left:0;right:0;bottom:calc(68px + var(--sab));margin:0;border-radius:14px 14px 0 0;padding:12px 16px}.paybar .tot{font-size:21px}}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mitem{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--text);min-height:76px}
.mitem:hover{text-decoration:none;border-color:var(--line-strong)}
.mitem .ic{width:40px;height:40px;border-radius:12px;background:var(--sel);color:var(--primary);display:grid;place-items:center;flex:none}
.mitem b{display:block;font-size:15px}.mitem small{color:var(--text-3);font-size:13px}
.mhead{font:600 12px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:24px 0 10px}
.mob-only-flex{display:none!important}
@media (max-width:760px){.mob-only-flex{display:flex!important}}
.formula{font-family:var(--f-mono);font-size:13px;background:var(--sunken);border-radius:10px;padding:10px 12px;line-height:1.6}
.panel .body>*,.field,.recgrid>*,.alert>div,.nhead>*{min-width:0}
.panel .body{min-width:0}
.recgrid>div,.recgrid>aside{grid-template-columns:minmax(0,1fr)}
.panel:has(>.tbl){overflow-x:auto}
.paybar>div{min-width:0}.paybar .btn{flex:none}
.ap.short{padding:5px 10px;justify-content:center}.ap .one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}.ap.done{opacity:.72}
.acard .sv+.sv{grid-row:3}
:root[data-brand="misalon"] .mtop img{height:30px}
/* MiSalon skin option B: charcoal + coral, taken from the logo itself (bg #191E22, coral #E35A33) */
:root[data-brand="misalon"][data-skin="charcoal"]{
  --ink:#191E22; --ink-2:#262C31; --gold:#E35A33; --gold-ink:#B8431C; --gold-bg:#FBE6DD; --sel:#FBEDE7; --hover:#FAF5F2;
  --canvas:#F7F4F0; --side-bg:#191E22; --side-text:#C8CDD1; --side-muted:#8C949B; --side-hover:#22282D; --side-active:#2E3439;
  --primary:#191E22; --primary-2:#2E3439; --chart:#E9D6CC; --chart-cur:#E35A33;
}
:root[data-brand="misalon"][data-skin="charcoal"] .bnav .midb{background:#E35A33;color:#fff}
:root[data-brand="misalon"][data-skin="charcoal"] .side .grp>button.on{box-shadow:inset 3px 0 0 transparent}
:root[data-brand="misalon"][data-skin="charcoal"] .stychip.on{background:var(--primary)}
/* ---------- MiSalon colour options C–F ---------- */
:root[data-brand="misalon"][data-skin="espresso"]{--ink:#2A201C;--ink-2:#3A2E29;--gold:#E35A33;--gold-ink:#B0401A;--gold-bg:#FBE6DD;--sel:#FBEDE7;--hover:#FBF6F3;--canvas:#FAF5F1;--sunken:#F1EAE4;--line:#E9E0D8;--line-strong:#D8CCC2;--side-bg:#2A201C;--side-text:#D9CFC8;--side-muted:#A09288;--side-hover:#342924;--side-active:#43352F;--primary:#2A201C;--primary-2:#43352F;--chart:#EBD5C9;--chart-cur:#E35A33;--text-3:#6E655E}
:root[data-brand="misalon"][data-skin="plum"]{--ink:#2B1C30;--ink-2:#3B2842;--gold:#E35A33;--gold-ink:#A8401D;--gold-bg:#FBE6DD;--sel:#F3ECF5;--hover:#FAF6FB;--canvas:#F8F5F7;--sunken:#EFE9EE;--line:#E6DEE5;--line-strong:#D3C8D2;--side-bg:#2B1C30;--side-text:#D6CBDA;--side-muted:#9E8FA5;--side-hover:#35243B;--side-active:#46304E;--primary:#2B1C30;--primary-2:#46304E;--chart:#DCCFE0;--chart-cur:#2B1C30;--text-3:#6A6070}
:root[data-brand="misalon"][data-skin="sage"]{--ink:#1E2B27;--ink-2:#2B3B36;--gold:#E35A33;--gold-ink:#A8401D;--gold-bg:#FBE6DD;--sel:#E8F0EC;--hover:#F5F8F6;--canvas:#F5F5F0;--sunken:#ECEDE6;--line:#E0E2DA;--line-strong:#CDD1C6;--side-bg:#1E2B27;--side-text:#CAD5D0;--side-muted:#8FA098;--side-hover:#263530;--side-active:#33453F;--primary:#1E2B27;--primary-2:#33453F;--chart:#CFDDD6;--chart-cur:#1E2B27;--text-3:#636B66}
:root[data-brand="misalon"][data-skin="light"]{--ink:#191E22;--ink-2:#2E3439;--gold:#E35A33;--gold-ink:#B0401A;--gold-bg:#FBE6DD;--sel:#FBEDE7;--hover:#FAF6F3;--canvas:#F7F5F2;--side-bg:#FFFFFF;--side-text:#3A3F44;--side-muted:#6E747A;--side-hover:#F4F1ED;--side-active:#FBE6DD;--gold-lt:#B0401A;--primary:#191E22;--primary-2:#2E3439;--chart:#EBD5C9;--chart-cur:#E35A33}
:root[data-brand="misalon"][data-skin="light"] .side{border-right:1px solid var(--line)}
:root[data-brand="misalon"][data-skin="light"] .app{background:var(--canvas)}
:root[data-brand="misalon"][data-skin="light"] .main{margin:0;border-radius:0;min-height:100vh}
:root[data-brand="misalon"][data-skin="light"] .side .grp.open>button,:root[data-brand="misalon"][data-skin="light"] .side .grp li a:hover{color:var(--text)}
:root[data-brand="misalon"][data-skin="light"] .mtop{background:#fff;color:var(--text);border-bottom:1px solid var(--line)}
:root[data-brand="misalon"][data-skin="light"] .mtop .iconbtn{color:var(--text-2)}
:root[data-brand="misalon"][data-skin="light"] .mtop .av{background:var(--ink)!important;color:#fff}
:root[data-brand="misalon"]:is([data-skin="espresso"],[data-skin="plum"],[data-skin="sage"],[data-skin="light"]) .bnav .midb{background:#E35A33;color:#fff}

/* ---------- draft 3: Ask MiCore, help, tips, offline, celebrate, branch, big text ---------- */
.askbtn,.branchbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;font:600 13px var(--f-ui);cursor:pointer;white-space:nowrap}
.askbtn{background:var(--primary);color:var(--on-primary)}.askbtn svg.i{width:16px;height:16px;color:var(--gold)}
:root[data-brand="misalon"] .askbtn svg.i{color:#fff}
.branchbtn{border:1px solid var(--line-strong);color:var(--text)}.branchbtn svg.i{width:15px;height:15px;color:var(--text-2)}
.offchip{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-ui);color:var(--warn);background:var(--warn-bg);padding:5px 10px;border-radius:14px;white-space:nowrap}.offchip svg.i{width:14px;height:14px}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;width:420px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);z-index:70;display:flex;flex-direction:column;overflow:hidden}
.drawer header{display:flex;gap:12px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line)}
.drawer header b{display:block;font-size:16px}.drawer header small{color:var(--text-3);font-size:12.5px;line-height:1.35;display:block;margin-top:2px}.drawer header .iconbtn{margin-inline-start:auto}
.askic{width:36px;height:36px;border-radius:11px;background:var(--primary);color:var(--gold);display:grid;place-items:center;flex:none}
:root[data-brand="misalon"] .askic{color:#fff;background:var(--gold)}
.dbody{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;font-size:14px;line-height:1.45}.msg p{margin:0 0 8px}
.msg.me{align-self:flex-end;background:var(--primary);color:var(--on-primary);padding:10px 14px;border-radius:14px 14px 4px 14px}
.msg.ai{align-self:stretch;max-width:100%}
.tbl.mini td{height:34px;font-size:12.5px;padding:0 8px}.tbl.mini{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:table}
.confirm{margin-top:10px;border:1.5px solid var(--primary);border-radius:12px;padding:12px 14px;background:var(--hover)}
.confirm ul{margin:6px 0 10px;padding-left:18px;font-size:13.5px;color:var(--text-2)}.confirm .row{display:flex;gap:8px;justify-content:flex-end}.confirm small{display:block;margin-top:8px;color:var(--text-3);font-size:12px}
.src{display:block;margin-top:6px;color:var(--text-3);font-size:12px}
.sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--text-3)}.sugg a{border:1px solid var(--line-strong);border-radius:14px;padding:5px 10px;color:var(--text-2)}
.dfoot{padding:12px 16px calc(12px + var(--sab));border-top:1px solid var(--line)}
.askin{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 12px 0 14px;border:1.5px solid var(--line-strong);border-radius:12px;color:var(--text-3);font-size:14px}
.palette .askrow{background:var(--hover);border-bottom:1px solid var(--line)}.palette .askrow svg.i{color:var(--gold)}
.hsearch{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;color:var(--text-3);font-size:14px}
.drawer h5{margin:8px 0 0;font:600 11.5px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.hl{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px;font-weight:500}.hl span{color:var(--text-3);font-size:12px}.hl:hover{text-decoration:none;border-color:var(--line-strong)}
.new{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}.new p{margin:2px 0;color:var(--text-2)}.new time{color:var(--text-3);font-size:12px}
.tip{position:fixed;width:300px;background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px;z-index:65;box-shadow:var(--shadow-pop)}
.tip::before{content:"";position:absolute;top:-7px;left:40px;width:14px;height:14px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.tip b{font-size:14.5px}.tip p{margin:6px 0 10px;font-size:13.5px;color:#D6D2CA;line-height:1.45}.tip .row{display:flex;align-items:center;gap:6px}.tip .row .faint{color:#A9A398;margin-inline-end:auto;font-size:12px}
.tip .btn.ghost{color:#D6D2CA}.tip .btn.primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.offbar{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--top-h) + 10px);z-index:62;display:flex;align-items:center;gap:10px;max-width:min(760px,calc(100vw - 24px));background:#3A2E12;color:#FBF0D6;padding:10px 16px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow-pop)}
.offbar svg.i{color:#E3B660}.offbar a{color:#E5CD92;font-weight:600;white-space:nowrap}
.cele{position:fixed;inset:0;background:rgba(20,20,20,.3);display:grid;place-items:center;z-index:80;padding:16px}
.celecard{background:var(--surface);border-radius:20px;padding:28px 26px 22px;width:min(380px,100%);text-align:center;box-shadow:var(--shadow-pop);animation:lvin .4s cubic-bezier(.2,.8,.2,1)}
.celecard .ring{width:112px;height:112px;margin:0 auto 12px;display:block}.celecard b{font:700 20px var(--f-ui);display:block}.celecard p{color:var(--text-2);margin:8px 0 16px;font-size:14px}
.celecard .row{display:flex;gap:8px}.celecard .row .btn{flex:1;height:44px}.celecard small{display:block;margin-top:10px}
:root[data-text="big"] .main{zoom:1.14}
@media (max-width:1300px){.branchbtn{display:none}}
@media (max-width:760px){
  .drawer{inset:calc(56px + var(--sat)) 0 0 0;width:auto;border-radius:16px 16px 0 0}
  .offbar{top:calc(62px + var(--sat));left:8px;right:8px;transform:none;max-width:none;flex-wrap:wrap}
  .tip{left:16px!important;right:16px;width:auto;top:auto!important;bottom:calc(150px + var(--sab))}.tip::before{display:none}
  :root[data-text="big"] .main{zoom:1.12}
}

.insights header h3{display:flex;align-items:center;gap:8px}.askic.sm{width:26px;height:26px;border-radius:8px}.askic.sm svg.i{width:15px;height:15px}
.ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.insc{padding:14px 16px;border-right:1px solid var(--line-soft);display:grid;gap:4px;align-content:start}.insc:last-child{border-right:0}
.insc b{font-size:14px;line-height:1.35}.insc small{color:var(--text-3);font-size:12.5px}.insc .btn{justify-self:start;margin-top:6px}
.brs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.br{padding:14px 16px;display:grid;gap:10px}.brh{display:flex;justify-content:space-between;align-items:center}.brh b{font-size:15px}
.brk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.brk small{display:block;color:var(--text-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}.brk b{font-size:16px;font-variant-numeric:tabular-nums}
.br .track{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden}.br .track i{display:block;height:100%;background:var(--ok)}
.firstwk{margin-bottom:16px}.fw{display:grid}.fwi{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}.fwi:last-child{border-bottom:0}
.fwi>span:nth-child(2){flex:1;min-width:0}.fwi small{display:block;color:var(--text-3);font-size:12.5px}
.ck{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 12px var(--f-ui);color:var(--text-2);flex:none}
.fwi.done .ck{background:var(--ok);border-color:var(--ok);color:#fff}.fwi.done .ck svg.i{width:15px;height:15px}.fwi.done>span:nth-child(2){color:var(--text-3);text-decoration:line-through}
@media (max-width:760px){.ins{grid-template-columns:minmax(0,1fr)}.insc{border-right:0;border-bottom:1px solid var(--line-soft)}.brs{grid-template-columns:minmax(0,1fr)}.brk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tbl.mini td{white-space:normal;padding:4px 6px;font-size:12.5px}.tbl.mini .chip{white-space:nowrap}}

/* ---------- right-to-left languages (Arabic, Hebrew, Urdu) ---------- */
[dir="rtl"] .main{margin:8px 0 8px 8px}
[dir="rtl"] .chev,[dir="rtl"] .crumbs svg.i,[dir="rtl"] [data-i="right"] svg,[dir="rtl"] [data-i="left"] svg{transform:scaleX(-1)}
[dir="rtl"] .num,[dir="rtl"] .kpi .v{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .num{text-align:start}
[dir="rtl"] .search .kbd{margin-inline-start:auto;margin-left:0}
[dir="rtl"] .rtab{border-radius:var(--r) var(--r) 0 0}
:root[lang="ar"]{--f-ui:'Noto Sans Arabic','Figtree',system-ui,sans-serif;--f-display:'Noto Sans Arabic','Marcellus',serif}
@media (max-width:760px){[dir="rtl"] .main{margin:0}}
/* language menu */
.langpop{width:320px}.langpop .ls{display:grid;max-height:420px;overflow:auto}
.langpop .lr{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line-soft)}.langpop .lr small{color:var(--text-3);margin-inline-start:auto;font-size:12px}.langpop .lr.on{background:var(--sel);font-weight:600}
.langbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:17px;border:1px solid var(--line-strong);font:600 12.5px var(--f-ui);cursor:pointer}
.user>span:not(.av){white-space:nowrap}
@media (max-width:1599px){.user>span:not(.av){display:none}.top .sample{font-size:0;padding:5px}.top .sample::before{content:"Sample";font-size:10.5px}}
.new .chip{flex:none}
@media (max-width:760px){.drawer .dbody{padding-bottom:calc(16px + var(--sab))}.drawer .row{flex-wrap:wrap}.drawer .row .btn{flex:1 1 140px!important}}
@media (max-width:370px){.celecard .row{flex-direction:column}}
@media (max-width:760px){.drawer{padding-bottom:var(--sab)}.drawer .dbody{padding-bottom:16px}}
.dbody{min-height:0}
.tbl.mini .num{white-space:nowrap}
@media (max-width:760px){.drawer.ask{padding-bottom:0}}
@media (max-width:380px){.tbl.mini td:first-child{display:none}}

/* ---------- draft 4 (26 Sept): rep field tools, MiSalon switch-over, SilverLion white-label, WCAG 2.2, sign-in, POPIA ---------- */
/* WCAG 2.2: 2.4.11 focus not hidden by sticky bars */
html{scroll-padding-top:calc(var(--top-h) + var(--tabs-h) + 16px);scroll-padding-bottom:96px}
@media (max-width:760px){html{scroll-padding-top:calc(72px + var(--sat));scroll-padding-bottom:calc(170px + var(--sab))}}
/* WCAG 2.2: 2.5.8 target size, record-tab close is a real 24px button */
.rtab button.x{all:unset;box-sizing:border-box;width:24px;height:24px;margin-inline-end:-6px;border-radius:6px;display:grid;place-items:center;color:var(--text-3);cursor:pointer;flex:none}
.rtab button.x:hover{background:var(--tab-hover);color:var(--text)} .rtab button.x:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rtab button.x svg.i{width:14px;height:14px}
/* WCAG 2.2: 2.5.7 dragging, column picker has up/down buttons */
.colrow .mv{margin-inline-start:auto;display:flex;gap:2px}
.colrow .mv button{all:unset;box-sizing:border-box;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--text-2);cursor:pointer}
.colrow .mv button:hover{background:var(--sunken)} .colrow .mv button[disabled]{opacity:.35} .colrow .mv svg.i{width:15px;height:15px}
.colrow .lk+.mv{margin-inline-start:8px}
/* toggles (were page-local) */
.tog{width:44px;height:26px;border-radius:13px;background:var(--line-strong);position:relative;flex:none;display:inline-block}
.tog::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tog.on{background:var(--ok)} .tog.on::after{inset-inline-start:21px}
.set{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:14px;min-height:56px}
.set:last-child{border-bottom:0}.set>span:first-child{flex:1;min-width:0}.set small{display:block;color:var(--text-3);font-size:12.5px}
.set select,.set .inp{font:inherit;height:36px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;background:var(--surface);color:var(--text)}
.d4grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.d4grid>*{min-width:0}
.stack{display:grid;gap:16px;min-width:0}
.stk{display:grid;gap:12px;min-width:0}
.lbl{font:600 11.5px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.big{font:700 22px/1.2 var(--f-ui)}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:var(--sunken);font:600 12.5px var(--f-ui);color:var(--text-2);white-space:nowrap}
.pill svg.i{width:14px;height:14px}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.info{background:var(--info-bg);color:var(--info)}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
/* route map */
.mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#ECE8DF;border:1px solid var(--line);aspect-ratio:16/10}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.mapbox .mtag{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:8px;padding:4px 8px;font-size:11.5px;color:var(--text-2)}
.nextcard{background:var(--primary);color:#fff;border-radius:var(--r-lg);padding:16px;display:grid;gap:12px}
.nextcard .lbl{color:var(--gold-lt)} .nextcard h2{margin:0;font:700 21px/1.2 var(--f-ui)} .nextcard p{margin:2px 0 0;color:#D8D2C6;font-size:13.5px}
.nextcard .btn{height:46px;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)} .nextcard .btn.gold{background:var(--gold);color:#141414;border-color:var(--gold)}
.nextcard .facts2{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#D8D2C6}.nextcard .facts2 b{color:#fff;display:block;font-size:15px}
.stops{list-style:none;margin:0;padding:0}
.stops li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);min-height:64px}
.stops li:last-child{border-bottom:0}
.stops .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--f-ui);background:var(--surface);border:1.5px solid var(--line-strong);color:var(--text)}
.stops li.done .n{background:var(--ok);border-color:var(--ok);color:#fff}.stops li.now .n{background:var(--primary);border-color:var(--primary);color:#fff}
.stops b{display:block;font-size:14.5px;overflow-wrap:anywhere}.stops small{color:var(--text-3);font-size:12.5px;display:block}
.stops li.done b{color:var(--text-2)}
/* voice note */
.rec{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.recbtn{width:56px;height:56px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 6px var(--bad-bg)}
.recbtn i{width:18px;height:18px;border-radius:4px;background:#fff;display:block}
.wave{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:3px;overflow:hidden}
.wave i{flex:none;width:3px;border-radius:2px;background:var(--text-2)}
.transcript{font-size:14px;line-height:1.55;color:var(--text-2);background:var(--sunken);border-radius:10px;padding:12px 14px}
.vlog{display:grid;gap:0}.vlog div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}
.vlog div:last-child{border-bottom:0}.vlog div>span:first-child{color:var(--text-3);font-size:12.5px;padding-top:1px}
@media (max-width:760px){.vlog div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* signature pad */
.sigpad{height:180px;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--surface);position:relative}
.sigpad svg{position:absolute;inset:0;width:100%;height:100%}.sigpad .l{position:absolute;left:16px;right:16px;bottom:36px;border-top:1px solid var(--line)}
.sigpad small{position:absolute;left:16px;bottom:12px;color:var(--text-3);font-size:12px}.sigpad a{position:absolute;right:10px;top:6px;font-size:13px;padding:8px}
.qsum .ln{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}.qsum .ln span:first-child{flex:1;min-width:0}
.qsum .tot{display:flex;justify-content:space-between;padding:12px 16px;font-weight:700;font-size:16px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;padding:4px 0}
.check .cb{margin-top:1px;flex:none;width:22px;height:22px}
/* catalogue */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.prod .ph{aspect-ratio:1;background:#fff;display:block;position:relative;border-bottom:1px solid var(--line-soft)}
.prod .ph img{width:100%;height:100%;object-fit:contain;display:block}
.prod .ph .pill{position:absolute;top:8px;inset-inline-start:8px;height:24px;font-size:11.5px}
.prod .pb{padding:10px 12px 12px;display:grid;gap:4px;flex:1}
.prod b{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}.prod .code{font:500 11.5px var(--f-mono);color:var(--text-3)}
.prod .pr{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}.prod .pr .num{font-weight:700;font-size:15px;text-align:start}
.prod .add{margin-inline-start:auto;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong);display:grid;place-items:center;background:var(--surface);color:var(--text)}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.prod .pb{padding:8px 10px 10px}.prod b{font-size:13px}}
.offline-strip{display:flex;align-items:center;gap:10px;background:var(--ok-bg);color:var(--ok);border-radius:10px;padding:10px 14px;font-size:13.5px}
.offline-strip b{color:var(--ok)} .offline-strip svg.i{flex:none}
/* wizard */
.wiz{display:flex;gap:0;counter-reset:w;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.wiz span{flex:1;min-width:max-content;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13.5px;color:var(--text-3);border-bottom:2px solid var(--line)}
.wiz span::before{counter-increment:w;content:counter(w);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-ui);background:var(--sunken);color:var(--text-2);flex:none}
.wiz span.done{color:var(--text-2)}.wiz span.done::before{content:"✓";background:var(--ok);color:#fff}
.wiz span.now{color:var(--text);font-weight:600;border-color:var(--primary)}.wiz span.now::before{background:var(--primary);color:#fff}
.src{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.src a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-weight:600;font-size:14px;min-height:56px}
.src a.on{border:2px solid var(--primary);padding:11px}.src a small{display:block;font-weight:400;color:var(--text-3);font-size:12px}
.src .lg{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font:700 12px var(--f-ui);color:#fff;flex:none}
.map3{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}
.map3 .fromc{font:500 12.5px var(--f-mono);background:var(--sunken);padding:6px 8px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map3 select{font:inherit;height:36px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;background:var(--surface);color:var(--text);min-width:0;width:100%}
@media (max-width:760px){.map3{grid-template-columns:minmax(0,1fr) auto;}.map3 .arr{display:none}.map3 select{grid-column:1/-1;grid-row:2}}
.bigstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bigstat div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.bigstat b{display:block;font:700 22px var(--f-ui)}.bigstat small{color:var(--text-3);font-size:12.5px}
@media (max-width:760px){.bigstat{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* theme / settings with live preview */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:10px;padding:6px 10px 6px 6px;background:var(--surface);min-height:44px}
.sw i{width:30px;height:30px;border-radius:8px;display:block;border:1px solid rgba(0,0,0,.08);flex:none}.sw b{font:500 13px var(--f-mono)}
.logodrop{display:flex;align-items:center;gap:14px;border:1.5px dashed var(--line-strong);border-radius:12px;padding:12px;background:var(--surface)}
.logodrop .lg{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;flex:none;overflow:hidden}
.logodrop .lg img{max-width:80%;max-height:80%}
.fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fonts a{border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--text);background:var(--surface);text-align:center;font-size:20px;min-height:64px}
.fonts a small{display:block;font:500 11.5px var(--f-ui);color:var(--text-3);margin-top:2px}.fonts a.on{border:2px solid var(--primary);padding:9px}
.contrast{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;border-radius:10px;padding:12px 14px;font-size:13.5px}
.contrast.bad{background:var(--bad-bg);color:var(--bad)} .contrast.ok{background:var(--ok-bg);color:var(--ok)}
.contrast b{display:block}.contrast p{margin:2px 0 0;color:var(--text)}
.devframe{background:#1a1a1a;border-radius:34px;padding:10px;width:280px;margin:0 auto;box-shadow:var(--shadow-pop)}
.devframe .scr{border-radius:26px;overflow:hidden;background:var(--canvas);height:520px;position:relative}
.devframe .sbar{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font:600 11px var(--f-ui);color:#fff}
.urlbar{display:flex;align-items:center;gap:8px;background:var(--sunken);border-radius:10px;height:40px;padding:0 12px;font:500 13px var(--f-mono);color:var(--text-2);overflow:hidden;white-space:nowrap}
.urlbar svg.i{width:15px;height:15px;color:var(--ok)}
.feat{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);min-height:60px}
.feat:last-child{border-bottom:0}.feat .ic{width:36px;height:36px;border-radius:10px;background:var(--sunken);display:grid;place-items:center;color:var(--text-2)}
.feat b{display:block;font-size:14px}.feat small{display:block;color:var(--text-3);font-size:12.5px}
.dns{font:500 12.5px var(--f-mono);width:100%;border-collapse:collapse}.dns td,.dns th{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:start;white-space:nowrap}
.dns th{font:600 11px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
/* pricing */
.plan{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:12px}
.plan.on{border:2px solid var(--primary);padding:19px}
.plan .pr{font:700 30px var(--f-ui);letter-spacing:-.5px}.plan .pr small{font:500 14px var(--f-ui);color:var(--text-3);letter-spacing:0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}.plan li{display:flex;gap:8px;align-items:flex-start}.plan li svg.i{color:var(--ok);flex:none;margin-top:1px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.plans{grid-template-columns:minmax(0,1fr)}}
.zero{display:flex;align-items:center;gap:16px;background:var(--primary);color:#fff;border-radius:16px;padding:18px 20px}
.zero .z{font:700 44px/1 var(--f-ui);color:var(--gold);flex:none}.zero b{font-size:17px;display:block}.zero p{margin:4px 0 0;color:#D6D9DC;font-size:13.5px}
/* sign-in */
.signwrap{min-height:100vh;display:grid;place-items:center;padding:calc(24px + var(--sat)) 16px calc(24px + var(--sab));background:var(--primary)}
.signcard{width:100%;max-width:400px;background:var(--surface);border-radius:20px;padding:28px 24px;display:grid;gap:14px}
.signcard h1{margin:0;font:700 24px/1.2 var(--f-ui)} .signcard p{margin:0;color:var(--text-2);font-size:14.5px}
.signcard .btn{height:52px;font-size:15.5px;width:100%;justify-content:center}
.or{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:12.5px}.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.fp{width:64px;height:64px;border-radius:18px;background:var(--sunken);display:grid;place-items:center;color:var(--text)}
.fp svg.i{width:34px;height:34px;stroke-width:1.5}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + var(--sab));box-shadow:0 -10px 40px rgba(0,0,0,.25);z-index:80;display:grid;gap:12px;max-width:480px;margin:0 auto}
.sheet h2{margin:0;font:700 20px var(--f-ui)} .sheet p{margin:0;color:var(--text-2);font-size:14px}
.sheet .btn{height:50px;width:100%;justify-content:center;font-size:15px}
@media (min-width:761px){.sheet{bottom:auto;top:50%;transform:translateY(-50%);border-radius:20px;padding:24px}}
.dim{position:fixed;inset:0;background:rgba(10,10,10,.5);z-index:79}
/* consent */
.consent{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.consent .check{padding:8px 0}
.cons-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:14px;align-items:center}
.cons-row small{grid-column:1/-1;color:var(--text-3);font-size:12.5px}
.cons-row:last-child{border-bottom:0}
/* quiet hours */
.qh{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));height:28px;border-radius:8px;overflow:hidden;margin:8px 16px 4px}
.qh i{background:var(--ok-bg)}.qh i.q{background:var(--primary)}.qh i.d{background:var(--gold)}
.qhl{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);padding:0 16px 12px}
.digest{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.digest header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--sunken);font-size:12.5px;color:var(--text-2)}
.digest .dl{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;display:flex;gap:10px}
.digest .dl:last-child{border-bottom:0}.digest .dl b{min-width:0}
.d4grid .devframe{margin-top:4px}
@media (max-width:1100px){.d4grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.nextcard .btn{flex:1}.zero{padding:16px}.zero .z{font-size:36px}}
/* SilverLion house skin (admin screens) — from silverlionlabs.com */
:root[data-brand="silverlion"]{--ink:#16222C;--ink-2:#2A3A47;--gold:#5BC8FF;--gold-lt:#9FDDFF;--gold-ink:#0B6690;--gold-bg:#E2F3FC;--sel:#E8F4FB;--hover:#F5F9FB;--canvas:#F3F5F6;--sunken:#E9EDEF;--line:#DCE2E6;--line-strong:#C3CCD2;--line-soft:#E8ECEF;--head:#F8FAFB;--text:#16222C;--text-2:#4A5864;--text-3:#5E6C77;--side-bg:#16222C;--side-text:#C3CDD5;--side-muted:#8795A0;--side-hover:#1C2833;--side-active:#2A3A47;--primary:#16222C;--primary-2:#2A3A47;--chart:#C9E6F5;--chart-cur:#16222C;--tab-hover:#E1E7EA;--f-ui:'Archivo',system-ui,sans-serif;--f-display:'Archivo',system-ui,sans-serif}
:root[data-brand="silverlion"] .side .brand img{height:30px}
:root[data-brand="silverlion"] .mtop img{height:28px}
:root[data-brand="silverlion"] .phead h1{font:700 26px/1.2 var(--f-ui);letter-spacing:-.3px}
:root[data-brand="silverlion"] .slname{font:700 16px var(--f-ui);color:#fff;letter-spacing:-.2px}
:root[data-brand="silverlion"] .bnav .midb{background:var(--ink);color:#5BC8FF}
@media (max-width:1100px){.plan.on{order:-1}}
@media (max-width:380px){.mtop .slname{display:none}}
.signcard>*{min-width:0}.signcard img{max-width:100%;width:auto;justify-self:start;object-fit:contain}.signcard .field input{width:100%}
.pgrid>aside,.pgrid>div{min-width:0}.set select{min-width:0;flex:none;max-width:48%}
.pgrid>aside,.pgrid>div{grid-template-columns:minmax(0,1fr)}
.logodrop{flex-wrap:wrap}
.panel:has(.pop.cols){overflow:visible}.pop.cols{z-index:40}
.pop.cols{width:320px}
/* draft 4 #15: make it yours (owner edits their own documents, messages, fields) */
.a4{background:#fff;border:1px solid var(--line);border-radius:8px;aspect-ratio:1/1.414;padding:22px;display:flex;flex-direction:column;gap:10px;font-size:10.5px;color:#222;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.a4 .h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.a4 .h b{font-size:15px;letter-spacing:.5px}.a4 .tile{width:40px;height:40px;border-radius:10px;background:#E35A33;color:#fff;display:grid;place-items:center;font:700 14px var(--f-ui)}
.a4 table{width:100%;border-collapse:collapse}.a4 td{padding:5px 0;border-bottom:1px solid #eee}.a4 td:last-child{text-align:end}
.a4 .tt{margin-top:auto;display:flex;justify-content:space-between;font-weight:700;font-size:13px;border-top:2px solid var(--ink);padding-top:6px}
.a4 .ft{font-size:9px;color:#666;border-top:1px solid #eee;padding-top:6px}.a4 .off{display:none}
.a4 .hl{outline:2px dashed var(--gold);outline-offset:3px;border-radius:3px}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);min-height:56px}
.part:last-child{border-bottom:0}.part small{grid-column:1;color:var(--text-3);font-size:12.5px}.part .tog{grid-row:1/span 2;grid-column:2}
.tokens{display:flex;gap:6px;flex-wrap:wrap}.tokens span{font:500 12px var(--f-mono);background:var(--gold-bg);color:var(--gold-ink);padding:5px 8px;border-radius:6px;min-height:28px;display:inline-flex;align-items:center}
.msgedit{border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;background:var(--surface);font-size:14.5px;line-height:1.55;min-height:110px}
.msgedit .tk{font:500 12.5px var(--f-mono);background:var(--gold-bg);color:var(--gold-ink);padding:1px 6px;border-radius:5px}
.bubble{background:#DCF8C6;border-radius:12px 12px 12px 3px;padding:10px 12px;font-size:14px;line-height:1.45;color:#111;max-width:320px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bubble .bt{display:block;text-align:center;color:#0B6E99;border-top:1px solid rgba(0,0,0,.08);margin:8px -12px -4px;padding-top:8px;font-weight:600}
.waback{background:#ECE5DD;border-radius:12px;padding:14px;display:grid;gap:8px}
.fld{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);min-height:60px}
.fld small{color:var(--text-3);font-size:12.5px}.fld .mv{display:flex;gap:2px;grid-row:1/span 2;grid-column:2}
.fld .mv button{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--text-2);cursor:pointer}.fld .mv button:hover{background:var(--sunken)}.fld .mv button[disabled]{opacity:.35}
.fld .mv svg.i{width:16px;height:16px}
.row.wrap .pill{white-space:normal;height:auto;min-height:28px;padding-block:4px;max-width:100%}

/* MiSalon dark mode (merged 26 Sept, Leon approved). Must stay last: the MiSalon skins set light tokens that would otherwise win over [data-theme="dark"]. */
:root[data-brand="misalon"][data-theme="dark"]{
 --canvas:#14181B; --surface:#1B2024; --sunken:#23292E; --line:#2E353B; --line-strong:#434B52; --line-soft:#252B30;
 --text:#EDEAE6; --text-2:#B5B9BD; --text-3:#959BA1; --hover:#20262A; --sel:#3A2A24; --head:#181C1F;
 --gold:#E35A33; --gold-ink:#F08A68; --gold-bg:rgba(227,90,51,.16);
 --primary:#C94A26; --primary-2:#D4552F; --on-primary:#FFFFFF; --chart:#2E353B; --chart-cur:#E35A33;
 --side-bg:#0E1113; --side-hover:#171B1E; --side-active:#22282C; --ink:#0E1113; --ink-2:#22282C;
}
:root[data-brand="misalon"][data-theme="dark"] .btn.primary{background:#C94A26;border-color:#C94A26;color:#fff}
:root[data-brand="misalon"][data-theme="dark"] .zero{background:#0E1113;border:1px solid var(--line)}
:root[data-brand="misalon"][data-theme="dark"] .pv{--text:#141820;--text-2:#4B5261;--text-3:#646B7A;--line:#E4E1D9;--line-strong:#D3CFC4;--surface:#FFFFFF;background:#F7F4F0;color:var(--text)}
/* coral with white text needs the darker coral to pass 4.5:1 (badges, cart button), light and dark */
:root[data-brand="misalon"] .iconbtn .dot{background:#C94A26}
:root[data-brand="misalon"] .cartbar .btn.btn{background:#C94A26;border-color:#C94A26;color:#fff}
:root[data-theme="dark"] .a4 .hl{color:#141820;border-color:transparent}

/* SilverLion dark mode (26 Sept, same fix as MiSalon). Must stay last. */
:root[data-brand="silverlion"][data-theme="dark"]{
 --canvas:#10171C; --surface:#172027; --sunken:#1F2A32; --line:#2A363F; --line-strong:#3E4C56; --line-soft:#212C34; --head:#141C22;
 --text:#E8EEF2; --text-2:#B0BCC4; --text-3:#92A0AA; --hover:#1B252C; --sel:#1E3240;
 --gold:#5BC8FF; --gold-lt:#9FDDFF; --gold-ink:#8FD6FF; --gold-bg:rgba(91,200,255,.14);
 --primary:#5BC8FF; --primary-2:#86D7FF; --on-primary:#0B1418; --chart:#2A363F; --chart-cur:#5BC8FF;
 --side-bg:#0A1014; --side-hover:#121A20; --side-active:#1B262E; --ink:#0A1014; --ink-2:#1B262E; --top-bg:rgba(23,32,39,.9);
}
:root[data-brand="silverlion"][data-theme="dark"] .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
:root[data-brand="silverlion"] .iconbtn .dot{background:#0B6690;color:#fff}
:root[data-theme="dark"] .devframe .pvw{--text:#16222C;--text-2:#4A5864;--text-3:#5E6B75;--line:#DCE2E6;--surface:#FFFFFF;color:var(--text)}

/* ===== erp-5a.css ===== */
/* draft 5A (26 Sept): trade shop / client portal, money on the client record, prospecting map. Loads after erp.css. */
.age{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.age div{background:var(--sunken);border-radius:10px;padding:10px 12px;min-width:0}
.age div small{display:block;color:var(--text-3);font-size:12px}.age div b{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.age .late{background:var(--warn-bg)}.age .late small,.age .late b{color:var(--warn)}.age .bad{background:var(--bad-bg)}.age .bad small,.age .bad b{color:var(--bad)}
.meter{height:10px;border-radius:5px;background:var(--sunken);overflow:hidden;display:flex}.meter i{display:block;height:100%}
.credit-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.credit-top .big{font-size:24px}
@media (max-width:760px){.age{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* portal (client-facing) */
.ptop{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));display:flex;align-items:center;gap:12px}
.ptop img{height:16px;display:block}.ptop .who{margin-inline-start:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:#D8D2C6;min-width:0}
.ptop .who b{color:#fff;display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ptop .who>span:last-child{min-width:0}
.ptop .av{width:36px;height:36px;border-radius:50%;background:#2A2721;color:var(--gold-lt);display:grid;place-items:center;font:700 13px var(--f-ui);flex:none}
.ptabs2{display:flex;gap:4px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ptabs2 a{padding:14px 12px;color:var(--text-2);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}.ptabs2 a.on{color:var(--text);font-weight:700;border-color:var(--ink)}
.pwrap{max-width:1200px;margin:0 auto;padding:20px 24px 48px}
.pnav{display:none}
@media (max-width:760px){.ptabs2{display:none}.pwrap{padding:16px calc(16px + var(--sar)) calc(170px + var(--sab)) calc(16px + var(--sal))}
 .pnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:calc(68px + var(--sab));padding:0 var(--sar) max(6px,var(--sab)) var(--sal);background:var(--surface);border-top:1px solid var(--line);z-index:30}
 .pnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--text-2);font-weight:500}.pnav a.on{color:var(--text);font-weight:700}.pnav svg.i{width:22px;height:22px}
 .pfab{position:fixed;left:calc(16px + var(--sal));right:calc(16px + var(--sar));bottom:calc(80px + var(--sab));z-index:29}.pfab .btn{width:100%;height:52px;font-size:15.5px;border-radius:var(--r-lg);box-shadow:0 6px 18px rgba(20,20,20,.22)}}
@media (min-width:761px){.pfab{display:none}}
.hello2{font:400 26px/1.2 var(--f-display);margin:0 0 4px}
.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:6px 0 2px}
.track span{position:relative;padding-top:18px;font-size:12px;color:var(--text-3);text-align:center;min-width:0}
.track span::before{content:"";position:absolute;top:4px;left:0;right:0;height:4px;background:var(--line)}
.track span::after{content:"";position:absolute;top:0;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.track span.done{color:var(--text-2)}.track span.done::before{background:var(--ok)}.track span.done::after{background:var(--ok);border-color:var(--ok)}
.track span.now{color:var(--text);font-weight:700}.track span.now::before{background:linear-gradient(90deg,var(--ok) 50%,var(--line) 50%)}.track span.now::after{background:var(--ink);border-color:var(--gold)}
.ordcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:grid;gap:10px}
.buyagain{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ba{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;align-items:center;min-width:0}
.ba img{width:52px;height:52px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line-soft);grid-row:1/span 2}
.ba b{font-size:12.5px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ba small{font-size:11.5px;color:var(--text-3)}
.ba .btn{grid-column:1/-1;height:38px;margin-top:4px}
.youprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.youprice s{color:var(--text-3);font-size:12px}
.stmt td{font-size:13.5px}
.cartbar{position:sticky;bottom:12px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-top:16px;box-shadow:var(--shadow-pop)}
.cartbar .grow b{display:block;font-size:15px}.cartbar .grow small{color:#CFC9BD;font-size:12.5px}
.cartbar .btn{background:var(--gold);color:#141414;border-color:var(--gold);height:44px;flex:none}
:root[data-brand="misalon"] .cartbar .btn{background:#E35A33;color:#fff;border-color:#E35A33}
@media (max-width:760px){.cartbar{position:fixed;left:calc(12px + var(--sal));right:calc(12px + var(--sar));bottom:calc(78px + var(--sab));margin:0;z-index:29}}
/* prospect map */
.pmap{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#ECE8DF;border:1px solid var(--line);aspect-ratio:16/11}
.pmap svg{position:absolute;inset:0;width:100%;height:100%}
.legend2{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}.legend2 span{display:inline-flex;align-items:center;gap:6px}
.legend2 i{width:12px;height:12px;border-radius:50%;display:inline-block}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);min-height:68px}
.plist{list-style:none;margin:0;padding:0}.plist li:last-child{border-bottom:0}
.plist b{display:block;font-size:14.5px;overflow-wrap:anywhere}.plist small{display:block;color:var(--text-3);font-size:12.5px}
.plist .why{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.plist .btn{height:40px}
.stack,.stk{grid-template-columns:minmax(0,1fr)}
.rechead h1+.chip,.rechead .chip{flex:none}
.rechead>div>div:first-child{flex-wrap:wrap}
.stmt{min-width:420px}.panel:has(>.stmt){overflow-x:auto}
@media (max-width:760px){.stmt{min-width:0}.stmt th:nth-child(4),.stmt td:nth-child(4){display:none}}
.ptop .who{flex:1 1 auto;justify-content:flex-end}.ptop .who>span:first-child{min-width:0;text-align:end}@media (max-width:400px){.ptop .sample{display:none}.ptop .who>span:first-child{font-size:12px}}
@media (max-width:760px){.buyagain{grid-auto-columns:230px}.ba b{-webkit-line-clamp:2}}.buyagain{grid-auto-columns:minmax(210px,1fr)}
aside .age{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ===== os-live.css ===== */
/* RappleOS production additions. Loads after erp.css + erp-5a.css. Tokens only: no new colours, fonts or sizes. */
/* Home and Reports are links, not open/close groups: same look as the group buttons. */
.side .grp>a.grpbtn{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:var(--r);color:var(--side-text);font-weight:500;text-decoration:none}
.side .grp>a.grpbtn:hover{background:var(--side-hover)}
.side .grp>a.grpbtn.on{background:var(--side-active);color:var(--gold-lt);font-weight:600}
.app.collapsed .side .grp>a.grpbtn span{display:none}.app.collapsed .side .grp>a.grpbtn{justify-content:center;padding:0}
.side .grp:not(.open) ul{display:none}
.side .grp li a .old{margin-inline-start:auto;display:inline-flex;color:var(--side-muted)}.side .grp li a .old .i{width:13px;height:13px}
.side button.foot{all:unset;box-sizing:border-box;padding:10px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--side-muted);cursor:pointer;min-height:44px}
.side button.foot:hover{color:#fff}
button.search,button.user,button.msearch{font:inherit;text-align:start;border:1px solid transparent}
button.user{background:none;color:inherit}
button.msearch{width:calc(100% - 32px);cursor:text}
.rtab a{text-decoration:none}
.rtab button.x{all:unset;box-sizing:border-box;width:24px;height:24px;display:grid;place-items:center;border-radius:4px;color:var(--text-3);cursor:pointer}
.rtab button.x:hover{background:var(--tab-hover)}.rtab button.x .i{width:14px;height:14px}
.palette a.it{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Dialog (Record actions: Send to invoicing, Mark paid, Lost) */
.scrim.osdlg{align-items:flex-start;padding:10vh 16px 16px}
.dlg{width:min(520px,100%);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-pop)}
.dlg header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dlg .body{overflow:auto}
.dlg footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.dlg .field input,.dlg .field select,.dlg .field textarea{width:100%}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* Toasts */
#toastwrap{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%);z-index:60;display:grid;gap:8px;justify-items:center}

/* More sheet (phone) */
.scrim.osmore{align-items:flex-end;padding:0}
.moresheet{width:100%;max-height:82vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0;padding-bottom:var(--sab)}
.moresheet header{display:flex;align-items:center;justify-content:space-between}
.moresheet .mlist{overflow:auto;padding:4px 8px 16px}
.moresheet .mlist a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:var(--r);color:var(--text);text-decoration:none;font-size:15px}
.moresheet .mlist a:hover{background:var(--sunken)}
.moresheet .mlist h5{margin:14px 10px 4px;font:600 11px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* Record sections: tabs on desktop, all stacked on phones (Leon's decision 2) */
@media (min-width:761px){ .tsec.tsoff{display:none} }
.pop.menu .mitem{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 14px;font-size:13.5px;cursor:pointer;color:var(--text)}
.pop.menu .mitem:hover{background:var(--sunken)}.pop.menu .mitem.bad{color:var(--bad)}
.pop.menu a{min-height:40px}
.steps .i{width:12px;height:12px;vertical-align:-1px}

/* Dashboard parts (copied from the mockups' own page styles: sales-my-numbers.html, home.html) */
.ring{--p:0;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--ink) calc(var(--p)*1%),var(--sunken) 0);display:grid;place-items:center;flex:none}
:root[data-theme="dark"] .ring{background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--sunken) 0)}
.ring div{width:104px;height:104px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center}
.ring b{font:600 26px var(--f-ui);font-variant-numeric:tabular-nums;display:block}.ring small{color:var(--text-3);font-size:11.5px}
.todo{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px}.todo:last-child{border-bottom:0}.todo .btn{margin-inline-start:auto;flex:none}
.todo>span:not(.chip){min-width:0;overflow-wrap:anywhere}
.dash3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.kv{display:flex;justify-content:space-between;gap:12px}
select.btn{font:inherit;font-size:13px;padding-inline-end:28px}
@media (max-width:760px){.dash3{grid-template-columns:minmax(0,1fr)}}

/* Lists built from live data */
.tbl tbody tr[data-href]{cursor:pointer}
.tbl tbody tr[data-href]:hover{background:var(--sel)}
.mcard[data-href]{cursor:pointer}
.listpanel .filter{user-select:none}
button.filter{font:inherit;font-size:12.5px;appearance:none}
@media (max-width:760px){button.filter{font-size:13.5px}}
.listpanel .filter:focus-visible{outline:2px solid var(--gold)}
input.minisearch{font:inherit;background:var(--surface);color:var(--text)}
.mfilter{display:none}
.mobacts{display:none}
@media (max-width:760px){
 .mobacts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
 .mobacts .iconbtn{width:44px;height:44px}
 .mobacts .pop{top:48px}
 body:has(.fab.osfab) .page{padding-bottom:calc(160px + var(--sab))}
}
@media (max-width:760px){
 .mfilter{display:flex;gap:8px;padding:12px 12px 0}
 .mfilter input{flex:1;height:44px;font-size:16px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text)}
 .dlg{max-height:calc(100vh - var(--sat) - 24px)}
 .scrim.osdlg{padding:calc(12px + var(--sat)) 12px 12px}
 #toastwrap{bottom:calc(84px + var(--sab))}
 /* 44px taps on phones (house rule), measured at 320/360/394/430 */
 .page .btn,.page .btn.sm,.page .filter,.dlg .btn{min-height:44px}
 .page .btn.sm{padding:0 14px;font-size:14px}
 .seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
 .panel header .acts a,.rechead .meta a,.page .body a:not(.btn):not(.pill){display:inline-flex;align-items:center;min-height:44px}
 .mtop #ubtn2{width:44px!important;height:44px!important}
 .plist .pill{min-height:36px}
 .plist a.pill{min-height:44px}
}

/* critic round 1 fixes */
[hidden]{display:none!important}
.mono{white-space:nowrap}
.todo>span:not(.chip){overflow-wrap:break-word}
.rtabs.ov{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.btn:active,.filter:active,.mcard:active{transform:scale(.97);transition:transform 120ms cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){.sk{animation:none}.btn:active,.filter:active,.mcard:active{transform:none}}
.chip.insage{color:var(--text)}
.rechead .meta a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){body[data-item="My numbers"] .phead .acts{display:flex;margin:0}}
@media (max-width:760px){
 .rechead .meta a{display:inline-flex!important;align-items:center;min-height:44px!important;margin-block:-12px}
 .phead .sub,.body.muted{font-size:16px}
 #p2 .tbl{display:none}
 .savebar.vbar{margin:0!important;inset-inline:0}
}

/* critic round 2 fixes */
.nw{white-space:nowrap}
.moresheet header .iconbtn,.dlg header .iconbtn{width:44px;height:44px}
.scrim.osmore .moresheet{animation:osup 240ms cubic-bezier(.23,1,.32,1)}
@keyframes osup{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.scrim.osmore .moresheet{animation:osfade 160ms linear}}
@keyframes osfade{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
 .kpi .d,.empty>div,.mcard .who,.lines .mcard .who{font-size:16px}
}

/* Leon's own buttons (CFO, MiCore, Trader) in the top bar */
.top .leonbtn{display:inline-flex;align-items:center;gap:6px;margin-inline-end:6px;text-decoration:none}
.top .leonbtn .i{width:15px;height:15px}
@media (max-width:1200px){.top .leonbtn span{display:none}}

/* Buttons that stand out and react (Leon, 26 Sept: "make the buttons stand out and react when clicked") */
.qa a{transition:transform 140ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease,border-color 160ms ease;box-shadow:0 1px 2px rgba(20,20,20,.05)}
.qa a span.ic{background:var(--primary);color:var(--on-primary)}
:root:not([data-theme="dark"]) .qa a span.ic{color:var(--gold-lt)}
.qa a:hover{border-color:var(--gold);box-shadow:0 8px 20px rgba(20,20,20,.10);transform:translateY(-2px)}
.qa a:active{transform:scale(.97);box-shadow:0 1px 2px rgba(20,20,20,.08)}
.btn{transition:transform 120ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease,background-color 160ms ease,border-color 160ms ease}
.btn:hover{box-shadow:0 4px 12px rgba(20,20,20,.10)}
.btn.primary:hover{filter:brightness(1.12)}
.top .leonbtn{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:600}
:root:not([data-theme="dark"]) .top .leonbtn .i{color:var(--gold-lt)}
.top .leonbtn:hover{filter:brightness(1.15);box-shadow:0 4px 12px rgba(20,20,20,.18)}
.mcard,.panel.kpi{transition:transform 140ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease}
.mcard[data-href]:hover,.tbl tbody tr[data-href]:active{box-shadow:0 6px 16px rgba(20,20,20,.08)}
.tbl tbody tr[data-href]:active{background:var(--sel)}
@media (prefers-reduced-motion:reduce){.qa a,.qa a:hover,.qa a:active,.btn,.mcard{transition:none;transform:none}}

/* The frame stays still between pages (Chrome, Edge, newer Safari): only the page content changes, quickly. */
@view-transition{navigation:auto}
.side{view-transition-name:os-side}.top{view-transition-name:os-top}.rtabs{view-transition-name:os-tabs}.mtop{view-transition-name:os-mtop}.bnav{view-transition-name:os-bnav}
::view-transition-group(os-side),::view-transition-group(os-top),::view-transition-group(os-tabs),::view-transition-group(os-mtop),::view-transition-group(os-bnav){animation:none}
::view-transition-old(os-side),::view-transition-new(os-side),::view-transition-old(os-top),::view-transition-new(os-top),::view-transition-old(os-mtop),::view-transition-new(os-mtop),::view-transition-old(os-bnav),::view-transition-new(os-bnav){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:140ms}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.osrefresh.spin .i{animation:osspin .6s linear infinite}
@keyframes osspin{to{transform:rotate(360deg)}}
.mtop .osrefresh{color:#fff}

/* Report / Idea: the old floating button is replaced by the top-bar button in the new look */
button[data-rapfb]{display:none!important}
.top .osfb{gap:6px}

/* ---------- Leon, 26 Sept: darker buttons and tabs, hover graphics, readable top buttons, nicer sidebar scrollbar ---------- */
/* Quick actions: dark cards with a gold icon; on hover a gold edge and a soft gold light sweeps across */
:root:not([data-theme="dark"]) .qa a{background:linear-gradient(160deg,#23201B 0%,#141414 100%);border-color:#2A2721;color:#FAF8F2;position:relative;overflow:hidden;isolation:isolate}
:root:not([data-theme="dark"]) .qa a small{color:#B4AD9F}
:root:not([data-theme="dark"]) .qa a span.ic{background:rgba(198,167,102,.16);color:var(--gold-lt);box-shadow:inset 0 0 0 1px rgba(198,167,102,.35)}
.qa a::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px 80px at var(--mx,20%) var(--my,50%),rgba(229,205,146,.22),transparent 70%);opacity:0;transition:opacity 200ms ease}
.qa a:hover::after{opacity:1}
:root:not([data-theme="dark"]) .qa a:hover{border-color:var(--gold);box-shadow:0 10px 24px rgba(20,20,20,.22),0 0 0 1px rgba(198,167,102,.35)}
/* Tabs: a darker strip; the open page is the light one; hover lifts the tab and draws a gold line */
:root:not([data-theme="dark"]) .rtabs{background:#1E1C19;border-bottom-color:#141414}
:root:not([data-theme="dark"]) .rtab{color:#CFC9BD;position:relative}
:root:not([data-theme="dark"]) .rtab .kind{color:#948E81}
:root:not([data-theme="dark"]) .rtab button.x{color:#948E81}
:root:not([data-theme="dark"]) .rtab:hover{background:#2A2721;color:#FAF8F2}
:root:not([data-theme="dark"]) .rtab button.x:hover{background:#3A362F;color:#FAF8F2}
.rtab::after{content:"";position:absolute;inset-inline:10px;bottom:0;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:var(--tab-line-origin,left);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.rtab:hover::after{transform:scaleX(1)}
:root:not([data-theme="dark"]) .rtab.on{background:var(--canvas);color:var(--text);border-color:#141414}
:root:not([data-theme="dark"]) .rtab.on .kind{color:var(--gold-ink)}
:root:not([data-theme="dark"]) .rtab.on button.x{color:var(--text-3)}
.rtab.on::after{transform:scaleX(1);top:0;bottom:auto}
:root:not([data-theme="dark"]) .rtabs.ov{-webkit-mask-image:none;mask-image:none;box-shadow:inset -40px 0 24px -24px #141414}
/* Top bar: CFO, MiCore, Trader and Report / Idea never squeeze to "C..." - the search box gives way instead */
.top .leonbtn,.top .osfb{flex:none;white-space:nowrap}
.top .leonbtn span,.top .osfb span{overflow:visible;text-overflow:clip}
.top .search{min-width:180px;flex:1 1 auto}
@media (max-width:1200px){.top .osfb span{display:none}}
/* Sidebar scrollbar: thin, dark, gold on hover (was the grey system bar) */
.side nav{scrollbar-width:thin;scrollbar-color:#3A362F transparent}
.side nav:hover{scrollbar-color:#8A6D2F transparent}
.side nav::-webkit-scrollbar{width:6px}
.side nav::-webkit-scrollbar-track{background:transparent}
.side nav::-webkit-scrollbar-thumb{background:#3A362F;border-radius:3px}
.side nav:hover::-webkit-scrollbar-thumb{background:#8A6D2F}
.side nav::-webkit-scrollbar-button{display:none;height:0}
@media (prefers-reduced-motion:reduce){.rtab::after,.qa a::after{transition:none}}
@media (max-width:760px){.bnav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* "by SilverLion" (Leon, 26 Sept: all apps carry it) - sidebar foot and the phone More sheet */
.bysl{display:flex;align-items:center;gap:8px;margin:6px 12px 2px;padding:8px 10px;border-radius:8px;color:#8A8578;font:500 .75rem/1 var(--f-ui);text-decoration:none;letter-spacing:.02em}
.bysl img{width:18px;height:18px;object-fit:contain;filter:saturate(.85);transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.bysl:hover{color:var(--gold-lt);background:#1F1D1A;text-decoration:none}
.bysl:hover img{transform:scale(1.12)}
.app.collapsed .bysl span{display:none}
.app.collapsed .bysl{justify-content:center;margin:6px 8px 2px}
.moresheet .bysl{margin:14px 0 4px;justify-content:center;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.bysl img{transition:none}}
/* RAPPLE OS logo (Leon, 26 Sept: "our new nice logo", the gold-and-white app icon "with a shining effect") */
.oslogo{display:inline-flex;align-items:baseline;gap:7px;font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1;position:relative;padding-bottom:7px;white-space:nowrap}
.oslogo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;border-radius:1px;background:linear-gradient(90deg,rgba(198,167,102,0),#C6A766 18%,#F6E3B0 50%,#C6A766 82%,rgba(198,167,102,0))}
.osl-r{font-size:1.125rem;letter-spacing:.16em;background:linear-gradient(100deg,#A88848 0%,#F6E3B0 35%,#C6A766 50%,#F6E3B0 65%,#A88848 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:oslShine 4.5s linear infinite}
.osl-os{font-size:1.375rem;color:#FAF8F2;letter-spacing:.04em;text-shadow:0 0 18px rgba(198,167,102,.25)}
@keyframes oslShine{to{background-position:-250% 0}}
.side .brand small{margin-top:7px}
.app.collapsed .side .oslogo{display:none}
.mtop .oslogo{padding-bottom:5px}.mtop .osl-r{font-size:.9375rem}.mtop .osl-os{font-size:1.125rem}
@media (prefers-reduced-motion:reduce){.osl-r{animation:none;background-position:30% 0}}
/* Logo alignment (Leon, 26 Sept: "not aligned"): stacked and centred like the app icon - RAPPLE, big OS, gold rule, PRODUCTS */
.side .brand{height:auto;min-height:64px;padding:16px 12px 12px;justify-content:center}
.side .brand>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.side .oslogo{flex-direction:column;align-items:center;gap:3px;padding-bottom:8px}
.side .osl-r{font-size:.8125rem;letter-spacing:.3em;padding-inline-start:.3em}
.side .osl-os{font-size:1.875rem;line-height:.9;letter-spacing:.02em}
.side .oslogo::after{inset-inline:22%}
.side .brand small{margin-top:8px;letter-spacing:.3em;padding-inline-start:.3em;text-align:center}
.app.collapsed .side .brand{padding:16px 0;min-height:64px}
.mtop .oslogo{align-items:center}
[dir="rtl"]{--tab-line-origin:right}

/* ===== _floor.css ===== */
/* 12px text floor: every selector in erp.css, erp-5a.css and os.css that set text under 12px */
.side .brand small,
.side .grp li a .ct,
.iconbtn .dot,
.kbd,
.sample,
.user small,
.rtab .kind,
.chip,
.tbl th,
.facts label,
.ptabs .ct,
.feed .av,
.feed time,
.kpi label,
.bars b,
.blabels span,
.palette h5,
.pop .n time,
.bnav a,
.colrow .lk,
.npop header .sample,
.nsheet header .sample,
.nday,
.nsheet .seg .ct,
.lvbar,
.board .tcol div,
.ap .tm,
.nowline span,
.stychip .nav,
.drawer h5,
.brk small,
.top .sample::before,
.lbl,
.mapbox .mtag,
.prod .ph .pill,
.prod .code,
.fonts a small,
.devframe .sbar,
.dns th,
.qhl,
.a4,
.a4 .ft,
.pnav a,
.ba small,
.moresheet .mlist h5,
.ring small{font-size:12px!important}

/* ===== erp-7.css ===== */
/* RappleOS draft 7 (26 Sept 2026) - Claude Design.
   Loads AFTER erp.css + erp-5a.css + os.css (the live build's file, copied as os-live.css for the mockups).
   Adopts the build's live changes into the design system and adds: final "by SilverLion" badge, Leon's desk group,
   the 12px floor, the "stone" page depth, the template parts for the ~110 old screens, Email notifications,
   loading screens, Ask Claude, and the Rapple Logistics OS skin + parts. Tokens only from erp.css unless listed at the top. */

/* ---------- NEW TOKENS (listed in HANDOVER-2026-09-26-DRAFT7.md) ---------- */
:root{
  --stone:#ECE8E0;            /* option B page depth: one step darker than --canvas */
  --panel-head:#FAF8F3;       /* panel header strip on stone */
  --charcoal-2:#1E1C19;       /* the build's tab strip, now a token */
  --gold-glow:rgba(229,205,146,.22);
  --focus:#C6A766;
}

/* ---------- 1. SHELL: logo lockup (Marcellus, not Georgia), app word, family rule ---------- */
.oslogo .osl-w{display:block;font:600 12px/1 var(--f-ui);letter-spacing:.3em;padding-inline-start:.3em;color:var(--side-muted);margin-top:12px;text-transform:uppercase;text-align:center}
.side .oslogo{padding-bottom:0}
.side .oslogo::after{bottom:24px}
.side .brand small{display:none}
.side .brand img.lockup{height:78px;width:auto;display:block;margin:2px auto 0}
.app.collapsed .side .brand img.lockup{display:none}
.top .sample::before{content:none!important}
/* Leon's desks: one dark group instead of three loose buttons (less noise, never squeezes) */
.top .leongrp{display:inline-flex;flex:none;height:34px;border-radius:9px;background:var(--ink);padding:2px;gap:2px;box-shadow:inset 0 0 0 1px #2A2721}
.top .leongrp a{display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:7px;color:#FAF8F2;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.top .leongrp a .i{width:15px;height:15px;color:var(--gold-lt)}
.top .leongrp a:hover{background:#2A2721;box-shadow:inset 0 -2px 0 var(--gold)}
.top .leongrp a:active{transform:scale(.97)}
@media (max-width:1200px){.top .leongrp a span{display:none}.top .leongrp a{padding:0 9px}}
.top .ideabtn{flex:none;gap:6px;white-space:nowrap}
.top .ideabtn .i{color:var(--gold-ink)}
@media (max-width:1200px){.top .ideabtn span{display:none}}

/* by SilverLion: final badge, one design for every app (sidebar foot, collapsed, phone More sheet, sign-in, PDFs) */
.bysl2{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:10px 10px;border-top:1px solid rgba(255,255,255,.07);color:var(--side-muted);text-decoration:none;border-radius:0}
.bysl2 img{width:22px;height:22px;object-fit:contain;flex:none;filter:grayscale(.2) brightness(1.05);transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.bysl2 span{display:flex;flex-direction:column;line-height:1.1;font:600 12px/1.15 var(--f-ui);letter-spacing:.04em;color:#B4AD9F}
.bysl2 small{font:500 12px/1.1 var(--f-ui);color:var(--side-muted);letter-spacing:.02em}
.bysl2:hover{text-decoration:none}.bysl2:hover span{color:var(--gold-lt)}.bysl2:hover img{transform:scale(1.1) rotate(-4deg)}
.app.collapsed .bysl2{justify-content:center;margin:8px 8px 0}.app.collapsed .bysl2 span{display:none}
.bysl2.light{border-top:1px solid var(--line);color:var(--text-3)}.bysl2.light span{color:var(--text-2)}.bysl2.light small{color:var(--text-3)}
.bysl2.center{justify-content:center}
@media (prefers-reduced-motion:reduce){.bysl2 img{transition:none}}

/* ---------- 2. THE 12px FLOOR: see _floor.css (generated list) + these fixes so nothing crowds ---------- */
.iconbtn .dot{min-width:18px;height:18px;line-height:14px;top:4px;right:4px}
.rtab .kind{letter-spacing:.06em}
.chip{padding-block:2px}
.tbl th{letter-spacing:.05em}

/* ---------- 3. PAGE DEPTH ("darker pages", Leon). data-depth on <html>: cream (today) | stone (recommended) ---------- */
:root[data-depth="stone"]:not([data-theme="dark"]){--canvas:var(--stone);--sunken:#E4DFD5}
:root[data-depth="stone"]:not([data-theme="dark"]) .panel>header,:root[data-depth="stone"]:not([data-theme="dark"]) .panel .phd{background:var(--panel-head)}
:root[data-depth="stone"]:not([data-theme="dark"]) .panel{box-shadow:0 1px 0 rgba(20,20,20,.04)}
/* hover graphics on rows and cards (all depths) */
.tbl tbody tr{transition:background-color 120ms ease}
.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.panel.kpi{position:relative;overflow:hidden}
.panel.kpi::after{content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,var(--gold-glow),transparent);opacity:0;transition:opacity 220ms ease}
.panel.kpi:hover::after{opacity:1}

/* Quick actions: max 6 in one row on desktop; phone = two short rows that scroll sideways (key info stays first) */
.qa7{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 16px}
.qa7 a{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border-radius:12px;background:linear-gradient(160deg,#23201B,#141414);border:1px solid #2A2721;color:#FAF8F2;text-decoration:none;position:relative;overflow:hidden;transition:transform 140ms cubic-bezier(.23,1,.32,1),box-shadow 160ms ease,border-color 160ms ease}
.qa7 a .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(198,167,102,.16);box-shadow:inset 0 0 0 1px rgba(198,167,102,.35);color:var(--gold-lt);flex:none}
.qa7 a>span:last-child{min-width:0}.qa7 a b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qa7 a small{display:block;color:#B4AD9F;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa7 a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,20,20,.22)}
.qa7 a:active{transform:scale(.97)}
@media (max-width:760px){
 .qa7{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:148px;grid-template-rows:auto auto;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .qa7 a{min-height:56px;padding:10px 12px}.qa7 a small{display:none}.qa7 a b{font-size:15px}.qa7 a .ic{width:32px;height:32px}
}

/* Depth comparison sheet */
.depths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.depth{border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:#fff}
.depth .top2{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.depth .pv{padding:14px;display:grid;gap:10px}
.depth .pv .t{height:14px;border-radius:4px;width:60%}
.depth .pv .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.depth .pv .c{height:64px;border-radius:10px}
.depth .pv .l{height:90px;border-radius:10px}
.depth p{margin:0;padding:12px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
@media (max-width:760px){.depths{grid-template-columns:1fr}}

/* ---------- 4. TEMPLATE PARTS FOR THE OLD SCREENS ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1100px){.pgrid{grid-template-columns:1fr}}
.lead7{font-size:14px;color:var(--text-2);margin:-6px 0 14px}

/* 4a Wide data table: frozen first column, column groups, totals row, sideways scroll with edge shadow, density */
.wide{position:relative;overflow:auto;max-height:calc(100vh - 290px);border-top:1px solid var(--line)}
.wide table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13.5px}
.wide th,.wide td{padding:0 12px;height:38px;white-space:nowrap;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.wide thead th{position:sticky;top:0;z-index:2;background:var(--head);font:600 12px/1.2 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);text-align:start;height:34px}
.wide thead tr.grp th{top:0;height:30px;text-align:center;color:var(--text-2);border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line)}
.wide thead tr.grp+tr th{top:30px}
.wide .fz{position:sticky;inset-inline-start:0;z-index:1;box-shadow:inset -1px 0 0 var(--line)}
.wide thead .fz{z-index:3}
.wide.scrolled .fz{box-shadow:inset -1px 0 0 var(--line),6px 0 10px -6px rgba(20,20,20,.18)}
.wide td.num,.wide th.num{text-align:end;font-variant-numeric:tabular-nums}
.wide td.g0{border-inline-start:1px solid var(--line)}
.wide tfoot td{position:sticky;bottom:0;background:var(--head);font-weight:600;border-top:1px solid var(--line-strong)}
.wide td.low{color:var(--warn);font-weight:600}.wide td.out{color:var(--bad);font-weight:600}
.wide td.nil{color:var(--text-3)}
.wide tbody tr:hover td{background:var(--hover)}
.cellbar{display:inline-block;height:6px;border-radius:3px;background:var(--chart);vertical-align:middle;margin-inline-end:8px}
.densitysw{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.densitysw button{all:unset;padding:0 10px;height:30px;display:inline-flex;align-items:center;font-size:12.5px;cursor:pointer}
.densitysw button.on{background:var(--ink);color:#fff}
/* phone: pick-3 cards with a "compare" row */
.wcards{display:none}
@media (max-width:760px){.wide{display:none}.wcards{display:grid;gap:10px;padding:12px}}
.wcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px}
.wcard .h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.wcard .h b{font-size:16px}
.wcard .h .mono{color:var(--text-3)}
.wcard .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.wcard .kv div{background:var(--sunken);border-radius:8px;padding:8px}
.wcard .kv small{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.wcard .kv b{font-size:17px;font-variant-numeric:tabular-nums}
.wcard .kv b.low{color:var(--warn)}.wcard .kv b.out{color:var(--bad)}
.pick3{display:flex;gap:8px;overflow:auto;padding:0 12px;scrollbar-width:none}
.pick3 span{flex:none;min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:18px;border:1px solid var(--line-strong);font-size:13.5px;background:var(--surface)}
.pick3 span.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* 4b Order sheet (grid entry): qty cells you type in, running total bar, keyboard hints */
.sheetgrid td.qty{width:96px;padding:0 6px}
.qtyin{width:100%;height:32px;border:1px solid var(--line-strong);border-radius:6px;text-align:end;padding:0 8px;font:500 14px var(--f-ui);font-variant-numeric:tabular-nums;background:var(--surface)}
.qtyin.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,167,102,.25)}
.qtyin.has{background:#FBF7EC;border-color:var(--gold)}
.stepq{display:none}
@media (max-width:760px){
 .stepq{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;height:44px}
 .stepq button{all:unset;width:44px;height:44px;display:grid;place-items:center;font-size:20px}
 .stepq b{min-width:36px;text-align:center;font-size:16px}
}
.sumbar{position:sticky;bottom:0;display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--ink);color:#FAF8F2;border-radius:0 0 12px 12px}
.sumbar b{font-size:16px}.sumbar .sp{flex:1}.sumbar small{color:#B4AD9F;font-size:12.5px}
.sumbar .btn.primary{background:var(--gold);border-color:var(--gold);color:#141414}

/* 4c Print and labels: settings left, live preview right on a grey "desk", exact paper size */
.printgrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.printgrid{grid-template-columns:1fr}}
.desk{background:#D9D4CA;border-radius:12px;padding:28px;display:grid;place-items:center;min-height:520px;background-image:radial-gradient(#cfc9bd 1px,transparent 1px);background-size:16px 16px}
.a4{width:420px;aspect-ratio:210/297;background:#fff;box-shadow:0 10px 30px rgba(20,20,20,.18);padding:18px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:8px}
.lbl7{border:1px dashed #BDB6A8;border-radius:4px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px}
.lbl7 b{font-size:14px}.lbl7 .bc{height:26px;background:repeating-linear-gradient(90deg,#141414 0 2px,#fff 2px 3px,#141414 3px 4px,#fff 4px 7px,#141414 7px 8px,#fff 8px 9px)}
.lbl7.sold{background:#141414;color:#FAF8F2;border-style:solid;align-items:center;justify-content:center;text-align:center}
.lbl7.sold b{font-family:var(--f-display);font-size:28px;letter-spacing:.14em;color:var(--gold-lt)}
.lbl7.skip{background:repeating-linear-gradient(45deg,#f3f1ec 0 6px,#fff 6px 12px);border-style:dotted;color:var(--text-3);align-items:center;justify-content:center}
.opt{display:flex;gap:8px;flex-wrap:wrap}
.opt .o{flex:1 1 140px;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.opt .o b{display:block;font-size:14px}.opt .o small{color:var(--text-3);font-size:12.5px}
.opt .o.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#FBF9F4}

/* 4d Map + list (run sheet, vehicles, salons near me): list left, map right; phone = map on top, list sheet below */
.maplist{display:grid;grid-template-columns:380px minmax(0,1fr);height:calc(100vh - 230px);min-height:520px;border-top:1px solid var(--line)}
.maplist .ml{overflow:auto;border-inline-end:1px solid var(--line);background:var(--surface)}
.stop{display:grid;grid-template-columns:32px 1fr auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft);align-items:start}
.stop .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--sunken)}
.stop.done .n{background:var(--ok-bg);color:var(--ok)}.stop.now{background:#FBF7EC}.stop.now .n{background:var(--ink);color:var(--gold-lt)}
.stop b{display:block}.stop small{color:var(--text-3);font-size:12.5px}
.mapc{position:relative;overflow:hidden;background:#E7E3D8}
.mapc svg{position:absolute;inset:0;width:100%;height:100%}
.mapc .mtag{position:absolute;inset-inline-start:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text-2)}
.mapc .mctl{position:absolute;inset-inline-end:12px;top:12px;display:grid;gap:6px}
.mapc .mctl button{all:unset;width:36px;height:36px;border-radius:8px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2);font-weight:700}
@media (max-width:760px){.maplist{grid-template-columns:1fr;grid-template-rows:260px auto;height:auto;margin:0 -16px}.maplist .mapc{order:-1}.maplist .ml{border:0;border-radius:16px 16px 0 0;margin-top:-16px;position:relative;box-shadow:0 -6px 18px rgba(20,20,20,.12)}.maplist .ml::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:8px auto 4px}}

/* 4e Upload and import: 4 steps (Choose file > Match columns > Check > Done), never saves before "Import" */
.steps7{display:flex;gap:0;margin:0 0 16px;counter-reset:st}
.steps7 li{list-style:none;flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3);position:relative;padding-inline-end:12px}
.steps7 li::before{counter-increment:st;content:counter(st);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-weight:700;font-size:12.5px;background:var(--surface);flex:none}
.steps7 li::after{content:"";flex:1;height:1px;background:var(--line-strong);margin-inline-start:8px}
.steps7 li:last-child::after{display:none}
.steps7 li.done{color:var(--text-2)}.steps7 li.done::before{content:"✓";background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bg)}
.steps7 li.on{color:var(--text);font-weight:600}.steps7 li.on::before{background:var(--ink);color:var(--gold-lt);border-color:var(--ink)}
@media (max-width:760px){.steps7 li:not(.on) span{display:none}.steps7 li{padding-inline-end:6px}}
.drop{border:2px dashed var(--line-strong);border-radius:14px;padding:28px;text-align:center;background:var(--surface)}
.drop .ill{width:52px;height:52px;border-radius:14px;margin:0 auto 10px;display:grid;place-items:center;background:var(--sunken)}
.drop b{font-size:16px}.drop p{margin:6px 0 12px;color:var(--text-2)}
.filecard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.filecard .ft{width:40px;height:48px;border-radius:6px;background:#E6F0E4;color:var(--ok);display:grid;place-items:center;font:700 12px var(--f-ui)}
.filecard .ft.pdf{background:#F8E3E0;color:var(--bad)}
.match{display:grid;grid-template-columns:1fr 24px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.match .src{font-family:var(--f-mono);font-size:12.5px;background:var(--sunken);border-radius:6px;padding:6px 8px}
.match .sel7{height:36px;border:1px solid var(--line-strong);border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:var(--surface)}
.match .sel7.miss{border-color:var(--warn);background:var(--warn-bg)}
.checksum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.checksum div{border-radius:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--line)}
.checksum b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.checksum small{color:var(--text-3);font-size:12.5px}
.checksum .w b{color:var(--warn)}.checksum .e b{color:var(--bad)}.checksum .o b{color:var(--ok)}
@media (max-width:760px){.checksum{grid-template-columns:1fr 1fr}.match{grid-template-columns:1fr;gap:6px}.match>.i{display:none}}

/* 4f Calendar: month on desktop (week + agenda views), agenda on phone */
.cal7{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.cal7 .dh{padding:8px 10px;font:600 12px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--head);border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal7 .d{min-height:112px;padding:6px 8px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:4px}
.cal7 .d>span:not(.ev){font-size:12.5px;color:var(--text-3);font-weight:600}
.cal7 .d.off{background:#FAF9F6}.cal7 .d.off>span:not(.ev){color:#B4AD9F}
.cal7 .d.today>span:not(.ev){display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--gold-lt)}
.ev{display:block;font-size:12.5px;line-height:1.25;padding:3px 6px;border-radius:5px;background:var(--info-bg);color:var(--info);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-start:0}
.ev.v{background:var(--ok-bg);color:var(--ok)}.ev.t{background:var(--warn-bg);color:var(--warn)}.ev.l{background:var(--idle-bg);color:var(--idle)}.ev.m{background:var(--gold-bg);color:var(--gold-ink)}
.ev.more{background:none;color:var(--text-2);font-weight:600;padding-inline:2px}
.agenda{display:none}
@media (max-width:760px){.cal7{display:none}.agenda{display:block}}
.agenda .day{padding:12px 0 4px;font:600 13px var(--f-ui);color:var(--text-2);display:flex;justify-content:space-between}
.agenda .day.today{color:var(--text)}
.agenda .it{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;min-height:56px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.agenda .it time{font-weight:600;font-variant-numeric:tabular-nums}
.agenda .it b{display:block;font-size:16px}.agenda .it small{color:var(--text-3);font-size:13px}
.agenda .it .bar{width:4px;align-self:stretch;border-radius:2px;display:none}

/* 4g Calculator: inputs left, answer right (big number, how it was worked), "Use in a quote/order" */
.calc7{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
@media (max-width:1100px){.calc7{grid-template-columns:1fr}}
.answer{background:var(--ink);color:#FAF8F2;border-radius:14px;padding:20px;position:sticky;top:16px}
.answer small{color:#B4AD9F;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.answer .big{font-family:var(--f-ui);font-size:40px;font-weight:700;letter-spacing:-.01em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.answer .fill{height:12px;border-radius:6px;background:#2A2721;overflow:hidden;margin:12px 0 6px}
.answer .fill i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lt));border-radius:6px}
.answer dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:16px 0;font-size:13.5px}
.answer dt{color:#B4AD9F}.answer dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}
.answer .btn{width:100%;justify-content:center}
.answer .btn.primary{background:var(--gold);border-color:var(--gold);color:#141414}
.cbox{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cbox .o{border:1px solid var(--line-strong);border-radius:10px;padding:10px;text-align:center;background:var(--surface)}
.cbox .o.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cbox svg{width:100%;height:46px}

/* 4h Inbox / desk (threads): list left, thread right; phone = list, thread opens full screen */
.inbox7{display:grid;grid-template-columns:400px minmax(0,1fr);height:calc(100vh - 230px);min-height:540px;border-top:1px solid var(--line)}
.inbox7 .tl{overflow:auto;border-inline-end:1px solid var(--line);background:var(--surface)}
.th7{display:grid;grid-template-columns:36px 1fr auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.th7 .av7{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-ui);color:#fff}
.th7 b{display:block;font-size:14px}.th7 p{margin:2px 0 0;color:var(--text-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th7 time{font-size:12px;color:var(--text-3)}
.th7.on{background:#FBF7EC;box-shadow:inset 3px 0 0 var(--gold)}
.th7.unread b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-inline-start:6px;vertical-align:middle}
.thread{display:flex;flex-direction:column;background:var(--canvas);min-width:0}
.thread .hd{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;gap:12px;align-items:center}
.thread .bd{flex:1;overflow:auto;padding:18px;display:grid;gap:12px;align-content:start}
.post{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:720px}
.post.sys{background:none;border:0;padding:0 4px;color:var(--text-3);font-size:13px;display:flex;gap:6px;align-items:center}
.post header{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}.post header time{font-size:12px;color:var(--text-3)}
.post.me{justify-self:end;background:#FBF7EC;border-color:#EBDDB8}
.thread .ft{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface);display:flex;gap:8px}
.thread .ft .in{flex:1;height:44px;border:1px solid var(--line-strong);border-radius:10px;display:flex;align-items:center;padding:0 12px;color:var(--text-3)}
@media (max-width:760px){.inbox7{grid-template-columns:1fr;height:auto;margin:0 -16px}.inbox7 .thread{display:none}.th7{min-height:64px}}

/* 4i Settings / switches list (email notifications uses it) */
.setlist{display:grid}
.setrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) 120px 56px;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.setrow:hover{background:var(--hover)}
.setrow .nm b{display:block;font-size:14px}.setrow .nm small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.setrow .who7{display:flex;gap:6px;flex-wrap:wrap}
.gchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:var(--sunken);font-size:12.5px;font-weight:500;color:var(--text)}
.gchip.p{background:#fff;border:1px solid var(--line-strong)}
.gchip.add{background:none;border:1px dashed var(--line-strong);color:var(--text-2)}
.gchip .i{width:13px;height:13px}
.gchip.lockd{background:var(--ink);color:var(--gold-lt)}
.setrow .stat{font-size:12.5px;color:var(--text-3);line-height:1.35}
.setrow .stat b{color:var(--text-2);font-weight:600}
.setrow.off .nm b,.setrow.off .who7{opacity:.5}
.mrisk{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:2px 8px;margin-inline-start:6px;vertical-align:middle}
.mrisk.r{color:var(--bad);background:var(--bad-bg)}
.mrisk.m{color:var(--gold-ink);background:var(--gold-bg)}
.setgrp{padding:14px 16px 8px;display:flex;align-items:center;gap:10px;font:600 13px var(--f-ui);color:var(--text-2);background:var(--canvas);border-bottom:1px solid var(--line)}
.setgrp .ct{font-weight:500;color:var(--text-3)}
.setgrp .sp{flex:1}
.tog7{width:44px;height:26px;border-radius:13px;background:#CFC8BA;position:relative;display:inline-block;flex:none}
.tog7::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start 160ms ease}
.tog7.on{background:var(--ok)}.tog7.on::after{inset-inline-start:21px}
.tog7.lk{background:var(--ink)}.tog7.lk::after{background:var(--gold-lt)}
@media (max-width:760px){.setrow{grid-template-columns:1fr 52px;gap:8px 12px;padding:14px 16px}.setrow .who7{grid-column:1/-1;order:3}.setrow .stat{grid-column:1/-1;order:4}.tog7{width:52px;height:32px;border-radius:16px}.tog7::after{width:26px;height:26px}.tog7.on::after{inset-inline-start:23px}}
.groupsbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gcard{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:44px}
.gcard b{font-size:13.5px}.gcard small{color:var(--text-3);font-size:12.5px}
.avs{display:flex}.avs span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-ui);color:#fff;border:2px solid var(--surface);margin-inline-start:-6px}.avs span:first-child{margin-inline-start:0}
.drawer.edit7{width:440px}
.logline{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.logline time{color:var(--text-3)}

/* ---------- 5. LOADING SCREENS side by side ---------- */
.loaders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.loaders{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.loaders{grid-template-columns:1fr}}
.ld{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.ld .stage{height:300px;position:relative;display:grid;place-items:center;overflow:hidden}
.ld .meta{padding:12px 14px;border-top:1px solid var(--line);display:grid;gap:6px}
.ld .meta b{font-size:15px}
.ld .meta p{margin:0;font-size:13px;color:var(--text-2)}
.ld .verdict{display:flex;gap:6px;flex-wrap:wrap}
.ld .pickbar{display:flex;gap:8px;padding:0 14px 14px}
.ld .pickbar .btn{flex:1;justify-content:center}
.ld.win{outline:2px solid var(--gold);outline-offset:-1px}
.ld .tagw{position:absolute;top:10px;inset-inline-start:10px;background:var(--gold);color:#141414;font:700 12px var(--f-ui);padding:3px 8px;border-radius:6px;z-index:2}
/* neon */
.st-neon{background:#07080B}
.neon{font:700 22px/1.2 var(--f-ui);color:#E9F7FF;text-shadow:0 0 6px #39C6FF,0 0 16px #39C6FF,0 0 32px #0E7BFF;letter-spacing:.04em;text-align:center}
.neon small{display:block;font:500 13px var(--f-ui);color:#9BDFFF;text-shadow:0 0 8px #0E7BFF;margin-top:10px;letter-spacing:.08em}
/* helix */
.st-helix{background:#141414}
.helix{display:flex;gap:9px;align-items:center;height:120px}
.helix i{width:10px;height:10px;border-radius:50%;background:var(--gold);animation:hx 1.4s ease-in-out infinite}
.helix i:nth-child(even){background:var(--gold-lt)}
@keyframes hx{0%,100%{transform:translateY(-34px) scale(.7);opacity:.6}50%{transform:translateY(34px) scale(1.1);opacity:1}}
/* bezel */
.st-bezel{background:radial-gradient(circle at 50% 40%,#23201B,#141414 70%)}
.bezel{width:170px;height:170px;position:relative}
.bezel svg{width:100%;height:100%}
.bezel .cap{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#FAF8F2;font-family:var(--f-display);font-size:24px;letter-spacing:.08em}
.bezel .cap small{display:block;font:500 12px var(--f-ui);color:#B4AD9F;letter-spacing:.04em;margin-top:4px}
/* skeleton */
.st-skel{background:var(--canvas);place-items:stretch;padding:16px}
.skel7{display:grid;gap:10px;align-content:start}
.sk7{border-radius:8px;background:linear-gradient(90deg,#E9E5DC 0%,#F4F1EA 40%,#E9E5DC 80%);background-size:300% 100%;animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.sk7,.helix i{animation:none}}
.rules7{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.rules7 div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px}
.rules7 b{display:block;margin-bottom:4px}
@media (max-width:760px){.rules7{grid-template-columns:1fr}}

/* ---------- 6. ASK CLAUDE (bubble + drawer, attachments, proposed allocation card) ---------- */
.askfab{position:fixed;inset-inline-end:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:26px;background:var(--ink);color:#FAF8F2;font-weight:600;box-shadow:0 10px 30px rgba(20,20,20,.3),inset 0 0 0 1px #2A2721}
.askfab .i{color:var(--gold-lt)}
.askd{position:fixed;inset-block:calc(var(--top-h) + 16px) 16px;inset-inline-end:16px;width:440px;z-index:45;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.askd>header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink);color:#FAF8F2}
.askd>header .ic{width:34px;height:34px;border-radius:10px;background:rgba(198,167,102,.16);display:grid;place-items:center;color:var(--gold-lt);box-shadow:inset 0 0 0 1px rgba(198,167,102,.35)}
.askd>header b{display:block}.askd>header small{display:block;color:#B4AD9F;font-size:12px}
.askd>header .iconbtn{color:#CFC9BD;margin-inline-start:auto}
.askd .scope{display:flex;gap:6px;align-items:center;padding:8px 14px;background:#FBF7EC;border-bottom:1px solid #EBDDB8;font-size:12.5px;color:var(--gold-ink)}
.askd .bd{flex:1;overflow:auto;padding:14px;display:grid;gap:12px;align-content:start;background:var(--canvas)}
.bub{max-width:88%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.45}
.bub.me{justify-self:end;background:var(--ink);color:#FAF8F2;border-end-end-radius:4px}
.bub.ai{background:var(--surface);border:1px solid var(--line);border-end-start-radius:4px}
.att{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.08);margin-top:8px}
.bub.ai .att{background:var(--sunken)}
.att .ft{width:32px;height:38px;border-radius:5px;background:#F8E3E0;color:var(--bad);display:grid;place-items:center;font:700 12px var(--f-ui);flex:none}
.att b{display:block;font-size:13px}.att small{display:block;font-size:12px;opacity:.75}
.read7{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:8px 0 0;padding:8px 10px;background:var(--sunken);border-radius:8px}
.read7 dt{color:var(--text-3)}.read7 dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.propose{border:1px solid var(--ink);border-radius:14px;background:var(--surface);overflow:hidden;box-shadow:0 6px 18px rgba(20,20,20,.08)}
.propose>header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--ink);color:#FAF8F2;font-size:13px}
.propose>header .i{color:var(--gold-lt)}
.propose>header .exp{margin-inline-start:auto;color:#B4AD9F;font-size:12px}
.propose .bdy{padding:12px}
.propose .bav{display:grid;grid-template-columns:64px 1fr;gap:6px 10px;font-size:13.5px}
.propose .bav dt{color:var(--text-3);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.propose .bav dd{margin:0}
.propose .split{display:grid;gap:6px;margin-top:4px}
.propose .split div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:var(--sunken)}
.propose .split div.to b{color:var(--ok)}
.propose .split div.left{background:var(--warn-bg);color:var(--warn)}
.propose .chk{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ok);margin-top:10px}
.propose footer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--head)}
.propose footer .btn{flex:1;justify-content:center}
.propose footer .btn.primary{flex:1.4}
.askd .ft7{padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.askin7{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line-strong);border-radius:14px;padding:6px 6px 6px 12px;min-height:48px;background:var(--surface)}
.askin7 span{flex:1;color:var(--text-3);padding:8px 0;font-size:14px}
.askin7 .iconbtn{width:36px;height:36px}
.askin7 .send{width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--gold-lt);display:grid;place-items:center}
.askd .fine{font-size:12px;color:var(--text-3);margin-top:6px;display:flex;justify-content:space-between}
.dropveil{position:absolute;inset:0;background:rgba(20,20,20,.72);display:grid;place-items:center;color:#FAF8F2;z-index:3;border-radius:16px}
.dropveil div{border:2px dashed var(--gold);border-radius:14px;padding:26px 30px;text-align:center}
@media (max-width:760px){
 .askfab{bottom:calc(84px + var(--sab));inset-inline-end:16px;height:48px;padding:0 16px 0 12px}
 .askd{inset:calc(var(--sat)) 0 0 0;width:auto;border-radius:0;border:0}
 .askd>header{padding-top:calc(12px + var(--sat))}
 .bub{font-size:16px}.propose .bav{font-size:15px}
 .propose footer .btn{min-height:48px}
 .askd .ft7{padding-bottom:calc(10px + var(--sab))}
}

/* ---------- 7. RAPPLE LOGISTICS OS: skin (navy + steel from the RL logo) ---------- */
:root[data-brand="rl"]{
  --ink:#121A26; --ink-2:#22324A; --gold:#58A6E8; --gold-lt:#A9CFF3; --gold-ink:#1D5E9E; --cream:#F7F9FB;
  --canvas:#F2F4F7; --sunken:#E8ECF1; --line:#DCE2EA; --line-strong:#C3CCD8; --line-soft:#E9EDF2;
  --text:#121A26; --text-2:#4A5668; --text-3:#5E6B7E;
  --side-bg:#0F1621; --side-text:#C9D2DE; --side-muted:#8494A9; --side-hover:#18212F; --side-active:#22324A;
  --head:#F7F9FB; --hover:#F5F8FB; --sel:#E9F2FB; --tab-hover:#DDE4EC; --gold-bg:#E3EFFA;
  --primary:#121A26; --primary-2:#22324A; --chart:#C9D2DE; --chart-cur:#121A26;
  --stone:#E6EAF0; --panel-head:#F7F9FB; --charcoal-2:#16202E; --gold-glow:rgba(88,166,232,.18); --focus:#58A6E8;
}
:root[data-brand="rl"] .osl-r{background:linear-gradient(100deg,#8494A9 0%,#E3E8EF 35%,#C9D2DE 50%,#E3E8EF 65%,#8494A9 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
:root[data-brand="rl"] .oslogo::after{background:linear-gradient(90deg,rgba(88,166,232,0),#58A6E8 18%,#A9CFF3 50%,#58A6E8 82%,rgba(88,166,232,0))}
:root[data-brand="rl"] .osl-os{text-shadow:0 0 18px rgba(88,166,232,.25)}
:root[data-brand="rl"]:not([data-theme="dark"]) .rtabs{background:var(--charcoal-2);border-bottom-color:#0F1621}
:root[data-brand="rl"]:not([data-theme="dark"]) .rtab:hover{background:#22324A}
:root[data-brand="rl"] .mtop{background:#0F1621}
:root[data-brand="rl"] .qa7 a{background:linear-gradient(160deg,#1B2636,#0F1621);border-color:#22324A}
:root[data-brand="rl"] .qa7 a .ic{background:rgba(88,166,232,.14);box-shadow:inset 0 0 0 1px rgba(88,166,232,.35);color:#A9CFF3}
:root[data-brand="rl"] .qa7 a small{color:#93A3B8}
:root[data-brand="rl"] .bysl2 span{color:#C9D2DE}
:root[data-brand="rl"] .answer,:root[data-brand="rl"] .sumbar{background:var(--ink)}
:root[data-brand="rl"] .btn.primary{background:var(--ink);border-color:var(--ink)}
:root[data-brand="rl"] :focus-visible{outline-color:#58A6E8}
:root[data-brand="rl"] .th7.on{background:#EEF5FC}
:root[data-brand="rl"] .stop.now{background:#EEF5FC}

/* RL parts */
.modechip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;background:var(--sunken);font:600 12px var(--f-ui);color:var(--text-2);white-space:nowrap}
.modechip .i{width:14px;height:14px}
.cust{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font:600 12px var(--f-ui);white-space:nowrap}
.cust::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cust.wait{background:var(--idle-bg);color:var(--idle)}.cust.ok{background:var(--ok-bg);color:var(--ok)}.cust.hold{background:var(--bad-bg);color:var(--bad)}.cust.needs{background:var(--warn-bg);color:var(--warn)}
/* milestone track (horizontal on desktop, vertical on phone) */
.mtrack{display:flex;align-items:flex-start;gap:0;padding:6px 0 2px}
.mtrack li{list-style:none;flex:1;position:relative;text-align:center;font-size:12.5px;color:var(--text-3);padding-top:26px;min-width:0}
.mtrack li::before{content:"";position:absolute;top:6px;inset-inline-start:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);z-index:1}
.mtrack li::after{content:"";position:absolute;top:12px;inset-inline-start:50%;width:100%;height:2px;background:var(--line-strong)}
.mtrack li:last-child::after{display:none}
.mtrack li.done{color:var(--text-2)}.mtrack li.done::before{background:var(--ok);border-color:var(--ok)}.mtrack li.done::after{background:var(--ok)}
.mtrack li.now{color:var(--text);font-weight:600}.mtrack li.now::before{width:18px;height:18px;top:4px;background:var(--ink);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-bg)}
.mtrack li.hold::before{background:var(--bad);border-color:var(--bad)}.mtrack li.hold{color:var(--bad);font-weight:600}
.mtrack li time{display:block;font-weight:400;color:var(--text-3);font-size:12px;margin-top:2px}
.mtrack li span{display:block;padding:0 4px;overflow-wrap:anywhere}
.minitrack{display:inline-flex;gap:3px;vertical-align:middle}
.minitrack i{width:14px;height:6px;border-radius:3px;background:var(--line-strong)}
.minitrack i.d{background:var(--ok)}.minitrack i.n{background:var(--ink);box-shadow:0 0 0 2px var(--gold-bg)}.minitrack i.h{background:var(--bad)}
@media (max-width:760px){
 .mtrack{flex-direction:column;gap:0;padding:0}
 .mtrack li{text-align:start;padding:0 0 16px 34px;font-size:15px}
 .mtrack li::before{top:2px;inset-inline-start:4px;transform:none}
 .mtrack li.now::before{inset-inline-start:2px;top:0}
 .mtrack li::after{top:18px;inset-inline-start:10px;width:2px;height:100%}
 .mtrack li time{display:inline;margin-inline-start:8px;font-size:13px}
}
.doclist{display:grid}
.docrow{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.docrow .st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.docrow .st.y{background:var(--ok-bg);color:var(--ok)}.docrow .st.n{background:var(--warn-bg);color:var(--warn)}.docrow .st.i{background:var(--sunken);color:var(--text-3)}
.docrow .st .i{width:14px;height:14px}
.docrow small{display:block;color:var(--text-3);font-size:12px}
.intonly{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--f-ui);color:var(--text-2);background:var(--sunken);border-radius:6px;padding:2px 6px}
.needbox{border:1px solid #EBC98A;background:var(--warn-bg);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.needbox .i{color:var(--warn);flex:none;margin-top:2px}
.needbox b{display:block;color:var(--warn)}
.needbox p{margin:2px 0 0;font-size:13.5px;color:#5E4A1A}
.holdbox{border-color:#E7B7B1;background:var(--bad-bg)}.holdbox .i,.holdbox b{color:var(--bad)}.holdbox p{color:#5A2320}
.vesselbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.vesselbar div{padding:12px 14px;border-inline-end:1px solid var(--line-soft)}
.vesselbar div:last-child{border:0}
.vesselbar small{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.vesselbar b{display:block;font-size:15px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.vesselbar{grid-template-columns:1fr 1fr}.vesselbar div{border-bottom:1px solid var(--line-soft)}}
.lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.lane{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden}
.lane small{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;display:block}
.lane b{font-size:26px;display:block;margin:2px 0}
.lane span{font-size:12.5px;color:var(--text-2)}
.lane.hot{border-color:#E7B7B1;background:linear-gradient(180deg,#FFF 0%,#FDF4F3 100%)}.lane.hot b{color:var(--bad)}
.lane .i.bg{position:absolute;inset-inline-end:10px;top:10px;width:22px;height:22px;color:var(--line-strong)}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.lanes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:128px;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}.lane{padding:10px 12px}.lane small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lane b{font-size:24px}.lane span{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.hs{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em}
.hsbig{font-family:var(--f-mono);font-size:28px;font-weight:500;letter-spacing:.04em}
.hspath{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--text-2)}
.hspath .i{width:12px;height:12px;color:var(--text-3)}
.dutybox{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dutybox div{background:var(--sunken);border-radius:10px;padding:10px 12px}
.dutybox small{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.dutybox b{font-size:20px}
@media (max-width:760px){.dutybox{grid-template-columns:1fr 1fr}}
.searchhero{display:flex;align-items:center;gap:10px;height:56px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);padding:0 16px;font-size:16px;box-shadow:0 1px 2px rgba(18,26,38,.05)}
.searchhero .i{width:20px;height:20px;color:var(--text-3)}
.searchhero .caret{width:2px;height:22px;background:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.searchhero .kbd{margin-inline-start:auto}
.hsres{display:grid;grid-template-columns:140px 1fr 90px 110px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.hsres:hover{background:var(--hover)}
.hsres.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--gold)}
.hsres small{display:block;color:var(--text-3);font-size:12.5px}
@media (max-width:760px){.hsres{grid-template-columns:1fr auto;gap:4px 10px;padding:12px}.hsres>div:nth-child(2){grid-column:1/-1;order:3}}
.segtabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--sunken);width:max-content;max-width:100%;overflow:auto}
.segtabs a{min-height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:7px;font-size:13.5px;color:var(--text-2);text-decoration:none;white-space:nowrap}
.segtabs a.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(18,26,38,.1)}
@media (max-width:760px){.segtabs a{min-height:40px}}
.person{display:flex;align-items:center;gap:10px}
.person .av7{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--f-ui);color:#fff;flex:none}
.person b{display:block}.person small{display:block;color:var(--text-3);font-size:12.5px}
.nomoney{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text-3);padding:8px 12px;border:1px dashed var(--line-strong);border-radius:10px}
.nomoney .i{width:14px;height:14px}
.rlhero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}
@media (max-width:1100px){.rlhero{grid-template-columns:1fr}}
.shipcard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.shipcard:hover{background:var(--hover)}
.shipcard .ic7{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sunken);color:var(--text-2)}
.shipcard b{display:block}.shipcard small{display:block;color:var(--text-3);font-size:12.5px}
.shipcard .r{text-align:end;display:grid;gap:4px;justify-items:end}
.formsec{padding:16px;border-bottom:1px solid var(--line)}
.formsec h3{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px}
.formsec h3 .n7{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold-lt);font-size:12px}
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.fgrid .field{grid-column:span 4}.fgrid .field.w6{grid-column:span 6}.fgrid .field.w3{grid-column:span 3}.fgrid .field.w12{grid-column:span 12}.fgrid .field.w8{grid-column:span 8}
@media (max-width:760px){.fgrid .field,.fgrid .field.w6,.fgrid .field.w3,.fgrid .field.w8{grid-column:span 12}}
.fake{height:40px;border:1px solid var(--line-strong);border-radius:8px;display:flex;align-items:center;padding:0 12px;background:var(--surface);font-size:14px;gap:8px}
.fake.ro{background:var(--sunken);border-color:var(--line)}
.fake.sel::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-inline-end:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translateY(-3px)}
.fake.big{height:auto;min-height:84px;align-items:flex-start;padding:10px 12px;line-height:1.45;color:var(--text-2)}
.fake .hint{margin-inline-start:auto;font-size:12.5px;color:var(--text-3)}
@media (max-width:760px){.fake{height:48px;font-size:16px}}
.flabel{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.fhelp{font-size:12.5px;color:var(--text-3);margin-top:4px}
.chargeline{display:grid;grid-template-columns:1fr 110px 130px 36px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
@media (max-width:760px){.chargeline{grid-template-columns:1fr auto;}.chargeline>:nth-child(2){display:none}}

/* shared "needs you" row (Home, record side columns) */
.todo7{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.todo7:last-child{border-bottom:0}
.todo7 b{display:block;font-size:14px}.todo7 small{display:block;color:var(--text-3);font-size:12.5px;margin-top:1px}
.todo7 .btn{flex:none}
@media (max-width:760px){.todo7{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}.todo7>.chip,.todo7>.cust,.todo7>.btn{justify-self:start}.todo7>.btn{min-height:44px}.todo7 b{font-size:16px}.todo7 small{font-size:14px}}
.hello7{font:400 30px/1.15 var(--f-display);margin:0}
@media (max-width:760px){.hello7{font-size:25px}}
.sectl{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.sectl h2{margin:0;font:600 15px var(--f-ui)}.sectl .sp{flex:1}

/* round-1 fixes after screenshots */
:root[data-brand="rl"][data-depth="stone"]:not([data-theme="dark"]){--canvas:#E6EAF0;--sunken:#DDE3EA}
.filecard>div{min-width:0}.filecard small{display:block}
.dutybox.two,.panel .dutybox{grid-template-columns:1fr 1fr}
@media (max-width:760px){
 .hsres{grid-template-columns:1fr auto;gap:4px 10px}.hsres>div:nth-child(2){grid-column:1/-1;order:3}.hsres>div:nth-child(4){display:none}
 .needbox{flex-wrap:wrap}.needbox>.btn{margin-inline-start:30px!important;min-height:44px}
 .shipcard{grid-template-columns:40px minmax(0,1fr);padding:14px 16px}.shipcard .r{grid-column:2;justify-items:start;text-align:start;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
 .savebar .m-hide{display:none}.savebar .btn{min-height:48px}.savebar .btn.primary{flex:1;justify-content:center}
}
.setgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.setnav{padding:8px;display:grid;gap:2px}
.setrow.team{grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) 110px}
@media (max-width:760px){
 .setgrid{grid-template-columns:1fr}
 .setnav{display:flex;overflow-x:auto;padding:4px;gap:4px;scrollbar-width:none;margin-inline:-16px;border-radius:0;border-inline:0}
 .setnav a{flex:none;min-height:44px}
 .setrow.team{grid-template-columns:1fr}
}
@media (max-width:760px){.groupsbar{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}.gcard{flex:none}}
.propose .bav{display:grid;grid-template-columns:64px 1fr;gap:6px 10px;font-size:13.5px;margin:0}
.propose .bav dt{color:var(--text-3);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.propose .bav dd{margin:0}
@media (max-width:760px){.propose .bav{font-size:15px}}
.st-skel{background:var(--surface)!important}
.st-skel .sk7{background:linear-gradient(90deg,#E4DFD5 0%,#F1EDE6 40%,#E4DFD5 80%);background-size:300% 100%}
.ld .verdict .chip{white-space:normal;max-width:none;height:auto;min-height:22px;line-height:1.3;padding-block:3px}
.bezel .cap{font-size:22px}.bezel .cap small{font-size:12px;max-width:96px;margin:4px auto 0;line-height:1.25}

/* round-2 fixes */
.stop small{display:block}
.printgrid>*,.calc7>*,.pgrid>*,.recgrid>*{min-width:0}
.a4{width:min(420px,100%)}
@media (max-width:760px){
 .sumbar{flex-wrap:wrap;gap:10px;border-radius:0;margin:0 -1px}.sumbar .sp{display:none}.sumbar>span:first-child{flex:1 1 100%}.sumbar .btn{flex:1;justify-content:center;min-height:48px}
 .desk{padding:12px;min-height:0}
 .opt .o{flex:1 1 40%}
 .calc7 .answer{order:-1;position:static}
 .calc7 .sheetgrid th:nth-child(1),.calc7 .sheetgrid td:nth-child(1),.calc7 .sheetgrid th:nth-child(4),.calc7 .sheetgrid td:nth-child(4){display:none}
 .calc7 .panel .tbl{display:table!important}
}
@media (max-width:760px){.sumbar{position:sticky;bottom:calc(68px + var(--sab));z-index:6}}
.a4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}.lbl7{min-width:0;overflow:hidden}
@media (max-width:760px){.a4{padding:10px;gap:6px}.lbl7{padding:6px;font-size:12px}.lbl7 b{font-size:12.5px}.lbl7.sold b{font-size:18px}.lbl7 .mono{font-size:12px!important;white-space:normal}}
.home7{display:flex;flex-direction:column;gap:0}
.home7 .o3{order:1}.home7 .o1{order:2}.home7 .o2{order:3}
@media (max-width:760px){.home7 .o1{order:1}.home7 .o2{order:2}.home7 .o3{order:3;margin-top:16px}}
@media (max-width:760px){#badges{grid-template-columns:1fr 1fr!important}}
@media (max-width:760px){#oA,#oB,#oC{grid-template-columns:1fr!important}}
.pgrid.e7{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1100px){.pgrid.e7{grid-template-columns:1fr}}
.askd .bd{display:flex;flex-direction:column;align-items:stretch}
.askd .bd>*{flex:none}
.askd .bd>.bub.me{align-self:flex-end}.askd .bd>.bub.ai{align-self:flex-start}.askd .bd>.post.sys{align-self:center}
.propose .split b{white-space:nowrap}
.propose .split div span{min-width:0}
.askin7 .send{flex:0 0 36px;padding:0}
.askd .fine{flex-wrap:wrap;gap:4px 12px}
/* contrast on the darker "stone" page (AA 4.5:1 checked) */
:root[data-depth="stone"]:not([data-theme="dark"]){--text-3:#625D53;--gold-ink:#76592A}
:root[data-brand="rl"][data-depth="stone"]:not([data-theme="dark"]){--text-3:#56637A}
/* RL quote total (Leon, 26 Sept: show the client's quote total; costs and profit stay on CFO) */
.qtotal{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:14px}
.qtotal>div{border-radius:12px;padding:12px 14px;background:var(--sunken)}
.qtotal>div:first-child{background:var(--ink);color:#F7F9FB}
.qtotal small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.qtotal b{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin:2px 0}
.qtotal span{font-size:12.5px;opacity:.85}
@media (max-width:760px){.qtotal{grid-template-columns:1fr}}
@media (max-width:760px){.chargeline{grid-template-columns:minmax(0,1fr) 44px}.chargeline>:nth-child(3){display:none}.chargeline .iconbtn{width:44px!important;height:44px!important}}

/* ===== Rapple Logistics OS: server-rendered pieces (links instead of buttons, forms, no inline styles) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.os{margin:0;background:var(--side-bg);font:400 14px/1.45 var(--f-ui);color:var(--text)}
body.os a{color:var(--gold-ink)}
body.os .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.os .side .brand{justify-content:center;padding:18px 12px 10px;min-height:64px}
.os .side .lockwrap{display:block}
.os .side .brand img.lockup{height:84px;width:auto;margin:0 auto}
.os .side .brand .mono-mark{display:none}
.os .app.collapsed .side .brand .mono-mark{display:grid}
.os .side .grp>a.grpbtn{text-decoration:none}
.os .side .grp>a.grpbtn .ct{margin-inline-start:auto;min-width:20px;height:20px;border-radius:10px;background:#58A6E8;color:#0F1621;font:700 12px/20px var(--f-ui);text-align:center;padding:0 6px}
.os .side .grp>a.grpbtn .chev{margin-inline-start:auto;width:14px;height:14px;color:var(--side-muted)}
.os .side .grp li a{text-decoration:none}
.os .side .sideout{margin:0}
.os .side .sideout .foot{width:100%}
.os .side .sideout .foot:hover{color:#fff}
.os .top .search{flex:0 1 560px}
.os .top .search input{all:unset;flex:1;min-width:0;font:400 14px var(--f-ui);color:var(--text)}
.os .top .search input::placeholder{color:var(--text-3)}
.os .top .search:focus-within{border-color:var(--gold);background:var(--surface)}
.os .top .sp{flex:1}
.os .top a.iconbtn,.os .top a.user{text-decoration:none;color:var(--text-2)}
.os .top a.user b{display:block;color:var(--text);font-size:13px}.os .top a.user small{display:block;color:var(--text-3);font-size:12px}
.os .top .ideabtn{text-decoration:none;color:var(--text)}
.os .rtabs .rtab{padding:0 4px 0 0}
.os .rtabs .rtab>a{display:flex;align-items:center;gap:8px;height:100%;padding:0 6px 0 12px;color:inherit;text-decoration:none;min-width:0}
.os .rtabs .rtab>a span:last-child{overflow:hidden;text-overflow:ellipsis}
.os .mtop .mlogo{text-decoration:none}
.os .mtop .iconbtn{color:#E3E8EF;text-decoration:none}
.os .mtop .iconbtn .dot,.os .top .iconbtn .dot{position:absolute;top:4px;right:4px}
.os .mtop .mav{width:36px;height:36px;margin:0 4px 0 2px;background:#22324A;color:#A9CFF3;text-decoration:none}
.os .msearch input{all:unset;flex:1;min-width:0;font:400 16px var(--f-ui);color:var(--text)}
.os .bnav a{text-decoration:none;position:relative}
.os .bnav .bdot{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font:700 12px/18px var(--f-ui);text-align:center;padding:0 5px}
.os .fab a.btn{flex:1;height:52px;text-decoration:none;color:#fff;font-size:16px}
.os .page{padding-bottom:64px}
.os .btn{text-decoration:none}
.os .btn.primary,.os a.btn.primary{color:var(--on-primary)}
.os a.btn:not(.primary){color:var(--text)}
.os .btn.full{width:100%;justify-content:center}
.os .btn[aria-disabled="true"],.os .btn[disabled]{opacity:.45;pointer-events:none}
.os h1.hello7{font:400 30px/1.15 var(--f-display)}
.os .phead .sub .bad{color:var(--bad)}
.os .osflash{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin:0 0 14px;font-size:14px;background:var(--ok-bg);color:var(--ok);border:1px solid #BFD9C3}
.os .osflash.err{background:var(--bad-bg);color:var(--bad);border-color:#E7B7B1}
.os .osflash.undo form{margin-inline-start:auto}
.os .emptyact{margin-top:14px}
.os .panel>header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.os .panel>header h3{margin:0;font:600 14px var(--f-ui)}
.os .panel>header .hct{color:var(--text-3);font-size:13px}
.os .panel>header .hlink,.os .panel>header .hct:last-child,.os .panel>header>.chip:last-child,.os .panel>header>.cust:last-child{margin-inline-start:auto}
.os .panel>header .hlink{font-size:13.5px;text-decoration:none}
.os .panel .body{padding:14px 16px}
.os .panelbody{padding:14px 16px}
.os .panelfoot{padding:10px 16px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-3)}
.os .panel .nomoney{margin:12px 16px 14px}
.os .body .nomoney{margin:12px 0 0}
.os .colstack{display:flex;flex-direction:column;gap:16px;min-width:0}
.os .homegrid{margin-top:16px}
.os a.lane{text-decoration:none;color:var(--text);transition:border-color 140ms ease,transform 140ms cubic-bezier(.23,1,.32,1)}
.os a.lane:hover{border-color:var(--gold);transform:translateY(-1px)}
.os a.lane b{color:var(--text)}.os a.lane.hot b{color:var(--bad)}
.os .todo7 .chip,.os .todo7 .cust{justify-self:start}
.os a.shipcard{text-decoration:none;color:var(--text)}
.os a.shipcard.dim{opacity:.75}
.os .shipcard .r b.num{font-variant-numeric:tabular-nums}
.os .tbl td.acts{text-align:end;white-space:nowrap}
.os .tbl .mt3{margin-top:3px}
.os .stackv{display:grid;gap:4px}
.os .tbl a{text-decoration:none}
.os .tbl .who{font-weight:600}
.os .toolbar .sp{flex:1}
.os .toolbar a.filter{text-decoration:none}
.os .toolbar a.filter b{font-weight:700;color:inherit}
.os form.minisearch{margin:0}
.os form.minisearch input{all:unset;flex:1;min-width:0;font:400 13px var(--f-ui);color:var(--text)}
.os .tfoot{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-3)}
.os .tfoot .pager{margin-inline-start:auto;display:flex;gap:6px}
.os a.mcard{text-decoration:none;color:var(--text)}
.os .mcard.shipm,.os .mcard.qcard{display:grid;grid-template-columns:1fr;gap:10px}
.os .mcard .mrow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.os .mcard .mrow2,.os .mcard .mrow3{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.os .mcard .mrow2{justify-content:flex-start}
.os .mt6{margin-top:0}
.os .person{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.os .person .grow,.os .grow{flex:1;min-width:0}
.os .person b{display:block}.os .person small{display:block;color:var(--text-3);font-size:12.5px}
.os .av7{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 12.5px var(--f-ui);color:#fff;flex:none;background:#22324A}
.os .av7.avc0{background:#6B4E2E}.os .av7.avc1{background:#2F5575}.os .av7.avc2{background:#7A3B4B}.os .av7.avc3{background:#3F6B4A}.os .av7.avc4{background:#4A463E}.os .av7.avc5{background:#5B4A7A}.os .av7.avc6{background:#22324A}
.os .rechead .titlerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.os .rechead .meta{gap:6px 14px}
.os .rechead .meta>*+*::before{content:"·";margin-inline-end:14px;color:var(--text-3)}
.os .rechead .meta>*{white-space:nowrap}
.os .rechead .meta{flex-wrap:wrap}
.os .rechead .meta a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.os .trackpanel{padding:14px 16px 10px;margin-bottom:16px}
.os .mtrack{margin:0;padding:0}
.os .vesselbar{margin-bottom:16px}
.os .vesselbar b.mono{font-size:14px}
.os .ptabs a{text-decoration:none}
.os .msect2{margin:0 0 10px;font:600 14px var(--f-ui)}
.os .docrow .rowacts,.os .rowacts{display:flex;gap:6px;align-items:center}
.os .rowacts form{margin:0}
.os .docrow.two{grid-template-columns:28px 1fr}
.os .docrow>span:empty{display:none}
.os .needbox{margin:0 0 12px}
.os .needbox.mx{margin:12px 16px 4px;align-items:center}
.os .needbox>.btn{margin-inline-start:auto;flex:none}
.os .upbox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;gap:12px}
.os .file.drop{display:flex;align-items:center;justify-content:center;border:2px dashed var(--line-strong);border-radius:12px;min-height:64px;cursor:pointer;background:var(--surface);color:var(--text-2);font-weight:600}
.os .file.drop span{display:flex;gap:8px;align-items:center}
.os .file.drop input{position:absolute;opacity:0;width:1px;height:1px}
.os .file.drop.has{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.os .formrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.os .formrow>.btn:last-child,.os .formrow>button:last-child{margin-inline-start:auto}
.os .formrow>select{height:36px;border:1px solid var(--line-strong);border-radius:var(--r);padding:0 10px;font:400 14px var(--f-ui);background:var(--surface)}
.os .fhelp{font-size:12.5px;color:var(--text-3);margin:6px 0 0}
.os .fhelp.tight{margin:0 0 10px}
.os a.fhelp{display:inline-block;text-decoration:none;color:var(--gold-ink)}
.os .tick{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);cursor:pointer;min-height:36px}
.os .tick input{width:18px;height:18px;accent-color:var(--ink)}
.os .tick.sm{font-size:13px;min-height:30px}
.os .osdetails{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px}
.os .osdetails.pad{margin:0;border:0;padding:12px 16px}
.os .osdetails summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold-ink);min-height:36px;list-style:none}
.os .osdetails summary::-webkit-details-marker{display:none}
.os .osdetails[open] summary{margin-bottom:10px}
.os .subform{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.os .subform h4{margin:0 0 10px;font:600 13.5px var(--f-ui)}
.os .stagepick{border:0;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.os .stagepick legend{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:8px;padding:0}
.os .stagepick .stg{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);cursor:pointer;font-size:13.5px}
.os .stagepick .stg input{position:absolute;opacity:0;pointer-events:none}
.os .stagepick .stg small{color:var(--text-3);font-size:12px}
.os .stagepick .stg.done{background:var(--ok-bg);border-color:#BFD9C3;color:var(--ok)}
.os .stagepick .stg.cur{box-shadow:inset 0 0 0 1px var(--ink)}
.os .stagepick .stg:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.os .stagepick .stg:has(input:checked) small{color:#C9D2DE}
.os .stagepick .stg:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.os .fgrid{margin-bottom:0}
.os .field input,.os .field select,.os .field textarea{width:100%;box-sizing:border-box}
.os .field textarea{height:auto;padding:10px 12px;line-height:1.45;resize:vertical}
.os .field .flabel{margin:0}
.os .formsec{padding:16px;border-bottom:1px solid var(--line)}
.os .formsec h3{margin:0 0 12px;font:600 15px var(--f-ui);display:flex;align-items:center;gap:8px}
.os .osform .savebar{border-radius:0 0 12px 12px}
.os .osform .savebar .sp{flex:1}
.os .osform.narrow{max-width:760px}
.os .kvlist{display:grid;gap:8px;font-size:13.5px}
.os .kv{display:flex;justify-content:space-between;gap:12px;align-items:center}
.os .kv>span:first-child{color:var(--text-2)}
.os .kv>span:last-child{text-align:end}
.os .compose7{display:grid;gap:8px;margin-top:12px}
.os .compose7 textarea,.os .thread .ft textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;font:400 14px/1.45 var(--f-ui);resize:vertical;background:var(--surface);color:var(--text)}
.os .compose7 .btn{justify-self:end}
.os .thread7{display:flex;flex-direction:column;gap:10px}
.os .thread7 .post{max-width:88%;align-self:flex-start}
.os .thread7 .post.me{align-self:flex-end}
.os .feed li .av{background:var(--sunken);color:var(--text-2)}
.os .feed li .av .i{width:14px;height:14px}
.os .feed li b{font-weight:600}
.os .feed li time{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
.os .chargeedit{display:grid;gap:8px}
.os .crow{display:grid;grid-template-columns:minmax(0,1fr) 110px 100px auto;gap:6px;align-items:center}
.os .crow input,.os .crow select,.os .chargeline input{height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;font:400 13.5px var(--f-ui);background:var(--surface);color:var(--text);min-width:0;width:100%;box-sizing:border-box}
.os .chargehead{display:grid;grid-template-columns:1fr 70px 140px 120px;gap:10px;font:600 12px var(--f-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:4px 0}
.os .chargeline{grid-template-columns:1fr 70px 140px 120px}
.os .chargeline>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.os .chargeline .basis{color:var(--text-2)}
.os .chargeline .linetot{text-align:end;font-variant-numeric:tabular-nums;color:var(--text-2)}
.os .chargeline input[name="l_price[]"],.os .chargeline input[name="l_qty[]"]{text-align:end;font-variant-numeric:tabular-nums}
.os .dutyrow{margin-top:14px}
.os .notefield{margin-top:14px}
.os .segtabs.radios .segopt{position:relative}
.os .segtabs.radios .segopt input{position:absolute;opacity:0;pointer-events:none}
.os .segtabs.radios .segopt span{min-height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:7px;font-size:13.5px;color:var(--text-2);white-space:nowrap;cursor:pointer}
.os .segtabs.radios .segopt input:checked+span{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(18,26,38,.1)}
.os .segtabs.radios .segopt input:focus-visible+span{outline:2px solid var(--focus)}
.os .qtotal b{font-size:22px}
.os .osoffer .offer{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:16px}
.os .osoffer .offer p{margin:2px 0 0;color:var(--text-2);font-size:13.5px}
.os .osoffer .offer-acts{margin-inline-start:auto}
.os .osoffer .offer .btn{background:var(--ink);color:#fff}
.os .fidbox h2{font:600 14px var(--f-ui);display:flex;gap:8px;align-items:center;margin:0 0 6px}
.os .fidbox p{margin:0 0 10px;color:var(--text-2);font-size:13.5px}
.os .fidbox .hint{color:var(--text-3);font-size:12.5px}
.os .fidbox .btn{background:var(--ink);color:#fff}
.os .keys7{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.os .keys7 li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.os .keys7 li span{color:var(--text-3);font-size:12.5px}
.os .keys7 li form{margin-inline-start:auto}
.os .inboxpanel{overflow:hidden}
.os .inbox7{border-top:0;height:calc(100vh - 260px)}
.os a.th7{text-decoration:none;color:var(--text)}
.os .th7 .min0{min-width:0}
.os .thread .hd .btn{flex:none}
.os .thread .bd{display:block}
.os .thread .ft{align-items:flex-end}
.os .thread .ft textarea{flex:1;min-height:44px;resize:none}
.os .setnav a.on{background:var(--sunken);font-weight:600}
.os .setnav a{justify-content:flex-start}
.os .setrow.team{grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) 130px}
.os .gchip .i{width:13px;height:13px}
.os .morelist{overflow:hidden}
.os .morerow{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--text)}
.os .morerow:last-child{border-bottom:0}
.os .morerow b{display:block}.os .morerow small{display:block;color:var(--text-3);font-size:13px}
.os .morerow>span{flex:1}
.os .morerow .i:first-child{color:var(--gold-ink)}
.os .bysl2.light{margin:16px 0}
.os form.searchhero{margin:0 0 14px}
.os .searchhero input{all:unset;flex:1;min-width:0;font:400 16px var(--f-ui);color:var(--text)}
.os a.hsres{text-decoration:none;color:var(--text)}
.os .hsres .r{text-align:end}
.os .stackgap{display:grid;gap:12px}
.os .stackgap form{margin:0}
.os .hsbig{font-size:28px}
.os .muted{color:var(--text-3)}.os .small{font-size:13.5px}
.os .faint{color:var(--text-3)}
.os .nw{white-space:nowrap}
.os .num{text-align:end;font-variant-numeric:tabular-nums}
.os .modechip .i{width:14px;height:14px}
.os .shipcard .ic7 .i{width:20px;height:20px}
.os .lane .i.bg{display:none}
@media (max-width:760px){
 body.os{background:var(--canvas)}
 .os .page{padding:16px 16px calc(150px + var(--sab))}
 .os h1.hello7{font-size:25px}
 .os .phead .acts{display:none}
 .os .rechead .acts{display:none}
 .os .rechead .meta{font-size:14px}
 .os .rechead .meta>*{white-space:normal}
 .os .formrow{gap:8px}
 .os .formrow>.btn:last-child,.os .formrow>button:last-child{margin-inline-start:0;width:100%;justify-content:center;min-height:48px}
 .os .crow{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"a c" "b d"}
 .os .crow>input:first-child{grid-area:a}.os .crow>select{grid-area:b}.os .crow>input[name="c_amount[]"]{grid-area:c}.os .crow>.tick{grid-area:d}
 .os .chargehead{display:none}
 .os .chargeline{grid-template-columns:76px minmax(0,1fr);gap:6px 8px;padding:10px 0}
 .os .chargeline>div{grid-column:1/-1;grid-template-columns:1fr}
 .os .chargeline>input[name="l_qty[]"],.os .chargeline>input[name="l_price[]"]{display:block}
 .os .chargeline>input[name="l_qty[]"]{grid-column:1}
 .os .chargeline>input[name="l_price[]"]{grid-column:2}
 .os .chargeline .linetot{display:none}
 .os .chargeline input{height:44px;font-size:16px}
 .os .inbox7{height:auto}
 .os .inbox7 .thread{display:none}
 .os .inbox7 .tl{border:0}
 .os .osform .savebar{position:sticky;bottom:calc(68px + var(--sab));flex-wrap:wrap}
 .os .osform .savebar .m-hide,.os .osform .savebar .sp{display:none}
 .os .osform .savebar .btn{flex:1;justify-content:center;min-height:48px}
 .os .savebar .fhelp{display:none}
 .os .stagepick .stg{min-height:44px}
 .os .tick{min-height:44px}
 .os .mcard.qcard .btn.full{min-height:48px}
 .os .setrow.team{grid-template-columns:1fr}
 .os .person small{font-size:13px}
 .os .needbox.mx{margin:12px 12px 4px}
 .os .kv{font-size:14.5px}
 .os .vesselbar b{font-size:14px}
}
.os .qa7 a,.os .qa7 a b{color:#FAF8F2}
.os a.th7{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;grid-template-rows:auto;align-items:start}
.os a.th7>*{grid-row:1}
.os .crow{grid-template-columns:minmax(0,1fr) 92px auto;grid-template-areas:"a a a" "b c d"}
.os .crow>input:first-child{grid-area:a}.os .crow>select{grid-area:b}.os .crow>input[name="c_amount[]"]{grid-area:c}.os .crow>.tick{grid-area:d}
.os .chargeedit .crow+.crow{padding-top:8px;border-top:1px solid var(--line-soft)}
/* Phone top bar: the real lockup file, never typed letters */
.os .mtop .mlogo{display:flex;align-items:center}
.os .mtop img.mlock{height:44px;width:auto}
/* Phone bottom bar: skin text colours, not link colour; 12px floor */
.os .bnav a{color:var(--text-2);font-size:12px}
.os .bnav a.on,.os .bnav a.mid{color:var(--text)}

/* Pre-go-live fixes from the clean-up check (26 Sept 2026) */
@media (min-width:761px){.qa7{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}}
.docrow>div{min-width:0}.docrow b{overflow-wrap:anywhere}
@media (max-width:760px){
  .savebar{flex-wrap:wrap}.savebar .btn{min-width:max-content}
  .os .btn.sm,.os .hlink{min-height:44px}
}
@media (max-width:420px){
  .docrow{grid-template-columns:28px minmax(0,1fr)}.docrow>span:nth-child(3),.docrow>span:nth-child(4){grid-column:2}.docrow>span:nth-child(3):empty{display:none}
}
@media (max-width:760px){.vesselbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.vesselbar b{white-space:normal;overflow-wrap:anywhere}}

/* ---- Sign-in and plain pages (render_simple), house look with the RL skin (26 Sept 2026) ---- */
.signpage .signwrap{grid-template-rows:auto auto;align-content:center;gap:16px}
.signlogo{display:block;justify-self:start;margin:0 0 4px;line-height:0}
.signlogo img{display:block;width:250px;max-width:100%;height:auto}
.signcard h1{font:700 26px/1.2 var(--f-ui);letter-spacing:-.01em;color:var(--text)}
.signcard p{font-size:15px;line-height:1.55}
.signcard p.faint{font-size:13px;color:var(--text-3)}
.signcard .btn .i{width:18px;height:18px;flex:none}
.signform{display:grid;gap:12px;margin:0}
.signcard .field input{height:48px;font-size:16px}
.signerr{color:var(--bad);font-size:14px}
.signcard .alert{margin:0}
.signalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px;font-size:13.5px;color:var(--text-2)}
.signalt .btn{width:auto;height:44px;font-size:14px;padding:0 16px}
.signalt a:not(.btn){color:inherit;font-weight:600}
.signfoot{display:grid;justify-items:center;gap:4px;text-align:center;color:#8B96A3;font-size:12.5px;line-height:1.5}
.signfoot .bysl{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#AEB7C2;text-decoration:none}
.signfoot .bysl img{width:18px;height:18px;border-radius:4px}
@media (hover:hover){.signfoot .bysl:hover{color:#fff}}