/* GOGO — glass-works order system. Own palette (glass-edge teal on a cool,
   slightly glassy ground), same bones as the 2plus1 panels: tokens, light/dark,
   sidebar + sticky top bar, cards, pills, tabular figures. No build step. */

:root {
  --ink:#0B1F22; --navy:#10302F; --slate:#2F4A4A; --muted:#5B7271; --faint:#95A9A8;
  --bg:#F2F7F7; --bg-soft:#E8F0F0; --surface:#FFFFFF; --line:#DCE6E6; --line-strong:#C2D1D1;
  --cta:#0B7C72; --cta-dark:#085E56; --cta-soft:#DDF2EF; --cta-ink:#06403B;
  --glass:#9FE3D8; --glass-deep:#3FC9B6;
  --amber:#E8A317; --amber-deep:#7A5200;
  --up:#1B7F3B; --up-bg:#E6F5EA; --up-line:#B9E2C5;
  --down:#C2342E; --down-bg:#FBECEA; --down-line:#F3C6C2;
  --warn:#7A5200; --warn-bg:#FDF3D9; --warn-line:#F0DFA8;
  --grey:#5B6B6B; --grey-bg:#EEF2F2; --grey-line:#D6DEDE;
  --violet:#5B3FD1; --violet-bg:#EEEAFB; --violet-line:#CFC5F2;
  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(11,31,34,.06),0 1px 3px rgba(11,31,34,.05);
  --shadow:0 10px 30px -12px rgba(11,31,34,.18);
  --shadow-lg:0 24px 60px -20px rgba(11,31,34,.35);
  --ring:0 0 0 3px rgba(11,124,114,.28);
  --on-cta:#ffffff; --on-up:#ffffff; --on-down:#ffffff;
  --font-display:"Lexend",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --side:224px; --top:54px;
  color-scheme:light;
}
html[data-theme="dark"] {
  --ink:#E3EEEE; --navy:#F0F7F7; --slate:#C0D2D1; --muted:#8FA6A5; --faint:#5A6F6E;
  --bg:#0B1516; --bg-soft:#122021; --surface:#142224; --line:#223536; --line-strong:#33494A;
  --cta:#3ED6C5; --cta-dark:#7FE7DB; --cta-soft:#0F2E2B; --cta-ink:#BFF3EC;
  --glass:#1E6B62; --glass-deep:#3ED6C5;
  --amber:#F0B429; --amber-deep:#F4C95B;
  --up:#4ADE80; --up-bg:#12251A; --up-line:#1E4029;
  --down:#F87171; --down-bg:#2B1417; --down-line:#4C1F24;
  --warn:#F4C95B; --warn-bg:#2A2210; --warn-line:#4A3C1A;
  --grey:#8FA6A5; --grey-bg:#192829; --grey-line:#2B3E3F;
  --violet:#B7A6FF; --violet-bg:#1E1A3A; --violet-line:#352D66;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 30px -12px rgba(0,0,0,.55); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(62,214,197,.35);
  --on-cta:#06201D; --on-up:#04130A; --on-down:#1F0707;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font:15.5px/1.5 var(--font-body); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--cta); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:var(--font-display); color:var(--navy); margin:0; letter-spacing:-.01em; }
h1 { font-size:24px; font-weight:700; }
h2 { font-size:17px; font-weight:600; }
h3 { font-size:14.5px; font-weight:600; }
code,.mono { font-family:var(--mono); font-size:.88em; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:13.5px; } .tiny { font-size:12px; }
.nowrap { white-space:nowrap; } .right { text-align:right; } .center { text-align:center; }
.grow { flex:1; } .row { display:flex; align-items:center; gap:10px; } .wrap { flex-wrap:wrap; }
.stack > * + * { margin-top:14px; }
.hidden { display:none !important; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:6px; }

.money { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; font-size:13.5px; }
.money.big { font-size:24px; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13.5px; }
.size { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- shell ---------- */
.top { position:sticky; top:0; z-index:30; height:var(--top); display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none !important; }
.brand img { width:30px; height:30px; }
.brand b { font:700 20px var(--font-display); letter-spacing:-.03em; }
.brand b i { font-style:normal; color:var(--cta); }
.brand .co { font-size:12.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; margin-left:2px; }
.icon-btn { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; width:34px; height:34px; cursor:pointer; font-size:15px; display:inline-grid; place-items:center; }
.icon-btn:hover { color:var(--ink); border-color:var(--line-strong); }
.burger { display:none; }

.gsearch { position:relative; flex:1; max-width:560px; }
.gsearch input { padding-left:34px; padding-right:36px; height:36px; border-radius:999px; background:var(--bg-soft); border-color:transparent; }
.gsearch input:focus { background:var(--surface); border-color:var(--cta); }
.gs-lens { position:absolute; left:12px; top:50%; transform:translateY(-52%); color:var(--faint); font-size:17px; pointer-events:none; }
.gs-key { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.gs-panel { position:absolute; left:0; right:0; top:42px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; z-index:40; }
.gs-panel a { display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--ink); border-bottom:1px solid var(--line); }
.gs-panel a:last-child { border-bottom:0; }
.gs-panel a:hover, .gs-panel a.on { background:var(--cta-soft); text-decoration:none; }
.gs-panel .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); min-width:72px; }
.gs-panel .t { font-weight:600; }
.gs-panel .s { color:var(--muted); font-size:13px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.gs-panel .none { padding:12px 14px; color:var(--muted); font-size:14px; }

.layout { display:grid; grid-template-columns:var(--side) 1fr; min-height:calc(100vh - var(--top)); }
.side { border-right:1px solid var(--line); background:var(--surface); padding:14px 10px 30px; position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow:auto; }
.side .grp { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:14px 12px 5px; }
.side a { display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--radius-sm); color:var(--slate); font-weight:600; font-size:14.5px; text-decoration:none; }
.side a .ic { width:18px; text-align:center; opacity:.75; font-size:14px; }
.side a:hover { background:var(--bg-soft); color:var(--ink); }
.side a.on { background:var(--cta-soft); color:var(--cta-ink); }
.side a.on .ic { opacity:1; }
.side a.primary { background:var(--cta); color:var(--on-cta); margin:4px 2px 8px; justify-content:center; }
.side a.primary:hover { background:var(--cta-dark); }
.side .foot { margin:22px 12px 0; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); line-height:1.6; }
main { min-width:0; }
.view { padding:22px 26px 60px; max-width:1480px; }

