:root{
color-scheme:dark;
 
--base:#0b0b0e;
--base-lift:#101017;
--panel:rgba(167,139,250,.075);
--raised:rgba(167,139,250,.11);
--sunken:rgba(0,0,0,.22);
 
--ink:#ededf2;
--muted:#aaa3b8;
--subtle:#948ba5;
 
--line:rgba(167,139,250,.13);
--line-strong:rgba(167,139,250,.24);
 
--accent:#a78bfa;
--accent-hover:#c4b5fd;
--accent-ink:#150f24;
--accent-soft:rgba(167,139,250,.10);
--accent-line:rgba(167,139,250,.3);
--accent-hover-fill:rgba(167,139,250,.16);
 
--success:#4cd4a0;
--success-soft:rgba(76,212,160,.08);
--warning:#edc378;
--warning-soft:rgba(237,195,120,.08);
--danger:#fb8e95;
--danger-soft:rgba(251,142,149,.08);
--info:#7cc7f5;
--info-soft:rgba(124,199,245,.08);


--red:#e06a5c;
--red-soft:rgba(224,106,92,.10);
--red-line:rgba(224,106,92,.28);
--blu:#6aa7e0;
--blu-soft:rgba(106,167,224,.10);
--blu-line:rgba(106,167,224,.28);
 
--glass-blur:14px;
--glass-fill:rgba(255,255,255,.045);
--glass-fill-hover:rgba(255,255,255,.085);
--glass-line:rgba(255,255,255,.10);
--glass-sheen:rgba(255,255,255,.16);
--glass-shadow:0 10px 30px rgba(0,0,0,.35);


--bar-fill:rgba(13,13,17,.72);
--pop-fill:rgba(19,17,27,.94);
--dlg-fill:rgba(17,15,24,.96);
--toast-fill:rgba(22,19,31,.95);
--tip-fill:rgba(23,19,31,.92);
--drop-fill:#13111b;
--btn-fill:rgba(255,255,255,.03);
--input-fill:rgba(255,255,255,.035);
--input-fill-focus:rgba(255,255,255,.06);
--switch-fill:rgba(255,255,255,.06);
--thead-fill:rgba(0,0,0,.16);
--scrim:rgba(6,5,10,.66);
--page-glow:#15151d;
--nav-ink:#bab9c7;
 
--display:"Golos Text",system-ui,sans-serif;
--body:Manrope,system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;


--sidebar:288px;
--top-height:60px;
--radius:14px;
--radius-sm:8px;
font-family:var(--body);
font-size:14px;
}


