/* DOS Partner Portal — independent visual layer. DOS Sans ships locally. */

@font-face { font-family: 'DOS Sans'; src: url('DOSSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DOS Sans'; src: url('DOSSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DOS Sans'; src: url('DOSSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The `hidden` attribute must win over component display rules (.stack=flex,
   .clients-grid/.hosts.grid=grid) — JS toggles dynamic views and panels.
   Without this the author display beats the UA
   [hidden] rule and everything shows at once. (normalize.css does exactly this.) */
[hidden] { display: none !important; }

/* ==========================================================================
   ЕДЕН ИЗВОР НА ТОКЕНИ (Ф7.1, 26 август 2026)
   ==========================================================================
   Legacy aliases remain for the existing templates, but this file now owns the
   Portal palette independently. The approved tokens are applied in the redesign
   block at the end of this file; SA changes must not overwrite this surface.
   ========================================================================== */
:root {
  /* palette */
  --bg: #0a1a28;
  --navy:  #0b2238; --navy2: #102d48; --card: #0f2c47; --card2: #123452;
  --line:  #24486380; --line2: #2f5d80;
  --text:  #eaf1f7; --muted: #a8bdca;
  --blue:  #1096d7; --blue-d: #0c7fbb; --gold: #ffd300;
  --st0: #f0708a; --st1: #f0b429; --st2: #34d07f; --st3: #ffd300;
  --red:  #f0708a;
  /* reusable surface + gradients (one definition, aliased everywhere) */
  --surface:   linear-gradient(180deg, var(--card2), var(--card));
  --grad-blue: linear-gradient(150deg, var(--blue), var(--blue-d));
  --grad-gold: linear-gradient(150deg, var(--gold), #e6b800);
  /* radius + shadow scale */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-pill: 999px;
  --sh-card: 0 8px 24px rgba(0,0,0,.22);
  --sh-host: 0 10px 30px rgba(0,0,0,.24);
  --sh-blue: 0 4px 14px rgba(16,150,215,.32);
  --sh-pop:  0 24px 60px rgba(0,0,0,.45);
  /* the focus ring, one definition instead of five copies */
  --ring: 0 0 0 3px rgba(16,150,215,.2);
  /* the sheen every raised surface shares — a hairline of light along the top
     edge. One definition, so "premium" cannot mean five slightly different things. */
  --sheen: inset 0 1px 0 rgba(255,255,255,.05);
  /* spacing rhythm — the panel was written with ad-hoc pixel values; these are
     what new work uses so the vertical rhythm stops being a per-file opinion. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* fluid type — scales with the viewport, no breakpoints (clamp) */
  --fs-h1: clamp(18px, 1rem + .5vw, 20px);
  --fs-h2: clamp(15.5px, .9rem + .4vw, 17px);
}
html, body { height: 100%; }
body { background:
    radial-gradient(1200px 600px at 15% -10%, #14395c 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #0d2a45 0%, transparent 55%),
    var(--navy);
  color: var(--text);
  font: 15px/1.55 'DOS Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; }

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 14px; }
.logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-lg); line-height: 0;
  box-shadow: 0 6px 18px rgba(16,150,215,.35); }
.logo img { width: 100%; height: 100%; display: block; border-radius: var(--r-lg); }
.brand h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.brand .sub { font-size: 12px; color: var(--gold); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- layout ---------- */
.wrap { max-width: 1040px; margin-inline: auto; padding: clamp(20px, 3vw, 34px) clamp(14px, 3vw, 22px) 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; }
.whoami { display: flex; align-items: center; gap: 14px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; }
.tab { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 15px; border-radius: var(--r-sm); transition: background .12s, color .12s; white-space: nowrap; }
.tab:hover { color: var(--text); background: #14385a; }
.tab.on { background: var(--grad-blue); color: #fff; font-weight: 600;
  box-shadow: var(--sh-blue); }

h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; margin-block: 26px 12px; }
h2:first-child { margin-top: 0; }
h2 .muted { font-weight: 500; font-size: 13px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; background: #163b5c; color: var(--text);
  border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 9px 15px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, transform .05s, border-color .12s; }
.btn:hover { background: #1b476e; }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.ghost { background: transparent; border-color: var(--line2); color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: #163b5c; }
.btn.primary { background: var(--grad-blue); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(16,150,215,.35); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { background: transparent; border-color: #6a2b3a; color: var(--st0); }
.btn.danger:hover { background: rgba(240,112,138,.12); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--sh-card);
  text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--line2); }
.stat .n { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat .n.live-n { color: var(--st2); } .stat .n.warn-n { color: var(--st1); }
.stat .n.gold-n { color: var(--gold); }
.stat .k { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-weight: 500; }
/* (.stats/.stat and their two breakpoints lived here until 26 август 2026. The
   portal stopped rendering that markup when the mini-stat pills replaced it, so
   both media queries had been targeting nothing — two of the three breakpoints in
   the entire stylesheet, dead. Removed rather than left as furniture: dead CSS is
   how a reader concludes the page is responsive when it is not.) */

/* ---------- cards / groups ---------- */
.card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-card), inset 0 1px 0 rgba(255,255,255,.05); margin-bottom: 14px; }
/* (.group-title/.gname/.gcount removed 26 август 2026 — no PHP has referenced
   them since the device list became a client accordion.) */

/* ---------- forms ---------- */
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-row label, .stack label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted); font-weight: 500; }
input[type=text], input[type=email], input[type=password], select {
  background: var(--navy); color: var(--text); border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 9px 12px; font: inherit; font-size: 14px; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
select { cursor: pointer; }
.stack { display: flex; flex-direction: column; gap: 11px; max-width: 380px; }

.muted { color: var(--muted); } .ok { color: var(--st2); } .bad { color: var(--st0); font-weight: 600; }
.warn { color: var(--st1); font-weight: 600; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; }

/* ---------- host cards ---------- */
.hosts { display: flex; flex-direction: column; gap: 13px; }
.host { position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 14px 22px;
  box-shadow: var(--sh-host), inset 0 1px 0 rgba(255,255,255,.045); overflow: hidden;
  transition: border-color .15s, transform .12s, box-shadow .15s; }
.host:hover { border-color: var(--line2); transform: translateY(-1px); }
.host::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--muted); }
.host.st0::before { background: var(--st0); } .host.st1::before { background: var(--st1); }
.host.st2::before { background: var(--st2); } .host.st3::before { background: linear-gradient(var(--gold), #e0ae00); }
.host.off { opacity: .82; }

.host-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.host .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: #4a5a6b; }
.host.live .dot { background: var(--st2); box-shadow: 0 0 0 4px rgba(52,208,127,.16); }
.host .info { flex: 1; min-width: 0; }
.name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.name-row .hostname { font-size: 12px; font-weight: 500; color: var(--muted); } /* the machine's own name, beside a nickname */
.name-row .name { font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.host .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }

.badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.badge.b0 { background: rgba(240,112,138,.14); color: var(--st0); border-color: #6a2b3a; }
.badge.b1 { background: rgba(240,180,41,.14); color: var(--st1); border-color: #6a5320; }
.badge.b2 { background: rgba(52,208,127,.15); color: var(--st2); border-color: #1f6a45; }
.badge.b3 { background: rgba(255,211,0,.16); color: var(--gold); border-color: #7a6410; }
.badge.trial { background: rgba(255,211,0,.12); color: var(--gold); border-color: #7a6410; }

.assign-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assign-form select { font-size: 13px; padding: 7px 10px; }

/* ---------- licence summary + device actions ---------- */
.lic-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.lic-summary .lic-k { font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.lic-summary .lic-v b { color: var(--text); }
.host-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.host-actions form { display: inline-flex; margin: 0; }
.host-actions .btn.small { padding: 6px 10px; font-size: 12.5px; }
.host-actions select { font-size: 12.5px; padding: 6px 9px; }

/* ---------- client accordion (fold by client; open = yellow) ----------
   Colour is per-theme: the OPEN client wears the gold accent, folded ones stay
   neutral — the DOS-app "selected is yellow" behaviour. */
.cl-fold { border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 12px;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.20); }
.cl-head { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; font-weight: 700; transition: background .12s, color .12s; }
.cl-head::-webkit-details-marker { display: none; }
.cl-head::before { content: '▸'; color: var(--blue); font-size: 13px; transition: transform .15s; }
.cl-fold[open] > .cl-head::before { transform: rotate(90deg); }
.cl-head .cl-name { font-size: 15px; }
.cl-head .cl-count { font-size: 12px; color: var(--muted); font-weight: 500; }
.cl-head:hover { background: rgba(255,255,255,.03); }
/* OPEN = selected = gold accent (like the app's active card). */
.cl-fold[open] { border-color: var(--gold); box-shadow: 0 10px 30px rgba(255,211,0,.14); }
.cl-fold[open] > .cl-head { background: linear-gradient(180deg, rgba(255,211,0,.16), rgba(255,211,0,.06));
  color: var(--gold); }
.cl-fold[open] > .cl-head::before { color: var(--gold); }
.cl-fold[open] > .cl-head .cl-count { color: var(--gold); opacity: .8; }
.cl-fold .hosts { padding: 4px 14px 16px; }
.cl-fold .host { box-shadow: none; }

/* ---------- tables (clients, claims) ---------- */
.tablewrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line2); }
table.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
table.list tr:last-child td { border-bottom: none; }
table.list input[type=text] { font-size: 13px; padding: 7px 10px; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-actions form { display: inline-flex; margin: 0; gap: 8px; align-items: center; flex-wrap: wrap; }

.empty { color: var(--muted); padding: 44px; text-align: center; background: var(--card);
  border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.foot { color: var(--muted); font-size: 12.5px; margin-top: 20px; text-align: center; line-height: 1.6; }

/* ---------- login ---------- */
.login { max-width: 380px; margin: 13vh auto; padding: 32px 30px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.login .brand { margin-bottom: 24px; }
.login form { display: flex; flex-direction: column; gap: 11px; }
.login input { background: var(--navy); color: var(--text); border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 12px 14px; font: inherit; }
.login input:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.login .primary { padding: 12px; margin-top: 4px; justify-content: center; }
.login .hintline { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; }

.err { background: rgba(240,112,138,.12); color: var(--red); border: 1px solid #6a2b3a;
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; }
.okbox { background: rgba(52,208,127,.12); color: var(--st2); border: 1px solid #1f6a45;
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; }
.infobox { background: rgba(240,180,41,.1); color: var(--st1); border: 1px solid #6a5320;
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; }

/* ═══════════ v2 rework — merged main screen, bell, list/card, filters, account
   (LICENCI-PLAN т. 6). Flex/grid, airier rhythm, same DOS identity. ═══════════ */
.wrap { max-width: 1120px; }

/* --- compact clickable stats strip (the old big cards, shrunk to chips; each
       one IS a filter shortcut into the device list) --- */
/* Segmented control: the stats sit inside ONE quiet track (like the nav tabs and
   the view toggle), so the row reads as a single control and only the active pill
   is loud — the modern language, applied everywhere (Зоран, 23 авг 2026). */
.ministats { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.mini { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid transparent; text-decoration: none; color: var(--muted);
  font-size: 12.5px; font-weight: 500; transition: background .12s, color .12s; }
.mini b { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
a.mini:hover { color: var(--text); background: #14385a; }
.mini.live b { color: var(--st2); } .mini.warnc b { color: var(--st1); } .mini.goldc b { color: var(--gold); }
/* Active filter/stat = the SAME solid pill as a nav tab (.tab.on) — one modern
   "selected" language across the web, not the old gold outline (Зоран, 23 авг 2026). */
.mini.on { border-color: transparent; background: var(--grad-blue); color: #fff; box-shadow: var(--sh-blue); }
.mini.on b { color: #fff; }

/* --- language picker (topbar popup, every page) — collapsed pill that reveals
   on hover/tap, like the DOS app's language corner --- */
.lang-dd { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 10px; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .12s, background .12s; }
.lang-btn:hover { color: var(--text); background: #163b5c; }
.lang-cur { letter-spacing: .04em; }
.lang-caret { font-size: 9px; opacity: .7; transition: transform .15s; }
.lang-dd:hover .lang-caret, .lang-dd.open .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: 48px; z-index: 40; min-width: 170px; display: none;
  flex-direction: column; gap: 2px; padding: 5px; background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lang-menu::before { content: ''; position: absolute; right: 0; left: 0; top: -10px; height: 10px; } /* hover bridge */
.lang-dd.open .lang-menu { display: flex; }
.lang-of { margin: 0; }
.lang-opt { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; border: 0;
  border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; transition: background .12s; }
.lang-opt:hover { background: rgba(255,255,255,.05); }
.lang-opt.on { color: var(--gold); font-weight: 700; }
.lang-opt .lo-code { display: inline-block; min-width: 26px; font-weight: 700; font-size: 11px; color: var(--muted); }
.lang-opt.on .lo-code { color: var(--gold); }

/* --- bell (needs-attention as a topbar notifications menu) --- */
.bell { position: relative; }
.bell-btn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--card); border: 1px solid var(--line2); border-radius: 10px;
  color: var(--muted); font-size: 17px; cursor: pointer; transition: color .12s, background .12s; }
.bell-btn:hover { color: var(--text); background: #163b5c; }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; background: var(--st0); color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: var(--r-pill); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.bell-menu { position: absolute; right: 0; top: 48px; width: 340px; max-width: 88vw; z-index: 40; padding: 8px;
  background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop); display: none; }
.bell.open .bell-menu { display: block; }
.bell-item { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none;
  color: var(--text); font-size: 13px; line-height: 1.45; }
.bell-item:hover { background: rgba(255,255,255,.05); }
.bell-item .bi-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bell-item.warn .bi-k { color: var(--st1); } .bell-item.bad .bi-k { color: var(--st0); }
.bell-item.info .bi-k { color: var(--blue); }
.bell-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- toolbar: filter chips + search + view toggle + primary action --- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar .spacer { flex: 1; }
.toolbar input[type=text] { min-width: 170px; }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid transparent; color: var(--muted); text-decoration: none;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.chip:hover { color: var(--text); background: #14385a; }
.chip.on { border-color: transparent; color: #fff; background: var(--grad-blue); box-shadow: var(--sh-blue); }
.viewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; }
.viewtoggle button { border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s; }
.viewtoggle button.on { background: var(--grad-blue); color: #fff;
  box-shadow: 0 3px 10px rgba(16,150,215,.3); }

/* --- device CARD view (default): compact tile, actions in a divided footer --- */
.hosts.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: start; }
.hosts.grid .host { display: flex; flex-direction: column; padding: 13px 15px; }
.hosts.grid .host-main { flex-direction: column; align-items: stretch; gap: 7px; }
.hosts.grid .host .dot { position: absolute; top: 15px; right: 15px; }
.hosts.grid .name-row { padding-right: 16px; }              /* clear the corner dot */
.hosts.grid .host-actions { margin-left: 0; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.hosts.grid .host-actions .assign-form { flex: 1 1 auto; }
.hosts.grid .host-actions .assign-form select { width: 100%; }

/* --- device LIST view: one dense row per device (name+state left, actions right) --- */
.hosts:not(.grid) .host { padding: 11px 14px; }
.hosts:not(.grid) .host-main { align-items: center; gap: 12px; row-gap: 8px; }
.hosts:not(.grid) .host .info { flex: 1 1 260px; }
.hosts:not(.grid) .host-actions { flex: 0 0 auto; }

/* --- clients CARD view --- */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 13px; }
.client-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 8px; }
.client-card .cname { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.client-card .cmeta { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.client-card .row-actions { margin-top: auto; padding-top: 10px; }

/* client card → inline expandable device list (quick Control/View) */
.cdev { border-top: 1px solid var(--line); }
.cdev-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 0 3px; font-size: 13px; font-weight: 600; color: var(--blue); }
.cdev-sum::-webkit-details-marker { display: none; }
.cdev-sum::before { content: '▸'; font-size: 12px; transition: transform .15s; }
.cdev[open] > .cdev-sum::before { transform: rotate(90deg); }
.cdev-hint { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.cdev-list { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.cdev-row { display: flex; align-items: center; gap: 8px; }
.cdev-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #4a5a6b; }
.cdev-dot.on { background: var(--st2); box-shadow: 0 0 0 3px rgba(52,208,127,.16); }
.cdev-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdev-off { font-size: 11.5px; color: var(--muted); }
.cdev-empty { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.cdev .btn.small { padding: 4px 9px; font-size: 12px; }

/* --- account / subscription page --- */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .acct-grid { grid-template-columns: 1fr; } }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 12.5px; }
.kv .v { font-weight: 600; text-align: right; }
.usagebar { height: 8px; margin: 8px 0 4px; border-radius: var(--r-pill); background: var(--navy);
  border: 1px solid var(--line); overflow: hidden; }
.usagebar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue), var(--gold)); }

/* --- licence rows inside a device card (my licence + shared-host hint) --- */
.lic-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lic-line .mono { color: var(--text); }

/* --- early-reactivation request: a <details> popover, not a JS dialog -------
   The handler has always stored a `poraka`; until 26 август 2026 nothing sent
   one, so every request reached us blank. <details> keeps it working with JS
   off, and the textarea only exists once the partner opens it. */
.reqbox { position: relative; display: inline-flex; }
.reqbox > summary { list-style: none; cursor: pointer; }
.reqbox > summary::-webkit-details-marker { display: none; }
.reqform { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12;
  width: min(320px, 86vw); display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line2);
  background: var(--surface); box-shadow: var(--sh-pop); }
.reqlbl { display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); }
.reqlbl textarea { resize: vertical; min-height: 46px; font: inherit; font-size: 12.5px;
  color: var(--text); background: var(--navy); border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 8px 10px; }
.reqlbl textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }

/* --- pager + sort controls (Ф3) ------------------------------------------
   The bar is HONEST: it always says how many rows exist, so a capped list can
   never read as "that is all there is" (the invoice book was cut at 300 rows
   with no notice until 26 август 2026). Real <a href>s — works with JS off. */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); }
.pg-count { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pg-of { font-size: 12px; color: var(--muted); margin-left: auto; }
.sortbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-k { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.sb-opt { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid transparent; }
.sb-opt:hover { color: var(--text); border-color: var(--line2); }
.sb-opt.on { color: #fff; background: var(--grad-blue); box-shadow: var(--sh-blue); }
.sb-dir { font-size: 11px; opacity: .9; }
.th-sort { display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; color: inherit; }
.th-sort:hover { color: var(--text); }
.th-sort.on { color: var(--text); }

.devsort { margin: 6px 0 2px; }

.cl-search { display: flex; align-items: center; gap: 6px; }
.cl-search input { width: min(220px, 40vw); }

/* Screen-reader-only label: present for assistive tech, invisible on screen.
   A placeholder is not a label — the search inputs carry real ones now. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* --- copy-to-clipboard (Ф5.4) ---------------------------------------------
   A real <button> so it is keyboard-reachable and announced as an action, but
   dressed as the plain monospace ID it replaces — the affordance is the hover,
   not a box that competes with the real buttons on the row. */
.copybtn { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: none; border: 0; padding: 1px 4px; margin: 0 -4px; cursor: pointer;
  color: inherit; border-radius: 5px; border-bottom: 1px dotted transparent; }
.copybtn:hover { background: rgba(16,150,215,.12); border-bottom-color: var(--line2); }
.copybtn:focus-visible { outline: none; box-shadow: var(--ring); }
.copybtn.copied { color: var(--st2); background: rgba(52,208,127,.14); }
.copybtn.copyfail { color: var(--red); background: rgba(240,112,138,.14); }

/* The device search is a real GET form now (Ф5.5), so it needs to sit in the
   toolbar as one unit rather than as a lone input. */
.devsearch { display: flex; align-items: center; gap: 6px; }
.devsearch input { min-width: 0; width: min(220px, 45vw); }

/* Language picker on the sign-in page (Ф5.13) — the only screen a visitor can
   reach before anything exists, and it was English on every language. */
.loginlang { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.loginlang .ll { text-decoration: none; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--muted); padding: 4px 9px;
  border-radius: var(--r-pill); border: 1px solid transparent; }
.loginlang .ll:hover { color: var(--text); border-color: var(--line2); }
.loginlang .ll.on { color: #fff; background: var(--grad-blue); }

.acct-me .kv { margin-bottom: 6px; }
.acct-me .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.reqwait { white-space: nowrap; }

/* ==========================================================================
   ПРИСТАПНОСТ (Ф6, 26 август 2026)
   ==========================================================================
   Before this block the ONLY :focus rule in either panel was on text inputs —
   and it set `outline: none` and drew a box-shadow ring instead, which is
   invisible in Windows High Contrast. Every button, tab, chip, pill, <summary>
   and menu item relied on whatever the browser drew by default over a dark navy
   background, which in practice was nothing you could see. Keyboard operation of
   the four-button status segment on every device row was effectively blind.
   ========================================================================== */

/* :focus-visible, not :focus — a mouse click must not leave a ring behind, or
   people start asking for it to be removed again. The double ring (dark halo
   plus the blue) survives on both the card surface and the navy page. */
:where(a, button, summary, [role="menuitem"], [tabindex]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* forced-colors (Windows High Contrast): the OS palette replaces ours, so ask
   for ITS highlight colour rather than a blue it will have thrown away. */
@media (forced-colors: active) {
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* Skip link — the first thing in the tab order, visible only once focused.
   Without it, reaching the content past the topbar and the section nav is a
   dozen tab presses on every single page load. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 8px; top: 8px; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--grad-blue); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: var(--sh-pop); }

/* prefers-reduced-motion: honour it. Vestibular disorders are not a preference
   setting we get to override for a hover lift. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .host:hover, a.stat:hover { transform: none !important; }
}

/* ========================================================================== 
   Approved Portal redesign — independent from SA and the Viewer
   ========================================================================== */
:root {
  --bg: #0a1a28;
  --surface: #0f2436;
  --surface2: #14304a;
  --raised: #173956;
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);
  --text: #eaf2f8;
  --muted: #8fa8bc;
  --faint: #63809a;
  --blue: #2196f3;
  --blue-text: #6fc0fa;
  --blue-soft: rgba(33,150,243,.16);
  --yellow: #f5c33b;
  --yellow-soft: rgba(245,195,59,.14);
  --green: #34c77b;
  --green-soft: rgba(52,199,123,.14);
  --red: #f27a7a;
  --red-soft: rgba(242,122,122,.13);
}

body.page {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 'DOS Sans', sans-serif;
}
.ui-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal-page .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 84px 26px 32px; }
.portal-page .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: 62px; margin: 0; padding: 0 max(26px, calc((100vw - 1440px) / 2 + 26px));
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 26px;
  border-bottom: 1px solid var(--border); background: rgba(15,36,54,.96); backdrop-filter: blur(16px);
}
.portal-brand { gap: 10px; flex: none; }
.portal-brand .logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
.portal-brand .logo img { border-radius: 9px; }
.portal-brand h1 { font-size: 13px; line-height: 1; }
.portal-brand .sub { margin-top: 3px; color: var(--blue-text); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .16em; }
.portal-page .tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 0 8px; padding: 0; border: 0; background: transparent; }
.portal-page .tab { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 9px; color: var(--muted); font-size: 13px; }
.portal-page .tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.portal-page .tab.on { color: var(--blue-text); background: var(--blue-soft); box-shadow: none; font-weight: 700; }
.portal-page .tab .ui-icon { width: 14px; height: 14px; }
.portal-page .whoami { margin-left: auto; gap: 8px; }
.lang-btn, .bell-btn { height: 32px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: transparent; }
.lang-btn:hover, .bell-btn:hover { color: var(--text); background: var(--surface2); }
.lang-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.logout-btn { height: 32px; padding: 0 12px; border-color: var(--border); color: var(--muted); }
.logout-btn .ui-icon { width: 14px; height: 14px; }
.bell-menu, .lang-menu { top: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 50px rgba(0,0,0,.45); }

#drd-content { min-height: 560px; }
.page-heading { display: flex; align-items: flex-end; margin-bottom: 14px; }
.page-heading h2 { margin: 0; font-size: 20px; }
.page-heading p { margin-top: 4px; color: var(--faint); font-size: 12px; }
h2 { color: var(--text); }
.muted { color: var(--muted); }
.foot { color: var(--faint); }

.btn { border: 1px solid var(--border2); border-radius: 9px; color: var(--text); background: transparent; font-size: 12px; font-weight: 600; box-shadow: none; }
.btn:hover { background: var(--surface2); }
.btn.primary { border-color: var(--blue); color: #fff; background: var(--blue); box-shadow: none; font-weight: 700; }
.btn.ghost { border-color: var(--border); color: var(--muted); }
.btn.danger { color: var(--red); border-color: rgba(242,122,122,.30); }
input, select, textarea { border: 1px solid var(--border2); border-radius: 10px; color: var(--text); background: var(--bg); font: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: 0; }
.card, .host, .client-card, .cl-fold { border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); box-shadow: none; }

/* Devices: quick connect is the primary task. */
.quick-connect-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr); gap: 14px; margin-bottom: 18px; }
.quick-connect-card, .pool-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.quick-connect-card h2 { margin: 6px 0 12px; font-size: 18px; }
.section-eyebrow { color: var(--blue-text); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.quick-connect-form { display: flex; gap: 8px; }
.quick-connect-form input { flex: 1; min-width: 0; height: 42px; padding: 0 13px; font: 600 14px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.quick-connect-form button { height: 42px; padding-inline: 20px; }
.quick-connect-card p, .pool-card p { margin-top: 10px; color: var(--faint); font-size: 11px; }
.pool-count { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 9px; }
.pool-count strong { font-size: 24px; }
.pool-count span { color: var(--muted); font-size: 12px; }
.usagebar { height: 6px; border-radius: 4px; background: var(--raised); }
.usagebar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.ministats { display: none; }
.toolbar { gap: 9px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; }
.chips { padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chip { border-radius: 7px; color: var(--muted); font-size: 11px; }
.chip.on { color: var(--blue-text); background: var(--blue-soft); }
.devsearch input, .search input { height: 34px; }
.viewtoggle { border-color: var(--border); background: var(--surface); }
.viewtoggle button.on { color: var(--blue-text); background: var(--blue-soft); }
.lic-summary { display: none; }
.devgroups { display: flex; flex-direction: column; gap: 10px; }
.cl-fold { overflow: hidden; }
.cl-fold[open] { border-color: var(--border); box-shadow: none; }
.cl-fold[open] > .cl-head { color: var(--text); background: var(--surface2); }
.cl-fold[open] > .cl-head .cl-count { color: var(--muted); opacity: 1; }
.cl-head::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); }
.cl-fold[open] > .cl-head::before { color: inherit; transform: rotate(45deg); }
.cl-head { min-height: 44px; padding: 0 14px; border-bottom: 0; background: var(--surface2); }
.cl-fold[open] .cl-head { border-bottom: 1px solid var(--border); }
.cl-name { font-size: 13px; }
.cl-count { color: var(--muted); font-size: 11px; }
.hosts { gap: 0; padding: 0; }
.hosts:not(.grid) .host { min-height: 54px; margin: 0; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.hosts:not(.grid) .host:last-child { border-bottom: 0; }
.host::before { display: none; }
.host .name { font-size: 13px; }
.host .meta { color: var(--muted); font-size: 11px; }
.badge { border: 0; border-radius: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.badge.b2, .badge.ok, .badge.licensed { color: var(--green); background: var(--green-soft); }
.badge.b1, .badge.trial { color: var(--yellow); background: var(--yellow-soft); }
.badge.b0 { color: var(--red); background: var(--red-soft); }

/* Clients: compact data table by default, add form as one quiet card. */
#drd-content[data-active="clients"] > h2:first-of-type { margin: 0 0 10px; font-size: 18px; }
#drd-content[data-active="clients"] > .card:first-of-type { margin-bottom: 18px; padding: 14px 16px; }
.form-row { gap: 10px; }
.form-row label { color: var(--muted); font-size: 11px; }
.clients-grid { gap: 10px; }
.client-card { padding: 14px; }
.client-card .cname { font-size: 13px; }
.tablewrap { overflow: hidden; padding: 0; }
table.list { border-collapse: collapse; }
table.list th { height: 36px; padding: 0 14px; color: var(--muted); background: var(--surface2); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
table.list td { height: 46px; padding: 7px 14px; border-top: 1px solid var(--border); }
table.list input { height: 30px; border-color: transparent; background: transparent; }
table.list input:focus { border-color: var(--blue); background: var(--bg); }

/* Account: compact cards and two-column rhythm from the approved screen. */
#drd-content[data-active="account"] > h2 { margin: 16px 0 9px; font-size: 14px; }
.acct-me, .acct-grid > .card, #drd-content[data-active="account"] > .card { border-radius: 14px; background: var(--surface); }
.acct-me { max-width: none; }
.kv { min-height: 38px; border-color: var(--border); }
.kv .k { color: var(--muted); font-size: 11px; }
.kv .v { color: var(--text); font-size: 12px; }
.acct-grid { gap: 14px; }

/* Login follows the approved dark radial frame. */
.login-page { display: grid; place-items: center; padding: 28px; background: radial-gradient(900px 420px at 85% 0%, rgba(245,195,59,.10), transparent 70%), var(--bg); }
.login-card { width: 360px; max-width: calc(100vw - 32px); margin: 0; padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login-card .brand { gap: 11px; margin-bottom: 16px; }
.login-card .logo { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.login-card .brand h1 { font-size: 14px; }
.login-card .brand .sub { color: var(--blue-text); font-size: 9px; font-weight: 700; }
.login-card form { gap: 9px; }
.login-card input { height: 40px; padding: 0 13px; }
.login-card .btn.primary { height: 42px; justify-content: center; }
.login-links { display: flex; justify-content: space-between; margin-top: 12px; }
.login-links a { color: var(--blue-text); font-size: 12px; font-weight: 600; text-decoration: none; }
.hintline { margin-top: 14px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface2); font-size: 11px; }
.loginlang { margin-top: 12px; }
.ll { border-radius: 8px; color: var(--muted); }
.ll.on { color: var(--blue-text); background: var(--blue-soft); }
.reset-card { display: block; }
.reset-card .reset-intro { margin: -2px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.reset-card .reset-form { gap: 9px; }
.reset-card .reset-form input { width: 100%; box-sizing: border-box; }
.reset-card .reset-form .primary, .reset-primary { width: 100%; justify-content: center; }
.reset-card .reset-links { justify-content: flex-start; }
.reset-card .reset-message { margin-bottom: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .portal-page .topbar { padding-inline: 14px; gap: 10px; }
  .portal-brand h1 { display: none; }
  .portal-page .tab { padding-inline: 10px; }
  .portal-page .tab .ui-icon { display: none; }
  .logout-btn { width: 34px; padding: 0; justify-content: center; font-size: 0; }
  .quick-connect-grid, .acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .portal-page .wrap { padding: 126px 12px 28px; }
  .portal-page .topbar { height: 110px; flex-wrap: wrap; align-content: center; }
  .portal-page .tabs { order: 3; width: 100%; margin: 0; }
  .portal-page .tab { flex: 1; justify-content: center; }
  .quick-connect-form, .form-row { flex-direction: column; }
  .quick-connect-form button { width: 100%; justify-content: center; }
  .toolbar { align-items: stretch; }
  .chips { width: 100%; overflow-x: auto; }
  .devsearch { width: 100%; }
  .tablewrap { overflow-x: auto; }
}

/* ========================================================================== *
   Portal design parity — Devices / Clients / Account
   ========================================================================== */
.quick-connect-card {
  display: flex; align-items: center; gap: 22px; padding: 18px 20px;
  background: linear-gradient(120deg, var(--blue-soft), transparent 65%), var(--surface);
}
.quick-copy { min-width: 0; }
.quick-copy p { max-width: 340px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.quick-connect-form { flex: none; margin-left: auto; }
.quick-connect-form input { width: 205px; background: var(--bg); font-size: 16px; letter-spacing: .04em; }
.pool-card { gap: 11px; }
.pool-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.pool-head span { color: var(--muted); font-weight: 600; }
.pool-facts { display: flex; gap: 20px; padding-top: 2px; }
.pool-facts span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pool-facts small { color: var(--muted); font-size: 10px; }
.pool-facts b { overflow: hidden; max-width: 110px; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pool-facts b.ok { color: var(--green); }
.pool-facts .device-fact b { display: flex; align-items: center; gap: 8px; max-width: none; color: #fff; }
.pool-facts .device-fact em { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-style: normal; font-weight: 600; }
.pool-facts .device-fact em i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.partner-chip { display: flex; align-items: center; gap: 8px; max-width: 210px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 9px; }
.partner-chip span { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: var(--blue-soft); color: var(--blue-text); font-size: 9px; font-weight: 800; }
.partner-chip b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.empty-client-group { display: flex; flex-direction: column; gap: 9px; }
.empty-client-group header { display: flex; align-items: center; gap: 9px; padding: 5px 2px 0; }
.empty-client-group header strong { font-size: 13px; }
.empty-client-group header small { color: var(--faint); }
.empty-client-group > div { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1px dashed var(--border2); border-radius: 14px; }
.empty-client-group p { margin: 0; color: var(--muted); font-size: 12px; }
.empty-client-group .btn { margin-left: auto; flex: none; }

/* Clients: the design is a compact read-first table; editing is an explicit row. */
.clients-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.clients-heading h2 { margin: 0; font-size: 18px; }
.clients-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.clients-heading .cl-search { margin-left: auto; }
.client-add { position: relative; }
.client-add > summary { list-style: none; }
.client-add > summary::-webkit-details-marker { display: none; }
.client-add .pop-card { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(390px, 90vw); margin: 0; box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.clients-table { padding: 0; overflow: visible; }
.clients-table table { table-layout: fixed; }
.clients-table th:nth-child(1) { width: 28%; }
.clients-table th:nth-child(2) { width: 23%; }
.clients-table th:nth-child(3) { width: 17%; }
.clients-table th:nth-child(4) { width: 17%; }
.clients-table th:nth-child(5) { width: 15%; }
.clients-table th { padding: 10px 16px; background: var(--surface2); color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.clients-table td { padding: 12px 16px; vertical-align: middle; }
.client-ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.client-ident > span:last-child { min-width: 0; }
.client-ident b, .client-ident small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-ident b { font-size: 13px; }
.client-ident small { margin-top: 4px; color: var(--faint); font-size: 10px; }
.client-avatar { display: grid; flex: none; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue-text); font-size: 10px; font-weight: 800; }
.client-live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 7px; border-radius: 50%; background: var(--green); }
.clients-table td small { color: var(--muted); font-size: 10px; }
.actions-head { text-align: right; }
.client-actions { display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { border-color: var(--border2); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.device-more, .client-more { position: relative; }
.cl-fold[open] { overflow: visible; }
.host { overflow: visible; }
.host.action-menu-open, .client-display-row.action-menu-open { position: relative; z-index: 60; }
.device-more > summary, .client-more > summary { list-style: none; }
.device-more > summary::-webkit-details-marker, .client-more > summary::-webkit-details-marker { display: none; }
.device-menu { position: absolute; z-index: 45; top: calc(100% + 7px); right: 0; display: flex; width: min(330px, 88vw); flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border2); border-radius: 12px; background: var(--surface2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.device-menu form, .device-menu .btn, .device-menu select, .device-menu details { width: 100%; }
.device-menu .btn { justify-content: center; }
.client-more > summary { list-style: none; }
.client-menu { position: absolute; z-index: 70; top: calc(100% + 7px); right: 0; display: grid; width: min(350px, 88vw); gap: 10px; padding: 13px; border: 1px solid var(--border2); border-radius: 12px; background: var(--surface2); box-shadow: 0 18px 50px rgba(0,0,0,.48); text-align: left; }
.client-menu-form { display: grid; gap: 9px; }
.client-menu-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.clients-table .client-menu-form input[type="text"] { width: 100%; height: 38px; padding: 0 11px; box-sizing: border-box; border: 1px solid var(--border2); border-radius: 9px; color: var(--text); background: var(--bg); font-size: 12px; }
.clients-table .client-menu-form input[type="text"]:hover { border-color: var(--border2); background: var(--bg); }
.clients-table .client-menu-form input[type="text"]:focus { border-color: var(--blue); background: var(--bg); box-shadow: 0 0 0 3px var(--blue-soft); }
.client-menu-form .btn { justify-content: center; }
.client-menu .client-delete-form { width: 100%; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.client-menu .client-delete-form .btn { width: 100%; justify-content: center; }
.device-menu[popover], .client-menu[popover], .viewport-action-menu { position: fixed; inset: auto; right: auto; margin: 0; max-height: calc(100vh - 16px); overflow-y: auto; z-index: 120; }
.device-menu[popover]::backdrop, .client-menu[popover]::backdrop { background: transparent; }
.host.action-menu-open { transform: none !important; }
.client-delete-form { width: fit-content; margin: 8px 0 0 auto; }
.client-delete-form [disabled] { opacity: .4; cursor: not-allowed; }

/* Account: the design has two deliberate columns, not a long settings feed. */
#drd-content[data-active="account"] { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,1fr); gap: 0 16px; align-items: start; }
#drd-content[data-active="account"] > .okbox,
#drd-content[data-active="account"] > .err,
#drd-content[data-active="account"] > .infobox { grid-column: 1 / -1; }
.account-column { display: flex; min-width: 0; flex-direction: column; }
.account-column > h2 { margin: 0 0 9px; font-size: 14px; }
.account-column > h2:not(:first-child) { margin-top: 16px; }
.acct-grid { grid-template-columns: 1fr; gap: 10px; }
.account-invoices { min-width: 0; }
.account-security-card { max-width: none; }
.account-renew { width: fit-content; margin-top: 13px; }
.account-invoices > .card { margin: 0; }
.account-security-card .stack { max-width: none; }
.password-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.security-submit { display: flex; align-items: center; gap: 10px; }
.security-submit span { font-size: 10px; line-height: 1.4; }
.security-submit .btn { margin-left: auto; flex: none; }

/* Printable partner-scoped invoice. The browser's PDF destination produces the file. */
.invoice-page { min-height: 100vh; margin: 0; padding: 40px 20px; background: #e8edf2; color: #18222c; font-family: DOSSans, system-ui, sans-serif; }
.invoice-sheet { width: min(780px, 100%); min-height: 920px; margin: auto; padding: 44px; border-radius: 8px; background: #fff; box-shadow: 0 18px 60px rgba(20,35,50,.18); }
.invoice-sheet header { display: flex; align-items: center; padding-bottom: 24px; border-bottom: 2px solid #187fce; }
.invoice-sheet header div { display: flex; flex-direction: column; gap: 4px; }
.invoice-sheet header strong { font-size: 19px; }
.invoice-sheet header span { color: #657789; font-size: 12px; }
.invoice-sheet header .btn { margin-left: auto; }
.invoice-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 24px 0; }
.invoice-meta div { display: flex; flex-direction: column; gap: 6px; }
.invoice-sheet small { color: #6c7d8e; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.invoice-to { margin: 20px 0 34px; }
.invoice-to h1 { margin: 8px 0 5px; font-size: 24px; }
.invoice-to p { margin: 0; color: #607181; line-height: 1.6; }
.invoice-sheet table { width: 100%; border-collapse: collapse; }
.invoice-sheet th, .invoice-sheet td { padding: 14px; border-bottom: 1px solid #dbe3ea; text-align: left; }
.invoice-sheet th:last-child, .invoice-sheet td:last-child { text-align: right; }
.invoice-sheet footer { margin-top: 50px; color: #718191; font-size: 11px; }

@media (max-width: 900px) {
  .quick-connect-card { align-items: stretch; flex-direction: column; }
  .quick-connect-form { width: 100%; margin-left: 0; }
  .quick-connect-form input { width: auto; }
  .clients-heading { align-items: stretch; flex-wrap: wrap; }
  .clients-heading > div { width: 100%; }
  .clients-heading .cl-search { margin-left: 0; flex: 1; }
  .clients-table { overflow-x: auto; }
  .clients-table table { min-width: 760px; }
  #drd-content[data-active="account"] { grid-template-columns: 1fr; }
  .account-side-column { margin-top: 16px; }
}
@media (max-width: 640px) {
  .pool-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .client-add { margin-left: auto; }
  .client-delete-form { position: static; }
  .password-pair { grid-template-columns: 1fr; }
  .invoice-page { padding: 0; }
  .invoice-sheet { min-height: 100vh; padding: 24px; border-radius: 0; }
  .invoice-meta { grid-template-columns: 1fr; }
  .partner-chip b { display: none; }
  .partner-chip { padding-right: 4px; }
  .clients-heading .cl-search { width: calc(100% - 132px); flex: 1 1 auto; }
  .client-add { flex: none; }
  .clients-table { overflow: visible; border: 0; background: transparent; }
  .clients-table table { display: block; min-width: 0; }
  .clients-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .clients-table tr:first-child { display: none; }
  .clients-table .client-display-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 12px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
  .clients-table .client-display-row td { display: block; width: auto; padding: 0; border: 0; }
  .clients-table .client-display-row td:nth-child(1) { grid-column: 1; }
  .clients-table .client-display-row td:nth-child(2) { grid-column: 1; padding-left: 39px; }
  .clients-table .client-display-row td:nth-child(3) { grid-column: 1; padding-left: 39px; }
  .clients-table .client-display-row td:nth-child(4) { display: none; }
  .clients-table .client-display-row td:nth-child(5) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  #drd-content[data-active="account"] .kv { gap: 12px; }
  #drd-content[data-active="account"] .kv .k { flex: none; }
  #drd-content[data-active="account"] .kv .v { min-width: 0; overflow-wrap: anywhere; text-align: right; }
}
@media print {
  .invoice-page { padding: 0; background: #fff; }
  .invoice-sheet { width: auto; min-height: 0; padding: 0; box-shadow: none; }
  .print-hide { display: none !important; }
}

/* Type floor. 10.5px and 11px were used for meta lines that carry real
   information — last seen, licence numbers, plan names. 12px is the practical
   minimum for extended reading; below it people zoom, and a zoomed layout is a
   layout nobody designed. */
.mini, .chip, .sb-k, .lic-k, .cdev-hint, .pg-of, .bulk-n,
.meta, .cmeta, .lic-line, .hintline, .foot { font-size: max(12px, 1em); }

/* (.muted was lifted from #9eb4c2 to #a8bdca in the token block above: it carried
   most of the meta text at a contrast measuring below the 4.5:1 floor on --surface.
   Still visibly secondary, now legible.) */
/* An offline card was dimmed to .82 opacity, which took its ALREADY secondary
   text under the floor as well. Border and dot say "offline"; opacity need not. */
.host.off { opacity: 1; }
.host.off .name { color: var(--muted); }

/* ==========================================================================
   МОБИЛНО (Ф6.7, 26 август 2026)
   ==========================================================================
   What existed before: three media queries in the portal (two of them dead) and
   four in sa, every one of them only re-columning a grid. NOTHING touched the
   topbar, the toolbars, the per-row action strip or the tables — so on a phone
   the device toolbar wrapped into four rows before the list even started, and
   the row of six controls under every card piled up on top of each other.
   A partner opening this on a phone in a customer’s office is the normal case,
   not the edge one.
   ========================================================================== */

/* Touch targets. 6px/10px padding gives a ~28px box; the practical floor for a
   finger is 44px. Applied only under pointer:coarse so the desktop density —
   which is deliberate, the panel is dense on purpose — is untouched. */
@media (pointer: coarse) {
  .btn, .btn.small, .seg-btn, .viewtoggle button, .chip, .mini, .sb-opt,
  .tab, .lang-opt, .copybtn { min-height: 44px; }
  .btn.small { padding-inline: 14px; }
  .rowpick { width: 22px; height: 22px; }
  summary { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 900px) {
  .wrap { padding-inline: 12px; }
  /* The topbar is brand + language + bell + name + sign-out on one line. Let it
     become two, with the brand keeping the full width it needs to stay legible. */
  .topbar { flex-wrap: wrap; gap: 10px; }
  .brand { flex: 1 1 100%; }
  .whoami { flex: 1 1 100%; justify-content: flex-end; }
}

@media (max-width: 760px) {
  /* Toolbars stack instead of wrapping into a ragged block. */
  .toolbar, .filterbar, .dash-tools, .bulkbar, .search, .logbar {
    flex-direction: column; align-items: stretch; }
  .toolbar > *, .filterbar > *, .bulkbar > *, .logbar > * { width: 100%; }
  .toolbar .spacer, .filterbar .spacer, .bulkbar .spacer { display: none; }
  .devsearch, .cl-search { width: 100%; }
  .devsearch input, .cl-search input { width: 100%; }
  /* Filter chips and sort pills scroll sideways rather than stacking five rows
     tall — they are a single axis of choice, and a strip reads as one. */
  .chips, .sortbar { display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
  .chips::-webkit-scrollbar, .sortbar::-webkit-scrollbar { height: 4px; }
  .chip, .sb-opt { flex: 0 0 auto; }
  /* The per-row action strip becomes a full-width block: six controls squeezed
     onto one line is where this layout actually broke. */
  .host-actions, .host-controls { margin-left: 0; width: 100%; }
  .host-actions form, .host-controls form { flex: 1 1 auto; }
  .host-actions .assign-form { flex: 1 1 100%; }
  .host-actions select { width: 100%; }
  .meta-form { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .meta-form input { flex: 1 1 140px; min-width: 0; }
  /* Section nav scrolls rather than wrapping into three rows of buttons. */
  .nav, .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .nav .btn, .tabs .tab { flex: 0 0 auto; }
  /* Two-up grids collapse. */
  .acct-grid, .drill-body, .tf-grid { grid-template-columns: 1fr !important; }
  .pager { flex-wrap: wrap; }
  .pg-of { margin-left: 0; }
}

@media (max-width: 560px) {
  .hosts.grid, .clients-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .reqform { width: min(300px, 92vw); right: auto; left: 0; }
}

/* Tables: never make the PAGE scroll sideways — the wrapper scrolls instead, and
   the first column stays put so a row can still be identified while reading it. */
.tbl-wrap, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .tbl, .list { min-width: 560px; }
}
body { overflow-x: hidden; }

/* ==========================================================================
   ФИНИШ (Ф7, 26 август 2026) — "помодерно, еден стил, насекаде"
   ==========================================================================
   Everything below is deliberately built out of the tokens above, not out of
   fresh pixel values, so "one style" is a property of the code and not of
   somebody having been careful on the day.
   ========================================================================== */

/* --- 7.3 · Tables that can be read ---------------------------------------
   They were bare: no zebra, no sticky header, numbers left-aligned against text
   so no column of money lined up, and dates in the body font. Scanning an
   invoice list meant reading it word by word. */
.tbl, .list { border-collapse: separate; border-spacing: 0; width: 100%; }
.tbl th, .list th {
  position: sticky; top: 0; z-index: 2;
  background: var(--card2);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: left; white-space: nowrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line2);
}
.tbl td, .list td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Zebra on the ODD row, not a border on every row: the stripe carries the eye
   across a wide table, which is the job the border was failing at. */
.tbl tr:nth-child(even) td, .list tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.tbl tr:hover td, .list tr:hover td { background: rgba(16,150,215,.07); }
.tbl tr:last-child td, .list tr:last-child td { border-bottom: 0; }
/* Money and dates: monospace and right-aligned, so digits stack into a column
   you can compare down instead of reading across. */
.tbl .num, .list .num, .tbl .money, .list .money {
  text-align: right; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;
}
.tbl td.mono, .list td.mono { font-variant-numeric: tabular-nums; }

/* --- 7.4 · Loading, said out loud ----------------------------------------
   The fragment swap was instantaneous-or-nothing: on a slow link the page sat
   looking finished while a fetch was in flight, so people clicked again. A thin
   determinate-looking bar at the very top is the smallest honest signal. */
#drd-bar { position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transition: width .18s ease, opacity .25s ease; opacity: 0; pointer-events: none; }
#drd-bar.on { opacity: 1; }
/* The content dims RATHER than being replaced by a skeleton: a skeleton claims
   to know the shape of an answer that has not arrived. */
#drd-content.loading { opacity: .55; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  #drd-bar { transition: none; }
  #drd-content.loading { transition: none; }
}

/* --- 7.5 · Empty states with a way out -----------------------------------
   The portal had good ones; sa had bare sentences. One family now: a mark, the
   sentence, and — where one exists — the action that resolves it. */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 40px 24px; color: var(--muted); font-size: 13.5px;
  border: 1px dashed var(--line2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.012), transparent); }
.empty::before { content: "◍"; font-size: 26px; line-height: 1; color: var(--line2); }
.empty a { color: var(--blue); }

/* --- 7.7 · Buttons: one definition of every state -------------------------
   hover/active/disabled were defined per-component, so a disabled button looked
   different depending on which page you were on — and some had no disabled look
   at all, which is how a dead control gets clicked five times. */
.btn { transition: background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.35); }
.btn.primary { background: var(--grad-blue); box-shadow: var(--sh-blue), var(--sheen); }
.btn.danger:hover { border-color: var(--red); color: var(--red); }

/* Raised surfaces share ONE sheen token instead of five hand-written insets. */
.card, .host, .stat, .client-card, .pager, .bulkbar { box-shadow: var(--sh-card), var(--sheen); }
.host { box-shadow: var(--sh-host), var(--sheen); }

/* Badges: one family, one size, one radius — they had drifted per page. */
.badge { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap; }

/* Final responsive exceptions for the Portal-specific semantic table/account
   layout. They intentionally follow the shared mobile table fallback above. */
@media (max-width: 640px) {
  .clients-heading .cl-search { width: 100%; flex-basis: 100%; }
  .clients-heading .client-add { width: auto; margin-left: 0; }
  .clients-table { overflow: visible; }
  .clients-table .list { display: block; min-width: 0; }
  .clients-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .clients-table tr:first-child { display: none; }
  .clients-table .client-display-row { display: grid; }
  #drd-content[data-active="account"] .v { max-width: 65%; overflow-wrap: anywhere; white-space: normal; }
}

/* Mobile portal — implementation of design/export-mobilno (390 x 844). */
.mobile-brand-title, .mobile-login-title, .mobile-account-settings { display: none; }
.mobile-tabs { display: none !important; }
.login-field-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.password-input { position: relative; }
.password-input input { width: 100%; padding-right: 44px; }
/* The eye beside the password: ordinary ink once there is something to reveal, muted (.dim) over an
   empty field — the class is toggled by paintEye in app.js from the field's own value. */
.password-input .eye { position: absolute; top: 0; right: 5px; height: 100%; width: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; }
.password-input .eye.dim { color: var(--muted); }

@media (max-width: 640px) {
  html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body.page { min-width: 320px; background: var(--bg); font-size: 13px; }
  input, select, textarea { font-size: 16px !important; }
  button, a, summary, input, select, textarea { touch-action: manipulation; }
  .desktop-brand-title { display: none; }
  .mobile-brand-title { display: inline; }

  .portal-page .wrap { max-width: 480px; padding: 79px 18px calc(96px + env(safe-area-inset-bottom)); }
  .portal-page .topbar {
    height: 63px; padding: 0 max(18px, env(safe-area-inset-left)); flex-wrap: nowrap;
    align-content: normal; gap: 10px; border-bottom-color: var(--border); background: var(--surface);
  }
  .portal-page .portal-brand { flex: 1 1 auto; min-width: 0; gap: 11px; }
  .portal-brand .logo { width: 34px; height: 34px; border-radius: 10px; }
  .portal-brand > div:last-child { min-width: 0; }
  .portal-brand h1 { display: block; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .portal-brand .sub { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
  .portal-page .whoami { flex: none; width: auto; margin-left: auto; }
  .portal-page .bell, .portal-page .partner-chip, .portal-page .logout-btn { display: none; }
  .portal-page .lang-btn { min-width: 44px; height: 44px; border-radius: 10px; }
  .portal-page .lang-btn .ui-icon, .portal-page .lang-caret { display: none; }
  .portal-page .lang-menu { position: fixed; top: 58px; right: 12px; left: auto; }

  .portal-page .desktop-tabs { display: none; }
  .portal-page .mobile-tabs { display: flex !important; }

  .portal-page .tabs {
    position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; order: initial;
    width: 100%; height: calc(78px + env(safe-area-inset-bottom)); margin: 0;
    padding: 9px max(18px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px, env(safe-area-inset-left));
    align-items: flex-start; gap: 4px; overflow: visible; border-top: 1px solid var(--border); background: var(--surface);
  }
  .portal-page .tab {
    flex: 1 1 0; height: 52px; min-height: 52px; padding: 0; border-radius: 13px;
    flex-direction: column; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 600;
  }
  .portal-page .tab .ui-icon { display: block; width: 18px; height: 18px; }
  .portal-page .tab.on { color: var(--blue-text); background: var(--blue-soft); font-weight: 700; }
  #drd-content { min-height: 0; }
  .foot { display: none; }

  .page-heading { display: none; }
  .quick-connect-grid { display: block; margin: 0 0 14px; }
  .quick-connect-card {
    display: flex; padding: 15px 16px; align-items: stretch; flex-direction: column;
    gap: 11px; border-radius: 16px; background: var(--surface); box-shadow: none;
  }
  .quick-copy p { margin: 7px 0 0; }
  .quick-connect-form { width: 100%; margin: 0; flex-direction: column; gap: 9px; }
  .quick-connect-form input { width: 100%; height: 50px; padding: 0 16px; overflow: hidden; border-radius: 12px; font-size: 18px !important; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
  .quick-connect-form input::placeholder { color: var(--faint); letter-spacing: .06em; opacity: 1; }
  .quick-connect-form button { width: 100%; height: 48px; justify-content: center; border-radius: 12px; font-size: 14px; }
  .quick-connect-card > p { margin: 0; font-size: 11px; line-height: 1.45; }
  .pool-card { display: none; }

  .toolbar { display: flex; margin-bottom: 16px; flex-direction: row; align-items: center; gap: 7px; }
  .toolbar .chips { display: flex; width: auto; min-width: 0; flex: 1 1 auto; padding: 0; gap: 7px; overflow-x: auto; border: 0; background: transparent; scrollbar-width: none; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .toolbar .chip { min-height: 34px; padding: 0 13px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12px; line-height: 32px; }
  .toolbar .chip.on { border-color: var(--blue); color: #fff; background: var(--blue); }
  .toolbar .devsearch, .toolbar .viewtoggle, .toolbar .spacer { display: none; }
  .toolbar > details { width: auto; flex: none; }
  .toolbar > details > summary { min-height: 40px; padding: 0 12px; border-radius: 10px; }
  .toolbar > details > .card { position: fixed !important; z-index: 125 !important; top: 72px !important; right: 12px !important; left: 12px; width: auto !important; max-height: calc(100vh - 170px); overflow-y: auto; }

  .devsort { display: none; }
  .pager { padding: 9px 10px; border-radius: 12px; }
  .devgroups { gap: 16px; }
  .cl-fold, .cl-fold[open] { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .cl-head, .cl-fold[open] > .cl-head { min-height: 24px; padding: 0; gap: 8px; border: 0; color: var(--muted); background: transparent; }
  .cl-head::before { display: none; }
  .cl-name { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .cl-count { margin-left: 0; color: var(--faint); font-size: 11px; }
  .cl-fold .hosts { padding: 7px 0 0; }
  .hosts, .hosts.grid { display: flex; grid-template-columns: none; flex-direction: column; gap: 10px; }
  .hosts:not(.grid) .host, .hosts.grid .host {
    display: block; min-height: 0; margin: 0; padding: 14px 15px; overflow: visible;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: none;
  }
  .host .host-main, .hosts.grid .host-main { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 0 10px; }
  .host .dot, .hosts.grid .host .dot { position: static; grid-column: 1; width: 8px; height: 8px; margin-top: 5px; }
  .host.live .dot { box-shadow: 0 0 0 3px var(--green-soft); }
  .host .info { grid-column: 2; }
  .host .name-row { padding: 0; align-items: center; gap: 7px; }
  .host .name { font-size: 15px; }
  .host .badge { padding: 3px 7px; border-radius: 6px; font-size: 9px; letter-spacing: .08em; }
  .host .meta, .host .lic-line { margin-top: 5px; color: var(--faint); font-size: 11px; line-height: 1.5; }
  .host-actions, .hosts.grid .host-actions {
    display: grid; width: 100%; margin: 13px 0 0; padding: 0; grid-column: 1 / -1;
    grid-template-columns: minmax(0,1fr) 118px 44px; align-items: center; gap: 8px; border: 0;
  }
  .host-actions > .btn { width: 100%; min-height: 46px; justify-content: center; border-radius: 12px; font-size: 13px; }
  .host-actions > .device-more { width: 44px; }
  .host-actions .icon-btn { width: 44px; height: 46px; border-radius: 12px; }
  .device-menu { width: min(340px, calc(100vw - 24px)); }
  .empty-client-group { border-radius: 16px; }

  .clients-heading { margin-bottom: 12px; gap: 10px; }
  .clients-heading > div { display: none; }
  .clients-heading .cl-search { position: relative; width: 100%; flex: 1 1 100%; }
  .clients-heading .cl-search input { width: 100%; height: 44px; padding: 0 72px 0 38px; border-radius: 12px; background: var(--surface); }
  .clients-heading .cl-search::before { content: ''; position: absolute; z-index: 1; top: 14px; left: 14px; width: 11px; height: 11px; border: 1.7px solid var(--faint); border-radius: 50%; pointer-events: none; }
  .clients-heading .cl-search::after { content: ''; position: absolute; z-index: 1; top: 25px; left: 25px; width: 6px; height: 1.7px; background: var(--faint); transform: rotate(45deg); pointer-events: none; }
  .clients-heading .cl-search .btn { position: absolute; top: 5px; right: 5px; min-height: 34px; padding: 0 10px; }
  .clients-heading .cl-search .btn.ghost { display: none; }
  .client-add { position: fixed; z-index: 86; top: 14px; right: 78px; }
  .client-add > summary { min-height: 34px; padding: 0 13px; border-radius: 10px; }
  .client-add .pop-card { position: fixed; top: 66px; right: 12px; left: 12px; width: auto; max-height: calc(100vh - 160px); overflow-y: auto; }
  .clients-table tbody { gap: 10px; }
  .clients-table .client-display-row { min-height: 72px; padding: 15px; grid-template-columns: minmax(0,1fr) 44px; gap: 5px 12px; border-radius: 16px; }
  .client-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
  .client-ident { gap: 12px; }
  .client-ident b { font-size: 14px; }
  .client-ident small { display: none; }
  .clients-table .client-display-row td:nth-child(2) { display: none; }
  .clients-table .client-display-row td:nth-child(3) { padding-left: 52px; }
  .clients-table .client-display-row td:nth-child(3) a { color: var(--muted); text-decoration: none; }
  .clients-table .client-display-row td:nth-child(3) b { font-weight: 400; }
  .clients-table .client-display-row td:nth-child(5) { grid-row: 1 / span 2; }
  .client-actions > .btn { display: none; }
  .client-actions .icon-btn { width: 44px; height: 44px; border: 0; }

  #drd-content[data-active="account"] { display: block; }
  .account-column > h2 { font-size: 13px; }
  .acct-grid { gap: 0; }
  .acct-grid > .card { margin: 0; padding: 16px; border-radius: 16px 16px 0 0; }
  .acct-grid > .card + .card { margin-top: -1px; border-radius: 0 0 16px 16px; }
  .account-renew { width: 100%; min-height: 48px; justify-content: center; border-radius: 12px; }
  .account-invoice-title { margin-top: 14px !important; }
  .account-invoices .tablewrap { border-radius: 16px; }
  .account-invoices table, .account-invoices tbody { display: block; min-width: 0; }
  .account-invoices tr:first-child { display: none; }
  .account-invoices tr:not(:first-child) { display: grid; padding: 13px 15px; grid-template-columns: 1fr auto; gap: 5px 12px; border-bottom: 1px solid var(--border); }
  .account-invoices td { display: block; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .account-invoices td:nth-child(2), .account-invoices td:nth-child(5), .account-invoices td:nth-child(6) { grid-column: 1; }
  .account-invoices td:nth-child(3), .account-invoices td:nth-child(4), .account-invoices td:nth-child(7) { grid-column: 2; text-align: right; }
  .account-side-column { display: none; }
  .mobile-account-settings { display: block; margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
  .mobile-account-settings details { border-bottom: 1px solid var(--border); }
  .mobile-account-settings summary, .mobile-signout { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: var(--text); font-size: 13px; font-weight: 600; list-style: none; text-decoration: none; }
  .mobile-account-settings summary::-webkit-details-marker { display: none; }
  .mobile-account-settings summary svg { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 1.7; }
  .mobile-account-settings details[open] summary svg { transform: rotate(90deg); }
  .mobile-account-settings .stack, .mobile-company-data { display: grid; gap: 9px; padding: 0 16px 16px; }
  .mobile-account-settings input { width: 100%; min-height: 44px; padding: 0 12px; }
  .mobile-company-data span { color: var(--muted); }
  .mobile-signout { gap: 9px; color: var(--red); }

  .login-page { display: block; min-height: 100dvh; padding: max(54px, 8vh) 22px 34px; background: var(--bg); }
  body.login-page .login.login-card { width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .login-card .brand { margin-bottom: 7px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .login-card .brand .logo { width: 46px; height: 46px; border-radius: 13px; }
  .login-card .brand h1 { display: none; }
  .login-card .brand .sub { color: var(--blue-text); font-size: 9px; letter-spacing: .18em; }
  .mobile-login-title { display: block; margin: 0 0 22px; font-size: 26px; line-height: 1.1; }
  .login-card form { gap: 10px; }
  .login-field-label { margin-bottom: -4px; }
  .login-card form, .login-card input, .login-card .password-input, .login-card .hintline, .login-card .login-links { width: 100%; min-width: 0; max-width: 100%; }
  .login-card input { display: block; height: 50px; border-radius: 12px; background: var(--surface); }
  .login-card input::placeholder { color: transparent; }
  .login-card .btn.primary { height: 52px; margin-top: 4px; border-radius: 13px; font-size: 14px; }
  .login-links { padding-top: 4px; }
  .hintline { margin-top: 22px; padding: 13px 14px; border-radius: 13px; background: var(--surface); font-size: 11px; line-height: 1.55; text-align: left; }
  .loginlang { margin-top: 18px; }
  .reset-card .brand h1 { display: block; }
  .reset-card .brand { align-items: center; flex-direction: row; }
}

/* THE HONEYPOT. Off the page rather than display:none — a bot that skips hidden inputs would skip
   the trap too — and with no height of its own so it can never push the form around. Paired with
   aria-hidden + tabindex="-1" in the markup, so no person and no screen reader ever meets it. */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* The FREE plan and the upgrade request on Account (15 сеп 2026). */
.acct-free-note { font-size: 12.5px; margin: 8px 0 0; }
.account-upgrade-title { margin-top: 22px; }
.account-upgrade .stack { max-width: 460px; }
.account-upgrade textarea { resize: vertical; font: inherit; }
.acct-up-hint { font-size: 12.5px; margin: 0 0 12px; }
.acct-up-msg { font-size: 12.5px; margin: 8px 0 0; }
.acct-up-answer { font-size: 13px; margin: 8px 0 0; }
.acct-up-last { font-size: 12px; margin: 12px 0 0; }