/* Кабинет «Ракеты» (Telegram Mini App). Основа — общий стиль «Ракеты» (docs/design/rocket-style.css корневой
рабочей области) и утверждённый макет 2026-10-01-miniapp-cabinet.html. Отличия от макета: системный шрифт
(внешние ресурсы запрещены CSP), нет имитации шапки Telegram (её рисует клиент), из вариантов нижней
навигации оставлено «жидкое стекло» L1, выбранное владельцем. Инлайн-стилей нет: CSP без 'unsafe-inline',
динамические величины ставит скрипт через CSSOM. */
/* ── Токены ─────────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
--bg: #eef1f6; /* фон страницы */
--card: #ffffff; /* карточки, листы, модалки */
--card2: #ffffff; /* маленькие поверхности поверх инсетов (иконочные кнопки, выпадающие списки) */
--inset: #f4f5f8; /* поля, вторичные кнопки, строки списков */
--inset2: #e9ebf1; /* треки шкал, hover инсетов */
--line: #e4e7ee; /* разделители */
--ink: #12151b; /* основной текст */
--ink2: #5d6474; /* вторичный текст */
--ink3: #8b91a1; /* подписи, иконки в подписях */
--brand: #2b6fd6; /* акцент: ссылки, активные рамки, радио */
--brand-soft: rgba(43, 111, 214, .10);
--brand-grad: linear-gradient(90deg, #6aa6ff 0%, #2b6fd6 100%); /* primary-кнопки, заполнение шкал */
--top-grad: linear-gradient(100deg, #6fa9ff 0%, #2b6fd6 100%); /* синяя шапка */
--shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 12px 32px -20px rgba(20, 30, 50, .25);
--lte: #f28c28; /* второй ресурс (LTE, «тёплый» счётчик) */
--warn: #c2691a;
--danger: #e0443f;
--ok: #2fb56f;
--radio: #c3c8d4;
--toast: #12151b;
--r-sheet: 24px; /* большие карточки и модалки */
--r-card: 18px; /* плитки */
--r: 12px; /* кнопки, поля, строки */
--t: .15s ease-in-out;
--font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Тёмная тема: по умолчанию системная; явный выбор пользователя — data-theme на (см. rocket-style.md) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark; --bg: #0f1218; --card: #181c25; --card2: #262c39; --inset: #20252f; --inset2: #2c3341; --line: #2a303c;
--ink: #eef1f6; --ink2: #a4abb9; --ink3: #737b8b; --brand: #5a95f0; --brand-soft: rgba(90, 149, 240, .16);
--top-grad: linear-gradient(100deg, #3f7fe6 0%, #1d4aa6 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -20px rgba(0, 0, 0, .6);
--warn: #f0a34a; --danger: #ff6b66; --radio: #4a5262; --toast: #eef1f6;
}
}
:root[data-theme="dark"] {
color-scheme: dark; --bg: #0f1218; --card: #181c25; --card2: #262c39; --inset: #20252f; --inset2: #2c3341; --line: #2a303c;
--ink: #eef1f6; --ink2: #a4abb9; --ink3: #737b8b; --brand: #5a95f0; --brand-soft: rgba(90, 149, 240, .16);
--top-grad: linear-gradient(100deg, #3f7fe6 0%, #1d4aa6 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -20px rgba(0, 0, 0, .6);
--warn: #f0a34a; --danger: #ff6b66; --radio: #4a5262; --toast: #eef1f6;
}
/* ── База ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--font); font-feature-settings: 'cv11', 'ss01'; min-height: 100vh; }
button, a { font-family: inherit; }
button { cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.i { width: 18px; height: 18px; flex: none; } /* инлайн-иконка: */
.num { font-variant-numeric: tabular-nums; } /* цифры в одну ширину */
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
/* ── Шапка на градиенте ─────────────────────────────────────────────────── */
.top { background: var(--top-grad); color: #fff; padding-bottom: 96px; } /* следующий блок заходит на неё margin-top: -72px */
.brandrow { display: flex; align-items: center; gap: 10px; padding-top: calc(18px + env(safe-area-inset-top)); }
.brandrow img { width: 36px; height: 36px; border-radius: 10px; }
.brandrow b { font-size: 16px; font-weight: 600; }
.title-xl { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } /* крупное имя — только если оно короткое */
/* Плашка объекта в шапке: иконка, имя (может быть длинным «ID ключа N»), статус; ниже — срок */
.keyhead { margin-top: 22px; background: rgba(255, 255, 255, .16); border-radius: 14px; padding: 12px 14px; }
.keyname { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; min-width: 0; }
.keyname .i { width: 16px; height: 16px; opacity: .9; }
.keyname .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keysub { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .85); margin-top: 8px; }
.keysub b { color: #fff; font-weight: 600; }
.keysub b.warn { color: #ffd166; }
.keysub b.bad { color: #ffb4b4; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px; border-radius: 99px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 181, 111, .25); }
.pill.bad i { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); }
.seg { margin-left: auto; display: flex; background: rgba(255, 255, 255, .18); border-radius: 10px; padding: 3px; } /* RU | EN */
.seg button { border: 0; background: none; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.seg button.on { background: #fff; color: #2b6fd6; }
.theme { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; }
.theme .i { width: 17px; height: 17px; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .sun { display: block; } :root:not([data-theme="light"]) .theme .moon { display: none; } }
/* ── Поверхности ────────────────────────────────────────────────────────── */
.sheet { background: var(--card); border-radius: var(--r-sheet); padding: 26px 20px 22px; box-shadow: var(--shadow); }
.sheet h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.sheet .sub { color: var(--ink2); font-size: 14px; margin-top: 6px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--card); border-radius: var(--r-card); padding: 16px 16px 14px; min-width: 0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tile.wide { grid-column: 1 / -1; }
.tile .lbl { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; font-weight: 500; }
.tile .lbl .i { width: 15px; height: 15px; color: var(--ink3); }
.tile b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }
.tile b span { font-weight: 500; color: var(--ink2); font-size: 14px; }
.tile > small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 2px; margin-bottom: 12px; min-height: 1.4em; }
.tile > small.warn { color: var(--warn); }
.tile > small.bad { color: var(--danger); }
.tile.bad b { color: var(--danger); }
.tile .track, .tile .segs { margin-top: auto; }
.row-card { background: var(--card); border-radius: var(--r-card); padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.row-card .tx { flex: 1; min-width: 0; }
.row-card b { display: block; font-size: 15px; font-weight: 600; }
.row-card p { color: var(--ink2); font-size: 13px; margin-top: 2px; }
.note { padding: 12px 14px; border-radius: var(--r); background: var(--brand-soft); font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.note.warn { color: var(--warn); background: rgba(242, 140, 40, .1); }
.note.plain { background: var(--inset); }
/* ── Шкалы ──────────────────────────────────────────────────────────────── */
.track { height: 6px; border-radius: 3px; background: var(--inset2); overflow: hidden; }
.fill { height: 100%; border-radius: 3px; background: var(--brand-grad); transition: width .4s ease; }
.fill.lte { background: linear-gradient(90deg, #ffb46b, var(--lte)); }
.fill.warn { background: linear-gradient(90deg, #ffd08a, #e0a53a); }
.fill.bad { background: var(--danger); }
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 6px; }
.segs i { display: block; border-radius: 3px; background: var(--inset2); }
.segs i.on { background: var(--brand-grad); }
/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--r); padding: 15px 18px; min-height: 52px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--inset); transition: filter var(--t), transform .08s, background var(--t); white-space: nowrap; }
.btn:hover { filter: brightness(.98); }
.btn:active { transform: scale(.985); }
.btn.primary { background: var(--brand-grad); color: #fff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 44px; padding: 11px 14px; font-size: 14px; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* Кнопка с иконкой и подписью: [номер] [иконка] заголовок / подпись … [стрелка] */
.btn.dl { justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 16px; }
.btn.dl .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.btn.dl b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.dl small { font-size: 12.5px; font-weight: 500; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.dl .arr { margin-left: auto; }
.btn.primary.dl small { color: rgba(255, 255, 255, .8); }
.btn img.store { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.btn .n { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.btn:has(.n) { position: relative; padding-left: 58px; min-height: 60px; }
.btn.primary .n { background: rgba(255, 255, 255, .22); color: #fff; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions.one { grid-template-columns: 1fr; }
.actions .btn { padding-left: 12px; padding-right: 12px; }
.iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--card2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(20, 30, 50, .08); flex: none; }
.iconbtn .i { width: 18px; height: 18px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 13.5px; font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; }
.link .i { width: 14px; height: 14px; }
.tag { background: var(--brand); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
/* ── Поля и списки ──────────────────────────────────────────────────────── */
.field { display: flex; align-items: center; gap: 10px; background: var(--inset); border-radius: var(--r); padding: 12px 12px 12px 14px; }
.field .tx { flex: 1; min-width: 0; }
.field label { display: block; color: var(--ink2); font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.field p, .field input { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; outline: none; color: var(--ink); width: 100%; font-family: inherit; }
.select { position: relative; }
.select .cur { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--inset); border: 0; border-radius: var(--r); padding: 13px 14px; font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; }
.select .cur .i { color: var(--brand); }
.select .cur .chev { margin-left: auto; color: var(--ink3); width: 16px; height: 16px; transition: transform var(--t); }
.select.open .cur .chev { transform: rotate(180deg); }
.select .list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card2); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px -8px rgba(20, 30, 50, .25), 0 0 0 1px var(--line); }
.select.open .list { display: grid; }
.select .opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.select .opt .i { color: var(--ink3); width: 16px; height: 16px; }
.select .opt:hover { background: var(--inset); color: var(--ink); }
.select .opt.on { color: var(--brand); background: var(--brand-soft); }
.select .opt.on .i { color: var(--brand); }
/* Плитки выбора (приложения, устройства) */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 14px; background: var(--inset); border: 2px solid transparent; cursor: pointer; transition: border-color var(--t), background var(--t); }
.chip:hover { background: var(--inset2); }
.chip.on { background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.chip img { width: 44px; height: 44px; border-radius: 12px; }
.chip .nm { font-size: 13px; font-weight: 600; color: var(--ink2); }
.chip.on .nm { color: var(--ink); }
.chip .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); }
/* Переключатель варианта (магазин, регион) — два равных сегмента над кнопкой */
.storeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--inset); margin-bottom: 10px; }
.storeseg button { border: 0; background: none; border-radius: 9px; padding: 9px 4px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.storeseg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 50, .14); }
/* Выбор тарифа/пакета — сетка 2×2 карточек: всё видно без прокрутки */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard { position: relative; padding: 12px 12px 11px; border-radius: 14px; background: var(--inset); border: 2px solid transparent; cursor: pointer; text-align: left; transition: border-color var(--t), background var(--t); }
.pcard.on { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 4px var(--brand-soft); }
.pcard .t { font-size: 13.5px; font-weight: 600; color: var(--ink2); padding-right: 52px; }
.pcard.on .t { color: var(--ink); }
.pcard .p { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; }
.pcard .p s { font-size: 12px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.pcard .s { font-size: 12px; color: var(--ink2); margin-top: 1px; }
.pcard .b { position: absolute; top: 10px; right: 10px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
/* Способы оплаты — одна строка равной ширины: --mcols = число способов (до 4); .stack — иконка над подписью */
.methods { display: grid; grid-template-columns: repeat(var(--mcols, 2), 1fr); gap: 8px; }
.method { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 10px; border-radius: 12px; background: var(--inset); border: 2px solid transparent; cursor: pointer; font-size: 14px; font-weight: 600; min-width: 0; white-space: nowrap; }
.method.on { border-color: var(--brand); background: var(--card); }
.method .mi { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.method .mi img, .method .mi svg { width: 100%; height: 100%; }
.method .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.methods.stack .method { flex-direction: column; gap: 4px; height: 60px; padding: 0 4px; font-size: 12.5px; }
/* Строки с радио — для длинных списков, где сетка не подходит */
.options { display: grid; gap: 8px; }
.option { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r); background: var(--inset); border: 2px solid transparent; cursor: pointer; transition: border-color var(--t), background var(--t); }
.option.on { border-color: var(--brand); background: var(--card); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--radio); flex: none; position: relative; }
.on > .radio { border-color: var(--brand); }
.on > .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.option .tx { flex: 1; min-width: 0; }
.option h3 { font-size: 15px; font-weight: 600; }
.option h4 { font-size: 13px; font-weight: 400; color: var(--ink2); margin-top: 2px; }
.lbl { color: var(--ink2); font-size: 13px; font-weight: 500; margin: 16px 0 8px; }
/* ── Модалки и тост ─────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 16, 28, .55); display: none; align-items: flex-end; justify-content: center; }
.modal.on { display: flex; }
.box { position: relative; background: var(--card); width: 100%; max-height: 88vh; overflow: auto; border-radius: 24px 24px 0 0; padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); animation: up .3s ease-out; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.box h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; padding-right: 44px; display: flex; align-items: center; gap: 10px; }
.box .sub { color: var(--ink2); font-size: 14px; margin-top: 4px; }
.close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--inset); color: var(--ink2); display: flex; align-items: center; justify-content: center; }
.close .i { width: 16px; height: 16px; }
.box .btn.wide { margin-top: 16px; }
.msg { margin-top: 14px; font-size: 14px; color: var(--ink2); text-align: center; }
.msg.err { color: var(--warn); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(12px); background: var(--toast); color: var(--bg); font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; white-space: nowrap; }
.toast.on { opacity: 1; transform: translateX(-50%); }
/* ── Десктоп ────────────────────────────────────────────────────────────── */
@media (min-width: 820px) {
.brandrow { padding-top: 22px; }
.title-xl { font-size: 40px; }
.keyhead { margin-top: 26px; padding: 14px 18px; }
.keyname { font-size: 16px; }
.keysub { font-size: 14px; }
.sheet { padding: 32px 32px 26px; }
.sheet h1 { font-size: 20px; }
.tiles { grid-template-columns: 1fr 1fr 1fr; }
.tiles.two { grid-template-columns: 1fr 1fr; }
.tile.wide { grid-column: auto; }
.box { width: 460px; border-radius: 24px; padding: 28px 24px 24px; animation: fade .2s ease-out; }
.modal { align-items: center; }
@keyframes fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* ── Мини-приложение: общий каркас макета (поверх rocket-style.css) ── */
:root { --tabbar-h: 50px; --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)); --home-ind: var(--safe-b); }
body { min-height: 100vh; padding: calc(10px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) 0 calc(var(--tabbar-h) + 24px + 12px + var(--safe-b) + 24px); overflow-x: hidden; }
/* Экран-таб */
[data-screen] { display: none; }
[data-screen].on { display: block; }
.lt-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.lt { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; flex: 1; min-width: 0; }
.tbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); flex: none; }
.tbtn .i { width: 18px; height: 18px; }
.tbtn .sun { display: none; }
:root[data-theme="dark"] .tbtn .sun { display: block; }
:root[data-theme="dark"] .tbtn .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbtn .sun { display: block; } :root:not([data-theme="light"]) .tbtn .moon { display: none; } }
/* Сгруппированный список в духе iOS (inset grouped) */
.gh { color: var(--ink2); font-size: 13px; font-weight: 500; margin: 22px 16px 7px; display: flex; align-items: baseline; gap: 8px; }
.gh .link { margin-left: auto; font-size: 13px; }
.gf { color: var(--ink3); font-size: 12.5px; margin: 7px 16px 0; line-height: 1.4; }
.group { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.cell { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 14px; position: relative; width: 100%; border: 0; background: none; text-align: left; color: var(--ink); font-size: 15px; text-decoration: none; }
button.cell:active, a.cell:active { background: var(--inset); }
.cell + .cell::before { content: ''; position: absolute; top: 0; right: 0; left: 56px; height: 1px; background: var(--line); }
.cell.noic + .cell::before, .group.noic .cell + .cell::before { left: 14px; }
.cell .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.cell .ic .i { width: 17px; height: 17px; }
.cell .ic.lte { background: rgba(242, 140, 40, .13); color: var(--lte); }
.cell .ic.ok { background: rgba(47, 181, 111, .13); color: var(--ok); }
.cell .ic.red { background: rgba(224, 68, 63, .11); color: var(--danger); }
.cell .ic.gray { background: var(--inset); color: var(--ink2); }
.cell .tx { flex: 1; min-width: 0; }
.cell .tx b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .tx small { display: block; color: var(--ink2); font-size: 13px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .val { color: var(--ink2); font-size: 15px; white-space: nowrap; }
.cell .val.ok { color: var(--ok); } .cell .val.warn { color: var(--warn); } .cell .val.bad { color: var(--danger); }
.cell .chev { width: 16px; height: 16px; color: var(--ink3); flex: none; }
.cell.act { color: var(--brand); font-weight: 500; }
.cell.act.red { color: var(--danger); }
.cell .tag { font-size: 10.5px; }
/* Метки статуса на светлой поверхности */
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(47, 181, 111, .12); color: var(--ok); white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.warn { background: rgba(242, 140, 40, .13); color: var(--warn); }
.st.bad { background: rgba(224, 68, 63, .11); color: var(--danger); }
.st.gray { background: var(--inset); color: var(--ink2); }
/* Плашка «На экран Домой» — ненавязчивая строка, закрывается навсегда */
.a2hs { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--r-card); padding: 10px 8px 10px 12px; box-shadow: var(--shadow); }
.a2hs .ic { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex: none; }
.a2hs .ic img { width: 100%; height: 100%; display: block; }
.a2hs .tx { flex: 1; min-width: 0; }
.a2hs .tx b { display: block; font-size: 14px; font-weight: 600; }
.a2hs .tx small { display: block; font-size: 12.5px; color: var(--ink2); }
.a2hs .add { border: 0; background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 99px; }
.a2hs .x { border: 0; background: none; color: var(--ink3); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.a2hs .x .i { width: 15px; height: 15px; }
/* Нижний таб-бар в духе iOS: сплошная поверхность, без стекла */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); border-top: 1px solid var(--line); padding-bottom: var(--home-ind); display: grid; grid-template-columns: repeat(4, 1fr); }
.tabbar button { border: 0; background: none; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink3); font-size: 10.5px; font-weight: 500; position: relative; }
.tabbar .i { width: 25px; height: 25px; }
.tabbar button.on { color: var(--brand); font-weight: 600; }
.tabbar .badge { position: absolute; top: 4px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Листы снизу */
.box .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--inset2); margin: -10px auto 12px; }
.box .lbl:first-of-type { margin-top: 18px; }
.box .sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 14px; color: var(--ink2); }
.box .sum b { color: var(--ink); font-size: 15px; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amounts button { border: 2px solid transparent; background: var(--inset); border-radius: 12px; height: 48px; font-size: 15px; font-weight: 600; }
.amounts button.on { border-color: var(--brand); background: var(--card); }
.bigfield { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 40px; font-weight: 700; letter-spacing: -.02em; padding: 14px 0 4px; }
.bigfield small { font-size: 22px; color: var(--ink3); font-weight: 600; }
.mlogo { background: #fff; border-radius: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt { margin-top: 10px; } .mt2 { margin-top: 16px; }
/* Переключатель в духе iOS */
.switch { width: 51px; height: 31px; border-radius: 99px; background: var(--inset2); border: 0; position: relative; flex: none; transition: background var(--t); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform var(--t); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(20px); }
.cell .track { margin-top: 7px; }
.inline-btn { border: 0; background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 99px; white-space: nowrap; }
.inline-btn.primary { background: var(--brand-grad); color: #fff; }
.person { width: 30px; height: 30px; border-radius: 50%; background: var(--inset); color: var(--ink3); display: flex; align-items: center; justify-content: center; flex: none; }
.person .i { width: 16px; height: 16px; }
/* ── Вариант C: ключи стопкой карт (Wallet), круглые быстрые действия ── */
.wallet { margin-top: 2px; }
.wcard { position: relative; height: 212px; border-radius: 20px; padding: 16px 18px; color: #fff; background: var(--top-grad); box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px -12px rgba(20, 30, 50, .45); display: flex; flex-direction: column; cursor: pointer; border: 0; width: 100%; text-align: left; }
.wcard + .wcard { margin-top: -156px; }
.wcard.warm { background: linear-gradient(100deg, #ffb46b 0%, #e27a1c 100%); }
.wcard.gray { background: linear-gradient(100deg, #9aa1b0 0%, #5d6474 100%); }
.wcard.green { background: linear-gradient(100deg, #5fd198 0%, #23945a 100%); }
.wcard .head { display: flex; align-items: center; gap: 10px; }
.wcard .head img { width: 26px; height: 26px; border-radius: 7px; }
.wcard .head .nm { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .head .rt { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.wcard .mid { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wcard .mid small { display: block; font-size: 12px; color: rgba(255, 255, 255, .78); font-weight: 500; }
.wcard .mid b { display: block; font-size: 17px; font-weight: 700; margin-top: 1px; white-space: nowrap; }
.wcard .bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); margin-top: 12px; overflow: hidden; }
.wcard .bar i { display: block; height: 100%; border-radius: 3px; background: #fff; }
.wcard .foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 4px; }
.qa button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.qa .c { width: 54px; height: 54px; border-radius: 50%; background: var(--card); color: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.qa .c .i { width: 23px; height: 23px; }
.qa .c.pri { background: var(--brand-grad); color: #fff; }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .wcard + .wcard { margin-top: 0; }
.carousel .wcard { scroll-snap-align: start; height: 196px; cursor: default; }
.carousel .wcard .big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: auto; }
.carousel .wcard .desc { font-size: 13.5px; color: rgba(255, 255, 255, .88); margin-top: 2px; }
.dotsnav { display: flex; justify-content: center; gap: 6px; margin: 8px 0 0; }
.dotsnav i { width: 7px; height: 7px; border-radius: 50%; background: var(--inset2); }
.dotsnav i.on { background: var(--ink2); }
.cashcard { height: 196px; cursor: default; }
.cashcard .big { font-size: 44px; font-weight: 700; letter-spacing: -.02em; margin-top: auto; line-height: 1.05; }
.cashcard .desc { font-size: 13.5px; color: rgba(255, 255, 255, .88); margin-top: 4px; }
.giftcard { height: auto; min-height: 176px; cursor: default; }
.giftcard .big { font-size: 22px; font-weight: 700; margin-top: 18px; }
.giftcard .desc { font-size: 13.5px; color: rgba(255, 255, 255, .88); margin-top: 2px; }
.giftcard .wbtn { margin-top: 14px; display: inline-flex; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: #fff; color: #2b6fd6; font-size: 15px; font-weight: 600; align-items: center; gap: 8px; align-self: flex-start; }
.giftcard .wbtn .i { width: 18px; height: 18px; }
.promo { display: flex; gap: 8px; padding: 8px; }
.promo .field { flex: 1; padding: 10px 12px; }
.promo .btn { min-height: 48px; }
.a2hs-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--ink2); font-size: 13.5px; }
.a2hs-line .link { font-size: 13.5px; }
.a2hs-line .x { border: 0; background: none; color: var(--ink3); display: flex; }
.a2hs-line .x .i { width: 14px; height: 14px; }
.a2hs-line .i { width: 16px; height: 16px; }
/* ══ Кабинет 01.10: главная — кольца, «Пригласить» — карта дохода; Баланс и Бонусы — вариант C ══ */
/* Цвета долей «куда ушли деньги» — проверены валидатором палитры для обеих тем */
:root { --c-avail: #2fb56f; --c-paid: #2b6fd6; --c-vpn: #f28c28; --earn-grad: linear-gradient(100deg, #229058 0%, #14603a 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-avail: #259a5c; --c-paid: #4a85e6; --c-vpn: #d2711a; } }
:root[data-theme="dark"] { --c-avail: #259a5c; --c-paid: #4a85e6; --c-vpn: #d2711a; }
/* ── Стопка ключей: карта без общей шкалы, лимиты — в кольцах ── */
.wallet { --wh: 136px; } /* 01.10 владелец: меньше пустоты; было 184px */
.wallet .wcard { height: var(--wh); }
.wallet .wcard + .wcard { margin-top: calc(58px - var(--wh)); }
.wcard .head .nm small { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .8); margin-top: 1px; }
.wcard .bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wcard .bottom small { display: block; font-size: 12px; color: rgba(255, 255, 255, .78); font-weight: 500; }
.wcard .bottom b { display: block; font-size: 20px; font-weight: 700; margin-top: 1px; letter-spacing: -.01em; white-space: nowrap; }
.wcard .bottom b em { font-style: normal; font-size: 15px; font-weight: 500; opacity: .85; margin-left: 4px; }
.wcard .bottom .r { text-align: right; }
.wcard .bottom .r b { font-size: 15px; font-weight: 600; }
/* Срочное состояние ключа: истёк или осталось мало дней */
.kalert { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.kalert > .i { width: 20px; height: 20px; color: var(--danger); flex: none; }
.kalert.warn > .i { color: var(--warn); }
.kalert .tx { flex: 1; min-width: 0; }
.kalert .tx b { display: block; font-size: 14px; font-weight: 600; }
.kalert .tx small { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 1px; }
/* Круглые действия: общий вид из варианта C */
.qa.three { grid-template-columns: repeat(3, 1fr); }
.qa button .c .i { pointer-events: none; }
/* ── Лимиты ключа в круглых кнопках: кольцо = остаток ── */
.rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 4px; }
.rg { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 0; }
.rg .ring { position: relative; width: 100%; max-width: 70px; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.rg .arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rg .arc circle { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.rg .in { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rg .in b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.rg .in small { font-size: 10.5px; color: var(--ink2); font-weight: 500; margin-top: 3px; white-space: nowrap; }
.rg .ring > .i { width: 30px; height: 30px; color: var(--brand); }
.rg.pri .ring { background: var(--brand-grad); }
.rg.pri .ring > .i { color: #fff; }
.rg .plus { position: absolute; top: -2px; right: -2px; width: 21px; height: 21px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.rg .plus .i { width: 12px; height: 12px; }
/* Узкие экраны (iPhone SE и уже): кольцо сжимается по колонке, текст внутри — меньше */
@media (max-width: 359px) { .rg .in b { font-size: 16px; } .rg .in small { font-size: 10px; } .rg { font-size: 11.5px; } }
/* ── Пригласить: карты программ. Три зоны: шапка, сумма, подложка с графиком или прогрессом ──
Зелёный темнее прежнего: белый текст на левом крае ≈ 4:1 (было 1,9:1); мелкие подписи — только на тёмной подложке. */
.icard { height: auto; cursor: default; padding: 16px 16px 14px; }
.icard.earn { background: var(--earn-grad); }
.icard .hi { width: 22px; height: 22px; }
.icard .head .nm { font-size: 17px; }
.icard .pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.icard .pill .i { width: 15px; height: 15px; }
.icard .cap { font-size: 14px; color: #fff; font-weight: 500; margin-top: 18px; }
.icard .big { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 2px; }
.icard .panel { margin-top: 16px; border-radius: 14px; background: rgba(0, 0, 0, .18); padding: 12px 12px 10px; }
.icard .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.icard .ph b { color: #fff; font-size: 15px; font-weight: 700; }
.icard .fsegs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 8px; margin-top: 10px; }
.icard .fsegs i { border-radius: 4px; background: rgba(255, 255, 255, .22); }
.icard .fsegs i.on { background: #fff; }
.icard .fsegs i.wait { background: rgba(255, 255, 255, .55); }
.icard .pnote { font-size: 12.5px; color: rgba(255, 255, 255, .9); margin-top: 8px; }
.gf.center { text-align: center; }
.gh .cnt { color: var(--ink3); }
/* Помесячный заработок: одна серия, выбранный месяц подсвечен, касание показывает сумму */
.mchart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 82px; margin-top: 10px; }
.mchart button { border: 0; background: none; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 11.5px; font-weight: 500; font-family: inherit; }
.mchart button i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .42); transition: background var(--t); }
.mchart button.on { color: #fff; font-weight: 700; }
.mchart button.on i { background: #fff; }
/* Куда ушли деньги: доли заработка, подписи значений рядом */
.money { padding: 14px 14px 4px; }
.split { display: flex; gap: 2px; height: 12px; margin: 2px 0 6px; }
.split i { display: block; height: 100%; }
.split i:first-child { border-radius: 6px 0 0 6px; }
.split i:last-child { border-radius: 0 6px 6px 0; }
.money .cell { padding-left: 0; padding-right: 0; min-height: 46px; }
.money .cell + .cell::before { left: 22px; }
.sw { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 0 2px; }
.money .cell .val { color: var(--ink); font-weight: 600; }
/* Воронка ссылки: одна серия, ширина = доля от перешедших */
.funnel { padding: 14px; display: grid; gap: 12px; }
.funnel .fr { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; font-size: 14px; }
.funnel .fr b { font-weight: 600; }
.funnel .fr .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--inset); }
.funnel .fr .bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.funnel .tot { border-top: 1px solid var(--line); padding-top: 12px; font-size: 13.5px; color: var(--ink2); line-height: 1.45; }
.funnel .tot b { color: var(--ink); }
/* Листы LTE и устройств */
.dev .cell { padding-left: 0; padding-right: 0; }
.dev .cell + .cell::before { left: 42px; }
.trash { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(224, 68, 63, .1); color: var(--danger); display: flex; align-items: center; justify-content: center; flex: none; }
.trash .i { width: 18px; height: 18px; }
.box .note { margin-top: 12px; }
.box .linkrow { display: flex; justify-content: center; margin-top: 12px; }
.box .link.red { color: var(--danger); }
/* Карточка-правило программы (из варианта A) */
.hero { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.hero .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.hero .ic .i { width: 21px; height: 21px; }
.hero b { display: block; font-size: 16px; font-weight: 600; }
.hero p { color: var(--ink2); font-size: 13.5px; margin-top: 2px; }
.pad { padding: 0 14px 14px; }
.funnel .tot b, .gf .nw { white-space: nowrap; }
.qa + .gf { margin-top: 12px; }
/* ── Анимация смены ключа: карты переезжают на свои места, кольца дорисовываются, числа досчитывают ── */
.wallet .wcard { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; will-change: transform; }
.wallet .wcard.lift { box-shadow: 0 18px 36px -14px rgba(20, 30, 50, .55); }
.rg .arc circle { transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1); }
.swap-in { animation: swapIn .35s ease both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.wallet .wcard, .rg .arc circle { transition: none; }
.swap-in { animation: none; }
}
/* ══ Нижняя навигация: плавающая капсула «жидкое стекло» (вариант L1 макета, значения владельца) ══ */
.tabbar .ti { display: flex; align-items: center; justify-content: center; }
.tabbar .ind { display: none; }
.tabbar button { font-family: inherit; }
/* ── «Жидкое стекло» в духе iOS 26. Прозрачная панель над контентом: размытие и насыщенность фона,
блик сверху, светлая кромка; капля выделения едет с упругим перелётом и растягивается в пути.
В Chromium (Android, Telegram Desktop) поверх — преломление по краю (SVG-карта смещения, html.lg-lens);
в WebKit (iOS) — без преломления. «Уменьшить прозрачность» в системе — сплошная панель.
Все величины — переменные --lg-* (подобраны владельцем в настройщике макета 01.10).
Панель и капля — полные капсулы: радиус капли = радиус панели − отступ 6px, скругления концентричны ── */
:root { --lg-tint: .2; --lg-blur: 8px; --lg-sat: 1.8; --lg-bright: 1.12; --lg-ink: .8; --lg-weight: 600; --lg-size: 11px; --lg-stroke: 2.1; --lg-halo: .6; --lg-drop: .72; /* значения владельца из настройщика, 01.10 */
/* Тёмная тема — свои значения: стекло затемняет и приглушает фон, а не высветляет его, иначе цветные карты под панелью «кислотят» */
--lg-tint-d: .58; --lg-sat-d: 1.15; --lg-bright-d: .8; --lg-ink-d: .72; --lg-halo-d: 0; --lg-drop-d: .14; }
/* Итоговые значения стекла по теме: панель и капля берут только --lgc-* */
:root {
--lgc-bg: rgba(255, 255, 255, var(--lg-tint)); --lgc-sat: var(--lg-sat); --lgc-bright: var(--lg-bright); --lgc-ink: var(--lg-ink); --lgc-text: var(--ink);
--lgc-halo: rgba(255, 255, 255, var(--lg-halo)); --lgc-on: var(--brand); --lgc-drop: rgba(255, 255, 255, var(--lg-drop));
--lgc-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .45), inset -1px 0 0 rgba(255, 255, 255, .45), 0 14px 32px -14px rgba(20, 30, 50, .4), 0 1px 3px rgba(20, 30, 50, .08);
--lgc-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .16) 100%);
--lgc-drop-rim: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(20, 30, 50, .22);
}
:root[data-theme="dark"] {
--lgc-bg: rgba(20, 24, 33, var(--lg-tint-d)); --lgc-sat: var(--lg-sat-d); --lgc-bright: var(--lg-bright-d); --lgc-ink: var(--lg-ink-d); --lgc-text: #f2f5fa;
--lgc-halo: rgba(8, 10, 16, var(--lg-halo-d)); --lgc-on: #9cc2ff; --lgc-drop: rgba(255, 255, 255, var(--lg-drop-d));
--lgc-rim: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 32px -12px rgba(0, 0, 0, .7);
--lgc-sheen: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 60%);
--lgc-drop-rim: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--lgc-bg: rgba(20, 24, 33, var(--lg-tint-d)); --lgc-sat: var(--lg-sat-d); --lgc-bright: var(--lg-bright-d); --lgc-ink: var(--lg-ink-d); --lgc-text: #f2f5fa;
--lgc-halo: rgba(8, 10, 16, var(--lg-halo-d)); --lgc-on: #9cc2ff; --lgc-drop: rgba(255, 255, 255, var(--lg-drop-d));
--lgc-rim: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 32px -12px rgba(0, 0, 0, .7);
--lgc-sheen: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 60%);
--lgc-drop-rim: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
}
/* Толщина линий иконок: правило на символах спрайта, значение наследуется через