/* Kontaro, учёт аккаунтов: тёмная тема. Шрифты лежат у себя
   (сборка копирует woff2 из @fontsource и подставляет пути вместо %FONT:…%). Анимации — только в ответ на действие
   и только при prefers-reduced-motion: no-preference. Без backdrop-filter и больших теней на строках таблицы. */

/* ------------------------------------------------------------------ шрифты */
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geologica-cyrillic.a7dc739efa0c.woff2) format("woff2-variations"), url(/fonts/geologica-cyrillic.a7dc739efa0c.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geologica-latin.b14f1edee95a.woff2) format("woff2-variations"), url(/fonts/geologica-latin.b14f1edee95a.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/mono-cyrillic-400.84782732e59f.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/mono-latin-400.1e4b885e90f8.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/mono-cyrillic-600.e6452773227a.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/mono-latin-600.b2c7743ae11d.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ токены */
:root {
  --bg: #050507;
  --s1: #090a0d;
  --s2: #0c0d11;
  --s3: #101116;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.11);
  --border-3: rgba(255, 255, 255, 0.17);
  --text: #eeeef2;
  --text-2: #b7b7c9;
  --muted: #9797ab;
  --accent: #00ff88;
  --accent-rgb: 0, 255, 136;
  --red: #ff3050;
  --red-rgb: 255, 48, 80;
  --amber: #e8a020; /* из палитры бренда (--color-amber): только «ждёт» — отправки, вывода, входа */
  --amber-rgb: 232, 160, 32;
  --font-sans: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --caption: 12px;
  --footnote: 13px;
  --body-sm: 15px;
  --body: 16px;
  --lead: 19px;
  --panel-bg: linear-gradient(180deg, #0e0f14 0%, #0a0b0e 100%);
  --panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
  --side-w: 256px;
  --side-w-collapsed: 80px;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ основа */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background-color: var(--bg); }
body {
  color: var(--text);
  font: 400 var(--body-sm)/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: rgba(var(--accent-rgb), 0.2); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox не знает ::-webkit-scrollbar: та же тонкая полоса его свойствами (Chromium и Safari не затрагиваются) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.secondary { color: var(--text-2); }
.ok-text { color: var(--accent); }
.bad-text { color: var(--red); }
.warn-text { color: var(--amber); }
.small { font-size: var(--footnote); }
.boot { padding: 48px; color: var(--muted); }
svg.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ оболочка: боковое меню */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
.sidebar { flex: none; width: var(--side-w); padding: 12px 0 12px 12px; display: flex; }
.shell.collapsed .sidebar { width: var(--side-w-collapsed); }
.side-panel {
  display: flex; flex-direction: column; width: 100%; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  border-radius: 20px; border: 1px solid var(--border-2);
  background: linear-gradient(180deg, #101116 0%, #0a0b0e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.brand { display: flex; align-items: center; gap: 10px; height: 72px; flex: none; padding: 0 20px; color: var(--text); text-decoration: none; }
.brand-name { display: flex; flex-direction: column; gap: 3px; width: 160px; min-width: 0; }
/* Показываем утверждённый оригинал без изменения букв. Окно убирает внешние поля картинки,
   а screen вместе с контрастом растворяет её тёмный фон на поверхности интерфейса. */
.brand-wordmark {
  display: block; width: 100%; aspect-ratio: 1460 / 300; flex: none;
  background: url('/kontaro-wordmark.7da656fe194c.png') 50.6692% 47.8702% / 135.8219% auto no-repeat;
  filter: contrast(1.15); mix-blend-mode: screen;
}
.brand-caption { font-size: 11px; line-height: 14px; font-weight: 400; letter-spacing: 0.025em; color: var(--muted); white-space: nowrap; }
.brand-mark { display: none; width: 28px; height: 28px; border: 7px solid #00c995; border-radius: 50%; flex: none; }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; flex: 1; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 12px; flex: none; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; flex: none;
  border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: var(--body-sm); white-space: nowrap;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.nav-item.active, .nav-item[aria-current="page"] { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.nav-item:focus-visible { outline-offset: -2px; }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item .count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--caption); color: var(--muted); }
.nav-item.active .count { color: var(--accent); }
.nav-item .count.alert:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--bg); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .count:empty { display: none; }
.side-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 12px; border-top: 1px solid var(--border); flex: none; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--text); text-decoration: none; min-width: 0; }
.user-card:hover { background: rgba(255, 255, 255, 0.05); }
.user-card.active { background: rgba(var(--accent-rgb), 0.08); }
.user-card .who { min-width: 0; flex: 1; display: grid; gap: 1px; }
.user-card .who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .name { font-size: var(--body-sm); }
.user-card .email, .user-card .role { font-size: var(--caption); color: var(--muted); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); color: var(--text); font-weight: 600; font-size: 14px;
}
.side-actions { display: flex; align-items: center; gap: 4px; }
.side-actions .status-pill { margin-right: auto; }
.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.icon-btn.logout:hover { color: var(--red); }
.icon-btn.small { width: 32px; height: 32px; }
.shell.collapsed .collapse-btn svg { transform: scaleX(-1); }

/* свёрнутое меню (только широкий экран) */
@media (min-width: 769px) {
  .shell.collapsed .brand { justify-content: center; padding: 0 2px; }
  .shell.collapsed .brand-name { display: none; }
  .shell.collapsed .brand-mark { display: block; }
  .shell.collapsed .nav-item .label,
  .shell.collapsed .nav-item .count,
  .shell.collapsed .user-card .who { display: none; }
  .shell.collapsed .nav { padding: 0 8px; }
  .shell.collapsed .nav-sep { margin: 8px 6px; }
  .shell.collapsed .nav-item { justify-content: center; padding: 0; gap: 0; }
  .shell.collapsed .nav-item .count.alert:not(:empty) { display: block; position: absolute; top: 9px; right: 15px; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--red); font-size: 0; }
  /* по высоте свёрнутое меню помещается в экран 1440×900 без прокрутки */
  .shell.collapsed .brand { height: 60px; }
  .shell.collapsed .nav { gap: 2px; }
  .shell.collapsed .side-actions .icon-btn { width: 36px; height: 36px; }
  .shell.collapsed .side-foot { padding: 12px 8px; }
  .shell.collapsed .user-card { justify-content: center; padding: 8px 0; }
  .shell.collapsed .side-actions { flex-direction: column; }
  .shell.collapsed .side-actions .status-pill { margin: 0 0 2px; }
  .shell.collapsed .status-pill { width: 12px; height: 12px; padding: 0; font-size: 0; border-radius: 50%; gap: 0; }
  .shell.collapsed .status-pill::before { margin: 0; }
  .shell.collapsed .status-pill.outbox { width: auto; height: 24px; padding: 0 8px; font-size: var(--caption); border-radius: 999px; }
  .shell.collapsed .status-pill.outbox .long { display: none; }
}
.status-pill.outbox .short { display: none; }
@media (min-width: 769px) { .shell.collapsed .status-pill.outbox .short { display: inline; } }
/* Широкий экран: низ меню (неотправленные правки, «онлайн», профиль, выход) всегда виден, прокручивается только список
   разделов. На невысоком окне (1280×800) пункты ниже, и весь список владельца помещается без прокрутки. */
@media (min-width: 769px) {
  .side-panel { overflow-y: hidden; }
  .nav { overflow-y: auto; min-height: 0; }
  .side-foot { margin-top: 12px; }
}
@media (min-width: 769px) and (max-height: 860px) {
  .brand { height: 56px; }
  .nav { gap: 2px; }
  .nav-item { height: 38px; }
  .nav-sep { margin: 5px 12px; }
  .side-foot { margin-top: 12px; padding-top: 10px; padding-bottom: 10px; gap: 6px; }
}

/* состояние связи и очереди */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: var(--caption); color: var(--muted); border: 1px solid var(--border-2); background: transparent; white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill.live { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); }
.status-pill.offline { color: var(--red); border-color: rgba(var(--red-rgb), 0.45); }
.status-pill.warn { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.5); }
button.status-pill { cursor: pointer; font: inherit; font-size: var(--caption); }
button.status-pill:hover { background: rgba(255, 255, 255, 0.04); }
.status-pill.outbox { justify-content: center; }

