/* «Шёлк + Обсидиан» — новый вид панели (выбор владельца 12.11.2026; каркас — «Ровный лист», 11.11.2026). Светлая — «Шёлк»: матовое стекло над мягким цветным светом; тёмная — «Обсидиан»: тёмная сцена со светом цвета кабинета. Стекло — на раме и витринах (меню, шапка, герой, «Для собственника», графики, подсказки); таблицы, формы, чат — на плотной поверхности. Итоговая тема для материалов — html[data-scheme] (ставит theme.js с учётом «как в системе»); слой материалов — в конце файла. Действует только при (ставит theme.js). Старые стили app.css не переписываются: правила компонентов — через :where([data-ui="2"]), специфичность как у исходного класса, модификаторы продолжают работать. Тема: data-theme = light | dark | нет (как в системе). Плотность: data-density = comfort | compact. Меню: data-nav = full | mini. Акцент кабинета: data-cab (ozon_4 ЕВИСК — по умолчанию, ozon_7 Broomberg, ozon_9 AkiVika). */ /* ================= Шрифт (часть Б, 11.11.2026): Inter, вариативный, OFL 1.1 — выбор владельца ================= Файлы — fonts/, диапазоны — дословно из пакета Fontsource (inter-wght.css). Знак ₽ (U+20BD) лежит в latin-ext — подключён. */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.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; } /* ================= Токены: светлая — «Шёлк» (12.11.2026) ================= Тёплый фон с мягким цветным светом (акцент кабинета + персик), матовое стекло на раме и витринах, плотные белые поверхности под таблицами, формами и длинным текстом. */ :root[data-ui="2"] { color-scheme: light; --bg: #F3ECE5; --bg-glow: #F3ECE5; --bg-glow-2: #F3ECE5; --surface: #FFFFFF; /* плотная поверхность: таблицы, формы, чат, всплывающее */ --surface-2: #FBF7F3; --surface-3: #F3ECE6; --pop: #FFFFFF; --border: #ECE3DA; --border-strong: #DACEC3; --control-border: #8A7D73; /* ≥ 3:1 к белому и к стеклу */ --zebra: #FFFFFF; --hover: #FAF4EE; --text: #221B17; --text-2: #4C433D; --muted: #5C524B; /* ≥ 4,5:1 и на стекле над самым ярким пятном света */ --card-edge: inset 0 0 0 1px var(--border); --font: "Inter Variable", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font); --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-soft: cubic-bezier(.2, .8, .2, 1); --accent: #0E7470; --accent-hover: #0A5C59; --accent-2: #2BA494; /* светлый спутник акцента — градиенты, подложки значков */ --accent-deep: #0B4F4B; /* текст на шёлковой подложке */ --accent-soft: #E0F1EE; --accent-line: #A7D8D1; --on-accent: #FFFFFF; --focus: var(--accent); --warm-light: #F4BF98; /* персиковый свет */ --green: #1E7A4C; --green-soft: #E4F3EA; --green-line: #BFE0CC; --green-mark: #2E9A63; --amber: #85500A; --amber-soft: #FDF0D8; --amber-line: #EBD3A0; --amber-mark: #B07A16; --red: #B03A2A; --red-soft: #FBE9E5; --red-line: #F0C4BB; --red-mark: #D0523E; --on-red: #FFFFFF; --info: #44403C; --info-soft: #F1ECE7; --info-line: #DCD3CA; --gray: #625A54; --gray-soft: #F1ECE7; --gray-line: #DDD4CB; --gray-mark: #9A8F86; --pos: #1F7A4E; --neg: #B8402F; --warm: #B07A16; --warm-soft: #FDF0D8; --warm-line: #EBD3A0; --warm-text: #85500A; --violet: #5B4A9E; --violet-soft: #EEEBF7; /* стекло */ --glass: rgb(255 251 247 / 0.58); --glass-hi: rgb(255 255 255 / 0.78); --glass-edge: rgb(255 255 255 / 0.85); --glass-tile: rgb(255 252 249 / 0.72); /* плитки и строки: без размытия */ --glass-blur: blur(24px) saturate(170%); --sheen: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(255 255 255 / 0.3); --shadow-glass: 0 28px 56px -30px rgb(96 62 38 / 0.28), 0 2px 6px rgb(96 62 38 / 0.05); --shadow-tile: 0 16px 32px -24px rgb(96 62 38 / 0.32), 0 1px 2px rgb(96 62 38 / 0.05); --sheet: #FFFFFF; /* плотный лист внутри стеклянной рамы */ --sheet-rim: rgb(255 255 255 / 0.5); --grid-line: rgb(98 87 79 / 0.13); --tip-bg: #221B17; --tip-text: #FFFFFF; --shadow-sm: 0 0 #0000; --shadow: 0 0 #0000; --shadow-pop: 0 24px 48px -20px rgb(70 44 26 / 0.32), 0 2px 8px rgb(70 44 26 / 0.08); --shadow-lg: var(--shadow-pop); --backdrop: rgb(40 28 20 / 0.36); --radius-xs: 8px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 26px; /* плотность «Удобно» */ --topbar-h: 60px; --cell-py: 10px; --cell-px: 12px; --t-fs: 14px; --t-lh: 20px; --tile-p: 16px 18px; --tile-num: 30px; --tile-gap: 16px; --main-py: 22px; --main-px: 28px; --ctl-h: 38px; --tag-fs: 13px; --nav-w: 236px; --gap-xl: 18px; } :root[data-ui="2"][data-density="compact"] { --topbar-h: 52px; --cell-py: 5px; --cell-px: 10px; --t-fs: 13px; --t-lh: 18px; --tile-p: 12px 14px; --tile-num: 25px; --tile-gap: 12px; --main-py: 16px; --main-px: 20px; --ctl-h: 32px; --tag-fs: 13px; --gap-xl: 14px; } :root[data-ui="2"][data-nav="mini"] { --nav-w: 76px; } /* акцент кабинета, светлая */ :root[data-ui="2"][data-cab="ozon_7"] { --accent: #33479E; --accent-hover: #283A85; --accent-2: #6F86E0; --accent-deep: #1E2C6B; --accent-soft: #E8ECFA; --accent-line: #BCC5EC; --on-accent: #FFFFFF; } :root[data-ui="2"][data-cab="ozon_9"] { --accent: #7A3E8F; --accent-hover: #64307A; --accent-2: #B57BCB; --accent-deep: #4D2160; --accent-soft: #F4E9F7; --accent-line: #DCC1E5; --on-accent: #FFFFFF; } /* ================= Токены: тёмная — «Обсидиан» (выбрана вручную) ================= Глубокая тонированная сцена, свет цвета кабинета снизу и сверху, кромка-блик на поверхностях, зерно. */ :root[data-ui="2"][data-theme="dark"] { color-scheme: dark; --bg: #06080A; --bg-glow: #06080A; --bg-glow-2: #06080A; --surface: #10151A; --surface-2: #151B21; --surface-3: #1C232A; --pop: #182027; --border: rgb(255 255 255 / 0.08); --border-strong: rgb(255 255 255 / 0.15); --control-border: #6E7A85; --card-edge: inset 0 0 0 1px var(--border), inset 0 1px 0 rgb(255 255 255 / 0.05); --zebra: #10151A; --hover: #18202A; --text: #F1F4F6; --text-2: #B6BEC7; --muted: #929CA6; --accent: #2FD3C4; --accent-hover: #7FF3E6; --accent-2: #7FF3E6; --accent-deep: #04201D; --accent-soft: #0F2C2A; --accent-line: #1F5A55; --on-accent: #04201D; --warm-light: #F4BC5C; --green: #7FE0B5; --green-soft: #0F2A1E; --green-line: #1F4A32; --green-mark: #49E0A0; --amber: #F4C46A; --amber-soft: #2B2210; --amber-line: #4A3B18; --amber-mark: #F4BC5C; --red: #FF9A91; --red-soft: #33191A; --red-line: #5A2A28; --red-mark: #FF7A72; --on-red: #2A0D0A; --info: #B9C1C8; --info-soft: #1B2228; --info-line: #313B44; --gray: #9AA3AC; --gray-soft: #1B2228; --gray-line: #36414B; --gray-mark: #7C858F; --pos: #5FE0A8; --neg: #FF8F7F; --warm: #F4BC5C; --warm-soft: #2B2210; --warm-line: #4A3B18; --warm-text: #F4C46A; --violet: #B8A6F5; --violet-soft: #241F3D; --glass: rgb(16 21 26 / 0.66); --glass-hi: rgb(24 30 36 / 0.74); --glass-edge: rgb(255 255 255 / 0.07); --glass-tile: rgb(17 22 27 / 0.82); --glass-blur: blur(22px) saturate(140%); --sheen: inset 0 1px 0 rgb(255 255 255 / 0.075); --shadow-glass: 0 30px 60px -30px rgb(0 0 0 / 0.9); --shadow-tile: 0 24px 48px -28px rgb(0 0 0 / 0.9); --sheet: #0E1317; --sheet-rim: rgb(255 255 255 / 0.035); --grid-line: rgb(255 255 255 / 0.06); --tip-bg: #E6ECEF; --tip-text: #0B0F12; --shadow-pop: 0 24px 48px -16px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.07); --backdrop: rgb(0 0 0 / 0.62); } :root[data-ui="2"][data-cab="ozon_7"][data-theme="dark"] { --accent: #8FA3FF; --accent-hover: #C3CEFF; --accent-2: #C3CEFF; --accent-deep: #0D1330; --accent-soft: #19203F; --accent-line: #34407A; --on-accent: #0D1330; } :root[data-ui="2"][data-cab="ozon_9"][data-theme="dark"] { --accent: #DA9CEF; --accent-hover: #F0CCFA; --accent-2: #F0CCFA; --accent-deep: #24102B; --accent-soft: #2B1A33; --accent-line: #573866; --on-accent: #24102B; } /* ================= Токены: тёмная (как в системе) — те же значения ================= */ @media (prefers-color-scheme: dark) { :root[data-ui="2"]:not([data-theme="light"]) { color-scheme: dark; --bg: #06080A; --bg-glow: #06080A; --bg-glow-2: #06080A; --surface: #10151A; --surface-2: #151B21; --surface-3: #1C232A; --pop: #182027; --border: rgb(255 255 255 / 0.08); --border-strong: rgb(255 255 255 / 0.15); --control-border: #6E7A85; --card-edge: inset 0 0 0 1px var(--border), inset 0 1px 0 rgb(255 255 255 / 0.05); --zebra: #10151A; --hover: #18202A; --text: #F1F4F6; --text-2: #B6BEC7; --muted: #929CA6; --accent: #2FD3C4; --accent-hover: #7FF3E6; --accent-2: #7FF3E6; --accent-deep: #04201D; --accent-soft: #0F2C2A; --accent-line: #1F5A55; --on-accent: #04201D; --warm-light: #F4BC5C; --green: #7FE0B5; --green-soft: #0F2A1E; --green-line: #1F4A32; --green-mark: #49E0A0; --amber: #F4C46A; --amber-soft: #2B2210; --amber-line: #4A3B18; --amber-mark: #F4BC5C; --red: #FF9A91; --red-soft: #33191A; --red-line: #5A2A28; --red-mark: #FF7A72; --on-red: #2A0D0A; --info: #B9C1C8; --info-soft: #1B2228; --info-line: #313B44; --gray: #9AA3AC; --gray-soft: #1B2228; --gray-line: #36414B; --gray-mark: #7C858F; --pos: #5FE0A8; --neg: #FF8F7F; --warm: #F4BC5C; --warm-soft: #2B2210; --warm-line: #4A3B18; --warm-text: #F4C46A; --violet: #B8A6F5; --violet-soft: #241F3D; --glass: rgb(16 21 26 / 0.66); --glass-hi: rgb(24 30 36 / 0.74); --glass-edge: rgb(255 255 255 / 0.07); --glass-tile: rgb(17 22 27 / 0.82); --glass-blur: blur(22px) saturate(140%); --sheen: inset 0 1px 0 rgb(255 255 255 / 0.075); --shadow-glass: 0 30px 60px -30px rgb(0 0 0 / 0.9); --shadow-tile: 0 24px 48px -28px rgb(0 0 0 / 0.9); --sheet: #0E1317; --sheet-rim: rgb(255 255 255 / 0.035); --grid-line: rgb(255 255 255 / 0.06); --tip-bg: #E6ECEF; --tip-text: #0B0F12; --shadow-pop: 0 24px 48px -16px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.07); --backdrop: rgb(0 0 0 / 0.62); } :root[data-ui="2"][data-cab="ozon_7"]:not([data-theme="light"]) { --accent: #8FA3FF; --accent-hover: #C3CEFF; --accent-2: #C3CEFF; --accent-deep: #0D1330; --accent-soft: #19203F; --accent-line: #34407A; --on-accent: #0D1330; } :root[data-ui="2"][data-cab="ozon_9"]:not([data-theme="light"]) { --accent: #DA9CEF; --accent-hover: #F0CCFA; --accent-2: #F0CCFA; --accent-deep: #24102B; --accent-soft: #2B1A33; --accent-line: #573866; --on-accent: #24102B; } } /* ================= База ================= */ :where([data-ui="2"]) body { background: var(--bg); background-attachment: scroll; font-size: 15px; line-height: 1.5; } :where([data-ui="2"]) h1, :where([data-ui="2"]) h2, :where([data-ui="2"]) h3, :where([data-ui="2"]) h4 { letter-spacing: 0; } :where([data-ui="2"]) .pos { color: var(--pos); } :where([data-ui="2"]) .neg { color: var(--neg); } :where([data-ui="2"]) .na { font-size: 13px; } :where([data-ui="2"]) .mono { font-size: max(13px, 0.86em); } :where([data-ui="2"]) .ui-btn-k { color: var(--muted); font-weight: 500; } html:not([data-ui="2"]) .ui-btn, html:not([data-ui="2"]) .nav-collapse { display: none; } /* ---------- Кнопки ---------- */ :where([data-ui="2"]) .btn { min-height: var(--ctl-h); padding: 6px 14px; gap: 6px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: none; transition: background-color .12s, border-color .12s, color .12s; } :where([data-ui="2"]) .btn:hover { background: var(--hover); border-color: var(--accent); color: var(--text); } :where([data-ui="2"]) .btn:active { transform: none; } :where([data-ui="2"]) .btn-sm { min-height: var(--ctl-h); padding: 4px 12px; font-size: 14px; } :where([data-ui="2"]) .btn-lg { min-height: 44px; padding: 9px 20px; font-size: 15px; border-radius: 8px; } :where([data-ui="2"]) .btn-icon { width: var(--ctl-h); min-height: var(--ctl-h); padding: 0; } :where([data-ui="2"]) .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } :where([data-ui="2"]) .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } :where([data-ui="2"]) .btn-danger { color: var(--red); border-color: var(--red-mark); } :where([data-ui="2"]) .btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } :where([data-ui="2"]) .btn-quiet { border-color: transparent; background: transparent; } :where([data-ui="2"]) .btn-quiet:hover { background: var(--hover); border-color: transparent; } :where([data-ui="2"]) .btn-ghost { background: transparent; } :where([data-ui="2"]) .btn-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent); } :where([data-ui="2"]) .btn-soft:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } :where([data-ui="2"]) .btn-link { font-weight: 500; } :where([data-ui="2"]) .btn-price { font-size: 13px; } :where([data-ui="2"]) .btn .ic { width: 17px; height: 17px; } /* ---------- Поля ---------- */ :where([data-ui="2"]) input[type="text"], :where([data-ui="2"]) input[type="password"], :where([data-ui="2"]) input[type="search"], :where([data-ui="2"]) input[type="date"], :where([data-ui="2"]) input[type="number"], :where([data-ui="2"]) input:not([type]), :where([data-ui="2"]) select, :where([data-ui="2"]) textarea { min-height: var(--ctl-h); padding: 6px 10px; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; box-shadow: none; } :where([data-ui="2"]) input:hover, :where([data-ui="2"]) select:hover, :where([data-ui="2"]) textarea:hover { border-color: var(--accent); } :where([data-ui="2"]) input:focus-visible, :where([data-ui="2"]) select:focus-visible, :where([data-ui="2"]) textarea:focus-visible, :where([data-ui="2"]) button:focus-visible, :where([data-ui="2"]) a:focus-visible, :where([data-ui="2"]) summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; } :where([data-ui="2"]) input:focus-visible, :where([data-ui="2"]) select:focus-visible, :where([data-ui="2"]) textarea:focus-visible { border-color: var(--accent); } :where([data-ui="2"]) .dt-q, :where([data-ui="2"]) .mem-form input, :where([data-ui="2"]) .own-q textarea, :where([data-ui="2"]) .own-q input[type=text], :where([data-ui="2"]) .xb-text, :where([data-ui="2"]) .pm-cg select, :where([data-ui="2"]) .text-dlg textarea { border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); min-height: var(--ctl-h); } /* отступы под значок и кнопку «Показать» — общее правило полей выше их перебивает */ :where([data-ui="2"]) .input-ic input { padding-left: 34px; } :where([data-ui="2"]) .pw-wrap input { padding-right: 92px; } :where([data-ui="2"]) .field > label, :where([data-ui="2"]) .field-label { font-size: 13px; font-weight: 600; color: var(--text-2); } :where([data-ui="2"]) .field-help { font-size: 13px; } :where([data-ui="2"]) .checkbox { font-size: 14px; } :where([data-ui="2"]) .warn-box { border-radius: 8px; } :where([data-ui="2"]) .funnel { padding: 16px; } :where([data-ui="2"]) .funnel h3 { font-weight: 600; } :where([data-ui="2"]) .funnel-form { border-radius: 8px; } /* ---------- Метки, фильтры, счётчики ---------- */ :where([data-ui="2"]) .tag { padding: 1px 7px; border-radius: 6px; font-size: var(--tag-fs); font-weight: 600; line-height: 1.45; } :where([data-ui="2"]) .tag-warm { background: var(--amber-soft); color: var(--amber); } :where([data-ui="2"]) .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: none; } :where([data-ui="2"]) .chip:hover { background: var(--hover); border-color: var(--accent); box-shadow: none; } :where([data-ui="2"]) .chip:active { transform: none; } :where([data-ui="2"]) .chip .ic { color: var(--muted); } :where([data-ui="2"]) .chip.is-on { background: var(--red-soft); border-color: var(--red-mark); color: var(--red); } :where([data-ui="2"]) .pz-presets .chip.is-on, :where([data-ui="2"]) .pm-filters .chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } :where([data-ui="2"]) .count { height: 20px; min-width: 22px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 600; vertical-align: 1px; } :where([data-ui="2"]) .badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .badge-red { box-shadow: none; } :where([data-ui="2"]) .badge-red-soft { box-shadow: inset 0 0 0 1px var(--red-line); } :where([data-ui="2"]) .mock-tag { font-size: 13px; font-weight: 600; letter-spacing: 0; border-radius: 6px; } :where([data-ui="2"]) .dt-count { font-size: 13px; } /* ---------- Шапка сайта ---------- */ :where([data-ui="2"]) .topbar { height: var(--topbar-h); padding: 0 16px; gap: 8px; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); box-shadow: none; } :where([data-ui="2"]) .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--on-accent); box-shadow: none; } :where([data-ui="2"]) .brand-mark .ic, :where([data-ui="2"]) .brand-mark svg { width: 18px; height: 18px; } :where([data-ui="2"]) .brand-mark-lg { width: 44px; height: 44px; border-radius: 10px; } :where([data-ui="2"]) .brand-mark-lg svg { width: 26px; height: 26px; } :where([data-ui="2"]) .brand-name { font-family: var(--font); font-size: 16px; font-weight: 650; letter-spacing: 0; } :where([data-ui="2"]) .brand-sub { font-size: 13px; } :where([data-ui="2"]) .user-chip { padding: 2px 10px 2px 2px; background: transparent; font-weight: 500; } :where([data-ui="2"]) .topbar .btn { color: var(--text-2); } :where([data-ui="2"]) .topbar .btn:hover { color: var(--text); } /* группы шапки: вид (тема, плотность) | действие (обновить) | пользователь; подпись «Тема:» прячется только на узком экране */ :where([data-ui="2"]) .topbar .btn-refresh { margin-left: 8px; } :where([data-ui="2"]) .topbar .user-chip { margin-left: 4px; } @media (max-width: 1023px) { :where([data-ui="2"]) .ui-btn-k { display: none; } } @media (max-width: 560px) { :where([data-ui="2"]) .topbar .btn-refresh, :where([data-ui="2"]) .topbar .user-chip { margin-left: 0; } } /* ---------- Каркас и меню ---------- */ :where([data-ui="2"]) .app { grid-template-columns: var(--nav-w) minmax(0, 1fr); } /* А2: меню тише содержимого — фон страницы, без своей рамки; «где я» — белая поверхность с границей и значок акцентом */ :where([data-ui="2"]) .sidenav { padding: 10px 10px 8px; background: var(--bg); border-right: 0; } :where([data-ui="2"]) .nav-list { gap: 1px; } :where([data-ui="2"]) .nav-link { position: relative; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; box-shadow: none; transition: background-color .12s ease-out, color .12s ease-out; } :where([data-ui="2"]) .nav-link .ic { width: 18px; height: 18px; color: var(--text-2); opacity: .7; transition: opacity .12s ease-out, color .12s ease-out; } :where([data-ui="2"]) .nav-link:hover { background: color-mix(in oklch, var(--text) 5%, transparent); color: var(--text); } :where([data-ui="2"]) .nav-link:hover .ic { color: var(--text); opacity: .9; } :where([data-ui="2"]) .nav-link[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--card-edge); } :where([data-ui="2"]) .nav-link[aria-current="page"] .ic { color: var(--accent); opacity: 1; } :where([data-ui="2"]) .nav-link .badge-accent { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .nav-sub { margin: 2px 0 4px; padding: 0 0 0 28px; } :where([data-ui="2"]) .nav-sub a { position: relative; display: flex; align-items: center; min-height: 32px; padding: 4px 10px 4px 16px; border-radius: 8px; color: var(--text-2); font-size: 14px; transition: background-color .12s ease-out, color .12s ease-out; } :where([data-ui="2"]) .nav-sub a:hover { background: color-mix(in oklch, var(--text) 5%, transparent); color: var(--text); } :where([data-ui="2"]) .nav-sub a[aria-current] { background: none; color: var(--text); font-weight: 600; box-shadow: none; } :where([data-ui="2"]) .nav-sub a[aria-current]::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); } :where([data-ui="2"]) .nav-foot { padding: 12px 6px 4px; } :where([data-ui="2"]) .nav-user-name { font-weight: 600; } :where([data-ui="2"]) .nav-user-sub { font-size: 13px; } :where([data-ui="2"]) .nav-collapse { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin-top: 6px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } :where([data-ui="2"]) .nav-foot:empty + .nav-collapse { margin-top: auto; } :where([data-ui="2"]) .nav-collapse:hover { background: var(--hover); color: var(--text); } :where([data-ui="2"]) .nav-collapse .ic { width: 19px; height: 19px; } :where([data-ui="2"][data-nav="mini"]) .nav-collapse .ic { transform: scaleX(-1); } @media (min-width: 861px) { :where([data-ui="2"][data-nav="mini"]) .sidenav { padding: 12px 8px; } :where([data-ui="2"][data-nav="mini"]) .nav-link, :where([data-ui="2"][data-nav="mini"]) .nav-collapse { justify-content: center; padding: 8px 0; gap: 0; } /* название пункта: скрыто, видно подсказкой при наведении и фокусе (position: fixed — не обрезается прокруткой меню) */ :where([data-ui="2"][data-nav="mini"]) .nav-link .nav-label, :where([data-ui="2"][data-nav="mini"]) .nav-collapse .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :where([data-ui="2"][data-nav="mini"]) .nav-link:is(:hover, :focus-visible) .nav-label, :where([data-ui="2"][data-nav="mini"]) .nav-collapse:is(:hover, :focus-visible) .nav-label { position: fixed; left: 66px; z-index: 40; width: auto; height: auto; overflow: visible; clip: auto; padding: 5px 10px; border-radius: 6px; background: var(--pop); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); pointer-events: none; animation: ui2-pop .16s var(--ease-out) both; } /* счётчик — в правом верхнем углу значка, с вырезом цветом фона: значок под ним читается */ :where([data-ui="2"][data-nav="mini"]) .nav-link .badge { position: absolute; top: -1px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 4px; font-size: 13px; line-height: 18px; box-shadow: 0 0 0 2px var(--bg); } :where([data-ui="2"][data-nav="mini"]) .nav-link[aria-current="page"] .badge { box-shadow: 0 0 0 2px var(--surface); } /* нейтральный счётчик без подписи рядом терялся на фоне меню — в узком меню он тёмный (по-прежнему не акцентный) */ :where([data-ui="2"][data-nav="mini"]) .nav-link .badge-accent { background: var(--text-2); color: var(--surface); } :where([data-ui="2"][data-nav="mini"]) .nav-sub { display: none; } :where([data-ui="2"][data-nav="mini"]) .nav-foot { justify-content: center; padding: 10px 0 4px; } :where([data-ui="2"][data-nav="mini"]) .nav-foot > span:last-child { display: none; } } @media (max-width: 860px) { :where([data-ui="2"]) .app { grid-template-columns: minmax(0, 1fr); } :where([data-ui="2"]) .nav-collapse { display: none; } :where([data-ui="2"]) .sidenav { box-shadow: var(--shadow-pop); } :where([data-ui="2"]) .nav-link { min-height: 44px; } :where([data-ui="2"]) .nav-sub a { min-height: 40px; } } :where([data-ui="2"]) .main { padding: var(--main-py) var(--main-px) 140px; } /* 140 — выше маскота полного размера (8 + 118 px) */ :where([data-ui="2"]) .main:has(#chat-root) { padding-bottom: 16px; } :where([data-ui="2"]) .screen-enter { animation-duration: .12s; } /* ---------- Заголовок экрана ---------- */ :where([data-ui="2"]) .screen-head { margin-bottom: 10px; gap: 6px 24px; align-items: flex-end; } :where([data-ui="2"]) .sh-icon { display: none; } :where([data-ui="2"]) .sh-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; } :where([data-ui="2"]) .screen-head h1, :where([data-ui="2"]) .hero h1 { font-family: var(--font); font-size: 26px; font-weight: 650; letter-spacing: -0.005em; line-height: 1.2; } :where([data-ui="2"]) .subtitle { margin: 0; color: var(--muted); font-size: 14px; max-width: 72ch; text-wrap: pretty; } :where([data-ui="2"]) .owner { padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--muted); font-size: 13px; } :where([data-ui="2"]) .owner .avatar { display: none; } :where([data-ui="2"]) .owner strong { font-weight: 600; color: var(--text-2); } :where([data-ui="2"]) .eyebrow { color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0; } /* Источники */ :where([data-ui="2"]) .sources { font-size: 13px; margin-bottom: 18px; } :where([data-ui="2"]) .sources-title { font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .src { border-radius: 6px; background: var(--surface); } /* ---------- Блоки ---------- */ :where([data-ui="2"]) .block { margin-bottom: 28px; } :where([data-ui="2"]) .block h2 { font-family: var(--font); font-size: 20px; font-weight: 600; letter-spacing: 0; } :where([data-ui="2"]) .block h3, :where([data-ui="2"]) .rs-sub h3 { font-size: 17px; font-weight: 600; } :where([data-ui="2"]) .block-note, :where([data-ui="2"]) .fold-note { font-size: 13px; } :where([data-ui="2"]) .tiles-title { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .notice { border-radius: 10px; } /* строка текста — не шире 72 знаков; блок-раскладка внутри .notice (варианты в «Вопросах») — во всю ширину */ :where([data-ui="2"]) .notice:not(:has(> div, table, ul, dl)) { max-width: 72ch; } :where([data-ui="2"]) .error-box { border-radius: 10px; box-shadow: inset 3px 0 0 var(--red-mark), var(--card-edge); } :where([data-ui="2"]) .is-target { border-radius: 10px; } :where([data-ui="2"]) .empty { border-radius: 10px; background: var(--surface); } :where([data-ui="2"]) .empty::before { width: 72px; height: 52px; background: var(--border-strong); opacity: 1; } :where([data-ui="2"]) .empty .empty-sub { font-size: 14px; } :where([data-ui="2"]) .skel { border-radius: 8px; } :where([data-ui="2"]) .skel-tile, :where([data-ui="2"]) .skel-block { border-radius: 10px; } :where([data-ui="2"]) details.about-wrap > summary, :where([data-ui="2"]) details.fold > summary { min-height: 32px; } /* ---------- «Сегодня»: приветствие ---------- */ :where([data-ui="2"]) .hero { display: block; margin-bottom: 18px; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } :where([data-ui="2"]) .hero-art { display: none; } :where([data-ui="2"]) .hero .eyebrow { margin-bottom: 4px; } :where([data-ui="2"]) .hero-summary { margin: 4px 0 8px; font-size: 15px; color: var(--text-2); max-width: 72ch; } :where([data-ui="2"]) .hero-pills { gap: 4px 22px; } :where([data-ui="2"]) .pill { padding: 2px 0; border-radius: 0; background: none; box-shadow: none; color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } :where([data-ui="2"]) .pill:hover { color: var(--accent-hover); box-shadow: none; text-decoration-color: currentColor; } :where([data-ui="2"]) .pill .ic { width: 16px; height: 16px; } :where([data-ui="2"]) .pill-green .ic { color: var(--green-mark); } :where([data-ui="2"]) .pill-gray .ic { color: var(--muted); } :where([data-ui="2"]) .pill-red { background: none; box-shadow: none; color: var(--red); } :where([data-ui="2"]) .pill-amber { background: none; box-shadow: none; color: var(--amber); } :where([data-ui="2"]) .pill-accent { background: none; box-shadow: none; color: var(--accent); font-weight: 650; } :where([data-ui="2"]) .pill-accent:hover { background: none; color: var(--accent-hover); } /* ---------- Плитки ---------- */ :where([data-ui="2"]) .kpis { gap: var(--tile-gap); } :where([data-ui="2"]) .kpi { padding: var(--tile-p); border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .kpi.tone-red, :where([data-ui="2"]) .kpi.tone-amber, :where([data-ui="2"]) .kpi.tone-green { box-shadow: var(--card-edge); } :where([data-ui="2"]) a.kpi-link:hover { box-shadow: inset 0 0 0 1px var(--accent); } :where([data-ui="2"]) .kpi-ic { display: none; } :where([data-ui="2"]) .kpi-label { min-height: calc(2 * 1.3em); font-size: 13px; font-weight: 500; color: var(--text-2); line-height: 1.3; } /* А3: крупное спокойное число; единица (₽, %, шт, млн) — 0,7 от числа, серым */ :where([data-ui="2"]) .kpi-value { margin-top: 6px; font-family: var(--font-display); font-size: var(--tile-num); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; } :where([data-ui="2"]) .kpi-unit, :where([data-ui="2"]) .kpi-cur { font-size: 0.7em; font-weight: 500; letter-spacing: 0; color: var(--text-2); } :where([data-ui="2"]) .kpi.tone-red .kpi-cur, :where([data-ui="2"]) .kpi.tone-red .kpi-unit { color: inherit; } :where([data-ui="2"]) .kpi-sub { margin-top: 4px; font-size: 13px; color: var(--muted); } :where([data-ui="2"]) .trend { margin-top: 6px; font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .trend .ic { padding: 0; background: none; } :where([data-ui="2"]) .trend-up { color: var(--pos); } :where([data-ui="2"]) .trend-down { color: var(--neg); } :where([data-ui="2"]) .trend-up .ic, :where([data-ui="2"]) .trend-down .ic, :where([data-ui="2"]) .trend-flat .ic { background: none; } :where([data-ui="2"]) .trend-note { font-weight: 400; color: var(--muted); } /* А4: мини-график — HTML-столбики (sparkline в app.js), 28 px, без осей; последние дни — акцентом, остальное — серым */ :where([data-ui="2"]) .spark { padding-top: 10px; } :where([data-ui="2"]) .spark-h { display: flex; align-items: flex-end; gap: 2px; height: 38px; box-sizing: border-box; } :where([data-ui="2"]) .sp-b { flex: 1 1 0; min-width: 0; max-width: 12px; border-radius: 2px 2px 0 0; background: color-mix(in oklch, var(--text-2) 30%, transparent); } :where([data-ui="2"]) .sp-b.sp-on { background: var(--accent); } :where([data-ui="2"]) .sp-b.sp-zero { height: 2px; border-radius: 1px; background: color-mix(in oklch, var(--text-2) 22%, transparent); } :where([data-ui="2"]) .sp-b.sp-on.sp-zero { background: color-mix(in oklch, var(--accent) 40%, transparent); } :where([data-ui="2"]) .kpis-owner .kpi { padding: var(--tile-p); } :where([data-ui="2"]) .kpis-owner .kpi-value { font-size: calc(var(--tile-num) - 4px); } /* ---------- Подсказки ---------- */ :where([data-ui="2"]) .hints-all { font-size: 14px; } :where([data-ui="2"]) .hint-none { border-radius: 8px; padding: 8px 12px; font-size: 14px; } :where([data-ui="2"]) .hint-group-title { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .hint-group-red .hint-group-title, :where([data-ui="2"]) .hint-group-amber .hint-group-title, :where([data-ui="2"]) .hint-group-info .hint-group-title { color: var(--text-2); } :where([data-ui="2"]) .hg-ic { width: 18px; height: 18px; background: none; } :where([data-ui="2"]) .hint-group-red .hg-ic { background: none; color: var(--red); } :where([data-ui="2"]) .hint-group-amber .hg-ic { background: none; color: var(--amber); } :where([data-ui="2"]) .hint-group-info .hg-ic { background: none; color: var(--muted); } :where([data-ui="2"]) .hint { --hint-mark: var(--gray-mark); border-radius: 10px; } :where([data-ui="2"]) .hint.hint-red { --hint-mark: var(--red-mark); } :where([data-ui="2"]) .hint.hint-amber { --hint-mark: var(--amber-mark); } :where([data-ui="2"]) .hint, :where([data-ui="2"]) .hint:hover, :where([data-ui="2"]) .hint.is-open, :where([data-ui="2"]) .hint-red, :where([data-ui="2"]) .hint-red:hover, :where([data-ui="2"]) .hint-red.is-open { box-shadow: inset 3px 0 0 var(--hint-mark), var(--card-edge); } :where([data-ui="2"]) .hint-toggle { gap: 10px; padding: 10px 14px 10px 16px; border-radius: 10px; } :where([data-ui="2"]) .hint-ic { width: 20px; height: 20px; border-radius: 0; background: none; } :where([data-ui="2"]) .hint-red .hint-ic { background: none; color: var(--red); } :where([data-ui="2"]) .hint-amber .hint-ic { background: none; color: var(--amber); } :where([data-ui="2"]) .hint-info .hint-ic { background: none; color: var(--muted); } :where([data-ui="2"]) .hint-title { font-family: var(--font); font-size: 15px; font-weight: 600; } :where([data-ui="2"]) .hint-line { font-size: 14px; } :where([data-ui="2"]) .hint-area { padding: 1px 7px; border-radius: 6px; font-size: 13px; font-weight: 500; } :where([data-ui="2"]) .hint-more { font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .hint-inner > * { margin-left: 46px; margin-right: 16px; max-width: 72ch; } :where([data-ui="2"]) .hint-inner > .hint-dl, :where([data-ui="2"]) .hint-inner > .hint-actions { max-width: none; } :where([data-ui="2"]) .hint-dl { border-radius: 8px; padding: 10px 12px; } :where([data-ui="2"]) .hint-dl dt, :where([data-ui="2"]) .ap-meta dt, :where([data-ui="2"]) .detail-dl dt, :where([data-ui="2"]) .calc-dl dt, :where([data-ui="2"]) .mc-stats dt, :where([data-ui="2"]) .run-stats dt { font-size: 13px; font-weight: 600; color: var(--text-2); } :where([data-ui="2"]) details.hint-fold > summary { min-height: 40px; padding: 6px 12px; border-radius: 8px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .hint-fold-note { font-size: 14px; } @media (max-width: 640px) { :where([data-ui="2"]) .hint-area { margin-left: 30px; } :where([data-ui="2"]) .hint-inner > * { margin-left: 14px; margin-right: 14px; } } /* ---------- Таблицы ---------- */ :where([data-ui="2"]) .table-wrap { border-radius: 10px; box-shadow: none; border: 1px solid var(--border); } :where([data-ui="2"]) .t { font-size: var(--t-fs); line-height: var(--t-lh); } :where([data-ui="2"]) .t th, :where([data-ui="2"]) .t td { padding: var(--cell-py) var(--cell-px); border-bottom: 1px solid var(--border); } :where([data-ui="2"]) .t thead th { background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0; text-wrap: balance; border-bottom: 1px solid var(--border-strong); } /* углы скругляет сама рамка (overflow обрезает по радиусу); скруглённая ячейка шапки просвечивала бы строками при прокрутке */ :where([data-ui="2"]) .t thead th:first-child, :where([data-ui="2"]) .t thead th:last-child { border-radius: 0; } :where([data-ui="2"]) .t tr.is-even > * { background: var(--surface); } :where([data-ui="2"]) .t tr.row-red > * { background: var(--red-soft); } :where([data-ui="2"]) .t tr.row-amber > * { background: var(--amber-soft); } :where([data-ui="2"]) .t tr.is-target > * { background: var(--accent-soft); } :where([data-ui="2"]) .t tbody tr:not(.detail-row):not(.group-row):hover > * { background: var(--hover); } :where([data-ui="2"]) .t tr.group-row > * { background: var(--surface-3); font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .t tfoot th, :where([data-ui="2"]) .t tfoot td { font-weight: 650; } :where([data-ui="2"]) .t .sub { font-size: 13px; line-height: 1.35; } :where([data-ui="2"]) .t .sub.pos { color: var(--pos); } :where([data-ui="2"]) .t .sub.neg { color: var(--neg); } :where([data-ui="2"]) .t .sticky-col { box-shadow: 1px 0 0 var(--border); } :where([data-ui="2"]) .t-foot { font-size: 13px; } :where([data-ui="2"]) .t-inner { font-size: var(--t-fs); } :where([data-ui="2"]) .t-compact th, :where([data-ui="2"]) .t-compact td { padding: var(--cell-py) var(--cell-px); } :where([data-ui="2"]) .th-sort { align-items: center; min-height: 32px; margin: -4px 0; } :where([data-ui="2"]) .sort-ind { font-size: 13px; opacity: .45; } :where([data-ui="2"]) th.is-sorted { color: var(--text); } :where([data-ui="2"]) th.is-sorted .sort-ind { color: var(--accent); opacity: 1; } :where([data-ui="2"]) .row-toggle { min-height: 32px; margin-top: -6px; margin-bottom: -6px; font-weight: 600; } :where([data-ui="2"]) .model-code { font-weight: 600; } :where([data-ui="2"]) .detail-row > td { background: var(--surface-2); } /* шапка закреплена: таблица выше окна прокручивается внутри своей рамки (у .is-tall и у любой другой длинной — «Пульс» с раскрытыми строками) */ @media (min-width: 701px) { :where([data-ui="2"]) .main .table-wrap, :where([data-ui="2"]) .table-wrap.is-tall { max-height: calc(100vh - var(--topbar-h) - 140px); overflow: auto; } /* −140: низ рамки выше маскота полного размера (8 + 118 px) */ :where([data-ui="2"]) .main .detail-row .table-wrap { max-height: none; } :where([data-ui="2"]) .table-wrap thead th { position: sticky; top: 0; z-index: 3; box-shadow: none; } :where([data-ui="2"]) .table-wrap thead th.sticky-col { z-index: 4; box-shadow: 1px 0 0 var(--border); } :where([data-ui="2"]) .detail-row .table-wrap thead th { position: static; } } :where([data-ui="2"]) .pz-grid th, :where([data-ui="2"]) .pz-grid td { font-size: 13px; } :where([data-ui="2"]) .pz-grid .pz-ev { color: var(--warm-text); } /* таблица → карточки на телефоне */ :where([data-ui="2"]) .dt-card { border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .dt-card.row-red { box-shadow: inset 0 0 0 1px var(--red-line); } :where([data-ui="2"]) .dt-card .sub, :where([data-ui="2"]) .mc-hero-label, :where([data-ui="2"]) .dt-sort label { font-size: 13px; } :where([data-ui="2"]) .dt-card .sub.pos { color: var(--pos); } :where([data-ui="2"]) .dt-card .sub.neg { color: var(--neg); } :where([data-ui="2"]) .mc-hero, :where([data-ui="2"]) .dt-card-detail { border-radius: 8px; } :where([data-ui="2"]) .mc-hero-value { font-family: var(--font); font-weight: 650; } :where([data-ui="2"]) .oc-profit { font-family: var(--font); font-weight: 650; } :where([data-ui="2"]) .oc-costs { font-size: 13px; } /* ---------- Графики ---------- */ :where([data-ui="2"]) .chart { border-radius: 10px; box-shadow: var(--card-edge); } /* А4: график по дням — сплошные столбики со скруглённым верхом, зазор в треть столбика; последние 7 дней — цветом серии, прошлые — приглушённым; выходные — едва заметным фоном; наведение — светлая колонка и подсказка на «всплывающей» поверхности */ :where([data-ui="2"]) .chart { padding: 18px 20px 14px; --series: var(--accent); } :where([data-ui="2"]) .chart-green { --series: var(--green-mark); } :where([data-ui="2"]) .chart-title { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--text); } :where([data-ui="2"]) .chart-y, :where([data-ui="2"]) .chart-x { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } :where([data-ui="2"]) .chart-body { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } :where([data-ui="2"]) .chart-x { margin-left: 54px; } :where([data-ui="2"]) .chart-grid span { border-top: 1px solid var(--border); } :where([data-ui="2"]) .chart-grid span:nth-child(3) { border-top-color: var(--border-strong); } :where([data-ui="2"]) .bars { gap: 0; } :where([data-ui="2"]) .bar-col { position: relative; border-radius: 4px 4px 0 0; transition: background-color .12s ease-out; } :where([data-ui="2"]) .bar-col.is-wkend { background: color-mix(in oklch, var(--text) 2.5%, transparent); border-radius: 0; } :where([data-ui="2"]) .bar { width: 75%; max-width: 28px; border-radius: 3px 3px 0 0; background: color-mix(in oklch, var(--series) 38%, var(--surface)); transform-origin: 50% 100%; transition: background-color .12s ease-out; } :where([data-ui="2"]) .bar-col.is-recent .bar { background: var(--series); } :where([data-ui="2"]) .bar-col.is-zero .bar { height: 2px !important; border-radius: 1px; background: var(--border-strong); } :where([data-ui="2"]) .bar-col.is-na .bar { height: 2px !important; } :where([data-ui="2"]) .chart-plot:hover .bar-col:not(.is-active) .bar, :where([data-ui="2"]) .chart-plot:focus-visible .bar-col:not(.is-active) .bar { opacity: 1; } :where([data-ui="2"]) .bar-col.is-active { background: color-mix(in oklch, var(--text) 7%, transparent); } :where([data-ui="2"]) .bar-col.is-active .bar { filter: none; box-shadow: none; background: var(--series); } :where([data-ui="2"]) .chart-tip { padding: 7px 11px; border-radius: 8px; background: var(--pop); color: var(--text); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); animation: ui2-pop .16s var(--ease-out) both; } :where([data-ui="2"]) .chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 14px; } :where([data-ui="2"]) .chart-head .chart-title { margin: 0; } :where([data-ui="2"]) .chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13px; color: var(--muted); } :where([data-ui="2"]) .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } :where([data-ui="2"]) .lg::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--series); } :where([data-ui="2"]) .lg-past::before { background: color-mix(in oklch, var(--series) 38%, var(--surface)); } :where([data-ui="2"]) .lg-avg { color: var(--text-2); font-variant-numeric: tabular-nums; } :where([data-ui="2"]) .lg-avg::before { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--text); background: none; } /* линия среднего за последние 7 дней — над их столбиками, с ореолом цвета поверхности (видна и на столбике, и на фоне) */ :where([data-ui="2"]) .chart-avg { position: absolute; right: 0; z-index: 2; height: 0; border-top: 2px solid var(--text); box-shadow: 0 0 0 1px var(--surface); border-radius: 1px; pointer-events: none; transform: translateY(1px); } :where([data-ui="2"]) .chart-plot:hover .chart-avg { opacity: .35; } :where([data-ui="2"]) .chart figcaption { font-size: 13px; } :where([data-ui="2"]) .meter > span { background: var(--green-mark); } /* шкала под числом: дорожка 4 px со скруглением, заполнение акцентом, пороговые цвета — как были */ :where([data-ui="2"]) .cbar { height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--text) 9%, transparent); } :where([data-ui="2"]) .cbar-fill { border-radius: 2px; background: var(--accent); } :where([data-ui="2"]) .cbar-green { background: var(--green-mark); } :where([data-ui="2"]) .cbar-red { background: var(--red-mark); } :where([data-ui="2"]) .cbar-amber { background: var(--amber-mark); } :where([data-ui="2"]) .cbar-gray { background: var(--gray-mark); } :where([data-ui="2"]) .season-bar.season-now { background: var(--accent); } :where([data-ui="2"]) .season-phase { height: 22px; padding: 0 7px; border-radius: 6px; font-size: 13px; font-weight: 600; } /* ---------- К сборке ---------- */ :where([data-ui="2"]) .ship { padding: 10px 14px; border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .ship-red { box-shadow: inset 3px 0 0 var(--red-mark), var(--card-edge); } :where([data-ui="2"]) .ship-ic { width: 24px; height: 24px; border-radius: 0; background: none; color: var(--muted); } :where([data-ui="2"]) .ship-red .ship-ic { background: none; color: var(--red); } :where([data-ui="2"]) .ship-amber .ship-ic { background: none; color: var(--amber); } :where([data-ui="2"]) .ship-items { font-weight: 600; } :where([data-ui="2"]) .ship-meta, :where([data-ui="2"]) .ship-deadline, :where([data-ui="2"]) .ship-tariff .tag { font-size: 13px; } @media (max-width: 520px) { :where([data-ui="2"]) .ship-when { margin-left: 36px; } } /* ---------- Окна, сообщения ---------- */ :where([data-ui="2"]) .dlg-box { border-radius: 10px; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .dlg-box::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } :where([data-ui="2"]) .dlg { padding: 20px; } :where([data-ui="2"]) .dlg-title { font-family: var(--font); font-size: 20px; font-weight: 600; } :where([data-ui="2"]) .pv-table { border-radius: 8px; } :where([data-ui="2"]) .pv-table thead th { font-size: 13px; } :where([data-ui="2"]) .pv-mode, :where([data-ui="2"]) .pv-whatif { border-radius: 8px; } :where([data-ui="2"]) .text-dlg { border-radius: 10px; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .text-dlg::backdrop { background: var(--backdrop); } :where([data-ui="2"]) .toast { border-radius: 8px; box-shadow: var(--shadow-pop); } :where([data-ui="2"]) .update-bar { bottom: 140px; border-radius: 10px; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .login-card { border-radius: 10px; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .login-card h1 { font-family: var(--font); font-weight: 650; } /* ---------- Согласования ---------- */ :where([data-ui="2"]) .ap-list { gap: 12px; } :where([data-ui="2"]) .ap { padding: 16px 18px; border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .ap.is-decided.ap-done { box-shadow: inset 3px 0 0 var(--green-mark), var(--card-edge); } :where([data-ui="2"]) .ap.is-decided.ap-declined, :where([data-ui="2"]) .ap.is-decided.ap-obsolete { box-shadow: var(--card-edge); } :where([data-ui="2"]) .ap.is-decided.ap-failed { box-shadow: inset 3px 0 0 var(--red-mark), var(--card-edge); } :where([data-ui="2"]) .ap-head { gap: 10px; } :where([data-ui="2"]) .ap-kind, :where([data-ui="2"]) .ap-kind-sm { width: 24px; height: 24px; margin-top: 2px; border-radius: 0; background: none; color: var(--muted); } :where([data-ui="2"]) .ap-kind-warm, :where([data-ui="2"]) .ap-kind-accent { background: none; color: var(--muted); } :where([data-ui="2"]) .ap-kind .ic { width: 20px; height: 20px; } :where([data-ui="2"]) .ap-top { font-size: 13px; } :where([data-ui="2"]) .ap-kind-label { font-weight: 600; } :where([data-ui="2"]) .ap-title { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; } :where([data-ui="2"]) .ap-reason { max-width: 72ch; } :where([data-ui="2"]) .ap-why { padding: 0 6px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-2); } :where([data-ui="2"]) .ap-sub, :where([data-ui="2"]) .calc-title { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .ap-change, :where([data-ui="2"]) .ap-items-wrap, :where([data-ui="2"]) .calc, :where([data-ui="2"]) .ap-result, :where([data-ui="2"]) .ap-text { border-radius: 8px; } :where([data-ui="2"]) .ch-new { font-weight: 650; } :where([data-ui="2"]) .ch-pct { font-size: 13px; font-weight: 600; } :where([data-ui="2"]) .ap-items li { border-radius: 6px; font-size: 13px; } :where([data-ui="2"]) .calc-strong dd { font-weight: 650; } :where([data-ui="2"]) .ap-shot img { border-radius: 8px; } :where([data-ui="2"]) .photo-sub .count { font-size: 13px; } :where([data-ui="2"]) .aph { border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .aph-title { font-weight: 600; } :where([data-ui="2"]) .aph-sub { font-size: 13px; } /* ---------- Офис ---------- */ :where([data-ui="2"]) .hc, :where([data-ui="2"]) .run { border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .hc-amber { box-shadow: inset 3px 0 0 var(--amber-mark), var(--card-edge); background: var(--surface); } :where([data-ui="2"]) .hc-red, :where([data-ui="2"]) .run-red { box-shadow: inset 3px 0 0 var(--red-mark), var(--card-edge); background: var(--surface); } :where([data-ui="2"]) .hc-ic, :where([data-ui="2"]) .run-ic { width: 22px; height: 22px; background: none; } :where([data-ui="2"]) .hc-green .hc-ic, :where([data-ui="2"]) .run-green .run-ic { background: none; color: var(--green); } :where([data-ui="2"]) .hc-amber .hc-ic, :where([data-ui="2"]) .run-amber .run-ic { background: none; color: var(--amber); } :where([data-ui="2"]) .hc-red .hc-ic, :where([data-ui="2"]) .run-red .run-ic { background: none; color: var(--red); } :where([data-ui="2"]) .hc-label { font-weight: 600; } :where([data-ui="2"]) .hc-time, :where([data-ui="2"]) .run-name .sub, :where([data-ui="2"]) .run-stats .sub, :where([data-ui="2"]) .run-note { font-size: 13px; } :where([data-ui="2"]) .run-group-title { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .run-group-title .ic { color: var(--muted); } /* ---------- Журнал, фильтры ---------- */ :where([data-ui="2"]) .filters { padding: 12px; border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .j-day { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .j-ic { box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) details.j-daybox .j-ic { box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .j-body { border-radius: 8px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .j-head { font-size: 13px; } :where([data-ui="2"]) .j-time { font-weight: 600; } :where([data-ui="2"]) details.j-daybox { border-radius: 10px; } :where([data-ui="2"]) details.j-daybox > summary { min-height: 40px; } /* Что считается */ :where([data-ui="2"]) .about-col { border-radius: 10px; background: var(--surface); } :where([data-ui="2"]) .about h2 { font-size: 14px; font-weight: 600; } :where([data-ui="2"]) .about-ic { background: none; width: 20px; height: 20px; } /* ---------- Чат ---------- */ :where([data-ui="2"]) .chat { border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .chat-side-title { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; } :where([data-ui="2"]) .agent { border-radius: 10px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .agent-name { font-weight: 600; } :where([data-ui="2"]) .agent-status, :where([data-ui="2"]) .thread-meta { font-size: 13px; } :where([data-ui="2"]) .thread-link { border-radius: 8px; } :where([data-ui="2"]) .thread-link[aria-current="page"] { background: var(--hover); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); } :where([data-ui="2"]) .thread-title { font-weight: 600; } :where([data-ui="2"]) .chat-main-title h2 { font-family: var(--font); font-weight: 600; } :where([data-ui="2"]) .chat-msgs { background: var(--surface); } :where([data-ui="2"]) .chat-empty-main::before { background: var(--border-strong); } :where([data-ui="2"]) .bubble { border-radius: 12px; } :where([data-ui="2"]) .msg-user .bubble { border-bottom-right-radius: 4px; box-shadow: none; } :where([data-ui="2"]) .msg-agent .bubble { border-bottom-left-radius: 4px; box-shadow: var(--card-edge); } :where([data-ui="2"]) .msg-author, :where([data-ui="2"]) .msg-meta, :where([data-ui="2"]) .timer, :where([data-ui="2"]) .msg-hint, :where([data-ui="2"]) .composer-help, :where([data-ui="2"]) .cfile-meta, :where([data-ui="2"]) .msg-file-size, :where([data-ui="2"]) .char-count { font-size: 13px; } :where([data-ui="2"]) .msg-author { font-weight: 600; } :where([data-ui="2"]) .composer textarea { border-radius: 8px; } :where([data-ui="2"]) .cfile, :where([data-ui="2"]) .msg-file { border-radius: 8px; } :where([data-ui="2"]) .msg-ap { border-radius: 8px; } :where([data-ui="2"]) .plan-card { border-radius: 10px; } :where([data-ui="2"]) .plan-hint { font-size: 13px; } :where([data-ui="2"]) .md li::marker { color: var(--muted); } @media (max-width: 860px) { :where([data-ui="2"]) .msg-agent .avatar { font-size: 13px; } } /* ---------- «Акции» ---------- */ :where([data-ui="2"]) .pm-cell, :where([data-ui="2"]) .pm-cell.pm-ok, :where([data-ui="2"]) .pm-cell.pm-maybe, :where([data-ui="2"]) .pm-cell.pm-no, :where([data-ui="2"]) .pm-cell.pm-in, :where([data-ui="2"]) .pm-cell.pm-thin, :where([data-ui="2"]) .pm-cell.pm-loss { box-shadow: none; padding-left: 0; gap: 3px; } :where([data-ui="2"]) .pm-cell .sub { color: var(--text-2); font-size: 13px; } :where([data-ui="2"]) .pm-cell .sub .muted { color: var(--muted); } :where([data-ui="2"]) #tbl-promo-matrix tbody th.sticky-col { min-width: 190px; max-width: 240px; } :where([data-ui="2"]) .pm-card { border-radius: 10px; background: var(--surface-2); } :where([data-ui="2"]) .pm-card .pm-when { font-size: 13px; } :where([data-ui="2"]) .pm-fc { border-radius: 8px; background: var(--surface-2); box-shadow: var(--card-edge); } :where([data-ui="2"]) .pm-ev-end .pm-ev-k { color: var(--amber); } :where([data-ui="2"]) details.pm-aa, :where([data-ui="2"]) .pm-cg { border-radius: 10px; } /* ================= Второй круг (11.11.2026, decision2 — часть А) ================= */ :root[data-ui="2"] { --edge-shadow: rgb(16 24 28 / 0.13); } :root[data-ui="2"][data-theme="dark"] { --edge-shadow: rgb(0 0 0 / 0.55); } @media (prefers-color-scheme: dark) { :root[data-ui="2"]:not([data-theme="light"]) { --edge-shadow: rgb(0 0 0 / 0.55); } } /* шрифт — одна переменная --font (часть Б подменит её и @font-face в начале файла) */ :where([data-ui="2"]) body { font-family: var(--font); font-optical-sizing: auto; } :where([data-ui="2"]) ::selection { background: color-mix(in oklch, var(--accent) 22%, transparent); } :where([data-ui="2"]) .screen-head h1, :where([data-ui="2"]) .hero h1, :where([data-ui="2"]) .login-card > h1 { font-family: var(--font-display); letter-spacing: -0.01em; } :where([data-ui="2"]) .block h2 { letter-spacing: -0.005em; } :where([data-ui="2"]) .t td.num { font-weight: 500; } :where([data-ui="2"]) .kpis-owner .kpi-value { font-size: min(var(--tile-num), calc(100cqi / 5.6)); } /* все плитки экрана — одного размера, без «дрожания» */ :where([data-ui="2"]) .trend { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; } :where([data-ui="2"]) .trend .ic { width: 14px; height: 14px; } /* А5: прокрутка — тонкие полосы своего цвета, ровный край страницы, отступ якорей под шапку */ :root[data-ui="2"] { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } :where([data-ui="2"]) .sidenav, :where([data-ui="2"]) .table-wrap, :where([data-ui="2"]) .chat-msgs, :where([data-ui="2"]) .dlg-box { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* вбок — не уводить жест «назад» браузера; вниз — прокрутка уходит странице дальше (contain по вертикали запирал бы колесо над длинной таблицей) */ :where([data-ui="2"]) .table-wrap { overscroll-behavior-x: contain; box-shadow: 0 1px 2px rgb(20 20 16 / 0.04); } /* рамка — border: внутренняя тень у прокручиваемой рамки скрылась бы под ячейками */ :where([data-ui="2"]) [id^="a-"] { scroll-margin-top: calc(var(--topbar-h) + 16px); } /* шапка сайта — на фоне страницы; линия и мягкая тень появляются, когда страницу прокрутили (где не поддерживается — просто линия) */ :where([data-ui="2"]) .topbar { background: var(--bg); border-bottom: 1px solid var(--border); } @supports (animation-timeline: scroll()) { :where([data-ui="2"]) .topbar { animation: ui2-topbar linear both; animation-timeline: scroll(root block); animation-range: 0 32px; } @keyframes ui2-topbar { from { border-bottom-color: transparent; box-shadow: 0 0 0 transparent; } to { border-bottom-color: var(--border); box-shadow: 0 8px 16px -14px var(--edge-shadow); } } } @media (min-width: 701px) { @supports (animation-timeline: scroll()) { /* тень под закреплённой шапкой таблицы — после прокрутки таблицы вниз */ :where([data-ui="2"]) .table-wrap thead th::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none; background: linear-gradient(var(--edge-shadow), transparent); opacity: 0; animation: ui2-show linear both; animation-timeline: scroll(nearest block); animation-range: 0 16px; } :where([data-ui="2"]) .detail-row .table-wrap thead th::after { content: none; } } } @supports (animation-timeline: scroll()) { /* тень справа от закреплённой колонки — когда таблицу сдвинули вбок (тень без растекания вверх-вниз: строки не «полосатят») */ :where([data-ui="2"]) .table-wrap .t .sticky-col { animation: ui2-edge-col linear both; animation-timeline: scroll(nearest inline); animation-range: 0 24px; } @keyframes ui2-edge-col { from { box-shadow: 1px 0 0 var(--border); } to { box-shadow: 1px 0 0 var(--border-strong), 8px 0 8px -8px var(--edge-shadow); } } } @keyframes ui2-show { to { opacity: 1; } } /* А6: кольцо фокуса в два слоя; в таблице — внутреннее (рамка таблицы обрезала бы внешнее) */ :where([data-ui="2"]) :is(input, select, textarea, button, a, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid transparent; outline-offset: 2px; /* в режиме высокой контрастности Windows видна рамка */ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); } :where([data-ui="2"]) :is(.nav-link, .nav-collapse, .topbar .btn, .pill):focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); } :where([data-ui="2"]) .t :is(input, select, button, a, summary, [tabindex]):focus-visible { box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--surface); } /* движение: наведение — 120 мс, всплывающее — 160 мс прозрачностью и сдвигом на 4 px, экран — проявлением; без пружин */ :where([data-ui="2"]) .btn, :where([data-ui="2"]) .chip, :where([data-ui="2"]) .nav-collapse, :where([data-ui="2"]) .pill, :where([data-ui="2"]) a.kpi-link { transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out; } :where([data-ui="2"]) .t tbody tr > * { transition: background-color .12s ease-out; } :where([data-ui="2"]) .screen-enter { animation: ui2-fade .16s var(--ease-out) both; } /* столбики растут снизу только при открытии экрана (app.js снимает .screen-enter после появления) */ :where([data-ui="2"]) .screen-enter .bar, :where([data-ui="2"]) .screen-enter .sp-b { animation: ui2-grow .5s var(--ease-out) both; } :where([data-ui="2"]) .sp-b { transform-origin: 50% 100%; } :where([data-ui="2"]) .dlg-box[open], :where([data-ui="2"]) .text-dlg[open] { animation: ui2-pop .16s var(--ease-out) both; } @keyframes ui2-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ui2-grow { from { transform: scaleY(0); } to { transform: none; } } @keyframes ui2-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes ui2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* кнопки: покой, наведение, нажатие (чуть темнее, без «проваливания») */ :where([data-ui="2"]) .btn:active { background: color-mix(in oklch, var(--hover), var(--text) 7%); transform: none; } :where([data-ui="2"]) .btn-primary:active { background: color-mix(in oklch, var(--accent-hover), #000 10%); border-color: color-mix(in oklch, var(--accent-hover), #000 10%); } :where([data-ui="2"]) .btn-quiet:active { background: color-mix(in oklch, var(--hover), var(--text) 7%); } /* всплывающее — одна поверхность с тенью: подсказка графика (выше), тост, подписи узкого меню (выше) */ :where([data-ui="2"]) .toast { border-radius: 10px; background: var(--pop); color: var(--text); font-weight: 500; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); transform: translate(-50%, 4px); transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); } :where([data-ui="2"]) .toast.show { transform: translate(-50%, 0); } :where([data-ui="2"]) .toast .ic { color: var(--accent); } :where([data-ui="2"]) .dlg-box, :where([data-ui="2"]) .text-dlg { background: var(--pop); } /* скелетоны — тихий пульс прозрачности вместо бегущего блика */ :where([data-ui="2"]) .skel { background: var(--surface-3); background-size: auto; animation: ui2-pulse 1.2s ease-in-out infinite; } /* пустые состояния: больше воздуха, заголовок 15/600, строка пояснения, место под картинку сверху (часть Б: в .empty-art — 240×180) */ :where([data-ui="2"]) .empty { padding: 36px 24px 32px; border: 0; background: var(--surface); box-shadow: var(--card-edge); } :where([data-ui="2"]) .empty::before { content: none; } :where([data-ui="2"]) .empty-art { width: 240px; max-width: 100%; height: 96px; margin: 0 auto 18px; background: color-mix(in oklch, var(--accent) 45%, var(--muted)); -webkit-mask: var(--illo) center / 116px auto no-repeat; mask: var(--illo) center / 116px auto no-repeat; opacity: .5; } :where([data-ui="2"]) .empty-art:has(img) { height: 180px; background: none; -webkit-mask: none; mask: none; opacity: 1; } :where([data-ui="2"]) .empty-art img { display: block; width: 240px; height: 180px; max-width: 100%; object-fit: contain; } :where([data-ui="2"]) .empty p { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; } :where([data-ui="2"]) .empty .empty-sub { max-width: 56ch; margin: 6px auto 0; font-size: 14px; font-weight: 400; color: var(--muted); } :where([data-ui="2"]) .chart .empty { box-shadow: none; padding: 20px 12px; } /* экран входа: карточка по центру однотонного листа, сверху мягкое свечение акцентом; место под эмблему 96 px и заставку справа (часть Б) */ :where([data-ui="2"]) .login { gap: 56px; padding: 24px 16px; background: radial-gradient(600px at 50% 0, color-mix(in oklch, var(--accent) 10%, transparent), transparent), var(--bg); } :where([data-ui="2"]) .login-card { width: min(400px, 100%); padding: 8px 32px 32px; box-shadow: var(--shadow-pop), var(--card-edge); animation: ui2-pop .16s var(--ease-out) both; } :where([data-ui="2"]) .login-card > .brand-mark-lg { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 20px auto; border-radius: 10px; } :where([data-ui="2"]) .login-card > .brand-mark-lg svg { width: 30px; height: 30px; } :where([data-ui="2"]) .login-card > h1 { font-size: 24px; text-align: center; letter-spacing: -0.01em; } :where([data-ui="2"]) .login-card > p.muted { margin-top: 4px; text-align: center; color: var(--muted); } :where([data-ui="2"]) .login-card .field { margin-top: 24px; } :where([data-ui="2"]) .login-art { width: 560px; max-width: 100%; aspect-ratio: 16 / 9; } :where([data-ui="2"]) .login-art img { display: block; width: 100%; height: 100%; object-fit: contain; } @media (min-width: 1100px) { :where([data-ui="2"]) .login:has(> .login-art:not([hidden])) { grid-template-columns: 400px 560px; justify-content: center; } } @media (max-width: 1099px) { :where([data-ui="2"]) .login-art { display: none; } } /* меню на невысоком экране (≤ 940 px): пользователь уже есть в шапке — внизу остаётся только «Свернуть», раскрытые подпункты помещаются */ @media (min-width: 861px) and (max-height: 940px) { :where([data-ui="2"]) .nav-foot { display: none; } :where([data-ui="2"]) .nav-collapse { margin-top: auto; } } @media (max-width: 860px) { :where([data-ui="2"]) .sidenav { overscroll-behavior: contain; } } @media (prefers-reduced-motion: reduce) { :where([data-ui="2"]) .screen-enter, :where([data-ui="2"]) .screen-enter .bar, :where([data-ui="2"]) .screen-enter .sp-b, :where([data-ui="2"]) .chart-tip, :where([data-ui="2"]) .login-card, :where([data-ui="2"]) .dlg-box[open], :where([data-ui="2"]) .text-dlg[open], :where([data-ui="2"]) .nav-label { animation: none !important; } :where([data-ui="2"]) .skel { animation: none; opacity: .8; } :where([data-ui="2"]) .toast { transition: none; } } /* ================= Часть Б (11.11.2026): шрифт, значки, картинки ================= */ /* Б1. Шрифт Inter (--font в токенах). Подгонка: мелкий текст чуть теснее (как советует автор шрифта), крупные цифры и заголовки — плотнее */ :where([data-ui="2"]) body { letter-spacing: -0.006em; } :where([data-ui="2"]) .kpi-value { letter-spacing: -0.025em; } :where([data-ui="2"]) :is(.screen-head h1, .hero h1) { font-weight: 650; letter-spacing: -0.02em; } /* узкая плитка (телефон, 768 px): «−135 863 ₽» в Inter шире системного, при 28 px рубль уезжал на вторую строку. Число ужимается под ширину плитки (≈ 5,6 em на самую длинную сумму), но не больше --tile-num; в ряду плитки равной ширины — размер один */ :where([data-ui="2"]) .kpi { container-type: inline-size; } :where([data-ui="2"]) .kpi-value { font-size: min(var(--tile-num), calc(100cqi / 5.6)); } /* «Акции → Модели и акции»: «Заказы за 28 дней» в Inter ломался на три строки при ширине колонки по цифрам */ :where([data-ui="2"]) .t thead th:has(> .th-sort[data-table="promo-matrix"][data-key="revenue_28d"]) { min-width: 124px; } /* остальные заголовки, использующие --font-display из app.css, — тоже на Inter */ :where([data-ui="2"]) :is(h1, h2, h3, h4, .brand-name, .mc-hero-value, .oc-profit) { font-family: var(--font); } /* Б2. Значки Phosphor: заливка, без обводки; в меню 20 px, в тексте и кнопках 16 px; подложка двухтонного — акцентом */ :where([data-ui="2"]) svg.ph { fill: currentColor; stroke: none; flex: none; } :where([data-ui="2"]) svg.ic-duo path[opacity] { fill: var(--accent); opacity: .22; } :where([data-ui="2"]) .nav-link .ic, :where([data-ui="2"]) .nav-collapse .ic { width: 20px; height: 20px; } :where([data-ui="2"]) .btn .ic, :where([data-ui="2"]) .chip .ic, :where([data-ui="2"]) .pill .ic, :where([data-ui="2"]) .topbar .ic, :where([data-ui="2"]) .sources .ic, :where([data-ui="2"]) .eyebrow .ic, :where([data-ui="2"]) .hint-more .ic, :where([data-ui="2"]) .row-toggle .ic { width: 16px; height: 16px; } :where([data-ui="2"]) .menu-btn svg { width: 20px; height: 20px; } :where([data-ui="2"]) .trend .ic { width: 14px; height: 14px; } /* заголовок экрана: двухтонный значок без квадрата-подложки, по первой строке заголовка */ :where([data-ui="2"]) .sh-icon { display: inline-flex; align-self: flex-start; width: auto; height: auto; margin-top: 4px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--accent); } :where([data-ui="2"]) .sh-icon .ic { width: 26px; height: 26px; } :where([data-ui="2"]) .sh-main { gap: 12px; } @media (max-width: 700px) { :where([data-ui="2"]) .sh-icon { display: none; } } /* Б3. Картинки (img/ui/*.webp, светлая и тёмная; app.js вставляет, только если файлы есть) */ :where([data-ui="2"]) :is(.empty-art, .login-emblem, .login-art) img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); } :where([data-ui="2"]) .art-l { mix-blend-mode: multiply; } :where([data-ui="2"]) .art-d { mix-blend-mode: screen; } :where([data-ui="2"]) .art-d { display: none !important; } :root[data-ui="2"][data-theme="dark"] .art-d { display: block !important; } :root[data-ui="2"][data-theme="dark"] .art-l { display: none !important; } @media (prefers-color-scheme: dark) { :root[data-ui="2"]:not([data-theme="light"]) .art-d { display: block !important; } :root[data-ui="2"]:not([data-theme="light"]) .art-l { display: none !important; } } /* пустое состояние с картинкой — на фоне страницы, без белой карточки */ :where([data-ui="2"]) .empty:has(.empty-art img) { background: none; box-shadow: none; } /* эмблема на входе: 96 px над заголовком вместо значка-квадрата */ :where([data-ui="2"]) .login-card.has-emblem > .brand-mark-lg { display: none; } :where([data-ui="2"]) .login-emblem { display: block; width: 96px; height: 96px; margin: 16px auto 8px; } /* заставка справа — на широких экранах, на фоне страницы (правила раскладки .login-art — выше) */ /* ---------- Маскот: полный размер, как в старом виде (118 px; на телефоне — 76 px из mascot.css), 11.11.2026 по просьбе владельца. Данные защищены отступами: низ содержимого — 140 px (маскот занимает 8 + 118 = 126 px), окно длинных таблиц — на 140 px выше низа окна, плашка «Панель обновилась» — над маскотом ---------- */ :where([data-ui="2"]) .masc-h, :where([data-ui="2"]) .masc-fig-where { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; } /* ---------- Телефон ---------- */ @media (max-width: 700px) { :root[data-ui="2"], :root[data-ui="2"][data-density] { --ctl-h: 44px; } :where([data-ui="2"]) .main { padding: 16px 16px 104px; } :where([data-ui="2"]) .chip { min-height: 44px; } /* длинные подписи кнопок («Большой вопрос» в «Вопросах») переносятся, а не распирают страницу */ :where([data-ui="2"]) .main .btn { white-space: normal; max-width: 100%; text-align: left; } /* вариант в «Вопросах»: совет, текст, риск и мнения — друг под другом (в старом виде распирали страницу до 504 px) */ :where([data-ui="2"]) .notice { flex-wrap: wrap; } :where([data-ui="2"]) .th-sort, :where([data-ui="2"]) .row-toggle { min-height: 44px; } :where([data-ui="2"]) .screen-head h1, :where([data-ui="2"]) .hero h1 { font-size: 23px; } :where([data-ui="2"]) .pill { min-height: 44px; } :where([data-ui="2"]) .hint-toggle { min-height: 44px; } } @media (max-width: 560px) { :where([data-ui="2"]) .topbar { padding: 0 8px; gap: 2px; } :where([data-ui="2"]) .topbar .btn-sm, :where([data-ui="2"]) .topbar .btn-icon { width: 44px; min-height: 44px; padding: 0; } :where([data-ui="2"]) #ui-density { display: none; } } /* ===================================================================================================================== «ШЁЛК + ОБСИДИАН» — слой материалов (12.11.2026, выбор владельца по макетам styles/silk.html и styles/obsidian.html) Светлая: тёплый фон, мягкое цветное световое поле (акцент кабинета + персик), матовое стекло с бликом по кромке. Тёмная: глубокая сцена, «горизонт» и пятно света цвета кабинета, кромка-блик, зерно, светящиеся графики. Тёмные правила — через html[data-scheme="dark"] (theme.js учитывает «как в системе»). Размытие — только на крупных поверхностях (меню, шапка, герой, «Для собственника», графики, блок подсказок); плитки и строки — полупрозрачная заливка без размытия; таблицы, формы, чат — плотные. ===================================================================================================================== */ html:not([data-ui="2"]) .ui-scene { display: none; } html:not([data-ui="2"]) .topbar-actions { display: contents; } /* ---------- Сцена: свет под стеклом (один закреплённый слой + два плывущих пятна, только transform) ---------- */ :where([data-ui="2"]) body { background: var(--bg); } :where([data-ui="2"]) .ui-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(46vw 40vw at 100% -6%, color-mix(in srgb, var(--accent-2) 40%, #fff) 0, color-mix(in srgb, var(--accent-2) 16%, transparent) 46%, transparent 72%), radial-gradient(52vw 34vw at 30% 112%, color-mix(in srgb, var(--warm-light) 66%, #fff) 0, color-mix(in srgb, var(--warm-light) 22%, transparent) 50%, transparent 74%), radial-gradient(30vw 30vw at -4% 38%, color-mix(in srgb, var(--accent-2) 20%, #fff) 0, transparent 70%), radial-gradient(26vw 22vw at 62% 46%, rgb(232 216 244 / 0.55) 0, transparent 70%), var(--bg); } :where([data-ui="2"]) .ui-scene > span { position: absolute; display: block; border-radius: 50%; } :where([data-ui="2"]) .ui-l1 { width: 62vw; height: 52vw; right: -16vw; top: -24vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent); animation: ui3-drift 26s ease-in-out infinite alternate; } :where([data-ui="2"]) .ui-l2 { width: 34vw; height: 28vw; left: 14vw; bottom: -14vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--warm-light) 30%, transparent), transparent); animation: ui3-drift 30s ease-in-out -8s infinite alternate-reverse; } :where([data-ui="2"]) .ui-l3 { display: none; } @keyframes ui3-drift { to { transform: translate(-4vw, 3vw) scale(1.06); } } :where([data-ui="2"]) .app, :where([data-ui="2"]) .login { position: relative; z-index: 1; } :where([data-ui="2"]) .app { background: none; } :where([data-ui="2"][data-scheme="dark"]) .ui-scene { background: radial-gradient(60vw 46vh at 50% 108%, color-mix(in srgb, var(--accent) 22%, transparent) 0, color-mix(in srgb, var(--accent) 7%, transparent) 46%, transparent 72%), radial-gradient(50vw 40vh at 40% -10%, color-mix(in srgb, var(--accent) 9%, transparent) 0, transparent 70%), radial-gradient(30vw 30vh at 100% 30%, color-mix(in srgb, var(--accent) 5%, transparent) 0, transparent 70%), var(--bg); } :where([data-ui="2"][data-scheme="dark"]) .ui-l1 { left: -10%; right: -10%; top: auto; bottom: -40vh; width: auto; height: 76vh; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); animation: ui3-breathe 11s ease-in-out infinite alternate; } :where([data-ui="2"][data-scheme="dark"]) .ui-l2 { inset: 0; width: auto; height: auto; border-radius: 0; animation: none; background: url(img/ui/grain.svg); opacity: .045; mix-blend-mode: overlay; } @keyframes ui3-breathe { from { opacity: .75; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(-2vh) scale(1.04); } } /* ---------- Стекло: общий материал ---------- */ :where([data-ui="2"]) :is(.sidenav, .td-hero, .td-owner, .chart, #a-hints, .login-card, .topbar-actions) { background: linear-gradient(160deg, var(--glass-hi), var(--glass)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-glass); } :where([data-ui="2"][data-scheme="dark"]) :is(.sidenav, .td-hero, .td-owner, .chart, #a-hints, .login-card, .topbar-actions) { background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.008) 40%), var(--glass); box-shadow: var(--sheen), 0 0 0 1px var(--glass-edge), var(--shadow-glass); } /* полупрозрачные плитки без размытия */ :where([data-ui="2"]) :is(.kpi, .hint, details.hint-fold > summary, .hint-none, .filters, .empty, .src, .pm-card, .aph, .hc, .run, .ship, details.about-wrap > summary, .about-col, details.sources > summary) { background: var(--glass-tile); box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-tile); } :where([data-ui="2"][data-scheme="dark"]) :is(.kpi, .hint, details.hint-fold > summary, .hint-none, .filters, .empty, .src, .pm-card, .aph, .hc, .run, .ship, details.about-wrap > summary, .about-col, details.sources > summary) { background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.006) 45%), var(--glass-tile); box-shadow: var(--sheen), 0 0 0 1px var(--border), var(--shadow-tile); } /* плотные поверхности: формы, длинные тексты, чат, согласования, журнал, карточки строк на телефоне */ :where([data-ui="2"]) :is(.ap, .chat, .agent, .j-body, .dt-card, .plan-card, .funnel, .pm-fc, details.pm-aa, .pm-cg) { background: var(--surface); box-shadow: var(--card-edge), var(--shadow-tile); } /* ---------- Шапка ---------- */ :where([data-ui="2"]) .topbar { height: var(--topbar-h); padding: 0 18px 0 16px; gap: 10px; background: transparent; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } @supports (animation-timeline: scroll()) { /* при прокрутке шапка становится стеклом (без прокрутки — прозрачная над светом) */ :where([data-ui="2"]) .topbar { animation: ui3-topbar linear both; animation-timeline: scroll(root block); animation-range: 0 40px; } @keyframes ui3-topbar { from { background-color: transparent; box-shadow: 0 0 0 transparent; -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); } to { background-color: var(--glass); box-shadow: inset 0 -1px 0 var(--glass-edge), 0 12px 28px -22px rgb(0 0 0 / 0.35); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } } } @supports not (animation-timeline: scroll()) { :where([data-ui="2"]) .topbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 -1px 0 var(--glass-edge); } } :where([data-ui="2"]) .topbar-actions { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; } :where([data-ui="2"]) .topbar .btn { min-height: 34px; padding: 0 12px; border-radius: 999px; border-color: transparent; background: transparent; color: var(--text-2); font-weight: 550; } :where([data-ui="2"]) .topbar .btn:hover { background: var(--glass-hi); color: var(--text); border-color: transparent; } :where([data-ui="2"]) .topbar .btn-refresh { margin-left: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); color: var(--on-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 18px -10px var(--accent); } :where([data-ui="2"]) .topbar .btn-refresh:hover { background: var(--accent-hover); color: var(--on-accent); } :where([data-ui="2"][data-scheme="dark"]) .topbar .btn-refresh { background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04)); color: var(--text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 1px var(--border-strong); } :where([data-ui="2"][data-scheme="dark"]) .topbar .btn-refresh .ic { color: var(--accent-hover); } :where([data-ui="2"][data-scheme="dark"]) .topbar .btn-refresh:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 22px -6px var(--accent); } :where([data-ui="2"]) .topbar .user-chip { margin-left: 2px; padding: 3px 12px 3px 3px; background: transparent; color: var(--text); } :where([data-ui="2"]) .user-chip .avatar { background: linear-gradient(135deg, var(--accent-soft), var(--accent-2) 60%, var(--warm-light)); color: var(--accent-deep); font-weight: 650; } :where([data-ui="2"][data-scheme="dark"]) .user-chip .avatar { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent) 18%, #000)); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } :where([data-ui="2"]) .brand { gap: 10px; } :where([data-ui="2"]) .brand-name { font-size: 17px; font-weight: 650; letter-spacing: .03em; } :where([data-ui="2"]) .brand-sub { color: var(--muted); font-size: 12.5px; } :where([data-ui="2"]) .brand-mark { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 8px 18px -10px var(--accent); } :where([data-ui="2"]) .brand.has-emblem .brand-mark { display: none; } :where([data-ui="2"]) .brand-emblem { display: block; flex: none; width: 44px; height: 44px; margin: -4px -2px -4px -4px; } :where([data-ui="2"]) .brand-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; } :where([data-ui="2"][data-scheme="dark"]) .brand-emblem { width: 38px; height: 38px; margin: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(80% 80% at 50% 110%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), #0E1418; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 1px var(--border-strong), 0 8px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .brand-emblem img { width: calc(100% + 8px); height: calc(100% + 8px); margin: -4px; } /* ---------- Меню: стеклянная колонна, значки на мягких подложках ---------- */ :where([data-ui="2"]) .sidenav { top: calc(var(--topbar-h) + 2px); height: calc(100vh - var(--topbar-h) - 18px); margin: 2px 0 16px 14px; padding: 12px 10px 10px; border: 0; border-radius: var(--radius-xl); } :where([data-ui="2"]) .nav-list { gap: 2px; } :where([data-ui="2"]) .nav-link { gap: 11px; min-height: 40px; padding: 5px 10px 5px 5px; border-radius: 14px; color: var(--text-2); font-size: 14px; font-weight: 500; transition: background-color .25s var(--ease-soft), color .25s, box-shadow .25s; } :where([data-ui="2"]) .nav-link .ic { box-sizing: border-box; width: 30px; height: 30px; padding: 6px; flex: none; border-radius: 50%; color: var(--accent); opacity: 1; background: rgb(255 255 255 / 0.6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(96 62 38 / 0.08); } :where([data-ui="2"]) .nav-link .ic-duo path[opacity] { fill: currentColor; opacity: .2; display: inline; } :where([data-ui="2"]) .nav-link:hover { background: rgb(255 255 255 / 0.55); color: var(--text); } :where([data-ui="2"]) .nav-link:hover .ic { color: var(--accent); opacity: 1; } :where([data-ui="2"]) .nav-link[aria-current="page"] { background: rgb(255 255 255 / 0.86); color: var(--text); font-weight: 600; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent); } :where([data-ui="2"]) .nav-link[aria-current="page"] .ic { color: var(--accent-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 30%, #fff), var(--accent-2) 50%, var(--warm-light)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 6px 14px -8px var(--accent); } :where([data-ui="2"]) .nav-link[aria-current="page"] .ic-duo path[opacity] { opacity: .3; } :where([data-ui="2"][data-scheme="dark"]) .nav-link .ic { border-radius: 9px; color: #B9C2CC; background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.04); } :where([data-ui="2"][data-scheme="dark"]) .nav-link:hover { background: rgb(255 255 255 / 0.045); color: var(--text); } :where([data-ui="2"][data-scheme="dark"]) .nav-link:hover .ic { color: var(--accent-hover); } :where([data-ui="2"][data-scheme="dark"]) .nav-link[aria-current="page"] { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent), color-mix(in srgb, var(--accent) 3%, transparent) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-hover); box-shadow: 0 0 12px 1px var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .nav-link[aria-current="page"] .ic { color: var(--accent-deep); background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent-hover) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 65%, #000)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 0 18px -2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-hover) 50%, transparent); } /* счётчики: «ждут решения» — персиковая (в тёмной — янтарная) таблетка со свечением; срочные — красные */ :where([data-ui="2"]) .nav-link .badge-accent { color: #fff; background: linear-gradient(135deg, #B9582E, #A34722); box-shadow: 0 4px 10px -4px rgb(217 116 74 / 0.7); } :where([data-ui="2"][data-scheme="dark"]) .nav-link .badge-accent { color: #201503; background: linear-gradient(180deg, #FFD88A, #F4BC5C); box-shadow: 0 0 14px -2px rgb(244 188 92 / 0.6); } :where([data-ui="2"]) .nav-link .badge { min-width: 22px; height: 20px; border-radius: 999px; font-size: 12.5px; } :where([data-ui="2"]) .nav-sub { padding-left: 36px; } :where([data-ui="2"]) .nav-sub a { min-height: 32px; border-radius: 10px; } :where([data-ui="2"]) .nav-sub a:hover { background: rgb(255 255 255 / 0.5); } :where([data-ui="2"][data-scheme="dark"]) .nav-sub a:hover { background: rgb(255 255 255 / 0.04); } :where([data-ui="2"]) .nav-foot { border-top: 1px solid var(--glass-edge); } :where([data-ui="2"][data-scheme="dark"]) .nav-foot { border-top-color: var(--border); } :where([data-ui="2"]) .nav-collapse { border-radius: 12px; color: var(--text-2); } :where([data-ui="2"]) .nav-collapse:hover { background: rgb(255 255 255 / 0.55); } :where([data-ui="2"][data-scheme="dark"]) .nav-collapse:hover { background: rgb(255 255 255 / 0.045); } @media (min-width: 861px) { :where([data-ui="2"][data-nav="mini"]) .sidenav { padding: 12px 8px 10px; } /* размытие стекла делает меню «рамкой» для position: fixed, и его прокрутка обрезала подсказки с названиями и список подпунктов — в узком меню их не было видно вовсе (12.11.2026). За узким меню только фон страницы: без размытия разницы не видно */ :where([data-ui="2"][data-nav="mini"]) .sidenav#nav { z-index: 25; -webkit-backdrop-filter: none; backdrop-filter: none; } /* #nav: правило стекла весит как id (в нём #a-hints) */ :where([data-ui="2"][data-nav="mini"]) .nav-link { padding: 5px 0; } :where([data-ui="2"][data-nav="mini"]) .nav-link[aria-current="page"]::before { left: -8px; } :where([data-ui="2"][data-nav="mini"]) .nav-link .badge { left: calc(50% + 8px); top: 0; box-shadow: 0 0 0 2px var(--surface); } :where([data-ui="2"][data-nav="mini"]) .nav-link:is(:hover, :focus-visible) .nav-label { left: 84px; border-radius: 10px; background: var(--pop); } /* подпункты текущего экрана в узком меню (12.11.2026): были скрыты совсем — «Остатки → Подсортировка», «Реклама → Кампании» и др. открывались только из развёрнутого меню. Теперь — всплывающим списком справа при наведении или фокусе на пункт */ :where([data-ui="2"][data-nav="mini"]) .nav-list > li:is(:hover, :focus-within) > .nav-sub { display: block; position: fixed; left: 76px; z-index: 41; min-width: 220px; margin: -6px 0 0; padding: 6px; border-radius: 12px; background: var(--pop); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); animation: ui2-pop .16s var(--ease-out) both; } :where([data-ui="2"][data-nav="mini"]) .nav-list > li > .nav-sub::before { content: ""; position: absolute; top: -44px; bottom: 0; left: -10px; width: 10px; } /* мостик: мышь доходит от значка до списка, не теряя наведения */ } /* ---------- Содержимое ---------- */ :where([data-ui="2"]) .main { padding: var(--main-py) var(--main-px) 140px; } :where([data-ui="2"]) .screen-head { margin-bottom: 14px; } :where([data-ui="2"]) .screen-head h1 { font-size: 32px; font-weight: 350; letter-spacing: -0.03em; line-height: 1.12; } :where([data-ui="2"][data-scheme="dark"]) .screen-head h1 { font-weight: 600; letter-spacing: -0.03em; } :where([data-ui="2"]) .subtitle { color: var(--text-2); } :where([data-ui="2"]) .sh-icon { align-self: center; margin-top: 0; } :where([data-ui="2"]) .sh-icon .ic { box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 50%; color: var(--accent-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 30%, #fff), var(--accent-2) 50%, var(--warm-light)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 10px 22px -12px var(--accent); } :where([data-ui="2"]) .sh-icon .ic-duo path[opacity] { fill: currentColor; opacity: .28; } :where([data-ui="2"][data-scheme="dark"]) .sh-icon .ic { border-radius: 14px; color: var(--accent-hover); background: radial-gradient(100% 100% at 50% 0%, rgb(255 255 255 / 0.1), transparent 60%), var(--surface-3); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.05), 0 0 24px -6px color-mix(in srgb, var(--accent) 50%, transparent); } :where([data-ui="2"]) .block h2 { font-size: 20px; font-weight: 550; letter-spacing: -0.015em; } :where([data-ui="2"]) .block-note, :where([data-ui="2"]) .fold-note { color: var(--text-2); } :where([data-ui="2"]) .tiles-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } /* источники и «Как считаем» — тихие стеклянные таблетки */ :where([data-ui="2"]) details.sources > summary, :where([data-ui="2"]) details.about-wrap > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px; border-radius: 999px; color: var(--text-2); } :where([data-ui="2"]) .src { border-radius: 12px; } :where([data-ui="2"]) .about-col { border-radius: var(--radius-lg); } /* ---------- «Сегодня»: приветствие ---------- */ :where([data-ui="2"]) .hero { margin-bottom: 16px; } :where([data-ui="2"]) .hero .eyebrow { color: var(--text-2); font-size: 13px; font-weight: 500; letter-spacing: .02em; } :where([data-ui="2"]) .hero .eyebrow .ic { display: none; } :where([data-ui="2"]) .hero h1 { margin: 2px 0 0; font-size: 42px; line-height: 1.08; font-weight: 300; letter-spacing: -0.035em; } :where([data-ui="2"][data-scheme="dark"]) .hero h1 { font-weight: 600; font-size: 36px; letter-spacing: -0.03em; } :where([data-ui="2"]) .hero-summary { margin: 8px 0 12px; color: var(--text-2); } :where([data-ui="2"]) .hero-pills { gap: 8px; } :where([data-ui="2"]) .hero-pills .pill { min-height: 34px; padding: 6px 14px 6px 12px; border-radius: 999px; text-decoration: none; color: var(--text-2); font-size: 13.5px; font-weight: 500; background: var(--glass-tile); box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), 0 6px 16px -10px rgb(96 62 38 / 0.3); } :where([data-ui="2"]) .hero-pills .pill:hover { color: var(--text); background: var(--glass-hi); } :where([data-ui="2"]) .hero-pills .pill-accent { color: var(--accent-deep); font-weight: 600; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 28%, #fff), color-mix(in srgb, var(--accent-2) 55%, #fff)); } :where([data-ui="2"][data-scheme="dark"]) .hero-pills .pill { background: rgb(255 255 255 / 0.035); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px var(--border); } :where([data-ui="2"][data-scheme="dark"]) .hero-pills .pill:hover { background: rgb(255 255 255 / 0.07); } :where([data-ui="2"][data-scheme="dark"]) .hero-pills .pill-accent { color: var(--accent-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } :where([data-ui="2"]) .hero-pills .pill .ic { width: 16px; height: 16px; } :where([data-ui="2"]) .hero-pills .pill-green .ic { color: var(--green-mark); } /* ---------- «Сегодня»: герой и «Для собственника» ---------- */ :where([data-ui="2"]) .td-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1fr); gap: var(--gap-xl); align-items: stretch; margin-bottom: var(--gap-xl); } :where([data-ui="2"]) .td-grid > :only-child { grid-column: 1 / -1; } :where([data-ui="2"]) .td-hero { position: relative; min-width: 0; padding: 24px 26px 16px; border-radius: var(--radius-xl); scroll-margin-top: calc(var(--topbar-h) + 16px); } :where([data-ui="2"][data-scheme="dark"]) .td-hero { background: radial-gradient(60% 70% at 85% 115%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(50% 50% at 0% 0%, rgb(255 255 255 / 0.05), transparent 70%), linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01) 40%), rgb(15 20 24 / 0.8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.11), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 40px 80px -36px rgb(0 0 0 / 0.95), 0 0 80px -40px color-mix(in srgb, var(--accent) 40%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .td-hero::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-hover) 60%, transparent) 30%, rgb(255 255 255 / 0.35) 55%, transparent); } :where([data-ui="2"]) .hc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; } :where([data-ui="2"]) .hc-main { min-width: 0; } :where([data-ui="2"]) .hc-cap { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-2); } :where([data-ui="2"]) .hc-num { margin: 6px 0 12px; font-size: clamp(52px, 5.2vw, 76px); line-height: 1; font-weight: 250; letter-spacing: -0.045em; color: #14110F; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } :where([data-ui="2"]) .hc-num .kpi-cur { margin-left: 6px; font-size: .42em; font-weight: 350; letter-spacing: 0; color: var(--muted); vertical-align: .85em; } :where([data-ui="2"]) .hc-num .na { font-size: 18px; letter-spacing: 0; } :where([data-ui="2"][data-scheme="dark"]) .hc-num { font-weight: 600; letter-spacing: -0.05em; background: linear-gradient(180deg, #FFFFFF 30%, color-mix(in srgb, var(--accent-hover) 60%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } :where([data-ui="2"][data-scheme="dark"]) .hc-num .kpi-cur { font-weight: 400; vertical-align: baseline; font-size: .5em; -webkit-text-fill-color: var(--muted); } :where([data-ui="2"]) .hc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; } :where([data-ui="2"]) .hc-sub .trend { margin: 0; padding: 3px 11px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--pos) 13%, transparent); font-size: 13.5px; } :where([data-ui="2"]) .hc-sub .trend-down { background: color-mix(in srgb, var(--neg) 12%, transparent); } :where([data-ui="2"]) .hc-sub .trend-note { color: var(--text-2); font-weight: 500; } :where([data-ui="2"][data-scheme="dark"]) .hc-sub .trend-up { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 30%, transparent), 0 0 20px -6px color-mix(in srgb, var(--pos) 55%, transparent); } :where([data-ui="2"]) .hc-pcs { padding-left: 14px; border-left: 1px solid var(--border-strong); color: var(--text-2); } :where([data-ui="2"]) .hc-pcs b { color: var(--text); font-size: 16px; font-weight: 650; } :where([data-ui="2"]) .hc-when { color: var(--muted); font-size: 13px; } :where([data-ui="2"]) .hc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } :where([data-ui="2"]) .hc-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.5); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 2px rgb(96 62 38 / 0.08); } :where([data-ui="2"][data-scheme="dark"]) .hc-switch { background: rgb(0 0 0 / 0.25); box-shadow: inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .hc-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; transition: background-color .2s, color .2s; } :where([data-ui="2"]) .hc-switch button:hover { color: var(--text); } :where([data-ui="2"]) .hc-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(96 62 38 / 0.12), inset 0 1px 0 #fff; } :where([data-ui="2"][data-scheme="dark"]) .hc-switch button[aria-pressed="true"] { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); } :where([data-ui="2"]) .hc-legend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; font-size: 13px; color: var(--text-2); } :where([data-ui="2"]) .hc-lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } :where([data-ui="2"]) .hc-lg::before { content: ""; flex: none; } :where([data-ui="2"]) .hc-lg-line::before { width: 18px; height: 3px; border-radius: 2px; background: var(--accent); } :where([data-ui="2"]) .hc-lg-band::before { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, rgb(255 255 255 / 0.9), color-mix(in srgb, var(--accent-2) 30%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent); } :where([data-ui="2"]) .hc-lg-part::before { width: 18px; height: 0; border-top: 2px dotted var(--accent); } :where([data-ui="2"]) .hc-lg-avg::before { width: 18px; height: 0; border-top: 2px dashed #D9824E; } :where([data-ui="2"]) .hc-lg b { color: var(--text); font-weight: 650; } :where([data-ui="2"][data-scheme="dark"]) .hc-lg-line::before { background: var(--accent-hover); box-shadow: 0 0 8px var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .hc-lg-band::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .hc-lg-avg::before { border-top-color: rgb(255 255 255 / 0.6); } :where([data-ui="2"]) .td-hero[data-mode="rub"] .hc-units, :where([data-ui="2"]) .td-hero[data-mode="units"] .hc-rub { display: none; } :where([data-ui="2"]) .hc-plot { position: relative; height: 236px; margin: 22px 0 0; border-radius: 14px; } :where([data-ui="2"]) .hc-plot:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--focus); } :where([data-ui="2"]) .hc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } :where([data-ui="2"]) .hc-svg * { vector-effect: non-scaling-stroke; } :where([data-ui="2"]) .hc-grid line { stroke: var(--grid-line); stroke-width: 1; } :where([data-ui="2"]) .hc-grid .hc-base { stroke: color-mix(in srgb, var(--text-2) 22%, transparent); } :where([data-ui="2"]) .hc-band { fill: rgb(255 255 255 / 0.55); } :where([data-ui="2"]) .hc-s-a0 { stop-color: var(--accent-2); stop-opacity: .16; } :where([data-ui="2"]) .hc-s-a1 { stop-color: var(--accent-2); stop-opacity: 0; } :where([data-ui="2"]) .hc-s-b0 { stop-color: var(--accent-2); stop-opacity: .4; } :where([data-ui="2"]) .hc-s-b1 { stop-color: var(--warm-light); stop-opacity: .14; } :where([data-ui="2"]) .hc-s-b2 { stop-color: var(--warm-light); stop-opacity: 0; } :where([data-ui="2"]) .hc-ln { fill: none; stroke: color-mix(in srgb, var(--accent-2) 75%, var(--text-2)); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: .75; } :where([data-ui="2"]) .hc-ln7 { fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; } :where([data-ui="2"]) .hc-glow { fill: none; stroke: var(--accent-2); stroke-width: 8; opacity: .38; } :where([data-ui="2"]) .hc-lnp { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; } :where([data-ui="2"]) .hc-avg { stroke: #D9824E; stroke-width: 1.6; stroke-dasharray: 5 5; } :where([data-ui="2"][data-scheme="dark"]) .hc-band { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent-hover) 22%, transparent); stroke-dasharray: 2 4; } :where([data-ui="2"][data-scheme="dark"]) .hc-s-a0 { stop-color: var(--accent); stop-opacity: .14; } :where([data-ui="2"][data-scheme="dark"]) .hc-s-a1 { stop-color: var(--accent); stop-opacity: 0; } :where([data-ui="2"][data-scheme="dark"]) .hc-s-b0 { stop-color: var(--accent); stop-opacity: .44; } :where([data-ui="2"][data-scheme="dark"]) .hc-s-b1 { stop-color: var(--accent); stop-opacity: .06; } :where([data-ui="2"][data-scheme="dark"]) .hc-s-b2 { stop-color: var(--accent); stop-opacity: 0; } :where([data-ui="2"][data-scheme="dark"]) .hc-ln { stroke: color-mix(in srgb, var(--accent-hover) 60%, transparent); opacity: 1; } :where([data-ui="2"][data-scheme="dark"]) .hc-ln7 { stroke: var(--accent-hover); } :where([data-ui="2"][data-scheme="dark"]) .hc-glow { stroke: var(--accent); opacity: .75; } :where([data-ui="2"][data-scheme="dark"]) .hc-avg { stroke: rgb(255 255 255 / 0.55); } :where([data-ui="2"]) .hc-marks { position: absolute; inset: 0; pointer-events: none; } :where([data-ui="2"]) .hc-y { position: absolute; left: 4px; transform: translateY(-120%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } :where([data-ui="2"]) .hc-y:first-child { transform: translateY(4px); } :where([data-ui="2"]) .hc-avg-l { position: absolute; transform: translate(calc(-100% - 8px), -50%); padding: 1px 8px; border-radius: 999px; font-size: 12px; color: var(--text-2); white-space: nowrap; background: var(--glass-tile); } :where([data-ui="2"][data-scheme="dark"]) .hc-avg-l { background: rgb(16 22 26 / 0.8); } :where([data-ui="2"]) .hc-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } :where([data-ui="2"]) .hc-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); animation: ui3-ping 2.4s var(--ease-soft) infinite; } :where([data-ui="2"]) .hc-dot-part { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); opacity: .85; } :where([data-ui="2"]) .hc-dot-part::after { content: none; } :where([data-ui="2"][data-scheme="dark"]) .hc-dot { background: #EFFFFD; box-shadow: 0 0 10px 2px var(--accent-hover); } :where([data-ui="2"][data-scheme="dark"]) .hc-dot-part { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent-hover); } @keyframes ui3-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } } :where([data-ui="2"]) .hc-now { position: absolute; transform: translate(calc(-100% + 14px), calc(-100% - 16px)); padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-size: 13px; color: var(--text-2); background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px #fff, 0 10px 22px -12px rgb(96 62 38 / 0.45); } :where([data-ui="2"]) .hc-now.is-below { transform: translate(calc(-100% + 14px), 16px); } :where([data-ui="2"]) .hc-now b { color: var(--text); font-weight: 650; } :where([data-ui="2"][data-scheme="dark"]) .hc-now { background: rgb(16 22 26 / 0.88); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px color-mix(in srgb, var(--accent-hover) 28%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .hc-now b { color: #fff; } :where([data-ui="2"]) .hc-plot:hover .hc-now, :where([data-ui="2"]) .hc-plot:focus-visible .hc-now { opacity: 0; } /* слой наведения: невидимые колонки по дням (подсказка — общая .chart-tip) */ :where([data-ui="2"]) .hc-plot .bars { position: absolute; inset: 0; display: flex; gap: 0; align-items: flex-end; } :where([data-ui="2"]) .hc-plot .bar-col { flex: 1 1 0; height: 100%; border-radius: 8px; background: none; } :where([data-ui="2"]) .hc-plot .bar { position: relative; display: block; width: 100%; max-width: none; height: var(--hr); background: none !important; box-shadow: none !important; opacity: 1 !important; border-radius: 0; animation: none !important; } :where([data-ui="2"]) .td-hero[data-mode="units"] .hc-plot .bar { height: var(--hu); } :where([data-ui="2"]) .hc-plot .bar-col.is-active { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent)); } :where([data-ui="2"]) .hc-plot .bar-col.is-active .bar::before { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .hc-plot .bar-col.is-active .bar::before { box-shadow: inset 0 0 0 2.5px var(--accent-hover), 0 0 10px var(--accent); } :where([data-ui="2"]) .hc-x { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } :where([data-ui="2"]) .hc-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } :where([data-ui="2"]) .hc-x span.is-first { transform: translateX(-30%); } :where([data-ui="2"]) .hc-x span.is-last { transform: translateX(-70%); color: var(--text-2); } /* линия «рисуется» при открытии экрана */ :where([data-ui="2"]) .screen-enter :is(.hc-ln, .hc-ln7, .hc-glow) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ui3-draw 1.1s var(--ease-soft) .1s forwards; } :where([data-ui="2"]) .screen-enter :is(.hc-ln7, .hc-glow) { animation-delay: .7s; animation-duration: .7s; } :where([data-ui="2"]) .screen-enter :is(.hc-area, .hc-area7, .hc-marks) { animation: ui2-fade .6s ease .9s both; } @keyframes ui3-draw { to { stroke-dashoffset: 0; } } /* «Для собственника» */ :where([data-ui="2"]) .td-owner { display: flex; flex-direction: column; min-width: 0; padding: 20px 18px 16px; border-radius: var(--radius-xl); } :where([data-ui="2"]) .td-sect { margin: 0 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } :where([data-ui="2"]) .orow { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 12px 6px; border-radius: 16px; color: inherit; text-decoration: none; transition: background-color .25s var(--ease-soft); } :where([data-ui="2"]) .orow + .orow::before { content: ""; position: absolute; left: 60px; right: 6px; top: 0; height: 1px; background: var(--grid-line); } :where([data-ui="2"]) .orow:hover { background: rgb(255 255 255 / 0.5); color: inherit; } :where([data-ui="2"][data-scheme="dark"]) .orow:hover { background: rgb(255 255 255 / 0.035); } :where([data-ui="2"]) .oi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 30%, #fff), var(--accent-2) 50%, var(--warm-light)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 8px 18px -10px var(--accent); } :where([data-ui="2"]) .oi .ic { width: 20px; height: 20px; } :where([data-ui="2"]) .oi .ic-duo path[opacity] { fill: currentColor; opacity: .25; } :where([data-ui="2"][data-scheme="dark"]) .oi { width: 36px; height: 36px; border-radius: 11px; color: var(--accent-hover); background: radial-gradient(100% 100% at 50% 0%, rgb(255 255 255 / 0.1), transparent 60%), var(--surface-3); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(255 255 255 / 0.05), 0 6px 14px -6px rgb(0 0 0 / 0.8); } :where([data-ui="2"]) .orow-t { display: flex; flex-direction: column; min-width: 0; } :where([data-ui="2"]) .orow-l { font-size: 13.5px; font-weight: 500; color: var(--text-2); } :where([data-ui="2"]) .orow-v { margin: 2px 0 2px; font-size: 32px; line-height: 1.08; font-weight: 300; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } :where([data-ui="2"][data-scheme="dark"]) .orow-v { font-weight: 600; font-size: 28px; } :where([data-ui="2"]) .orow-v .kpi-cur { font-size: .5em; font-weight: 450; letter-spacing: 0; color: var(--muted); } :where([data-ui="2"]) .orow-v .na { font-size: 15px; letter-spacing: 0; } :where([data-ui="2"]) .orow-s { font-size: 13px; color: var(--muted); line-height: 1.4; } :where([data-ui="2"]) .orow .trend { margin-top: 4px; } :where([data-ui="2"]) .orow.tone-red .orow-v { color: var(--red); } /* «Ждут вашего решения» — тёмная акцентная плитка (как в «Шёлке»; в тёмной теме — янтарный свет «Обсидиана») */ :where([data-ui="2"]) .td-decide { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 18px 18px 16px; border-radius: 22px; color: #F4ECE4; text-decoration: none; overflow: hidden; background: radial-gradient(120% 80% at 100% 100%, rgb(242 180 138 / 0.4), transparent 60%), radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 60%), #211B18; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 26px 50px -26px rgb(40 24 14 / 0.65); transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft); } :where([data-ui="2"]) .td-decide:hover { color: #F4ECE4; transform: translateY(-2px); } :where([data-ui="2"]) .td-decide-l { font-size: 13.5px; font-weight: 500; color: rgb(244 236 228 / 0.85); } :where([data-ui="2"]) .td-decide-n { font-size: 64px; line-height: .95; font-weight: 250; letter-spacing: -0.04em; margin: 4px 0 2px; background: linear-gradient(180deg, #FFFFFF, #F6CFAF); -webkit-background-clip: text; background-clip: text; color: transparent; } :where([data-ui="2"]) .td-decide-s { font-size: 13px; color: rgb(244 236 228 / 0.82); } :where([data-ui="2"]) .td-decide-q { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: #FFF8F1; } :where([data-ui="2"]) .td-decide-r { margin-top: 8px; font-size: 13px; color: rgb(244 236 228 / 0.85); } :where([data-ui="2"]) .td-decide-r b { display: inline-block; margin-right: 4px; padding: 2px 10px; border-radius: 999px; background: rgb(255 120 95 / 0.2); color: #FFC1B2; font-weight: 650; } :where([data-ui="2"]) .td-decide-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); font-size: 13.5px; font-weight: 600; color: #fff; } :where([data-ui="2"]) .td-decide-go .ic { width: 15px; height: 15px; } :where([data-ui="2"]) .td-decide:hover .td-decide-go { background: rgb(255 255 255 / 0.2); } :where([data-ui="2"]) .td-decide.is-calm { background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent-2) 36%, transparent), transparent 60%), #211B18; } :where([data-ui="2"][data-scheme="dark"]) .td-decide { color: var(--text); background: radial-gradient(80% 120% at 0% 0%, rgb(244 188 92 / 0.16), transparent 70%), radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), #12171B; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(244 188 92 / 0.2), 0 20px 40px -24px rgb(0 0 0 / 0.9); } :where([data-ui="2"][data-scheme="dark"]) .td-decide-n { background: linear-gradient(180deg, #FFFFFF 30%, #FFD9A0); -webkit-background-clip: text; background-clip: text; font-weight: 600; } :where([data-ui="2"][data-scheme="dark"]) .td-decide-l, :where([data-ui="2"][data-scheme="dark"]) .td-decide-s, :where([data-ui="2"][data-scheme="dark"]) .td-decide-r { color: var(--text-2); } :where([data-ui="2"][data-scheme="dark"]) .td-decide-q { color: var(--text); } :where([data-ui="2"][data-scheme="dark"]) .td-decide-r b { background: rgb(244 188 92 / 0.14); color: #FFD38A; box-shadow: inset 0 0 0 1px rgb(244 188 92 / 0.3); } /* ---------- Плитки ---------- */ :where([data-ui="2"]) .kpis { gap: var(--tile-gap); } :where([data-ui="2"]) .td-kpis { margin-bottom: var(--gap-xl); } :where([data-ui="2"]) .td-kpis .kpis { display: flex; flex-wrap: wrap; } :where([data-ui="2"]) .td-kpis .kpi { flex: 1 1 200px; } :where([data-ui="2"]) .kpi { padding: var(--tile-p); border-radius: var(--radius-lg); transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), background-color .3s; } :where([data-ui="2"]) .kpi.tone-red, :where([data-ui="2"]) .kpi.tone-amber, :where([data-ui="2"]) .kpi.tone-green { box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-tile); } :where([data-ui="2"]) .kpi.tone-red { box-shadow: var(--sheen), inset 0 0 0 1px var(--red-line), var(--shadow-tile); } :where([data-ui="2"]) a.kpi-link:hover { transform: translateY(-2px); background: var(--glass-hi); box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), 0 22px 40px -24px color-mix(in srgb, var(--accent) 55%, transparent); } :where([data-ui="2"][data-scheme="dark"]) a.kpi-link:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.01) 45%), var(--glass-tile); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 30px 60px -30px rgb(0 0 0 / 0.9); } :where([data-ui="2"]) .kpi-label { font-size: 13px; font-weight: 500; color: var(--text-2); } :where([data-ui="2"]) .kpi-value { margin-top: 8px; font-weight: 350; letter-spacing: -0.03em; } :where([data-ui="2"][data-scheme="dark"]) .kpi-value { font-weight: 600; } :where([data-ui="2"]) .kpi-unit, :where([data-ui="2"]) .kpi-cur { font-size: .5em; font-weight: 450; color: var(--muted); } :where([data-ui="2"]) .kpi-sub { color: var(--muted); } /* мини-графики: в светлой — градиент акцента, в тёмной — светящиеся столбики */ :where([data-ui="2"]) .sp-b { border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--text-2) 18%, transparent); } :where([data-ui="2"]) .sp-b.sp-on { background: linear-gradient(180deg, var(--accent-2), var(--accent)); } :where([data-ui="2"][data-scheme="dark"]) .sp-b { background: rgb(255 255 255 / 0.12); } :where([data-ui="2"][data-scheme="dark"]) .sp-b.sp-on { background: linear-gradient(180deg, var(--accent-hover), var(--accent)); box-shadow: 0 0 8px -1px color-mix(in srgb, var(--accent) 70%, transparent); } :where([data-ui="2"]) .sp-b.sp-zero { background: color-mix(in srgb, var(--text-2) 16%, transparent); box-shadow: none; } /* ---------- Подсказки: блок-витрина на стекле, карточки — светлее ---------- */ :where([data-ui="2"]) #a-hints { padding: 20px 20px 18px; border-radius: var(--radius-xl); } :where([data-ui="2"]) #a-hints .block-head { margin-bottom: 12px; } :where([data-ui="2"]) .hint { border-radius: 16px; } :where([data-ui="2"]) .hint, :where([data-ui="2"]) .hint:hover, :where([data-ui="2"]) .hint.is-open, :where([data-ui="2"]) .hint-red, :where([data-ui="2"]) .hint-red:hover, :where([data-ui="2"]) .hint-red.is-open { box-shadow: inset 3px 0 0 var(--hint-mark), var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-tile); } :where([data-ui="2"][data-scheme="dark"]) :is(.hint, .hint:hover, .hint.is-open) { box-shadow: inset 3px 0 0 var(--hint-mark), var(--sheen), 0 0 0 1px var(--border); } :where([data-ui="2"]) .hint.is-open { background: var(--surface); } /* раскрытый текст — на плотной поверхности */ :where([data-ui="2"]) .hint-toggle { border-radius: 16px; } :where([data-ui="2"]) .hint-ic { box-sizing: border-box; width: 30px; height: 30px; padding: 5px; border-radius: 50%; } :where([data-ui="2"]) .hint-red .hint-ic { background: var(--red-soft); color: var(--red); } :where([data-ui="2"]) .hint-amber .hint-ic { background: var(--amber-soft); color: var(--amber); } :where([data-ui="2"]) .hint-info .hint-ic { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .hint-info .hint-ic { color: var(--accent-hover); } :where([data-ui="2"]) .hint-inner > * { margin-left: 56px; } :where([data-ui="2"]) .hint-area { border-radius: 999px; padding: 2px 10px; background: color-mix(in srgb, var(--text-2) 8%, transparent); color: var(--text-2); } :where([data-ui="2"]) .hint-more { color: var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .hint-more { color: var(--accent-hover); } :where([data-ui="2"]) .hint-dl { border-radius: 12px; background: var(--surface-2); } :where([data-ui="2"]) details.hint-fold > summary { border-radius: 16px; min-height: 44px; padding: 8px 14px; } :where([data-ui="2"]) .hint-group-title .count { border-radius: 999px; } :where([data-ui="2"]) .hint-none { border-radius: 999px; color: var(--green); } :where([data-ui="2"]) .hint-group-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } :where([data-ui="2"]) #a-hints .hint-group-title { color: var(--text-2); } /* ---------- Таблицы: плотный лист в стеклянной раме ---------- */ :where([data-ui="2"]) .table-wrap { border: 1px solid var(--border); border-radius: 18px; background: var(--sheet); box-shadow: 0 0 0 6px var(--sheet-rim), 0 0 0 7px var(--glass-edge), var(--shadow-glass); } :where([data-ui="2"][data-scheme="dark"]) .table-wrap { box-shadow: 0 0 0 6px var(--sheet-rim), 0 0 0 7px var(--border), var(--shadow-glass); } :where([data-ui="2"]) .main .block > .table-wrap { margin: 7px; } :where([data-ui="2"]) .detail-row .table-wrap { box-shadow: none; margin: 0; } :where([data-ui="2"]) .t th, :where([data-ui="2"]) .t td { background: var(--sheet); } :where([data-ui="2"]) .t thead th { background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border-strong); } /* шапка таблицы в тёмной теме — как в светлой: 13 px, обычный регистр (границы совета: данные не мельче 13 px и не заглавными; 12.11.2026) */ :where([data-ui="2"][data-scheme="dark"]) .t thead th { background: #151B21; color: var(--text-2); } :where([data-ui="2"]) .t tr.is-even > * { background: var(--sheet); } :where([data-ui="2"]) .t tbody tr:not(.detail-row):not(.group-row):hover > * { background: var(--hover); } :where([data-ui="2"]) .t tr.row-red > * { background: var(--red-soft); } :where([data-ui="2"]) .t tr.row-amber > * { background: var(--amber-soft); } :where([data-ui="2"]) .t tr.is-target > * { background: var(--accent-soft); } :where([data-ui="2"]) .t tr.group-row > * { background: var(--surface-3); } :where([data-ui="2"]) .detail-row > td { background: var(--surface-2); } @media (min-width: 701px) { :where([data-ui="2"]) .main .table-wrap, :where([data-ui="2"]) .table-wrap.is-tall { max-height: calc(100vh - var(--topbar-h) - 154px); } :where([data-ui="2"]) .main .detail-row .table-wrap { max-height: none; } } /* ---------- Графики (столбики по дням на других экранах) ---------- */ :where([data-ui="2"]) .chart { padding: 20px 22px 16px; border-radius: var(--radius-xl); } :where([data-ui="2"]) .chart-title { font-size: 14.5px; font-weight: 600; } :where([data-ui="2"]) .chart-grid span { border-top: 1px solid var(--grid-line); } :where([data-ui="2"]) .chart-grid span:nth-child(3) { border-top-color: color-mix(in srgb, var(--text-2) 22%, transparent); } :where([data-ui="2"]) .bar { width: 70%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--series) 30%, transparent); } :where([data-ui="2"]) .bar-col.is-recent .bar { background: linear-gradient(180deg, color-mix(in srgb, var(--series) 62%, #fff), var(--series)); } :where([data-ui="2"][data-scheme="dark"]) .bar { background: color-mix(in srgb, var(--series) 26%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .bar-col.is-recent .bar { background: linear-gradient(180deg, color-mix(in srgb, var(--series) 55%, #fff), var(--series)); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--series) 70%, transparent); } :where([data-ui="2"]) .bar-col.is-active .bar { background: var(--series); } :where([data-ui="2"]) .bar-col.is-active { background: color-mix(in srgb, var(--series) 9%, transparent); border-radius: 8px; } :where([data-ui="2"]) .bar-col.is-wkend { background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: 6px; } :where([data-ui="2"]) .bar-col.is-zero .bar { background: color-mix(in srgb, var(--text-2) 25%, transparent); box-shadow: none; } :where([data-ui="2"]) .lg::before { border-radius: 3px; } :where([data-ui="2"]) .lg-past::before { background: color-mix(in srgb, var(--series) 30%, transparent); } :where([data-ui="2"]) .chart-avg { border-top: 2px dashed #C9713D; box-shadow: none; } :where([data-ui="2"]) .lg-avg::before { border-top: 2px dashed #C9713D; } :where([data-ui="2"][data-scheme="dark"]) .chart-avg, :where([data-ui="2"][data-scheme="dark"]) .lg-avg::before { border-top-color: rgb(255 255 255 / 0.6); } :where([data-ui="2"][data-scheme="dark"]) .chart { --series: var(--accent); } :where([data-ui="2"][data-scheme="dark"]) .chart-green { --series: var(--green-mark); } /* подсказка графика — стеклянная таблетка */ :where([data-ui="2"]) .chart-tip { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px #fff, 0 12px 26px -12px rgb(96 62 38 / 0.45); } :where([data-ui="2"][data-scheme="dark"]) .chart-tip { color: var(--text); background: rgb(16 22 26 / 0.94); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px color-mix(in srgb, var(--accent-hover) 30%, transparent), 0 12px 26px -12px rgb(0 0 0 / 0.8); } /* шкалы в ячейках */ :where([data-ui="2"]) .cbar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); } :where([data-ui="2"]) .cbar-fill { border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); } :where([data-ui="2"][data-scheme="dark"]) .cbar-fill { box-shadow: 0 0 8px -1px color-mix(in srgb, var(--accent) 60%, transparent); } :where([data-ui="2"]) .cbar-green { background: var(--green-mark); } :where([data-ui="2"]) .cbar-red { background: var(--red-mark); } :where([data-ui="2"]) .cbar-amber { background: var(--amber-mark); } :where([data-ui="2"]) .cbar-gray { background: var(--gray-mark); } /* ---------- Кнопки, поля, метки ---------- */ :where([data-ui="2"]) .btn { border-radius: 999px; padding: 6px 16px; font-weight: 550; } :where([data-ui="2"]) .btn-icon { padding: 0; } :where([data-ui="2"]) .btn-primary { border-color: transparent; color: var(--on-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 18px -10px var(--accent); } :where([data-ui="2"]) .btn-primary:hover { border-color: transparent; background: var(--accent-hover); color: var(--on-accent); } :where([data-ui="2"][data-scheme="dark"]) .btn-primary { background: linear-gradient(180deg, var(--accent-hover), var(--accent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 22px -6px color-mix(in srgb, var(--accent) 60%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .main .btn:not(.btn-primary, .btn-quiet, .btn-ghost, .btn-soft, .btn-link) { background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03)), var(--surface); } :where([data-ui="2"]) .btn-soft { color: var(--accent-deep); } :where([data-ui="2"][data-scheme="dark"]) .btn-soft { color: var(--accent-hover); } :where([data-ui="2"]) input[type="text"], :where([data-ui="2"]) input[type="password"], :where([data-ui="2"]) input[type="search"], :where([data-ui="2"]) input[type="date"], :where([data-ui="2"]) input[type="number"], :where([data-ui="2"]) input:not([type]), :where([data-ui="2"]) select, :where([data-ui="2"]) textarea { border-radius: 12px; } :where([data-ui="2"]) .chip { background: var(--glass-tile); } :where([data-ui="2"]) .chip:hover { background: var(--glass-hi); } :where([data-ui="2"][data-scheme="dark"]) .chip { background: rgb(255 255 255 / 0.04); } :where([data-ui="2"]) .pz-presets .chip.is-on, :where([data-ui="2"]) .pm-filters .chip.is-on { color: var(--accent-deep); } :where([data-ui="2"][data-scheme="dark"]) .pz-presets .chip.is-on, :where([data-ui="2"][data-scheme="dark"]) .pm-filters .chip.is-on { color: var(--accent-hover); box-shadow: 0 0 16px -6px var(--accent); } :where([data-ui="2"]) .tag { border-radius: 999px; padding: 1px 9px; } :where([data-ui="2"]) .count { border-radius: 999px; } :where([data-ui="2"]) .badge { border-radius: 999px; } :where([data-ui="2"]) .filters { border-radius: var(--radius-lg); padding: 14px; } :where([data-ui="2"]) .notice { border-radius: 16px; } /* ---------- Карточки экранов ---------- */ :where([data-ui="2"]) :is(.ap, .hc, .run, .aph, .pm-card, .ship, .agent, .j-body, .dt-card, .plan-card, .funnel, details.pm-aa, .pm-cg) { border-radius: var(--radius-lg); } :where([data-ui="2"]) .ap.is-decided.ap-done { box-shadow: inset 3px 0 0 var(--green-mark), var(--card-edge), var(--shadow-tile); } :where([data-ui="2"]) .ap.is-decided.ap-failed { box-shadow: inset 3px 0 0 var(--red-mark), var(--card-edge), var(--shadow-tile); } :where([data-ui="2"]) .ap-kind, :where([data-ui="2"]) .ap-kind-sm, :where([data-ui="2"]) .ap-kind-warm, :where([data-ui="2"]) .ap-kind-accent { box-sizing: border-box; width: 34px; height: 34px; padding: 7px; margin-top: 0; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); } :where([data-ui="2"][data-scheme="dark"]) :is(.ap-kind, .ap-kind-sm, .ap-kind-warm, .ap-kind-accent) { color: var(--accent-hover); } :where([data-ui="2"]) .ap-kind .ic { width: 20px; height: 20px; } :where([data-ui="2"]) .ap-change, :where([data-ui="2"]) .ap-items-wrap, :where([data-ui="2"]) .calc, :where([data-ui="2"]) .ap-result, :where([data-ui="2"]) .ap-text { border-radius: 12px; } :where([data-ui="2"]) :is(.hc-amber, .run-amber) { box-shadow: inset 3px 0 0 var(--amber-mark), var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-tile); background: var(--glass-tile); } :where([data-ui="2"]) :is(.hc-red, .run-red, .ship-red) { box-shadow: inset 3px 0 0 var(--red-mark), var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-tile); background: var(--glass-tile); } :where([data-ui="2"][data-scheme="dark"]) :is(.hc-amber, .run-amber) { box-shadow: inset 3px 0 0 var(--amber-mark), var(--sheen), 0 0 0 1px var(--border); } :where([data-ui="2"][data-scheme="dark"]) :is(.hc-red, .run-red, .ship-red) { box-shadow: inset 3px 0 0 var(--red-mark), var(--sheen), 0 0 0 1px var(--border); } :where([data-ui="2"]) .j-ic { box-shadow: 0 0 0 4px transparent, inset 0 0 0 1px var(--border); background: var(--surface); } :where([data-ui="2"]) details.j-daybox { border-radius: var(--radius-lg); } :where([data-ui="2"]) .chat { overflow: hidden; } :where([data-ui="2"]) .bubble { border-radius: 16px; } :where([data-ui="2"]) .thread-link[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } /* ---------- Пустые состояния ---------- */ :where([data-ui="2"]) .empty { border-radius: var(--radius-xl); } :where([data-ui="2"]) .empty:has(.empty-art img) { background: none; box-shadow: none; } :where([data-ui="2"]) :is(.chart, .td-hero, #a-hints) .empty { background: none; box-shadow: none; } /* ---------- Окна и всплывающее ---------- */ :where([data-ui="2"]) .dlg-box, :where([data-ui="2"]) .text-dlg { border-radius: 24px; background: var(--pop); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); } :where([data-ui="2"]) .dlg-box::backdrop, :where([data-ui="2"]) .text-dlg::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :where([data-ui="2"]) .toast { border-radius: 999px; } :where([data-ui="2"]) .update-bar { border-radius: 18px; } :where([data-ui="2"][data-scheme="dark"]) :is(.dlg-box, .text-dlg) { box-shadow: var(--shadow-pop), 0 0 0 1px var(--border-strong); } /* ---------- Вход ---------- */ :where([data-ui="2"]) .login { background: none; } :where([data-ui="2"]) .login-card { border-radius: 28px; padding: 8px 34px 34px; } :where([data-ui="2"]) .login-card > h1 { font-size: 28px; font-weight: 350; letter-spacing: -0.03em; } :where([data-ui="2"][data-scheme="dark"]) .login-card > h1 { font-weight: 600; } /* ---------- Фокус: кольцо видно и на стекле ---------- */ :where([data-ui="2"]) :is(.nav-link, .nav-collapse, .topbar .btn, .pill, .orow, .td-decide, a.kpi-link, .hc-switch button):focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); } /* ---------- Плотные поверхности вместо стекла: без backdrop-filter и при «меньше прозрачности» ---------- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :root[data-ui="2"] { --glass: #FCF8F4; --glass-hi: #FFFFFF; --glass-tile: #FFFFFF; } :root[data-ui="2"][data-scheme="dark"] { --glass: #10151A; --glass-hi: #151B21; --glass-tile: #12181D; } } @media (prefers-reduced-transparency: reduce) { :root[data-ui="2"] { --glass: #FCF8F4; --glass-hi: #FFFFFF; --glass-tile: #FFFFFF; --glass-blur: none; } :root[data-ui="2"][data-scheme="dark"] { --glass: #10151A; --glass-hi: #151B21; --glass-tile: #12181D; --glass-blur: none; } } /* ---------- Узкие экраны ---------- */ @media (max-width: 1180px) { :where([data-ui="2"]) .td-grid { grid-template-columns: minmax(0, 1fr); } :where([data-ui="2"]) .td-owner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } :where([data-ui="2"]) .td-owner .td-sect { grid-column: 1 / -1; } :where([data-ui="2"]) .td-owner .orow + .orow::before { content: none; } :where([data-ui="2"]) .td-owner .td-decide { margin-top: 0; } } @media (max-width: 860px) { :where([data-ui="2"]) .sidenav { margin: 0; top: var(--topbar-h); height: auto; border-radius: 0 0 24px 24px; background: var(--glass-hi); } :where([data-ui="2"][data-scheme="dark"]) .sidenav { background: #10151A; } :where([data-ui="2"]) .nav-link[aria-current="page"]::before { display: none; } :root[data-ui="2"] { --glass-blur: blur(14px) saturate(150%); } /* на телефоне размытие легче */ :where([data-ui="2"]) .ui-l1, :where([data-ui="2"]) .ui-l2 { animation: none; } } @media (max-width: 700px) { :where([data-ui="2"]) .main { padding: 14px 16px 104px; } :where([data-ui="2"]) .hero h1 { font-size: 30px; } :where([data-ui="2"]) .screen-head h1 { font-size: 26px; } :where([data-ui="2"]) .td-hero { padding: 18px 16px 12px; } :where([data-ui="2"]) .td-owner { grid-template-columns: minmax(0, 1fr); padding: 16px 12px 12px; } :where([data-ui="2"]) .hc-side { align-items: flex-start; } :where([data-ui="2"]) .hc-legend { align-items: flex-start; } :where([data-ui="2"]) .hc-num { font-size: 48px; } :where([data-ui="2"]) .hc-plot { height: 190px; margin-top: 16px; } :where([data-ui="2"]) .hc-now { display: none; } :where([data-ui="2"]) .td-kpis .kpi { flex-basis: 140px; } :where([data-ui="2"]) #a-hints { padding: 14px 12px; } :where([data-ui="2"]) .hint-inner > * { margin-left: 14px; } :where([data-ui="2"]) .main .block > .table-wrap { margin: 6px 4px; } :where([data-ui="2"]) .table-wrap { box-shadow: 0 0 0 4px var(--sheet-rim), var(--shadow-tile); } } /* ---------- Без движения ---------- */ @media (prefers-reduced-motion: reduce) { :where([data-ui="2"]) .ui-l1, :where([data-ui="2"]) .ui-l2, :where([data-ui="2"]) .hc-dot::after { animation: none !important; } :where([data-ui="2"]) .screen-enter :is(.hc-ln, .hc-ln7, .hc-glow, .hc-area, .hc-area7, .hc-marks) { animation: none !important; stroke-dashoffset: 0; opacity: 1; } :where([data-ui="2"]) :is(.kpi, .td-decide, .orow) { transition: none; } :where([data-ui="2"]) a.kpi-link:hover, :where([data-ui="2"]) .td-decide:hover { transform: none; } } /* ---------- Доводка по снимкам (12.11.2026) ---------- */ :where([data-ui="2"]) .td-kpis .kpi { flex: 1 1 230px; } :where([data-ui="2"]) details.hint-fold > summary .hint-group-title { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); } /* меню: полоса прокрутки видна только при наведении */ :where([data-ui="2"]) .sidenav { scrollbar-width: thin; scrollbar-color: transparent transparent; } :where([data-ui="2"]) .sidenav:hover { scrollbar-color: var(--border-strong) transparent; } /* «Вопросы»: формы и карточки вопросов — на плотной поверхности, разделы с формами — в стеклянной раме */ :where([data-ui="2"]) :is(#c-own, #c-big, #c-lh) { padding: 20px 22px 18px; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--glass-hi), var(--glass)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-glass); } :where([data-ui="2"][data-scheme="dark"]) :is(#c-own, #c-big, #c-lh) { background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.008) 40%), var(--glass); box-shadow: var(--sheen), 0 0 0 1px var(--glass-edge), var(--shadow-glass); } :where([data-ui="2"]) .ap-card { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-edge), var(--shadow-tile); } :where([data-ui="2"]) .ap-card > h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } :where([data-ui="2"]) .ap-card .ap-list > li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } :where([data-ui="2"]) .own-q-row .btn-primary { flex: none; } /* светлая: объёмное кольцо из макета «Шёлк» — над шапкой справа, за стеклом; в тёмной теме и на телефоне нет */ :where([data-ui="2"][data-scheme="light"]) .ui-l3 { display: block; width: 400px; height: 400px; left: 62%; top: -170px; border-radius: 50%; border: 36px solid transparent; background: linear-gradient(140deg, rgb(255 255 255 / 0.95), color-mix(in srgb, var(--warm-light) 85%, transparent) 40%, color-mix(in srgb, var(--accent-2) 80%, transparent)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); transform: rotate(-24deg) scaleY(.62); opacity: .42; } @media (max-width: 860px) { :where([data-ui="2"]) .ui-l3 { display: none !important; } } /* эмблема в шапке: белый фон картинки растворяется краем (как на входе) — без белого квадрата над прозрачной шапкой */ :where([data-ui="2"]) .brand-emblem img { -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); mix-blend-mode: normal; } :where([data-ui="2"][data-scheme="dark"]) .brand-emblem img { -webkit-mask-image: none; mask-image: none; mix-blend-mode: screen; } /* «Данные свежие · …» на узком экране переносится целыми частями */ :where([data-ui="2"]) details.sources > summary { flex-wrap: wrap; column-gap: 6px; } :where([data-ui="2"]) details.sources > summary > span { white-space: nowrap; } @media (max-width: 560px) { :where([data-ui="2"]) details.sources > summary { border-radius: 16px; } } /* сцена — позади всего содержимого в корневом слое (z-index: −1): картинки «керамики» с умножением ложатся прямо на свет, без белых подложек */ :where([data-ui="2"]) .ui-scene { z-index: -1; } :where([data-ui="2"]) .app, :where([data-ui="2"]) .login { z-index: auto; } /* герой подстраивается под свою ширину: число — от ширины блока; в узком блоке переключатель и подписи — строкой под числом */ :where([data-ui="2"]) .td-hero { container-type: inline-size; } :where([data-ui="2"]) .hc-num { font-size: clamp(46px, 9.4cqi, 76px); } @container (max-width: 660px) { .td-hero .hc-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; } .td-hero .hc-legend { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; } } /* ===================================================================================================================== Второй проход (12.11.2026): ниша маскота. Маскот полного размера (118 px, mascot.css: right 14, bottom 8) не должен закрывать данные ни при какой прокрутке: на компьютере у содержимого справа постоянная ниша, в ней — свет и стеклянный постамент под ёжиком (как в макетах: plinth в «Шёлке», pool в «Обсидиане»). На телефоне — как было. ===================================================================================================================== */ :where([data-ui="2"]) .ui-niche, :where([data-ui="2"]) .ui-plinth { display: none; } @media (min-width: 861px) { :root[data-ui="2"] { --masc-niche: 164px; } :where([data-ui="2"]) .main { padding-right: var(--masc-niche); } :where([data-ui="2"]) .main:has(#chat-root) { padding-right: var(--masc-niche); } /* свет за ёжиком: вытянутое пятно снизу вверх — ниша читается как «сцена» маскота, а не пустая полоса */ :where([data-ui="2"]) .ui-niche { display: block; right: -70px; bottom: -120px; width: 290px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 30%, transparent), color-mix(in srgb, var(--warm-light) 18%, transparent) 55%, transparent); } /* стеклянный постамент */ :where([data-ui="2"]) .ui-plinth { display: block; right: -8px; bottom: -14px; width: 160px; height: 44px; border-radius: 50%; background: radial-gradient(60% 70% at 50% 35%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.2) 75%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(255 255 255 / 0.7), 0 0 34px color-mix(in srgb, var(--warm-light) 70%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .ui-niche { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 55%, transparent); } :where([data-ui="2"][data-scheme="dark"]) .ui-plinth { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 72%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-hover) 28%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent); } } /* маскот: мягкая тень под ногами в тон сцены (сам рисунок и размер — из mascot.css, не меняются) */ :where([data-ui="2"]) .masc-btn { filter: drop-shadow(0 14px 14px rgb(60 40 24 / 0.28)); } /* тёмная тема: подсветка маскота по контуру цветом кабинета — тёмные иголки и шляпы не сливаются с фоном (12.11.2026, вместо перегенерации маскотов) */ :where([data-ui="2"][data-scheme="dark"]) .masc-btn { filter: drop-shadow(0 16px 16px rgb(0 0 0 / 0.6)) drop-shadow(0 0 1.5px color-mix(in srgb, var(--accent) 80%, #fff)) drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent)); } /* ---------- Окно помощника-маскота: плотное «стекло» поверх сцены, читается в обеих темах ---------- */ :where([data-ui="2"]) .masc-pop, :where([data-ui="2"]) .masc-offer { border-radius: 22px; background: var(--pop); color: var(--text); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border), inset 0 1px 0 rgb(255 255 255 / 0.6); } :where([data-ui="2"][data-scheme="dark"]) :is(.masc-pop, .masc-offer) { box-shadow: var(--shadow-pop), 0 0 0 1px var(--border-strong), 0 0 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); } :where([data-ui="2"]) :is(.masc-pop, .masc-offer)::after { background: var(--pop); } :where([data-ui="2"]) .masc-face { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 30%, #fff), var(--accent-2) 60%, var(--warm-light)); } :where([data-ui="2"][data-scheme="dark"]) .masc-face { background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 40%, transparent), var(--surface-3)); } :where([data-ui="2"]) .masc-say { border-radius: 14px; background: var(--accent-soft); } :where([data-ui="2"]) .masc-game { border-radius: 14px; background: var(--surface-2); } :where([data-ui="2"]) .masc-n { background: var(--accent); color: var(--on-accent); } :where([data-ui="2"][data-scheme="dark"]) .masc-link, :where([data-ui="2"][data-scheme="dark"]) .masc-note { color: var(--accent-hover); } /* светлая: объёмные шары из «Шёлка» в нише маскота — над ним, за пределами содержимого */ @media (min-width: 861px) { :where([data-ui="2"][data-scheme="light"]) .ui-niche::before, :where([data-ui="2"][data-scheme="light"]) .ui-niche::after { content: ""; position: absolute; border-radius: 50%; } :where([data-ui="2"][data-scheme="light"]) .ui-niche::before { width: 96px; height: 96px; left: 92px; top: 34px; background: radial-gradient(circle at 32% 28%, #fff 0, color-mix(in srgb, var(--accent-2) 14%, #fff) 14%, color-mix(in srgb, var(--accent-2) 70%, #fff) 48%, var(--accent-2) 80%, var(--accent) 100%); box-shadow: 0 30px 40px -24px color-mix(in srgb, var(--accent) 60%, transparent); animation: ui3-float 14s ease-in-out infinite alternate; } :where([data-ui="2"][data-scheme="light"]) .ui-niche::after { width: 52px; height: 52px; left: 168px; top: 150px; background: radial-gradient(circle at 34% 30%, #fff 0, #FCE6D5 16%, #F3B488 55%, #D9824E 100%); box-shadow: 0 24px 30px -18px rgb(160 80 30 / 0.45); animation: ui3-float 17s ease-in-out -4s infinite alternate; } } @keyframes ui3-float { to { transform: translateY(-18px); } } @media (prefers-reduced-motion: reduce) { :where([data-ui="2"]) .ui-niche::before, :where([data-ui="2"]) .ui-niche::after { animation: none !important; } } /* «Обсидиан»: имя в приветствии светится цветом кабинета (как в макете) */ :where([data-ui="2"][data-scheme="dark"]) .hero-name { background: linear-gradient(180deg, #FFFFFF 10%, color-mix(in srgb, var(--accent-hover) 75%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 40%, transparent)); } /* списки с цифрами вне таблиц («Остатки → Сезон», «Акции» — акции и события) — тоже плотный лист в стеклянной раме */ :where([data-ui="2"]) :is(.season-list, .pm-acts, .pm-events) { margin: 7px; padding: 6px 16px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--border); list-style: none; box-shadow: 0 0 0 6px var(--sheet-rim), 0 0 0 7px var(--glass-edge), var(--shadow-glass); } :where([data-ui="2"][data-scheme="dark"]) :is(.season-list, .pm-acts, .pm-events) { box-shadow: 0 0 0 6px var(--sheet-rim), 0 0 0 7px var(--border), var(--shadow-glass); } :where([data-ui="2"]) :is(.season-list, .pm-acts, .pm-events) > li + li { border-top: 1px solid var(--border); } :where([data-ui="2"]) :is(.pm-acts, .pm-events) > li { padding: 8px 0; } :where([data-ui="2"]) :is(.pm-acts, .pm-events) { gap: 0; } /* «Акции → Хочу скидку»: кнопка «Ответить по совету панели» — справа, пояснение слева (правка Олега 12.11.2026) */ :where([data-ui="2"]) .dt-tools:has(> .dt-tools-end) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } :where([data-ui="2"]) .dt-tools-end { margin-left: auto; display: inline-flex; flex: none; } :where([data-ui="2"]) .pm-bulk-note { margin: 0 0 8px; } /* Ссылка «Старый вид / Новый вид» внизу меню — на время обкатки нового дизайна (12.11.2026). Действует в обоих видах. */ .ui-ver { display: block; margin: 6px 12px 2px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .ui-ver:hover { color: var(--text); } :where([data-ui="2"][data-nav="mini"]) .ui-ver { display: none; } /* Длинное название в первой колонке таблицы переносится на строки, а не наезжает на соседние колонки (AkiVika, «Акции»: «КБ-507 · Комбинезон поддева с начесом…» — правка Олега 12.11.2026). */ :where([data-ui="2"]) .t tbody .sticky-col { white-space: normal; overflow-wrap: anywhere; max-width: 300px; } @media (min-width: 701px) { :where([data-ui="2"]) .t tbody .sticky-col { min-width: 200px; } :where([data-ui="2"]) #tbl-promo-matrix tbody th.sticky-col { min-width: 240px; max-width: 260px; } } /* у многострочной кнопки раскрытия нет отрицательных полей — иначе строка под ней («43 карточки · …») наезжала на последнюю строку названия */ :where([data-ui="2"]) .t tbody .sticky-col .row-toggle { display: flex; align-items: flex-start; max-width: 100%; height: auto; min-height: 0; margin: 0 0 2px; padding: 1px 0; white-space: normal; text-align: left; line-height: 1.3; } :where([data-ui="2"]) .t tbody .sticky-col .row-toggle > .chev { flex: none; margin-top: 2px; } :where([data-ui="2"]) .t tbody .sticky-col .row-toggle > span:not(.chev) { min-width: 0; }