/* ===========================================================================
   Console — dark-graphite theme, pink primary (violet secondary)
   Very dark neutral gray surfaces. Pink accent with a subtle pink→violet
   gradient on buttons, rounded buttons with press/hover motion. Montserrat.
   No decorative icons. Dynamic widths set from JS (CSP: style-src 'self').
   =========================================================================== */
:root{
  --bg:#0c0d10; --bg-2:#0f1115; --bg-3:#131519;
  --surface:#16181d; --surface-2:#1b1e25; --surface-3:#242832;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.045);
  --pink:#ec4899; --pink-bright:#f472b6; --pink-deep:#db2777;
  --pink-soft:rgba(236,72,153,.13);
  --violet:#8b5cf6; --violet-bright:#a78bfa; --violet-dim:#7c5cd6;
  --violet-soft:rgba(139,92,246,.13);
  --text:#e8e9ed; --muted:#969caa; --muted-2:#666c78;
  --green:#3fc88a; --red:#ef5b6e; --amber:#e0a83a; --blue:#5b9bf0;
  --r:12px; --r-sm:9px; --r-btn:11px;
  --grad:linear-gradient(160deg,var(--pink),var(--pink-deep));
  --grad-soft:linear-gradient(180deg,var(--surface-2),var(--surface));
  /* liquid glass */
  --glass-bg:rgba(20,22,28,.55);
  --glass-bg-strong:rgba(16,18,23,.72);
  --glass-blur:saturate(150%) blur(15px);
  --glass-brd:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.16);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}

/* плавные переходы между страницами (нативно, без JS) */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* SVG-иконки (вместо эмодзи) */
.ic{width:22px;height:22px;display:block;flex:none}
.ic-s{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:2px}
.btn .ic-s{stroke:currentColor}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);font-size:14px;line-height:1.55;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
a{color:var(--pink-bright);text-decoration:none}
@media(hover:hover){a:hover{text-decoration:underline}}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.muted{color:var(--muted)}.small{font-size:12px}.dim{color:var(--muted-2)}
.w100{width:100%}.mb0{margin-bottom:0}.center{text-align:center}.nowrap{white-space:nowrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- layout shell ---------- */
.shell{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;gap:2px;
}
.brand{padding:8px 10px 16px}
.brand b{font-weight:800;font-size:18px;letter-spacing:-.4px;color:#fff}
.brand b .ac{color:var(--pink-bright)}
.brand > span{display:block;font-size:8px;letter-spacing:3px;color:var(--muted-2);font-weight:700;margin-top:4px}

.nav{display:flex;flex-direction:column;gap:1px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;font-size:13px;transition:background .12s,color .12s;
}
@media(hover:hover){.nav a:hover{background:var(--surface);color:var(--text);text-decoration:none}}
.nav a:active{background:var(--surface-2);color:#fff}
.nav a.on{background:var(--surface-2);color:#fff;box-shadow:inset 2px 0 0 var(--pink)}
.nav a .nb{margin-left:auto;font-size:10px;font-weight:700;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pink);color:#fff}
.nav a .nb.zero{display:none}
.nav .sep{height:1px;background:var(--line-2);margin:8px 8px}

.side-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.on{background:var(--green)}
.dot.off{background:var(--red)}
.dot.warn{background:var(--amber)}
.statline{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}

/* ---------- main ---------- */
.main{min-width:0;width:100%;max-width:1220px;margin:0 auto;padding:0 30px 64px}

/* ---------- top bar (live metrics + controls) ---------- */
.bar{
  position:sticky;top:0;z-index:30;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  padding:12px 0;margin-bottom:22px;border-bottom:1px solid var(--line);
  background:var(--bg);font-size:12.5px;color:var(--muted);
}
.bar .m{display:flex;align-items:center;gap:6px}
.bar b{color:var(--text);font-weight:700}
.bar .k{color:var(--pink-bright);text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:700}
.bar .gap{flex:1}
.bar .stamp{color:var(--muted-2);font-size:11px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none;display:inline-block}
.live-dot.live{background:var(--green);animation:pulse 2s infinite}
.live-dot.paused{background:var(--amber)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,200,138,.55)}70%{box-shadow:0 0 0 6px rgba(63,200,138,0)}100%{box-shadow:0 0 0 0 rgba(63,200,138,0)}}

select.rate{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-btn);padding:5px 9px;font-size:12px;font-family:inherit;cursor:pointer}
select.rate:focus{outline:none;border-color:var(--pink)}

/* ---------- notification bell + panel ---------- */
.bell{position:relative}
.bell-btn{position:relative;background:var(--grad-soft);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-btn);padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:transform .08s,border-color .12s,filter .12s}
@media(hover:hover){.bell-btn:hover{border-color:var(--pink)}}
.bell-btn:active{transform:scale(.94);filter:brightness(1.25)}
.bell-badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--pink);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bell-badge.zero{display:none}
.npanel{
  position:absolute;right:0;top:40px;width:368px;max-width:86vw;max-height:470px;overflow-y:auto;
  background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.6),var(--glass-hi);z-index:50;display:none}
