/* Outflow Console. The card designs bring their own classes (.card, .lg, .steps ...), so the
   console's own panels use names the cards never do. */
:root{ --bg:#0A0908; --s1:#131110; --s2:#1A1715; --s3:#221E1B; --text:#F4EEE7; --dim:#A99E93; --mut:#6F655C;
  --line:rgba(255,240,225,.08); --line2:rgba(255,240,225,.14); --acc:#E8652D; --acc2:#F4833F; --ok:#4FA86B; --warn:#E0A23A; --bad:#E0614F;
  --sans:'Space Grotesk', system-ui, sans-serif; --ui:'Inter', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; --serif:'Playfair Display', Georgia, serif; }
*{ box-sizing:border-box; }
html, body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ui); -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
input, select, textarea{ font:500 14px var(--ui); color:var(--text); background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:0 12px; height:40px; width:100%; min-width:0; outline:none; }
textarea{ height:auto; padding:10px 12px; resize:vertical; }
input:focus, select:focus, textarea:focus{ border-color:var(--acc); }
input[type=color]{ width:52px; padding:4px; cursor:pointer; }
input[type=file]{ display:none; }
input[type=checkbox]{ width:16px; height:16px; accent-color:var(--acc); }

/* sign in */
.signin{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(60% 50% at 70% 10%, rgba(232,101,45,.16), transparent 70%), var(--bg); }
.lbox{ width:100%; max-width:400px; background:var(--s1); border:1px solid var(--line2); border-radius:22px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lbox h2{ margin:18px 0 4px; font:600 24px var(--sans); letter-spacing:-.03em; } .lbox p{ margin:0 0 18px; color:var(--dim); font-size:13.5px; }
.brand{ display:flex; align-items:center; gap:10px; font:600 16px var(--sans); letter-spacing:-.02em; }
.brand i{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--acc2), #B83C0C); display:grid; place-items:center; font:800 13px var(--ui); color:#160A04; font-style:normal; flex-shrink:0; }
.brand small{ display:block; font:600 9px var(--mono); letter-spacing:.2em; color:var(--mut); text-transform:uppercase; margin-top:2px; }

/* layout */
.app{ display:grid; grid-template-columns:232px minmax(0, 1fr); min-height:100vh; }
.side{ border-right:1px solid var(--line); background:var(--s1); padding:22px 14px; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; overflow:auto; }
.side .brand{ margin:0 6px 20px; }
.nav{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--dim); font:500 13.5px var(--ui); text-decoration:none; cursor:pointer; }
.nav:hover{ color:var(--text); } .nav.on{ background:var(--s3); color:var(--text); box-shadow:inset 2px 0 0 var(--acc); }
.nav .ct{ margin-left:auto; font:600 10px var(--mono); color:var(--mut); }
.nav .dot{ margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--warn); color:#1A1000; font:700 10px var(--mono); display:grid; place-items:center; }
.sec{ font:600 9.5px var(--mono); letter-spacing:.2em; color:var(--mut); text-transform:uppercase; margin:18px 10px 6px; }
.me{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 2px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); min-width:0; }
.me b{ display:block; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.av{ width:30px; height:30px; border-radius:50%; background:#2B2420; display:grid; place-items:center; font:700 12px var(--ui); color:var(--acc2); flex-shrink:0; }
.main{ padding:26px 32px 60px; min-width:0; }
@media (max-width:820px){ .app{ grid-template-columns:1fr; } .side{ position:static; height:auto; } .main{ padding:20px 16px 48px; } }

/* type and parts */
.top{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.top .sp{ flex:1; }
.crumb{ font:600 10px var(--mono); letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
h1{ margin:4px 0 0; font:600 28px var(--sans); letter-spacing:-.035em; line-height:1.1; }
h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acc2); }
h3{ margin:0 0 4px; font:600 15px var(--sans); letter-spacing:-.01em; }
.s{ margin:0 0 14px; color:var(--mut); font-size:12.5px; line-height:1.45; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; border-radius:10px; border:0; background:var(--acc); color:#160A04; font:700 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn.g{ background:transparent; color:var(--text); border:1px solid var(--line2); }
.btn.warn{ background:transparent; color:#F0BE62; border:1px solid rgba(224,162,58,.45); }
.btn.bad{ background:var(--bad); color:#1A0604; }
.btn.sm{ height:30px; padding:0 10px; font-size:10px; }
.btn.wide{ width:100%; height:46px; margin-top:6px; }
.btn:disabled{ opacity:.45; cursor:default; }
.link{ background:none; border:0; padding:0; color:var(--dim); font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.lbox .link{ display:block; margin:14px auto 0; }
.msg{ min-height:18px; margin-top:12px; font-size:13px; color:var(--bad); } .msg.ok{ color:var(--ok); }
.pnl{ background:var(--s1); border:1px solid var(--line); border-radius:16px; padding:18px; min-width:0; }
.grid2{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:16px; align-items:start; }
.stack{ display:grid; gap:16px; align-content:start; min-width:0; }
@media (max-width:1100px){ .grid2{ grid-template-columns:minmax(0, 1fr); } }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; font:600 10.5px var(--mono); letter-spacing:.04em; white-space:nowrap; }
.pill i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.p-ok{ background:rgba(79,168,107,.12); color:#7CCB95; } .p-warn{ background:rgba(224,162,58,.12); color:#F0BE62; } .p-mut{ background:rgba(255,240,225,.06); color:var(--dim); } .p-acc{ background:rgba(232,101,45,.14); color:var(--acc2); } .p-bad{ background:rgba(224,97,79,.12); color:#F0907F; }
.mono{ font-family:var(--mono); font-size:12px; }
.kpis{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:18px; }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.kpi{ background:var(--s1); border:1px solid var(--line); border-radius:16px; padding:16px 18px; min-width:0; }
.kpi span{ font:600 9.5px var(--mono); letter-spacing:.2em; color:var(--mut); text-transform:uppercase; } .kpi b{ display:block; font:600 26px var(--sans); letter-spacing:-.03em; margin-top:8px; } .kpi small{ color:var(--dim); font-size:12px; }
.empty{ padding:28px; text-align:center; color:var(--mut); font-size:13px; }

/* vendor list */
.vlist{ background:var(--s1); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.vrow{ display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 80px; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line); font-size:13px; color:var(--dim); text-decoration:none; }
.vrow:hover{ background:var(--s2); }
.vrow.h{ border-top:0; font:600 9.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--mut); padding:12px 18px; background:var(--s2); }
.vrow .v{ display:flex; align-items:center; gap:12px; color:var(--text); min-width:0; } .vrow .v b{ font-weight:600; display:block; } .vrow .v small{ display:block; color:var(--mut); font:500 11px var(--mono); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:820px){ .vrow{ grid-template-columns:minmax(0, 1fr) auto; } .vrow > :nth-child(n+3):not(:last-child){ display:none; } .vrow.h{ display:none; } }
.vl{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font:800 13px var(--ui); color:#fff; flex-shrink:0; background:#3A2A22; }

/* forms */
.cform{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:18px; align-items:start; }
@media (max-width:1100px){ .cform{ grid-template-columns:minmax(0, 1fr); } }
.sec2{ background:var(--s1); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:12px; }
.sec2 > h3{ margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.sec2 > h3 i{ width:22px; height:22px; border-radius:50%; background:var(--s3); display:grid; place-items:center; font:700 11px var(--mono); font-style:normal; color:var(--acc2); }
.row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.f{ display:grid; gap:6px; margin-bottom:12px; font:500 12px var(--ui); color:var(--dim); min-width:0; }
.f small, .hint{ font-size:11px; color:var(--mut); }
.suf{ display:flex; align-items:center; gap:0; } .suf input{ border-radius:10px 0 0 10px; } .suf span{ height:40px; display:flex; align-items:center; padding:0 10px; border:1px solid var(--line2); border-left:0; border-radius:0 10px 10px 0; color:var(--mut); font:500 12px var(--mono); white-space:nowrap; background:var(--s2); }
.seg{ display:flex; gap:6px; margin-bottom:12px; } .seg button{ flex:1; padding:9px 6px; border-radius:10px; border:1px solid var(--line2); background:none; font:600 12px var(--ui); color:var(--dim); cursor:pointer; }
.seg button.on{ border-color:var(--acc); color:var(--text); box-shadow:inset 0 0 0 1px var(--acc); }
.drop{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; border:1px dashed var(--line2); cursor:pointer; min-height:62px; }
.drop:hover{ border-color:var(--acc); }
.drop .th{ width:48px; height:48px; border-radius:8px; background:#fff; flex-shrink:0; display:grid; place-items:center; overflow:hidden; } .drop .th img{ max-width:100%; max-height:100%; }
.drop b{ display:block; font-size:13px; } .drop small{ color:var(--mut); font-size:11.5px; }
.days{ display:flex; flex-wrap:wrap; gap:6px; } .days label{ display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:9px; border:1px solid var(--line2); font-size:12px; color:var(--dim); cursor:pointer; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; min-height:30px; align-items:center; }
.chip{ display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 4px 0 11px; border-radius:999px; background:var(--s3); border:1px solid var(--line2); color:var(--text); font:600 12px var(--ui); }
.chip button{ width:22px; height:22px; border-radius:50%; border:0; background:none; color:var(--mut); cursor:pointer; font-size:15px; line-height:1; } .chip button:hover{ color:var(--text); background:var(--s2); }
.addrow{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:center; }
.tick{ display:flex; align-items:center; gap:8px; color:var(--text); font:500 13px var(--ui); cursor:pointer; }
input:disabled{ opacity:.45; }
.staffrow{ display:grid; grid-template-columns:minmax(0, 1fr) 110px 34px; gap:8px; margin-bottom:8px; }
.x{ width:34px; height:40px; border-radius:10px; border:1px solid var(--line2); background:none; color:var(--mut); cursor:pointer; }
.sum{ position:sticky; top:16px; background:var(--s1); border:1px solid var(--line2); border-radius:18px; padding:18px; }
.sum ul{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; font-size:12.5px; color:var(--dim); }
.sum li{ display:flex; gap:8px; } .sum li b{ color:var(--text); font-weight:600; } .sum li::before{ content:'✓'; color:var(--ok); flex-shrink:0; }

/* lists */
.out{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px; }
.out:first-of-type{ border-top:0; } .out b{ font-weight:600; display:block; } .out small{ color:var(--mut); font:500 11px var(--mono); overflow-wrap:anywhere; }
.ready{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border-radius:16px; background:linear-gradient(100deg, rgba(79,168,107,.14), rgba(79,168,107,.03)); border:1px solid rgba(79,168,107,.3); margin-bottom:16px; }
.ready .ck{ width:38px; height:38px; border-radius:50%; background:var(--ok); display:grid; place-items:center; color:#0A0908; font-weight:900; flex-shrink:0; }
.ready b{ font:600 17px var(--sans); display:block; } .ready span{ color:var(--dim); font-size:13px; }
.pnl.danger{ border-color:rgba(224,97,79,.35); }
.out.c4{ grid-template-columns:minmax(0, 1fr) auto auto auto; }
.ownrow{ display:flex; gap:6px; } .ownrow input{ width:110px; height:30px; font-family:var(--mono); letter-spacing:.15em; }
@media (max-width:560px){ .out.c4{ grid-template-columns:minmax(0, 1fr) auto; } .out.c4 > span{ grid-column:1 / -1; } }
.once{ background:rgba(224,162,58,.08); border:1px solid rgba(224,162,58,.3); border-radius:12px; padding:12px 14px; font-size:12.5px; color:#F0BE62; display:grid; gap:6px; }
.once code{ font:700 16px var(--mono); color:var(--text); letter-spacing:.2em; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; }
.tb{ background:var(--s2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-align:left; cursor:pointer; color:var(--text); }
.tb:hover, .tb.on{ border-color:rgba(232,101,45,.5); }
.tb b{ font:600 18px var(--sans); letter-spacing:-.02em; } .tb small{ display:block; font:500 10px var(--mono); color:var(--mut); margin-top:4px; }
.cards{ display:flex; gap:10px; overflow:hidden; margin:6px 0 12px; } .cards .mini{ zoom:.2; flex-shrink:0; }
.devrow{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.devrow:first-of-type{ border-top:0; } .devrow b{ font-weight:600; display:block; } .devrow small{ color:var(--mut); font:500 11px var(--mono); }
.devcode{ font:700 18px var(--mono); letter-spacing:.2em; color:var(--acc2); }
.feed > div{ display:grid; grid-template-columns:52px minmax(0, 1fr) auto; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--dim); }
.feed > div:first-child{ border-top:0; } .feed b{ color:var(--text); font-weight:600; } .feed .t{ font:500 11px var(--mono); color:var(--mut); }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; }
.tabs a{ padding:10px 14px; font:500 13px var(--ui); color:var(--dim); border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; white-space:nowrap; }
.tabs a.on{ color:var(--text); border-color:var(--acc); }
.qrbox{ background:#fff; border-radius:14px; padding:14px; color:#141210; width:240px; max-width:100%; margin:0 auto; }

/* modal, toast, print */
.modal{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:16px; }
.mbox{ width:100%; max-width:420px; background:var(--s1); border:1px solid var(--line2); border-radius:20px; padding:22px; text-align:center; }
.mbox h3{ margin-bottom:6px; } .mbox p{ color:var(--dim); font-size:13px; margin:0 0 16px; overflow-wrap:anywhere; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:#F4EEE7; color:#141210; padding:10px 16px; border-radius:12px; font:600 13px var(--ui); opacity:0; pointer-events:none; transition:.25s; z-index:60; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.print{ display:none; }
@media print{
  @page{ size:105mm 148mm; margin:0; }
  body > *:not(.print){ display:none !important; }
  .print{ display:block; } .print .pg{ zoom:.9229; break-after:page; page-break-after:always; } .print .pg:last-child{ break-after:auto; }
  .print .card{ box-shadow:none !important; border-radius:0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print .t3{ filter:none !important; } .print .t3 .body{ border-radius:0 !important; }
}