/* ===================================================
   BIDLINE — Mobile site (m/*)  —  self-contained
   Полная изоляция: style.css / mobile.css НЕ подключаются.
   Только этот файл + <style> внутри страничных шаблонов.
   =================================================== */

/* Local Inter (как в style.css) — RU/WebView без Google */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Inter-Regular.otf') format('opentype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Inter-Medium.otf') format('opentype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/static/fonts/Inter-Bold.otf') format('opentype'); }
/* (07.08) WOFF2 последним = основной; OTF выше остаются фолбэком (чёткость на Windows) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/InterVariable.woff2') format('woff2-variations'); }

/* ---------- Тема ---------- */
:root, [data-theme="dark"] {
    --bg-0: #111113; --bg-1: #17171a; --bg-card: #19191d; --bg-hover: #222228; --bg-input: #141417;
    --border: #2e2e33; --border-light: #3f3f46;
    --text-primary: #ececf0; --text-secondary: #a1a1ab; --text-muted: #6d6d78;
    --accent: #8385d6; --accent-hover: #9698e0; --accent-soft: rgba(131,133,214,0.16); --accent-glow: rgba(131,133,214,0.22);
    --green: #34d399; --green-bg: rgba(52,211,153,0.14);
    --red: #f87171;   --red-bg: rgba(248,113,113,0.14);
    --yellow: #fbbf24;--yellow-bg: rgba(251,191,36,0.14);
    --radius: 12px; --radius-sm: 10px;
    --shadow-sheet: 0 -12px 40px rgba(0,0,0,0.5);
    --shadow-pop: 0 12px 32px rgba(0,0,0,0.45);
}
[data-theme="light"] {
    --bg-0: #f5f6f8; --bg-1: #ffffff; --bg-card: #ffffff; --bg-hover: #f2f2f5; --bg-input: #f7f7f9;
    --border: #e7e7ec; --border-light: #d9d9e0;
    --text-primary: #16161f; --text-secondary: #565663; --text-muted: #9797a2;
    --accent: #5e58c4; --accent-hover: #4d48ad; --accent-soft: rgba(94,88,196,0.10); --accent-glow: rgba(94,88,196,0.18);
    --green: #16a34a; --green-bg: rgba(22,163,74,0.10);
    --red: #dc2626;   --red-bg: rgba(220,38,38,0.09);
    --yellow: #ca8a04;--yellow-bg: rgba(202,138,4,0.12);
    --radius: 12px; --radius-sm: 10px;
    --shadow-sheet: 0 -12px 40px rgba(20,20,40,0.16);
    --shadow-pop: 0 12px 32px rgba(20,20,40,0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-0); color: var(--text-primary);
    font-size: 15px; line-height: 1.5; letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-bottom: calc(72px + max(env(safe-area-inset-bottom, 0px), 0px));
    min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
input, select, textarea, button { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-soft); }

/* ---------- Типографика ---------- */
.m-h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.m-h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.m-muted { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.m-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.m-sec { padding: 16px 4px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }

/* ---------- Каркас: контент ---------- */
.m-wrap { padding: 12px 14px; max-width: 640px; margin: 0 auto; }
.m-stack > * + * { margin-top: 10px; }

/* ---------- Top-bar ----------
   Реальные устройства: env(safe-area-inset-top) может быть больше высоты
   шапки (вырез/статус-бар) — раньше это СЖИМАЛО контентную строку (height:56px
   фиксировала ОБЩУЮ высоту, включая паддинг) и заголовок обрезался.
   Теперь: .m-topbar только даёт "воздух" сверху (паддинг, минимум 8px ВСЕГДА,
   даже без safe-area), а сама строка контента — фикс. 48-56px НИЖЕ паддинга,
   её ничто не сжимает. В приложении (bl-app) env() часто врёт нулём, хотя
   рисуется под статус-баром — там фолбэк крупнее (24px). */
.m-topbar {
    position: sticky; top: 0; z-index: 900;
    padding: 0 14px;
    padding-top: max(env(safe-area-inset-top, 0px), 8px);
    background: color-mix(in srgb, var(--bg-1) 88%, transparent);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border);
}
html.bl-app .m-topbar {
    padding-top: max(env(safe-area-inset-top, 24px), 24px);
}
.m-topbar-row { height: 56px; display: flex; align-items: center; gap: 10px; }
.m-topbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-topbar-btn {
    width: 38px; height: 38px; flex-shrink: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; border-radius: 10px;
    color: var(--text-primary); position: relative; cursor: pointer;
    transition: background 0.15s;
}
/* Визуально компактнее (было 44×44), тап-зона держится 44×44 невидимой зоной. */
.m-topbar-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.m-topbar-btn svg { width: 22px; height: 22px; }
.m-topbar-btn:active { background: var(--bg-hover); }
.m-topbar-badge {
    position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center; border-radius: 8px; border: 2px solid var(--bg-1);
}