.npanel.open{display:block}
.npanel .nhead{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface)}
.npanel .nhead b{font-size:13px}
.npanel .nlist{display:flex;flex-direction:column}
.ni{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.ni:last-child{border-bottom:none}
.ni .bar-k{width:3px;border-radius:3px;flex:none;background:var(--muted-2)}
.ni.ok .bar-k{background:var(--green)}.ni.info .bar-k{background:var(--violet)}
.ni.warn .bar-k{background:var(--amber)}.ni.err .bar-k{background:var(--red)}
.ni.unread{background:var(--pink-soft)}
.ni .nt{font-weight:600;font-size:12.5px;color:var(--text)}
.ni .nbd{font-size:11.5px;color:var(--muted);margin-top:2px;word-break:break-word}
.ni .nts{font-size:10.5px;color:var(--muted-2);margin-top:3px}
.npanel .nempty{padding:26px 14px;text-align:center;color:var(--muted)}

/* ---------- page header ---------- */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:4px 0 20px}
.page-h h1{font-weight:800;font-size:24px;margin:0;letter-spacing:-.4px}
.page-h p{margin:6px 0 0;color:var(--muted);font-size:12.5px;max-width:70ch}

/* ---------- cards & grid ---------- */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.card{background:var(--glass-sheen),var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--glass-hi)}
.card.pad-sm{padding:13px 15px}
.card h2{font-weight:700;font-size:15px;margin:0 0 13px;display:flex;align-items:center;gap:9px}
.card h2 .sub{font-weight:500;font-size:11px;color:var(--muted);margin-left:auto}

.stat{display:flex;flex-direction:column;gap:6px}
.stat .lab{font-size:9.5px;letter-spacing:1.1px;color:var(--muted);text-transform:uppercase;font-weight:700}
.stat .val{font-size:27px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px}
.stat .val.sm{font-size:18px;display:flex;align-items:center;gap:8px}
.stat .val.pink{color:var(--pink-bright)}
.stat .foot{font-size:11px;color:var(--muted)}

/* ---------- status breakdown bars ---------- */
.bars{display:flex;flex-direction:column;gap:9px}
.barrow{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px;font-size:11.5px}
.barrow .bl{color:var(--muted);text-transform:capitalize}
.barrow .bt{background:var(--bg-2);border-radius:5px;height:8px;overflow:hidden}
.barrow .bf{height:100%;background:var(--pink);border-radius:5px;width:0;transition:width .3s}
.barrow .bf.ok{background:var(--green)}.barrow .bf.warn{background:var(--amber)}
.barrow .bf.err{background:var(--red)}.barrow .bf.ai{background:var(--violet)}
.barrow .bv{text-align:right;color:var(--text);font-weight:700}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-weight:700}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
@media(hover:hover){.tbl tr:hover td{background:rgba(255,255,255,.018)}}
.tbl tr:last-child td{border-bottom:none}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px;
  font-size:10.5px;font-weight:700;border:1px solid var(--line-2);color:var(--muted);letter-spacing:.2px}
