:root{--bg:#f5f7fb;--card:#fff;--ink:#14213d;--mut:#5b6785;--line:#e3e8f2;--pri:#2457e6;--pri2:#e8eefd;--ok:#12a46b;--warn:#e08a00;--bad:#d64545;--r:14px}
*{box-sizing:border-box}html,body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}button,input,select,textarea{font:inherit}
.badge{position:fixed;right:12px;bottom:12px;z-index:50;background:#fff4d6;color:#7a5200;border:1px solid #f0d58a;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #0001}
.btn{background:var(--pri);color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:600;cursor:pointer;transition:transform .15s,background .2s}.btn:hover{background:#1b46c2}.btn:active{transform:scale(.97)}.btn.sec{background:var(--pri2);color:var(--pri)}.btn.sm{padding:7px 12px;font-size:14px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:2px solid #2457e655;border-color:var(--pri)}
label{display:block;font-size:14px;color:var(--mut);margin:12px 0 6px}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#dfe8ff,transparent 50%),radial-gradient(circle at 90% 90%,#e2f7ee,transparent 45%),var(--bg)}
.auth .box{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:32px 28px;box-shadow:0 10px 40px #14213d14;text-align:center;animation:up .4s ease}
.auth form{text-align:left}.logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:22px}.logo svg{width:36px;height:36px}
.hint{font-size:13px;color:var(--mut);background:var(--pri2);border-radius:8px;padding:8px 10px;margin-top:12px;text-align:center}
.code{display:flex;gap:8px;justify-content:center;margin:16px 0}.code input{width:44px;height:52px;text-align:center;font-size:22px;padding:0}
.err{color:var(--bad);font-size:14px;margin-top:8px;text-align:center;min-height:20px}
.shell{display:flex;min-height:100vh}
.side{width:230px;background:#0f1b38;color:#c9d3ec;padding:20px 14px;position:sticky;top:0;height:100vh;flex-shrink:0}
.side .logo{color:#fff;justify-content:flex-start;margin:0 6px 24px;font-size:19px}
.side a{display:flex;align-items:center;gap:10px;color:#c9d3ec;padding:10px 12px;border-radius:10px;margin-bottom:4px;font-size:15px}.side a svg{width:19px;height:19px;flex-shrink:0}.side a:hover{background:#ffffff12}.side a.on{background:#2457e6;color:#fff}
.side .out{position:absolute;bottom:20px;left:14px;right:14px}
main{flex:1;min-width:0;padding:28px 28px 70px;max-width:1240px;margin:0 auto;animation:fade .3s ease}
h1{text-align:center;font-size:28px;margin:4px 0 6px}.sub{text-align:center;color:var(--mut);margin:0 auto 24px;max-width:640px}
h2{font-size:18px;margin:0 0 12px}h3{font-size:16px;margin:0 0 8px}
.grid{display:grid;gap:16px}.k4{grid-template-columns:repeat(4,1fr)}.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.kpi .v{font-size:28px;font-weight:700;margin:4px 0}.kpi .l{color:var(--mut);font-size:14px}.up{color:var(--ok);font-size:13px;font-weight:600}.down{color:var(--bad);font-size:13px;font-weight:600}
.mt{margin-top:16px}.muted{color:var(--mut);font-size:14px}
svg.chart{width:100%;height:auto;display:block}.chart .ln{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.4s ease forwards}.chart .bar{transform-origin:bottom;transform-box:fill-box;animation:grow .8s ease both}
.alert{display:flex;gap:12px;padding:12px;border-radius:10px;background:#fafbfe;border:1px solid var(--line);margin-bottom:10px;animation:up .4s ease both}.alert .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0;animation:pulse 2s infinite}.dot.bad{background:var(--bad)}.dot.warn{background:var(--warn)}.dot.ok{background:var(--ok)}
.tbl{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--mut);font-weight:600;font-size:13px;background:#fafbfe}td.n,th.n{text-align:right}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}.pill.ok{background:#e1f6ec;color:#0b7a4f}.pill.warn{background:#fff1d9;color:#935b00}.pill.bad{background:#fde6e6;color:#a32828}.pill.n{background:#eef1f7;color:#4a5573}
.chat{max-width:860px;margin:0 auto}.msgs{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}.me{align-self:flex-end;background:var(--pri);color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px;max-width:80%}.bot{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:16px;animation:up .35s ease}
.sugs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}.sug{background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;font-size:14px;color:var(--ink)}.sug:hover{border-color:var(--pri);color:var(--pri)}
.ask{display:flex;gap:8px;position:sticky;bottom:12px;background:var(--bg);padding:8px 0}
pre{background:#0f1b38;color:#d7e1ff;padding:12px;border-radius:10px;overflow-x:auto;font-size:13px;margin:8px 0 0}
details summary{cursor:pointer;color:var(--pri);font-size:14px;margin-top:10px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.typing span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mut);margin-right:4px;animation:bounce 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.tabs{display:flex;gap:6px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;cursor:pointer;color:var(--ink)}.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.filters input{flex:1;min-width:180px}.filters select{width:auto}
.ba{display:flex;align-items:center;gap:10px;margin:10px 0}.ba .t{font-size:24px;font-weight:700}.ba .old{color:var(--bad);text-decoration:line-through}.ba .new{color:var(--ok)}
.prog{height:8px;background:#eef1f7;border-radius:99px;overflow:hidden}.prog i{display:block;height:100%;background:var(--pri);border-radius:99px;animation:growx 1s ease both;transform-origin:left}
.drop{border:2px dashed #b8c6ea;border-radius:12px;padding:22px;text-align:center;cursor:pointer;background:#fafbfe}.drop:hover{border-color:var(--pri)}
.paper{position:relative;background:#fffdf5;border:1px solid #e8e0c4;border-radius:6px;padding:16px;font-family:"Courier New",monospace;font-size:13px;overflow:hidden;transform:rotate(-1deg)}.paper .scan{position:absolute;left:0;right:0;height:3px;background:#2457e6aa;box-shadow:0 0 12px #2457e6;top:0;animation:scan 1.6s ease-in-out infinite}
.field{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;animation:up .3s ease both}.field b{text-align:right}
.arch{max-width:1000px;margin:0 auto}.arch svg{width:100%;height:auto}.node{animation:up .5s ease both}.flow{stroke-dasharray:6 6;animation:dash 1s linear infinite}
.steps{display:grid;gap:14px;max-width:560px;margin:0 auto}.step{display:flex;gap:14px;align-items:flex-start}.step .n{width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.qr{display:block;margin:12px auto;width:180px;height:180px;background:#fff;padding:8px;border:1px solid var(--line);border-radius:10px}
.top{display:none}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes grow{from{transform:scaleY(0)}}@keyframes growx{from{transform:scaleX(0)}}@keyframes pulse{50%{opacity:.4}}@keyframes bounce{50%{transform:translateY(-4px)}}@keyframes scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}@keyframes dash{to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:900px){.k4{grid-template-columns:1fr 1fr}.c2,.c3{grid-template-columns:1fr}
.side{position:fixed;bottom:0;top:auto;left:0;right:0;width:auto;height:auto;padding:6px;display:flex;justify-content:space-around;z-index:40;border-radius:16px 16px 0 0}.side .logo,.side .out{display:none}.side a{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 4px;margin:0;text-align:center;flex:1}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0f1b38;color:#fff}.top .logo{font-size:17px}.top .logo svg{width:28px;height:28px}.top a{color:#c9d3ec;font-size:14px}
main{padding:18px 14px 110px}h1{font-size:23px}.kpi .v{font-size:22px}.badge{bottom:78px;right:8px;font-size:11px}.me{max-width:90%}}
@media (max-width:400px){.code input{width:40px;height:48px}.code{gap:6px}}
.wrap{flex:1;min-width:0}
.av{display:none}.av svg{max-width:340px;display:block;margin:0 auto}
@media (max-width:700px){.ah{display:none}.av{display:block}.chart text{font-size:17px}.donut text{font-size:inherit}}
.step{text-align:left}