/* ---------- Card ---------- */
.m-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 13px;
}
.m-card-tap { transition: transform 0.12s ease, border-color 0.15s; }
.m-card-tap:active { transform: scale(0.985); border-color: var(--border-light); }
.m-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* ---------- Metric ---------- */
.m-metric-val { font-size: 21px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.m-metric-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.m-metric-delta { font-size: 12px; font-weight: 600; margin-top: 3px; }
.m-metric-delta.up { color: var(--green); }
.m-metric-delta.down { color: var(--red); }
.m-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- Pill ---------- */
.m-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; border: 1px solid transparent;
}
.m-pill.green  { background: var(--green-bg);  color: var(--green);  border-color: color-mix(in srgb, var(--green) 26%, transparent); }
.m-pill.red    { background: var(--red-bg);    color: var(--red);    border-color: color-mix(in srgb, var(--red) 24%, transparent); }
.m-pill.yellow { background: var(--yellow-bg); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 26%, transparent); }
.m-pill.accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.m-pill.muted  { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); }

/* ---------- Chip (канон, эталон 10.07 — см. MOBILE_DESIGN.md)
   MD3 chip 32dp height → визуально 30px, невидимая тап-зона по высоте 44px. ---------- */
.m-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px;
    border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
    position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s ease;
}
.m-chip::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); }
.m-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.m-chip.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.m-chip:active { transform: scale(0.96); }

/* ---------- Switch (канон, эталон 10.07 — см. MOBILE_DESIGN.md)
   iOS UISwitch 51×31pt / MD3 Switch 52×32dp — визуально компактнее прод-конвенции
   страничных тумблеров (46×28 у .switch/.mst-switch/.mse-switch): ~-13%/-14%.
   Тап-зона держится РЕАЛЬНЫМ размером 44×44 через ::before (приём уже в проекте),
   а не физическим треком — трек можно уменьшать не трогая доступность.
   Разметка — 2 варианта на общих .m-switch-track/.m-switch-track::before:
   1) Кнопка (POST/AJAX):       <button type="button" class="m-switch [on]"><span class="m-switch-track"></span></button>
   2) Чекбокс (нативная форма): <label class="m-switch"><input type="checkbox" class="m-switch-input">
                                   <span class="m-switch-track"></span></label>                              ---------- */
.m-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
    background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-switch::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.m-switch-input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
/* Android-стиль (как в нативных приложениях): тонкая дорожка + выступающий кружок */
.m-switch-track { position: relative; display: block; width: 34px; height: 14px; border-radius: 7px;
    background: color-mix(in srgb, var(--text-muted) 38%, transparent); transition: background 0.18s; }
.m-switch-track::before { content: ''; position: absolute; top: -3px; left: 0; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(0,0,0,0.06);
    transition: transform 0.18s ease, background 0.18s; }