[data-theme="glass"]{
color-scheme:light;
--base:#eef0f6; --base-lift:#f7f8fc;
--panel:rgba(255,255,255,.66); --raised:rgba(93,71,168,.08); --sunken:rgba(30,24,60,.06);
--ink:#191828; --muted:#5c5975; --subtle:#807d94;
--line:rgba(70,50,130,.13); --line-strong:rgba(70,50,130,.24);
--accent:#6a4ddb; --accent-hover:#5637c9; --accent-ink:#ffffff;
--accent-soft:rgba(106,77,219,.10); --accent-line:rgba(106,77,219,.34);
--accent-hover-fill:rgba(106,77,219,.16);
--success:#1d8f63; --success-soft:rgba(29,143,99,.10);
--warning:#a86f0f; --warning-soft:rgba(168,111,15,.10);
--danger:#c93b47; --danger-soft:rgba(201,59,71,.09);
--info:#1f74b8; --info-soft:rgba(31,116,184,.09);
--red:#c9483a; --red-soft:rgba(201,72,58,.10); --red-line:rgba(201,72,58,.3);
--blu:#2f6fb5; --blu-soft:rgba(47,111,181,.10); --blu-line:rgba(47,111,181,.3);
--glass-fill:rgba(255,255,255,.55); --glass-fill-hover:rgba(255,255,255,.8);
--glass-line:rgba(70,50,130,.16); --glass-sheen:rgba(255,255,255,.7);
--glass-shadow:0 10px 30px rgba(40,30,90,.12);
--bar-fill:rgba(244,245,250,.78); --pop-fill:rgba(252,252,255,.97);
--dlg-fill:rgba(252,252,255,.98); --toast-fill:rgba(252,252,255,.97);
--tip-fill:rgba(252,252,255,.97); --drop-fill:#ffffff;
--btn-fill:rgba(255,255,255,.55); --input-fill:rgba(255,255,255,.7);
--input-fill-focus:#ffffff; --switch-fill:rgba(30,24,60,.10);
--thead-fill:rgba(70,50,130,.05);
--scrim:rgba(30,24,60,.45); --page-glow:#ffffff; --nav-ink:#4a4762;
}
[data-theme="glass"]{scrollbar-color:#c9c7d6 var(--base)}
[data-theme="glass"] .nav-link.is-current::before{background:var(--accent)}
 
*{box-sizing:border-box}
body{
margin:0;
background:radial-gradient(125% 85% at 50% -15%,var(--page-glow) 0%,var(--base) 55%) no-repeat fixed;
background-color:var(--base);
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
position:relative;isolation:isolate;
}
html{scrollbar-width:thin;scrollbar-color:#33303e var(--base)}
h1,h2,h3,h4,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;color:var(--subtle)}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
input,textarea{caret-color:var(--accent)}
table{border-collapse:collapse}
h1{font-family:var(--display);font-weight:800;font-size:29px;line-height:1.2;letter-spacing:-.025em}
h2{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
h3{font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-.01em}
h4{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.kit-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;padding:10px 16px;z-index:200;
background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);
font-weight:600;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.icon{width:18px;height:18px;display:inline-block;flex:none;stroke:currentColor;
fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon-sm{width:14px;height:14px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.positive,.is-up{color:var(--success)}
.negative,.is-down{color:var(--danger)}
.muted{color:var(--muted)}
.subtle{color:var(--subtle)}
.accent{color:var(--accent)}
.team-red{color:var(--red)}
.team-blu{color:var(--blu)}


.glass{
position:relative;isolation:isolate;
background:var(--glass-fill);
border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
backdrop-filter:blur(var(--glass-blur)) saturate(150%);
box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.07);
}
.glass::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
pointer-events:none;
background:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 42%);
}


.btn,.btn-icon{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
min-height:34px;padding:0 12px;
border:1px solid var(--line-strong);border-radius:var(--radius-sm);
background:var(--btn-fill);
font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink);
transition:background-color .16s,border-color .16s,color .16s;
}
.btn-icon{width:34px;padding:0;flex:none}
.btn .icon,.btn-icon .icon{width:15px;height:15px}
.btn:hover,.btn-icon:hover{background:var(--raised);border-color:var(--accent-line);color:var(--accent-hover)}
.btn:disabled,.btn-icon:disabled{opacity:.45}
.btn:disabled:hover,.btn-icon:disabled:hover{background:var(--btn-fill);border-color:var(--line-strong);color:var(--ink)}
.btn-primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);border-color:transparent;color:var(--accent-ink)}
.btn-primary .icon{stroke-width:2}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.btn-ghost:hover{background:var(--raised);color:var(--ink);border-color:transparent}
.btn-danger{color:var(--danger);border-color:rgba(251,142,149,.28);
background:rgba(251,142,149,.05)}
.btn-danger:hover{background:rgba(251,142,149,.13);border-color:rgba(251,142,149,.45)}
.btn-signout{min-height:46px}
.btn-accent{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.btn-accent:hover{background:var(--accent-hover-fill)}
.btn-sm{min-height:28px;padding:0 10px;font-size:11px}
.btn-lg{min-height:44px;padding:0 20px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);
transition:color .16s}
.link:hover{color:var(--accent)}
.link .icon{width:14px;height:14px}
.link-accent{color:var(--accent)}
.link-accent:hover{color:var(--accent-hover)}
 


.seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:9px;
background:var(--btn-fill);border:1px solid var(--line-strong)}
.seg button,.seg a{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;
border-radius:7px;font-size:12px;font-weight:600;color:var(--muted);
transition:background-color .16s,color .16s}
.seg button:hover,.seg a:hover{color:var(--ink);background:var(--raised)}
.seg [aria-pressed=true],.seg [aria-selected=true],.seg .is-current{
background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tabs button,.tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;
min-height:38px;padding:0 14px;border-radius:9px;border:1px solid transparent;
font-size:13px;font-weight:600;color:var(--muted);
transition:background-color .18s,color .18s,border-color .18s}
.tabs .icon{width:16px;height:16px}
.tabs button:hover,.tabs a:hover{background:var(--raised);color:var(--ink)}
.tabs [aria-selected=true]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.tabs [aria-selected=true]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;
height:2px;border-radius:2px;background:var(--accent)}
 
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;
background:var(--raised);color:var(--muted);font-size:10px;font-weight:600;
white-space:nowrap;letter-spacing:.02em}
.pill .icon{width:12px;height:12px}
.pill-ok{color:var(--success);background:var(--success-soft)}
.pill-warn{color:var(--warning);background:var(--warning-soft)}
.pill-danger{color:var(--danger);background:var(--danger-soft)}
.pill-accent{color:var(--accent);background:var(--accent-soft)}
.pill-info{color:var(--info);background:var(--info-soft)}
.pill-red{color:var(--red);background:var(--red-soft)}
.pill-blu{color:var(--blu);background:var(--blu-soft)}
.status{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:3px 8px;
line-height:1.4;font-size:11px;font-weight:600}
.status i{height:5px;width:5px;border-radius:50%;background:currentColor;flex:none}
.status-ok{color:var(--success);background:var(--success-soft)}
.status-warn{color:var(--warning);background:var(--warning-soft)}
.status-danger{color:var(--danger);background:var(--danger-soft)}
.status-idle{color:var(--subtle);background:var(--raised)}


.status-accent{color:var(--accent);background:var(--accent-soft)}
.status-live i{animation:kit-pulse 1.8s ease-in-out infinite}
@keyframes kit-pulse{0%,100%{opacity:1}50%{opacity:.25}}
 
.cls{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;
background:var(--raised);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap}
.cls img,.cls .icon{width:16px;height:16px}
.cls-dot{width:7px;height:7px;border-radius:2px;flex:none;background:var(--subtle)}


.ci{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-4px;
background:currentColor;
-webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat}
.ci-sm{width:14px;height:14px;vertical-align:-3px}
.ci-lg{width:22px;height:22px}
.ci-scout{--ci:url(class/scout.svg)}
.ci-soldier{--ci:url(class/soldier.svg)}
.ci-pyro{--ci:url(class/pyro.svg)}
.ci-demoman{--ci:url(class/demoman.svg)}
.ci-heavy{--ci:url(class/heavy.svg)}
.ci-engineer{--ci:url(class/engineer.svg)}
.ci-medic{--ci:url(class/medic.svg)}
.ci-sniper{--ci:url(class/sniper.svg)}
.ci-spy{--ci:url(class/spy.svg)}
.ci-empty{--ci:url(class/empty.svg)}
 
.card{
position:relative;isolation:isolate;min-width:0;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.card-glass{
border-color:var(--glass-line);background:var(--glass-fill);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
backdrop-filter:blur(var(--glass-blur)) saturate(150%);
box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.06);
}
.card-clip{overflow:clip}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 20px 14px}
.card-head h2{font-size:17px}
.card-head h3{font-size:13px}
.card-body{padding:0 20px 20px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
border-top:1px solid var(--line);padding:12px 20px;font-size:11px;color:var(--muted)}
.card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.divider{height:1px;background:var(--line);border:0;margin:0}
 
.metrics{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);
background:rgba(167,139,250,.025)}
.metrics>div{padding-left:20px;border-left:1px solid var(--line);min-width:0}
.metrics>div:first-child{padding-left:0;border:0}
.metrics dt{color:var(--muted);font-size:11px;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.metrics dd{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.35;
font-variant-numeric:tabular-nums}
.metrics dd small{display:block;font-family:var(--body);font-size:11px;font-weight:400;
color:var(--muted);margin-top:3px}
.card>.metrics{border:0;border-radius:0;background:none;padding-top:0}
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.stat dt{font-size:11px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.stat dd{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.2;
font-variant-numeric:tabular-nums}
.stat dd small{font-family:var(--body);font-size:11px;font-weight:400;color:var(--muted);margin-left:4px}
.stat-note{font-size:11px;color:var(--subtle);margin-top:6px}
 
.kv{margin:0}
.kv>div{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6}
.kv>div:last-child{border:0}
.kv dt{color:var(--muted)}
.kv dd{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
 
.table-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 20px 14px}
.table-wrap{overflow-x:auto;scrollbar-width:thin}
.table{width:100%;font-size:12px;min-width:640px}
.table thead{background:var(--thead-fill);color:var(--muted)}
.table th{border-block:1px solid var(--line);padding:0 12px;text-align:left;font-weight:600;
white-space:nowrap;font-size:10px;letter-spacing:.05em;text-transform:uppercase;height:36px}
.table th:first-child,.table td:first-child{padding-left:20px}
.table th:last-child,.table td:last-child{padding-right:20px}
.table th.right,.table td.right{text-align:right}
.table th[aria-sort]{color:var(--ink)}
.table th[aria-sort] .icon{width:11px;height:11px;opacity:.6;margin-left:4px}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);
font-variant-numeric:tabular-nums;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(167,139,250,.03)}
.table tbody tr.is-current{background:var(--accent-soft)}
.table td small{font-size:10px;color:var(--muted)}


