/* BIOTECH, the white-label peptide supply platform. App shell + product UI layer. */
:root{
--ink:#0a0a0a; --ink-2:#141416; --line:#e6e6e6; --paper:#fff; --paper-2:#F6F5F1;
--surface:#fff; --surface-2:#FBFAF6; --surface-3:#EDEAE1;
--muted:#8a8177; --muted-2:#8a8a92; --ink-soft:#5c5648; --line-soft:#d8d2c2;
--acc:#BC9745; --acc-ink:#1a1305; --warn:#c47a2e; --bad:#b23b3b; --good:#3f7a52;
--display:'Playfair Display',Georgia,serif; --body:'Inter',-apple-system,system-ui,sans-serif;
--act:#F8DC7E; --act-dk:#EFCC5C; --act-ink:#241B05; --act-edge:#A8842E;
--act-soft:rgba(248,220,126,.34); --act-line:rgba(168,132,46,.50); --act-deep:#7A5E06;
--num:'Inter',-apple-system,system-ui,sans-serif;
--fig:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--ease:cubic-bezier(.2,.7,.2,1); --sb:266px;
}
/* ---- The back office reads light, because staff live in it all day and
contrast is what stops mistakes. It tells itself apart from the customer
portal two ways: a cooler paper against the customer's warm cream, and a
deep nav rail where the customer has a pale one. Brand gold, Playfair and
Inter are shared, so it is the same company in a different room. ---- */
.app.ops{
--ink:#1A1611; --ink-2:#332C22; --line:#DAD3C6; --paper:#FCFAF6; --paper-2:#E9E3D7;
--surface:#FCFAF6; --surface-2:#2B2119; --surface-3:#F2EDE3;
--muted:#75695A; --muted-2:#847766; --ink-soft:#544B3E; --line-soft:#C6BCAA;
--acc:#BC9745; --acc-ink:#1a1305;
--good:#3f7a52; --bad:#a4453f; --warn:#b1732a;
background:var(--paper-2); color:var(--ink);
}
.app.ops .topbar{background:rgba(233,227,215,.94);border-bottom-color:var(--line)}
.app.ops .card,.app.ops .tile{background:var(--surface);border-color:var(--line)}
.app.ops .tbl thead th{background:var(--surface-3);color:var(--muted)}
.app.ops .tbl tbody tr:hover{background:#F7F3EA}
.app.ops .tbl tr.cat-row td{background:#EFE6D2;color:#6E5A24}
.app.ops .editrow > td{background:var(--surface-3)}
.app.ops .addpanel{background:var(--surface-3);border-color:var(--line-soft)}
.app.ops .inp,.app.ops .sel,.app.ops textarea.inp{background:#FFFDF9;border-color:var(--line-soft);color:var(--ink)}
.app.ops .mini-card,.app.ops .rolecard,.app.ops .bsthumb,.app.ops .opt{background:var(--surface-3);border-color:var(--line)}
.app.ops .catchip{background:var(--surface);border-color:var(--line-soft)}
.app.ops .seg{background:var(--surface-3)}
/* The nav rail is the one dark surface: a deep brown out of the same warm
family, so the two apps read as the same brand rather than two products.
It redefines the tokens its own children use rather than being patched
rule by rule. */
.app.ops .sidebar{
--ink:#F2EBDF; --ink-2:#E0D7C7; --muted:#A09483; --muted-2:#A09483;
--ink-soft:#CFC4B2; --line:#3B2F24; --line-soft:#463829; --acc:#D4AC57;
--surface-3:#372B21;
background:var(--surface-2); color:var(--ink); border-right-color:#3B2F24;
}
.app.ops .sidebar .sb-sec{color:#968A79}
.app.ops .sidebar .sb-nav a{color:#D3C9B9}
.app.ops .sidebar .sb-nav a:hover{background:rgba(255,255,255,.07);color:#F7F1E7}
.app.ops .sidebar .sb-nav a.on{background:rgba(212,172,87,.18);color:#F2DFB2}
.app.ops .sidebar .sb-nav a.on svg{color:#D4AC57}
.app.ops .sidebar .sb-user{background:rgba(255,255,255,.07)}
.app.ops .sidebar .sb-exit{border-color:#463829;color:#CFC4B2}
.app.ops .sidebar .sb-exit:hover{background:rgba(255,255,255,.07);color:#F7F1E7}
.app.ops .sidebar .sb-brand{color:#F7F2E8}
.app.ops .sidebar .sb-tag{color:#968A79}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper-2);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--acc);color:#1a1305}
/* Only what the ops shell genuinely needs on top of the shared components. */
.app.ops .tile.accent{background:rgba(188,151,69,.10);border-color:rgba(188,151,69,.34)}
.app.ops .rowlink{color:var(--ink-soft)}
.app.ops .rowlink:hover{color:#8A6A1F}
.app.ops .rowlink.danger{color:var(--bad)}
/* Inline edit, opened in place of the row it belongs to. Editing a product
where you are already looking at it beats a modal that hides the list. */
.thsub{font-family:var(--body);font-weight:400;font-size:9.5px;letter-spacing:.02em;text-transform:none;color:var(--muted);margin-top:2px}
.editrow > td{padding:16px !important}
.editgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 16px;margin-bottom:14px}
.editgrid .field{margin:0}
.editfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.labelrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:34px}
/* Volume breaks: quantity and the rate it earns, paired. Run together on one
line they read as one long number, which is how the old version failed. */
.addr-tail{font-family:var(--fig);font-size:12px;font-weight:600;color:var(--ink-2);margin-left:6px}
.inp.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(164,69,63,.16)}
.breaks{display:flex;gap:7px;flex-wrap:wrap}
.brk{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border-radius:7px;
background:var(--surface-3);border:1px solid var(--line)}
.brk b{font-family:var(--num);font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.brk i{font-style:normal;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.03em;color:var(--acc)}
@media(max-width:900px){.breaks{flex-direction:column;gap:4px}.brk{justify-content:space-between;min-width:120px}}
/* An add-form that opens inside the card it belongs to. The gold edge marks it
as a thing you are composing, not a thing you are reading. */
.addpanel{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
padding:20px 20px 20px 23px;margin-bottom:18px;position:relative;overflow:hidden}
.addpanel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.addpanel .editgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px;margin-bottom:18px}
.addpanel .editfoot{padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:1080px){.addpanel .editgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.addpanel{padding:16px 16px 16px 19px}.addpanel .editgrid{grid-template-columns:1fr;gap:14px}}
/* Photo field: shows the shot you are about to save, at the shape it will take. */
/* The handover panel: everything needed to give a new account its way in. */
.invite{background:var(--surface-3);border:1px solid var(--line);border-left:3px solid var(--acc);
border-radius:12px;padding:16px 18px;margin-top:14px}
.invite-h{font-size:14px;margin-bottom:14px}
.invite-h .tid{margin-left:4px}
.invite-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.invite-lb{flex:0 0 96px;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.invite-val{flex:1;min-width:160px;font-family:var(--fig);font-size:12px;background:var(--surface);
border:1px solid var(--line-soft);border-radius:8px;padding:7px 10px;overflow-x:auto;white-space:nowrap}
.invite-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.invite-foot{display:flex;gap:16px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
@media(max-width:640px){
.invite-lb{flex:1 1 100%}
.invite-row .btn,.invite-row .rowlink{width:100%;text-align:center;justify-content:center}
}
/* The vial label standard: a checklist, not a form. Each line says what it is,
who supplies it, and why it is on a vial at all. */
.lstd-group{margin-bottom:22px}
.lstd-group:last-child{margin-bottom:0}
.lstd-head{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:800;
font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.lstd-head span{font-family:var(--body);font-weight:400;font-size:11px;letter-spacing:0;
text-transform:none;color:var(--muted);margin-left:auto}
.lstd-row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.lstd-row:last-child{border-bottom:0}
.lstd-tick{flex:0 0 96px;display:flex;align-items:flex-start;gap:7px;cursor:pointer;padding-top:1px}
.lstd-tick input{width:15px;height:15px;margin:1px 0 0;accent-color:var(--acc);flex:none;cursor:pointer}
.lstd-tick span{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.lstd-row.req .lstd-tick span{color:var(--acc)}
.lstd-main{flex:1;min-width:0}
.lstd-nm{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lstd-ex{font-family:var(--fig);font-size:12px;color:var(--ink-soft);margin-top:4px}
.lstd-note{font-size:12px;line-height:1.55;color:var(--muted);margin-top:4px}
@media(max-width:640px){
.lstd-row{flex-direction:column;gap:8px}
.lstd-tick{flex:none}
}
/* Strength pricing: the model on the left, what it does on the right. */
.pm-h{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pm-row{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.pm-row:last-child{border-bottom:0}
.pm-nm{flex:1;min-width:0;font-size:13px}
.pm-nm .hint2{margin-top:2px}
.pm-row .inp{width:90px;text-align:right;flex:none;font-family:var(--num);font-variant-numeric:tabular-nums}
.pm-pct{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pm-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;padding-top:11px;
border-top:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm-total b{font-family:var(--num);font-weight:600;font-size:15px;letter-spacing:0;
text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
/* Margins: cost against price, and the one bar that shows how much of a dollar
is actually yours. */
.mg-bulk{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 20px;margin-bottom:4px}
.mg-bulk .field{margin:0}
.mg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px;
background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.mg-stats b{display:block;font-family:var(--num);font-weight:600;font-size:19px;line-height:1.1;
font-variant-numeric:tabular-nums}
.mg-stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.mg-demo{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.mg-demo-h{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.mg-demo-row{display:grid;grid-template-columns:70px 110px 78px 92px 1fr;gap:12px;align-items:baseline;
padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.mg-demo-row:last-child{border-bottom:0}
.mg-demo-row b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:760px){.mg-demo-row{grid-template-columns:1fr 1fr;gap:4px 12px}}
/* A pricing suggestion: what kind, what it says, and the one button. */
.sug{display:flex;align-items:flex-start;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.sug:last-child{border-bottom:0;padding-bottom:0}
.sug:first-child{padding-top:0}
.sug-tag{flex:0 0 128px;padding-top:1px}
.sug-body{flex:1;min-width:0}
.sug-link{display:block;margin-top:7px;font-family:var(--display);font-weight:700;font-size:11px;
letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);text-decoration:underline}
.sug-link:hover{color:#8A6A1F}
.sug-sku{margin-top:5px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.sug-sku span{font-size:11px}
.sug-opts{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.sug-opt{display:flex;align-items:flex-start;gap:11px}
.sug-opt .btn{flex:none;margin-top:1px}
.sug-opt span{font-size:12px;line-height:1.55;color:var(--muted)}
@media(max-width:820px){.sug-opt{flex-direction:column;gap:5px}.sug-opt .btn{width:100%;justify-content:center}}
.sug-body b{display:block;font-size:14px;margin-bottom:4px}
.sug-body p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.sug-act{flex:0 0 190px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.sug-move{font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;
color:var(--muted)}
.sug-move span{margin:0 3px;color:var(--muted-2)}
.sug-move b{color:var(--ink);font-weight:600}
.sug-act .btn{width:100%;justify-content:center}
@media(max-width:820px){
.sug{flex-direction:column;gap:9px}
.sug-tag,.sug-act{flex:none;width:100%;align-items:stretch}
.sug-act{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.sug-act .btn{width:auto}
}
.mg-bandnote{margin:14px 0 12px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.mg-bands{margin-bottom:14px}
.mg-bands .inp{width:64px;text-align:right;display:inline-block;font-family:var(--num);
font-variant-numeric:tabular-nums}
.mg-caps{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.mg-caps .field{margin:0}
@media(max-width:640px){.mg-caps{align-items:stretch}.mg-caps .field{flex:1 1 100%}}
.mg-bar{display:flex;height:46px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.mg-bar-cogs,.mg-bar-profit{display:flex;align-items:center;padding:0 14px;min-width:0;overflow:hidden}
.mg-bar-cogs{background:var(--surface-3);color:var(--ink-soft)}
.mg-bar-profit{flex:1;background:rgba(63,122,82,.16);color:#2c5f3f}
.mg-bar span{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.05em;
text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-bar-exp{background:rgba(196,122,46,.18);color:#8a5b00;display:flex;align-items:center;
padding:0 14px;min-width:0;overflow:hidden}
.mg-bar-profit.neg{background:rgba(178,59,59,.16);color:#8f3030}
.pl{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;
border-bottom:1px solid var(--line);font-size:13.5px}
.pl-row b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-row b small{font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--muted);margin-left:9px}
.pl-row.out b{color:var(--muted)}
.pl-row.sub{padding-left:18px;font-size:12.5px;color:var(--muted)}
.pl-row.sum{border-bottom:1.5px solid var(--line-soft);font-weight:600}
.pl-row.big{font-size:16px;border-bottom:0;padding-top:12px}
.pl-row.big b{font-size:21px}
.pl-row.big.neg b{color:var(--bad)}
.pl-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.55}
.mg-bar-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:9px;
font-size:12px;color:var(--muted)}
.mg-next{font-family:var(--num);font-size:11.5px;color:#8A6A1F;margin-top:3px;font-variant-numeric:tabular-nums}
@media(max-width:640px){
.mg-bar{height:auto;flex-direction:column}
.mg-bar-cogs,.mg-bar-profit{width:100% !important;padding:10px 14px}
}
.pm-compound{display:flex;align-items:baseline;gap:12px;margin-top:12px;padding:12px 14px;
border-radius:11px;background:var(--surface-3);border:1px solid var(--line)}
.pm-compound b{font-family:var(--num);font-weight:600;font-size:24px;line-height:1;flex:none;
font-variant-numeric:tabular-nums}
.pm-compound span{font-size:12px;line-height:1.55;color:var(--muted)}
.pm-compound.hot{background:rgba(196,122,46,.09);border-color:rgba(196,122,46,.42)}
.pm-compound.hot b{color:#B1732A}
.pm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:15px 18px}
.pm-stats b{display:block;font-family:var(--num);font-weight:600;font-size:21px;line-height:1.1;
font-variant-numeric:tabular-nums}
.pm-stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.pm-flags{margin-top:16px;border:1px solid rgba(196,122,46,.40);background:rgba(196,122,46,.07);
border-radius:12px;padding:14px 16px}
.pm-flags .pm-h{border-bottom-color:rgba(196,122,46,.30)}
.pm-flag{display:flex;gap:12px;flex-wrap:wrap;padding:6px 0;font-size:13px}
.pm-flag span{color:var(--muted)}
.pm-flags p{margin:9px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
@media(max-width:640px){.pm-row{flex-wrap:wrap}.pm-row .inp{width:100%}}
.uprow{display:flex;align-items:center;gap:12px}
.upshot{width:58px;height:58px;flex:none;border-radius:10px;border:1px solid var(--line-soft);
background:var(--surface) center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.upshot span{font-family:var(--display);font-weight:700;font-size:8.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2;padding:0 4px}
/* Advancing an order: which order, and where it is about to go. */
.advhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:13px}
.advmove{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-family:var(--display);
font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.advmove b{color:#8A6A1F}
@media(max-width:700px){
.editgrid{grid-template-columns:1fr}
.editfoot{gap:10px}
.editfoot .btn{width:100%;justify-content:center}
.advmove{margin-left:0;width:100%}
}
/* Analytics: an action is a claim, the number that backs it, and the way to act
on it. Keeping those three in one row stops it becoming a wall of advice. */
.action{display:flex;align-items:flex-start;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.action:last-child{border-bottom:0;padding-bottom:0}
.action:first-child{padding-top:0}
.action-metric{flex:0 0 104px;padding-top:1px}
.action-num{font-family:var(--num);font-weight:600;font-size:26px;line-height:1;letter-spacing:-.02em;
color:var(--ink);font-variant-numeric:tabular-nums}
.action-unit{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.3}
.action-body{flex:1;min-width:0}
.action-body b{display:block;font-size:14px;margin-bottom:4px}
.action-body p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.action .btn{flex:none;margin-top:2px}
.catbar{display:flex;align-items:center;gap:14px;padding:9px 0}
.catbar-lb{flex:0 0 210px;font-size:13px;display:flex;align-items:center;gap:8px}
.catbar-lb .dot{width:8px;height:8px;border-radius:50%;flex:none}
.catbar-track{flex:1;height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;min-width:60px}
.catbar-fill{height:100%;border-radius:5px}
.catbar-val{flex:0 0 150px;text-align:right;font-family:var(--num);font-weight:600;font-size:13px;
font-variant-numeric:tabular-nums}
@media(max-width:760px){
.action{flex-direction:column;gap:9px}
.action-metric{flex:none;padding-top:0;display:flex;align-items:baseline;gap:8px}
.action-unit{margin-top:0}
.action .btn{width:100%;justify-content:center}
.catbar{flex-wrap:wrap;gap:8px}
.catbar-lb{flex:1 1 100%}
.catbar-val{flex:0 0 auto;text-align:left}
.catbar-track{flex:1 1 100%;order:3}
}
/* ---- layout ---- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface-2);color:var(--ink);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;overflow:auto}
/* The nav rail is taller than a laptop window, so it scrolls — and it was doing
that with the operating system's own scrollbar: sixteen solid grey pixels
down the edge of the panel, next to the dark rail, permanently there on any
Mac set to always show scroll bars. Six pixels, in the rail's own colours,
and it only darkens enough to find while the pointer is in the rail. */
.sidebar{scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:3px}
.sidebar:hover::-webkit-scrollbar-thumb{background:var(--muted)}
/* The back office rail is dark, so its thumb has to come from the light side. */
.app.ops .sidebar{scrollbar-color:rgba(255,255,255,.20) transparent}
.app.ops .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.17)}
.app.ops .sidebar:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
.sb-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.02em;padding:6px 8px 4px}
.sb-brand .mk-img{height:26px;width:auto;flex:none}
.sb-brand .mk{width:14px;height:14px;border-radius:4px;background:var(--acc);box-shadow:0 0 0 4px rgba(188,151,69,.18)}
.sb-brand .tm{font-size:10px;opacity:.6;margin-left:1px}
.sb-tag{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.24em;color:var(--muted);margin:2px 8px 20px 32px;text-transform:uppercase}
.sb-tag b{color:var(--acc)}
.sb-sec{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.2em;color:#9a9188;text-transform:uppercase;margin:16px 10px 7px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--ink-soft);font-weight:500;font-size:13.5px;transition:.16s var(--ease);position:relative}
.sb-nav a svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.sb-nav a:hover{background:rgba(10,10,10,.045);color:var(--ink)}
.sb-nav a.on{background:rgba(188,151,69,.16);color:var(--ink)}
.sb-nav a.on::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.sb-nav a .pill{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--act);color:var(--act-ink);border-radius:20px;padding:1px 7px;font-family:var(--display)}
.sb-nav a .pill.warn{background:var(--warn);color:#3a2600}
.sb-nav a .pill.bad{background:var(--bad);color:#3a0009}
.sb-foot{margin-top:auto;padding-top:18px}
.sb-pin{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:10px;padding:8px 11px;border:0;border-radius:9px;
background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:.15s var(--ease)}
.sb-pin svg{flex:0 0 15px;opacity:.8}
.sb-pin:hover{background:rgba(10,10,10,.045);color:var(--ink-soft)}
.sb-pin[aria-pressed="true"]{color:var(--acc)}
.sb-pin[aria-pressed="true"] svg{opacity:1}
/* ---------- A sidebar that only borrows its width ---------- */
/* Collapsed it shows icons; hovering slides it open over the page rather than
pushing the table sideways, so nothing reflows under the pointer. Pinning it
puts it back in the layout for good. */
.sidebar{white-space:nowrap;overflow-x:hidden;transition:width .18s var(--ease)}
.app.sb-slim{grid-template-columns:68px 1fr}
.app.sb-slim > .sidebar{position:fixed;left:0;top:0;width:68px;z-index:45;padding-left:14px;padding-right:14px}
/* Taking the sidebar out of the flow leaves the page as the grid's first item,
which would then sit in the narrow column meant for the sidebar. */
.app.sb-slim > .main{grid-column:2}
.app.sb-slim > .sidebar:hover,
.app.sb-slim > .sidebar:focus-within{width:var(--sb);box-shadow:14px 0 34px -18px rgba(10,10,10,.4)}
.app.sb-slim > .sidebar .sb-tag,
.app.sb-slim > .sidebar .sb-sec,
.app.sb-slim > .sidebar .sb-brand,
.app.sb-slim > .sidebar .sb-user,
.app.sb-slim > .sidebar .sb-exit,
.app.sb-slim > .sidebar .sb-pin span,
.app.sb-slim > .sidebar .sb-nav a span,
.app.sb-slim > .sidebar .sb-nav a .pill{opacity:0;transition:opacity .14s var(--ease)}
.app.sb-slim > .sidebar:hover .sb-tag,
.app.sb-slim > .sidebar:hover .sb-sec,
.app.sb-slim > .sidebar:hover .sb-brand,
.app.sb-slim > .sidebar:hover .sb-user,
.app.sb-slim > .sidebar:hover .sb-exit,
.app.sb-slim > .sidebar:hover .sb-pin span,
.app.sb-slim > .sidebar:hover .sb-nav a span,
.app.sb-slim > .sidebar:hover .sb-nav a .pill,
.app.sb-slim > .sidebar:focus-within .sb-tag,
.app.sb-slim > .sidebar:focus-within .sb-sec,
.app.sb-slim > .sidebar:focus-within .sb-brand,
.app.sb-slim > .sidebar:focus-within .sb-user,
.app.sb-slim > .sidebar:focus-within .sb-exit,
.app.sb-slim > .sidebar:focus-within .sb-pin span,
.app.sb-slim > .sidebar:focus-within .sb-nav a span,
.app.sb-slim > .sidebar:focus-within .sb-nav a .pill{opacity:1}
/* The mark stays visible while the wordmark beside it is clipped away. */
.app.sb-slim > .sidebar .sb-brand{opacity:1}
.app.sb-slim > .sidebar:not(:hover):not(:focus-within) .sb-brand{font-size:0;letter-spacing:0}
/* A count still has to be readable when the labels are not: it becomes a dot
on the icon rather than disappearing with the text. */
.app.sb-slim > .sidebar:not(:hover):not(:focus-within) .sb-nav a:has(.pill)::after{
content:"";position:absolute;top:7px;left:26px;width:7px;height:7px;border-radius:50%;background:var(--act);border:2px solid var(--surface-2)}
@media(max-width:920px){
.app.sb-slim{grid-template-columns:1fr}
.app.sb-slim > .sidebar{width:270px;position:fixed}
.app.sb-slim > .sidebar *{opacity:1 !important;font-size:inherit}
}
.sb-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;background:rgba(10,10,10,.035);border:1px solid var(--line)}
.sb-user .av{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#8f7434);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px}
.sb-user .nm{font-weight:600;font-size:12.5px;color:var(--ink);line-height:1.25}
.sb-user .rl{font-size:10.5px;color:var(--muted-2)}
.sb-exit{display:block;text-align:center;margin-top:9px;font-size:11px;color:var(--muted);padding:7px;border-radius:8px;border:1px solid var(--line)}
.sb-exit:hover{color:var(--ink);border-color:#c9c2b0}
/* ---- topbar + main ---- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(250,250,250,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:14px 30px}
.tb-title h1{font-size:22px}
.tb-title p{margin:2px 0 0;color:var(--muted-2);font-size:12.5px}
.tb-spacer{flex:1}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 13px;color:var(--muted-2);font-size:13px;min-width:210px}
.tb-search svg{width:15px;height:15px}
.tb-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#3a3a42;position:relative;cursor:pointer}
.tb-btn:hover{border-color:#c9c9cf}
.tb-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.dropdown-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-height:420px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 34px -12px rgba(10,10,10,.28);padding:8px;z-index:60;text-align:left;cursor:default}
.dropdown-panel .nrow{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border-radius:10px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.dropdown-panel .nrow:hover{background:var(--paper-2)}
.dropdown-panel .nrow small{display:block;color:var(--muted-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--display);font-weight:700;margin-bottom:2px}
.dropdown-panel .empty{padding:18px 12px;text-align:center;color:var(--muted-2);font-size:12.5px}
.tb-search{position:relative}
.tb-search input{border:0;background:none;outline:none;font-family:inherit;font-size:13px;color:var(--ink);width:150px}
.tb-search input::placeholder{color:var(--muted-2)}
.tb-live{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0a7a55;background:rgba(188,151,69,.12);padding:7px 12px;border-radius:20px}
.tb-live .bl{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(188,151,69,.6);animation:blink 2s infinite}
@keyframes blink{0%{box-shadow:0 0 0 0 rgba(188,151,69,.55)}70%{box-shadow:0 0 0 7px rgba(188,151,69,0)}100%{box-shadow:0 0 0 0 rgba(188,151,69,0)}}
.content{padding:26px 30px 60px;max-width:1320px;width:100%}
.view{display:none;animation:fade .4s var(--ease)}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* A line of orientation at the top of a page, not an alert. This was amber
with a warning triangle, so every page of the back office opened looking
like something was wrong, and the real warnings below had nothing to
stand out against. */
/* ---- A section that exists but is not open yet ----
Packaging ships after the compound flow goes live. It stays on the page,
greyed back and inert, so a client can see what is coming and cannot press
anything in it. Not display:none: a section that vanishes reads as a feature
we do not have. ---- */
.soonbar{display:flex;gap:16px;align-items:flex-start;background:var(--surface-2,#FBFAF6);
border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.soonbar b{display:block;font-size:14px;color:var(--ink);margin-bottom:5px}
.soonbar p{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted);max-width:68ch}
.soon-badge{flex:0 0 auto;background:var(--acc);color:var(--acc-ink);border-radius:999px;
padding:5px 12px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.soon-off{opacity:.38;filter:grayscale(.72);pointer-events:none;user-select:none}
.sb-nav a.soon{opacity:.5}
.soon-pill{margin-left:auto;background:var(--acc);color:var(--acc-ink);border-radius:999px;
padding:2px 7px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:640px){ .soonbar{flex-direction:column;gap:10px} }
.hintbar{display:flex;align-items:center;gap:10px;background:#fff;color:#6f6a63;border:1px solid #e8e3d8;border-radius:12px;padding:10px 16px;font-size:12px;margin-bottom:22px}
.hintbar b{color:#3f3a34;font-family:var(--display);letter-spacing:.04em}
.hintbar svg{width:15px;height:15px;color:#a89a7d;flex:0 0 15px}
/* The transaction hash on an order. It is 64 characters of nothing anybody
reads, so it wraps rather than widening the card, and the two things an
operator actually does with it sit next to it. */
.od-tx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;padding:9px 11px;
background:var(--paper-2);border:1px solid var(--line);border-radius:10px}
.od-tx code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink);
word-break:break-all;flex:1 1 200px;min-width:0}
.od-tx-lb{font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);flex:0 0 auto}
/* The step after a packaging component is answered. Quiet while something is
still missing, and the order itself once nothing is. */
.pi-next{margin-top:18px}
.pi-next-h{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:13px;
letter-spacing:.02em;margin-bottom:6px}
.pi-next.ready{border-color:var(--acc)}
.pi-next.ready .pi-next-h{color:var(--acc-deep,#7A5E06)}
.pi-next-rows{margin:12px 0 4px}
.pi-next-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px}
.pi-next-row b{font-family:var(--num);font-variant-numeric:tabular-nums}
.pi-next-row.total{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-weight:600}
/* A file on a message, and the clip that puts one there. */
.chatfile{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.chatfile:empty{display:none}
.clip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
flex:0 0 34px;border:1px solid var(--line);border-radius:9px;color:var(--muted);
background:var(--surface);transition:.15s var(--ease)}
.clip:hover{border-color:var(--acc);color:var(--ink)}
.clip::before{content:"";width:15px;height:15px;background:currentColor;
-webkit-mask:var(--clip) center/contain no-repeat;mask:var(--clip) center/contain no-repeat}
:root{--clip:url("data:image/svg+xml;utf8,")}
.msg-file{display:flex;align-items:center;gap:7px;margin-top:7px;padding-top:7px;
border-top:1px solid rgba(10,10,10,.10);font-size:12.5px}
.msg-file svg{flex:0 0 13px;opacity:.75}
.msg-file .sub2{margin-left:auto;white-space:nowrap}
.msg.me .msg-file{border-top-color:rgba(255,255,255,.28)}
.msg.me .msg-file a{color:inherit;text-decoration:underline}
.lblkind{margin:6px 0 10px}
.lblkind b{color:var(--ink)}
.od-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:9px}
.od-files .btn.xs{margin-right:4px}
/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tiles.six{grid-template-columns:repeat(3,1fr)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;position:relative;overflow:hidden;transition:.18s var(--ease)}
.tile:hover{border-color:#d3d3d9;box-shadow:0 12px 30px -20px rgba(0,0,0,.3);transform:translateY(-2px)}
.tile .lb{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.tile .lb svg{width:14px;height:14px}
.tile .val{font-family:var(--display);font-weight:800;font-size:29px;letter-spacing:-.02em;margin:9px 0 3px;line-height:1}
.tile .val small{font-size:15px;color:var(--muted-2);font-weight:600}
.tile .sub{font-size:11.5px;color:var(--muted-2)}
.tile .sub b{color:#0a7a55}
.tile.accent{background:linear-gradient(150deg,#FBF2DE,#F3E6C6);border-color:rgba(188,151,69,.4);color:var(--ink)}
.tile.accent .lb{color:#8a733f}.tile.accent .lb svg{color:#8a6a1f}
.tile.accent .sub{color:#8a733f}.tile.accent .sub b{color:#8a6a1f}
.tile .trend{position:absolute;right:14px;top:16px;font-family:var(--display);font-weight:700;font-size:11px;padding:2px 8px;border-radius:20px}
.trend.up{background:rgba(188,151,69,.14);color:#0a7a55}
.trend.dn{background:rgba(255,92,108,.14);color:#c22f3d}
.tile .spark{position:absolute;left:0;right:0;bottom:0;height:34px;opacity:.5}
/* ---- cards / panels ---- */
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:20px}
.grid2.rev{grid-template-columns:1fr 1.6fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-h h3{font-size:15px;white-space:nowrap}
.card-h .hint{font-size:11.5px;color:var(--muted-2)}
.card-h .right{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:2px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.seg button{flex:none}
.seg button{border:0;background:none;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:5px 10px;border-radius:7px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.donut{display:inline-block}
.dn-num{fill:var(--ink);font-family:var(--display);font-weight:800;font-size:21px;text-anchor:middle}
.dn-sub{fill:#9a9aa2;font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.app.ops .dn-num{fill:#fff}
.areachart,.barchart{width:100%;height:170px;display:block}
.bar-in{fill:#26262c}.bar-out{fill:var(--acc)}
.ac-dot{fill:#fff;stroke:var(--acc);stroke-width:1.6}
/* ---- tables ---- */
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-2)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-soft,#f0f0f0);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#fcfcfd}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .strong{font-weight:600}
.tid{font-family:var(--display);font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.sub2{color:var(--muted-2);font-size:11.5px}
.hashlink{color:#0a7a55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.hashlink:hover{text-decoration:underline}
.hashlink svg{width:11px;height:11px;vertical-align:-1px;margin-left:2px}
/* ---- badges ---- */
.bdg{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%}
.bdg.ok{background:rgba(188,151,69,.14);color:#0a7a55}.bdg.ok::before{background:var(--acc)}
.bdg.pend{background:rgba(255,176,32,.16);color:#8a5b00}.bdg.pend::before{background:var(--warn)}
.bdg.bad{background:rgba(255,92,108,.14);color:#c22f3d}.bdg.bad::before{background:var(--bad)}
.bdg.hold{background:rgba(120,120,130,.14);color:#54545c}.bdg.hold::before{background:#8a8a92}
.bdg.info{background:rgba(60,120,255,.12);color:#2b56c0}.bdg.info::before{background:#3c78ff}
/* ---- misc ---- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;border-radius:10px;border:1.5px solid var(--act-edge);background:var(--act);color:var(--act-ink);transition:.16s var(--ease);cursor:pointer}
.btn:hover{background:var(--act-dk);border-color:var(--act-deep);box-shadow:0 2px 10px -4px rgba(10,10,10,.25)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-soft)}
.btn.ghost:hover{background:var(--act);border-color:var(--act-edge);color:var(--act-ink)}
.btn.sm{padding:6px 12px;font-size:11px}
.btn.acc{background:var(--act);border-color:var(--act-edge);color:var(--act-ink)}
.btn.acc:hover{background:var(--act-dk);color:var(--act-ink);border-color:var(--act-deep);box-shadow:0 2px 10px -4px rgba(10,10,10,.25)}
/* small pill button, repeated row-level commerce actions (Add, Order, Restock) */
.btn.xs{display:inline-flex;align-items:center;gap:4px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:20px;border:1px solid var(--act-line);background:var(--act-soft);color:var(--act-deep);transition:.14s var(--ease);white-space:nowrap;cursor:pointer}
.btn.xs:hover{background:var(--act);border-color:var(--act-edge);color:var(--act-ink)}
.btn.xs.on{background:var(--act);border-color:var(--act-edge);color:var(--act-ink)}
/* the primary action on a product card: solid, so the eye lands on it first */
.btn.xs.add{background:var(--act);border:1.5px solid var(--act-edge);color:var(--act-ink);box-shadow:0 1px 0 rgba(20,16,10,.08),0 0 0 2px rgba(168,132,46,.20)}
.btn.xs.add:hover{background:var(--act-dk);border-color:var(--act-deep);box-shadow:0 1px 0 rgba(20,16,10,.12),0 0 0 3px rgba(168,132,46,.26)}
/* already in the order: confirmed, not competing for the click */
.btn.xs.added{background:#F2EFE6;border:1.5px solid #DED9CC;color:#6f6857;box-shadow:none}
.btn.xs.added:hover{background:#EAE5D8;border-color:#CFC8B6;color:var(--ink)}
/* plain navigational text link, Edit, Open, View all, back links */
.rowlink{color:var(--ink-soft);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;transition:.14s var(--ease)}
.rowlink:hover{color:var(--act-deep)}
/* product thumbnail, table rows / cards */
.thumb{width:34px;height:34px;border-radius:9px;object-fit:cover;background:var(--paper-2);border:1px solid var(--line);flex:none;display:block}
.thumb.lg{width:52px;height:52px;border-radius:12px}
.thumb-row{display:flex;align-items:center;gap:11px}
/* form controls, standalone, work anywhere (not only inside .field) */
.inp,select.sel{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-family:inherit;font-size:13px;background:var(--surface);color:var(--ink);transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.inp:focus,select.sel:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(188,151,69,.20)}
.inp::placeholder{color:#adaaa2}
select.sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;background-repeat:no-repeat;background-position:right 11px center;background-size:15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
select.sel:hover{border-color:#c9c2b0}
select.sel.xs{padding:6px 26px 6px 10px;font-size:12.5px;border-radius:8px;background-size:13px;background-position:right 8px center}
.notice{display:flex;gap:11px;align-items:flex-start;background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.3);border-radius:13px;padding:14px 16px;font-size:12.5px;color:#7a5300;margin-bottom:18px}
.notice.bad{background:rgba(255,92,108,.07);border-color:rgba(255,92,108,.3);color:#a02531}
.notice.acc{background:rgba(188,151,69,.08);border-color:rgba(188,151,69,.32);color:#0a6a49}
.notice svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}
.notice b{font-family:var(--display);letter-spacing:.02em}
.progress{height:8px;border-radius:20px;background:#eee;overflow:hidden}
.progress i{display:block;height:100%;border-radius:20px;background:var(--acc)}
.progress.warn i{background:var(--warn)}.progress.bad i{background:var(--bad)}
/* activation stepper */
.steps{display:flex;gap:0;margin:6px 0 2px}
.step{flex:1;text-align:center;position:relative;font-size:11px;color:var(--muted-2)}
.step .dot{width:26px;height:26px;border-radius:50%;background:#eee;color:var(--muted-2);display:grid;place-items:center;margin:0 auto 7px;font-family:var(--display);font-weight:800;font-size:12px;position:relative;z-index:2}
.step.done .dot{background:var(--acc);color:#1a1305}
.step.now .dot{background:var(--ink);color:#fff;box-shadow:0 0 0 5px rgba(10,10,10,.08)}
.step.done,.step.now{color:var(--ink);font-weight:600}
.step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:#eee;z-index:1}
.step:first-child::before{display:none}
.step.done::before,.step.now::before{background:var(--acc)}
/* reserve calendar */
.rescal{display:flex;flex-direction:column;gap:10px}
.rescal .rc{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.rescal .rc .dte{font-family:var(--display);font-weight:800;text-align:center;line-height:1;min-width:44px}
.rescal .rc .dte b{display:block;font-size:19px}.rescal .rc .dte span{font-size:10px;color:var(--muted-2);letter-spacing:.1em}
.rescal .rc .mid{flex:1}.rescal .rc .mid b{font-size:13px}.rescal .rc .mid p{margin:1px 0 0;font-size:11.5px;color:var(--muted-2)}
.rescal .rc .amt{font-family:var(--display);font-weight:800;font-size:15px}
.rescal .rc.next{border-color:var(--acc);background:rgba(188,151,69,.06)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13px}
.kv dt{color:var(--muted-2)}.kv dd{margin:0;text-align:right;font-weight:600}
.wallet{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:13px;margin-bottom:11px;background:var(--surface)}
.wallet .net{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff}
.wallet .addr{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#3a3a42;word-break:break-all}
.wallet .addr small{display:block;color:var(--muted-2);font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;margin-bottom:2px}
/* team / invite form */
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.field .hint2{font-size:11px;color:var(--muted-2);margin-top:5px}
.avrow{display:flex;align-items:center;gap:11px}
.av-sm{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--acc),#8f7434);color:#1a1305;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:11.5px;flex:0 0 30px}
.av-sm.mono{background:linear-gradient(135deg,#8a8a92,#54545c);color:#fff}
.avrow .nm2{font-weight:600;font-size:13px}
.avrow .em2{font-size:11.5px;color:var(--muted-2)}
/* role legend */
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rolecard{border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:var(--surface)}
.rolecard h4{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
.rolecard p{margin:0;font-size:11.5px;color:var(--muted-2);line-height:1.5}
/* brand studio queue */
.gaterow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gatechip{display:inline-flex;align-items:center;gap:4px;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--paper-2);border:1px solid var(--line);color:var(--muted-2)}
.gatechip.pass{background:rgba(188,151,69,.14);color:#0a7a55;border-color:transparent}
.gatechip.fail{background:rgba(255,92,108,.14);color:#c22f3d;border-color:transparent}
.gatechip.wait{background:rgba(255,176,32,.16);color:#8a5b00;border-color:transparent}
.bsthumb{width:42px;height:42px;border-radius:9px;overflow:hidden;background:var(--paper-2);flex:0 0 42px}
.bsthumb img{width:100%;height:100%;object-fit:cover}
.tbl tr.cat-row td{background:#FBF8F1;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a733f;padding:9px 16px;border-bottom:1px solid var(--line)}
.skucode{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted-2)}
/* chat */
.chat{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto;padding-right:4px}
.msg{max-width:78%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.msg.them{background:var(--paper-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.ai{background:rgba(188,151,69,.09);border:1px solid rgba(188,151,69,.3);border-bottom-left-radius:4px}
.msg .who{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.chatbar{display:flex;gap:9px;margin-top:14px}
.chatbar input{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-family:inherit;font-size:13px}
.chatbar input:focus{outline:none;border-color:var(--acc)}
/* internal skin, same cream/gold system as the client app, differentiated only by
a slightly deeper cream on the sidebar and the "INTERNAL · OPS" tag, never by going dark */
.app.ops .sidebar{background:var(--surface-2)}
.app.ops .tbl tr.cat-row td{background:#474030;color:#EDDCA6}
/* login */
/* ---- Access gate ----
The first thing anyone sees of either portal, so it carries the brand rather
than being a password box on a blank page. Two panels: an illustration that
says what the business is, and the form. Both apps share the structure and
differ only in ground colour, so they read as one company with two doors. */
.gate{position:fixed;inset:0;z-index:99999;display:grid;grid-template-columns:1.15fr .85fr;
font-family:var(--body);background:#F6F5F1;color:#0a0a0a}
.gate-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
padding:48px;background:#F1EEE6}
.gate-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gate-art-copy{position:relative;z-index:2;max-width:430px}
.gate-eyebrow{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.26em;
text-transform:uppercase;color:#9A7C32}
.gate-art-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.1vw,40px);
line-height:1.06;letter-spacing:-.01em;text-transform:none;margin:14px 0 12px;color:#1A1611}
.gate-art-copy p{margin:0;font-size:14px;line-height:1.65;color:#6B6255;max-width:390px}
.gate-panel{display:flex;align-items:center;justify-content:center;padding:40px 6vw;background:#FCFBF8}
.gate-form{width:100%;max-width:330px;text-align:center}
.gate-mark{height:52px;width:auto;margin-bottom:16px}
/* The mark is a dark bird with gold detail, so on the brown ground it would
vanish. A warm plate behind it reads as a medallion rather than a patch. */
.gate--ops .gate-mark{height:44px;padding:11px 15px;border-radius:16px;background:#F6F2E9;
box-shadow:0 0 0 1px rgba(212,172,87,.30),0 10px 30px -14px rgba(0,0,0,.65);box-sizing:content-box}
.gate-wordmark{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:.05em;line-height:1}
.gate-sub{font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.34em;
text-transform:uppercase;color:#8a8177;margin-top:7px}
.gate-role{display:inline-block;margin:20px 0 26px;padding:5px 13px;border-radius:20px;
font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
background:rgba(188,151,69,.13);border:1px solid rgba(188,151,69,.34);color:#8A6A1F}
.gate-label{display:block;text-align:left;font-family:var(--display);font-weight:700;font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:#8a8177;margin-bottom:7px}
.gate-input{width:100%;padding:13px 15px;border-radius:11px;border:1.5px solid #ddd8cc;background:#fff;
color:#0a0a0a;font-size:14.5px;font-family:var(--fig);letter-spacing:.02em;box-sizing:border-box;
transition:.16s var(--ease)}
.gate-input::placeholder{font-family:var(--body);letter-spacing:0;color:#a8a094}
.gate-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(188,151,69,.18)}
.gate-input.bad{border-color:#b23b3b;box-shadow:0 0 0 3px rgba(178,59,59,.14)}
/* A door button, not a buy button. One hairline instead of a 2px border and a
3px ring, which together were reading as three edges stacked. */
.gate-btn{width:100%;margin-top:11px;padding:12px;border-radius:10px;background:#F6D97A;color:#2A2008;
border:1px solid rgba(150,116,36,.55);font-weight:700;font-family:var(--display);font-size:12px;
text-transform:uppercase;letter-spacing:.09em;cursor:pointer;
box-shadow:0 1px 2px rgba(20,16,10,.07);transition:.18s var(--ease)}
.gate-btn:hover{background:#FBE698;border-color:rgba(150,116,36,.8);
box-shadow:0 3px 12px -4px rgba(150,116,36,.5)}
.gate-btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(20,16,10,.10)}
.gate-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gate-note{font-size:12px;color:#8a8177;margin:16px 0 0;line-height:1.6;min-height:32px}
.gate-note.bad{color:#a4453f}
.gate--ops .gate-note.bad{color:#E8A0A0}
.gate-firstrun{background:rgba(188,151,69,.12);border:1px solid rgba(188,151,69,.32);border-radius:10px;
padding:10px 12px;margin-bottom:16px;font-size:12.5px;line-height:1.55;color:#7a6122;text-align:left}
.gate--ops .gate-firstrun{background:rgba(212,172,87,.14);border-color:rgba(212,172,87,.34);color:#EFD9A4}
.gate-form form{text-align:left}
.gate-form .gate-btn{margin-top:16px}
/* Back office: the same door in the darker room. */
.gate--ops{background:#2B2119;color:#F2EBDF}
.gate--ops .gate-art{background:#241B14}
.gate--ops .gate-art-copy h2{color:#F7F2E8}
.gate--ops .gate-art-copy p{color:#A79B89}
.gate--ops .gate-eyebrow{color:#D4AC57}
.gate--ops .gate-panel{background:#332720}
.gate--ops .gate-wordmark{color:#F7F2E8}
.gate--ops .gate-sub,.gate--ops .gate-label,.gate--ops .gate-note{color:#A79B89}
.gate--ops .gate-role{background:rgba(212,172,87,.16);border-color:rgba(212,172,87,.38);color:#EFD9A4}
.gate--ops .gate-input{background:#241B14;border-color:#4A3A2C;color:#F7F2E8}
.gate--ops .gate-input::placeholder{color:#8C8071}
.gate--ops .gate-input:focus{border-color:#D4AC57;box-shadow:0 0 0 3px rgba(212,172,87,.22)}
/* The illustration: a peptide chain drifting behind the copy. Two chains at
different speeds give depth without anything moving fast enough to distract. */
.gate-chain{animation:gateDrift 34s ease-in-out infinite alternate}
.gate-chain--back{animation-duration:52s;animation-direction:alternate-reverse}
.gate-node{animation:gatePulse 5.5s ease-in-out infinite}
.gate-halo{animation:gateHalo 13s ease-in-out infinite alternate}
@keyframes gateDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,16px,0)}}
@keyframes gatePulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gateHalo{from{opacity:.5;transform:scale(1)}to{opacity:.9;transform:scale(1.06)}}
.gate-ring{animation:gateSpin linear infinite}
.gate-vial{animation:gateFloat 17s ease-in-out infinite alternate}
@keyframes gateSpin{to{transform:rotate(360deg)}}
@keyframes gateFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-16px,0)}}
/* Layers lean towards the pointer. The wrapper carries that transform; the
drift keyframes stay on the group inside it. */
.gate-layer{transition:transform .5s cubic-bezier(.22,.8,.3,1)}
/* Armed: pointer on a button, or a field focused. The scene brightens and the
chain quickens, so a control feels connected to the page behind it. Nothing
moves position, so nothing distracts while you are typing. */
.gate-art svg{transition:opacity .5s var(--ease)}
.gate.is-armed .gate-chain{opacity:1 !important}
.gate.is-armed .gate-node{animation-duration:2.1s}
.gate.is-armed .gate-ring{animation-duration:22s !important}
.gate.is-armed .gate-vial{opacity:.42}
.gate.is-armed .gate-halo{opacity:1;transform:scale(1.1)}
.gate-vial,.gate-halo{transition:opacity .45s var(--ease),transform .6s var(--ease)}
.gate-chain{transition:opacity .45s var(--ease)}
.gate-node{transition:animation-duration .3s linear}
@media(max-width:900px){
.gate{grid-template-columns:1fr;grid-template-rows:minmax(190px,26vh) 1fr}
.gate-art{padding:24px;justify-content:flex-end}
.gate-art-copy h2{font-size:23px;margin:9px 0 6px}
.gate-art-copy p{display:none}
.gate-panel{padding:32px 24px;align-items:flex-start}
.gate-mark{height:42px}
}
@media(max-height:560px){
.gate{grid-template-columns:1fr;grid-template-rows:1fr}
.gate-art{display:none}
}
/* Anyone who has asked for less motion gets a still illustration, not a
slightly slower one. */
@media(prefers-reduced-motion:reduce){
.gate-chain,.gate-node,.gate-halo,.gate-ring,.gate-vial{animation:none}
.gate-layer{transition:none}
}
.lf-field{margin-bottom:15px}
.lf-field label{display:block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.lf-field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 15px;font-family:inherit;font-size:14px}
.lf-field input:focus{outline:none;border-color:var(--acc)}
.lf-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted-2);margin-bottom:20px}
.lf-note{font-size:11.5px;color:var(--muted-2);margin-top:18px;text-align:center}
.lf-demo{margin-top:22px;padding:13px 15px;border:1px dashed var(--line);border-radius:12px;font-size:12px;color:var(--muted-2);background:var(--paper-2)}
.lf-demo b{font-family:var(--display);color:var(--ink)}
@media(max-width:1080px){.grid2,.grid2.rev{grid-template-columns:1fr}.tiles,.tiles.six,.tiles.four,.tiles.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){
.app{grid-template-columns:1fr}
.sidebar{position:fixed;left:0;top:0;z-index:60;width:270px;max-width:84vw;transform:translateX(-100%);
transition:transform .26s var(--ease);box-shadow:0 0 40px -10px rgba(10,10,10,.35)}
.app.nav-open .sidebar{transform:none}
.app.nav-open::before{content:"";position:fixed;inset:0;z-index:50;background:rgba(20,16,10,.42);
animation:scrimin .2s var(--ease)}
.menu-btn{display:grid !important}
}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
body.nav-locked{overflow:hidden}
.menu-btn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);place-items:center}
@media(max-width:640px){.tiles,.tiles.six,.tiles.four,.tiles.three{grid-template-columns:1fr}.content{padding:18px}.topbar{padding:12px 16px}.tb-search{display:none}}
/* ---- domain switch (Supply / Payments) ---- */
.dsw{display:flex;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:4px;margin:4px 0 16px}
.dsw-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;color:rgba(255,255,255,.6);font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:8px 6px;border-radius:8px;cursor:pointer;transition:.18s var(--ease)}
.dsw-btn svg{width:15px;height:15px}
.dsw-btn:hover{color:#fff}
.dsw-btn.on{background:var(--act);color:var(--act-ink)}
.sb-group{margin-bottom:2px}
/* ---- catalogue mini-cards ---- */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:4px}
.mini{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);transition:.2s var(--ease)}
.mini:hover{border-color:#d5d5d5;box-shadow:0 8px 22px rgba(10,10,10,.07)}
.mini-shot{aspect-ratio:1/1;background:linear-gradient(180deg,#fbfbfb,#f3f3f3);display:flex;align-items:center;justify-content:center}
.mini-shot img{width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply}
.mini-cap{padding:12px 13px}
.mini-cap b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:-.01em;line-height:1}
.mini-cap small{color:var(--muted-2);font-size:12px}
.cat-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
/* ---- order builder ---- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;display:block;transition:.18s var(--ease)}
.mode.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mode input{margin-right:8px}
.mode b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px}
.mode small{display:block;color:var(--muted-2);font-size:12.5px;margin-top:4px;margin-left:22px}
.ord-list{display:flex;flex-direction:column}
.ord-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.ord-nm{flex:1}
.ord-nm b{font-weight:600}.ord-nm small{display:block;color:var(--muted-2);font-size:12px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.qty button{border:0;background:#f6f6f6;width:30px;height:30px;cursor:pointer;font-size:16px;color:var(--ink)}
.qty input{width:42px;border:0;text-align:center;font-family:var(--body);font-weight:600}
@media(max-width:640px){.modes{grid-template-columns:1fr}}
/* category chips, colour-coded pop filter, replaces a plain