:root{--bg:#0a2430;--card:#0F313D;--card2:#163f4d;--line:#21505f;--tx:#eef7f8;--mut:#9cbcc7;--gold:#3FBFB8;--gold-ink:#062a2f;--ok:#00C4B4;--bad:#ef6b6b;--warn:#f2b84b;--blue:#71A7BF;--navy:#1B3A4B;--r:12px}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 Poppins,system-ui,sans-serif}
h1,h2,h3{font-family:Poppins,sans-serif;margin:0 0 8px;font-weight:700}
h2{font-size:22px}h3{font-size:16px}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input[type=checkbox]{width:auto}
label{display:block;font-size:12px;color:var(--mut);margin:10px 0 4px}
a{color:var(--gold)}
.btn{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;color:var(--tx);text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--mut)}
.btn.pri{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:600}
.btn.ok{background:var(--blue);border-color:var(--blue);color:#06202a;font-weight:600}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.mut{color:var(--mut)}.sm{font-size:13px}.xs{font-size:11px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.mb{margin-bottom:14px}.mt{margin-top:12px}
#auth,#wait{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(1200px 600px at 50% -10%,#1B3A4B 0%,var(--bg) 60%)}
#auth .card{width:100%;max-width:380px;padding:24px}
.logo{font-weight:700;font-size:21px;display:flex;align-items:center;gap:8px;white-space:nowrap}.logo b{color:var(--gold);font-weight:700}
.logo::before{content:"";width:18px;height:18px;background:linear-gradient(135deg,#3FBFB8,#71A7BF);transform:rotate(45deg);border-radius:3px;flex:none}
.tabs{display:flex;gap:4px;margin:16px 0 4px;background:var(--card2);padding:4px;border-radius:10px}
.tabs button{flex:1;background:none;border:0;padding:8px;border-radius:8px;cursor:pointer;color:var(--mut)}
.tabs button.on{background:var(--gold);color:var(--gold-ink);font-weight:600}
.msg{margin-top:12px;font-size:14px;padding:10px;border-radius:10px;background:var(--card2)}
.msg.err{color:#ffc4c4;background:#3a1d1d}.msg.okm{color:#c9f5f1;background:#0f4a4a}
header{position:sticky;top:0;z-index:5;background:rgba(10,36,48,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:1500px;margin:auto}
nav{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
nav button{background:none;border:0;color:var(--mut);padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;position:relative}
nav button.on{color:var(--tx);background:var(--card2)}
nav .badge{position:absolute;top:0;right:0;background:var(--bad);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;line-height:15px}
main{max-width:1500px;margin:auto;padding:16px}
main.wide{max-width:none}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.subtabs button{background:var(--card);border:1px solid var(--line);color:var(--mut);padding:7px 14px;border-radius:20px;cursor:pointer}
.subtabs button.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.kpi .v{font-size:26px;font-weight:600;line-height:1.2}.kpi .l{color:var(--mut);font-size:12px}
.kpi.alert{border-color:var(--bad);background:#3a1f26}.kpi.done{border-color:var(--ok)}
.bar{height:8px;background:var(--card2);border-radius:5px;margin-top:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--gold);border-radius:5px;transition:width .6s}
.bar.red i{background:var(--bad)}.bar.warn i{background:var(--warn)}.bar.big{height:14px}
.list .it{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.list .it:last-child{border:0}
.it .t{flex:1;min-width:0}.it .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--card2);border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.tag.q{color:#ffb070;border-color:#5a3a1a}.tag.g{color:var(--ok);border-color:#0f5a55}.tag.p{color:var(--bad);border-color:#4a1d1d}.tag.w{color:var(--warn);border-color:#5a471a}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.alarme{border-radius:var(--r);padding:14px 16px;margin-bottom:12px;border:2px solid var(--bad);background:linear-gradient(90deg,#4a1d26,#2b1a22);display:flex;gap:12px;align-items:flex-start}
.alarme.pulse{animation:pulse 1.6s infinite}
.alarme .ic{font-size:26px;line-height:1}
.alarme b{display:block;font-size:16px;color:#ffd6d6}
.alarme.warn{border-color:var(--warn);background:linear-gradient(90deg,#4a3b1d,#2b261a)}.alarme.warn b{color:#ffe7b3}
.alarme.okk{border-color:var(--ok);background:linear-gradient(90deg,#0f4a47,#0f313d)}.alarme.okk b{color:#c9f5f1}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,107,107,.55)}50%{box-shadow:0 0 0 9px rgba(239,107,107,0)}}
.kb{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.col{flex:1 1 0;min-width:165px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 8px 8px;max-height:calc(100vh - 230px);overflow-y:auto}
.col h4{margin:0 -8px 8px;font-size:13px;display:flex;justify-content:space-between;color:var(--mut);position:sticky;top:0;background:var(--card);padding:10px 12px;z-index:1;border-bottom:1px solid var(--line)}
.col.drop{border-color:var(--gold)}
.lc{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:6px;cursor:grab;font-size:13px}
.lc b{display:block;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mut);font-weight:500;font-size:12px}
td.num,th.num{text-align:right}
.tw{overflow-x:auto}
tr.click{cursor:pointer}tr.click:hover td{background:rgba(255,255,255,.03)}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20}
#dr{position:fixed;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--bg);border-left:1px solid var(--line);z-index:21;overflow-y:auto;padding:18px 16px 40px}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.acts .btn{text-align:left;font-size:13px;white-space:normal}
.hist .h{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:30;background:rgba(0,0,0,.6);padding:16px}
.modal .card{width:100%;max-width:460px;max-height:90vh;overflow-y:auto}
.modal .card.lg{max-width:780px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:40;max-width:90%}
.hero{display:flex;gap:16px;align-items:center}
.hero svg{flex:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero .tier{font-weight:800;letter-spacing:.3px;font-size:18px}
.tiers{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tiers span{font-size:11px;padding:3px 8px;border-radius:12px;border:1px solid var(--line);color:var(--mut)}
.tiers span.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:600}
.glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:1}}
.copy{display:flex;gap:6px}.copy input{font-size:13px}
.metaRow{display:grid;grid-template-columns:1.4fr .8fr .6fr auto;gap:6px;align-items:center;margin-bottom:6px}
.medals{display:flex;gap:8px;flex-wrap:wrap}
.medals div{flex:1;min-width:110px;text-align:center;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card2);opacity:.45}
.medals div.on{opacity:1;border-color:var(--gold)}
.medals .m{font-size:26px}
@media(max-width:1000px){.cols3{grid-template-columns:1fr}}
@media(max-width:760px){.cols2,.grid2,.grid3{grid-template-columns:1fr}.hd{flex-wrap:wrap}nav{order:3;flex:1 1 100%}main{padding:12px}.hero{flex-direction:column;text-align:center}.metaRow{grid-template-columns:1fr 1fr}}