.table td:not(.right)>small{display:block;margin-top:4px}
.table td strong{font-weight:700}
.table-compact td{padding-block:8px}
.table caption{caption-side:top;text-align:left;padding:0 20px 10px;font-size:11px;color:var(--subtle)}
.table .btn{min-height:26px;font-size:11px;padding-inline:9px}
.table-empty{padding:34px 20px;text-align:center;font-size:13px;color:var(--muted)}
 
.row-red td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.row-blu td:first-child{box-shadow:inset 3px 0 0 var(--blu)}


.who{display:flex;align-items:center;gap:8px;min-width:0}
.who-avatar{width:20px;height:20px;border-radius:5px;flex:none;object-fit:cover;
border:1px solid var(--line-strong);background:var(--raised)}
.who .ci{color:var(--muted)}
.row-red .who .ci{color:var(--red)}
.row-blu .who .ci{color:var(--blu)}
.who-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
 
.field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px}
.field>span{font-weight:600;line-height:1.5}
.field small{font-size:11px;font-weight:400;color:var(--muted);line-height:1.5}
.input,.field input,.field select,.field textarea{
width:100%;min-height:38px;border-radius:var(--radius-sm);padding:9px 11px;
color:var(--ink);font:400 12px/1.5 var(--body);outline-offset:3px;
background:var(--input-fill);
border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:border-color .16s,background-color .16s,box-shadow .16s}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{
border-color:var(--line-strong)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--accent-line);background:var(--input-fill-focus);
box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--subtle)}
.field textarea{resize:vertical;min-height:96px}
.field input:disabled,.input:disabled{opacity:.5}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field-wide{grid-column:1/-1}
.search{position:relative;min-width:220px;flex:1;max-width:460px}
.search>.icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);
width:15px;height:15px;color:var(--muted);pointer-events:none}
.search input{padding-left:35px}
.switch{appearance:none;width:36px;height:21px;min-height:0;padding:0;flex:none;
border:1px solid var(--glass-line);border-radius:12px;position:relative;cursor:pointer;
background:var(--switch-fill);transition:background-color .18s,border-color .18s}
.switch::after{content:"";position:absolute;width:13px;height:13px;top:3px;left:4px;
background:var(--muted);border-radius:50%;transition:transform .18s,background-color .18s}
.switch:checked{background:var(--accent);border-color:var(--accent)}
.switch:checked::after{background:var(--accent-ink);transform:translateX(14px)}
.toggle-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;
padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.toggle-row:last-child{border-bottom:0}
.toggle-row small{grid-column:1/-1;color:var(--muted);font-size:11px}
.slider{appearance:none;width:100%;height:4px;border-radius:3px;background:var(--raised);
outline-offset:6px}
.slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;
background:var(--accent);border:2px solid #17131f;cursor:pointer}
.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);
border:2px solid #17131f;cursor:pointer}
 


.bar{display:block;height:5px;border-radius:3px;background:var(--raised);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:var(--accent);
transition:width .4s ease}
.bar-ok>i{background:var(--success)}
.bar-warn>i{background:var(--warning)}
.bar-danger>i{background:var(--danger)}
.bar-red>i{background:var(--red)}
.bar-blu>i{background:var(--blu)}
.bar-lg{height:9px;border-radius:5px}
.bar-lg>i{border-radius:5px}
.bar-striped>i{background-image:linear-gradient(115deg,rgba(255,255,255,.18) 25%,transparent 25%,
transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%);
background-size:16px 16px;animation:kit-stripe 1s linear infinite}
@keyframes kit-stripe{to{background-position:16px 0}}
.dist{display:grid;gap:16px}
.dist-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:7px}
.dist-head strong{font-weight:700;font-variant-numeric:tabular-nums}
 
