/* X-Call Admin · Concept B (токены tokens.css из design package). Шрифты локальные (OFL). */
@font-face{font-family:"Inter";font-weight:400;src:url("/admin/assets/fonts/Inter-Regular.woff") format("woff");font-display:swap}
@font-face{font-family:"Inter";font-weight:500;src:url("/admin/assets/fonts/Inter-Medium.woff") format("woff");font-display:swap}
@font-face{font-family:"Inter";font-weight:600;src:url("/admin/assets/fonts/Inter-SemiBold.woff") format("woff");font-display:swap}
@font-face{font-family:"Unbounded";font-weight:600;src:url("/admin/assets/fonts/Unbounded-SemiBold.woff") format("woff");font-display:swap}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 var(--font-text);background:var(--bg);color:var(--ink)}
a{color:var(--cy)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.layout{display:flex;min-height:100vh}
nav.rail{width:232px;background:var(--card);border-right:1px solid var(--line);padding:14px 10px;flex:none;position:sticky;top:0;height:100vh;overflow:auto}
nav.rail h1{font:600 15px var(--font-num);margin:4px 10px 14px;letter-spacing:.02em}
nav.rail h1 b{color:var(--acc)}
nav.rail a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:var(--ink2);text-decoration:none;cursor:pointer;min-height:36px}
nav.rail a:hover{background:var(--raised);color:var(--ink)}
nav.rail a.on{background:var(--act);color:var(--actk);font-weight:600}
nav.rail a.dis{opacity:.45;cursor:not-allowed}
nav.rail a.dis:hover{background:none;color:var(--ink2)}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
header.top .grow{flex:1}
header.top input[type=search]{width:min(360px,100%)}
main{padding:20px;max-width:1500px;width:100%}
h2{margin:0 0 14px;font:600 20px var(--font-num)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px;margin-bottom:14px;overflow:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi b{display:block;font:600 22px var(--font-num)}.kpi span{color:var(--mu);font-size:12px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
th{color:var(--mu);font-weight:600;white-space:nowrap;position:sticky;top:0;background:var(--card)}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--raised)}
button,select,input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:var(--radius-field);padding:7px 12px;min-height:36px}
button{cursor:pointer}
button.pri{background:var(--act);border-color:var(--act);color:var(--actk);font-weight:600}
button.dng{border-color:var(--bad);color:var(--bad)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.pill{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);font-size:12px;background:var(--raised);border:1px solid var(--line)}
.pill.ok{background:var(--okf);color:var(--ok)}.pill.warn{background:var(--warnf);color:var(--warn)}.pill.bad{background:var(--badf);color:var(--bad)}
.badge-mock{background:var(--warnf);color:var(--warn);border:1px solid var(--warn);border-radius:var(--radius-pill);padding:2px 10px;font-size:11px;font-weight:600;letter-spacing:.04em}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}.mut{color:var(--mu)}
.err{color:var(--bad);margin:8px 0}
.errbox{border:1px solid var(--bad);background:var(--badf);border-radius:var(--radius-card);padding:14px}
.skel{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--raised),var(--line),var(--raised));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.login{max-width:360px;margin:12vh auto}
.login input{width:100%;margin-bottom:8px}
pre{white-space:pre-wrap;word-break:break-word;margin:0;font-size:12px}
.toast{position:fixed;right:16px;bottom:16px;z-index:30;max-width:380px}
.noaccess{text-align:center;padding:60px 20px}
nav.rail .ab{display:none;font:600 12px var(--font-num)}
@media (max-width:1023px){nav.rail{width:64px}nav.rail a{justify-content:center}nav.rail a .tx{display:none}nav.rail a .ab{display:inline}nav.rail h1{font-size:0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* нативные <dialog>: модальное подтверждение и drawer 480 px */
dialog{color:var(--ink);background:var(--card);border:1px solid var(--line2);padding:0}
dialog::backdrop{background:var(--scrim)}
dialog.modal{border-radius:var(--radius-sheet);width:min(480px,calc(100% - 32px));padding:0}
dialog.modal .box{padding:20px}
dialog.modal label,dialog.drawer label{display:block;margin:8px 0 3px;color:var(--mu);font-size:12px}
dialog.modal input,dialog.modal select,dialog.modal textarea{width:100%}
dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(480px,100%);border-radius:0;border-width:0 0 0 1px;overflow:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.drawer-head h2{margin:0;font-size:16px}
.drawer-body{padding:16px 20px}
.banner{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--radius-card);border:1px solid var(--line2);margin-bottom:12px}
.banner.warn{background:var(--warnf);border-color:var(--warn);color:var(--ink)}
.banner.bad{background:var(--badf);border-color:var(--bad)}
.banner.ok{background:var(--okf);border-color:var(--ok)}
.empty{padding:28px 12px;text-align:center;color:var(--mu)}
.small{font-size:12px}
.page-head h2{margin:0}
.grow{flex:1}
meter{width:100%;height:12px;margin:6px 0 12px}
nav.rail a.dis{pointer-events:auto}