@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/assets/Montserrat-latin-variable.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/assets/Montserrat-peso-subset.woff2) format("woff2");unicode-range:U+20B1}
:root{--navy:#0b2a68;--navy2:#123a8c;--royal:#2f6bff;--link:#0346b4;--red:#d71920;--red-d:#c4161c;--muted:#3a3f4b;--soft:#f5f7fb;--page:#f3f6fb;
  --line:#d6e2f5;--line2:#e1e5ec;--tint:#eef4ff;--amber:#8a5a00;--amber-bg:#fff4d6;--green:#0f5c45;--green-bg:#e3f6ea;--r:10px;--r-lg:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;background:var(--page);color:var(--muted);font-size:14px;line-height:1.5;min-height:100vh}
a{color:var(--link)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
h1{font-size:22px;color:var(--navy);font-weight:800;letter-spacing:.01em}
h2{font-size:15px;color:var(--navy);font-weight:800}
.muted{color:#5b6475}.small{font-size:12px}

/* ------------------------------------------------------------ shell */
.top{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;position:sticky;top:0;z-index:20}
.top .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.top .brand img{height:38px;width:auto;display:block}
.top .brand span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border-left:2px solid var(--red);padding-left:14px;line-height:1.25}
.who{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--navy);font-weight:600}
.layout{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:calc(100vh - 59px)}
.side{background:var(--navy);padding:18px 12px}
.navtoggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.burger{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;font-size:13px;cursor:pointer;user-select:none}
.burger .bars,.burger .bars::before,.burger .bars::after{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;content:'';position:relative;transition:transform .15s,background .15s}
.burger .bars::before{position:absolute;top:-6px;left:0}.burger .bars::after{position:absolute;top:6px;left:0}
.navtoggle:focus-visible~.top .burger{outline:3px solid var(--royal);outline-offset:2px}
.navtoggle:checked~.top .burger .bars{background:transparent}.navtoggle:checked~.top .burger .bars::before{top:0;transform:rotate(45deg)}.navtoggle:checked~.top .burger .bars::after{top:0;transform:rotate(-45deg)}
.side a{display:flex;align-items:center;gap:10px;color:#cfdcff;text-decoration:none;font-weight:600;font-size:13.5px;padding:10px 12px;border-radius:9px;margin-bottom:2px}
.side a:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.on{background:#fff;color:var(--navy)}
.side .cnt{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;padding:1px 8px;font-weight:700}
.side .sep{height:1px;background:rgba(255,255,255,.14);margin:12px 8px}
.side small{display:block;color:#8fa6dd;font-size:10.5px;padding:0 12px;margin-top:14px;line-height:1.5}
main{padding:22px 20px 40px;min-width:0}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pagehead .sub{font-size:12.5px;color:#5b6475;margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------ controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:var(--r);font:inherit;font-weight:700;font-size:13px;padding:8px 16px;text-decoration:none;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--navy2)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}.btn.ghost:hover{background:var(--tint)}
.btn.danger{background:#fff;color:var(--red-d);border-color:#f2c1c3}.btn.small{padding:5px 11px;font-size:12px}
input,select,textarea{font:inherit;font-size:13px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0;max-width:100%}
input:focus,select:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--royal);outline-offset:1px}
label.fld{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:12px}
label.fld input{display:block;width:100%;margin-top:5px;padding:10px 12px;font-size:14px}
.inline{display:inline-flex;gap:6px;align-items:center}

/* ------------------------------------------------------------ badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:3px 10px;border-radius:99px;line-height:1.4;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok,.b-paid,.b-active{background:var(--green-bg);color:#17803d}
.b-warn,.b-issued,.b-medium,.b-open{background:var(--amber-bg);color:var(--amber)}
.b-bad,.b-overdue,.b-suspended,.b-high{background:#fde8e8;color:var(--red-d)}
.b-draft,.b-low,.b-void,.b-none{background:#eceff5;color:#3a3f4b}
.b-free{background:var(--green-bg);color:#17803d}.b-paidb{background:#e8eefb;color:var(--navy)}

/* ------------------------------------------------------------ cards, tiles */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 18px -14px rgba(11,42,104,.35);padding:16px 18px;min-width:0}
.card>h2{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card>h2 a{font-size:12px;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 6px 18px -14px rgba(11,42,104,.35);display:flex;flex-direction:column;gap:2px;min-width:0;border-top:3px solid var(--navy)}
.tile.warn{border-top-color:#e0a200}.tile.bad{border-top-color:var(--red)}.tile.ok{border-top-color:#17803d}
.tile .lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--link);text-decoration:none}
.tile a.lbl:hover{text-decoration:underline}
.tile .val{font-size:26px;font-weight:800;color:var(--navy);line-height:1.2;margin-top:4px}
.tile .val small{font-size:13px;font-weight:600;color:#5b6475}
.tile .sub:empty{display:none}
.tile .sub{font-size:12px;color:#5b6475;display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tile .sub a{font-weight:700;text-decoration:none}.tile .sub a:hover{text-decoration:underline}
.split{display:flex;height:8px;border-radius:99px;overflow:hidden;background:#eceff5;margin-top:8px}
.split i{display:block;height:100%}.split .f{background:#17803d}.split .p{background:var(--navy)}.split .pp{background:#e0a21b}
.payq{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.payqr{width:132px;height:132px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:4px;image-rendering:pixelated}.payq .kvs{flex:1;min-width:220px}
.two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
.col{display:grid;gap:14px;align-content:start;grid-auto-rows:auto;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.stack{display:grid;gap:14px}

/* ------------------------------------------------------------ alerts, feed, kv */
.alerts{list-style:none;display:grid;gap:8px}
.alerts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--soft)}
.alerts li a.msg{color:var(--navy);font-weight:600;text-decoration:none;font-size:13px;overflow-wrap:anywhere}
.alerts li a.msg:hover{text-decoration:underline}
.alerts .meta{font-size:11.5px;color:#5b6475;grid-column:2/4}
.alerts .when{font-size:11.5px;color:#5b6475;white-space:nowrap}
.feed{list-style:none;display:grid;gap:0}
.feed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.feed li:last-child{border-bottom:0}.feed .t{font-size:11.5px;color:#5b6475;white-space:nowrap}.feed b{color:var(--navy)}
.kvs{display:grid;gap:6px}
.kvs .row{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px dashed var(--line2);padding-bottom:6px}
.kvs .row:last-child{border:0}.kvs .row b{color:var(--navy);text-align:right}
.recon{display:grid;gap:10px}
.recon .p{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--soft);text-decoration:none;color:var(--navy)}
.recon .p:hover{border-color:var(--royal)}
.note{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--royal);border-radius:var(--r);padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.note.warn{background:var(--amber-bg);border-left-color:#e0a200}.note.bad{background:#fff5f5;border-left-color:var(--red)}
.empty{padding:16px;text-align:center;color:#5b6475;font-size:13px}

/* ------------------------------------------------------------ tables */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.toolbar .search{flex:1 1 220px;min-width:160px}
.toolbar .sel{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.toolbar .count{margin-left:auto;font-size:12px;color:#5b6475;font-weight:600}
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
.grid th{background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:10px 8px;letter-spacing:.06em}
.grid th a{color:#fff;text-decoration:none;display:inline-flex;gap:6px}.grid .arr{opacity:.6;font-size:9px;align-self:center}.grid a.on .arr{opacity:1}
.grid tr.f td{background:var(--tint);padding:6px 8px;border-bottom:1px solid var(--line)}
.grid tr.f input,.grid tr.f select{width:100%;padding:5px 7px;font-size:12px}
.grid .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:4px}.grid .pair input{width:100%;min-width:0;padding-left:6px;padding-right:4px}.grid .pair:has(input[type=date]){grid-template-columns:minmax(0,1fr)}.grid .pair input[type=date]{width:100%;min-width:86px;padding-left:4px;padding-right:2px}
.grid td[data-label=Name]{min-width:130px}.grid td[data-label=Email]{min-width:118px;word-break:normal}
.grid td{padding:10px 8px;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--navy)}
.grid tbody tr:hover td{background:#fafcff}.grid tbody tr[data-href]{cursor:pointer}
.grid tbody tr:last-child td{border-bottom:0}
.grid td a{font-weight:600}.grid td.r,.grid th.r{text-align:right}.grid td.nw{white-space:nowrap}
.grid td .sub{display:block;font-size:11.5px;color:#5b6475;font-weight:400}
.grid tr.none td{text-align:center;color:#5b6475;padding:26px}
.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;font-size:12.5px}
.pg{font-weight:700;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:5px 12px;background:#fff}.pg.off{color:#9aa3b5;background:var(--soft)}

/* ------------------------------------------------------------ invoice frame */
.invframe{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:block;min-height:600px}

/* ------------------------------------------------------------ login */
.loginpage{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 340px at 50% -80px,#dbe6ff 0,rgba(219,230,255,0) 70%),var(--page)}
.logincard{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 14px 34px -18px rgba(11,42,104,.4);padding:28px 26px}
.logincard img{height:46px;display:block;margin-bottom:18px}
.logincard h1{margin-bottom:4px}.logincard p.s{font-size:12.5px;margin-bottom:18px;color:#5b6475}
.logincard .btn{width:100%;padding:12px;font-size:14px}
.err{background:#fff5f5;border:1px solid #f6c9cb;color:var(--red-d);border-radius:var(--r);padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.okmsg{background:var(--green-bg);border:1px solid #bfe6cc;color:#17803d;border-radius:var(--r);padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.logincard .foot{margin-top:18px;font-size:11px;color:#5b6475;border-top:1px solid var(--line2);padding-top:12px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.two{grid-template-columns:minmax(0,1fr)}.col{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;min-height:0}
  .side{display:flex;align-items:center;overflow-x:auto;padding:6px 10px;gap:4px;position:static;align-self:start;scrollbar-width:thin}
  .side a{margin:0;white-space:nowrap;padding:0 14px;min-height:44px;flex:none}.side .sep,.side small{display:none}
  /* delivery-style tables with long cells stack instead of clipping */
  .tablewrap:has(.mini){background:transparent;border:0;overflow:visible}
  table.mini,.mini tbody,.mini thead{display:block}.mini tr.h{display:none}
  .mini tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 14px;margin-bottom:10px}
  .mini tbody td{display:flex;justify-content:space-between;gap:14px;text-align:right;padding:7px 0;border-bottom:1px dashed var(--line2);overflow-wrap:anywhere}
  .mini tbody td:last-child{border-bottom:0}
  .mini tbody td::before{content:attr(data-label);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link);text-align:left;flex:none;padding-top:2px}
  .mini tbody td[data-label=""]::before{display:none}
  main{padding:16px 14px 32px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .top{padding:8px 14px;position:static;flex-wrap:wrap;justify-content:flex-start;gap:8px 10px}
  .burger{display:inline-flex;order:1}.top .brand{order:2;margin-right:auto}.top .brand span{display:none}.top .brand img{height:32px}
  .who{order:3;flex:1 0 100%;justify-content:space-between;gap:8px}.who .u{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  .who .btn,.who form .btn{min-height:44px;display:inline-flex;align-items:center}
  .side{display:none;flex-direction:column;align-items:stretch;overflow:visible;padding:8px 10px}
  .navtoggle:checked~.layout .side{display:flex}
  .side a{white-space:normal}
  .pg{min-height:44px;display:inline-flex;align-items:center}.toolbar .btn,.pagehead .btn{min-height:44px;display:inline-flex;align-items:center}
  .col{grid-template-columns:minmax(0,1fr)}
  .tile .val{font-size:22px}
  .tablewrap{background:transparent;border:0;overflow:visible}
  table.grid,.grid tbody,.grid thead{display:block}
  .grid tr.h{display:none}
  .grid tr.f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;margin-bottom:12px}
  .grid tr.f td{display:block;background:none;padding:0;border:0}
  .grid tr.f td:empty{display:none}
  .grid tr.f td{min-width:0}.grid tr.f td:has(.pair){grid-column:1/-1}.grid .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}.grid .pair input{width:100%;min-width:0}.grid tr.f input,.grid tr.f select{min-width:0;max-width:100%}
  .grid tr.f td::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link);margin-bottom:3px}
  .grid tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 14px;margin-bottom:10px}
  .grid tbody td{display:flex;justify-content:space-between;gap:14px;text-align:right;padding:7px 0;border-bottom:1px dashed var(--line2)}
  .grid tbody td:last-child{border-bottom:0}
  .grid tbody td::before{content:attr(data-label);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link);text-align:left;flex:none;padding-top:2px}
  .grid tbody tr.none{padding:0}.grid tr.none td{display:block;text-align:center}.grid tr.none td::before{display:none}
  .alerts li{grid-template-columns:auto minmax(0,1fr)}.alerts .when{grid-column:2}.alerts .meta{grid-column:2}
  .toolbar .count{margin-left:0;width:100%}
}
@media (max-width:420px){.tiles{grid-template-columns:minmax(0,1fr)}}
.feed.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:900px){.feed.cols{grid-template-columns:minmax(0,1fr)}}
.health{width:100%;border-collapse:collapse;font-size:12.5px}.health td,.health th{padding:7px 4px;border-bottom:1px solid var(--line2);text-align:left}.health th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.health td.r,.health th.r{text-align:right}.health tr:last-child td{border-bottom:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-grid label.fld.wide{grid-column:1/-1}
@media (max-width:760px){.form-grid{grid-template-columns:minmax(0,1fr)}}
label.fld select,label.fld textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;font-size:14px}
.secret{font-family:ui-monospace,Menlo,monospace;background:var(--tint);border:1px dashed var(--royal);padding:8px 12px;border-radius:8px;display:inline-block;font-size:15px;color:var(--navy);word-break:break-all}
/* ------------------------------------------------------------ 404 */
.nf{max-width:560px;margin:28px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 26px}
.loginpage .nf{margin:0;border:0;padding:0;background:none}
.nf-code{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--navy);border-bottom:4px solid var(--red);display:inline-block;padding:0 14px 8px;margin-bottom:14px}
.nf h2{margin:0 0 8px;color:var(--navy);font-size:20px}
.nf p{color:#5b6475;font-size:14px;margin:0 0 16px;overflow-wrap:anywhere}
.nf code{background:var(--tint);padding:2px 6px;border-radius:6px;color:var(--navy)}
.nf-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