.split{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--raised);width:100%}
.split>i{display:block;height:100%}
.split-red{background:var(--red)}
.split-blu{background:var(--blu)}
.split-labels{display:flex;justify-content:space-between;font-size:11px;margin-top:7px;
font-variant-numeric:tabular-nums}
 
.tip{position:relative;display:inline-flex}


.tip .tip-body{
position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);
min-width:180px;max-width:280px;padding:10px 12px;border-radius:10px;z-index:60;
background:var(--tip-fill);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
box-shadow:var(--glass-shadow);
font-size:11px;line-height:1.6;color:var(--muted);text-align:left;
opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;white-space:normal}
.tip .tip-body strong{display:block;color:var(--ink);font-size:12px;margin-bottom:4px}
.tip .tip-body::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
border:5px solid transparent;border-top-color:var(--tip-fill)}
.tip:hover .tip-body,.tip:focus-within .tip-body{opacity:1;transform:translateX(-50%) translateY(0)}
.tip-btn{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line-strong);color:var(--muted);font-size:9px;font-weight:700;flex:none}
.tip-btn:hover{color:var(--accent);border-color:var(--accent-line)}
 
.callout{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);
background:var(--panel);border-radius:12px;padding:15px 17px}
.callout>.icon{color:var(--accent);margin-top:2px}
.callout strong{font-size:13px;font-weight:700;display:block}
.callout p{font-size:12px;color:var(--muted);line-height:1.65;margin-top:4px;max-width:80ch}
.callout-warn{border-color:rgba(237,195,120,.22);background:rgba(237,195,120,.035)}
.callout-warn>.icon{color:var(--warning)}
.callout-danger{border-color:rgba(251,142,149,.22);background:rgba(251,142,149,.035)}
.callout-danger>.icon{color:var(--danger)}
.empty{text-align:center;padding:38px 22px}
.empty>.icon{width:30px;height:30px;color:var(--subtle);margin:0 auto 14px;display:block}
.empty h3{font-size:16px}
.empty p{font-size:12px;color:var(--muted);max-width:46ch;margin:9px auto 18px;line-height:1.7}
 
.skeleton{border-radius:8px;background:linear-gradient(100deg,var(--raised) 30%,
rgba(167,139,250,.2) 50%,var(--raised) 70%);background-size:300% 100%;
animation:kit-shimmer 1.6s ease-in-out infinite}
@keyframes kit-shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
 
