:root{--bg:#f6f4fb;--p:#fff;--p2:#eeeaf7;--b:#dcd5ee;--t:#1b1530;--m:#5d5676;--a:#7a2ff0;--at:#5b22bd;--ok:#0a7a4d;--wr:#8a5d00;--er:#b3243d;--live:#d6193f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0912;--p:#141222;--p2:#1d1a30;--b:#2b2745;--t:#f3f1fb;--m:#a5a0c0;--a:#9146ff;--at:#c7a8ff;--ok:#4fe3b0;--wr:#ffcf5c;--er:#ff6b86;--live:#ff4a74}}
:root[data-theme="dark"]{--bg:#0a0912;--p:#141222;--p2:#1d1a30;--b:#2b2745;--t:#f3f1fb;--m:#a5a0c0;--a:#9146ff;--at:#c7a8ff;--ok:#4fe3b0;--wr:#ffcf5c;--er:#ff6b86;--live:#ff4a74}
*{box-sizing:border-box}html,body{margin:0}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--b) transparent}}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b);border-radius:10px;border:3px solid transparent;background-clip:padding-box;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--a);background-clip:padding-box}
body{background:var(--bg);color:var(--t);font:14px/1.55 'Golos Text',system-ui,sans-serif}
h1,h2,.num{font-family:'Russo One','Golos Text',system-ui,sans-serif;font-weight:400;letter-spacing:.01em}
h1{margin:0;font-size:26px}h2{margin:0 0 14px;font-size:16px}
.app{display:flex;min-height:100vh}
aside{width:236px;flex:none;background:var(--p);border-right:1px solid var(--b);padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font:21px 'Russo One',sans-serif;display:flex;align-items:center;gap:9px;padding:0 8px 18px}
.brand b{width:32px;height:32px;border-radius:9px;background:var(--a);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:400}
.tb{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 12px;border-radius:9px;color:var(--m);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.tb:hover{color:var(--t);background:var(--p2)}.tb.on{color:var(--t);background:var(--p2);font-weight:600;box-shadow:inset 3px 0 0 var(--a)}
.bd{background:var(--a);color:#fff;border-radius:99px;font-size:11px;padding:1px 8px}
:is(.tb,button,select,input,textarea):focus-visible{outline:2px solid var(--a);outline-offset:2px}
.who{margin-top:auto;padding-top:14px;border-top:1px solid var(--b);display:flex;flex-direction:column;gap:6px}
.pill{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--live)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);animation:pl 1.4s infinite;display:inline-block}
@keyframes pl{50%{opacity:.3}}@media (prefers-reduced-motion:reduce){.dot{animation:none}}
main{flex:1;min-width:0;max-width:1180px;padding:28px 32px;display:flex;flex-direction:column;gap:22px}
.sub{color:var(--m);margin-top:4px}
.card{background:var(--p);border:1px solid var(--b);border-radius:16px;padding:20px}
.g2{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}
.m{color:var(--m)}.ok{color:var(--ok)}.wr{color:var(--wr)}.er{color:var(--er)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;background:var(--p);border:1px solid var(--b);border-left:6px solid var(--live);border-radius:16px;padding:22px}
.hero.off{border-left-color:var(--b);display:block}
.big{font:44px/1.1 'Russo One',sans-serif;margin:6px 0}
.ev{display:flex;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--b)}.ev:last-child{border:0}
.ev .t{color:var(--m);width:44px;flex:none;font-variant-numeric:tabular-nums}
.scr{max-height:260px;overflow:auto;padding-right:6px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);border:1px solid var(--b);border-radius:14px;margin:14px 0}
.strip.s3{grid-template-columns:repeat(3,1fr)}
.strip>div{padding:14px 18px;border-right:1px solid var(--b)}.strip>div:last-child{border:0}
.num{font-size:22px;margin-top:3px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:460px}
th{text-align:left;font-weight:500;color:var(--m);padding:8px 10px;border-bottom:1px solid var(--b)}
td{padding:11px 10px;border-bottom:1px solid var(--b);vertical-align:top}tr:last-child td{border:0}
.btn{background:var(--a);color:#fff;border:0;border-radius:10px;padding:9px 16px;font:600 14px 'Golos Text',sans-serif;cursor:pointer}
.btn:hover{filter:brightness(1.1)}.btn.s{background:var(--p2);color:var(--t);border:1px solid var(--b)}
.btn.d{background:transparent;color:var(--er);border:1px solid var(--b)}.btn.r{background:var(--live)}
.lk{all:unset;cursor:pointer;color:var(--at);font-weight:600}.lk:hover{text-decoration:underline}
input,select,textarea{font:inherit;color:var(--t);background:var(--bg);border:1px solid var(--b);border-radius:10px;padding:9px 10px;min-width:0}
textarea{width:100%;resize:vertical}
form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
label{display:flex;flex-direction:column;gap:4px;color:var(--m);font-size:13px}label.w{flex:1 1 240px}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between;flex-wrap:wrap}
.av{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;color:#120c1f;font-weight:700;flex:none}
.av.l{width:60px;height:60px;font:26px 'Russo One',sans-serif}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;border:1px solid currentColor;font-size:12px;font-weight:600;background:none;font-family:inherit;color:var(--m)}
button.chip{cursor:pointer}
.item{border:1px solid var(--b);border-radius:12px;padding:13px;margin-bottom:10px;background:var(--bg)}.item:last-child{margin:0}
.hd{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--m);font-size:13px;margin-bottom:5px}
.plc{font:56px/1 'Russo One',sans-serif;color:var(--b)}
.hm{display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:4px;overflow-x:auto;padding-bottom:4px}.hm i{border-radius:3px;background:var(--p2)}
.gt{display:flex;flex-direction:column;gap:7px;margin:12px 0}.gr{display:flex;align-items:center;gap:12px}
.gl{width:116px;flex:none;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk{position:relative;flex:1;height:22px;background:var(--p2);border-radius:6px;overflow:hidden}.gk i{position:absolute;top:3px;bottom:3px;border-radius:4px}
.ga{flex:1;display:flex;justify-content:space-between;font-size:12px;color:var(--m)}
#tip{position:fixed;z-index:60;display:none;pointer-events:none;background:var(--p2);color:var(--t);border:1px solid var(--b);border-radius:9px;padding:8px 11px;font-size:12px;white-space:pre-line;max-width:260px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.srow{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:70px 1.6fr 1fr 1fr 1fr 20px;gap:12px;align-items:center;padding:13px 12px;border-bottom:1px solid var(--b)}
.srow:hover{background:var(--p2)}.srow:last-child{border:0}.srow:focus-visible{outline:2px solid var(--a)}
.rf{margin-top:10px;padding-top:10px;border-top:1px dashed var(--b)}.rf input[type=number],.q{width:90px}
.dz{width:100%;border:2px dashed var(--b);border-radius:12px;padding:14px;text-align:center;background:var(--bg);transition:border-color .15s}
.dz.over{border-color:var(--a);background:var(--p2)}
.dz .lst{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
.fc{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--b);border-radius:99px;padding:3px 6px 3px 12px;background:var(--p);font-size:12px}
.fc button{all:unset;cursor:pointer;color:var(--er);padding:0 6px;font-weight:700}
.fg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.th{all:unset;cursor:zoom-in;width:112px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--b);background:var(--p2);display:block}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.fv{width:230px;display:flex;flex-direction:column;gap:2px}.fv video{width:230px;max-height:150px;border-radius:10px;background:#000}.fv span{font-size:12px;color:var(--m)}
.lb{position:fixed;inset:0;z-index:70;background:rgba(5,4,10,.88);display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lb img{max-width:94vw;max-height:90vh;border-radius:8px}
.tl{position:relative;padding-left:32px}.tl::before{content:'';position:absolute;left:10px;top:8px;bottom:8px;width:2px;background:var(--b)}
.ti{position:relative;margin-bottom:16px}.ti:last-child{margin:0}
.ti::before{content:'';position:absolute;left:-29px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--tc);border:3px solid var(--p)}
.wc{background:var(--bg);border:1px solid var(--b);border-radius:14px;padding:16px}
.wc.new{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc)}
.why{font-size:15px;margin-top:2px}
.meter{display:flex;gap:6px;margin-top:10px}.meter i{flex:1;height:12px;border-radius:6px;background:var(--p2);border:1px solid var(--b)}.meter i.f{background:var(--er);border-color:var(--er)}
.wsum{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.wsum>div{background:var(--p);border:1px solid var(--b);border-radius:14px;padding:16px 18px}
.wsum .num{font-size:34px}
.ban{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:14px;border:1px solid var(--wr);background:var(--p)}
.empty{text-align:center;padding:36px 12px}.empty .num{font-size:64px;color:var(--ok)}
.nt{display:flex;gap:12px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid var(--b)}.nt:last-child{border:0}
.nt .nd{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none;background:var(--a)}.nt.rd .nd{background:transparent;border:1px solid var(--b)}.nt.rd{color:var(--m)}
.toast{animation:tin .25s both;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--p2);border:1px solid var(--b);padding:10px 15px;border-radius:10px;display:none;z-index:80}
@keyframes up{from{opacity:0;transform:translateY(12px)}}
@keyframes gx{from{transform:scaleX(0)}}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
@keyframes zin{from{opacity:0;transform:scale(.94)}}
@keyframes gl{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--tc) 22%,transparent)}}
.pg>*{animation:up .45s cubic-bezier(.2,.7,.2,1) both}
.pg>*:nth-child(2){animation-delay:.06s}.pg>*:nth-child(3){animation-delay:.12s}.pg>*:nth-child(4){animation-delay:.18s}.pg>*:nth-child(n+5){animation-delay:.24s}
.pg .team>.card{animation:up .45s cubic-bezier(.2,.7,.2,1) both}.pg .team>.card:nth-child(2){animation-delay:.07s}.pg .team>.card:nth-child(3){animation-delay:.14s}.pg .team>.card:nth-child(4){animation-delay:.21s}.pg .team>.card:nth-child(n+5){animation-delay:.28s}
.team .card{transition:transform .2s,border-color .2s,box-shadow .2s}.team .card:hover{transform:translateY(-3px);border-color:var(--a);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn{transition:transform .12s,filter .15s}.btn:active{transform:scale(.97)}
.tb,.srow{transition:background .15s,color .15s}
.pg .gk i{transform-origin:left;animation:gx .7s cubic-bezier(.2,.7,.2,1) both}.ticking .gk i{animation:none}
.pg .hm i{animation:tin .45s both}
.meter i.f{transform-origin:left;animation:gx .5s cubic-bezier(.2,.7,.2,1) both}
.wc.new{animation:gl 2.4s ease-in-out infinite}
.lb img{animation:zin .2s}
.dz.over{transform:scale(1.01)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:900px){.app{flex-direction:column}aside{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--b);padding:12px 14px;align-items:center}.brand{padding:0 8px 0 0}#nav{display:flex;flex-wrap:wrap;gap:2px}.who{margin:0;border:0;padding:0}main{padding:16px 14px}.hero,.g2,.g3,.wsum{grid-template-columns:1fr}.strip,.strip.s3{grid-template-columns:1fr 1fr}.strip>div{border-bottom:1px solid var(--b)}.gl{width:84px}.big{font-size:34px}.srow{grid-template-columns:56px 1fr 20px}.srow .hid{display:none}}

/* ===== ModHub: добавления к демо ===== */
.quiet>*,.quiet .team>.card,.quiet .gk i,.quiet .hm i,.quiet .meter i.f{animation:none!important}
#login{padding:0 16px}
.login{max-width:440px;margin:14vh auto 0}
.login .card{display:flex;flex-direction:column;gap:14px}
.login .brand{padding:0}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.diag{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 16px;align-items:baseline}
.diag .k{color:var(--m)}
.who b{overflow-wrap:anywhere}
.chip.wr{color:var(--wr)}
@media (max-width:900px){.diag{grid-template-columns:1fr}.diag .k{margin-top:6px}}