.pill.ai{color:#cdbcff;border-color:rgba(139,92,246,.4);background:var(--violet-soft)}
.pill.manual,.pill.warn{color:var(--amber);border-color:rgba(224,168,58,.35);background:rgba(224,168,58,.1)}
.pill.ok{color:var(--green);border-color:rgba(63,200,138,.38);background:rgba(63,200,138,.1)}
.pill.err{color:var(--red);border-color:rgba(239,91,110,.4);background:rgba(239,91,110,.11)}
.pill.dim{color:var(--muted-2)}
.pill.pink{color:var(--pink-bright);border-color:rgba(236,72,153,.4);background:var(--pink-soft)}
.pill.blue{color:#bcd6ff;border-color:rgba(91,155,240,.38);background:rgba(91,155,240,.1)}

/* ---------- buttons (rounded, subtle gradient, press motion) ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  font-weight:600;font-size:12.5px;padding:8px 15px;border-radius:var(--r-btn);
  border:1px solid var(--glass-brd);background:var(--glass-sheen),var(--grad-soft);color:var(--text);
  box-shadow:var(--glass-hi);-webkit-tap-highlight-color:transparent;
  transition:transform .08s ease,border-color .12s,background .12s,filter .12s,box-shadow .12s;text-decoration:none}
@media(hover:hover){
  .btn:hover{border-color:var(--pink);filter:brightness(1.08);text-decoration:none}
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.danger:hover{background:rgba(239,91,110,.13);border-color:var(--red)}
}
/* отклик на нажатие — на ВСЕХ устройствах (включая тач) */
.btn:active{transform:scale(.94);filter:brightness(1.3);box-shadow:0 0 0 3px rgba(236,72,153,.32),var(--glass-hi)}
.btn.primary:active{filter:brightness(1.18)}
.btn.danger:active{background:rgba(239,91,110,.22);border-color:var(--red)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(236,72,153,.3)}
.btn.primary{background:var(--grad);border:none;color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(236,72,153,.22)}
.btn.danger{color:#ffc9d0;border-color:rgba(239,91,110,.35);background:transparent}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 11px;font-size:11.5px}
.btn.xs{padding:4px 9px;font-size:11px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
form.inline{display:inline-flex}

/* ---------- forms ---------- */
label.fld{display:block;margin-bottom:14px}
label.fld .lab{display:block;font-size:11px;letter-spacing:.3px;color:var(--pink-bright);
  margin-bottom:6px;font-weight:600}
label.fld .hint{font-size:11px;color:var(--muted-2);font-weight:400;margin-left:8px;letter-spacing:0}
input[type=text],input[type=password],input[type=number],input[type=datetime-local],
textarea,select.in{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);padding:9px 11px;font-size:13.5px;font-family:inherit;transition:.12s}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;resize:vertical;min-height:90px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(236,72,153,.16)}
.mono-in input,.mono-in textarea{font-family:ui-monospace,Menlo,Consolas,monospace}
input.msg-in{width:170px;padding:6px 10px;font-size:12px}
input.sm-in{width:auto;padding:6px 10px;font-size:12px}

/* ---------- toggle switch (settings) ---------- */
.sw{display:flex;align-items:center;gap:13px;padding:10px 0;cursor:pointer}
.sw + .sw{border-top:1px solid var(--line-2)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .sw-t{position:relative;flex:none;width:46px;height:28px;border-radius:16px;
  background:var(--surface-3);border:1px solid var(--line);transition:background .2s;box-shadow:var(--glass-hi)}
.sw .sw-t::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.sw input:checked + .sw-t{background:var(--grad);border-color:transparent}
.sw input:checked + .sw-t::after{transform:translateX(18px)}
.sw input:focus-visible + .sw-t{box-shadow:0 0 0 3px rgba(236,72,153,.3)}
.sw .sw-l{font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.sw .sw-l .hint{font-size:11px;color:var(--muted);font-weight:400}

/* ---------- inline checkbox labels ---------- */
.toggle-lbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
  padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  white-space:nowrap}
.toggle-lbl:hover{border-color:var(--pink)}
.toggle-lbl input[type=checkbox]{accent-color:var(--pink);width:14px;height:14px;cursor:pointer}

/* ---------- flash ---------- */
.flash{padding:11px 14px;border-radius:var(--r-sm);margin-bottom:13px;font-size:12.5px;border:1px solid}
.flash.ok{background:rgba(63,200,138,.1);border-color:rgba(63,200,138,.38);color:#b7eed7}
.flash.err{background:rgba(239,91,110,.1);border-color:rgba(239,91,110,.4);color:#ffccd3}

/* ---------- logs ---------- */
.logbox{background:#08090c;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;color:#c2c6cf;
  white-space:pre-wrap;max-height:560px;overflow:auto}

/* ---------- misc ---------- */
.kvs{font-size:12.5px;display:grid;grid-template-columns:auto 1fr;gap:7px 16px}
.kvs .k{color:var(--pink-bright);font-weight:600}
.kvs .v{word-break:break-word}
hr.div{border:none;border-top:1px solid var(--line);margin:18px 0}
.tag-id{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);
  background:var(--bg-2);padding:2px 7px;border-radius:5px;border:1px solid var(--line-2)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--pink-bright)}
.linkable{cursor:pointer}
.secret-note{font-size:11px;color:var(--muted-2)}

/* ===========================================================================
   AUTH — text only, no icon
   =========================================================================== */
.vault{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.vault-card{width:100%;max-width:336px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:32px 30px}
.vault-brand{text-align:center;margin-bottom:24px}
.vault-brand b{font-weight:800;font-size:22px;letter-spacing:-.5px;color:#fff}
.vault-brand b .ac{color:var(--pink-bright)}
.vault-brand > span{display:block;font-size:8px;letter-spacing:3px;color:var(--muted-2);font-weight:700;margin-top:6px}
.vault-card h1{font-weight:700;font-size:15px;margin:0 0 20px;text-align:center;color:var(--muted)}
.vault-card form{text-align:left}
.vault-card .btn{width:100%;justify-content:center;margin-top:4px}
.otp{text-align:center;letter-spacing:12px;font-size:22px;font-weight:700;padding-left:12px}
.err-code{font-weight:800;font-size:40px;color:var(--pink-bright);text-align:center;margin-bottom:6px}

/* ---------- desktop defaults (mobile chrome hidden) ---------- */
.burger{display:none}
.scrim{display:none}

/* pool / details management helpers */
.row.wrap{flex-wrap:wrap}
details{margin-top:8px}
details > summary{cursor:pointer;user-select:none;list-style:revert}
@media(hover:hover){details > summary:hover{color:var(--pink)}}
details[open] > summary{margin-bottom:6px}
.pill.xs{padding:1px 6px;font-size:10px;vertical-align:middle}

/* health widget + helpers */
.between{justify-content:space-between;width:100%}
.m0{margin:0}
.mb16{margin-bottom:16px}
.hl-ok{border-left:3px solid var(--green)}
.hl-bad{border-left:3px solid var(--red)}

/* app-feel polish (mobile + standalone) */
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
@keyframes appfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* bottom tab bar — liquid glass; на десктопе скрыт */
.tabbar{display:none}
@media(max-width:900px){
  /* плавающий закруглённый навбар с отступами от краёв */
  .tabbar{display:flex;position:fixed;left:12px;right:12px;z-index:140;
    bottom:calc(10px + env(safe-area-inset-bottom));height:62px;padding:6px;
    border-radius:24px;
    background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-brd);
    box-shadow:0 12px 34px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4),var(--glass-hi)}
  .tabbar a,.tabbar .tabmore{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;color:var(--muted-2);font-size:10px;font-weight:600;letter-spacing:.2px;text-decoration:none;
    background:none;border:0;font-family:inherit;cursor:pointer;transition:color .18s;-webkit-tap-highlight-color:transparent}
  .tabbar .tb-ic{display:flex;align-items:center;justify-content:center;width:52px;height:30px;
    border-radius:15px;transition:background .2s,box-shadow .2s,transform .14s}
  .tabbar a.on{color:var(--pink-bright)}
  .tabbar a.on .tb-ic{background:linear-gradient(180deg,rgba(244,114,182,.30),rgba(236,72,153,.13));
    box-shadow:var(--glass-hi),0 4px 14px rgba(236,72,153,.30)}
  .tabbar a:active .tb-ic,.tabbar .tabmore:active .tb-ic{transform:scale(.9)}
  .tabbar .ic{width:21px;height:21px}
}

/* =============== MOBILE (≤900px): drawer-навигация + компактная шапка =============== */
@media(max-width:900px){
  .shell{display:block}
  /* сайдбар -> выезжающий drawer */
  .side{
    position:fixed;left:0;top:0;height:100dvh;width:min(82vw,290px);
    transform:translateX(-100%);transition:transform .25s ease;z-index:200;
    background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-right:1px solid var(--glass-brd);box-shadow:0 0 50px rgba(0,0,0,.6),var(--glass-hi);
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  .side.open{transform:none}
  .nav{flex-direction:column;gap:2px}
  .nav a{font-size:15px;padding:12px 13px}
  .nav .sep{display:block}
  .side-foot{flex-direction:column;align-items:stretch;gap:10px}

  /* затемнение под drawer */
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:150;opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.open{opacity:1;pointer-events:auto}

  /* контент (снизу место под плавающий таб-бар) */
  .main{padding:0 16px calc(94px + env(safe-area-inset-bottom));max-width:100%;
    animation:appfade .18s ease}

  /* верхняя стеклянная панель: гамбургер + частота + колокол на одной строке */
  .bar{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin:0 -16px 14px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));
    background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--glass-brd);box-shadow:var(--glass-hi)}
  .bar select.rate{flex:1;min-width:0}
  .bar .m{display:none}
  .bar .gap{display:none}
  .burger{display:flex;align-items:center;justify-content:center;flex:none;
    background:none;border:0;color:var(--text);padding:7px 9px;cursor:pointer;border-radius:10px;
    -webkit-tap-highlight-color:transparent}
  .burger:active{background:var(--surface)}

  /* сетки */
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g6{grid-template-columns:repeat(2,1fr)}

  /* таблицы -> карточки-строки с подписями (data-label расставляет app.js) */
  .card{overflow-x:visible}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto;min-width:0}
  .tbl tr:first-child{display:none}                       /* строка-заголовок скрыта */
  .tbl tr{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
    padding:4px 13px;margin-bottom:10px}
  .tbl td{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    border:0;border-bottom:1px solid var(--line-2);padding:8px 0;font-size:13.5px;white-space:normal}
  .tbl td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:11.5px;flex:none}
  .tbl td:not([data-label])::before{content:none}
  .tbl td:not([data-label]){display:block}                /* ячейки-действия — на всю ширину */
  .tbl td:not([data-label]) .row{justify-content:flex-start;flex-wrap:wrap}
  .tbl td:empty{display:none}
  .kvs .v{word-break:break-word;min-width:0}

  /* ничего шире экрана */
  .main,.card,.tbl,pre,img{max-width:100%}
  pre{white-space:pre-wrap;word-break:break-word}

  /* заголовок страницы — в столбик */
  .page-h{flex-direction:column;align-items:flex-start;gap:10px}
  .page-h .row{width:100%;flex-wrap:wrap}

  /* тач-цели + без зума iOS */
  .btn{padding:10px 14px}
  .btn.sm{padding:8px 12px}.btn.xs{padding:7px 11px}
  input,select,textarea{font-size:16px}
  .msg-in,.sm-in{min-width:0;width:100%}

  /* уведомления — снизу на весь экран, над плавающим таб-баром */
  .npanel{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));
    width:auto;max-width:none;max-height:62vh;border-radius:18px}
}
@media(max-width:430px){
  .g6{grid-template-columns:1fr 1fr}
  .barrow{grid-template-columns:84px 1fr 30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* persistent chrome не «мигает» при переходах между страницами (View Transitions) */
@media(max-width:900px){
  .tabbar{view-transition-name:vt-tabbar}
  .bar{view-transition-name:vt-topbar}
}

/* отклик на нажатие — глобально (hover вынесен в @media(hover:hover) выше,
   поэтому на тач нет двойного тапа и «залипания» розовой рамки) */
.btn.ghost:active{background:var(--surface-2)}
select.rate:active{filter:brightness(1.2)}
.tag-id:active,.card a:active{opacity:.55}
.sw:active .sw-t{filter:brightness(1.25)}
.burger:active{background:var(--surface-2)}
.tabbar a:active,.tabbar .tabmore:active{filter:brightness(1.2)}

/* ===== liquid-glass загрузчик страницы (морфящийся светящийся «пузырь») ===== */
.loader{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,14,.42);-webkit-backdrop-filter:blur(7px) saturate(140%);backdrop-filter:blur(7px) saturate(140%);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.loader.show{opacity:1;pointer-events:auto}
.loader-orb{width:58px;height:58px;
  background:linear-gradient(140deg,var(--pink-bright),var(--violet));
  box-shadow:0 0 28px rgba(236,72,153,.55), inset 0 2px 6px rgba(255,255,255,.4);
  animation:liquidmorph 2.2s ease-in-out infinite, liquidspin 5s linear infinite}
.loader-orb::after{content:"";position:absolute;width:58px;height:58px;border-radius:inherit;
  background:radial-gradient(closest-side,rgba(236,72,153,.35),transparent 70%);
  animation:liquidpulse 1.6s ease-in-out infinite}
@keyframes liquidmorph{
  0%,100%{border-radius:42% 58% 56% 44% / 48% 42% 58% 52%}
  33%{border-radius:62% 38% 42% 58% / 56% 60% 40% 44%}
  66%{border-radius:44% 56% 64% 36% / 38% 48% 52% 62%}}
@keyframes liquidspin{to{transform:rotate(360deg)}}
@keyframes liquidpulse{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.25);opacity:1}}