.m-switch.on .m-switch-track,
.m-switch-input:checked + .m-switch-track { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.m-switch.on .m-switch-track::before,
.m-switch-input:checked + .m-switch-track::before { transform: translateX(14px); background: var(--accent); }
.m-switch:disabled .m-switch-track,
.m-switch-input:disabled + .m-switch-track { opacity: 0.5; }
.m-switch:disabled { cursor: default; }

/* ---------- Buttons ---------- */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 11px;
    font-size: 14.5px; font-weight: 600; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-primary); cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
    width: 100%;
}
.m-btn:active { transform: scale(0.98); background: var(--bg-hover); }
.m-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-btn-primary:active { background: var(--accent-hover); }
.m-btn-ghost { background: transparent; }
/* Компактный вариант — визуально 36-40px (эталон 38px), тап-зона 44px через ::before.
   Для строчных вторичных действий (Отмена и т.п.), НЕ full-width по умолчанию. */
.m-btn-sm { display: inline-flex; width: auto; min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; position: relative; }
.m-btn-sm::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* ---------- Input ---------- */
.m-input {
    width: 100%; height: 48px; padding: 0 16px; font-size: 16px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s;
}
.m-input::placeholder { color: var(--text-muted); }
.m-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.m-search { position: relative; }
.m-search .m-input { padding-left: 44px; }
.m-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

/* ---------- List / rows ---------- */
.m-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.m-row {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 16px;
    color: var(--text-primary); position: relative; cursor: pointer;
    transition: background 0.12s;
}
.m-row:active { background: var(--bg-hover); }
.m-row + .m-row { border-top: 1px solid var(--border); }
.m-row-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.m-row-label { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-chev { color: var(--text-muted); flex-shrink: 0; }
.m-row-badge { flex-shrink: 0; }

/* ---------- Empty ---------- */
.m-empty { text-align: center; padding: 32px 20px; }
.m-empty-ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); }
.m-empty-title { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.m-empty-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; max-width: 280px; margin: 0 auto 16px; }

/* ---------- Segmented (period selector) ---------- */
.m-seg { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.m-seg a { flex: 1; text-align: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text-secondary); white-space: nowrap; transition: background 0.15s, color 0.15s;
    position: relative; }
/* Тап-зона до 44px по высоте (было без защиты — реальная высота строки ~28px). */
.m-seg a::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); }
.m-seg a.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* ---------- Tab-bar ----------
   Тот же принцип, что и в шапке: явный фолбэк у env(), контентная строка не
   сжимается. Снизу риск меньше (жест-бар/home-indicator обычно репортится
   корректно), но для bl-app (WebView) на всякий случай тоже держим минимум. */
.m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(56px + max(env(safe-area-inset-bottom, 0px), 0px));
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--border);
}
html.bl-app .m-tabbar {
    height: calc(56px + max(env(safe-area-inset-bottom, 8px), 8px));
    padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px);
}
.m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
    position: relative; transition: color 0.15s;
}
.m-tab svg { width: 21px; height: 21px; }
.m-tab.active { color: var(--accent); }
.m-tab:active { opacity: 0.7; }
.m-tab-badge {
    position: absolute; top: 6px; left: 50%; margin-left: 5px; min-width: 15px; height: 15px; padding: 0 4px;
    background: var(--red); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
    border-radius: 8px; border: 1.5px solid var(--bg-1);
}
/* Центральная акцент-кнопка «Поддержка» */
.m-tab-fab { flex: 0 0 auto; width: 74px; }
.m-tab-fab .m-fab {
    width: 46px; height: 46px; margin-top: -12px; border-radius: 50%;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px var(--accent-glow), 0 2px 6px rgba(0,0,0,0.2);
    border: 3px solid var(--bg-1); transition: transform 0.14s;
}
.m-tab-fab .m-fab svg { width: 21px; height: 21px; }
.m-tab-fab:active .m-fab { transform: scale(0.92); }
.m-tab-fab span { color: var(--text-muted); margin-top: 1px; }

