/* Дизайн-система кабинета/админки (единый источник токенов).
   Codex 2026-07-11: визуальный стиль приведён к приложенному YP VPN логотипу:
   светлая поверхность, navy-текст, холодный синий акцент, мягкие топографические линии. */
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(/assets/unbounded-cyr.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(/assets/unbounded-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
:root{
  --display:"Unbounded",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#f5f9fd; --surface:#ffffff; --surface-2:#eef5fb; --elevated:#f9fcff;
  --border:#d7e4f0; --border-strong:#b8cadc;
  --text:#0d2238; --muted:#58708a; --faint:#8294a8;
  --accent:#1268d6; --accent-2:#62c6f2; --accent-deep:#0a3568;
  --accent-ink:#ffffff; --accent-soft:rgba(18,104,214,.11);
  --ok:#13805c; --warn:#986a00; --danger:#c73535; --danger-soft:rgba(199,53,53,.1);
  --radius:8px; --radius-sm:8px; --tap:48px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem;
  --shadow:0 1px 2px rgba(10,53,104,.06),0 10px 28px rgba(10,53,104,.1);
  --shadow-soft:0 14px 36px rgba(10,53,104,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  background-color:var(--bg);
  background-image:
    repeating-radial-gradient(ellipse at 8% 34%, rgba(78,123,164,.16) 0 1px, transparent 1px 44px),
    repeating-radial-gradient(ellipse at 88% 68%, rgba(18,104,214,.12) 0 1px, transparent 1px 58px),
    linear-gradient(180deg,#fbfdff 0%,#eef6fd 58%,#f9fcff 100%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:0 0 env(safe-area-inset-bottom);
}
.cabinet-body{
  --bg:#060d1a; --surface:#0d1a2e; --surface-2:#0b1626; --elevated:#10203a;
  --border:rgba(126,166,214,.18); --border-strong:rgba(126,166,214,.34);
  --text:#eaf2fb; --muted:#9db2cc; --faint:#6f86a3;
  --accent:#2f8bff; --accent-2:#62c6f2; --accent-deep:#bfe0ff;
  --accent-ink:#ffffff; --accent-soft:rgba(47,139,255,.16);
  --ok:#36d49a; --warn:#f0c45a; --danger:#ff7a7a; --danger-soft:rgba(255,122,122,.12);
  --shadow:0 1px 2px rgba(0,0,0,.38),0 18px 44px rgba(0,0,0,.48);
  --shadow-soft:0 22px 60px rgba(0,0,0,.52);
  color-scheme:dark;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(47,139,255,.22), transparent 60%),
    radial-gradient(820px 480px at 6% 4%, rgba(98,198,242,.11), transparent 58%),
    repeating-radial-gradient(ellipse at 12% 34%, rgba(126,166,214,.14) 0 1px, transparent 1px 52px),
    repeating-radial-gradient(ellipse at 86% 76%, rgba(47,139,255,.12) 0 1px, transparent 1px 64px),
    #060d1a;
}
.app{max-width:720px; margin:0 auto; padding:0 var(--space-4)}
.cabinet-body .app{max-width:760px}
header.top{
  position:sticky; top:0; z-index:10; background:rgba(250,253,255,.86);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid rgba(184,202,220,.78);
  padding:calc(env(safe-area-inset-top) + var(--space-2)) 0 var(--space-2);
}
.cabinet-body header.top{
  background:rgba(7,14,28,.84);
  border-bottom-color:rgba(126,166,214,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.top .app{display:flex; align-items:center; gap:var(--space-3)}
.brand{display:flex; align-items:center; gap:.65rem; min-width:0; margin-right:auto; color:var(--text); text-decoration:none}
.brand-mark{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:12px; filter:drop-shadow(0 10px 18px rgba(18,104,214,.22));
}
.brand-mark img{display:block; width:100%; height:100%; object-fit:contain}
.brand-copy{display:grid; line-height:1.05}
.brand-copy b{font-family:var(--display); font-size:.95rem; letter-spacing:.04em}
.brand-copy small{font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.06em}
nav.tabs{display:flex; gap:var(--space-2); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--space-4);
  border-radius:999px; color:var(--muted); text-decoration:none; font-weight:700; font-size:.95rem;
  border:1px solid var(--border); background:rgba(255,255,255,.72); white-space:nowrap;
}
nav.tabs a[aria-current="page"]{color:var(--accent-deep); background:var(--accent-soft); border-color:rgba(18,104,214,.26)}
.cabinet-body nav.tabs a{background:rgba(255,255,255,.06); border-color:var(--border); color:var(--muted)}
.cabinet-body nav.tabs a[aria-current="page"]{background:rgba(47,139,255,.17); border-color:rgba(98,198,242,.34); color:var(--text)}
main{padding:var(--space-5) 0 var(--space-6)}
h1{font-size:1.65rem; line-height:1.15; margin:0 0 var(--space-3); letter-spacing:0}
.cabinet-body h1{
  font-family:var(--display); font-size:clamp(1.7rem,7vw,2.45rem); font-weight:640;
  color:var(--text); margin-top:var(--space-2); margin-bottom:var(--space-4);
}
h2{font-size:.86rem; margin:var(--space-6) 0 var(--space-3); color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em}
p{margin:0 0 var(--space-3)}
a{color:var(--accent)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.card{
  background:rgba(255,255,255,.94); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); margin:0 0 var(--space-4); box-shadow:var(--shadow);
}
.cabinet-body .card{
  background:linear-gradient(180deg,rgba(16,32,58,.88),rgba(11,22,38,.88));
  border-color:var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.card h3{margin:0 0 var(--space-2); font-size:1.02rem; line-height:1.25; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.cabinet-body .card h3{font-family:var(--display); font-weight:620; letter-spacing:0; font-size:1rem}
.account-card{padding:var(--space-3); box-shadow:none}
.account-card .row{gap:var(--space-2)}
.account-id{display:grid; gap:.1rem; min-width:0}
.account-id b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px}
.subscription-card{border-color:rgba(18,104,214,.2); box-shadow:var(--shadow-soft)}
.cabinet-body .subscription-card{border-color:rgba(98,198,242,.34); box-shadow:var(--shadow-soft)}
.row{display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center}
.stack>*+*{margin-top:var(--space-2)}
.pill{display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .62rem; border-radius:999px; font-size:.8rem; font-weight:800; white-space:nowrap; border:1px solid var(--border-strong); color:var(--muted); background:rgba(255,255,255,.68)}
.cabinet-body .pill{background:rgba(255,255,255,.07)}
.pill.ok{color:var(--ok); border-color:rgba(19,128,92,.38); background:rgba(19,128,92,.08)}
.pill.warn{color:var(--warn); border-color:rgba(152,106,0,.34); background:rgba(152,106,0,.08)}
.pill.bad{color:var(--danger); border-color:rgba(199,53,53,.35); background:rgba(199,53,53,.08)}
.kv{display:flex; gap:.4rem; font-size:.9rem; color:var(--muted)}
.kv b{color:var(--text); font-weight:600}
button, .btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; font:inherit; font-weight:600;
  min-height:var(--tap); padding:0 var(--space-4); border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--elevated); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
}
.cabinet-body button,.cabinet-body .btn{background:rgba(255,255,255,.07); color:var(--text); border-color:var(--border-strong); box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
button.primary,.btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent) 58%,#0755bd); border-color:rgba(18,104,214,.68); color:var(--accent-ink); box-shadow:0 10px 22px rgba(18,104,214,.22)}
button.success,.btn.success{background:linear-gradient(135deg,#2fbd85,var(--ok) 60%,#0c6446); border-color:rgba(19,128,92,.6); color:#fff; box-shadow:0 10px 22px rgba(19,128,92,.22)}
button.secondary,.btn.secondary{background:#ffffff; border-color:rgba(18,104,214,.32); color:var(--accent-deep)}
.cabinet-body button.secondary,.cabinet-body .btn.secondary{background:rgba(255,255,255,.07); color:var(--text); border-color:var(--border-strong)}
button.ghost,.btn.ghost{background:rgba(255,255,255,.54)}
.cabinet-body button.ghost,.cabinet-body .btn.ghost{background:rgba(255,255,255,.06)}
button.danger,.btn.danger{color:var(--danger); border-color:rgba(199,53,53,.35); background:var(--danger-soft)}
button.sm,.btn.sm{min-height:40px; padding:0 var(--space-3); font-size:.9rem}
button.icon,.btn.icon,.icon-btn{width:var(--tap); min-width:var(--tap); padding:0}
.icon-btn.sm{width:40px; min-width:40px}
.toolbar{display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center}
.toolbar button,.toolbar .btn{flex:0 0 auto}
.segmented{display:flex; gap:0; padding:3px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2)}
.segmented button,.segmented .btn{min-height:40px; border-color:transparent; background:transparent; box-shadow:none}
.segmented [aria-pressed="true"],.segmented [aria-current="true"]{background:#ffffff; color:var(--accent-deep); border-color:var(--border); box-shadow:var(--shadow)}
button:disabled{opacity:.5; cursor:not-allowed}
input,select,textarea{
  width:100%; min-height:var(--tap); padding:0 var(--space-4); font:inherit; color:var(--text);
  background:rgba(255,255,255,.86); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}
.cabinet-body input,.cabinet-body select,.cabinet-body textarea{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border-strong)}
.cabinet-body input::placeholder,.cabinet-body textarea::placeholder{color:var(--faint)}
textarea{min-height:120px; padding:var(--space-3) var(--space-4); resize:vertical}
input::placeholder{color:var(--faint)}
.field{display:grid; gap:var(--space-1)}
.field-label{font-size:.82rem; font-weight:800; color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:.35rem; min-height:32px; padding:0 .7rem; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--border); font-size:.82rem; font-weight:700}
.cabinet-body .chip{background:rgba(255,255,255,.06)}
hr{height:1px; border:0; background:var(--border)}
code{background:#f3f8fd; border:1px solid var(--border); border-radius:6px; padding:.1rem .4rem; font-size:.82rem; word-break:break-all; color:var(--accent-deep)}
.cabinet-body code{background:rgba(255,255,255,.07); color:var(--accent-deep)}
.sub{font-size:.88rem; margin:.5rem 0}
.sub .lbl{color:var(--muted); font-weight:600; margin-right:.35rem}
.tx{border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); margin:.5rem 0; background:linear-gradient(180deg,#f8fbff,#eef5fb)}
.cabinet-body .tx{background:linear-gradient(180deg,rgba(18,42,76,.78),rgba(9,21,38,.78)); border-color:var(--border)}
.txh{font-weight:600; margin-bottom:.5rem; display:flex; gap:.4rem; align-items:baseline; flex-wrap:wrap}
.txh .faint{font-weight:400; font-size:.82rem}
.qr{margin-top:var(--space-3)} .qr img{background:#fff; padding:8px; border-radius:var(--radius-sm); display:block; border:1px solid var(--border)}
.mir{margin-top:var(--space-2)}
/* Статы: авто-подгон колонок — на узком телефоне схлопывается в 2/1, не сплющивая цифры. */
.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:var(--space-3)}
.stat{background:linear-gradient(180deg,#ffffff,#f2f7fc); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); text-align:center}
.cabinet-body .stat{background:linear-gradient(180deg,rgba(16,32,58,.9),rgba(11,22,38,.9))}
.stat .n{font-size:1.55rem; font-weight:800; line-height:1.1; color:var(--accent-deep); overflow:hidden; text-overflow:ellipsis}
.stat .l{color:var(--muted); font-size:.8rem; margin-top:.25rem; overflow-wrap:normal; word-break:normal}
.mini-grid{display:grid; grid-template-columns:1fr; gap:var(--space-3)}
.mode-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2)}
.mode-grid button{width:100%; padding-left:var(--space-2); padding-right:var(--space-2)}
.op-list{display:grid; gap:var(--space-2)}
.op-item{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); padding:var(--space-3)}
.op-list.compact{gap:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#fff}
.op-line{display:grid; grid-template-columns:minmax(100px,1.1fr) auto minmax(80px,.9fr); gap:var(--space-2); align-items:center; padding:.45rem .65rem; border-bottom:1px solid var(--border); font-size:.84rem}
.op-line:last-child{border-bottom:0}
.op-line b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-line span{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.check{display:grid; gap:var(--space-2); margin:.75rem 0}
.check div{display:flex; gap:.5rem; align-items:flex-start; color:var(--muted); font-size:.92rem}
.check b{color:var(--text)}
.check.compact{margin:.55rem 0}
.admin-compact{box-shadow:0 1px 2px rgba(10,53,104,.05)}
.status-strip,.legend{display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center}
.signal{display:inline-flex; align-items:center; gap:.38rem; min-height:30px; padding:0 .58rem; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted); font-size:.78rem; font-weight:800; white-space:nowrap}
.signal span{width:.58rem; height:.58rem; border-radius:999px; background:var(--faint); box-shadow:0 0 0 3px rgba(130,148,168,.14)}
.signal b{font:inherit}
.signal.ok{color:var(--ok); border-color:rgba(19,128,92,.28); background:rgba(19,128,92,.06)}
.signal.ok span{background:var(--ok); box-shadow:0 0 0 3px rgba(19,128,92,.13)}
.signal.warn{color:var(--warn); border-color:rgba(152,106,0,.28); background:rgba(152,106,0,.07)}
.signal.warn span{background:#d89900; box-shadow:0 0 0 3px rgba(216,153,0,.16)}
.signal.bad{color:var(--danger); border-color:rgba(199,53,53,.28); background:rgba(199,53,53,.07)}
.signal.bad span{background:var(--danger); box-shadow:0 0 0 3px rgba(199,53,53,.13)}
.signal.muted span{background:var(--faint)}
.legend{margin-right:auto}
.clip-cell{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.action-menu{position:relative; display:inline-block}
.action-menu>summary{list-style:none; width:40px; min-height:40px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:#fff; cursor:pointer; font-size:1.35rem; line-height:1; font-weight:800}
.action-menu>summary::-webkit-details-marker{display:none}
/* Меню действий (⋯) — модалка ПОВЕРХ всего (а не absolute внутри .scroll, где его обрезает
   overflow таблицы). fixed по центру, высокий z-index, своя прокрутка и шапка-«к какой строке». */
.action-menu-body{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1001; display:grid; gap:var(--space-2); width:min(92vw,360px); max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft)}
.action-menu-body button{justify-content:flex-start; width:100%}
.action-menu-head{position:sticky; top:calc(-1 * var(--space-3)); z-index:1; margin:calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-1); padding:var(--space-3); background:var(--surface-2); border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:var(--space-2)}
.action-menu-head .action-menu-close{margin-left:auto; min-height:32px; padding:0 var(--space-2); width:auto}
/* Подложка: затемняет ВСЮ админку и перехватывает клики → пока меню открыто, работать с
   админкой нельзя (клик по фону закрывает окно). */
.menu-backdrop{position:fixed; inset:0; z-index:1000; background:rgba(9,26,44,.5); display:none}
body.menu-open .menu-backdrop{display:block}
body.menu-open{overflow:hidden}
.audit-more{margin-top:var(--space-3)}
/* Спойлер «ещё приложения и режимы» на карточке ключа: тач-таргет ≥48px, аккуратный вид. */
details.more{margin:.25rem 0 .5rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2)}
.cabinet-body details.more{background:rgba(255,255,255,.04)}
details.more>summary{cursor:pointer; min-height:var(--tap); display:flex; align-items:center; padding:0 var(--space-4); font-weight:600; color:var(--muted); list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{border-bottom:1px solid var(--border); color:var(--text)}
details.more>.tx:first-of-type{margin-top:.5rem}
details.more>.tx{margin-left:var(--space-3); margin-right:var(--space-3)}
.connect-card .compact-more{margin:0; background:rgba(238,245,251,.64)}
.connect-card .compact-more>summary{min-height:44px}
.connect-result{scroll-margin:calc(env(safe-area-inset-top) + 84px)}
.scroll{max-width:100%; overflow-x:auto; overflow-y:auto; max-height:480px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.72)}
.cabinet-body .scroll{background:rgba(255,255,255,.04)}
table{border-collapse:collapse; width:max-content; min-width:100%; table-layout:auto; font-size:.9rem}
th,td{padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:top}
th{color:var(--muted); font-weight:700; background:#f0f6fc; position:sticky; top:0; z-index:2}
.cabinet-body th{background:#0f2038}
tr:last-child td{border-bottom:0}
.empty{color:var(--muted); text-align:center; padding:var(--space-5)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
/* Skip-link (a11y): виден только при фокусе с клавиатуры */
.skip-link{position:fixed; top:-100%; left:var(--space-4); z-index:999; background:var(--accent); color:var(--accent-ink); padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-weight:600; text-decoration:none}
.skip-link:focus{top:var(--space-2)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
/* Утилити-классы (L2: строгий CSP style-src 'self' — инлайн style="" в разметке запрещён). */
.mt2{margin-top:.5rem}
.mt3{margin-top:.75rem}
.mt4{margin-top:1rem}
.my2{margin:.5rem 0}
.my3{margin:.75rem 0}
.mb2{margin-bottom:.5rem}
.m0{margin:0}
.pull-up{margin-top:-.5rem}
.mr-auto{margin-right:auto}
.fs-sm{font-size:.85rem}
.flex1{flex:1 1 0; min-width:0}
.w100{width:100%}
.form-err{color:var(--danger); min-height:1.2em; margin:0}
.sum{cursor:pointer; font-weight:600}
/* Toast: краткое ненавязчивое подтверждение действия («Скопировано ✓» и т.п.).
   Для скринридеров текст дублируется в #aria-announce (aria-live). */
#toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 24px); z-index:300;
  transform:translateX(-50%) translateY(8px);
  background:#ffffff; border:1px solid var(--border-strong); color:var(--text);
  padding:.6rem 1rem; border-radius:999px; font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
/* Тултипы: data-tip=«...» на любом элементе. Работают с hover и keyboard focus. */
[data-tip]{position:relative; cursor:help}
[data-tip]::after{
  content:attr(data-tip); display:none; position:absolute; z-index:200;
  bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#ffffff; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); padding:.45rem .75rem;
  font-size:.8rem; font-weight:400; color:var(--text); line-height:1.4;
  white-space:pre-wrap; max-width:260px; min-width:120px;
  text-align:left; pointer-events:none; box-shadow:var(--shadow);
  text-transform:none; letter-spacing:0;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{display:block}
/* Широкая обёртка для админки */
.app-wide{max-width:680px; margin:0 auto; padding:0 var(--space-4)}
/* Таб «Админка» в верхней навигации — скрыт по умолчанию, JS откроет после подтверждения роли */
.admin-link{display:none}
.admin-body .grid-stats{grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:var(--space-2)}
.admin-body .stat{min-width:0; padding:var(--space-3)}
.admin-body .stat .n{font-size:clamp(1.28rem,7vw,1.55rem)}
.admin-body .legend{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin-right:0}
.admin-body .legend .signal{justify-content:center; min-width:0}
.admin-body .status-strip .signal{min-width:0}
/* Боковая навигация админки (показывается только на десктопе) */
.admin-nav{display:none}
.admin-nav-link{display:block; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:700}
.admin-nav-link:hover{color:var(--accent-deep); background:var(--accent-soft)}
.admin-nav-label{font-size:.75rem; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; padding:var(--space-2) var(--space-3) var(--space-1)}
/* Планшет */
@media (min-width:768px){
  .app,.app-wide{padding:0 var(--space-5)}
  td .row button,td .row .btn{min-height:36px; padding:0 var(--space-3); font-size:.88rem}
}
/* Десктоп: широкая админка со sticky sidebar */
@media (min-width:1024px){
  .app-wide{max-width:1100px}
  .admin-body.admin-authorized .admin-layout{display:grid; grid-template-columns:200px 1fr; gap:var(--space-5)}
  .admin-body.admin-authorized .admin-nav{display:block; position:sticky; top:5.25rem; align-self:start; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.9); padding:var(--space-2) 0; box-shadow:var(--shadow)}
  .admin-content{min-width:0}
}
/* Широкий десктоп */
@media (min-width:1440px){.app-wide{max-width:1280px}}
@media (min-width:680px){ .mini-grid{grid-template-columns:1fr 1fr} }
/* Мобайл: плотнее таблицы + перенос длинных ячеек (эл-почта/мета/кнопки действий) — меньше
   горизонтального скролла; идентификаторы (data-nowrap) не переносим. */
@media (max-width:560px){
  body{background-attachment:scroll}
  .app,.app-wide{padding:0 var(--space-3)}
  .top .app{gap:var(--space-2)}
  .brand-mark{width:38px; height:38px}
  .brand-copy small{display:none}
  nav.tabs a{min-height:40px; padding:0 var(--space-3); font-size:.9rem}
  main{padding-top:var(--space-4)}
  h1{font-size:1.45rem}
  .card{padding:var(--space-3)}
  th,td{padding:.5rem .55rem; min-width:72px; font-size:.85rem; white-space:nowrap; word-break:normal}
  td[data-nowrap]{white-space:nowrap}
  .clip-cell{max-width:112px}
  .signal b{display:none}
  .legend .signal b,.status-strip .signal b{display:inline}
  .status-strip .signal{flex:1 1 calc(50% - var(--space-2)); justify-content:center}
  .op-line{grid-template-columns:1fr auto; gap:.25rem .5rem}
  .op-line span:last-child{grid-column:1 / -1}
  /* Меню действий → bottom-sheet: прижат к низу экрана (модалка поверх всего, подложка из
     базовых правил затемняет админку). Шапка показывает, к какой строке относится. */
  .action-menu{position:static}
  .action-menu-body{left:0; right:0; top:auto; bottom:0; transform:none; width:auto; min-width:0; max-height:76vh; border-radius:var(--radius) var(--radius) 0 0; border-bottom:none; padding:var(--space-3) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-4)); box-shadow:0 -12px 36px rgba(10,53,104,.24)}
  td .row{gap:var(--space-1)}
  .mode-grid{grid-template-columns:1fr}
  .row>button,.row>.btn{flex:1 1 140px}
}
@media (prefers-reduced-motion:no-preference){
  nav.tabs a,button,.btn{transition:background .15s ease,border-color .15s ease,transform .05s ease}
  button:active{transform:translateY(1px)}
  #toast{transition:opacity .18s ease,transform .18s ease}
}