.top{height:var(--top-height);display:flex;align-items:center;gap:18px;padding:0 20px;
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
background:var(--bar-fill);
-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.brand{display:flex;align-items:center;gap:10px;flex:none}


.brand img,.brand .brand-mark{width:38px;height:38px;object-fit:contain;border-radius:10px}
.brand span{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.025em}
.brand small{font-size:10px;color:var(--subtle);font-weight:600;letter-spacing:.08em;
text-transform:uppercase;margin-left:2px}
.top-nav{display:flex;align-items:center;gap:2px}
.top-nav a{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;
border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);
transition:background-color .16s,color .16s}
.top-nav a:hover{background:var(--raised);color:var(--ink)}
.top-nav a.is-current{color:var(--accent);background:var(--accent-soft)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang{display:flex;height:30px;border:1px solid var(--glass-line);border-radius:8px;
overflow:hidden;font-size:11px;align-items:center;
background:var(--glass-fill);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lang span,.lang button{height:100%;display:grid;place-items:center;padding:0 9px;font-weight:600}


.lang button{appearance:none;-webkit-appearance:none;
background:transparent;border:0;color:var(--muted)}
.lang [aria-current=true],.lang .is-current{background:var(--accent-soft);color:var(--accent)}
.lang button:hover{color:var(--ink);background:var(--raised)}
.account{display:flex;align-items:center;gap:8px;padding:4px 9px 4px 4px;border-radius:9px;
font-size:12px;font-weight:600;border:1px solid transparent}
.account:hover{background:var(--raised);border-color:var(--line)}
.account img,.account .icon:first-child{width:26px;height:26px;border-radius:50%;flex:none;
border:1px solid var(--line-strong);background:var(--raised)}
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
.rail{height:calc(100dvh - var(--top-height));position:sticky;top:var(--top-height);
overflow-y:auto;scrollbar-width:thin;border-right:1px solid var(--line);
padding:20px 12px 26px;background:rgba(0,0,0,.12)}
.nav-group{margin-bottom:20px}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--subtle);padding:0 12px;margin-bottom:8px}
.nav-link{position:relative;overflow:hidden;isolation:isolate;display:flex;gap:11px;
align-items:center;min-height:38px;padding:0 12px;border-radius:9px;color:var(--nav-ink);
font-size:13px;font-weight:600;margin-bottom:3px;border:1px solid transparent;
transition:background-color .2s,color .18s,border-color .18s}
.nav-link .icon{width:17px;height:17px}
.nav-link .nav-count{margin-left:auto;font-size:10px;color:var(--subtle);font-variant-numeric:tabular-nums}
.nav-link:hover{background:var(--panel);color:var(--ink)}
.nav-link.is-current{color:var(--accent);background:var(--accent-soft);border-color:rgba(167,139,250,.14)}
.nav-link.is-current::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;
border-radius:3px;background:linear-gradient(180deg,#fff,#bfc4d0);pointer-events:none}
.main{width:100%;max-width:1560px;padding:24px 28px 32px;margin-inline:auto;min-width:0}
.main-wide{max-width:none}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-head p{font-size:13px;color:var(--muted);margin-top:8px;max-width:80ch;line-height:1.7}
.crumbs{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--subtle);margin-bottom:9px}
.crumbs a:hover{color:var(--accent)}
.stack{display:flex;flex-direction:column;gap:18px}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:18px;align-items:start}
.two-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-end{margin-left:auto}
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
border-top:1px solid var(--line);margin-top:28px;padding:18px 0 0;font-size:11px;color:var(--subtle)}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}


.footer nav{margin:0 -8px}
.footer nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 8px}
.footer a:hover{color:var(--accent)}
 