/* ------------------------------------------------------------------ узкий экран: верхняя полоса и выезжающее меню */
.mobile-top { display: none; }
.drawer-scrim { display: none; }
/* Телефон в альбомной ориентации (сенсорный экран ниже 500 px) — тоже верхняя полоса и выезжающее меню: боковое меню
   на 256 px оставило бы мало места разделу. Тот же запрос — PHONE_QUERY в web/src/phone.js. */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .mobile-top {
    display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; flex: none;
    border-bottom: 1px solid var(--border); background: var(--bg);
  }
  .mobile-top .brand { height: auto; padding: 0 4px; }
  .mobile-top .status { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 272px; padding: 12px;
    transform: translateX(-100%); visibility: hidden;
  }
  .shell.drawer-open .sidebar { transform: none; visibility: visible; }
  .shell.drawer-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.7); border: 0; padding: 0; }
  .sidebar .collapse-btn { display: none; }
  /* выезжающее меню на телефоне помещается в экран 390×844 без прокрутки */
  .sidebar .brand { height: 60px; }
  .sidebar .nav { gap: 2px; }
}
.menu-btn { position: relative; }
.menu-btn .bars { position: relative; width: 20px; height: 20px; display: block; }
.menu-btn .bars i { position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; }
.menu-btn .bars i:nth-child(1) { top: 6px; }
.menu-btn .bars i:nth-child(2) { top: 9.5px; }
.menu-btn .bars i:nth-child(3) { top: 13px; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
.m-live { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin: 0 6px; flex: none; }
.m-live.live { background: var(--accent); }
.m-live.offline { background: var(--red); }
.m-outbox {
  height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(var(--amber-rgb), 0.5); background: transparent;
  color: var(--amber); font: inherit; font-size: var(--caption); white-space: nowrap; cursor: pointer;
}
.m-outbox.failed { color: var(--red); border-color: rgba(var(--red-rgb), 0.45); }

/* ------------------------------------------------------------------ рабочая область */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.view-host { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: 20px 24px 14px; }
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 32px 48px; }
.page > .panel + .panel, .page > .panel + .alert, .page > .alert + .panel { margin-top: 16px; }
.page.narrow { max-width: 1040px; }
.stack-lg > * + * { margin-top: 24px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page .page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 28px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); }
.page-head .desc { margin: 6px 0 0; max-width: 820px; color: var(--text-2); font-size: var(--footnote); line-height: 1.5; text-wrap: pretty; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.page-head .actions { flex: none; }

/* панель (surface.ts PANEL) */
.panel {
  border-radius: 20px; border: 1px solid var(--border-2); background: var(--panel-bg); box-shadow: var(--panel-inset);
  padding: 20px 24px;
}
.panel > h2, .panel-title { font-size: 18px; font-weight: 400; margin: 0 0 12px; color: var(--text); }
.panel h3 { font-size: var(--body); font-weight: 500; margin: 20px 0 8px; color: var(--text); }
.panel > h2 + .muted, .panel > h2 + p { margin-top: -4px; }
/* Пояснение под таблицей — тем же кеглем, что и строки таблицы: подпись не должна быть крупнее данных. */
.table-wrap + p { font-size: 14px; margin-top: 10px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 18px; margin: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush > h2, .panel.flush > .panel-head { padding: 18px 24px 0; }
/* панель со строками «название — значение — действие» (страница настроек образца) */
.panel.rows { padding: 0; overflow: hidden; }
.panel-intro { padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.panel-intro h2 { font-size: 18px; font-weight: 400; margin: 0; color: var(--text); }
.panel-intro p { margin: 4px 0 0; color: var(--text-2); font-size: var(--footnote); max-width: 760px; }
.panel-intro > div:first-child { min-width: 0; flex: 1 1 320px; }
.setting-row {
  display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) auto; gap: 6px 24px; align-items: center;
  min-height: 64px; padding: 12px 24px; border-top: 1px solid var(--border);
}
.setting-row .k { color: var(--text-2); font-size: var(--body-sm); }
.setting-row .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.setting-row .v .muted { font-size: var(--footnote); }
.setting-row .a { display: flex; gap: 8px; justify-content: flex-end; }
.setting-row .a:empty { display: none; }
.panel.rows > .alert { margin: 0 24px 20px; }
.panel.rows > .setting-empty { padding: 16px 24px 20px; color: var(--muted); border-top: 1px solid var(--border); }
@media (max-width: 768px) {
  .setting-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .setting-row .k { grid-column: 1 / -1; }
  .panel-intro { padding: 16px; }
  .panel.rows > .alert { margin: 0 16px 16px; }
}
.empty { border: 1px dashed var(--border-2); border-radius: 20px; padding: 40px 24px; text-align: center; color: var(--muted); }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* предупреждения (Alert.tsx) */
.alert { border-radius: 12px; border: 1px solid var(--border-2); background: var(--s2); color: var(--text-2); padding: 12px 16px; font-size: var(--body-sm); }
.alert.error { border-color: rgba(var(--red-rgb), 0.35); background: rgba(var(--red-rgb), 0.06); color: #ff5c75; }
.alert.success { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); color: var(--accent); }
.alert.warn { border-color: rgba(var(--amber-rgb), 0.4); background: rgba(var(--amber-rgb), 0.06); color: var(--text); }
.alert b, .alert strong { font-weight: 600; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert h3 { margin: 0 0 6px; font-size: var(--body-sm); font-weight: 600; color: inherit; }
.alert > * + * { margin-top: 6px; }

/* метки (Badge.tsx) */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font-size: var(--caption); font-weight: 500; line-height: 1; color: var(--text-2); background: rgba(255, 255, 255, 0.06);
}
.badge.ok, .badge.accent { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.badge.problem, .badge.danger { color: #ff5c75; background: rgba(var(--red-rgb), 0.12); }
.badge.pending, .badge.warning { color: var(--text); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.badge.wait { color: var(--amber); background: rgba(var(--amber-rgb), 0.12); }
.link { color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.4); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--accent); }
button.link { background: none; border: 0; padding: 0; font: inherit; }

/* ------------------------------------------------------------------ кнопки (Button.tsx) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--border-3);
  background: rgba(255, 255, 255, 0.02); color: var(--text); font-size: var(--body-sm); font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { background: #3dffa3; border-color: #3dffa3; }
.btn.secondary { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); background: transparent; }
.btn.secondary:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); padding: 0 14px; }
.btn.quiet:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.btn.danger { border-color: rgba(var(--red-rgb), 0.5); color: #ff5c75; background: transparent; }
.btn.danger:hover { border-color: var(--red); background: rgba(var(--red-rgb), 0.05); }
.btn.small { height: 32px; padding: 0 14px; font-size: 14px; }
.btn.quiet.small { padding: 0 10px; }
.btn.large { height: 48px; padding: 0 28px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.primary:disabled { background: var(--s3); border-color: var(--s3); color: var(--muted); opacity: 1; }
.btn svg.ico { width: 16px; height: 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.inline-form input.mono { flex: 0 1 180px; }
.row-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.cell-strong { color: var(--text); }

/* ------------------------------------------------------------------ поля (Input.tsx) */
.field { display: grid; gap: 8px; margin: 0 0 16px; }
.field > span, .field-label { font-size: var(--body-sm); color: var(--text-2); }
.field .hint, .field-hint { font-size: var(--footnote); color: var(--muted); margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input:not([type]), select, textarea, .wide-input {
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--s1); color: var(--text);
  font-size: var(--body-sm); outline: none; min-width: 0;
}
textarea { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.field input, .field select, .field textarea, .wide-input { width: 100%; height: 44px; }
.field textarea { height: auto; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--border-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
input[readonly] { color: var(--text-2); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239797ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
select option { background: var(--s3); color: var(--text); }
input[type=search] {
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239797ab' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 18px;
}
input[type=search]::-webkit-search-cancel-button { filter: invert(0.7); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
input[type=file] { color: var(--text-2); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--s1) inset; caret-color: var(--text);
  transition: background-color 9999999s ease-in-out 0s;
}
.err { color: #ff5c75; font-size: var(--footnote); min-height: 0; }
.err:empty { display: none; }
.field label.choice, label.choice { display: flex; gap: 10px; align-items: center; font-size: var(--body-sm); color: var(--text); cursor: pointer; }
.field label.choice input { width: 16px; height: 16px; }
label.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; color: var(--text-2); font-size: var(--footnote); }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 48px; }
.pass-toggle {
  position: absolute; top: 0; bottom: 0; right: 4px; margin: auto 0; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pass-toggle:hover { color: var(--text); }

/* копирование ссылки (CopyField.tsx) */
.copy-field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--s1); }
.copy-field input { flex: 1; height: 100%; border: 0; background: transparent; padding: 0; font-family: var(--font-mono); font-size: 14px; color: var(--text); box-shadow: none; }
.copy-field input:focus { box-shadow: none; }
.copy-field:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

/* панель инструментов над таблицей */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input[type=search] { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.toolbar select { width: 190px; }
.toolbar .hint { color: var(--muted); font-size: var(--footnote); }
.toolbar .count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer { display: flex; gap: 6px 20px; flex-wrap: wrap; color: var(--muted); font-size: var(--footnote); padding: 0 4px; }
.footer .num { color: var(--text-2); }
.hint { color: var(--muted); font-size: var(--footnote); }

/* ------------------------------------------------------------------ таблицы (DataTable.tsx) */
table.simple { border-collapse: collapse; width: 100%; font-size: 14px; }
table.simple th {
  padding: 10px 14px; text-align: left; vertical-align: bottom; font-size: var(--footnote); font-weight: 400; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.simple td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text); }
table.simple tbody tr:last-child td { border-bottom: 0; }
table.simple tbody th { color: var(--muted); font-size: 14px; white-space: normal; vertical-align: top; border-bottom: 1px solid var(--border); }
table.simple td.num, table.simple th.num { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.simple th.num { font-family: inherit; } /* заголовок столбца с числами — обычным шрифтом, только по правому краю */
table.simple tr.total td, table.simple tr.strong td { font-weight: 600; }
table.simple td.claim { text-align: right; white-space: nowrap; }
table.simple tr.bad td { color: #ff5c75; }
table.simple tr.muted td { color: var(--muted); }
table.simple td.zero { color: var(--muted); }
table.simple tr.current td { background: rgba(var(--accent-rgb), 0.06); }
table.simple td.label { color: var(--text-2); }
table.simple.hover tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
table.simple td.actions { text-align: right; white-space: nowrap; width: 1%; padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
table.simple td.actions > * { vertical-align: middle; }
.table-wrap { overflow-x: auto; max-width: 100%; }
/* в панели таблица выходит к краям на ширину отступа ячейки: текст ячеек стоит ровно под заголовком панели */
.panel > table.simple { margin: 0 -14px; width: calc(100% + 28px); }
.panel > .table-wrap, .panel > div > .table-wrap, .dialog .table-wrap { margin: 0 -14px; max-width: none; }
.panel.flush > .table-wrap, .panel.flush > table.simple { margin: 0; width: 100%; }
.section-gap { margin-top: 16px; }
.panel.flush table.simple th:first-child, .panel.flush table.simple td:first-child { padding-left: 24px; }
.panel.flush table.simple th:last-child, .panel.flush table.simple td:last-child { padding-right: 24px; }
ul.plain { margin: 0; padding-left: 16px; }
dl.props { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ виртуальная таблица */
.grid-host {
  position: relative; min-height: 0; display: flex; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--border-2); background: var(--panel-bg); box-shadow: var(--panel-inset);
}
.grid { display: grid; grid-template-rows: auto 1fr; width: 100%; outline: none; min-height: 0; }
.grid-header { overflow: hidden; border-bottom: 1px solid var(--border); flex: none; }
.grid-header-inner { display: flex; }
.grid-hcell {
  position: relative; flex: none; height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 4px;
  font-size: var(--footnote); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; user-select: none;
}
.grid-hcell > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.grid-hcell.sortable { cursor: pointer; }
.grid-hcell.sortable:hover { color: var(--text-2); }
.grid-hcell.sorted { color: var(--text); }
.grid-hcell.right { justify-content: flex-end; text-align: right; }
.grid-hcell .sort-arrow { width: 12px; height: 12px; flex: none; color: var(--accent); }
.grid-hcell.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); }
.grid-empty { position: absolute; left: 0; right: 0; top: 40px; padding: 32px 24px; text-align: center; color: var(--text-2); font-size: var(--body-sm); pointer-events: none; }
.grid-empty[hidden] { display: none; }
.grid-empty > * { pointer-events: auto; }
.grid-empty-error { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; color: #ff8a9c; }
.grid-cell .link-gap { margin-left: 14px; }
.grid-cell .link[data-act] { font-family: inherit; } /* «Данные», «Убрать» — действия, а не код: обычным шрифтом */
.grid-resize { position: absolute; right: 0; top: 8px; bottom: 8px; width: 7px; cursor: col-resize; border-right: 1px solid var(--border); }
.grid-resize:hover { border-right-color: var(--accent); }
.grid-viewport { position: relative; overflow: auto; min-height: 0; }
.grid-spacer { position: absolute; top: 0; left: 0; }
.grid-rows { position: relative; }
.grid-row { position: absolute; left: 0; top: 0; height: 32px; display: flex; border-bottom: 1px solid var(--border); contain: layout style; }
.grid-row:hover { background: rgba(255, 255, 255, 0.03); }
.grid-row.active-row { background: rgba(255, 255, 255, 0.035); }
.grid-cell {
  flex: none; height: 31px; padding: 0 10px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; line-height: 31px; color: var(--text); border-right: 1px solid rgba(255, 255, 255, 0.045);
}
.grid-cell.right { text-align: right; }
.grid-cell.right, .grid-cell.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.grid-cell.center { text-align: center; }
.grid-cell.ro { color: var(--text-2); }
.grid-cell.placeholder { color: var(--muted); }
.grid-cell.active { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.grid:not(:focus-within) .grid-cell.active { outline-color: rgba(var(--accent-rgb), 0.45); }
/* состояния сохранения: точка — идёт сохранение / сохранено; рамка — ждёт отправки, ошибка, конфликт */
.grid-cell.st-saving::after, .grid-cell.st-saved::after {
  content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}
.grid-cell.st-saved::after { background: var(--accent); }
.grid-cell.st-queued { box-shadow: inset 0 0 0 2px var(--amber); background: rgba(var(--amber-rgb), 0.1); }
.grid-cell.st-queued::after { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.grid-cell.st-error { box-shadow: inset 0 0 0 2px var(--red); background: rgba(var(--red-rgb), 0.14); }
.grid-cell.st-conflict { box-shadow: inset 0 0 0 2px var(--red); background: repeating-linear-gradient(135deg, rgba(var(--red-rgb), 0.16) 0 6px, rgba(var(--red-rgb), 0.06) 6px 12px); }
.grid-row.r-deleting .grid-cell { color: var(--muted); background-color: rgba(var(--amber-rgb), 0.05); }
.grid-row.muted .grid-cell { color: var(--muted); }
.grid-row.warn-row .grid-cell { background-color: rgba(var(--amber-rgb), 0.07); }
/* ID в таблице — ссылка на карточку: цвет текста и тонкое подчёркивание, акцент только при наведении (столбец не «горит» зелёным) */
.grid-cell .link { font-family: var(--font-mono); font-size: 14px; color: var(--text); text-decoration-color: rgba(255, 255, 255, 0.28); }
.grid-cell .link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.grid-cell .badge { height: 18px; padding: 0 7px; vertical-align: 1px; }
.grid-cell .lock { width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; color: var(--muted); }
.grid-cell .del { color: #ff5c75; cursor: pointer; font-family: var(--font-sans); }
.cb {
  display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; cursor: pointer;
  border: 1.5px solid var(--border-3); background: var(--s1);
}
.cb.on { background: var(--accent); border-color: var(--accent); }
.cb.on::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cb.disabled { cursor: default; opacity: 0.55; }
.grid-editor {
  position: absolute; z-index: 5; padding: 0 9px; border: 2px solid var(--accent); border-radius: 4px; outline: none; resize: none;
  background: var(--s3); color: var(--text); font-size: 14px; line-height: 28px; box-shadow: var(--ring);
}
textarea.grid-editor { line-height: 1.45; padding-top: 5px; }
.grid-editor.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.2); }
.grid-select, .menu {
  position: absolute; z-index: 30; padding: 6px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #17181f 0%, #101116 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 44px rgba(0, 0, 0, 0.7);
}
.grid-select-search { width: 100%; height: 36px !important; border-radius: 10px !important; }
.grid-select-list { max-height: 280px; overflow: auto; margin-top: 6px; }
.grid-select-item { padding: 7px 10px; cursor: pointer; border-radius: 10px; white-space: nowrap; font-size: 14px; color: var(--text); }
.grid-select-item:hover { background: rgba(255, 255, 255, 0.06); }
.grid-select-item.hi { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.grid-select-item.current, .grid-select-item.chosen { font-weight: 600; }
.grid-select-item.chosen { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.grid-select-item.action { color: var(--accent); border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 10px 10px; }
.picker-list { border: 1px solid var(--border-2); border-radius: 12px; padding: 4px; background: var(--s1); margin-top: 6px; }
.picker-list .muted { padding: 6px 10px; }

/* ------------------------------------------------------------------ меню действий (ActionMenu.tsx) */
.menu-wrap { position: relative; display: inline-block; }
.menu { right: 0; top: calc(100% + 6px); min-width: 220px; max-width: calc(100vw - 32px); width: max-content; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 16px 8px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); text-align: left; font-size: var(--body-sm); cursor: pointer; white-space: nowrap; outline: none;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, 0.06); }
.menu-item.danger { color: #ff5c75; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: rgba(var(--red-rgb), 0.08); }
.menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-sep { height: 1px; margin: 6px 8px; background: var(--border); }
.dots-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dots-btn:hover, .dots-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* ------------------------------------------------------------------ окна (Modal.tsx, ConfirmDialog.tsx) */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
.dialog {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #14151b 0%, #0d0e13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 4px 4px 0 #131419, 8px 8px 0 #0b0c10, 16px 22px 34px rgba(0, 0, 0, 0.8);
}
.dialog.wide { width: min(880px, 100%); }
.dialog > h2 { font-size: var(--lead); font-weight: 400; line-height: 1.3; margin: 0 0 14px; padding-right: 40px; color: var(--text); overflow-wrap: anywhere; }
.dialog > p, .dialog > div > p { color: var(--text-2); }
.dialog .dialog-sub { margin: -8px 0 16px; color: var(--text-2); font-size: var(--body-sm); }
.dialog-close {
  position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dialog-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.dialog table.simple { margin: 4px 0 8px; }
.dialog h3 { font-size: var(--body); font-weight: 500; margin: 20px 0 8px; }
.dialog .alert h3 { margin: 0 0 6px; font-size: var(--body-sm); }
.account-card > .alert { margin-bottom: 16px; }
table.props-table tbody th { width: 38%; min-width: 150px; font-weight: 400; color: var(--text-2); text-align: left; padding-left: 14px; }
table.props-table tbody td { overflow-wrap: anywhere; }
/* Текущий расчёт на узком экране: пояснение уходит строкой под название и сумму, а не в третий столбец за краем. */
@media (max-width: 768px) {
  table.calc-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-bottom: 1px solid var(--border); }
  table.calc-table td { border-bottom: 0; }
  table.calc-table td.note { grid-column: 1 / -1; padding-top: 0; font-size: var(--footnote); }
  table.calc-table td.note:empty { display: none; }
}
.card-actions:not(:empty) { margin: 16px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.secret-line code { font-size: 16px; padding: 6px 10px; border-radius: 8px; background: var(--s2); border: 1px solid var(--border-2); display: inline-block; }
.dialog .field:last-child { margin-bottom: 0; }

/* уведомления */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; justify-items: end; max-width: calc(100vw - 32px); }
.toast {
  max-width: 440px; padding: 12px 16px; border-radius: 12px; font-size: var(--body-sm); line-height: 1.45;
  background: #15161c; color: var(--text); border: 1px solid var(--border-3); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s;
}
.toast.error { border-color: rgba(var(--red-rgb), 0.55); background: #1d0f14; color: #ffb3c0; }
.toast.ok { border-color: rgba(var(--accent-rgb), 0.45); background: #0b1912; color: var(--accent); }
.toast.warn { border-color: rgba(var(--amber-rgb), 0.55); background: #1b160c; }
.toast.hide { opacity: 0; }

/* ------------------------------------------------------------------ вход и задание пароля (AuthShell.tsx) */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; }
.auth-head { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 20px; display: flex; align-items: center; }
.auth-head .brand { height: auto; padding: 0; }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 16px 64px; }
.auth-stack { position: relative; width: 100%; max-width: 460px; }
.auth-plate { position: absolute; inset: 0; border-radius: 24px; border: 1px solid; }
.auth-plate.p2 { transform: translate(12px, 12px); border-color: rgba(255, 255, 255, 0.05); background: #0a0b0f; }
.auth-plate.p1 { transform: translate(6px, 6px); border-color: rgba(255, 255, 255, 0.07); background: #0c0d12; }
.auth-card {
  position: relative; padding: 40px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #121319 0%, #0b0c10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.auth-card h1 { font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.auth-card .auth-desc { margin: 12px 0 0; color: var(--text-2); font-size: var(--body-sm); text-wrap: pretty; }
.auth-heading { margin-bottom: 28px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card form .field { margin: 0; }
.auth-card .field input { height: 48px; }
.auth-card .alert { margin-bottom: 20px; }
.auth-card .btn.block { margin-top: 8px; }
.auth-row { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth-link { color: var(--text-2); font-size: var(--footnote); text-decoration: none; }
.auth-link:hover { color: var(--accent); }
.auth-foot { margin: 28px 0 0; text-align: center; color: var(--text-2); font-size: var(--body-sm); text-wrap: pretty; }
.auth-foot a { color: var(--accent); text-decoration: none; }
.auth-foot a:hover { opacity: 0.8; }
.demo-note { margin-top: 24px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(var(--amber-rgb), 0.5); color: var(--text-2); font-size: var(--footnote); }
.demo-note .btn-row { margin-top: 10px; }
@media (max-width: 480px) {
  .auth-card { padding: 28px 22px; }
  .auth-card h1 { font-size: 28px; }
  .auth-stack { margin-right: 12px; }
}

/* ------------------------------------------------------------------ мой профиль, доступ */
.link-expiry { margin: 10px 0 0; color: var(--text-2); font-size: var(--footnote); }

/* ------------------------------------------------------------------ система → импорт и «две записи» */
.imp-upload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--border-3); border-radius: 16px; }
.imp-upload.drag { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.04); }
.imp-upload label.btn { position: relative; overflow: hidden; }
.imp-file input { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; }
.imp-status { margin: 8px 0; min-height: 20px; }
.imp-plan { margin: 16px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.imp-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-head h4, .imp-block > h4 { margin: 0 0 8px; font-size: var(--body); font-weight: 500; }
.imp-head h4 { margin: 0; }
.imp-block summary { cursor: pointer; margin-bottom: 8px; color: var(--text-2); }
.imp-verdict { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--s2); color: var(--text); }
.imp-verdict.ok { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); }
.imp-verdict.bad { border-color: rgba(var(--red-rgb), 0.35); background: rgba(var(--red-rgb), 0.06); }
.imp-verdict.same { border-color: var(--border-3); }
.imp-verdict b { font-weight: 600; }
.imp-big { font-size: var(--body); margin: 4px 0 10px; }
.imp-big b { font-family: var(--font-mono); font-weight: 600; }
.imp-apply { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-progress { display: grid; gap: 6px; width: min(560px, 100%); }
.imp-progress progress { width: 100%; height: 8px; accent-color: var(--accent); }
.imp-table-wrap { overflow-x: auto; max-width: 100%; }
.imp-table-wrap table.simple.imp-narrow { width: auto; min-width: 360px; }
.imp-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.imp-actions { white-space: nowrap; }
.imp-actions .btn + .btn { margin-left: 6px; }
.imp-raw td:first-child { color: var(--muted); width: 44px; font-family: var(--font-mono); }
.code-block, .imp-pre { white-space: pre-wrap; word-break: break-word; background: var(--s1); border: 1px solid var(--border); padding: 12px; border-radius: 12px; }
.pair-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pair-grid table.simple th { text-align: left; white-space: nowrap; vertical-align: top; }
.sys-section + .sys-section { margin-top: 16px; }

/* ------------------------------------------------------------------ узкий экран */
@media (max-width: 768px) {
  .view { padding: 14px 12px 10px; gap: 10px; }
  .page { padding: 16px 16px 40px; }
  .page-head h1 { font-size: 24px; }
  .panel { padding: 16px; border-radius: 16px; }
  .panel > table.simple { margin: 0 -8px; width: calc(100% + 16px); }
  .panel > .table-wrap, .panel > div > .table-wrap, .dialog .table-wrap { margin: 0 -8px; }
  .panel.flush > .table-wrap { margin: 0; }
  .toolbar input[type=search] { width: 100%; flex: 1 1 100%; max-width: none; }
  .toolbar select { flex: 1 1 45%; width: auto; min-width: 0; }
  .toolbar .count { margin-left: 0; }
  .grid-host { border-radius: 14px; }
  .dialog { padding: 22px 18px; }
  .dialog-buttons { flex-direction: column-reverse; }
  .dialog-buttons .btn { width: 100%; }
  dl.props { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  dl.props dd { margin-bottom: 8px; }
  .imp-upload { flex-direction: column; align-items: stretch; }
  .imp-table-wrap table.simple.imp-narrow { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------------ движение: только в ответ на действие */
@media (prefers-reduced-motion: no-preference) {
  .sidebar { transition: width 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s; }
  .nav-item, .btn, .icon-btn, .user-card, input, select, textarea, .menu-item, .grid-select-item, .pass-toggle, .dialog-close {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .collapse-btn svg, .menu-btn .bars i { transition: transform 0.2s, opacity 0.2s; }
  .overlay { animation: fade-in 0.14s ease-out; }
  .overlay > .dialog { animation: dialog-in 0.16s ease-out; }
  .menu, .grid-select { animation: menu-in 0.14s ease-out; transform-origin: top right; }
  .toast { animation: toast-in 0.18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Телефон: разделы, формы, окна
   Запрос «телефон» — как PHONE_QUERY в web/src/phone.js: узкий экран или сенсорный экран ниже 500 px (альбомная
   ориентация). Зоны нажатия основных действий около 44 px, поля ввода 16 px (iOS не увеличивает страницу при фокусе),
   окна и формы занимают видимую часть экрана над клавиатурой (--vv-h, --vv-top из visualViewport). */

/* поле даты и времени с системным выбором (на телефоне) — как остальные поля */
input[type=datetime-local] {
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--s1); color: var(--text);
  font-size: var(--body-sm); outline: none; min-width: 0;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.field input[type=datetime-local] { width: 100%; height: 44px; }

.ph-only { display: none !important; }
.grid-host[hidden], .ph-host[hidden] { display: none !important; }
.form-err:empty { display: none; }
.desc-more { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--footnote); padding: 0; height: 40px; align-items: center; cursor: pointer; }
.acc-view .page-head .desc-more { display: none !important; }
.auth-card form .alert { margin: 0; }
.dialog:focus { outline: none; }

/* переключатель вида «Список / Таблица» */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--s1); }
.seg-btn {
  flex: 1 1 0; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
  font-size: var(--body-sm); cursor: pointer; white-space: nowrap;
}
.seg-btn[aria-pressed="true"] { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.ph-filter-btn.on { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }

/* список строк-карточек (журналы, пул почт): одна панель, строки разделены линией — как «История операций» образца */
.ph-list {
  border-radius: 16px; border: 1px solid var(--border-2); background: var(--panel-bg); box-shadow: var(--panel-inset); overflow: hidden;
}
.ph-list[hidden] { display: none; }
.ph-list-status { margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); }
.ph-list-status[hidden] { display: none; }
.ph-list-status.error { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #ff5c75; overflow-wrap: anywhere; }
.ph-list-status.error .btn { min-width: 160px; }
.ph-list-wrap .ph-list + .ph-list-status { padding: 14px 16px; }
.ph-more { height: 1px; }
.ph-row {
  display: grid; gap: 4px; width: 100%; padding: 14px 16px; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; min-height: 64px;
}
.ph-row:first-child { border-top: 0; }
.ph-row:active { background: rgba(255, 255, 255, 0.04); }
.ph-row:focus-visible { outline-offset: -2px; }
.ph-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ph-row-title { min-width: 0; overflow-wrap: anywhere; font-size: var(--body-sm); line-height: 1.4; color: var(--text); }
.ph-row-title .mono { font-size: 14px; }
.ph-amount { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; white-space: nowrap; color: var(--text); }
.ph-row-sub { color: var(--text-2); font-size: var(--footnote); line-height: 1.45; overflow-wrap: anywhere; }
.ph-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; color: var(--muted); font-size: var(--footnote); }
.ph-row-meta .mono { font-size: 13px; }
.ph-row-meta .badge { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.25; }
.ph-row.closed .ph-amount, .ph-row.closed .ph-row-title { color: var(--text-2); }
.ph-row.warn { background: rgba(var(--amber-rgb), 0.05); }
.ph-row-state { font-size: var(--footnote); color: var(--amber); }
.ph-row-state.error { color: #ff5c75; }
.ph-row-state.saved { color: var(--accent); }
/* строка пула почт: сама не кнопка, внутри кнопки действий */
.ph-row.mb-row { cursor: default; gap: 6px; }
.ph-row.mb-row:active { background: transparent; }
.mb-row .mb-email { font-family: var(--font-mono); font-size: 15px; overflow-wrap: anywhere; }
.mb-row .mb-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mb-row .mb-acts .btn { flex: 1 1 auto; }

/* ключевые суммы расчёта и итогов на телефоне: сетка «подпись — сумма», читается без прокрутки вбок */
.ph-sums { display: none; }

/* окно операции: поля только для чтения */
dl.props.op-props { grid-template-columns: max-content minmax(0, 1fr); }

/* сенсорный экран любой ширины (планшет, телефон): всё, что нажимают пальцем, не ниже 44 px */
/* планшет: кнопки окна закреплены внизу, когда форма выше экрана (карточка аккаунта — своё правило ниже) */
@media (pointer: coarse) and (min-width: 769px) and (min-height: 501px) {
  .dialog { padding-bottom: 0; }
  .dialog > :last-child:not(.dialog-buttons) { margin-bottom: 28px; }
  .dialog-buttons { position: sticky; bottom: 0; z-index: 2; margin: 24px -28px 0; padding: 12px 28px 16px; background: #0e0f14; border-top: 1px solid var(--border); }
}
@media (pointer: coarse) {
  .btn, .btn.small { height: 44px; }
  .btn.small { padding: 0 16px; }
  .icon-btn, .icon-btn.small, .dots-btn, .dialog-close { width: 44px; height: 44px; }
  .menu-item { min-height: 44px; }
  label.choice, label.check { min-height: 44px; }
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local],
  input:not([type]), select, .wide-input { height: 44px; }
  .pass-toggle { width: 44px; height: 44px; right: 2px; }
  .pass-wrap input { padding-right: 52px; }
  .auth-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .auth-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .auth-head .brand, .mobile-top .brand { min-height: 44px; }
  .seg-btn, .desc-more { height: 44px; }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .ph-only { display: inline-flex !important; }

  /* верхняя полоса и выезжающее меню */
  .mobile-top { padding: 0 8px 0 4px; gap: 4px; }
  .mobile-top .menu-btn { width: 44px; height: 44px; }
  .mobile-top .brand { min-width: 0; flex: 0 1 140px; overflow: hidden; display: flex; align-items: center; min-height: 44px; }
  .mobile-top .brand-name { width: 132px; }
  .mobile-top .brand-caption { display: none; }
  .mobile-top .brand-mark { display: none; }
  .sidebar .brand-name { display: flex; }
  .sidebar .brand-mark { display: none; }
  .shell.collapsed .brand-name { display: flex; }
  .shell.collapsed .brand-mark { display: none; }
  .mobile-top .status { flex: none; }
  .m-outbox { height: 44px; padding: 0 12px; }
  .sidebar .icon-btn { width: 44px; height: 44px; }
  .shell.collapsed .sidebar { width: 272px; }

  /* поля: 16 px и 44 px */
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local],
  input:not([type]), select, textarea, .wide-input { font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local],
  input:not([type]), select, .wide-input { height: 44px; }
  .grid-editor, .grid-select-search { font-size: 14px; } /* редактор ячейки таблицы — по правилам таблицы */
  .copy-field { height: 52px; }
  .copy-field input { font-size: 16px; height: 100%; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  label.choice, label.check { min-height: 44px; }
  .field label.choice input { width: 20px; height: 20px; flex: none; }

  /* кнопки и меню */
  .btn { height: 44px; }
  .btn.small { height: 44px; padding: 0 16px; }
  .btn.large { height: 48px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn.small { width: 44px; height: 44px; }
  .seg-btn, .desc-more { height: 44px; }
  .dots-btn { width: 44px; height: 44px; }
  .menu-item { min-height: 44px; white-space: normal; }
  .menu { min-width: 240px; }
  .btn.copy-btn { height: 44px; }
  .pass-toggle { width: 44px; height: 44px; right: 2px; }
  .pass-wrap input { padding-right: 52px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
  .page-head h1, .page-head .desc { overflow-wrap: anywhere; }
  .page-head .desc.clamp:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .btn-row > .btn { flex: 1 1 auto; }
  .inline-form input, .inline-form input.mono { flex: 1 1 100%; max-width: none; }
  .inline-form .btn { flex: 1 1 auto; }
  .picker-list .grid-select-item { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; }

  /* вход: ссылки с зоной нажатия 44 px, меньше пустоты — при открытой клавиатуре ошибка и кнопка помещаются */
  .auth-head { padding: 12px 16px; }
  .auth-body { padding: 8px 16px 24px; align-items: flex-start; }
  .auth-heading { margin-bottom: 20px; }
  .auth-row { margin-top: -10px; }
  .auth-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .auth-foot a { display: inline-block; padding: 12px 4px; }
  .auth-card .alert { overflow-wrap: anywhere; }

  /* панель инструментов: поиск и кнопка «Фильтры» в одну строку, списки выбора — по кнопке */
  .toolbar input[type=search] { flex: 1 1 0; width: auto; }
  .toolbar.has-filter-toggle select { display: none; }
  .toolbar.has-filter-toggle.ph-filters-open select { display: block; flex: 1 1 45%; }
  .toolbar .seg { flex: 1 1 100%; }
  .toolbar .count { flex: 1 1 100%; }

  /* журнал строками: прокручивается вся страница раздела, поиск и фильтры остаются вверху */
  .view.ph-cards { display: block; flex: none; padding: 0 12px 24px; } /* высота по содержимому: поиск остаётся вверху до конца списка */
  .view.ph-cards > .page-head { padding-top: 14px; }
  .view.ph-cards > .toolbar { position: sticky; top: 0; z-index: 4; margin: 0 -12px; padding: 10px 12px; background: var(--bg); }
  .view.ph-cards > .ph-host { margin-top: 4px; }
  .view.ph-cards > .footer { display: none; }

  /* окна: в видимой части экрана над клавиатурой. Подтверждения и короткие окна — листом снизу, формы и карточки —
     на весь экран; кнопки закреплены внизу окна (у окна нет нижнего отступа: закреплённая полоса доходит до края). */
  .overlay { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100dvh); padding: 12px 0 0; align-items: flex-end; }
  .dialog {
    display: flex; flex-direction: column; width: 100%; max-height: 100%; padding: 20px 16px 0; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 -12px 34px rgba(0, 0, 0, 0.7);
  }
  .dialog > * { flex-shrink: 0; }
  .dialog > :last-child:not(.dialog-buttons) { margin-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .dialog > h2 { padding-right: 48px; }
  .dialog-close { width: 44px; height: 44px; right: 8px; top: 8px; }
  .dialog-buttons {
    position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: #0e0f14; border-top: 1px solid var(--border); box-shadow: 0 -12px 20px rgba(0, 0, 0, 0.45);
  }
  .dialog input, .dialog select, .dialog textarea { scroll-margin: 16px 0 132px; }
  .dialog .err:not(:empty), .dialog .alert.error { scroll-margin-bottom: 132px; }
  .dialog-sub, .dialog .alert, .dialog p { overflow-wrap: anywhere; }
  /* формы и карточки (широкие окна) — на весь экран, кнопки в ряд */
  .dialog.wide { width: 100%; height: calc(100% + 12px); max-height: none; margin-top: -12px; border-radius: 0; border: 0; }
  .dialog.wide .dialog-buttons { flex-direction: row; flex-wrap: wrap; }
  .dialog.wide .dialog-buttons .btn { width: auto; flex: 1 1 0; min-width: 120px; white-space: normal; line-height: 1.2; padding: 0 12px; text-align: center; }
  .op-del { margin-top: 20px; }
  .op-del .btn { width: 100%; }

  /* уведомления — вверху видимой части: внизу их закрыла бы клавиатура или кнопки окна */
  .toasts { top: calc(var(--vv-top, 0px) + 8px); bottom: auto; left: 12px; right: 12px; max-width: none; justify-items: stretch; pointer-events: none; }
  .toast { max-width: none; overflow-wrap: anywhere; }
  .alert { overflow-wrap: anywhere; }

  /* таблица строками-карточками (stackTable): подпись столбца у каждого значения */
  table.ph-stack, table.ph-stack > tbody { display: block; width: 100%; }
  table.ph-stack > thead { display: none; }
  table.ph-stack > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); position: relative; }
  table.ph-stack > tbody > tr:last-child { border-bottom: 0; }
  .panel.flush table.ph-stack > tbody > tr, .dialog table.ph-stack > tbody > tr { padding: 12px 16px; }
  .dialog table.ph-stack > tbody > tr { padding: 10px 0; }
  table.ph-stack > tbody > tr > td {
    grid-column: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 !important;
    border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; white-space: normal;
  }
  table.ph-stack > tbody > tr > td::before { content: attr(data-label); flex: none; max-width: 55%; color: var(--muted); font-family: var(--font-sans); font-size: var(--footnote); font-weight: 400; text-align: left; }
  table.ph-stack > tbody > tr > td:first-child { justify-content: flex-start; text-align: left; font-weight: 500; padding-bottom: 6px !important; }
  table.ph-stack > tbody > tr > td:first-child::before, table.ph-stack > tbody > tr > td:not([data-label])::before, table.ph-stack > tbody > tr > td[data-label=""]::before { display: none; }
  table.ph-stack > tbody > tr > td.actions { grid-column: 2; grid-row: 1 / span 12; align-self: start; width: auto; }
  table.ph-stack > tbody > tr > td.actions::before { display: none; }
  table.ph-stack > tbody > tr > td.actions .btn { width: auto; }
  table.ph-stack > tbody > tr > td:empty { display: none; }
  table.ph-stack .badge { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.25; text-align: left; }
  table.ph-stack.ph-blocks > tbody > tr > td { display: block; text-align: left; }
  table.ph-stack.ph-blocks > tbody > tr > td::before { display: block; max-width: none; margin-bottom: 4px; }
  table.ph-stack.ph-blocks > tbody > tr > td:first-child::before { display: block; }
  table.ph-stack .row-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 140px; }
  /* строки с кнопкой «Открыть» во всю ширину внизу карточки */
  table.ph-stack.wide-action > tbody > tr > td.actions { grid-column: 1 / -1; grid-row: auto; padding-top: 8px !important; }
  table.ph-stack.wide-action > tbody > tr > td.actions .btn { width: 100%; }

  /* широкая таблица в рамке: тени по краям показывают, что её можно прокрутить вбок; первый столбец закреплён */
  .table-wrap {
    background:
      linear-gradient(to right, #0c0d11 30%, rgba(12, 13, 17, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, #0c0d11 30%, rgba(12, 13, 17, 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) right center / 10px 100% no-repeat scroll;
  }
  table.sticky-first th:first-child, table.sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: #0c0d11; box-shadow: 1px 0 0 var(--border); }

  /* ключевые суммы */
  .ph-sums {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 16px;
    border-radius: 14px; border: 1px solid var(--border-2); background: var(--border-2); overflow: hidden;
  }
  .ph-sum { min-width: 0; padding: 10px 12px; background: var(--s2); }
  .ph-sum .k { display: block; color: var(--muted); font-size: var(--footnote); line-height: 1.35; overflow-wrap: anywhere; }
  .ph-sum .v { display: block; margin-top: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 17px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
  .ph-sum .s { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
  .ph-sum.main { grid-column: 1 / -1; }
  .ph-sum.main .v { font-size: 20px; font-weight: 600; }
  .ph-sum .v.txt { font-family: var(--font-sans); font-size: 15px; }
  .ph-sum .v.num { overflow-wrap: normal; }
  .ph-sum:not(.main) .v.long { font-size: 15px; }
  /* 320 px: в половине ширины сумма от миллиона не помещается — клетки в один столбец, число в одну строку */
  @media (max-width: 359px) { .ph-sums { grid-template-columns: minmax(0, 1fr); } }
  .ph-sum .v.ok-text { color: var(--accent); }
  .ph-sum .v.bad-text { color: #ff5c75; }
  .ph-sum.odd-last { grid-column: 1 / -1; }

  /* таблица расчёта: подпись и сумма в строку, пояснение под ними */
  table.calc-table, table.calc-table > tbody { display: block; width: 100%; }
  table.calc-table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  table.calc-table > tbody > tr:last-child { border-bottom: 0; }
  table.calc-table > tbody > tr > td { padding: 0 !important; border: 0 !important; white-space: normal; overflow-wrap: anywhere; }
  table.calc-table > tbody > tr > td.note { grid-column: 1 / -1; margin-top: 2px; font-size: var(--footnote); }
  table.calc-table > tbody > tr > td.note:empty { display: none; }
  dl.props.close-sum { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  dl.props.close-sum dd { margin: 0; text-align: right; }

  /* расчёт: кнопки закрытия периода во всю ширину */
  .close-row .btn { flex: 1 1 100%; }
  .close-row .hint { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .ph-sum { padding: 8px 10px; }
  .ph-sum .v { font-size: 15px; }
  .ph-sum.main .v { font-size: 18px; }
}
/* телефон в альбомной ориентации: кнопки окна в ряд, чтобы осталось место полям */
@media (pointer: coarse) and (max-height: 500px) {
  .dialog-buttons { flex-direction: row; justify-content: flex-end; }
  .dialog-buttons .btn { width: auto; flex: 1 1 0; }
}

/* Телефон: аккаунты и карточка
   Список строк-карточек (web/src/views/accounts-list.js), переключатель «Список / Таблица» и фильтры под кнопкой,
   карточка аккаунта блоками с кнопками «Изменить» и «Скопировать», шторка правки (web/src/touch-edit.js), панель касаний
   таблицы. Запрос «телефон» — как PHONE_QUERY в web/src/phone.js. Настольная таблица (строка 32 px) не меняется. */

/* касание: своя подсветка нажатия (:active), без синего прямоугольника браузера */
.acc-view button, .acc-item, .card-dialog button, .sheet-layer button, .sheet-opt, .grid-touchbar button, .grid-viewport { -webkit-tap-highlight-color: transparent; }

/* статус цветной меткой: в таблице, в списке и в карточке одинаково */
.status-chip { display: inline-block; max-width: 100%; height: 22px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.status-chip.none { color: var(--muted); font-size: var(--caption); white-space: nowrap; }
.status-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* таблица: строка панели касаний под строками (видна только после касания) */
.grid { grid-template-rows: auto minmax(0, 1fr) auto; }
.grid-viewport { touch-action: manipulation; }
.grid-touchbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-top: 1px solid var(--border); background: var(--s2); }
.grid-touchbar[hidden] { display: none; }
.grid-touchbar .tb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--footnote); }
.grid-touchbar .btn { height: 44px; }
.grid-touchbar .btn[hidden] { display: none; }

/* список аккаунтов: одна панель, строки разделены линией, как «История операций» образца */
.list-host { display: none; }
.acc-view.as-list > .grid-host { display: none; }
.acc-view.as-list > .list-host {
  display: flex; position: relative; min-height: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--border-2); background: var(--panel-bg); box-shadow: var(--panel-inset);
}
.acc-list { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: manipulation; -webkit-overflow-scrolling: touch; }
.acc-list-spacer { width: 1px; }
.acc-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--border); contain: layout style; }
.acc-item {
  display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 100%; height: 100%; padding: 0 16px;
  border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
/* касание всегда попадает в саму кнопку строки: строка перерисовывается живыми обновлениями, а кнопка остаётся той же */
.acc-item * { pointer-events: none; }
.acc-item:active { background: rgba(255, 255, 255, 0.045); }
.acc-item:focus-visible { outline-offset: -3px; }
.acc-item.quarantine { background: rgba(var(--amber-rgb), 0.05); }
.ai-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-profile { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--body-sm); line-height: 1.35; }
.ai-line .status-chip { flex: 0 0 auto; max-width: 60%; }
.ai-sub { color: var(--text-2); font-size: var(--footnote); line-height: 1.35; }
.ai-code { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }
.ai-broker { flex: 1 1 0; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mark { display: inline-block; flex: 0 1 auto; min-width: 0; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.ai-mark.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 400; }
.ai-reason { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ff8a9c; font-size: var(--footnote); line-height: 1.35; }
.acc-list-empty { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); }
.acc-list-empty[hidden] { display: none; }

/* панель над списком: на широком экране как раньше; переключатель вида, «Фильтры», меню «Ещё», «Добавить аккаунт»
   у списка и число аккаунтов внизу — только на телефоне */
.acc-view .toolbar > .view-switch, .acc-view .toolbar > .filters-btn, .acc-view .toolbar > .acc-add-ph,
.acc-view .page-head .acc-more, .acc-view .footer .ph-count { display: none; }
.acc-view .filters { display: contents; }
.acc-view .sort-ctl { display: none; }

/* карточка аккаунта: разделы и строки «подпись, значение, действия» */
.dialog .card-section > h3 { margin: 22px 0 2px; font-size: var(--body-sm); font-weight: 600; color: var(--text); }
.card-props > .alert { margin-bottom: 8px; }
.card-props > .card-section:first-child > h3, .card-props > .alert + .card-section > h3 { margin-top: 8px; }
.card-prop {
  display: grid; grid-template-columns: minmax(140px, 36%) minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
  min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.card-prop .k { color: var(--text-2); font-size: 14px; line-height: 1.35; }
.card-prop .v { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: var(--body-sm); line-height: 1.45; }
.card-prop .v.tap { cursor: pointer; }
.card-prop .v code { font-size: 15px; }
.card-prop .v .code-block { margin: 0; }
.card-prop .a { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.card-prop .card-edit .ico { width: 16px; height: 16px; }
.card-prop .copy-btn { color: var(--text-2); }
.card-prop-state { grid-column: 2 / -1; font-size: var(--footnote); line-height: 1.4; color: var(--amber); }
.card-prop.st-error .card-prop-state, .card-prop.st-conflict .card-prop-state { color: #ff5c75; }
.card-prop.st-saved .card-prop-state { color: var(--accent); }
.card-secrets { margin-top: 20px; }

/* шторка правки: на широком экране окно по центру, на телефоне — снизу над клавиатурой */
.sheet-layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 50; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px);
  overflow: auto; overscroll-behavior: contain; padding: 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #14151b 0%, #0d0e13 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 44px rgba(0, 0, 0, 0.7);
}
.sheet > h2 { margin: 0 0 4px; font-size: var(--lead); line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.sheet-sub { margin: 0 0 16px; color: var(--text-2); font-size: var(--body-sm); overflow-wrap: anywhere; }
.sheet .field { margin: 0 0 12px; }
.sheet .field .hint { font-size: var(--footnote); }
input.sheet-input, textarea.sheet-input { width: 100%; height: 48px; font-size: 16px; }
textarea.sheet-input { height: auto; min-height: 96px; }
.sheet-body > input[type=search] { margin-bottom: 8px; }
.sheet-list {
  display: grid; gap: 2px; max-height: min(52vh, 420px); overflow: auto; overscroll-behavior: contain; padding: 4px;
  border-radius: 14px; border: 1px solid var(--border-2); background: var(--s1);
}
.sheet-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.sheet-opt[hidden] { display: none; }
.sheet-opt input[type=radio] { width: 20px; height: 20px; flex: none; }
.sheet-opt:has(input:checked) { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.sheet-opt.current > span::after { content: " (сейчас)"; color: var(--muted); }
.sheet-action { width: 100%; margin-top: 8px; }
.sheet-err { margin: 10px 0 0; color: #ff5c75; font-size: var(--body-sm); overflow-wrap: anywhere; }
.sheet-err:empty { display: none; }
.sheet-buttons { display: flex; gap: 10px; margin-top: 20px; }
.sheet-buttons .btn { flex: 1 1 0; height: 48px; }
@media (prefers-reduced-motion: no-preference) { .sheet-layer { animation: fade-in 0.14s ease-out; } }

@media (pointer: coarse) {
  .card-prop .card-edit { height: 44px; }
  .card-prop .copy-btn { width: 44px; height: 44px; }
}
/* планшет: кнопки карточки закреплены внизу окна, «Закрыть» видна без прокрутки до конца карточки */
@media (pointer: coarse) and (min-width: 769px) and (min-height: 501px) {
  .dialog.card-dialog { padding-bottom: 0; }
  .dialog.card-dialog .dialog-buttons {
    position: sticky; bottom: 0; z-index: 2; margin: 20px -28px 0; padding: 12px 28px 16px;
    background: #0e0f14; border-top: 1px solid var(--border);
  }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  /* список занимает остаток экрана: на 320×568 и 375×667 без прокрутки видно не меньше четырёх строк */
  .acc-view { flex: 1 0 auto; grid-template-rows: auto auto minmax(260px, 1fr) auto; gap: 10px; }
  .acc-view > .grid-host, .acc-view > .list-host { contain: size; }

  /* шапка: заголовок и «Ещё» в одну строку; описание раздела — только на широком экране */
  .acc-view > .page-head { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .acc-view > .page-head:has(> .gate-note:not([hidden])) { flex-wrap: wrap; } /* причина закрытого создания — своей строкой */
  .acc-view > .page-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  .acc-view > .page-head h1 { font-size: 24px; overflow-wrap: anywhere; }
  .acc-view > .page-head .desc, .acc-view > .page-head .desc-more { display: none !important; }
  .acc-view > .page-head .actions { width: auto; flex: none; }
  .acc-view > .page-head .actions .acc-csv, .acc-view > .page-head .actions .acc-add { display: none; }
  .acc-view > .page-head .acc-more { display: block; }

  /* поиск и «Фильтры» — одна строка; ниже «Добавить аккаунт» и вид (на широком телефоне всё в одну строку) */
  .acc-view .toolbar input[type=search] { flex: 1 1 160px; width: auto; min-width: 0; max-width: none; }
  .acc-view .toolbar > .filters-btn { display: inline-flex; flex: 0 0 auto; }
  .acc-view .toolbar > .acc-add-ph { display: inline-flex; flex: 1 1 auto; }
  .acc-view .toolbar > .view-switch { display: inline-flex; flex: 0 0 auto; margin-left: auto; }
  .acc-view .toolbar > .view-switch .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; }
  .acc-view .toolbar > .view-switch .seg-text { display: none; }
  .acc-view .toolbar .count { display: none; }
  .acc-view .footer .ph-count { display: inline; }
  .acc-view .filters { display: none; }
  .acc-view .toolbar.filters-open .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 100%; }
  .acc-view .filters select { width: 100%; display: block; }
  .acc-view .sort-ctl { display: flex; gap: 6px; grid-column: 1 / -1; }
  .acc-view .sort-ctl select { flex: 1 1 auto; min-width: 0; }
  .acc-view .sort-ctl .sort-dir[hidden] { display: none; }
  .acc-view .filters label.check { grid-column: 1 / -1; }

  /* панель касаний таблицы — у нижнего края экрана: страница раздела на телефоне длиннее экрана */
  .grid-touchbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 16px;
    border-top: 1px solid var(--border-2); background: #0e0f14; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  }

  /* карточка: подпись над значением, действия справа, читается без горизонтальной прокрутки */
  .card-prop { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; }
  .card-prop .k { grid-column: 1 / -1; color: var(--muted); font-size: var(--footnote); }
  .card-prop .v { font-size: var(--body); }
  .card-prop-state { grid-column: 1 / -1; }
  /* «Изменить» — значок-карандаш 44×44 (подпись — в aria-label); касание всей строки значения тоже открывает правку */
  .card-prop .card-edit { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .card-prop .card-edit > span { display: none; }
  .card-prop .card-edit .ico { width: 18px; height: 18px; }
  .card-secrets .btn, .card-actions .btn { height: 44px; }
  /* кнопка «Закрыть» прижата к низу экрана: под ней не просвечивают строки карточки */
  .dialog.wide.card-dialog { padding-bottom: 0; }
  .dialog.wide.card-dialog .dialog-buttons { margin-bottom: 0; }
  table.history-table, table.history-table > tbody { display: block; }
  table.history-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  table.history-table tr:last-child { border-bottom: 0; }
  table.history-table td { padding: 0 !important; border: 0; min-width: 0; overflow-wrap: anywhere; }
  table.history-table td:nth-child(3) { color: var(--muted); }
  table.history-table td:nth-child(4) { grid-column: 1 / -1; }

  /* шторка снизу во всю ширину, кнопки закреплены внизу шторки */
  .sheet {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: calc(100% - 8px);
    border-radius: 20px 20px 0 0; border-bottom: 0; padding: 20px 16px 0;
  }
  .sheet-list { max-height: none; }
  .sheet-buttons {
    position: sticky; bottom: 0; z-index: 1; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #0e0f14; border-top: 1px solid var(--border);
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  /* планшет в портрете: у переключателя вида есть место для подписей */
  .acc-view .toolbar > .view-switch .seg-btn { width: auto; padding: 0 14px; }
  .acc-view .toolbar > .view-switch .seg-text { display: inline; }
}
@media (pointer: coarse) and (max-height: 500px) {
  /* телефон боком: заголовок и панель — по строке, списку остаётся не меньше 200 px */
  .acc-view { grid-template-rows: auto auto minmax(200px, 1fr) auto; }
  .sheet { max-height: 100%; }
}
@media (pointer: coarse) and (max-height: 500px) and (min-width: 560px) {
  .card-prop { grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) auto; padding: 4px 0; }
  .card-prop .k { grid-column: auto; font-size: 14px; color: var(--text-2); }
  .card-prop-state { grid-column: 2 / -1; }
}
/* комментарий в карточке — с переносами строк, как введён */
.card-prop[data-field="comment"] .v { white-space: pre-wrap; }

/* ------------------------------------------------------------------ Kontaro: подключение, ключи, доступ */
/* Первый запуск, набор восстановления, ожидание подтверждения: те же карточки входа, шире для набора. */
.auth-stack.wide { max-width: 620px; }
.step-mark { margin: 0 0 10px; color: var(--muted); font-size: var(--footnote); letter-spacing: 0.02em; }
.code-group { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.kit-label { margin: 0 0 8px; color: var(--text-2); font-size: var(--footnote); }
.kit-secret { margin: 0 0 16px; padding: 18px 16px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: var(--s1); }
.secret-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.secret-groups li { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--s3); }
.secret-groups .n { color: var(--muted); font-size: var(--caption); min-width: 1.2em; text-align: right; }
.secret-groups .code-group { font-size: 22px; color: var(--text); }
.kit-actions { margin: 0 0 16px; }
.auth-card .kit-actions .btn { flex: 1 1 180px; }
.kit-check { margin: 20px 0 8px; }
.kit-check h2 { font-size: var(--body); margin: 0 0 10px; color: var(--text); }
.hint.ok-text { color: var(--accent); }
.hint.bad-text { color: #ff5c75; }
.check-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-row .field { margin: 0; }
.check-input { text-transform: uppercase; height: 48px; font-size: 20px; letter-spacing: 0.08em; }
.fingerprint { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fingerprint .code-group { font-size: 24px; padding: 8px 12px; border-radius: 10px; background: var(--s3); border: 1px solid var(--border-2); color: var(--text); }
.dialog .fingerprint .code-group, .setting-row .fingerprint .code-group { font-size: 18px; padding: 4px 8px; }
.setting-row .fingerprint { margin: 0; }
.confirm-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 20px; }
.confirm-list dt { color: var(--muted); font-size: var(--footnote); padding-top: 2px; }
.confirm-list dd { min-width: 0; margin: 0 0 12px; overflow-wrap: anywhere; }
.confirm-list dd:last-child { margin-bottom: 0; }
.confirm-list .fingerprint { margin: 0; }
.confirm-list .fingerprint .code-group { font-size: 16px; padding: 4px 8px; }
label.check.confirm-check { display: flex; align-items: flex-start; font-size: var(--body-sm); color: var(--text); margin: 4px 0 16px; line-height: 1.45; }
label.check.confirm-check input { margin-top: 3px; flex: none; }
label.check.confirm-check > span { min-width: 0; overflow-wrap: anywhere; }
.auth-alt { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.auth-alt .auth-desc { margin: 0 0 12px; }
.secret-input { width: 100%; min-height: 72px; text-transform: uppercase; font-size: 17px; letter-spacing: 0.06em; resize: vertical; }
.auth-card .alert + .alert { margin-top: -8px; }
@media (max-width: 480px) {
  .secret-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secret-groups .code-group { font-size: 20px; }
  .fingerprint .code-group { font-size: 20px; padding: 6px 10px; }
  .check-row { grid-template-columns: 1fr; }
}

/* Печать только листа с секретом (кнопка «Распечатать»): остальная страница на время печати скрыта. */
.print-sheet { display: none; }
@media print {
  body.printing > :not(.print-sheet) { display: none !important; }
  body.printing { background: #fff; }
  body.printing .print-sheet { display: block; color: #000; font: 14px/1.5 var(--font-sans); padding: 24px; }
  .print-sheet h1 { font-size: 22px; margin: 0 0 8px; font-weight: 600; }
  .print-sheet .secret-groups { margin: 20px 0; gap: 10px; }
  .print-sheet .secret-groups li { background: none; border: 1px solid #000; }
  .print-sheet .secret-groups .n { color: #444; }
  .print-sheet .secret-groups .code-group { color: #000; font-size: 24px; }
}

/* Шапка приложения: тревога проверки и незавершённая смена ключей. */
.status-pill.alarm { justify-content: center; cursor: pointer; }
.app-banner {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 12px 32px 0; padding: 10px 14px; border-radius: 12px; font-size: var(--footnote);
  border: 1px solid rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); color: var(--text);
}
.app-banner b { color: #ff5c75; font-weight: 600; }
.alarm-list { margin: 0 0 10px; padding-left: 18px; color: var(--text-2); }
@media (max-width: 768px) { .app-banner { margin: 8px 16px 0; } }

/* «Доступ»: запросы устройств, люди карточками с устройствами. */
.people { display: grid; gap: 12px; }
.page > .requests-panel { margin-bottom: 16px; }
.page > div:empty { display: none; }
.page > div > .alert { margin-bottom: 16px; }
.requests-panel { border-color: rgba(var(--amber-rgb), 0.45); }
.request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.request-row .req-why { grid-column: 1 / -1; margin: 0; }
.req-badges { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.person { padding: 16px 20px; }
.person.off { opacity: 0.75; }
.person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.person-who { min-width: 0; overflow-wrap: anywhere; }
.person-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.device-list { margin-top: 12px; display: grid; gap: 0; }
.device-list > p { margin: 8px 0 0; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.device-main { min-width: 0; overflow-wrap: anywhere; }
.device-main .badge { margin-left: 8px; }
@media (max-width: 768px) {
  .request-row { grid-template-columns: 1fr; }
  .device-row { flex-direction: column; align-items: stretch; }
  .device-row .btn { align-self: flex-start; }
  .person { padding: 14px 16px; }
}

/* «Система»: таблица «название — значение». */
table.simple.kv tbody th { width: 34%; min-width: 9em; }

/* Создание аккаунтов закрыто до переноса из Google (§5.7): причина рядом с выключенными кнопками */
.gate-note { flex: 1 0 100%; margin: 0; padding: 10px 14px; border: 1px solid rgba(var(--amber-rgb), .45); border-radius: 12px; color: var(--amber); font-size: 13px; line-height: 1.45; }
.gate-note[hidden] { display: none; }
.root-code { margin: 0 0 12px; }
.panel[hidden] { display: none; }