:root{color-scheme:dark;--bg:#070b12;--bg2:#0b111b;--card:#0f1623;--card2:#131c2c;--tx:#e6edf6;--mu:#8795ab;--bd:#1e2a3d;--ac:#22d3ee;--ac2:#8b5cf6;--ok:#34d399;--okb:rgba(52,211,153,.12);--bad:#fb7185;--badb:rgba(251,113,133,.12);--wa:#fbbf24;--wab:rgba(251,191,36,.12);--glow:0 0 0 1px rgba(34,211,238,.35),0 0 18px rgba(34,211,238,.18)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--tx);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;
background:radial-gradient(900px 420px at 85% -10%,rgba(139,92,246,.16),transparent 60%),radial-gradient(800px 400px at 0% 0%,rgba(34,211,238,.12),transparent 55%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/44px 44px,var(--bg)}
h1{font-size:16px;margin:0;letter-spacing:.04em}
h2{font-size:15px;margin:0 0 12px;letter-spacing:.03em}
h3{font-size:13px;margin:16px 0 8px;color:var(--mu);text-transform:uppercase;letter-spacing:.08em}
a{color:var(--ac)}
/* top bar */
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 20px;background:rgba(11,17,27,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img,.brand svg{width:34px;height:34px;border-radius:9px;flex:none;object-fit:contain}
.brand small{display:block;color:var(--mu);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
nav a{color:var(--mu);text-decoration:none;margin-left:14px;font-size:14px}nav a:hover{color:var(--ac)}
.chip{padding:4px 10px;border:1px solid var(--bd);border-radius:99px;font-size:12px;color:var(--mu);background:var(--card)}
.chip b{color:var(--ac);font-weight:600}
/* layout */
main{max-width:1240px;margin:0 auto;padding:18px 16px 50px}
.layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:18px;align-items:start}
.side{position:sticky;top:72px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:10px}
.side h3{margin:12px 8px 6px;font-size:11px}
.side h3:first-child{margin-top:4px}
.side button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);padding:9px 10px;border-radius:9px;font-size:14px}
.side button svg{width:17px;height:17px;flex:none;stroke:var(--mu)}
.side button:hover{background:var(--card2)}
.side button.on{background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(139,92,246,.12));box-shadow:inset 2px 0 0 var(--ac);color:#fff}
.side button.on svg{stroke:var(--ac)}
.content{min-width:0}
@media(max-width:860px){.layout{grid-template-columns:1fr}.side{position:static;display:flex;flex-wrap:wrap;gap:4px}.side h3{display:none}.side button{width:auto;padding:7px 10px}}
/* cards, forms */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px}
.narrow{max-width:430px;margin:24px auto}
label{display:block;font-size:12px;color:var(--mu);margin:10px 0 4px;letter-spacing:.04em}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--bd);border-radius:9px;background:#0a101a;color:var(--tx);width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:var(--glow)}
input[type=checkbox]{width:auto;accent-color:var(--ac)}
input[type=file]{padding:7px}
button{font:inherit;padding:8px 14px;border-radius:9px;border:1px solid var(--bd);background:var(--card2);color:var(--tx);cursor:pointer;transition:.15s}
button:hover{border-color:var(--ac);color:#fff}
button.primary{background:linear-gradient(90deg,#0891b2,#7c3aed);border-color:transparent;color:#fff;font-weight:600;width:100%;margin-top:14px;padding:11px}
button.primary:hover{box-shadow:var(--glow);filter:brightness(1.1)}
button.small{font-size:13px;padding:5px 10px;margin-right:4px}
button.danger:hover{border-color:var(--bad);color:var(--bad)}
button:disabled{opacity:.6;cursor:wait}
.msg{padding:10px 12px;border-radius:9px;margin-top:12px;font-size:14px;border:1px solid transparent}
.msg.err{background:var(--badb);color:var(--bad);border-color:rgba(251,113,133,.3)}.msg.ok{background:var(--okb);color:var(--ok);border-color:rgba(52,211,153,.3)}
.mu{color:var(--mu);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.grid .card{margin:0}
.big{font-size:28px;font-weight:700;letter-spacing:.01em}
.stat .big{background:linear-gradient(90deg,var(--ac),#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.bad .big{background:none;color:var(--bad)}.stat.ok .big{background:none;color:var(--ok)}
.tag{padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.paid,.active{background:var(--okb);color:var(--ok)}.overdue,.lost{background:var(--badb);color:var(--bad)}.pending{background:var(--wab);color:var(--wa)}
.wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:900px}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--bd);white-space:nowrap}
th{color:var(--mu);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
tr:hover td{background:rgba(34,211,238,.03)}
td input{padding:6px 8px}
.addrow{display:grid;grid-template-columns:90px 1.3fr 1fr 1.3fr auto;gap:8px;align-items:end}
@media(max-width:800px){.addrow{grid-template-columns:1fr 1fr}}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tabs button.on{background:var(--ac);border-color:var(--ac);color:#001018}
dialog{border:1px solid var(--bd);border-radius:14px;background:var(--card);color:var(--tx);padding:18px;max-width:480px;width:calc(100% - 24px)}
dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.row>div{flex:1;min-width:120px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.qrbox{text-align:center}.qrbox img{width:220px;height:220px;background:#fff;padding:8px;border-radius:12px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.hide{display:none}
/* dashboard */
.bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:8px}
.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;font-size:12px;color:var(--mu)}
.bars i{display:block;width:100%;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--ac),var(--ac2));min-height:3px;box-shadow:0 0 14px rgba(34,211,238,.25)}
.meter{height:8px;border-radius:99px;background:#0a101a;border:1px solid var(--bd);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--ac))}
.bcard{display:flex;flex-direction:column;gap:6px}
.bcard.off{opacity:.55}
.hero{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.hero img,.hero svg{width:56px;height:56px;border-radius:14px;object-fit:contain;background:var(--card2);padding:4px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:6px}
.dot.off{background:var(--mu);box-shadow:none}
@media print{body>header,body>main{display:none!important}.noprint{display:none!important}dialog{position:static;border:0;max-width:none;width:auto;color:#000;background:#fff}dialog::backdrop{display:none}dialog .line{border-color:#ccc}dialog .mu{color:#444}}
.chipsel{width:auto;max-width:220px;padding:5px 12px;border-radius:99px;font-size:13px}
td input{min-width:110px}td select{min-width:130px;padding:6px 8px}
td input[type=checkbox]{min-width:0}
a.btn{display:inline-block;font:inherit;padding:8px 14px;border-radius:9px;border:1px solid var(--bd);background:var(--card2);color:var(--tx);text-decoration:none;transition:.15s}a.btn:hover{border-color:var(--ac);color:#fff}dialog{max-height:92vh;overflow:auto}dialog:has(.row h3),dialog:has(h3){max-width:560px}
.foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 16px 28px;color:var(--mu);font-size:12px;text-align:left;border-top:1px solid var(--bd);margin-top:20px}.foot img{height:38px;width:auto;max-width:190px;object-fit:contain;background:#fff;padding:3px 8px;border-radius:9px}.foot b{color:var(--tx)}@media print{.foot{display:none!important}}
.brand img.sit,.hero img.sit{width:auto;height:34px;max-width:140px;background:#fff;padding:3px 8px;border-radius:9px}.hero img.sit{height:44px;max-width:170px}