/* ---------- Drawer (bottom sheet) ---------- */
.m-drawer-scrim {
    position: fixed; inset: 0; z-index: 1000; background: rgba(6,6,12,0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.m-drawer-scrim.open { opacity: 1; pointer-events: auto; }
.m-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    background: var(--bg-1); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-sheet);
    padding: 8px 14px calc(20px + max(env(safe-area-inset-bottom, 0px), 0px));
    max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.m-drawer.open { transform: translateY(0); }
.m-drawer-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border-light); margin: 6px auto 12px; }
.m-drawer-title { font-size: 15px; font-weight: 600; padding: 0 4px 8px; }
.m-drawer-sep { height: 1px; background: var(--border); margin: 8px 4px; }

/* ---------- Toasts ---------- */
.m-toasts {
    position: fixed; left: 12px; right: 12px; bottom: calc(72px + max(env(safe-area-inset-bottom, 0px), 0px));
    z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.m-toast {
    max-width: 440px; width: 100%; padding: 12px 16px; border-radius: 13px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
    font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px;
    pointer-events: auto; animation: mToastIn 0.24s cubic-bezier(0.32,0.72,0,1);
}
.m-toast.leaving { animation: mToastOut 0.2s ease forwards; }
.m-toast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.m-toast.success .m-toast-dot { background: var(--green); }
.m-toast.error .m-toast-dot { background: var(--red); }
.m-toast.warn .m-toast-dot { background: var(--yellow); }
@keyframes mToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mToastOut { to { opacity: 0; transform: translateY(12px); } }

/* ---------- Прочее ---------- */
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.m-divider { height: 1px; background: var(--border); border: 0; margin: 4px 0; }
.m-mb12 { margin-bottom: 12px; }

/* Плавающий пузырь чат-виджета не нужен: вход в поддержку — центральная
   кнопка таб-бара (FAB), которая дёргает window._blChat.toggle(). Прячем сам
   пузырь (#bl-chat-btn), окно чата (#bl-chat-window, fullscreen) не трогаем. */
#bl-chat-btn { display: none !important; }

/* ===== ШИРОКИЕ ЭКРАНЫ (?view=mobile на ПК / планшеты): узкая колонка по центру,
   как веб-версии нативных приложений. Телефоны (<=520px) не затрагивает. ===== */
@media (min-width: 521px) {
  body { background: var(--bg-0); }
  .m-wrap { max-width: 480px; margin-left: auto; margin-right: auto; }
  .m-topbar, .m-tabbar {
    max-width: 480px; left: 50%; transform: translateX(-50%);
    width: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  }
  .m-drawer { max-width: 480px; left: 50%; transform: translateX(-50%) translateY(100%); }
  .m-drawer.open { transform: translateX(-50%) translateY(0); }
}

/* Алиас: --bg-2 использовался страницами, но не был объявлен (репорт mw2b) */
:root { --bg-2: var(--bg-hover); --blue:#3b82f6; }
.m-drawer .m-muted { text-wrap: pretty; }
[data-theme="light"] { --bg-2: var(--bg-hover); }


/* ===== DENSITY-2: компакт-канон уровня топ-приложений (Авито/Озон), 10.07 =====
   Тексты -1..-1.5px, ряды/кнопки/шапка ниже, отступы плотнее.
   Тап-зоны >=44px СОХРАНЕНЫ (невидимые ::before). Инпуты font-size 16px НЕ трогаем (iOS zoom).
   Нож: удалить блок целиком. */
body { font-size: 14px; }
.m-h1 { font-size: 17px; }
.m-h2 { font-size: 14px; }
.m-muted { font-size: 12.5px; }
.m-topbar-row { height: 50px; }
.m-topbar-title { font-size: 16.5px; }
.m-wrap { padding: 10px 14px; } /* бок 14 — калибровка bleed-скроллеров (-14px) */
.m-stack > * + * { margin-top: 8px; }
.m-card { padding: 11px 12px; }
.m-sec { padding: 12px 4px 5px; font-size: 10.5px; }
.m-metric-val { font-size: 19px; }
.m-btn { min-height: 42px; font-size: 14px; border-radius: 10px; position: relative; }
.m-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%); }
.m-btn-sm { min-height: 34px; font-size: 13px; padding: 0 12px; }
.m-input { height: 44px; border-radius: 11px; }
.m-search .m-input { padding-left: 40px; }
.m-search svg { left: 12px; }
.m-row { min-height: 44px; padding: 9px 14px; gap: 10px; }
.m-row-label { font-size: 14px; }
.m-row-ic { width: 20px; height: 20px; }
.m-empty-ic { width: 42px; height: 42px; }
.m-empty-title { font-size: 15px; }
.m-empty-sub { font-size: 12.5px; }

