body{margin:0;background:#0b0f14;color:#e6edf3;font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.45}
*{box-sizing:border-box}
a{color:#7cb4ff}a:hover{color:#a9cdff}
.app{min-height:100vh;display:flex;flex-direction:column;background:#0b0f14}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid #1f2630;background:#0f141b;position:relative}
.logo{display:flex;align-items:center;gap:12px}
.logo .algo{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:.22em;color:#7cb4ff;padding:4px 0 4px 12px;border-left:1px solid #2a323d}
.sp{flex:1}
.modesw{display:flex;background:#0b0f14;border:1px solid #2a323d;border-radius:10px;padding:3px;gap:3px}
.modesw button{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#9aa6b2;font:inherit;font-weight:600;cursor:pointer}
.modesw button.onp{background:#1d4ed8;color:#fff}
.modesw button.onl{background:#c62828;color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid #2a323d;font-size:12px;color:#c4ccd5;white-space:nowrap}
.iconbtn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid #2a323d;background:#0b0f14;color:#c4ccd5;display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn .cnt{position:absolute;top:-6px;right:-6px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.d-ok{background:#2ea043}.d-warn{background:#d29922}.d-bad{background:#e5534b}.d-info{background:#4c8dff}
.banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:9px 24px;font-weight:600;font-size:13px}
.banner.paper{background:#0f2547;color:#d6e6ff;border-bottom:1px solid #1d3a6b}
.banner.live{background:#a51d1d;color:#fff;border-bottom:1px solid #d23c3c}
.banner.kill{background:#3a2a05;color:#ffe2a3;border-bottom:1px solid #6b4c08}
.banner.feed{background:#2a1a05;color:#ffd7a3;border-bottom:1px solid #6b4c08}
.body{display:flex;flex-wrap:wrap;flex:1;align-items:stretch}
.nav{flex:1 1 220px;max-width:240px;padding:18px 12px;border-right:1px solid #1f2630;background:#0f141b;display:flex;flex-direction:column;gap:2px}
.navsec{font-size:11px;font-weight:600;color:#8b96a3;letter-spacing:.08em;text-transform:uppercase;padding:14px 12px 6px}
.nb{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#b3bdc8;font:inherit;font-weight:500;text-align:left;cursor:pointer}
.nb:hover{background:#161d26;color:#e6edf3}
.nb.on{background:#16253d;color:#fff;box-shadow:inset 0 0 0 1px #24406b}
.nb svg{flex:none}
.cnt{margin-left:auto;min-width:20px;height:18px;border-radius:9px;background:#d29922;color:#1a1300;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.main{flex:999 1 560px;min-width:0;padding:24px 28px 56px}
.tabbar{display:none}
@media (max-width:820px){.nav{display:none}.main{padding:16px 14px 104px}.top{padding:10px 14px;gap:8px}.banner{padding:8px 14px}.top .chip{display:none}.logo img{height:24px !important}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:2px;background:#0f141b;border-top:1px solid #1f2630;z-index:30;padding:6px 6px 10px}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border:0;background:transparent;color:#9aa6b2;font:inherit;font-size:11px;font-weight:600;cursor:pointer;border-radius:10px}
.tb.on{color:#fff;background:#16253d}
.edbar{bottom:72px !important}}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#121821;border-top:1px solid #2a323d;border-radius:16px 16px 0 0;padding:16px 16px 24px;z-index:56;display:flex;flex-direction:column;gap:4px;max-height:80vh;overflow:auto}
.sheet .nb{min-height:48px;font-size:15px}
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px}
.ph h1{font-family:'Space Grotesk',Inter,sans-serif;font-size:26px;font-weight:700;margin:0}
.ph p{margin:4px 0 0;color:#8b96a3}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:#121821;border:1px solid #1f2630;border-radius:12px;padding:18px}
.card h2{font-size:15px;font-weight:600;margin:0}
.ch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.ch .sub{color:#8b96a3;font-size:12px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.kpi{background:#121821;border:1px solid #1f2630;border-radius:12px;padding:16px}
.kpi .l{color:#8b96a3;font-size:12px;font-weight:500}
.kpi .v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;margin-top:6px}
.kpi .s{color:#8b96a3;font-size:12px;margin-top:4px}
.mono{font-family:'JetBrains Mono',monospace}
.up{color:#3fb950}.dn{color:#ff6b62}.mu{color:#8b96a3}.wa{color:#e3b341}.bl{color:#7cb4ff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:9px;border:1px solid #2a323d;background:#1a212b;color:#e6edf3;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:#212a36}
.btn.pri{background:#2563eb;border-color:#2563eb;color:#fff}.btn.pri:hover{background:#1d4ed8}
.btn.live{background:#c62828;border-color:#c62828;color:#fff}.btn.live:hover{background:#a51d1d}
.btn.warn{background:#3a2a05;border-color:#9e6a03;color:#ffd77a}
.btn.ghost{background:transparent}
.btn.sm{min-height:32px;padding:0 10px;font-size:12px;border-radius:7px}
.btn.on{background:#16253d;border-color:#4c8dff;color:#fff}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.seg{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid #2a323d;background:#0f141b;color:#b3bdc8;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.seg:hover{border-color:#3b4655;color:#e6edf3}
.seg.on{background:#16253d;border-color:#4c8dff;color:#fff}
.subtabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:#0f141b;border:1px solid #1f2630;border-radius:11px;padding:4px;max-width:100%}
.subtabs button{min-height:38px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#9aa6b2;font:inherit;font-weight:600;cursor:pointer}
.subtabs button.on{background:#16253d;color:#fff;box-shadow:inset 0 0 0 1px #24406b}
.subtabs button.onl{background:#3a1010;color:#fff;box-shadow:inset 0 0 0 1px #c62828}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label,.lb{font-size:12px;font-weight:500;color:#9aa6b2}
.in{min-height:40px;width:100%;background:#0b0f14;border:1px solid #2a323d;border-radius:8px;color:#e6edf3;padding:0 11px;font:inherit}
.in:focus{outline:2px solid #4c8dff;outline-offset:0;border-color:#4c8dff}
.in.mono{font-family:'JetBrains Mono',monospace}
.in.sm{min-height:34px;padding:0 8px;font-size:13px}
.ro{display:flex;align-items:center}
.chk{display:flex;align-items:center;gap:10px;min-height:38px;color:#c4ccd5}
.chk input,.cb{width:18px;height:18px;accent-color:#2563eb;flex:none}
.sec{font-size:11px;font-weight:600;color:#8b96a3;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 10px}
.sec:first-child{margin-top:0}
.hr{height:1px;background:#1f2630;margin:16px 0}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap}
.p-ok{color:#56d364;border-color:#2b6a35;background:#0d1f12}
.p-bad{color:#ff7b72;border-color:#7a2a26;background:#230f0e}
.p-warn{color:#e3b341;border-color:#6b4c08;background:#211804}
.p-info{color:#7cb4ff;border-color:#24406b;background:#0d1a2e}
.p-mu{color:#9aa6b2;border-color:#2a323d;background:#121821}
.p-pur{color:#d2a8ff;border-color:#553a85;background:#1b1229}
.p-live{color:#fff;border-color:#c62828;background:#a51d1d}
.p-paper{color:#d6e6ff;border-color:#1d4ed8;background:#0f2547}
.t{overflow-x:auto;border:1px solid #1f2630;border-radius:10px}
.tw{min-width:980px}
.tr{display:grid;gap:10px;padding:10px 14px;border-bottom:1px solid #1a212b;align-items:center;font-size:13px}
.tr:last-child{border-bottom:0}
.tr.h{background:#0f141b;color:#8b96a3;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px}
.c-pos{grid-template-columns:1.9fr 1.1fr .7fr .6fr .7fr 1fr .8fr .8fr 1.1fr .9fr 1.2fr 1.1fr}
.c-row{grid-template-columns:.3fr 1.2fr .95fr .85fr 1fr .7fr .85fr .95fr .95fr .75fr .9fr 1.2fr 1fr .95fr 1fr 1.1fr 1.1fr .9fr .9fr}
.c-dep{grid-template-columns:2fr 1fr .9fr .7fr .9fr 1.3fr 1.3fr .8fr 2.4fr}
.c-log{grid-template-columns:.8fr .7fr .7fr 1.1fr 4fr 1.1fr}
.c-leg{grid-template-columns:.4fr 1fr 1fr 1.4fr 1.8fr .8fr 1.1fr .5fr}
.c-use{grid-template-columns:1.8fr .8fr .8fr .8fr .8fr 1.3fr 1.3fr}
.c-rep{grid-template-columns:2fr 1fr 1fr 1fr}
.c-tax{grid-template-columns:2.2fr 1.1fr 1.1fr .8fr 1.1fr}
.c-map{grid-template-columns:1.4fr 1.6fr 1fr 1fr .6fr}
.c-usr{grid-template-columns:1.3fr 1.6fr .9fr 1fr 1.2fr .9fr 1.1fr 2.2fr}
.sym{font-weight:600}
.sm{font-size:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #1a212b;font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:#9aa6b2}
.note{background:#0d1a2e;border:1px solid #24406b;color:#c9dcf7;border-radius:10px;padding:12px 14px;font-size:13px}
.note.w{background:#211804;border-color:#6b4c08;color:#f5dca0}
.note.b{background:#230f0e;border-color:#7a2a26;color:#ffc9c4}
.sum{background:#0b0f14;border:1px solid #1f2630;border-radius:10px;padding:14px}
.big{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600}
pre.code{background:#0b0f14;border:1px solid #2a323d;border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:12px;overflow-x:auto;margin:0;white-space:pre;color:#c9d1d9}
.scard{background:#121821;border:1px solid #1f2630;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.scard .t1{font-family:'Space Grotesk',Inter,sans-serif;font-size:17px;font-weight:700}
.typecard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border-radius:12px;border:1px solid #2a323d;background:#0f141b;color:#e6edf3;font:inherit;cursor:pointer;min-height:110px}
.typecard:hover{border-color:#4c8dff;background:#16253d}
.typecard .k{color:#9aa6b2;font-size:12px}
.sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.steps{margin:8px 0 0;padding-left:20px;color:#c4ccd5;font-size:13px}
.steps li{margin:6px 0}
.detail{grid-column:1 / -1;background:#0b0f14;border:1px solid #24406b;border-radius:10px;padding:14px}
.edbar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#0f141b;border:1px solid #2a323d;border-radius:12px;padding:12px 14px;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.notif{position:absolute;right:16px;top:60px;width:min(380px,92vw);background:#121821;border:1px solid #2a323d;border-radius:12px;padding:12px;z-index:45;box-shadow:0 12px 40px rgba(0,0,0,.5);max-height:420px;overflow:auto}
.hm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:420px}
.hmc{aspect-ratio:1;border-radius:6px;border:1px solid #1f2630;background:#0f141b;color:#c4ccd5;font:inherit;font-size:11px;cursor:pointer;padding:0}
.hmc.off{background:transparent;border-color:transparent;cursor:default;color:#3b4655}
.hmc.wk{background:#0b0f14;color:#5b6673;cursor:default}
.hmc.p1{background:#12321b}.hmc.p2{background:#1c5a2c}.hmc.p3{background:#2ea043;color:#06140a}
.hmc.n1{background:#3a1715}.hmc.n2{background:#6e2622}.hmc.n3{background:#c2413a;color:#fff}
.hmc.sel{outline:2px solid #7cb4ff}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e6edf3;color:#0b0f14;padding:11px 18px;border-radius:10px;font-weight:600;z-index:70;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:90vw}
@media (max-width:820px){.toast{bottom:84px}}
.ov{position:fixed;inset:0;background:rgba(3,6,10,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.ov.bot{align-items:flex-end;padding:0;border:0;width:100%}
.modal{width:100%;max-width:480px;background:#121821;border:1px solid #2a323d;border-radius:14px;padding:22px;max-height:90vh;overflow:auto}
.modal.wide{max-width:720px}
.modal.lv{border-color:#c62828}
.modal h3{margin:0 0 8px;font-size:18px}
.modal p{margin:0 0 16px;color:#c4ccd5;white-space:pre-line}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0f14}
.lg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#9aa6b2}
.lg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.c-row{grid-template-columns:.3fr 1.2fr .95fr .85fr 1fr .7fr .85fr 1fr .75fr .9fr 1.1fr 1.1fr .8fr .85fr .9fr .8fr .9fr}
.c-arow{grid-template-columns:.3fr 1.2fr .95fr .85fr .7fr .9fr .9fr 1.2fr 1fr .95fr 1fr 1.1fr 1.1fr .9fr .9fr}
.c-tg{grid-template-columns:1fr 3fr}
.capok{padding:10px 12px;border-radius:9px;border:1px solid #2b6a35;background:#0d1f12;color:#bff0c8;font-size:13px;font-weight:600}
.capbad{padding:10px 12px;border-radius:9px;border:1px solid #7a2a26;background:#230f0e;color:#ffc9c4;font-size:13px;font-weight:600}
.in[disabled],select[disabled]{opacity:.42;cursor:not-allowed}
.seg[disabled]{opacity:.42;cursor:not-allowed}
.chkok{padding:8px 12px;border:1px solid #1f2630;border-radius:9px;margin-bottom:6px;background:#0f141b}
.chkbad{padding:12px;border:1px solid #7a2a26;border-radius:9px;margin-bottom:8px;background:#1a0d0c;color:#ffd9d5}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.banner.block{background:#4a0f0f;color:#ffd9d5;border-bottom:1px solid #a51d1d}

/* real app additions */
.hidden{display:none !important}
.mob{display:none}
@media (max-width:820px){.mob{display:initial}}
.qr{background:#fff;padding:12px;border-radius:12px;width:220px;height:220px}
.qr img{width:100%;height:100%}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:'JetBrains Mono',monospace}
.codes span{background:#0b0f14;border:1px solid #2a323d;border-radius:8px;padding:8px;text-align:center}
.c-rowr{grid-template-columns:.9fr .8fr .9fr .8fr .8fr .8fr .8fr .8fr .9fr .9fr .9fr .8fr .8fr .5fr}
.c-posr{grid-template-columns:1.5fr .7fr .6fr .6fr .8fr .8fr .8fr .8fr .8fr 1fr .8fr}
.c-depr{grid-template-columns:2fr .9fr .9fr .9fr 1.2fr 1.2fr .6fr 2.2fr}
.c-logr{grid-template-columns:1.2fr .6fr .7fr 1fr 4fr 1.2fr}
.sugbox{position:relative}
.sugl{position:absolute;z-index:30;left:0;right:0;top:100%;background:#121821;border:1px solid #2a323d;border-radius:8px;max-height:240px;overflow:auto}
.sugl button{display:block;width:100%;text-align:left;padding:8px 10px;background:transparent;border:0;color:#e6edf3;font:inherit;cursor:pointer}
.sugl button:hover{background:#16253d}
.in.err{border-color:#e5534b}