/* ===== toast (AJAX-действия без перехода) ===== */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);z-index:700;max-width:86vw;
  padding:11px 17px;border-radius:14px;font-size:13px;font-weight:600;color:var(--text);
  background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:0 12px 32px rgba(0,0,0,.5),var(--glass-hi);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(63,200,138,.45)}
.toast.err{border-color:rgba(239,91,110,.55)}

/* ===== filter bar (orders page) ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filter-bar .fs{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 12px;color:var(--text);font-size:13px;outline:none;
  min-width:160px;flex:1;max-width:320px;font-family:inherit;width:auto}
.filter-bar .fs:focus{border-color:var(--pink)}
.filter-bar .fi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 11px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);
  transition:border-color .12s,color .12s,background .12s;font-family:inherit;white-space:nowrap}
.filter-bar .fi:hover{border-color:var(--pink-bright);color:var(--text)}
.filter-bar .fi.on{border-color:var(--pink);color:var(--pink-bright);background:var(--pink-soft)}
.filter-sep{width:1px;height:22px;background:var(--line);flex-shrink:0;align-self:center}

/* ===== table row colour indicators (inset left-border on first td) ===== */
@media(min-width:901px){
  .tbl tr.row-unconf>td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
  .tbl tr.row-err>td:first-child{box-shadow:inset 3px 0 0 var(--red)}
  .tbl tr.row-manual>td:first-child{box-shadow:inset 3px 0 0 var(--violet)}
  .tbl tr.row-expire>td:first-child{box-shadow:inset 3px 0 0 var(--red)}
}
@media(max-width:900px){
  .tbl tr.row-unconf{border-left:3px solid var(--amber)!important}
  .tbl tr.row-err{border-left:3px solid var(--red)!important}
  .tbl tr.row-manual{border-left:3px solid var(--violet)!important}
  .tbl tr.row-expire{border-left:3px solid var(--red)!important}
}

/* ===== attention card highlight variants ===== */
.card.hl-bad{border:1px solid rgba(239,91,110,.28);background:rgba(239,91,110,.04)}
.card.hl-warn{border:1px solid rgba(224,168,58,.28);background:rgba(224,168,58,.04)}