/* ===== ZOOM-ARMOR: устойчивость к Android textZoom (системный крупный шрифт) =====
   Текст растёт, px-раскладка нет — критичные бары деградируют в ellipsis, а не в налипание. */
.m-tab { min-width: 0; overflow: hidden; }
.m-tab > span { max-width: calc(100% - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-metric-val { white-space: nowrap; }
.m-pill { white-space: nowrap; }
.m-btn { text-wrap: balance; }
.it-title, #mNotifs div, #mNotifs .m-muted { text-wrap: pretty; }

/* ===== DENSITY-3: доужатие до плотности обычных приложений (10.07 вечер) ===== */
.m-btn { min-height: 40px; font-size: 13.5px; padding: 0 14px; }
.m-btn-sm { min-height: 32px; font-size: 12.5px; padding: 0 11px; }
.m-h1 { font-size: 16px; }
.m-topbar-row { height: 48px; }
.m-topbar-title { font-size: 16px; }
.m-card { padding: 10px 11px; }
.m-metric-val { font-size: 18px; }
.m-chip { font-size: 11.5px; }
.m-pill { font-size: 11px; }
.m-row { padding: 8px 13px; }
.m-input { height: 42px; }
.m-empty-ic { width: 38px; height: 38px; }
.m-sec { padding: 10px 4px 4px; }

/* ===== DENSITY-4: полное ужатие до плотности Авито (10.07 ночь) ===== */
body { font-size: 13.5px; }
.m-h1 { font-size: 15.5px; }
.m-topbar-row { height: 46px; }
.m-topbar-title { font-size: 15.5px; }
.m-card { padding: 9px 10px; }
.m-metric-val { font-size: 17px; }
.m-btn { min-height: 38px; font-size: 13px; border-radius: 9px; }
.m-btn-sm { min-height: 30px; font-size: 12px; }
.m-chip { height: 28px; font-size: 11px; }
.m-pill { font-size: 10.5px; }
.m-row { min-height: 42px; padding: 7px 12px; }
.m-row-label { font-size: 13.5px; }
.m-muted { font-size: 12px; }
.m-sec { font-size: 10px; }
.m-empty-ic { width: 34px; height: 34px; }
.m-tab { font-size: 10px; }
.m-tab svg { width: 20px; height: 20px; }

/* (07.08) Мобильные заглушки — как на десктопе: без цветной плашки,
   один размер иконки, приглушённый цвет. Перебивает density-варианты ниже. */
.m-empty { text-align: center; }
.m-empty-ic {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
  font-size: 40px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 6px !important;
}
.m-empty-ic svg { width: 40px !important; height: 40px !important; stroke-width: 1.5 !important; }
.m-empty-title { font-size: 15px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.m-empty-sub { font-size: 13px !important; color: var(--text-secondary) !important; line-height: 1.55 !important; }
/* третий вариант из m/ai_chat.html — туда же */
.ac-empty-ic { background: none !important; color: var(--text-muted) !important; opacity: 0.6 !important; }
.ac-empty-ic svg { width: 40px !important; height: 40px !important; stroke-width: 1.5 !important; }