@media(max-width:1240px){
.two,.two-even{grid-template-columns:minmax(0,1fr)}
.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
.shell{grid-template-columns:minmax(0,1fr)}
.rail{display:none}
.main{padding:20px 16px 28px}
.three{grid-template-columns:minmax(0,1fr)}
.metrics{grid-auto-flow:row;grid-auto-columns:auto;gap:14px}
.metrics>div{padding-left:0;border-left:0}
}
@media(max-width:640px){
.top{padding:0 14px;gap:12px}
.top-nav{display:none}
.fields{grid-template-columns:minmax(0,1fr)}
h1{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
}


@media(pointer:coarse){
.btn,.btn-icon,.seg button,.seg a,.tabs button,.tabs a,.top-nav a,.account,
.link,.pop-item,.nav-link,.lang,.lang button,.lang span,.pill-btn,
.input,.field input,.field select{min-height:44px}
.btn-icon{width:44px}
.lang{height:auto}
.switch{min-height:0}
.pill,.status{min-height:0}
}


.pop{position:fixed;z-index:70;margin:0;padding:6px;min-width:210px;max-width:min(94vw,380px);
border-radius:var(--radius);border:1px solid var(--glass-line);background:var(--pop-fill);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);
backdrop-filter:blur(var(--glass-blur)) saturate(130%);
box-shadow:0 18px 44px rgba(0,0,0,.55);color:var(--ink);font-family:var(--body);font-size:13px;
animation:kit-pop .13s ease-out}
.site-popover{overflow-wrap:anywhere;position:fixed!important;z-index:250;overflow:auto;overscroll-behavior:contain;
box-sizing:border-box;scrollbar-width:thin;inset:auto;max-height:calc(100dvh - 16px)}
@media(pointer:coarse){.site-popover :is(.pop-item,a,button){min-height:44px}}
@keyframes kit-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop-head{display:flex;align-items:center;gap:8px;padding:8px 10px 9px;margin-bottom:4px;
border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:12px;
letter-spacing:.02em;text-transform:uppercase;color:var(--subtle)}
.pop-head .row-end{margin-left:auto}
.pop-list{display:flex;flex-direction:column;gap:2px}
.pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;
background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.pop-item:hover,.pop-item:focus-visible{background:var(--accent-soft);color:var(--accent-hover)}
.pop-item .icon{width:15px;height:15px;flex:none;color:var(--subtle)}
.pop-item:hover .icon{color:var(--accent)}
.pop-item small{margin-left:auto;color:var(--subtle);font-size:11px}
.pop-item[aria-checked=true]{background:var(--accent-soft);color:var(--accent-hover)}
.pop-item[aria-checked=true]::after{content:"✓";margin-left:auto;color:var(--accent);font-size:12px}
.pop-item[aria-checked=true] small{margin-left:0;margin-right:8px}
.pop-note{padding:8px 10px 6px;color:var(--subtle);font-size:11px;line-height:1.6}
.pop-sep{height:1px;margin:5px 2px;background:var(--line)}
.dlg-wrap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
padding:26px;background:var(--scrim);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:kit-fade .14s ease-out}
@keyframes kit-fade{from{opacity:0}to{opacity:1}}
.dlg{width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;
border-radius:18px;border:1px solid var(--glass-line);background:var(--dlg-fill);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
backdrop-filter:blur(var(--glass-blur)) saturate(140%);
box-shadow:0 30px 70px rgba(0,0,0,.6);color:var(--ink);font-family:var(--body);
animation:kit-rise .16s cubic-bezier(.2,.7,.3,1)}
.dlg-wide{width:min(880px,100%)}
@keyframes kit-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.dlg-head{display:flex;align-items:center;gap:12px;flex:none;padding:16px 18px;
border-bottom:1px solid var(--line)}
.dlg-head h2,.dlg-head h3{margin:0;font-family:var(--display);font-weight:800;font-size:16px;
letter-spacing:-.01em;text-transform:none}
.dlg-head .pill{margin-left:2px}
.dlg-head .dlg-x{margin-left:auto}
.dlg-body{padding:16px 18px;overflow:auto;flex:1 1 auto}
.dlg-body>p{color:var(--muted);font-size:12.5px;line-height:1.75;margin:0 0 12px}
.dlg-body h4{margin:18px 0 9px;font-family:var(--display);font-size:13px}
.dlg-body h4:first-child{margin-top:0}
.dlg-foot{display:flex;align-items:center;gap:10px;flex:none;padding:13px 18px;
border-top:1px solid var(--line);color:var(--subtle);font-size:11.5px}
.dlg-foot .row-end,.dlg-foot .card-actions{margin-left:auto}
.dlg textarea{width:100%;min-height:120px;resize:vertical;padding:11px 13px;
border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--sunken);
color:var(--ink);font:inherit;font-size:13px;line-height:1.6}
.dlg textarea:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:640px){.dlg-wrap{padding:12px}.dlg{max-height:92vh}}
.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;
border:1px solid var(--glass-line);background:var(--toast-fill);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 12px 30px rgba(0,0,0,.5);color:var(--ink);font-family:var(--body);font-size:12.5px;
animation:kit-toast .2s ease-out}
.toast .icon{width:15px;height:15px;color:var(--accent)}
.toast.is-ok .icon{color:var(--success)}
.toast.is-warn .icon{color:var(--warning)}
@keyframes kit-toast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 
.is-flash{animation:kit-flash 1.1s ease-out}
@keyframes kit-flash{
0%{box-shadow:0 0 0 0 rgba(167,139,250,.55)}
40%{box-shadow:0 0 0 7px rgba(167,139,250,.16)}
100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}
}
[data-pop][aria-expanded=true],[data-dlg][aria-expanded=true]{
border-color:var(--accent-line);color:var(--accent-hover)}
.is-busy{opacity:.65;pointer-events:none}
.spin{animation:kit-spin .9s linear infinite}
@keyframes kit-spin{to{transform:rotate(360deg)}}


button.account,button.nav-link{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
text-align:left}
button.account{border:1px solid transparent;font-size:12px;font-weight:600}
button.nav-link{width:100%}
.lang button{background:none;border:0;cursor:pointer;font-family:inherit}
button.pill,button.status,button.link{border:0;font-family:inherit;cursor:pointer}
button.link{background:none;padding:0}
.pill-btn{border:1px solid transparent !important;transition:color .16s,border-color .16s}
.pill-btn:hover{border-color:var(--accent-line) !important;color:var(--accent-hover)}
@media(prefers-reduced-motion:reduce){
.pop,.dlg,.dlg-wrap,.toast,.is-flash,.spin{animation:none;transition:none}
}