.page-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.page-head .sub { color:var(--muted); font-size:14px; margin-top:3px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:4px; }
.crumb a { color:var(--muted); }

/* ---------- controls ---------- */
.btn { font:600 14.5px var(--font-body); border-radius:var(--radius-sm); padding:8px 15px; cursor:pointer; border:1px solid var(--cta);
  background:var(--cta); color:var(--on-cta); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none !important; line-height:1.25; }
.btn:hover { background:var(--cta-dark); border-color:var(--cta-dark); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:var(--surface); color:var(--slate); border-color:var(--line); }
.btn.ghost:hover { color:var(--ink); border-color:var(--line-strong); background:var(--bg-soft); }
.btn.good { background:var(--up); border-color:var(--up); color:var(--on-up); }
.btn.danger { background:var(--surface); color:var(--down); border-color:var(--down-line); }
.btn.danger:hover { background:var(--down-bg); }
.btn.sm { padding:5px 10px; font-size:13.5px; }
.kbd { font:600 11px var(--mono); padding:1px 5px; border-radius:4px; border:1px solid currentColor; opacity:.65; }
.linkish { background:none; border:0; color:var(--cta); cursor:pointer; font:inherit; padding:0; }
.linkish:hover { text-decoration:underline; }

input,select,textarea { font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; width:100%; min-width:0; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--cta); box-shadow:var(--ring); }
input[readonly],input:disabled,select:disabled,textarea:disabled { background:var(--bg-soft); color:var(--muted); }
textarea { resize:vertical; min-height:70px; }
input[type=checkbox] { width:auto; accent-color:var(--cta); transform:scale(1.15); }
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > span { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.check { display:flex; align-items:center; gap:9px; font-size:14.5px; cursor:pointer; }
.search { position:relative; }
.search input { padding-left:32px; }
.search::before { content:"⌕"; position:absolute; left:11px; top:50%; transform:translateY(-52%); color:var(--faint); font-size:17px; }

.seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:2px; gap:2px; flex-wrap:wrap; }
.seg button,.seg a { border:0; background:none; font:600 13.5px var(--font-body); color:var(--muted); padding:5px 11px; border-radius:7px; cursor:pointer; text-decoration:none !important; white-space:nowrap; }
.seg button:hover,.seg a:hover { color:var(--ink); }
.seg .on, .seg button.on:hover, .seg a.on:hover { background:var(--navy); color:var(--surface); }
.seg .n { font-weight:400; opacity:.75; margin-left:3px; }

