:root{
  --ink:#101828;--ink2:#344054;--muted:#5B6474;--line:#E4E7EC;--line2:#F2F4F7;--bg:#F4F5F7;--card:#FFFFFF;
  --acc:#0B6E4F;--acc2:#12B886;--accbg:#E6F4EF;--warn:#F79009;--bad:#F04438;
  --g-bg:#FEF3F2;--g-fg:#B42318;--m-bg:#FFFAEB;--m-fg:#B54708;--o-bg:#F2F4F7;--o-fg:#344054;--h-bg:#EFF8FF;--h-fg:#175CD3;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 'IBM Plex Sans',system-ui,sans-serif}
a{color:var(--acc)}a:hover{color:#08513A}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,select,textarea{transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s,opacity .2s}
button:not([disabled]):active{transform:scale(.98)}
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.boot{padding:40px;color:var(--muted)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
.xs{font-size:12px}

/* header */
header.top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.top-in{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#fff;text-decoration:none}
.logo b{display:inline-flex;width:32px;height:32px;border-radius:8px;background:var(--acc2);color:var(--ink);align-items:center;justify-content:center;font-size:14px}
nav.tabs{display:flex;gap:4px;flex:1 1 auto;flex-wrap:wrap}
nav.tabs a,nav.tabs span{color:#D0D5DD;text-decoration:none;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap}
nav.tabs a:hover{background:#1D2939;color:#fff}
nav.tabs a.on{background:#344054;color:#fff;font-weight:600}
nav.tabs span.soon{color:#98A2B3;cursor:not-allowed;display:inline-flex;gap:6px;align-items:center}
nav.tabs span.soon i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;border:1px solid #475467;border-radius:6px;padding:1px 5px}
.badge{background:var(--warn);color:var(--ink);border-radius:10px;padding:1px 7px;font-size:12px;font-weight:700;margin-left:4px}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:#98A2B3}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--acc2)}
.live:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(18,184,134,.25)}
.live.off{color:#FEC84B}
.btn-ghost-dark{border:1px solid #475467;background:transparent;color:#D0D5DD;border-radius:8px;padding:7px 12px;font-size:13px;min-height:36px}
.btn-ghost-dark:hover{background:#1D2939;color:#fff}
@media (max-width:1100px){nav.tabs{flex-wrap:nowrap;overflow-x:auto;order:3;flex-basis:100%;scrollbar-width:none}nav.tabs::-webkit-scrollbar{display:none}}
@media (max-width:900px){header.top{position:static}}

/* layout */
main{max-width:1360px;margin:0 auto;padding:28px 24px 64px;display:flex;flex-direction:column;gap:20px;animation:in .3s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{margin:0;font-size:28px;font-weight:700}
.sub{margin:6px 0 0;color:var(--muted);font-size:14px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.pad{padding:18px 22px}
.kpi{padding:16px 18px}
.kpi .l{font-size:13px;color:var(--muted);font-weight:500}
.kpi .v{font-family:var(--mono);font-size:28px;font-weight:600;margin-top:6px}
.kpi .s{font-size:12px;color:var(--muted);margin-top:4px}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--ink2);font-weight:600;font-size:14px;padding:8px 14px;border-radius:8px;min-height:38px}
.seg button.on{background:var(--ink);color:#fff}
.btn{border:1px solid #D0D5DD;background:#fff;color:var(--ink2);font-weight:600;font-size:14px;padding:9px 14px;border-radius:10px;min-height:42px}
.btn:hover{background:#F9FAFB}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}.btn.pri:hover{background:#095C42}
.btn.danger{border-color:#FDA29B;color:var(--g-fg)}
.btn.sm{font-size:13px;padding:6px 10px;min-height:36px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
select.inp,input.inp,textarea.inp{border:1px solid #D0D5DD;border-radius:10px;padding:9px 12px;min-height:42px;background:#fff;font-size:14px}
textarea.inp{min-height:70px;resize:vertical;width:100%}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.chip{border:1px solid #D0D5DD;background:#fff;color:var(--ink2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;min-height:36px}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lv{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;display:inline-block}
.lv-грубое{background:var(--g-bg);color:var(--g-fg)}.lv-среднее{background:var(--m-bg);color:var(--m-fg)}
.lv-порядок{background:var(--o-bg);color:var(--o-fg)}.lv-подсказка{background:var(--h-bg);color:var(--h-fg)}
.st{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap}
.st-ok{background:#ECFDF3;color:#067647}.st-no{background:var(--o-bg);color:var(--o-fg)}.st-wait{background:var(--m-bg);color:var(--m-fg)}

/* collapsible */
.sec-h{margin:0;font-size:17px;font-weight:600}
.sec-h button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;padding:0;text-align:left;min-height:44px;font-weight:inherit;font-size:inherit;color:inherit}
.sec-h svg{margin-left:auto;flex:none;color:#667085;transition:transform .25s ease}
.sec[data-closed="1"] .sec-h svg{transform:rotate(-90deg)}
.sec-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease,opacity .25s ease}
.sec-b>div{overflow:hidden;min-height:0}
.sec[data-closed="1"] .sec-b{grid-template-rows:0fr;opacity:0}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 8px;white-space:nowrap}
table.t td{padding:10px 8px;border-top:1px solid var(--line2);vertical-align:top}
table.t tr:hover td{background:#FAFBFC}
table.t th:first-child,table.t td:first-child{padding-left:22px}
table.t th:last-child,table.t td:last-child{padding-right:22px}
.bar{height:8px;background:var(--line2);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px}
.lnk{font-family:var(--mono);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.empty{padding:22px;color:var(--muted);font-size:14px;text-align:center}

/* bars chart */
.vbars{display:flex;align-items:flex-end;gap:10px;height:190px;border-bottom:1px solid var(--line);padding-top:10px}
.vbars>div{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.vbars i{display:block;width:100%;max-width:44px;border-radius:5px 5px 0 0;transition:height .4s ease}
.vlabels{display:flex;gap:10px;margin-top:6px}.vlabels span{flex:1 1 0;text-align:center;font-size:11px;color:var(--muted)}

/* managers */
.mgr{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.mgr-list{flex:1 1 260px;min-width:0;padding:8px;display:flex;flex-direction:column;gap:2px}
.mgr-list button{display:flex;justify-content:space-between;gap:10px;width:100%;border:0;background:transparent;border-radius:10px;padding:10px 12px;min-height:44px;text-align:left;font-size:14px;font-weight:500}
.mgr-list button:hover{background:#F9FAFB}
.mgr-list button.on{background:var(--accbg)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;flex:none}
.mgr-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.mgr-list{max-height:280px;overflow-y:auto}}

/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.auth .card{width:100%;max-width:420px;padding:28px}
.auth h1{font-size:22px;display:flex;align-items:center;gap:10px}
.auth form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.err{background:var(--g-bg);color:var(--g-fg);border-radius:10px;padding:10px 12px;font-size:14px}
.okmsg{background:#ECFDF3;color:#067647;border-radius:10px;padding:10px 12px;font-size:14px}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 12px 32px rgba(16,24,40,.3);font-size:14px;z-index:90;max-width:calc(100% - 32px);animation:tin .25s ease both}
@keyframes tin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* contest form */
.contest{background:#FFFCF5;border:1px solid #FEDF89;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin:6px 0}
.soon-card{opacity:.6}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
td.mono,.kpi .v{white-space:nowrap}
.seg{display:inline-flex;width:max-content;max-width:100%;overflow-x:auto}
@media (max-width:600px){main{padding:20px 16px 48px}.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:12px 14px}.kpi .v{font-size:21px}h1{font-size:24px}.top-in{padding:0 16px}}

/* ===== Фирменный стиль QADAZ MEDIA: фиолетовый + белый, минимализм ===== */
:root{--acc:#5B12D4;--acc2:#8B5CF6;--accbg:#F1EBFD;--brand:#5B12D4;--brand-d:#45099F;--bg:#F7F6FB;--line:#ECEAF2;--line2:#F3F1F8}
body{background:var(--bg)}
a{color:var(--brand)}a:hover{color:var(--brand-d)}
:focus-visible{outline-color:var(--acc2)}
header.top{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);color:var(--ink);border-bottom:1px solid var(--line)}
.logo{color:var(--ink);font-weight:700;letter-spacing:.01em}
.logo img{width:34px;height:34px;border-radius:50%;display:block}
.logo small{font-weight:500;color:var(--muted);font-size:14px;margin-left:2px}
nav.tabs a,nav.tabs span{color:#475467}
nav.tabs a:hover{background:#F4F0FE;color:var(--brand)}
nav.tabs a.on{background:var(--accbg);color:var(--brand)}
nav.tabs span.soon{color:#98A2B3}nav.tabs span.soon i{border-color:#D0D5DD}
.badge{background:var(--brand);color:#fff}
.who{color:var(--muted)}
.btn-ghost-dark{border-color:var(--line);color:#344054;background:#fff}
.btn-ghost-dark:hover{background:#F4F0FE;color:var(--brand);border-color:#DDD0FB}
.btn.pri{background:var(--brand);border-color:var(--brand)}.btn.pri:hover{background:var(--brand-d);border-color:var(--brand-d)}
.seg button.on,.chip.on{background:var(--brand);border-color:var(--brand)}
.card{border-color:var(--line);box-shadow:0 1px 2px rgba(23,12,61,.03)}
.mgr-list button.on{background:var(--accbg);color:var(--brand)}
.lnk{color:var(--brand)}
.auth{background:radial-gradient(1200px 600px at 50% -10%,#EFE7FD 0%,var(--bg) 60%)}
.auth .brandlogo{width:56px;height:56px;border-radius:50%;display:block;margin-bottom:14px}
.auth h1{font-size:22px}
input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(139,92,246,.15);outline:none}
.live{color:#12B886}
[hidden]{display:none!important}
nav.tabs a .badge{padding:1px 7px;color:#fff;border-radius:10px;font-size:12px}
