/* Document Generator — design system (v2 redesign).
   Self-hosted fonts + tokens + app shell + reusable components.
   Company UI colors here are for the WEB UI only; PDF letterheads use
   companies.py primary_color and are never affected by this file. */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face{font-family:'Hanken Grotesk';src:url('/static/fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/static/fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/static/fonts/hanken-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/static/fonts/hanken-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/static/fonts/hanken-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#15171c; --ink2:#3a3f47; --mut:#6b7280; --faint:#9aa1ab;
  --line:#e7e9ed; --line2:#f3f4f6; --bg:#f6f7f9; --card:#fff; --side:#15171c;
  --gold:#a9760f; --gold-bright:#d8951f; --gold-soft:rgba(200,136,29,.12); --gold-border:#cdb277;
  --ok:#16794a; --danger:#b3261e; --warn:#92651b;
  --co-ll:#ea3d3a; --co-pin:#15171c; --co-au:#2b3aa0;
  --r:8px; --r-md:9px; --r-lg:13px; --r-pill:20px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
h1,h2,h3{margin:0;color:var(--ink)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.muted{color:var(--mut)} .spacer{flex:1}
.page-title{font-size:20px;font-weight:800;letter-spacing:-.02em}
::selection{background:rgba(200,136,29,.22)}

/* ---------- app shell ---------- */
.app{display:flex;height:100vh;background:var(--bg);overflow:hidden}
.sidebar{width:240px;flex:0 0 240px;height:100vh;background:var(--side);display:flex;flex-direction:column;padding:16px 13px;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 7px 15px}
.sb-mark{width:31px;height:31px;border-radius:9px;background:linear-gradient(150deg,#d8951f,#a96d12);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 31px;box-shadow:0 2px 8px -2px rgba(200,136,29,.6)}
.sb-mark svg{width:16px;height:16px}
.sb-name{color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em}
.sb-sub{color:#697080;font-size:11px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;
  color:#aab0bd;cursor:pointer;text-decoration:none;margin-bottom:1px}
.nav-item svg{width:16px;height:16px;flex:0 0 16px}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 var(--gold-bright)}
.nav-count{margin-left:auto;font-size:11px;font-weight:600;color:#7a8190;background:rgba(255,255,255,.07);
  padding:1px 7px;border-radius:20px;font-family:'JetBrains Mono',monospace}
.sb-divider{height:1px;background:rgba(255,255,255,.07);margin:13px 6px}
.sb-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#5b626f;padding:2px 10px 6px;font-weight:600}
.sb-co{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:#aab0bd;font-size:13px;cursor:pointer;text-decoration:none}
.sb-co:hover{background:rgba(255,255,255,.05)}
.sb-co.active{background:rgba(255,255,255,.06);color:#e7e9ee}
.sb-co .co-dot{width:8px;height:8px}
.sb-co .c{margin-left:auto;font-size:11px;color:#6c7380;font-family:'JetBrains Mono',monospace}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;background:rgba(255,255,255,.04);text-decoration:none}
.sb-avatar{width:28px;height:28px;border-radius:50%;background:#2c2f37;color:#d6b66a;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:12px;flex:0 0 28px}

.content{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;background:var(--bg)}
.content-body-inner{max-width:1180px}
.topbar{height:57px;flex:0 0 57px;background:#fff;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:13px;padding:0 22px}
.topbar .t-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.topbar .t-sub{font-size:12.5px;color:var(--faint)}
.content-body{flex:1;overflow:auto;padding:22px}

/* mobile bars (hidden on desktop) */
.m-topbar,.m-nav{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:35px;padding:0 14px;border-radius:9px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);
  text-decoration:none;white-space:nowrap;line-height:1}
.btn:hover{background:#f6f7f9}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.primary:hover{background:#000}
.btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}.btn.gold:hover{filter:brightness(1.06)}
.btn.green{background:var(--ok);color:#fff;border-color:var(--ok)}.btn.green:hover{filter:brightness(1.06)}
.btn.danger{background:#fff;color:var(--danger);border-color:#f0c4c4}.btn.danger:hover{background:#fdecec}
.btn.amber{background:#faf6ef;color:#9a7b3f;border-color:#e2d8c4}.btn.amber:hover{background:#f4ecdd}
.btn svg{width:14px;height:14px}

/* ---------- cards / pills / badges ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.s-draft{background:#eef0f3;color:#475569}.s-issued{background:#e7f3ee;color:#16794a}
.s-accepted{background:#e7eefb;color:#2e3687}.s-paid{background:#dcfce7;color:#166534}
.s-void{background:#fde8e8;color:#b3261e}.s-declined{background:#f6efe6;color:#9a7b3f}
.s-superseded{background:#f1f0ee;color:#6b6b6b}
.co-badge{font-size:11px;font-weight:700;color:#fff;padding:4px 9px;border-radius:7px;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.co-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}

/* ---------- forms ---------- */
label{display:block;font-size:11.5px;font-weight:600;color:var(--faint);margin:12px 0 5px}
input,select,textarea{width:100%;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 11px;font:inherit;
  font-size:13.5px;background:#fff;color:var(--ink);outline:none}
textarea{height:auto;min-height:60px;padding:8px 11px}
input:focus,select:focus,textarea:focus{border-color:var(--gold-border);box-shadow:0 0 0 3px var(--gold-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.row-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}

.searchwrap{position:relative;display:inline-flex;align-items:center}
.searchwrap svg{position:absolute;left:11px;width:14px;height:14px;color:var(--faint);pointer-events:none}
.searchwrap input{height:35px;padding-left:33px;min-width:230px;font-size:13px;background:#f7f8fa}

.flash{padding:.6rem .9rem;border-radius:var(--r);margin:0 0 .6rem;font-size:13.5px}
.flash.ok{background:#e7f3ee;color:var(--ok)}.flash.warn{background:#fdf3e0;color:var(--warn)}
.flash.error{background:#fde8e8;color:var(--danger)}
.empty{text-align:center;color:var(--mut);padding:2.5rem 1rem}
.empty svg{width:34px;height:34px;color:#c2c7cf;margin-bottom:.5rem}

/* ---------- tables (carry-over for existing list/view/form until restyled) ---------- */
table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
table.tbl th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  text-align:left;padding:.7rem .8rem;background:#fafbfc;border-bottom:1px solid var(--line)}
table.tbl td{padding:.7rem .8rem;border-top:1px solid var(--line2);font-size:13.5px;vertical-align:middle}
table.tbl tbody tr:hover td{background:#fafbfc}
.rowlink{color:var(--ink);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}
table.kv{width:100%;border-collapse:collapse}
table.kv th{text-align:left;font-weight:500;color:var(--mut);font-size:12.5px;padding:.4rem .6rem .4rem 0;white-space:nowrap;vertical-align:top;width:38%}
table.kv td{padding:.4rem 0;font-size:13.5px;border-top:1px solid var(--line2)}
table.kv tr:first-child th,table.kv tr:first-child td{border-top:none}

/* carry-over: existing list create-rows (removed in a later stage) */
.newbar{display:flex;flex-direction:column;gap:.5rem}
.newgroup{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:9px;padding:.6rem .8rem}
.co-meta{min-width:0;flex:1}.co-name{font-weight:600;font-size:13.5px}.co-sub{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandbtn{font-size:12.5px;font-weight:600;color:#fff;background:var(--brand);border:1px solid var(--brand);border-radius:7px;padding:.45rem .7rem;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;cursor:pointer;text-decoration:none}
.brandbtn:hover{filter:brightness(.94)}.brandbtn svg{width:13px;height:13px}

/* ---------- documents grid table (Stage 2) ---------- */
.dtable{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.dgrid{display:grid;grid-template-columns:1.5fr .8fr 1.5fr .9fr .9fr .9fr;align-items:center}
.dhead{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  padding:11px 18px;background:#fafbfc;border-bottom:1px solid var(--line)}
.drow{padding:13px 18px;border-top:1px solid var(--line2);cursor:pointer;font-size:13.5px;color:var(--ink);text-decoration:none}
.drow:hover{background:#fafbfc}
.r-right{text-align:right} .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcards{display:none}
.mcard{display:flex;flex-direction:column;gap:6px;padding:13px 16px;border-top:1px solid var(--line2);cursor:pointer;color:var(--ink);text-decoration:none}
.mcard:first-child{border-top:none}

/* chips (company filter / segmented) */
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:20px;border:1px solid var(--line);
  background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--gold-border)} .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* document view: details + lifecycle */
.detail-grid{display:grid;grid-template-columns:130px 1fr;row-gap:11px;font-size:13.5px}
.detail-grid .k{color:var(--faint)}
.litem{display:grid;align-items:center;padding:11px 18px;border-top:1px solid var(--line2);font-size:13px}
.litem.head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:11px 18px 9px;border-top:none}
.tl-row{display:flex;gap:12px;align-items:flex-start}
.tl-col{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.tl-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.tl-dot svg{width:11px;height:11px}
.tl-line{width:2px}
.only-sm{display:none}

/* ---------- form (Stage 4) ---------- */
.form-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.form-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.lscroll{overflow-x:auto}
.lhead,.lrow{display:grid;align-items:center;column-gap:9px}
.lhead{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);padding:0 14px 8px}
.lrow{padding:4px 14px;border-top:1px solid var(--line2)}
.lcell{height:32px;border:1px solid transparent;border-radius:6px;padding:0 7px;font:inherit;font-size:13px;
  background:transparent;color:var(--ink);outline:none;min-width:0;width:100%}
.lcell:hover{background:#f6f7f9}
.lcell:focus{border-color:var(--gold-border);background:#fff;box-shadow:0 0 0 2px var(--gold-soft)}
.lcell.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.lcell.r{text-align:right}
.ldesc{box-sizing:border-box;height:32px;min-height:32px;resize:none;overflow:hidden;line-height:1.45;
  padding-top:6px;padding-bottom:6px;white-space:pre-wrap;word-break:break-word;font-family:inherit}
.lrow{align-items:start}
/* serial numbers: dense identifiers, so give them the mono face at a smaller size */
.lserial{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.01em}

.lnum{color:#bcc2cc;font-family:'JetBrains Mono',monospace;font-size:12px}
.ltotal{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600}
.lx{display:flex;align-items:center;justify-content:center;color:#c2c7cf;cursor:pointer}.lx:hover{color:var(--danger)}
.addrow{display:inline-flex;align-items:center;gap:6px;margin:11px 14px 15px;padding:7px 12px;border:1px dashed #d8dbe1;
  border-radius:8px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;background:none}
.addrow:hover{border-color:var(--gold-border);color:var(--gold)} .addrow svg{width:13px;height:13px}
/* document-level discount */
.ldiscbar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line);background:#fafbfc}
.ldisc-label{font-size:12.5px;font-weight:700}
.ldiscbar .spacer{flex:1}
.ldisc-mode{width:auto;padding:5px 8px;font-size:12px}
.ldisc-val{width:96px;padding:5px 9px;font-size:12.5px}
/* per-item spec sheet */
.lspecbar{display:flex;align-items:center;gap:8px;padding:0 14px 6px 38px}
.lspec-toggle{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;
  background:none;font-size:11.5px;font-weight:600;color:var(--mut);cursor:pointer}
.lspec-toggle svg{width:13px;height:13px;opacity:.85}
.lspec-toggle:hover{border-color:var(--gold-border);color:var(--gold)}
.lspec-toggle.on,.lspec-toggle.open{border-color:var(--gold-border);color:var(--gold);background:var(--gold-soft)}
.lspec-badge{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
.lspec{padding:0 14px 10px 38px}
.lspec textarea{width:100%;min-height:88px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;
  font-size:12.5px;line-height:1.55;color:var(--ink);background:#fbfcfd;outline:none;resize:vertical}
.lspec textarea:focus{border-color:var(--gold-border);background:#fff;box-shadow:0 0 0 2px var(--gold-soft)}
/* per-item photos */
.lbar-sep{width:1px;height:14px;background:var(--line);margin:0 3px}
.lphoto-count{font-size:10.5px;font-weight:700;color:var(--mut)}
.lphoto-hint{font-size:11.5px;color:var(--faint);font-style:italic}
.lphoto-btn:disabled{opacity:.45;cursor:not-allowed}
.lphoto-size{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--mut)}
.lphoto-size select{font:inherit;font-size:11.5px;font-weight:600;padding:2px 5px;border:1px solid var(--line);
  border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.lphoto-strip{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px 38px}
.lthumb{position:relative;width:62px;height:62px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#f6f7f9}
.lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lthumb-x{position:absolute;top:2px;right:2px;width:17px;height:17px;border:none;border-radius:50%;
  background:rgba(17,19,28,.72);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lthumb-x:hover{background:var(--danger)}
.lpanel{background:var(--ink);border-radius:var(--r-lg);padding:19px;color:#fff}
.lp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a909c;margin-bottom:14px}
.lp-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:10px}
.lp-row .k{color:#aab0bd} .lp-row .v{font-family:'JetBrains Mono',monospace}
.lp-div{height:1px;background:rgba(255,255,255,.12);margin-bottom:12px}
.lp-grand{display:flex;justify-content:space-between;align-items:baseline}
.lp-grand .v{font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:700;letter-spacing:-.01em}
.fld-label{font-size:11.5px;font-weight:600;color:var(--faint);margin-bottom:5px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink2)}
.switch input{display:none}
.switch .track{width:34px;height:20px;border-radius:20px;background:#d3d6dc;position:relative;transition:background .15s;flex:0 0 34px}
.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.switch input:checked + .track{background:var(--gold)}
.switch input:checked + .track .knob{left:16px}

/* ---------- dashboard (Stage 5) ---------- */
.seg{display:inline-flex;background:#e9ebef;border-radius:10px;padding:3px;gap:3px}
.seg button{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--mut);padding:6px 15px;border-radius:8px;cursor:pointer}
.seg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,28,.1)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-work{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.wl-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line2);cursor:pointer;text-decoration:none;color:var(--ink)}
.wl-row:hover{background:#fafbfc}
.cnt-chip{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;font-family:'JetBrains Mono',monospace}

/* ---------- login (two-panel) ---------- */
.login-card{display:flex;width:100%;max-width:900px;margin:1.5rem auto;background:#fff;border:1px solid #d8dbe1;
  border-radius:16px;box-shadow:0 20px 50px -28px rgba(20,22,28,.4);overflow:hidden;min-height:460px}
.login-left{flex:0 0 320px;background:var(--ink);padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.login-right{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 46px}
.login-right .inner{max-width:340px;width:100%;margin:0 auto}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .kpi-grid{grid-template-columns:1fr 1fr} .dash-work{grid-template-columns:1fr}
  .lscroll .litem{min-width:520px}
  .login-card{flex-direction:column;min-height:0;max-width:400px}
  .login-left{flex:0 0 auto;padding:24px 22px}
  .login-left .login-foot{display:none}
  .login-right{padding:24px 22px}
  .dtable{display:none} .mcards{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .only-sm{display:block}
  .detail-grid{grid-template-columns:110px 1fr}
  .form-grid{grid-template-columns:1fr} .form-side{position:static}
  .lscroll{border:1px solid var(--line);border-radius:var(--r);}
  .lhead,.lrow{min-width:540px}
  .app{flex-direction:column;height:auto;min-height:100dvh;overflow:visible}
  .sidebar,.topbar{display:none}
  .content{height:auto;min-height:100dvh}
  .m-topbar{display:flex;align-items:center;gap:10px;height:54px;flex:0 0 54px;background:var(--side);padding:0 16px}
  .m-topbar .m-mark{width:27px;height:27px;border-radius:8px;background:linear-gradient(150deg,#d8951f,#a96d12);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 27px}
  .m-topbar .m-mark svg{width:14px;height:14px}
  .m-topbar .m-title{color:#fff;font-size:15px;font-weight:700}
  .m-topbar .m-avatar{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#2c2f37;color:#d6b66a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
  .content-body{padding:14px;padding-bottom:74px;overflow:visible}
  .m-nav{display:flex;align-items:stretch;position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid var(--line);padding:0 6px;z-index:30}
  .m-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--faint);text-decoration:none}
  .m-nav a svg{width:19px;height:19px}
  .m-nav a.active{color:var(--gold)}
  .grid2{grid-template-columns:1fr}
  .hide-sm{display:none}
  .searchwrap,.searchwrap input{width:100%}
  /* card-stacked tables on mobile (existing pattern) */
  table.cards{border:none;background:transparent}
  table.cards thead{display:none}
  table.cards tbody,table.cards tr,table.cards td{display:block}
  table.cards tr{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem;padding:.2rem .1rem}
  table.cards tr:hover td{background:transparent}
  table.cards td{display:flex;justify-content:space-between;gap:1rem;align-items:center;border:none;border-top:1px solid var(--line2);padding:.45rem .85rem;text-align:right}
  table.cards td::before{content:attr(data-label);color:var(--mut);font-weight:500;text-align:left;white-space:nowrap}
  table.cards td.cardtitle{border-top:none;padding-top:.6rem;font-size:15px;font-weight:600;justify-content:flex-start}
  table.cards td.cardtitle::before{content:none}
  table.cards td.hide-sm{display:none}
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg)}
  .scroll-x table.tbl{border:none;min-width:580px}
}