/* ---------- cards / kpis ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card > .hd { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.card > .hd .more { margin-left:auto; font-size:13.5px; }
.card > .bd { padding:14px 16px; }
.card > .bd.flush { padding:0; overflow-x:auto; }
.grid { display:grid; gap:16px; }
.grid.kpis { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns:1fr 1fr; }
.grid.main { grid-template-columns:2fr 1fr; }
.kpi { padding:14px 16px; }
.kpi .lbl { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.kpi .val { font:700 26px/1.2 var(--font-display); color:var(--navy); margin-top:4px; letter-spacing:-.02em; }
.kpi .val small { font:600 13px var(--font-body); color:var(--muted); margin-left:6px; letter-spacing:0; }
.kpi .sub { font-size:13px; color:var(--muted); margin-top:2px; }
.kpi.attn .val { color:var(--amber-deep); }

/* ---------- tables ---------- */
table.list { width:100%; border-collapse:collapse; font-size:14.5px; }
table.list th { text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--bg-soft); white-space:nowrap; }
table.list td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td { border-bottom:0; }
table.list tr.link:hover td { background:var(--cta-soft); cursor:pointer; }
table.list td.right, table.list th.right { text-align:right; }
table.list .ref { font-weight:600; color:var(--navy); white-space:nowrap; }
table.list td.stage { white-space:nowrap; }
table.list td.desc { min-width:220px; }
table.list .ref a { color:inherit; }
.empty { padding:28px 16px; text-align:center; color:var(--muted); }
.empty b { display:block; color:var(--ink); font-family:var(--font-display); margin-bottom:4px; }
.pager { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.pager .grow { flex:1; }

/* pills: stages */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid var(--grey-line); background:var(--grey-bg); color:var(--grey); white-space:nowrap; letter-spacing:.02em; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.quote { background:var(--grey-bg); color:var(--grey); border-color:var(--grey-line); }
.pill.order { background:var(--cta-soft); color:var(--cta-ink); border-color:var(--glass); }
.pill.produced { background:var(--violet-bg); color:var(--violet); border-color:var(--violet-line); }
.pill.delivered { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.pill.invoiced { background:var(--navy); color:var(--surface); border-color:var(--navy); }
.pill.cancelled { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }
.pill.held { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.pill.tough { background:var(--amber); color:#1b1300; border-color:var(--amber); }

/* stage timeline on the order page */
.timeline { display:flex; gap:0; align-items:stretch; }
.timeline .step { flex:1; padding:8px 10px; border:1px solid var(--line); background:var(--bg-soft); font-size:13px; color:var(--muted); position:relative; }
.timeline .step:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.timeline .step:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.timeline .step + .step { border-left:0; }
.timeline .step b { display:block; color:var(--navy); font-family:var(--font-display); font-weight:600; }
.timeline .step.done { background:var(--cta-soft); color:var(--cta-ink); }
.timeline .step.done b { color:var(--cta-ink); }
.timeline .step.now { background:var(--cta); color:var(--on-cta); }
.timeline .step.now b { color:var(--on-cta); }

/* make-up chip: 4 / 16 / 4 */
.makeup { font-family:var(--mono); font-size:12.5px; color:var(--cta-ink); background:var(--cta-soft); border-radius:6px; padding:1px 7px; white-space:nowrap; }
html[data-theme="dark"] .makeup { color:var(--cta-dark); }
.addr { white-space:pre-line; line-height:1.4; }

/* ---------- order editor ---------- */
.editor { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.editor .rail { position:sticky; top:calc(var(--top) + 16px); }
.cust { position:relative; }
.cust .picked { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); }
.cust .picked b { font-family:var(--font-display); font-weight:600; }
.cust .picked .sub { color:var(--muted); font-size:13px; }
.cust .picked .chg { margin-left:auto; }
.drop { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); z-index:20; max-height:320px; overflow:auto; }
.drop div { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px; }
.drop div:last-child { border-bottom:0; }
.drop div.on, .drop div:hover { background:var(--cta-soft); }
.drop .s { color:var(--muted); font-size:12.5px; }
.drop .acc { font-family:var(--mono); font-size:12px; color:var(--muted); margin-right:6px; }
.drop .stop { color:var(--down); font-weight:700; font-size:12px; margin-left:6px; }

table.lines { width:100%; border-collapse:collapse; }
table.lines th { text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.lines td { padding:4px 4px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.lines input { padding:6px 8px; font-size:14px; border-color:transparent; background:transparent; border-radius:6px; }
table.lines input:hover { border-color:var(--line); }
table.lines input:focus { background:var(--surface); border-color:var(--cta); }
table.lines input.n { text-align:right; font-family:var(--mono); font-size:13.5px; }
table.lines td.calc { font-family:var(--mono); font-size:13px; color:var(--muted); text-align:right; white-space:nowrap; padding-right:8px; }
table.lines td.ln { color:var(--faint); font-size:12px; text-align:right; width:28px; font-family:var(--mono); }
table.lines .del { border:0; background:none; color:var(--faint); cursor:pointer; font-size:16px; padding:2px 6px; border-radius:6px; }
table.lines .del:hover { color:var(--down); background:var(--down-bg); }
table.lines tr.bad td { background:var(--down-bg); }
.ac { position:relative; }
.ac .ghost { position:absolute; left:0; top:0; padding:6px 8px; font-size:14px; color:var(--faint); pointer-events:none; white-space:pre; overflow:hidden; max-width:100%; }
.ac .ghost b { font-weight:400; color:transparent; }
.ac .drop { position:fixed; left:auto; right:auto; top:auto; width:auto; min-width:360px; z-index:60; }
.ac .drop .mk { font-family:var(--mono); font-size:12px; color:var(--cta-ink); margin-left:8px; }
.addline { display:flex; gap:10px; align-items:center; padding:10px 6px; color:var(--muted); font-size:13.5px; }
.totals { display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:14.5px; }
.totals .lbl { color:var(--muted); }
.totals .tot { font-family:var(--font-display); font-weight:700; font-size:18px; border-top:2px solid var(--navy); padding-top:6px; margin-top:4px; }
.totals .money { font-size:14.5px; }
.totals .tot.money { font-size:18px; }
.savebar { display:flex; align-items:center; gap:10px; }
.savebar .state { font-size:13px; color:var(--muted); }
.savebar .state.dirty { color:var(--warn); font-weight:600; }
.savebar .state.err { color:var(--down); font-weight:600; }
.hintline { font-size:12.5px; color:var(--faint); margin-top:8px; line-height:1.6; }
.hintline .kbd { margin:0 2px; }

/* ---------- toasts ---------- */
.toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:var(--navy); color:var(--surface); padding:10px 14px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); font-size:14px; animation:tin .18s ease-out; }
.toast.bad { background:var(--down); color:var(--on-down); }
@keyframes tin { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .editor { grid-template-columns:1fr; }
  .editor .rail { position:static; }
  .grid.main { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:var(--top); width:var(--side); transform:translateX(-100%); transition:transform .18s; z-index:25; box-shadow:var(--shadow-lg); }
  .side.open { transform:none; }
  .burger { display:inline-grid; }
  .view { padding:16px 16px 60px; }
  .brand .co { display:none; }
  .gsearch { max-width:none; }
  .grid.two { grid-template-columns:1fr; }
}

/* ---------- cutting sheets (SVG) ---------- */
svg.sheet { background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); }
.glass-sheet { fill:var(--surface); stroke:var(--line-strong); stroke-width:6; }
.glass-piece rect { fill:var(--cta-soft); stroke:var(--cta); stroke-width:4; }
.glass-piece.rot rect { fill:var(--violet-bg); stroke:var(--violet); }
.glass-piece text { font:600 40px var(--font-display); fill:var(--cta-ink); }
.glass-piece text.sz { font:36px var(--mono); fill:var(--muted); }
html[data-theme="dark"] .glass-piece text { fill:var(--cta-dark); }
.glass-rem { fill:url(#hatch); fill:var(--warn-bg); stroke:var(--warn-line); stroke-width:3; stroke-dasharray:18 12; }
.glass-cut { stroke:var(--down); stroke-width:3; stroke-dasharray:24 14; opacity:.7; }

/* ---------- muscle memory: same places, same sizes ----------
   Page head sticks under the top bar so the action buttons never move while
   you scroll. Button order is fixed everywhere: destructive first (left),
   secondary ghosts, then the ONE primary action at the far right. */
.page-head { position:sticky; top:var(--top); z-index:20; background:var(--bg); padding:14px 0 12px; margin:-22px 0 14px; border-bottom:1px solid transparent; }
.page-head.stuck { border-bottom-color:var(--line); }
.page-head .actions { align-items:center; }
.page-head .actions form:not(.search) { display:contents; } /* search forms keep their box: the lens is anchored to it */
.btn { height:36px; padding:0 16px; }
.btn.sm { height:30px; padding:0 11px; }
.btn.danger { order:-2; }
.btn.ghost { order:-1; }
.page-head .actions .savebar .state { order:-3; }
.icon-btn { width:36px; height:36px; }
input,select { height:36px; }
textarea { height:auto; }
.seg button,.seg a { height:28px; display:inline-flex; align-items:center; }
.search input { height:36px; width:260px; }
.page-head .actions .search { flex:0 0 auto; }

/* numbers and dates are always the same width so columns line up page to page */
input.n { width:9ch; text-align:right; font-family:var(--mono); font-size:13.5px; }
input.n.short { width:6ch; }
input[type=date] { width:150px; }
table.list td.ref, table.list th.ref { width:132px; }
table.list td.stage, table.list th.stage { width:168px; }
table.list td.num, table.list th.num { width:72px; }
table.list td.money, table.list th.money { width:108px; }
table.list td.date, table.list th.date { width:92px; white-space:nowrap; }
table.list td.size { width:120px; }
table.lines input[data-c=qty] { width:6ch; }
table.lines input[data-c=w], table.lines input[data-c=h] { width:9ch; }
table.lines input[data-c=unit] { width:9ch; }
table.lines input[data-c=ref] { width:96px; }
table.lines td.calc { width:92px; }

/* shortcut cheat-sheet */
.keys { position:fixed; inset:0; background:rgba(11,31,34,.45); display:grid; place-items:center; z-index:70; }
.keys .box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:18px 22px; min-width:320px; }
.keys h3 { margin-bottom:10px; }
.keys dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:14px; }
.keys dt { text-align:right; }
.keys dd { margin:0; color:var(--muted); }
@media (max-width: 820px) {
  .page-head { margin:-16px 0 12px; }
  .search input { width:100%; }
}
/* ---------- sign in & account ---------- */
.who { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:var(--slate); padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.who:hover { text-decoration:none; color:var(--ink); border-color:var(--line-strong); }
.who .dot { width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px var(--up-bg); flex:none; }
.logout { display:contents; }
.notice { padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); font-size:14.5px; margin-bottom:14px; }
.notice.bad { background:var(--down-bg); border-color:var(--down-line); color:var(--down); }
.notice.good { background:var(--up-bg); border-color:var(--up-line); color:var(--up); }
.notice.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.notice code.pw { font-size:16px; font-weight:700; letter-spacing:.04em; padding:2px 8px; background:var(--surface); border:1px dashed var(--warn-line); border-radius:6px; user-select:all; }
.login-body { background:
  radial-gradient(900px 500px at 15% -10%, var(--cta-soft), transparent 60%),
  radial-gradient(700px 500px at 110% 110%, var(--glass), transparent 55%),
  var(--bg); }
.login { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login-card { width:100%; max-width:380px; padding:30px 30px 22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg); }
.login-card h1 { font-size:22px; margin-top:4px; }
.login-card .notice { margin:0; }
.login-brand { display:flex; align-items:center; gap:10px; color:var(--navy); }
.login-brand img { width:34px; height:34px; }
.login-brand b { font:700 22px var(--font-display); letter-spacing:-.03em; }
.login-brand b i { font-style:normal; color:var(--cta); }
.login-brand .co { font-size:12.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; }
.login-btn { justify-content:center; padding:10px 15px; margin-top:4px; }
.login-foot { text-align:center; font-size:12px; color:var(--faint); margin-top:6px; }
@media (max-width:720px) { .who { display:none; } }
/* ---- line pricing (slice 1b) ---- */
.pricecell { position:relative; display:flex; align-items:center; gap:4px; justify-content:flex-end; }
table.lines input.manual { color:var(--warn); font-weight:600; }
.pmark { font:600 10.5px var(--font-body); letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:1px 7px; white-space:nowrap; }
.pmark.manual { border:1px solid var(--warn-line); background:var(--warn-bg); color:var(--warn); cursor:pointer; }
.pmark.manual:hover { border-color:var(--warn); }
.pmark.none { border:1px solid var(--down-line); background:var(--down-bg); color:var(--down); }
.pricepop { position:absolute; z-index:60; min-width:300px; max-width:460px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:10px 12px; font-size:13px; }
.pricepop .t { font-weight:700; font-family:var(--font-display); margin-bottom:2px; }
.pricepop .s { color:var(--muted); font-size:12.5px; }
.pricepop table { width:100%; border-collapse:collapse; margin-top:6px; }
.pricepop td { padding:3px 4px; border-top:1px solid var(--line); vertical-align:top; }
.pricepop td.k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding-top:5px; }
.pricepop td.n { font-family:var(--mono); text-align:right; white-space:nowrap; }
.pricepop .warn { margin-top:6px; color:var(--warn); font-size:12.5px; }
/* ---------- invoicing ---------- */
.pill.credit { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }
.pill.paid { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.pill.overdue { background:var(--down); color:var(--on-down); border-color:var(--down); }
.pill.age0 { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.pill.age1 { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.pill.age2 { background:var(--amber); color:#1b1300; border-color:var(--amber); }
.pill.age3 { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }
.overdue-txt { color:var(--down); font-weight:600; }
form.inline { display:inline; margin:0; }
.kpi .val.money.due { color:var(--down); }
.credit-banner { border-color:var(--down-line); background:var(--down-bg); }
table.list tfoot th { text-align:left; font-size:13.5px; padding:9px 12px; border-top:2px solid var(--navy); background:var(--bg-soft); white-space:nowrap; }
/* ---- shapes ---- */
.shape-draw { width:100%; height:150px; display:block; }
.shape-box { fill:none; stroke:var(--line-strong); stroke-width:1.5; stroke-dasharray:8 6; vector-effect:non-scaling-stroke; }
.shape-pane { fill:var(--cta-soft); stroke:var(--cta); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.shape-score { stroke:var(--down); stroke-width:2; stroke-dasharray:10 7; vector-effect:non-scaling-stroke; }
.shape-thumb { height:30px; width:auto; max-width:60px; vertical-align:middle; margin-left:6px; }
.shape-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.shape-card .hd h2 { font-size:18px; }
.shape-none { color:var(--muted); font-size:13px; padding:40px 0; text-align:center; }
details.formulas { margin-top:8px; }
details.formulas th { text-align:left; padding:3px 8px 3px 0; color:var(--muted); font-weight:600; white-space:nowrap; vertical-align:top; }
details.formulas td { padding:3px 0; word-break:break-word; }
.try { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.try-draw .shape-draw { height:240px; }
.measures { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; margin:10px 0; }
@media (max-width:720px) { .try { grid-template-columns:1fr; } }
/* editor */
button.shp { font:600 13px var(--mono); padding:5px 8px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; min-width:40px; }
button.shp:hover { border-color:var(--line); }
button.shp.on { background:var(--cta-soft); color:var(--cta-ink); border-color:var(--cta); }
tr.shaperow td { background:var(--bg-soft); padding:10px 12px 12px 40px; }
.shapepanel { display:grid; grid-template-columns:minmax(260px, 1fr) 220px; gap:16px; align-items:start; }
.shapepanel .measures { margin:8px 0 0; }
.shapepanel .shape-draw { height:160px; }
.shapepanel .info { font-size:13px; color:var(--muted); margin-top:6px; }
.shapepanel .info b { color:var(--ink); }
.shapepanel .info .bad { color:var(--down); }
/* cutting sheet */
.glass-box { fill:var(--warn-bg); stroke:var(--line-strong); stroke-width:2; stroke-dasharray:14 10; }
.shapepanel input, .shapepanel select { border-color:var(--line); background:var(--surface); }
.glass-piece.shaped polygon { fill:var(--cta-soft); stroke:var(--cta); stroke-width:4; stroke-linejoin:round; }