/* ======================= ytrend — v4e UI Темы (DEMO+9.8): - Claude Light/Dark — кремовый + терракот - Business Light/Dark — графитовый + холодный синий - Neutral Light/Dark — без обводок, мягкие тени (Linear/Vercel/Stripe-style) Архитектура CSS-переменных (ADR-111): - --bg-* / --border-* / --shadow-* / --radius-* — семантические роли - --ui-font / --mono-font — шрифт UI и моноширинный (числа) - --line / --line-bright оставлены как алиасы для обратной совместимости ======================= */ /* === ПЕРЕМЕННЫЕ: CLAUDE LIGHT (DEFAULT) — кремовый + терракот === */ /* ============================================================ Inter Variable (opsz) — self-hosted, OFL. Семейство 'Inter Variable'. Пресет шрифта 'inter-variable' (font.js) + карточка в настройках. Оптическая ось (opsz) даёт «собранный», плотный вид на крупном тексте. Сабсеты latin/latin-ext/cyrillic/cyrillic-ext — браузер грузит нужный. ============================================================ */ @font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900; src:url(fonts/inter-cyrillic-ext-opsz-normal.woff2) format('woff2-variations'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;} @font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900; src:url(fonts/inter-cyrillic-opsz-normal.woff2) format('woff2-variations'); 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-opsz-normal.woff2) format('woff2-variations'); 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-opsz-normal.woff2) format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root, :root[data-theme="light"], :root[data-theme="claude-light"] { /* Фон и поверхности */ --bg: #FAF9F6; /* кремовый */ --bg-elevate: #F2EFE8; /* чуть темнее для интерактивных */ --card: #FFFFFF; /* белый контраст */ --card-hover: #FBFAF7; /* Текст — тёплый угольный */ --ink: #2E2A24; --ink-soft: #44403A; --muted: #8B7F72; /* тёплый серо-бежевый */ --mute: #B3A99B; /* Границы (ADR-111: семантические роли вместо одного --line) */ --border-card: #E8E3D8; /* рамки карточек, попапов, dropdown */ --border-input: #E8E3D8; /* рамки контролов: input, select, chip, icon-btn */ --border-divider: #E8E3D8; /* разделители ВНУТРИ блоков (border-bottom шапок и т.п.) */ --border-strong: #D4CDBE; /* усиленный border (hover, focus, выделенный chip) */ /* Алиасы для совместимости (DEMO+9.7.1 и раньше) */ --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — терракотовый, чуть темнее чем в тёмной, для контраста на светлом */ --accent: #C46A4A; --accent-soft: rgba(196, 106, 74, 0.08); --accent-glow: rgba(196, 106, 74, 0.18); --accent2: #E08E6D; /* Семантические — тёплее */ --good: #4A8F5F; --good-soft: rgba(74, 143, 95, 0.10); --warn: #C79028; --warn-soft: rgba(199, 144, 40, 0.12); --bad: #C2503D; --bad-soft: rgba(194, 80, 61, 0.10); --info: #4A7BA8; --info-soft: rgba(74, 123, 168, 0.10); /* Радиусы (legacy + семантические для DEMO+9.8) */ --r-sm: 10px; --r-md: 14px; --r-lg: 16px; /* ADR-111: семантические радиусы. В Claude/Business совпадают со старыми, в Neutral карточки крупнее (18-20px) — это и даёт «парящий» вид. */ --radius-card: 14px; /* основные карточки и панели */ --radius-control: 10px; /* инпуты, кнопки, chips */ /* Тени — мягкие тёплые */ --shadow: 0 8px 24px rgba(46, 42, 36, 0.06); --shadow-sm: 0 4px 14px rgba(46, 42, 36, 0.05); --shadow-hero: 0 24px 48px -12px rgba(46, 42, 36, 0.12); /* ADR-111: семантическая тень для карточек. В Claude/Business = --shadow-sm, в Neutral усилена и заменяет border-card (border-card: transparent). */ --shadow-card: var(--shadow-sm); /* Шрифты (ADR-111: переменные для UI и mono шрифтов) */ --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono-font: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; /* Управление */ --h-ctl: 44px; --gap: 16px; --pad: 12px; /* Цвета каналов (светлая — приглушённые, но различимые) */ --ch-1: #C46A4A; /* терракот */ --ch-2: #4A7BA8; /* синий */ --ch-3: #4A8F5F; /* зелёный */ --ch-4: #C79028; /* амбер */ --ch-5: #C2503D; /* красный */ --ch-6: #8060B8; /* фиолет */ --ch-7: #B85585; /* розовый */ --ch-8: #4A9B9B; /* тил */ --ch-9: #6B6B6B; /* серый */ } /* === ПЕРЕМЕННЫЕ: CLAUDE DARK — тёплый тёмный + терракот === */ :root[data-theme="dark"], :root[data-theme="claude-dark"] { /* Фон и поверхности */ --bg: #1F1E1C; --bg-elevate: #2A2826; --card: #262421; --card-hover: #2E2C29; /* Текст — тёплый кремовый */ --ink: #F5F4EE; --ink-soft: #E0DED8; --muted: #9B9791; --mute: #6F6B66; /* Границы (ADR-111) */ --border-card: #3A3835; --border-input: #3A3835; --border-divider: #3A3835; --border-strong: #4D4A46; --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — фирменный терракот Claude */ --accent: #D97757; --accent-soft: rgba(217, 119, 87, 0.12); --accent-glow: rgba(217, 119, 87, 0.25); --accent2: #E89B7F; /* Семантические — более приглушённые */ --good: #7FCA8C; --good-soft: rgba(127, 202, 140, 0.12); --warn: #E8BC5C; --warn-soft: rgba(232, 188, 92, 0.12); --bad: #E8857A; --bad-soft: rgba(232, 133, 122, 0.12); --info: #8EB9E0; --info-soft: rgba(142, 185, 224, 0.12); /* Радиусы (ADR-111) */ --radius-card: 14px; --radius-control: 10px; /* Тени */ --shadow: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.22); --shadow-hero: 0 24px 48px -12px rgba(0, 0, 0, 0.45); --shadow-card: var(--shadow-sm); /* Цвета каналов (тёмная) — мягче для читаемости на тёмном */ --ch-1: #D97757; /* терракот */ --ch-2: #8EB9E0; /* голубой */ --ch-3: #7FCA8C; /* зелёный */ --ch-4: #E8BC5C; /* амбер */ --ch-5: #E8857A; /* красный */ --ch-6: #B58FE8; /* фиолет */ --ch-7: #E08EAC; /* розовый */ --ch-8: #7FCFCF; /* тил */ --ch-9: #A8A39C; /* серый */ } /* === ПЕРЕМЕННЫЕ: BUSINESS LIGHT — чистый белый + графитовый синий === */ :root[data-theme="business-light"] { /* Фон и поверхности */ --bg: #F5F6F8; --bg-elevate: #F5F7FA; --card: #FFFFFF; --card-hover: #F0F3F7; /* Текст */ --ink: #1A202C; --ink-soft: #2D3748; --muted: #718096; --mute: #A0AEC0; /* Границы (ADR-111) */ --border-card: #E2E8F0; --border-input: #E2E8F0; --border-divider: #E2E8F0; --border-strong: #CBD5E0; --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — графитовый синий */ --accent: #2D5FAA; --accent-soft: rgba(45, 95, 170, 0.08); --accent-glow: rgba(45, 95, 170, 0.18); --accent2: #4A7BC8; /* Семантические */ --good: #2F855A; --good-soft: rgba(47, 133, 90, 0.10); --warn: #B7791F; --warn-soft: rgba(183, 121, 31, 0.12); --bad: #C53030; --bad-soft: rgba(197, 48, 48, 0.10); --info: #2B6CB0; --info-soft: rgba(43, 108, 176, 0.10); /* Радиусы (ADR-111) */ --radius-card: 14px; --radius-control: 10px; /* Тени */ --shadow: 0 8px 24px rgba(26, 32, 44, 0.06); --shadow-sm: 0 4px 14px rgba(26, 32, 44, 0.05); --shadow-hero: 0 24px 48px -12px rgba(26, 32, 44, 0.12); --shadow-card: var(--shadow-sm); /* Цвета каналов — деловая палитра */ --ch-1: #2D5FAA; /* синий */ --ch-2: #4A9B9B; /* тил */ --ch-3: #2F855A; /* зелёный */ --ch-4: #B7791F; /* амбер */ --ch-5: #C53030; /* красный */ --ch-6: #6B46C1; /* фиолет */ --ch-7: #B83280; /* розовый */ --ch-8: #0987A0; /* голубой */ --ch-9: #4A5568; /* графит */ } /* === ПЕРЕМЕННЫЕ: BUSINESS DARK — графитовый + холодный синий (Timeweb-like) === */ :root[data-theme="business-dark"] { /* Фон и поверхности */ --bg: #0F1419; --bg-elevate: #161C23; --card: #1A2029; --card-hover: #1E2530; /* Текст */ --ink: #E7ECF3; --ink-soft: #CBD5E0; --muted: #8A98AC; --mute: #6B7A90; /* Границы (ADR-111) */ --border-card: #2D3748; --border-input: #2D3748; --border-divider: #2D3748; --border-strong: #3A4659; --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — холодный синий */ --accent: #4A9EFF; --accent-soft: rgba(74, 158, 255, 0.12); --accent-glow: rgba(74, 158, 255, 0.25); --accent2: #6EB4FF; /* Семантические */ --good: #68D391; --good-soft: rgba(104, 211, 145, 0.12); --warn: #F6E05E; --warn-soft: rgba(246, 224, 94, 0.12); --bad: #FC8181; --bad-soft: rgba(252, 129, 129, 0.12); --info: #63B3ED; --info-soft: rgba(99, 179, 237, 0.12); /* Радиусы (ADR-111) */ --radius-card: 14px; --radius-control: 10px; /* Тени */ --shadow: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.22); --shadow-hero: 0 24px 48px -12px rgba(0, 0, 0, 0.45); --shadow-card: var(--shadow-sm); /* Цвета каналов (business dark) */ --ch-1: #4A9EFF; /* синий */ --ch-2: #4FD1C5; /* тил */ --ch-3: #68D391; /* зелёный */ --ch-4: #F6E05E; /* амбер */ --ch-5: #FC8181; /* красный */ --ch-6: #B794F4; /* фиолет */ --ch-7: #F687B3; /* розовый */ --ch-8: #63B3ED; /* голубой */ --ch-9: #A0AEC0; /* графит */ } /* === ПЕРЕМЕННЫЕ: NEUTRAL LIGHT — стиль 2026 (Linear/Vercel/Stripe) === Карточки БЕЗ обводок, парят на мягких тенях. Палитра нейтральная (чёрно-белая), акцент — терракот Claude, чтобы продукт оставался узнаваемым. */ :root[data-theme="neutral-light"] { /* Фон и поверхности — тёплый белый, карточки чисто-белые */ --bg: #F7F7F5; /* тёплый off-white фон страницы */ --bg-elevate: #EFEEEB; /* интерактивные элементы (icon-btn hover) */ --card: #FFFFFF; /* карточки чисто-белые → парят над фоном */ --card-hover: #FAFAF8; /* Текст */ --ink: #1A1A1A; --ink-soft: #3A3A3A; --muted: #707070; --mute: #9A9A9A; /* Границы (ADR-111: семантические роли) + мягкие обводки в Neutral (ADR-112). Карточки получают полупрозрачную мягкую обводку — она почти не видна как «обводка», но разделяет соседние карточки в списке (журнал, План). Linear/Vercel используют тот же подход. */ --border-card: rgba(15, 15, 15, 0.05); /* ⚡ карточки с очень мягкой границей */ --border-input: #E5E5E2; /* инпуты с тонкой границей для usability */ --border-divider: #ECECE8; /* разделители — мягкие */ --border-strong: #D4D4D0; /* hover/focus у инпутов */ --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — терракот (как в Claude темах, identity сохраняется) */ --accent: #C46A4A; --accent-soft: rgba(196, 106, 74, 0.08); --accent-glow: rgba(196, 106, 74, 0.18); --accent2: #E08E6D; /* Семантические */ --good: #4A8F5F; --good-soft: rgba(74, 143, 95, 0.10); --warn: #C79028; --warn-soft: rgba(199, 144, 40, 0.12); --bad: #C2503D; --bad-soft: rgba(194, 80, 61, 0.10); --info: #4A7BA8; --info-soft: rgba(74, 123, 168, 0.10); /* Радиусы (ADR-111: карточки крупнее → «парящий» вид) */ --radius-card: 18px; /* +4px к Claude/Business */ --radius-control: 10px; /* контролы — те же */ /* Тени — усиленные, дают «парящий» эффект */ --shadow: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-hero: 0 20px 48px -12px rgba(0, 0, 0, 0.10); /* ADR-112: --shadow-card усилен для лучшего парения карточек. Двойная тень: близкая (мягкое заземление) + дальняя (атмосфера). */ --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); /* Цвета каналов — приглушённая нейтральная палитра */ --ch-1: #C46A4A; /* терракот (акцент) */ --ch-2: #4A7BA8; /* синий */ --ch-3: #4A8F5F; /* зелёный */ --ch-4: #C79028; /* амбер */ --ch-5: #C2503D; /* красный */ --ch-6: #8060B8; /* фиолет */ --ch-7: #B85585; /* розовый */ --ch-8: #4A9B9B; /* тил */ --ch-9: #6B6B6B; /* серый */ } /* === ПЕРЕМЕННЫЕ: NEUTRAL DARK — графит/уголь, парящие карточки === */ :root[data-theme="neutral-dark"] { /* Фон и поверхности — почти чёрный фон, карточки чуть светлее */ --bg: #0E0E10; /* почти чёрный (как у Vercel) */ --bg-elevate: #1A1A1D; --card: #16161A; /* карточки приподняты светлотой, не границей */ --card-hover: #1C1C20; /* Текст — мягкий белый, не чисто-#FFF (для глаз) */ --ink: #EDEDEF; --ink-soft: #C8C8CC; --muted: #8A8A8E; --mute: #5C5C60; /* Границы (ADR-111 + мягкие обводки в Neutral, ADR-112) */ --border-card: rgba(255, 255, 255, 0.06); /* ⚡ мягкая светлая граница */ --border-input: #2A2A2E; /* тонкая граница инпутов */ --border-divider: #232327; --border-strong: #3A3A3F; --line: var(--border-card); --line-bright: var(--border-strong); /* Акцент — терракот Claude (identity) */ --accent: #D97757; --accent-soft: rgba(217, 119, 87, 0.12); --accent-glow: rgba(217, 119, 87, 0.25); --accent2: #E89B7F; /* Семантические */ --good: #7FCA8C; --good-soft: rgba(127, 202, 140, 0.12); --warn: #E8BC5C; --warn-soft: rgba(232, 188, 92, 0.12); --bad: #E8857A; --bad-soft: rgba(232, 133, 122, 0.12); --info: #8EB9E0; --info-soft: rgba(142, 185, 224, 0.12); /* Радиусы (ADR-111) */ --radius-card: 18px; --radius-control: 10px; /* Тени — для тёмной темы тени работают слабо, но добавляют глубины */ --shadow: 0 4px 20px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-hero: 0 20px 48px -12px rgba(0, 0, 0, 0.55); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); /* Цвета каналов — приглушённая палитра для тёмного фона */ --ch-1: #D97757; /* терракот */ --ch-2: #8EB9E0; /* голубой */ --ch-3: #7FCA8C; /* зелёный */ --ch-4: #E8BC5C; /* амбер */ --ch-5: #E8857A; /* красный */ --ch-6: #B58FE8; /* фиолет */ --ch-7: #E08EAC; /* розовый */ --ch-8: #7FCFCF; /* тил */ --ch-9: #A8A39C; /* серый */ } /* === ПЛАВНОСТЬ ПЕРЕКЛЮЧЕНИЯ ТЕМ (ADR-111) === Чтобы при смене темы цвета переходили плавно (вау-эффект как при body), но hover-состояния оставались быстрыми (.15s) — используем класс-маркер .theme-switching на . Скрипт смены темы навешивает его на 320мс, за это время все цвета плавно перетекают, потом класс снимается и элементы снова откликаются на hover мгновенно. Применяется ко всему дереву (потомкам html.theme-switching) и трогает только свойства которые реально меняются при смене темы. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, fill .25s ease, stroke .25s ease !important; } /* === NEUTRAL: точечные переопределения (ADR-111) === В Neutral темах --border-card: transparent — карточки держатся на тенях. Но на :hover у карточек border-color меняется на --border-strong (видимый цвет), что создаёт «прыжок» — граница появляется откуда не было. Решение: в Neutral hover-эффекты дают усиленную тень вместо появления границы. Также: карточки в Neutral используют --radius-card (18px) для крупных ёмкостей и --shadow-card для усиленной тени. Применяем избирательно к тем элементам где это даст максимум эффекта без поломок. */ :root[data-theme="neutral-light"] .card, :root[data-theme="neutral-dark"] .card, :root[data-theme="neutral-light"] .kpi, :root[data-theme="neutral-dark"] .kpi, :root[data-theme="neutral-light"] .goal, :root[data-theme="neutral-dark"] .goal, :root[data-theme="neutral-light"] .observations-card, :root[data-theme="neutral-dark"] .observations-card, :root[data-theme="neutral-light"] .entry-preview .ep-card, :root[data-theme="neutral-dark"] .entry-preview .ep-card, :root[data-theme="neutral-light"] #screen-plan .summary-box, :root[data-theme="neutral-dark"] #screen-plan .summary-box { border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* Journal-card — это list-row. Радиус оставляем умеренным (14px), тень мягкая чтобы карточки в списке отделялись друг от друга. */ :root[data-theme="neutral-light"] .journal-card, :root[data-theme="neutral-dark"] .journal-card { border-radius: 14px; box-shadow: var(--shadow-sm); } /* Hover у карточек в Neutral — без появления границы, только усиленная тень */ :root[data-theme="neutral-light"] .kpi:hover, :root[data-theme="neutral-dark"] .kpi:hover { border-color: transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } :root[data-theme="neutral-dark"] .kpi:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } /* Channel-card / account-card — это list-rows (тонкая граница нужна для читаемости списка). В Neutral им оставляем --border-input но с радиусом */ :root[data-theme="neutral-light"] .channel-card, :root[data-theme="neutral-dark"] .channel-card, :root[data-theme="neutral-light"] .account-card, :root[data-theme="neutral-dark"] .account-card { border-radius: 14px; } /* Theme-card и font-card в Neutral остаются с border-input — иначе их будет невозможно выбрать визуально. */ /* ============================================================ LINEAR (Spr.6) — flat, хейрлайн-бордеры 1px, тугой радиус, без теней. Акцент-выбираемая семья (ADR-112 расширен). Default-акцент = терракот (глобальный), accent.js перекроет выбором юзера. true-Linear = «Синий». ============================================================ */ :root[data-theme="linear-light"]{ --bg:#FFFFFF; --bg-elevate:#F4F5F8; --card:#FFFFFF; --card-hover:#F8F9FB; --ink:#08090A; --ink-soft:#3C3F44; --muted:#6B7077; --mute:#9499A0; --border-card:#E9EAED; --border-input:#E1E2E6; --border-divider:#EEEFF2; --border-strong:#D3D4D9; --line:var(--border-card); --line-bright:var(--border-strong); --accent:#C46A4A; --accent-soft:rgba(196,106,74,0.08); --accent-glow:rgba(196,106,74,0.18); --accent2:#E08E6D; --good:#3F9E63; --good-soft:rgba(63,158,99,0.10); --warn:#C08A16; --warn-soft:rgba(192,138,22,0.12); --bad:#D64B50; --bad-soft:rgba(214,75,80,0.10); --info:#4783C4; --info-soft:rgba(71,131,196,0.10); --r-sm:6px; --r-md:8px; --r-lg:10px; --radius-card:8px; --radius-control:6px; --shadow:none; --shadow-sm:none; --shadow-hero:none; --shadow-card:none; --ui-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono-font:'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; --h-ctl:44px; --gap:16px; --pad:12px; --ch-1:#C46A4A; --ch-2:#4A7BA8; --ch-3:#4A8F5F; --ch-4:#C79028; --ch-5:#C2503D; --ch-6:#8060B8; --ch-7:#B85585; --ch-8:#4A9B9B; --ch-9:#6B6B6B; } :root[data-theme="linear-dark"]{ --bg:#08090A; --bg-elevate:#141517; --card:#0E0F11; --card-hover:#18191C; --ink:#F7F8F8; --ink-soft:#CDCFD4; --muted:#868B94; --mute:#62666D; --border-card:#222428; --border-input:#2A2C31; --border-divider:#1C1D20; --border-strong:#34363C; --line:var(--border-card); --line-bright:var(--border-strong); --accent:#D97757; --accent-soft:rgba(217,119,87,0.12); --accent-glow:rgba(217,119,87,0.25); --accent2:#E89B7F; --good:#4CB782; --good-soft:rgba(76,183,130,0.14); --warn:#E0B340; --warn-soft:rgba(224,179,64,0.14); --bad:#EB5757; --bad-soft:rgba(235,87,87,0.14); --info:#4EA7FC; --info-soft:rgba(78,167,252,0.12); --r-sm:6px; --r-md:8px; --r-lg:10px; --radius-card:8px; --radius-control:6px; --shadow:none; --shadow-sm:none; --shadow-hero:none; --shadow-card:none; --ui-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono-font:'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; --h-ctl:44px; --gap:16px; --pad:12px; --ch-1:#D97757; --ch-2:#6FA8DC; --ch-3:#5FB07C; --ch-4:#D9A847; --ch-5:#D9695A; --ch-6:#9C82D4; --ch-7:#CE7BA6; --ch-8:#5FB3B3; --ch-9:#8C8C8C; } /* ============================================================ ALFA (Spr.6) — белые карточки на сером фоне, разделение КОНТРАСТОМ ФОНА (border почти прозрачный), без теней, крупный радиус. Акцент-выбираемая. Default-акцент = терракот; «Красный» (#EF3124) доступен пресетом/пикером. ============================================================ */ :root[data-theme="alfa-light"]{ --bg:#F1F2F4; --bg-elevate:#E7E9ED; --card:#FFFFFF; --card-hover:#FAFBFC; --ink:#16171A; --ink-soft:#3A3C42; --muted:#8A8E97; --mute:#AEB2BA; --border-card:rgba(0,0,0,0.05); --border-input:#E2E4E8; --border-divider:#EEF0F3; --border-strong:#D7DAE0; --line:var(--border-card); --line-bright:var(--border-strong); --accent:#C46A4A; --accent-soft:rgba(196,106,74,0.08); --accent-glow:rgba(196,106,74,0.18); --accent2:#E08E6D; --good:#4A8F5F; --good-soft:rgba(74,143,95,0.10); --warn:#E5A300; --warn-soft:rgba(229,163,0,0.12); --bad:#E5484D; --bad-soft:rgba(229,72,77,0.10); --info:#4A7BC8; --info-soft:rgba(74,123,200,0.10); --r-sm:12px; --r-md:14px; --r-lg:16px; --radius-card:16px; --radius-control:11px; --shadow:none; --shadow-sm:none; --shadow-hero:none; --shadow-card:none; --ui-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono-font:'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; --h-ctl:44px; --gap:16px; --pad:12px; --ch-1:#C46A4A; --ch-2:#4A7BA8; --ch-3:#4A8F5F; --ch-4:#E5A300; --ch-5:#E5484D; --ch-6:#8060B8; --ch-7:#B85585; --ch-8:#4A9B9B; --ch-9:#6B6B6B; } :root[data-theme="alfa-dark"]{ --bg:#15161A; --bg-elevate:#202228; --card:#1E2026; --card-hover:#262830; --ink:#F2F3F5; --ink-soft:#CDCFD4; --muted:#8A8E97; --mute:#62666D; --border-card:rgba(255,255,255,0.06); --border-input:#2C2F36; --border-divider:#26282E; --border-strong:#3A3D45; --line:var(--border-card); --line-bright:var(--border-strong); --accent:#D97757; --accent-soft:rgba(217,119,87,0.12); --accent-glow:rgba(217,119,87,0.25); --accent2:#E89B7F; --good:#7FCA8C; --good-soft:rgba(127,202,140,0.12); --warn:#F0BD3C; --warn-soft:rgba(240,189,60,0.14); --bad:#FF6B6B; --bad-soft:rgba(255,107,107,0.14); --info:#5A9BF0; --info-soft:rgba(90,155,240,0.12); --r-sm:12px; --r-md:14px; --r-lg:16px; --radius-card:16px; --radius-control:11px; --shadow:none; --shadow-sm:none; --shadow-hero:none; --shadow-card:none; --ui-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono-font:'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; --h-ctl:44px; --gap:16px; --pad:12px; --ch-1:#D97757; --ch-2:#6FA8DC; --ch-3:#7FCA8C; --ch-4:#F0BD3C; --ch-5:#FF6B6B; --ch-6:#9C82D4; --ch-7:#CE7BA6; --ch-8:#5FB3B3; --ch-9:#8C8C8C; } *{box-sizing:border-box} html,body{height:100%} /* Резервируем место под вертикальный скроллбар всегда — иначе при смене вкладок (короткая/длинная страница) центрированный layout прыгает на ±5-17px. v4e DEMO+5: ставим stable и на body — фактический скролл идёт по body (html.overflow-x:hidden делает y:auto на html, но реальный скролл-контейнер по высоте контента — это body), без gutter на body main.x прыгал между group1 (home/journal/plan/dash, длинный контент → ml=100) и group2 (goals/budget/income, короткий → ml=105). Ровно 5px разница. */ html{ scrollbar-gutter: stable; overflow-x: hidden; } body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 var(--ui-font); font-optical-sizing:auto; transition: background 0.25s, color 0.25s; -webkit-font-smoothing: antialiased; /* v4e DEMO+1: убираем горизонтальный скролл, который появляется при наведении на свёрнутый sidebar (tooltip через ::after выходит за край viewport). Для таблиц используется .table-wrap с собственным overflow-x: auto, так что здесь смело можно скрыть горизонтальный скролл на body. */ overflow-x: hidden; /* v4e DEMO+5 (см. комментарий к html выше): фиксируем gutter под полосу прокрутки на самом body — реальном скролл-контейнере. */ scrollbar-gutter: stable; } /* Моноширинные числа */ .mono, .num, .num-mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* === TOPBAR === */ .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; /* П.2-доп (25 мая 2026): вернули фон топбара — но не плотный --card, а заблюренный полупрозрачный (регрессия ADR-162.1: при скролле контент просвечивал сквозь прозрачный топбар). Лёгкий, без нижнего бордера. */ background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); padding:10px 16px 10px 24px; max-width: 1700px; margin: 0 auto; height: 64px; box-sizing: border-box; } .topbar .spacer{ flex: 1 1 auto; } /* Бургер (виден только на мобиле) — повышенная специфичность чтобы перекрыть .icon-btn */ .topbar .hamburger-btn{ display: none; } .logo{ font-weight:700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; } /* Лого-лок-ап (марка + «ytrend») — единый inline-SVG, перекрашивается темой через CSS-переменные. */ .logo .logo-svg{ height: 24px; width: auto; display: block; } /* Текст и марка по умолчанию следуют за --ink: тёмные на светлых темах, светлые на тёмных — для всех семейств. */ .logo .lk-mark, .logo .lk-text{ fill: var(--ink); } /* Тема Claude (дефолт без data-theme + claude-light/dark + алиасы light/dark): марка — фирменным градиентом. */ :root:not([data-theme]) .logo .lk-mark, :root[data-theme="light"] .logo .lk-mark, :root[data-theme="dark"] .logo .lk-mark, :root[data-theme="claude-light"] .logo .lk-mark, :root[data-theme="claude-dark"] .logo .lk-mark{ fill: url(#ytrend-mark-grad); } /* Тот же лок-ап на страницах входа/регистрации (.login-logo — пилюля-бейдж). */ .login-logo .logo-svg{ height: 22px; width: auto; display: block; } .login-logo .lk-mark, .login-logo .lk-text{ fill: var(--ink); } :root:not([data-theme]) .login-logo .lk-mark, :root[data-theme="light"] .login-logo .lk-mark, :root[data-theme="dark"] .login-logo .lk-mark, :root[data-theme="claude-light"] .login-logo .lk-mark, :root[data-theme="claude-dark"] .login-logo .lk-mark{ fill: url(#ytrend-mark-grad); } /* ═══════════════ Загрузочный экран (boot-splash) ═══════════════ МИНИ (по умолчанию): мелкая монета по центру выплывает из лёгкого блюра, показывается только если загрузка занимает время, быстро уходит по state:loaded → дашборд. GRAND (?splash=grand) — полный reveal лок-апа для особых случаев. Логика: js/ui/boot-splash.js. */ .boot-splash{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--bg); } .boot-splash .lk-mark, .boot-splash .lk-text{ fill: var(--ink); } :root:not([data-theme]) .boot-splash .lk-mark, :root[data-theme="light"] .boot-splash .lk-mark, :root[data-theme="dark"] .boot-splash .lk-mark, :root[data-theme="claude-light"] .boot-splash .lk-mark, :root[data-theme="claude-dark"] .boot-splash .lk-mark{ fill: url(#ytrend-mark-grad-boot); } /* ── МИНИ (дефолт): только монета по центру, мелкая, плавно из блюра ── */ .boot-splash .logo-svg{ height: 56px; width: auto; display: block; transform: translateX(36.5%); opacity: 0; } .boot-splash .lk-text{ display: none; } .boot-splash.is-shown .logo-svg{ animation: coinIn .8s cubic-bezier(.22,.7,.3,1) forwards; } @keyframes coinIn{ 0% { opacity: 0; filter: blur(8px); transform: translateX(36.5%) scale(.92); } 100%{ opacity: 1; filter: blur(0); transform: translateX(36.5%) scale(1); } } .boot-splash.is-done{ opacity: 0; transition: opacity .22s ease; pointer-events: none; } /* ── GRAND (особые случаи): полный лок-ап + reveal слева направо ── */ .boot-splash.grand .logo-svg{ height: 84px; opacity: 1; transform: translateX(36.5%); } .boot-splash.grand .lk-text{ display: block; opacity: 0; filter: blur(20px); -webkit-mask-image: linear-gradient(to right,#000 40%,transparent 60%); mask-image: linear-gradient(to right,#000 40%,transparent 60%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 40% 0; mask-position: 40% 0; } .boot-splash.grand{ --boot-dur: 2s; } .boot-splash.grand.is-revealing .logo-svg{ will-change: transform; animation: bootSlide var(--boot-dur) cubic-bezier(.45,.02,.2,1) forwards; } .boot-splash.grand.is-revealing .lk-text{ will-change: filter, mask-position; animation: bootText var(--boot-dur) cubic-bezier(.33,0,.3,1) forwards; } @keyframes bootSlide{ 0%,15%{ transform: translateX(36.5%); } 68%,100%{ transform: translateX(0); } } @keyframes bootText{ 0%,38%{ opacity:0; filter:blur(20px); -webkit-mask-position:40% 0; mask-position:40% 0; } 72% { opacity:1; } 100% { opacity:1; filter:blur(0); -webkit-mask-position:0% 0; mask-position:0% 0; } } .boot-splash.grand.is-settled .logo-svg{ will-change:auto; transform:none; } .boot-splash.grand.is-settled .lk-text{ will-change:auto; opacity:1; filter:none; -webkit-mask-image:none; mask-image:none; } @media (prefers-reduced-motion: reduce){ .boot-splash.is-shown .logo-svg{ animation-duration:.01s; } .boot-splash.grand.is-revealing .logo-svg, .boot-splash.grand.is-revealing .lk-text{ animation-duration:.01s; } } .actions{display:flex;gap:8px;align-items:center} /* Кнопка «+ Приток» в топбаре — акцентная, круглая (в стиле user-btn) */ .topbar .btn-primary-top { height: 36px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .topbar .btn-primary-top:hover { box-shadow: 0 4px 14px var(--accent-glow); transform: translateY(-1px); } /* Квадратные иконочные кнопки (шестерёнка, бургер) */ .icon-btn { width: 36px; height: 36px; background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 10px; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: all .15s; padding: 0; } .icon-btn:hover { border-color: var(--border-strong); color: var(--accent); } /* Легаси-класс .theme-toggle (вдруг остался где-то) — пусть ведёт себя как .icon-btn */ .theme-toggle { width: 36px; height: 36px; background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 10px; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: all .15s; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--accent); } /* Аватар пользователя (legacy — на случай если где-то ещё используется) */ .avatar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; font-weight: 600; font-size: 14px; display: grid; place-items: center; transition: all .15s; flex-shrink: 0; } .avatar-btn:hover { box-shadow: 0 4px 14px var(--accent-glow); } /* v4e DEMO+1: новая кнопка пользователя — логин + аватар + стрелка */ .user-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all .15s; flex-shrink: 0; } .user-btn:hover { border-color: var(--border-strong); background: var(--card-hover); } .user-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .user-btn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .user-btn-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; flex-shrink: 0; } .user-btn-caret { display: inline-flex; align-items: center; color: var(--muted); transition: transform .15s; } .user-btn[aria-expanded="true"] .user-btn-caret { transform: rotate(180deg); color: var(--accent); } /* На мобильных — прячем имя, оставляем только аватар + стрелку */ @media (max-width: 480px) { .user-btn { padding: 0 10px; } .user-btn-name { display: none; } } /* ADR-162: кнопка «Поддержка» в топбаре — нейтральная иконка-кнопка (как аватар, но круглая, только иконка). Приток остаётся единственным акцентным элементом. Все цвета на переменных темы → работает во всех темах × Light/Dark. */ .support-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all .15s; flex-shrink: 0; } .support-btn-caret { display: inline-flex; align-items: center; color: var(--muted); transition: transform .15s; } .support-btn[aria-expanded="true"] .support-btn-caret { transform: rotate(180deg); color: var(--accent); } .support-btn-label { font-size: 13px; font-weight: 500; white-space: nowrap; } .support-btn:hover { border-color: var(--border-strong); background: var(--card-hover); color: var(--ink); } .support-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* Точка-бейдж «есть непрочитанный ответ саппорта» — тихий сигнал. */ .support-unread-dot { position: absolute; top: 5px; left: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); border: 2px solid var(--card); box-sizing: content-box; } /* Пункт выпадайки «скоро» — задизейблен, мягкий бейдж. */ .dropdown-item.is-disabled { opacity: .55; cursor: default; pointer-events: none; } .dropdown-item-soon { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--bg); border: 1px solid var(--border-card); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; } /* Счётчик непрочитанных рядом с «Мои обращения». ADR-162.1: жёстко фиксируем габариты (width/height + line-height), чтобы пустой или унаследованный контент не раздувал круг (баг #2 — огромный кружок). */ .dropdown-item-count { margin-left: auto; flex: 0 0 auto; min-width: 18px; width: auto; height: 18px; line-height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--bad); border-radius: 999px; } .dropdown-item-count:empty { display: none; } /* Dropdown (шестерёнка, аватар) */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; /* v4e DEMO+1: было 200px — слишком узко для «Настройки приложения» (переносилось на 2 строки) */ min-width: 240px; /* Меню — СПЛОШНОЙ фон (не полупрозрачный): сквозь пункты не должен просвечивать контент под меню. Backdrop-blur оставлен только топбару, где он уместен. */ background: var(--card); border: 1px solid var(--border-card); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; z-index: 60; display: flex; flex-direction: column; } .dropdown-menu[hidden]{ display: none !important; } .dropdown-menu-right{ right: 0; } /* Реструктуризация меню (фаза 2, фикс после прод-ревью): нативный [hidden] не прячет .dropdown-item, потому что .dropdown-item{display:flex} перебивает его по специфичности (та же ловушка, что в ADR-148: [hidden] vs display:flex). Из-за этого пункт «Админка» (hidden по умолчанию) был виден не-админам — реальная защита держала (403 на admin.php), но видеть его не должны. Явное правило с !important восстанавливает работу [hidden]. */ .dropdown-item[hidden]{ display: none !important; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink); background: none; border: none; border-radius: 8px; cursor: pointer; text-align: left; text-decoration: none; transition: background .1s; font-family: inherit; width: 100%; box-sizing: border-box; white-space: nowrap; } .dropdown-item:hover { background: var(--accent-soft); } .dropdown-sep { height: 1px; background: var(--border-divider); margin: 6px 4px; } /* Баги-2 (20 мая): иконки в пунктах юзер-меню — тонкий stroke-SVG вместо эмодзи. Приглушённый цвет как у каретки, на hover подсвечиваются акцентом вместе с пунктом. */ .dropdown-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); } .dropdown-item:hover .dropdown-item-icon { color: var(--accent); } /* === STATUS FILTER DROPDOWN (DEMO+7.2, журнал) === Триггер в стиле .chip + выпадашка на базе .dropdown-menu (одинаковая с юзер-меню в шапке). Чекбокс-пункты используют .dropdown-item.is-checkable — клик по такому пункту НЕ закрывает меню (см. nav.js setupDropdowns). */ .status-filter-trigger { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--border-card); border-radius: 100px; background: var(--card); color: var(--ink); font-size: 13px; font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; max-width: 100%; } .status-filter-trigger:hover { border-color: var(--border-strong); background: var(--card-hover); } .status-filter-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .status-filter-trigger .sft-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; } .status-filter-trigger .sft-caret { color: var(--muted); transition: transform .15s; flex-shrink: 0; } .status-filter-trigger[aria-expanded="true"] .sft-caret { transform: rotate(180deg); color: var(--accent); } /* Чекбокс-пункт в .dropdown-menu */ .dropdown-item.is-checkable { gap: 10px; } .dropdown-item.is-checkable input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .dropdown-item.is-checkable .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dropdown-item.is-checkable .label-text { flex: 1; white-space: nowrap; } /* Меню статус-фильтра — position: fixed чтобы не обрезалось overflow:hidden у .card-bd родителя. Позиционирование через CSS-переменные --sf-top/--sf-left, которые journal.js обновляет при открытии (от getBoundingClientRect триггера). */ .status-filter-menu { position: fixed; top: var(--sf-top, 0); left: var(--sf-left, 0); width: 280px; /* DEMO+11.11.1 hotfix: было 240px, добавился пункт «⚠ Ожидает распределения» — не влезает */ z-index: 200; } /* Цвета точек по статусу — синхронизированы с .status-chip фоном. .sft-dot — мелкая точка (6px) для свёрнутого триггера статус-фильтра (DEMO+11.4). */ .status-filter-trigger .dot--fact, .dropdown-item .dot--fact, .status-filter-trigger .sft-dot.dot--fact { background: var(--good); } .status-filter-trigger .dot--pending, .dropdown-item .dot--pending, .status-filter-trigger .sft-dot.dot--pending { background: var(--warn); } .status-filter-trigger .dot--planned, .dropdown-item .dot--planned, .status-filter-trigger .sft-dot.dot--planned { background: var(--accent); } .status-filter-trigger .dot--cancelled, .dropdown-item .dot--cancelled, .status-filter-trigger .sft-dot.dot--cancelled { background: var(--bad); } /* DEMO+11.4: точки в свёрнутом триггере статус-фильтра. Стек точек слева от названия — глазом видно что отфильтровано без чтения текста. Точки 8px со слегка перекрывающимися отступами (margin-left: -3px) — даёт ощущение «группы». Белая обводка 1.5px разделяет точки когда они впритык. «+N» — мелкий приглушённый счётчик дополнительных статусов. */ .status-filter-trigger .sft-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .status-filter-trigger .sft-dots { display: inline-flex; flex-shrink: 0; } .status-filter-trigger .sft-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--card); margin-left: -3px; } .status-filter-trigger .sft-dot:first-child { margin-left: 0; } .status-filter-trigger .sft-more { color: var(--muted); font-size: 12px; font-weight: 500; } /* === J-FILTERS STACK (DEMO+11.4 cosmetics-3e) === Премиум-визуал блока фильтров Журнала. Лейбл слева (с иконкой), контролы справа. Между рядами тонкий gradient-разделитель. Сделано на flex (не grid) и БЕЗ переопределения padding у .card-bd — первая попытка через grid и .j-filters-card { padding: ... } сломала рендер на проде. Эта версия должна быть стабильнее. Ключевые отличия от провального варианта: - flex вместо grid → более терпимый layout - j-filter-controls { min-width: 200px } вместо { min-width: 0 } - не переопределяю .card-bd padding - без своих @media-overrides для chip */ .j-filters-stack { display: flex; flex-direction: column; gap: 14px; } .j-filter-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } /* Лейбл слева — иконка + подпись. Фиксированная ширина чтобы оба ряда (Период / Статус) оптически выравнивались. flex-shrink:0 — не сжимается. */ .j-filter-label { flex-shrink: 0; width: 96px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; font-weight: 500; padding-top: 9px; /* оптическое выравнивание с серединой chip */ user-select: none; } .j-filter-label .j-filter-ico { color: var(--muted); flex-shrink: 0; } /* Колонка контролов — занимает оставшееся пространство. min-width: 200px — на случай очень узкого экрана: chips переезжают на новую строку через flex-wrap, не убегая в overflow. */ .j-filter-controls { flex: 1 1 auto; min-width: 200px; } .j-filter-controls .chips { margin: 0; } .j-filter-controls .period-hint:empty { display: none; } /* Тонкий gradient-разделитель между рядами */ .j-filter-divider { height: 1px; background: linear-gradient( to right, transparent 0, var(--line) 12%, var(--line) 88%, transparent 100% ); /* Чуть-чуть отступа от лейбла слева — чтобы разделитель начинался визуально с контролов, не с самого края */ margin: 0; } /* === Усиление активного chip только в контексте j-filter-row === Чтобы не задеть chips на других страницах (например, в форме притока). */ .j-filter-row .chip { transition: all .15s ease, transform .12s ease; } .j-filter-row .chip:hover:not(.active):not(.chip-locked) { transform: translateY(-1px); } .j-filter-row .chip.active { transform: translateY(-1px); box-shadow: 0 4px 10px var(--accent-glow), 0 1px 2px rgba(0,0,0,0.05); } /* === SIDEBAR (левая колонка) === */ /* Sidebar-рельс (выравнивание по сетке): fixed-контейнер шириной РОВНО по контент-боксу. У fixed-элемента left:0;right:0 = ширина БЕЗ полосы прокрутки (надёжно, в отличие от 100vw/100% в left). max-width+margin:auto центрируют его так же, как топбар и .container, поэтому sidebar (absolute, left:24) встаёт точно под лого. height:0 + pointer-events:none — рельс не занимает место и не перехватывает клики (сам sidebar — pointer-events:auto). */ .sidebar-rail{ position: fixed; top: 0; left: 0; right: 0; max-width: 1700px; margin: 0 auto; height: 0; pointer-events: none; } .sidebar{ position: absolute; pointer-events: auto; top: 76px; /* совпадает с верхом первой карточки контента (topbar 64 + container margin 12) — ADR-162 */ /* left:24px = от левого края рельса = от левого края контент-бокса = ось лого в топбаре. */ left: 24px; /* Высота по контенту (меню + симметричные поля сверху/снизу). bottom не задаём. */ width: 200px; background: var(--card); border: 1px solid var(--border-card); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03); display: flex; flex-direction: column; z-index: 40; overflow: hidden; /* DEMO+9.7.1: ширину анимируем тем же таймингом что и nav-label — синхронно. */ transition: width .25s cubic-bezier(.32,.72,.26,1); } /* Spr.6: у flat-тем (Linear/Alfa) сайдбар без тени — как все поверхности этих тем. Тень захардкожена в .sidebar (не через --shadow), поэтому гасим точечно. */ :root[data-theme="linear-light"] .sidebar, :root[data-theme="linear-dark"] .sidebar, :root[data-theme="alfa-light"] .sidebar, :root[data-theme="alfa-dark"] .sidebar { box-shadow: none; } @media (max-width: 1700px) { .sidebar{ left: 24px; } } .sidebar.collapsed{ width: 64px; } .sidebar-nav{ /* Не растягиваем на всю высоту — меню занимает столько сколько ему нужно, а sidebar-карточка подстраивается (bottom: auto у .sidebar). */ flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 10px; /* симметричные поля сверху и снизу */ overflow-y: auto; /* v4e DEMO+1: явно запрещаем горизонтальный скролл — иначе при ховере на иконку в свёрнутом sidebar tooltip ::after позиционируется через left: calc(100% + 8px) и провоцирует браузер показать скролл по X внутри этого контейнера. */ overflow-x: hidden; } .sidebar .nav-item{ display: flex; align-items: center; /* DEMO+9.7.1: gap=0, отступ иконка↔лейбл задаётся через margin-left у .nav-label — это позволяет анимировать margin-left при collapse/expand синхронно с шириной, иначе иконка «бьётся о левый край» и потом прыгает к центру когда лейбл схлопнется. */ gap: 0; padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; white-space: nowrap; position: relative; } .sidebar .nav-item:hover{ background: var(--card-hover); color: var(--ink); } .sidebar .nav-item.active{ background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar .nav-icon{ flex-shrink: 0; } /* DEMO+9.7.1 (ADR-110): анимация sidebar B@250мс — финальный вариант после итераций через MCP. Iterates над DEMO+9.7 (B+): 1) Все 4 свойства (width, opacity, max-width, margin-left) анимируются одной кривой и одной длительностью — синхронно. Раньше width шла .2s ease, а label .12s ease + .1s delay — рассогласование давало эффект «иконки сначала прижимаются к левому краю, потом прыгают к центру». 2) gap у .nav-item убран, отступ иконка↔лейбл задаётся через margin-left у .nav-label. При collapse margin-left уезжает в 0 синхронно с max-width и width — иконка плавно скользит к центру. 3) iOS-curve cubic-bezier(.32,.72,.26,1) — мягкое начало и конец. 4) Длительность 250мс — компромисс между «слишком быстро» (200мс из 9.7) и «слишком долго» (320мс ease-out был кандидат C). Цель — «дорогая» плавность как в Linear/Notion/iOS sidebar. */ .sidebar .nav-label { opacity: 1; max-width: 200px; margin-left: 12px; /* отступ иконка↔лейбл, бывший gap */ overflow: hidden; white-space: nowrap; transition: opacity .25s cubic-bezier(.32,.72,.26,1), max-width .25s cubic-bezier(.32,.72,.26,1), margin-left .25s cubic-bezier(.32,.72,.26,1); } .sidebar.collapsed .nav-label { opacity: 0; max-width: 0; margin-left: 0; pointer-events: none; /* На collapse opacity чуть быстрее — текст растворяется до того как ширина схлопнется */ transition: opacity .2s cubic-bezier(.32,.72,.26,1), max-width .25s cubic-bezier(.32,.72,.26,1), margin-left .25s cubic-bezier(.32,.72,.26,1); } .sidebar.collapsed .nav-item{ justify-content: center; padding: 10px 0; } /* Свёрнутый sidebar — tooltip показывается через JS (position: fixed относительно viewport, чтобы не зависеть от overflow родителя .sidebar-nav). Старая версия через ::after провоцировала горизонтальный скролл внутри .sidebar-nav. */ .sidebar-tooltip { position: fixed; background: var(--ink); color: var(--card); padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 100; pointer-events: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; /* плавное появление */ opacity: 0; transition: opacity .12s; } .sidebar-tooltip.visible { opacity: 1; } /* Toggle-кнопка (свернуть/развернуть sidebar) — сидит после меню с тем же полем снизу как у sidebar-nav сверху (10px). */ .sidebar-toggle{ display: flex; margin: 0 10px 10px; height: 36px; border: 1px solid var(--border-input); background: var(--bg-elevate); border-radius: 8px; color: var(--ink-soft); cursor: pointer; align-items: center; justify-content: center; transition: all .15s; } .sidebar-toggle:hover{ border-color: var(--border-strong); color: var(--accent); } .sidebar.collapsed .sidebar-toggle-icon{ transform: rotate(180deg); } /* Оверлей для мобильного drawer (скрыт на десктопе) */ .sidebar-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; } .sidebar-overlay.open{ display: block; } /* === LAYOUT === */ .container{ max-width: 1700px; margin: 12px auto; /* Sidebar и контент — на ОДНОЙ оси центрирования (sidebar.left использует 100%, не 100vw, см. .sidebar выше). Формула точная, без эмпирической поправки: padding-left = sidebar(200) + внутренний отступ(24) + зазор(16) = 240px. */ padding: 0 16px 0 calc(200px + 40px); display:grid; gap:var(--gap); transition: padding-left .2s ease; } body.sidebar-collapsed .container{ padding-left: calc(64px + 40px); /* sidebar collapsed 64 + 24 + 16 */ } .screen.active{display:block} /* v4d: выравниваем верх первой карточки с верхом sidebar — убираем лишний margin-top */ .screen > :first-child{ margin-top: 0; } /* v4e-A.1.1: гарантируем что все экраны имеют одинаковое горизонтальное выравнивание относительно sidebar. Никаких боковых padding/margin на сам .screen и его прямых детей сверху. Все горизонтальные отступы должны идти от .container. */ .screen { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .card{ background:var(--card); border:1px solid var(--border-card); border-radius:var(--r-lg); box-shadow:var(--shadow); margin: 16px 0; transition: background 0.25s, border-color 0.25s; } .card-hd{ padding:14px 18px; border-bottom:1px solid var(--border-divider); display:flex; align-items:center; gap:12px; flex-wrap:wrap; position: relative; color: var(--ink); } .card-bd{padding:14px 18px; color: var(--ink);} .grid{display:grid;gap:12px} /* DEMO+11.8.1 (ADR-132.1): auto-fit вместо жёстких N колонок. Контекст: после удаления плитки «Притоки» (DEMO+11.8) сетка `repeat(4,1fr)` оставляла 4-й столбец пустым справа. У юзеров может быть 2/3/4 плитки в ряду в зависимости от числа featured-целей: - 0 featured → 1 плитка Жизнь + 1 плейсхолдер «+ Добавь цель» = 2 плитки - 1 featured → 1 цель + 1 плейсхолдер + Жизнь = 3 плитки - 2 featured → 2 цели + Жизнь = 3 плитки `auto-fit` + `minmax(260px, 1fr)` растягивает плитки на всю ширину независимо от их числа. На узких экранах media-queries ниже всё равно перекрывают. */ .kpis{grid-template-columns:1fr 1fr} @media (min-width:920px){ .kpis{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))} } .kpi{ background:var(--card); border:1px solid var(--border-card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm); transition: all .15s; } .kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); } .kpi .name{color:var(--muted);font-size:12px; font-weight: 500;} .kpi .val{ font-size:22px; font-weight:700; margin-top:6px; font-family: var(--mono-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); } .bar{height:8px;background:var(--bg-elevate);border-radius:999px;overflow:hidden;margin-top:8px} .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0; transition: width .4s;} /* DEMO+11.8 (ADR-132): единый отступ строки «осталось — N ₽» под прогресс-баром. У featured-целей было margin-top:12px через .gk-percent-row, у плитки Жизнь (#kpiLifeLeft) — дефолт ~4px (визуально прижималось). Теперь обе плитки имеют одинаковый ритм. Селектор точечный (по id) чтобы не наступать на возможные будущие плитки с другим внутренним layout. */ #kpiLifeLeft { margin-top: 12px; } .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0;} .chip{ padding:7px 12px; border:1px solid var(--border-input); border-radius:999px; background:var(--card); cursor:pointer; transition: all .15s ease; user-select:none; color: var(--ink-soft); font-size: 13px; } .chip:hover{ background: var(--card-hover); border-color: var(--border-strong); } .chip[aria-pressed="true"], .chip.active { color:#fff; border-color:transparent; background: var(--accent); box-shadow: 0 2px 6px var(--accent-glow); } /* DEMO+9.5 (ADR-107): chip-locked — серый чип с замочком (Free-юзер пытается выбрать период за пределами historyMonths-лимита). Остаётся clickable — клик открывает paywall. */ .chip.chip-locked { color: var(--muted); background: var(--card); opacity: .7; border-style: dashed; } .chip.chip-locked:hover { opacity: 1; border-color: var(--accent); } .chip.chip-locked .chip-lock-icon { display: inline-block; margin-right: 4px; vertical-align: -1px; font-size: 10px; opacity: .8; } /* DEMO+9.5: inline-paywall плашка (под чипами или под графиком). Мягкий тон — не алармирующий красный, а нейтральный bg-elevate. Кнопка «Узнать о Pro» ведёт в #settings. */ .pro-paywall-inline { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 10px; margin: 10px 0; font-size: 13px; color: var(--ink); animation: paywall-fade-in .25s ease; } .pro-paywall-inline .pp-icon { flex: none; width: 18px; height: 18px; color: var(--muted); } .pro-paywall-inline .pp-text { flex: 1; line-height: 1.5; } .pro-paywall-inline .pp-text b { color: var(--ink); } .pro-paywall-inline .pp-cta { flex: none; padding: 6px 14px; background: var(--ink); color: var(--card); border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: opacity .15s; } .pro-paywall-inline .pp-cta:hover { opacity: .85; } @keyframes paywall-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* DEMO+9.7 (ADR-109): paywall-плитка «Доход за год» для Free-тарифа */ .kpi .ytd-paywall { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .kpi .ytd-lock { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; } .kpi .ytd-pro-text { font-size: 14px; font-weight: 600; color: var(--accent); } .kpi .ytd-paywall-sub { font-size: 12px; margin-top: 4px; } .spacer{flex:1} /* DEMO+9.7: универсальные стрелки навигации по месяцам (Plan-style). Используется в #screen-income, #screen-plan, и везде где есть month-nav. */ .month-nav-btn { width: 32px; height: 32px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; font-family: inherit; padding: 0; } .month-nav-btn:hover { border-color: var(--accent); color: var(--accent); } /* === FORMS === */ .form label{display:flex;flex-direction:column;gap:6px; color: var(--ink-soft); font-size: 13px;} .form input[type="text"], .form input[type="number"], .form input[type="date"], .form input[type="email"], .form input[type="password"], .form select, .form textarea{ height:var(--h-ctl); padding:0 12px; border:1px solid var(--border-input); border-radius:var(--r-sm); background:var(--card); color: var(--ink); outline:none; transition: box-shadow .15s ease, border-color .15s ease, background .15s; font-family: inherit; font-size: 14px; } .form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .form .col-2{grid-column:span 2} /* v4e DEMO+5: контекстная подсказка в форме притока — объясняет что произойдёт при текущих параметрах. Скрыта если пусто. */ .context-hint { font-size: 13px; line-height: 1.45; padding: 12px 14px; background: var(--accent-soft, rgba(0,0,0,0.04)); color: var(--ink); border-left: 3px solid var(--accent); border-radius: 6px; margin: 4px 0 0 0; } .context-hint:empty { display: none; } .context-hint b { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .context-hint .ch-tip { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } /* =========================================================== v4e DEMO+5: кастомный select-компонент (js/ui/select.js) =========================================================== */ .cs-root { position: relative; width: 100%; font-family: inherit; font-size: 14px; } .cs-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--h-ctl); padding: 0 10px 0 12px; border: 1px solid var(--border-input); border-radius: var(--r-sm); background: var(--card); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 14px; text-align: left; transition: box-shadow .15s ease, border-color .15s ease, background .15s; outline: none; } .cs-trigger:hover { border-color: var(--border-strong); } .cs-trigger:focus, .cs-root.cs-open .cs-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .cs-trigger:disabled, .cs-root.cs-disabled .cs-trigger { background: var(--bg-elevate, var(--card)); color: var(--muted); cursor: not-allowed; opacity: .65; } .cs-label { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-label-empty { color: var(--muted); } .cs-caret { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--muted); transition: transform .15s ease; } .cs-root.cs-open .cs-caret { transform: rotate(180deg); } .cs-popover { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border-card); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04); max-height: 320px; display: flex; flex-direction: column; overflow: hidden; animation: cs-pop-in .14s ease-out; } @keyframes cs-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .cs-search-wrap { flex: 0 0 auto; padding: 8px 8px 6px 8px; border-bottom: 1px solid var(--border-divider); } .cs-search { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border-card); border-radius: var(--r-sm); background: var(--bg, var(--card)); color: var(--ink); outline: none; font-family: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; } .cs-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .cs-list { flex: 1 1 auto; overflow-y: auto; padding: 4px; } .cs-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.3; user-select: none; transition: background .1s; } .cs-option-active { background: var(--accent-soft, rgba(0,0,0,0.05)); } .cs-option-selected { font-weight: 600; } .cs-option-selected::after { content: '✓'; margin-left: auto; color: var(--accent); font-weight: 700; } .cs-option-disabled { opacity: .45; cursor: not-allowed; } /* R14-E B-ε (12 мая 2026): заголовок группы (от ). Не интерактивен, визуально как мини-разделитель. */ .cs-group-hdr { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; pointer-events: none; user-select: none; } .cs-group-hdr:not(:first-child) { margin-top: 6px; } /* Цветной кружок-индикатор канала (используется в renderOption) */ .cs-dot { flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); } /* Бейдж статуса (зелёный/жёлтый/красный) */ .cs-status-badge { flex: 0 0 auto; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; } .cs-opt-meta { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } /* DEMO+9.12 (ADR-123): метка «тег» для tag-каналов в dropdown канала. Идиома согласована с .channel-pct-badge.tag в Настройках. */ .cs-opt-meta-tag { font-variant-numeric: normal; text-transform: lowercase; letter-spacing: 0.02em; font-family: var(--ui-font, system-ui); font-size: 11.5px; opacity: 0.8; } /* Пустой стейт когда фильтр не нашёл */ .cs-empty { padding: 16px 10px; text-align: center; color: var(--muted); font-size: 13px; } /* Атрибут hidden должен реально скрывать popover (наш display: flex иначе побеждает) */ .cs-popover[hidden] { display: none !important; } /* В триггере не показываем .cs-opt-meta (хинты типа "деньги уже в кармане" рядом с бейджем статуса) — там должно остаться только короткое имя/бейдж */ .cs-trigger .cs-label .cs-opt-meta { display: none; } /* =========================================================== v4e DEMO+5: блок «Правила записи» в форме притока. Объединяет визуально Статус + % в карман (плюс Expected date) в одну панель — это всё про «как обрабатывать запись». DEMO+9.7: 3 колонки, align-items: end (выравнивание полей при разной высоте лейблов). =========================================================== */ .fg-record-rule { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 14px; background: var(--bg-elevate, var(--card)); border: 1px solid var(--border-input); border-radius: 10px; position: relative; margin-top: 10px; align-items: end; } .fg-record-rule::before { content: 'Правила записи'; position: absolute; top: -9px; left: 14px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--card); } .fg-record-rule label { margin: 0; } @media (max-width: 600px) { .fg-record-rule { grid-template-columns: 1fr; } } /* DEMO+9.7 (ADR-109): «% в карман» — лейбл одной строкой (вместо колонки), чтобы при разном размере фолдера не плыла высота поля */ .fg-pct-label .fg-pct-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; } /* DEMO+9.7 (ADR-109): Hero-стиль для поля Сумма (как в форме Plan). Большое монопроставленное число в центре, лейбл слева, валюта справа. */ .fg-amount-hero { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-elevate, var(--card)); border: 1px solid var(--border-input); border-radius: 12px; margin: 0; } .fg-amount-hero .fg-amount-label { font-size: 14px; color: var(--muted); font-weight: 500; flex-shrink: 0; } .fg-amount-hero input#fAmount { flex: 1 1 auto; height: 56px; font-size: 28px; font-weight: 700; text-align: right; border: 1px solid var(--border-input); border-radius: 14px; background: var(--card); padding: 0 16px; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--mono-font); outline: none; min-width: 0; } .fg-amount-hero input#fAmount:focus { border-color: var(--accent); } .fg-amount-hero .fg-amount-currency { font-size: 18px; color: var(--muted); font-weight: 500; flex-shrink: 0; } /* Кнопки внизу формы притока */ .entry-form-actions { display: flex !important; gap: 10px; justify-content: flex-end !important; align-items: center; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border-divider); } .entry-form-actions > a.btn, .entry-form-actions > button.btn, .entry-form-actions .btn { min-width: 130px; height: 40px; font-size: 14px; border-radius: 10px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; } .entry-form-actions a.btn:hover, .entry-form-actions a.btn:focus, .entry-form-actions a.btn:visited { text-decoration: none !important; } .entry-form-actions a.btn-cancel, .entry-form-actions .btn-cancel { background: var(--card); border: 1px solid var(--border-input); color: var(--ink-soft); font-weight: 500; } .entry-form-actions a.btn-cancel:hover, .entry-form-actions .btn-cancel:hover { background: var(--bg-elevate, var(--card)); border-color: var(--border-strong); color: var(--ink); box-shadow: var(--shadow-sm); } .entry-form-actions button.primary { font-weight: 600; letter-spacing: .01em; } /* Поле «% в карман» при disabled — приглушённый фон, чтобы было ясно «нажми ✎ чтобы переопределить». */ #fPocketPct:disabled { background: var(--bg-elevate, var(--card)); color: var(--muted); cursor: not-allowed; } /* =========================================================== v4e DEMO+5: 2-колоночная разметка формы притока с превью справа. На широких экранах слева форма, справа sticky-превью записи. На узких экранах — превью под формой, обычным потоком. =========================================================== */ .entry-form-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; } /* Явное размещение детей: форма — слева сверху, errMsg — слева под формой, превью — занимает всю правую колонку. Без этого залезает во вторую колонку и превью спускается во вторую строку под формой. */ .entry-form-split > #entryForm { grid-column: 1; grid-row: 1; } .entry-form-split > #entryErr { grid-column: 1; grid-row: 2; margin: 0; } .entry-form-split > #entryPreview { grid-column: 2; grid-row: 1 / span 2; } @media (max-width: 900px) { .entry-form-split { grid-template-columns: 1fr; } .entry-form-split > #entryForm, .entry-form-split > #entryErr, .entry-form-split > #entryPreview { grid-column: 1; grid-row: auto; } } /* «Правила записи» — 3 колонки на широких экранах (Канал | Статус | %) */ @media (min-width: 901px) { .fg-record-rule { grid-template-columns: 1fr 1fr 1fr; } } /* Превью записи (sticky-карточка справа от формы) */ .entry-preview { position: sticky; /* DEMO+9.7 (ADR-109): top:0 чтобы верх превью был на одной линии с верхом hero-сумма формы */ top: 0; background: var(--card); border: 1px solid var(--border-card); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); } @media (max-width: 900px) { .entry-preview { position: static; margin-top: 16px; } } .entry-preview .ep-title { margin: 0 0 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .entry-preview .ep-sub { font-size: 12px; color: var(--muted); margin: 0 0 14px 0; } .entry-preview .ep-card { background: var(--bg-elevate, var(--card)); border: 1px solid var(--border-input); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .ep-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .ep-amount { font-family: var(--mono-font); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .ep-amount-empty { color: var(--muted); font-size: 14px; font-weight: normal; font-family: inherit; } .ep-date { color: var(--muted); font-size: 13px; } .ep-status { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; } .ep-channel-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .ep-channel-name { font-size: 13px; color: var(--ink); } .ep-source { font-size: 13px; color: var(--ink-soft); } .ep-note { font-size: 13px; color: var(--ink-soft); font-style: italic; } .ep-divider { height: 1px; background: var(--border-divider); margin: 4px -2px; } .ep-alloc-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .ep-alloc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; padding: 4px 0; } .ep-alloc-row .ep-alloc-name { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; } .ep-alloc-row .ep-alloc-amt { font-family: var(--mono-font); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; } .ep-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 14px 0; text-align: center; } .ep-pocket-note { font-size: 12px; color: var(--muted); padding: 8px 10px; background: var(--accent-soft); border-radius: 6px; border-left: 2px solid var(--accent); } .ep-pocket-note b { color: var(--accent); font-variant-numeric: tabular-nums; } /* v4e DEMO+5: блок #fAllocPreview под полями ("→ 10 000 ₽ в Жизнь · ...") дублирует секцию "Куда пойдёт" в превью записи справа. Скрываем, JS-логика остаётся нетронутой на случай если превью когда-то отключат. */ #fAllocPreview { display: none !important; } /* Гасим блок «Распределение» и поле «% в карман» при не-fact статусе */ #fAllocBlock.is-disabled { opacity: .5; pointer-events: none; } #fAllocBlock.is-disabled::after { content: ''; display: none; /* можно расширить если нужен явный overlay */ } /* DEMO+9.10 (ADR-119.2): CSS-классы .ins-form / .ins-grid / .ins-save-btn удалены вместе с блоком «Страховой платёж» в Настройках → Распределение. Если когда-то вернём фичу — пересоздадим. */ /* === BUTTONS === */ .btn{ height:var(--h-ctl); padding:0 14px; border:1px solid var(--border-input); border-radius:var(--r-sm); background:var(--card); color: var(--ink); cursor:pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: transform .04s, box-shadow .15s, background .15s, border-color .15s; } .btn:hover{ box-shadow:var(--shadow-sm); border-color: var(--border-strong); } .btn:active{transform:translateY(1px)} .btn.primary{ color:#fff; border-color:transparent; background: var(--accent); font-weight: 600; } .btn.primary:hover{ background: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); } .btn.block{width:100%} .btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none} .btn.ghost{ background: transparent; } /* === TABLE === */ .table-wrap{overflow:auto} .table{width:100%;border-collapse:separate;border-spacing:0 6px} .table th{ font-size:11px; color:var(--muted); text-align:left; padding:4px 10px; white-space:nowrap; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } .table td{ background:var(--card); border:1px solid var(--border-card); border-left:3px solid var(--accent-soft); border-radius:8px; padding:10px 12px; vertical-align:middle; transition: border-color .15s; color: var(--ink); } .table tr:hover td{ background:var(--card-hover); border-color:var(--border-strong); } .table tr.cancelled td { opacity: 0.5; } .table tr.pipeline td { background: var(--warn-soft); } .table tr.pending td { background: var(--info-soft); } /* === TEXT UTILS === */ .muted{color:var(--muted)} .err{color:var(--bad)} /* === LOGIN (для случая когда кто-то всё же попадёт на оверлей) === */ .layer{position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 5%, transparent);display:grid;place-items:center} .layer.hidden{display:none} .login-card{width:340px;max-width:92vw;padding:16px;border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--card)} .login-card h2{margin:0 0 8px} /* === SCROLLBAR === */ ::-webkit-scrollbar{height:10px;width:10px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--mute)} ::-webkit-scrollbar-track{background: transparent;} /* === COLLAPSIBLES === */ .card-hd{ position:relative } .card-toggle{ margin-left:auto; display:inline-grid; place-items:center; width:32px;height:32px; border:1px solid var(--border-card); border-radius:8px; background:var(--card); cursor:pointer; color: var(--ink-soft); transition:box-shadow .15s,transform .04s } .card-toggle:hover{ box-shadow:var(--shadow-sm) } .card-toggle:active{ transform:translateY(1px) } .card-toggle svg{ width:16px;height:16px; transition:transform .2s } .card.is-collapsed .card-toggle svg{ transform:rotate(-90deg) } .collapsible-body{ overflow:hidden; transition:height .28s ease } .card.is-collapsed .collapsible-body{ height:0 !important; padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; border-top-width:0 !important; } /* === GOALS BOARD === */ .goal{background:var(--card);border:1px solid var(--border-card);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm)} .goal .name{font-weight:700} .goal .status{font-size:12px} .goal.done{opacity:.65} .goal .bar{margin:8px 0 4px} /* === MOBILE === */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px); } html, body { height: 100%; overscroll-behavior: contain; } body { padding-bottom: var(--safe-bot); } .topbar { position: sticky; top: 0; padding-top: calc(10px + var(--safe-top)); z-index: 100; } @media (max-width: 760px) { /* Бургер виден на мобиле */ .topbar .hamburger-btn{ display: grid; } /* Логотип — чуть компактнее, скроется часть акции */ .logo{ font-size: 13px; } .logo .logo-svg{ height: 20px; } /* Sidebar становится выдвижным drawer'ом (без отступов плавающей карточки) */ .sidebar{ position: fixed; top: 64px; left: 0; bottom: 0; border-radius: 0; border: none; border-right: 1px solid var(--border-card); transform: translateX(-100%); width: 260px; transition: transform .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.15); } /* На мобиле drawer — полная высота, меню тянется */ .sidebar-nav{ flex: 1 1 auto; } .sidebar.mobile-open{ transform: translateX(0); } .sidebar.collapsed{ width: 260px; } /* на мобиле не сворачиваем */ .sidebar.collapsed .nav-label{ opacity: 1; max-width: 200px; } .sidebar.collapsed .nav-item{ justify-content: flex-start; padding: 10px 12px; } .sidebar-toggle{ display: none; } /* на мобиле toggle не нужен */ /* Контент возвращает полную ширину */ .container { padding: 0 12px; display: block; } body.sidebar-collapsed .container{ padding: 0 12px; } .kpis { grid-template-columns: 1fr 1fr; } .kpi .val { font-size: clamp(18px, 4.8vw, 22px); } .btn { height: 42px; } .card-hd { padding: 10px 12px; } .card-bd { padding: 10px 12px; } .mobile-scroll{overflow-x: auto;} /* Текст «Приток» можно скрыть на очень узких экранах, оставить иконку */ .topbar .btn-primary-top{ padding: 0 12px; } } @media (max-width: 460px) { .kpis { grid-template-columns: 1fr; } .topbar .btn-primary-top span{ display: none; } /* только «+» */ .topbar .btn-primary-top{ width: 36px; padding: 0; justify-content: center; } /* На узких экранах «Поддержка» — снова компактная круглая иконка без текста. */ .support-btn-label{ display: none; } .support-btn-caret{ display: none; } .support-btn{ width: 36px; padding: 0; justify-content: center; border-radius: 50%; } .support-unread-dot{ top: 4px; left: auto; right: 4px; } } .table-wrap { overflow: auto; } .table td, .table th { white-space: nowrap; } .table { min-width: 720px; } .chip, .btn, .card-toggle { min-height: 40px; } #chartBars, #chartLine, #incChart { max-height: 360px; } /* === Legacy overrides для формы притока === */ #entryForm .row{display:flex;align-items:center;justify-content:space-between;gap:12px} #entryForm .chk{display:flex;align-items:center;gap:10px;color:var(--muted);flex-direction: row;} #incomeGoalsBox{margin-top:12px;border:1px solid var(--border-card);border-radius:12px;padding:12px 14px;background:var(--card)} #incomeGoalsBox .muted{color:var(--muted)} #incomeGoalsWrap{display:flex;gap:15px;flex-wrap: wrap;} #incomeGoalsWrap input[type="number"]{text-align:right} #fAllToLifeWrap{margin:12px 0 2px} /* === SETTINGS SUBTABS === */ /* v4e-A.1.1: фиксируем минимальную высоту контейнера подвкладок, чтобы при переключении между Общие/Каналы/Счета/Тема страница имела стабильную высоту и не "схлопывалась" короче viewport (что приводит к потере scroll-позиции и эффекту "прыжка"). 900px — заведомо выше viewport на типичных мониторах. */ /* v4e-A.1.1 → DEMO+7.2: min-height перенесён с подвкладки на родительский контейнер `#screen-settings`. Раньше каждая `.settings-subtab` тянулась на 1000px → на коротких подвкладках (Профиль) внизу зияла пустая белая зона на пол-экрана *внутри карточки*. Теперь подвкладка свободна сжаться по контенту, карточка плотно её обнимает, а высоту страницы (нужную чтобы документ не "схлопывался" короче viewport и scroll-позиция сохранялась при переключении) держит родитель `#screen-settings`. -80px — компенсация высоты топбара (44+padding). Подтверждено вживую через Claude in Chrome: контент Профиля 412px, карточка 495px (плотно), screen-settings 809px (= 100vh-80 на 1920×889). */ #screen-settings { min-height: calc(100vh - 80px); } .settings-subtab { display: none; } .settings-subtab.active { display: block; } /* Legacy: раньше подвкладки были chip-линейкой с нижней подчёркивающей границей. В v4d это сегментированный контрол — border-bottom и extra padding-bottom мешают. */ #settingsSubtabs { border-bottom: none; padding-bottom: 3px; } #settingsSubtabs .chip { min-height: 36px; } /* === iOS-style toggle (общий компонент, DEMO+7.2) === Геометрия и цвета совпадают с .mod-row-toggle из renderModulesList() (см. js/ui/settings.js → ensureModulesCss). Локальный mod-row-toggle оставлен как есть — не ломаем работающие Модули. Новые места используют .toggle-switch. В будущих чекпоинтах — унификация (Модули перейдут на общий класс, локальный CSS вычистится). */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; } .toggle-switch input { display: none; } .toggle-switch-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 100px; transition: background .15s; } .toggle-switch-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; } .toggle-switch input:checked + .toggle-switch-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-switch-slider::before { transform: translateX(20px); } .toggle-switch input:disabled + .toggle-switch-slider { opacity: 0.5; cursor: not-allowed; } /* Inline-пара "лейбл + toggle" для form-rows (форма цели и пр.). Селектор `.form .toggle-row` для перебивания `.form label { flex-direction: column }`. */ .toggle-row, .form .toggle-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 12px 0; cursor: pointer; user-select: none; } .toggle-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .toggle-row-title { font-size: 14px; font-weight: 500; color: var(--ink); } .toggle-row-desc { font-size: 12px; color: var(--muted); line-height: 1.4; } /* === CHANNELS MANAGER === */ .channel-card { display: grid; grid-template-columns: 40px 1fr auto auto auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border-input); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; transition: all .15s; color: var(--ink); } .channel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .channel-card.disabled { opacity: 0.55; } .channel-card.builtin { background: var(--bg-elevate); } .channel-color-dot { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border-input); transition: transform .15s; } .channel-color-dot:hover { transform: scale(1.05); } .channel-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .channel-info .nm { font-weight: 600; color: var(--ink); font-size: 14px; } .channel-info .mt { color: var(--muted); font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; } .channel-info .mt .tag { padding: 2px 6px; background: var(--bg-elevate); border-radius: 4px; } .channel-pct-badge { padding: 4px 10px; background: var(--accent-soft); color: var(--accent); border-radius: 6px; font-size: 12px; font-weight: 600; font-family: var(--mono-font); min-width: 50px; text-align: center; } .channel-pct-badge.manual { background: var(--warn-soft); color: var(--warn); } /* DEMO+9.12 (ADR-123): tag-каналы — нейтральный серый бейдж «тег» */ .channel-pct-badge.tag { background: var(--bg-elevate, var(--bg-soft, var(--bg))); color: var(--muted); font-weight: 500; text-transform: lowercase; font-family: var(--ui-font, system-ui); letter-spacing: 0.02em; } /* DEMO+9.12 (ADR-123): сегмент-контрол «Тег / Процент» в форме редактирования канала. Идиома такая же как у alloc-life-mode-seg в Настройках→Распределение (DEMO+9.11). Активная кнопка — белый фон + лёгкая тень + цветная рамка var(--accent), неактивная — прозрачный фон + лёгкое hover. */ .ef-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 12px; padding: 4px; background: var(--bg-soft, var(--bg)); border: 1px solid var(--line); border-radius: 10px; } .ef-mode-btn { /* большая кликабельная зона — вся высота + ширина */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 12px; border: 1.5px solid transparent; background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; text-align: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; /* убираем дефолтные стили браузерных кнопок */ outline: none; user-select: none; /* span внутри не должен перехватывать клики — делегирование через closest() всё равно работает, но оптимизация для скорости */ pointer-events: auto; } .ef-mode-btn > * { pointer-events: none; } .ef-mode-btn:hover:not(.active) { background: var(--bg); color: var(--ink); } .ef-mode-btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); } .ef-mode-btn.active { background: var(--card, var(--bg)); color: var(--ink); font-weight: 600; border-color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--accent-glow); } .ef-mode-title { display: block; font-size: 13px; line-height: 1.2; } .ef-mode-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.2; } .ef-mode-btn.active .ef-mode-sub { color: var(--accent); opacity: 0.85; } /* Поле «% в карман» в форме редактирования канала (Pro+, mode='percent') */ .ef-pct-wrap { margin-bottom: 12px; } .ef-pct-label { font-size: 12px; display: flex; flex-direction: column; gap: 4px; } /* Info-плашка для Free/Pro юзера в форме создания/редактирования канала */ .ef-tag-only-note { font-size: 12px; color: var(--ink-soft, var(--muted)); margin: 12px 0; padding: 10px 12px; background: var(--bg-soft, var(--bg)); border: 1px solid var(--line); border-radius: 8px; line-height: 1.45; } .ef-tag-only-note b { color: var(--ink); } .channel-actions { display: flex; gap: 4px; } .channel-actions button { width: 32px; height: 32px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: all .15s; font-size: 14px; font-family: inherit; } .channel-actions button:hover { border-color: var(--border-strong); color: var(--ink); background: var(--card-hover); } .channel-actions button.danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); } .channel-actions button[disabled] { opacity: 0.3; cursor: not-allowed; } .channel-toggle { position: relative; width: 40px; height: 22px; background: var(--border-strong); border-radius: 999px; cursor: pointer; transition: background .15s; border: none; } .channel-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--card); border-radius: 50%; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .channel-toggle.on { background: var(--good); } .channel-toggle.on::after { left: 20px; } .channel-edit-form { background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 12px; padding: 16px; margin-bottom: 8px; color: var(--ink); } .channel-edit-form .form-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-bottom: 10px; } .channel-edit-form .color-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .channel-edit-form .color-picker .col { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform .1s; } .channel-edit-form .color-picker .col:hover { transform: scale(1.1); } .channel-edit-form .color-picker .col.selected { border-color: var(--ink); transform: scale(1.1); } .channel-edit-form .actions { display: flex; gap: 8px; justify-content: flex-end; } @media (max-width: 640px) { .channel-card { grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; } .channel-pct-badge { grid-column: 2; grid-row: 1; justify-self: end; } .channel-actions { grid-column: 1/-1; grid-row: 2; justify-self: start; } .channel-edit-form .form-row { grid-template-columns: 1fr; } } /* === v4e: ACCOUNT CARD (аналогично channel-card, но с бейджем банка и балансом) === */ .account-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--border-input); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; transition: all .15s; color: var(--ink); } .account-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .account-badge { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 18px; cursor: pointer; box-shadow: 0 0 0 1px var(--border-input); transition: transform .15s; font-family: var(--mono-font); letter-spacing: 0; } .account-badge:hover { transform: scale(1.05); } .account-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; } .account-info .nm { font-weight: 600; color: var(--ink); font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .account-info .nm .last4 { font-family: var(--mono-font); color: var(--muted); font-size: 13px; font-weight: 500; } .account-info .mt { color: var(--muted); font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; } .account-info .mt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .account-info .mt .tag { padding: 2px 6px; background: var(--bg-elevate); border-radius: 4px; flex-shrink: 0; } .account-info .mt .tag.muted { opacity: .75; } .account-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 100px; } .account-balance .bal-num { font-size: 16px; font-weight: 600; color: var(--ink); font-family: var(--mono-font); } .account-balance .bal-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .account-actions { display: flex; gap: 4px; } .account-actions button { width: 32px; height: 32px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: all .15s; font-size: 14px; font-family: inherit; } .account-actions button:hover { border-color: var(--border-strong); color: var(--ink); background: var(--card-hover); } .account-actions button.danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); } .account-edit-form { background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 12px; padding: 16px; margin-bottom: 8px; color: var(--ink); } .account-edit-form .form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .account-edit-form .form-row label { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } /* P3 (28 мая 2026): инпуты формы счёта — единый стиль проекта (был браузерный дефолт с тонкой рамкой). Совпадает с .alloc-life-row > input и общими контролами. */ .account-edit-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; } .account-edit-form input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } /* Суммовое поле «Физический остаток» — табличные цифры в mono (как везде в проекте) */ .account-edit-form #ef-acc-start, .account-edit-form #ef-acc-last4 { font-family: var(--mono-font); font-variant-numeric: tabular-nums; } .account-edit-form .color-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .account-edit-form .color-picker .col { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform .1s; } .account-edit-form .color-picker .col:hover { transform: scale(1.1); } .account-edit-form .color-picker .col.selected { border-color: var(--ink); transform: scale(1.1); } .account-edit-form .actions { display: flex; gap: 8px; justify-content: flex-end; } @media (max-width: 640px) { .account-card { grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; padding: 12px; } .account-balance { grid-column: 2; grid-row: 1; min-width: 0; align-items: flex-end; } .account-actions { grid-column: 1/-1; grid-row: 2; justify-self: start; } .account-edit-form .form-row label { flex: 1 1 100%; } } /* === THEME CHOOSER === */ .theme-card { cursor: pointer; border: 2px solid var(--border-input); border-radius: 14px; padding: 12px; background: var(--card); transition: all .15s; display: block; color: var(--ink); } .theme-card:hover { border-color: var(--border-strong); } .theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .theme-preview { height: 140px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border-card); } /* В превьюшках цвета специально захардкожены — они должны показывать конкретную тему, даже если текущая тема пользователя другая. Единственное исключение из ADR-019. */ .theme-preview-claude-light { background: #FAF9F6; } .theme-preview-claude-dark { background: #1F1E1C; } .theme-preview-business-light { background: #F5F6F8; } .theme-preview-business-dark { background: #0F1419; } .theme-preview-neutral-light { background: #F7F7F5; } .theme-preview-neutral-dark { background: #0E0E10; } .theme-preview .preview-head { height: 30px; border-bottom: 1px solid; } .theme-preview-claude-light .preview-head { background: #FFFFFF; border-color: #E8E3D8; } .theme-preview-claude-dark .preview-head { background: #262421; border-color: #3A3835; } .theme-preview-business-light .preview-head { background: #FFFFFF; border-color: #E2E8F0; } .theme-preview-business-dark .preview-head { background: #1A2029; border-color: #2D3748; } /* Neutral: head без обводки, держится на тени (характеристика темы) */ .theme-preview-neutral-light .preview-head { background: #FFFFFF; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .theme-preview-neutral-dark .preview-head { background: #16161A; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.30); } .theme-preview .preview-body { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: calc(100% - 30px); } .theme-preview .preview-kpi { border-radius: 8px; } .theme-preview-claude-light .preview-kpi { background: #FFFFFF; border: 1px solid #E8E3D8; } .theme-preview-claude-light .preview-kpi:first-child { background: linear-gradient(135deg, #C46A4A, #E08E6D); border: none; } .theme-preview-claude-dark .preview-kpi { background: #262421; border: 1px solid #3A3835; } .theme-preview-claude-dark .preview-kpi:first-child { background: linear-gradient(135deg, #D97757, #E89B7F); border: none; } .theme-preview-business-light .preview-kpi { background: #FFFFFF; border: 1px solid #E2E8F0; } .theme-preview-business-light .preview-kpi:first-child { background: linear-gradient(135deg, #2D5FAA, #4A7BC8); border: none; } .theme-preview-business-dark .preview-kpi { background: #1A2029; border: 1px solid #2D3748; } .theme-preview-business-dark .preview-kpi:first-child { background: linear-gradient(135deg, #4A9EFF, #6EB4FF); border: none; } /* Neutral: карточки крупнее (border-radius 12px против 8px), без обводок, на тенях. Это и есть «фишка» Neutral — превью должно показать её сразу. */ .theme-preview-neutral-light .preview-kpi { background: #FFFFFF; border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .theme-preview-neutral-light .preview-kpi:first-child { background: linear-gradient(135deg, #C46A4A, #E08E6D); box-shadow: 0 4px 12px rgba(196,106,74,0.20); } .theme-preview-neutral-dark .preview-kpi { background: #16161A; border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.40); } .theme-preview-neutral-dark .preview-kpi:first-child { background: linear-gradient(135deg, #D97757, #E89B7F); box-shadow: 0 4px 12px rgba(217,119,87,0.30); } /* Spr.6 LINEAR превью: хейрлайн-бордеры, тугой радиус, без тени */ .theme-preview-linear-light { background: #FFFFFF; } .theme-preview-linear-dark { background: #08090A; } .theme-preview-linear-light .preview-head { background: #FFFFFF; border-color: #E9EAED; } .theme-preview-linear-dark .preview-head { background: #0E0F11; border-color: #222428; } .theme-preview-linear-light .preview-kpi { background: #FFFFFF; border: 1px solid #E9EAED; border-radius: 5px; } .theme-preview-linear-light .preview-kpi:first-child { background: linear-gradient(135deg, #C46A4A, #E08E6D); border: none; } .theme-preview-linear-dark .preview-kpi { background: #0E0F11; border: 1px solid #222428; border-radius: 5px; } .theme-preview-linear-dark .preview-kpi:first-child { background: linear-gradient(135deg, #D97757, #E89B7F); border: none; } /* Spr.6 ALFA превью: белые карточки на сером, без бордера/тени, крупный радиус */ .theme-preview-alfa-light { background: #F1F2F4; } .theme-preview-alfa-dark { background: #15161A; } .theme-preview-alfa-light .preview-head { background: #FFFFFF; border-color: transparent; } .theme-preview-alfa-dark .preview-head { background: #1E2026; border-color: transparent; } .theme-preview-alfa-light .preview-kpi { background: #FFFFFF; border: none; border-radius: 11px; } .theme-preview-alfa-light .preview-kpi:first-child { background: linear-gradient(135deg, #C46A4A, #E08E6D); } .theme-preview-alfa-dark .preview-kpi { background: #1E2026; border: none; border-radius: 11px; } .theme-preview-alfa-dark .preview-kpi:first-child { background: linear-gradient(135deg, #D97757, #E89B7F); } .theme-card-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; } .theme-card-sub { color: var(--muted); font-size: 12px; } /* === FONT CHOOSER (DEMO+9.8, ADR-111) === */ .font-card { cursor: pointer; border: 2px solid var(--border-input); border-radius: 14px; padding: 12px; background: var(--card); transition: all .15s; display: block; color: var(--ink); } .font-card:hover { border-color: var(--border-strong); } .font-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .font-preview { height: 90px; border-radius: 10px; background: var(--bg-elevate); margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; /* font-family задаётся inline на каждой карточке — нельзя через переменные, иначе все 4 превью покажут текущий выбранный шрифт. */ } .font-preview-big { font-size: 32px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.01em; } .font-preview-sample { font-size: 12px; color: var(--muted); font-weight: 500; } .font-card-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; } .font-card-sub { color: var(--muted); font-size: 12px; } /* === ACCENT CHOOSER (ADR-112, только в Neutral темах) === */ .accent-card { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 2px solid var(--border-input); border-radius: 999px; background: var(--card); color: var(--ink); transition: all .15s; user-select: none; } .accent-card:hover { border-color: var(--border-strong); } .accent-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .accent-card.disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); } .accent-card.disabled:hover { border-color: var(--border-input); } .accent-swatch { display: block; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; /* swatch — захардкоженный градиент в HTML, чтобы показывал реальный цвет независимо от текущей темы (как и .theme-preview-*). Это второе обоснованное исключение из ADR-019 — единственное место где видно цветовой пресет. */ } .accent-card-title { font-size: 13px; font-weight: 500; } /* === ALLOC MODES === */ #fAllocModes .chip.active { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 2px 6px var(--accent-glow); } /* === Бейджи в журнале === */ .status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; letter-spacing: .02em; } .channel-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink); white-space: nowrap; } .channel-badge .ch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* === HERO (Главная) === */ .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero-main { background: var(--card); border: 1px solid var(--border-card); border-radius: var(--r-lg); padding: 28px 32px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .hero-main::before { content: ''; position: absolute; top: -40%; right: -10%; width: 50%; height: 180%; background: radial-gradient(circle, var(--accent-glow), transparent 60%); pointer-events: none; } .hero-label { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .hero-label::before { content: ''; width: 16px; height: 1px; background: var(--muted); } .hero-value { font-family: var(--mono-font); font-size: clamp(48px, 8vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hero-value .currency { font-size: 0.4em; color: var(--muted); font-weight: 400; } .hero-meta { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-divider); flex-wrap: wrap; } .hero-trend { display: flex; align-items: center; gap: 8px; font-family: var(--mono-font); font-size: 13px; font-weight: 600; } .hero-trend.up { color: var(--good); } .hero-trend.down { color: var(--bad); } .hero-trend.flat { color: var(--muted); } .hero-trend .arrow { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; } .hero-trend.up .arrow { background: var(--good-soft); color: var(--good); } .hero-trend.down .arrow { background: var(--bad-soft); color: var(--bad); } .hero-trend.flat .arrow { background: var(--bg-elevate); color: var(--muted); } .hero-meta-item { color: var(--muted); font-size: 11px; display: flex; flex-direction: column; gap: 2px; } .hero-meta-item .v { color: var(--ink); font-family: var(--mono-font); font-weight: 500; font-size: 13px; } /* Карточка «Наблюдения» */ .observations-card { background: var(--card); border: 1px solid var(--border-card); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; } .observations-title { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } .observation-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elevate); border: 1px solid transparent; font-size: 13px; line-height: 1.45; color: var(--ink); transition: border-color .15s, transform .15s; } .observation-item:hover { border-color: var(--border-input); transform: translateX(2px); } .observation-item .icon { flex-shrink: 0; font-size: 16px; line-height: 1.3; } .observation-item.tone-milestone { border-left: 3px solid var(--accent); } .observation-item.tone-positive { border-left: 3px solid var(--good); } .observation-item.tone-warning { border-left: 3px solid var(--warn); } .observation-item.tone-neutral { border-left: 3px solid var(--muted); } .observation-item b { color: var(--ink); font-weight: 600; } .observations-empty { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; font-style: italic; } /* Компактный журнал на главной */ .mini-journal { display: flex; flex-direction: column; gap: 6px; } .mini-journal-row { display: grid; /* DEMO+9.7: 130px под «30 апреля 2026» (было 70px под ISO 2026-04-30) */ grid-template-columns: 130px auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--card); border: 1px solid var(--border-card); border-radius: 10px; transition: all .15s; color: var(--ink); } .mini-journal-row:hover { border-color: var(--border-strong); background: var(--card-hover); } /* Рамис №1: строка кликабельна (открывает запись) */ .mini-journal-row.mj-clickable { cursor: pointer; } .mini-journal-row.mj-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mini-journal-row .mj-date { /* DEMO+9.7: human-readable формат, не monospace */ font-size: 13px; color: var(--muted); } .mini-journal-row .mj-source { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-journal-row .mj-pocket { font-family: var(--mono-font); font-size: 14px; color: var(--good); font-weight: 600; } .mini-journal-row .mj-pocket.cancelled { color: var(--muted); text-decoration: line-through; } .mini-journal-more { text-align: center; padding: 10px; margin-top: 8px; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 8px; transition: background .15s; text-decoration: none; display: block; } .mini-journal-more:hover { background: var(--accent-soft); } /* === EXTRA-OPTIONS (collapsible «Дополнительно» в форме притока) === */ .extra-options{ margin-top: 8px; border-top: 1px dashed var(--border-divider); padding-top: 10px; } .extra-options > summary{ cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 6px; transition: color .15s; } .extra-options > summary::-webkit-details-marker{ display: none; } .extra-options > summary::before{ content: '▸'; font-size: 10px; transition: transform .15s; display: inline-block; color: var(--muted); } .extra-options[open] > summary::before{ transform: rotate(90deg); } .extra-options > summary:hover{ color: var(--accent); } /* === SEGMENTED CONTROL (подвкладки Настроек) === */ .segmented{ display: inline-flex; background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 8px; } .seg-item{ appearance: none; border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .seg-item:hover{ color: var(--ink); } .seg-item.active{ background: var(--card); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); } /* ============================================================ Реструктуризация меню (21 мая 2026, фаза 2): двухуровневый sliding-tabs. Уровень 1 — группы (Деньги/Приложение) с язычком-кареткой, сливающимся с панелью пунктов снизу (connected tabs, без швов). Уровень 2 — пункты активной группы со скользящей кареткой-таблеткой. Каретки .lvl1-slider/ .lvl2-slider позиционирует JS (left/width), CSS только анимирует переход. ============================================================ */ .settings-tabs{ display: inline-flex; flex-direction: column; align-self: flex-start; } /* Уровень 1 — ряд групп */ .settings-tabs .lvl1{ position: relative; display: inline-flex; gap: 0; z-index: 2; margin-bottom: -1px; /* подтягивает панель вплотную → шов исчезает */ } .settings-tabs .lvl1-slider{ position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--bg-elevate); border: 1px solid var(--border-input); border-bottom: none; border-radius: 10px 10px 0 0; z-index: -1; transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); } .settings-tabs .lvl1-tab{ appearance: none; border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 18px 10px; cursor: pointer; color: var(--ink-soft); position: relative; transition: color .2s cubic-bezier(.4,0,.2,1); } .settings-tabs .lvl1-tab:hover{ color: var(--ink); } .settings-tabs .lvl1-tab.active{ color: var(--accent); } /* Уровень 2 — панель пунктов. Тот же фон, что у язычка → единое целое */ .settings-tabs .lvl2{ position: relative; display: inline-flex; flex-wrap: wrap; gap: 0; background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 0 10px 10px 10px; padding: 4px; z-index: 1; align-self: flex-start; min-height: 34px; } .settings-tabs .lvl2-slider{ position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: var(--card); border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.06); z-index: 0; transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); } .settings-tabs .seg-item{ appearance: none; border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 7px; cursor: pointer; white-space: nowrap; position: relative; z-index: 1; transition: color .2s cubic-bezier(.4,0,.2,1); } .settings-tabs .seg-item:hover{ color: var(--ink); } .settings-tabs .seg-item.active{ color: var(--accent); font-weight: 600; } .settings-tabs .seg-item[hidden]{ display: none !important; } /* Узкие экраны: каретки скрываем (ширины прыгают при wrap), оставляем простую подсветку активного через фон — каретка не нужна на мобильном. */ @media (max-width: 600px){ .settings-tabs .lvl2{ flex-wrap: wrap; } } /* Реструктуризация меню (фаза 2): единый контент-врапер всех подвкладок. Раньше «Распределение» сидело в карточке .alloc-settings, а «Каналы»/«Счета»/ «Данные» шли голым контентом прямо в .settings-subtab — разнобой. Теперь каждая активная подвкладка — единое полотно-карточка одного стиля. .settings-pane — тот же класс используется в renderHelpSubtab. */ .settings-subtab.active, .settings-pane{ background: var(--card); border: 1px solid var(--border-card); border-radius: 14px; padding: 18px 20px; margin-top: 4px; } /* Вложенные карточки внутри полотна не должны давать двойную обводку: .alloc-settings уже была карточкой — внутри полотна снимаем её внешнюю рамку и фон, оставляя только внутреннюю структуру (hd/bd). */ .settings-subtab.active .alloc-settings{ background: transparent; border: none; border-radius: 0; margin: 0; } .settings-subtab.active .alloc-settings-hd{ padding: 0 0 12px 0; } .settings-subtab.active .alloc-settings-bd{ padding: 0; } /* help-subtab панели (.settings-pane внутри .help-grid) — самостоятельные карточки, поэтому у активной help-подвкладки убираем внешнее полотно (иначе карточка-в-карточке). */ #subtab-help.settings-subtab.active{ background: transparent; border: none; padding: 0; } /* === v4d: Плейсхолдер избранной цели в KPI-ряду === */ .kpi.kpi-placeholder{ background: var(--bg-elevate); border: 1px dashed var(--border-strong); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-decoration: none; color: var(--muted); transition: all .15s; cursor: pointer; } .kpi.kpi-placeholder:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .kpi.kpi-placeholder .val{ color: inherit; } /* v4d: звёздочка-флажок featured в списке целей */ .goal-featured-toggle{ display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 13px; transition: all .15s; user-select: none; } .goal-featured-toggle:hover{ border-color: var(--border-strong); color: var(--ink); } .goal-featured-toggle.on{ background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); border-color: var(--warn); font-weight: 600; } .goal-featured-toggle[aria-disabled="true"]{ opacity: .4; cursor: not-allowed; } /* === KPI featured-плитки и плейсхолдер (v4d, главная) === */ /* Featured-плитки имеют такую же обводку как обычные — выделяются только акцентной заливкой прогресс-бара. */ .kpi.kpi-featured .bar i{ background: linear-gradient(90deg, var(--accent), var(--accent2)); } .kpi.kpi-placeholder{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; text-decoration: none; border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--muted); transition: all .15s; cursor: pointer; } .kpi.kpi-placeholder:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .kpi.kpi-placeholder .name{ color: var(--ink-soft); } .kpi.kpi-placeholder .val-placeholder{ font-size: 13px; color: var(--muted); margin: 4px 0 2px; } /* === Goals: featured toggle (★) === */ .goal-star{ display: inline-block; color: var(--accent); font-size: 14px; margin-left: 4px; } .goal-featured-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); cursor: pointer; user-select: none; transition: all .15s; } .goal-featured-toggle:hover{ border-color: var(--border-strong); } .goal-featured-toggle input[type="checkbox"]{ position: absolute; opacity: 0; pointer-events: none; } .goal-featured-toggle > span{ font-size: 18px; color: var(--muted); transition: color .15s; } .goal-featured-toggle input[type="checkbox"]:checked + span{ color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); } .goal-featured-toggle input[type="checkbox"]:disabled + span{ opacity: 0.35; } /* === Гибридный % (ADR-017): карандаш в форме притока + бейдж в журнале === */ /* Поле % + карандаш */ /* DEMO+9.7 (ADR-109): карандаш ✎ теперь ВНУТРИ поля справа, а не отдельной кнопкой рядом — для согласованности с формой Plan */ .pocket-pct-row{ position: relative; display: block; width: 100%; } .pocket-pct-row input[type="number"]{ width: 100%; height: 44px; padding: 0 40px 0 12px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 14px; outline: none; box-sizing: border-box; } .pocket-pct-row input[type="number"]:disabled{ background: var(--bg-elevate); color: var(--ink-soft); cursor: default; } .pocket-pct-edit{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--ink-soft, var(--muted)); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .pocket-pct-edit:hover{ color: var(--accent); background: var(--bg-elevate); border-color: var(--border-input); } .pocket-pct-edit.active{ color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } /* Бейдж «гибридный %» */ .jc-badge.hybrid{ display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); white-space: nowrap; vertical-align: middle; } /* === Блок пользовательских целей в форме нового притока === */ #incomeGoalsBox{ grid-column: 1 / -1; /* на всю ширину формы */ margin-top: 8px; } #incomeGoalsWrap{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } #incomeGoalsWrap .row{ margin-bottom: 0 !important; /* перебиваем inline-стиль */ } /* === v4e-В.0: блок «Распределение в режиме Авто» в Настройках === */ .alloc-settings { background: var(--card); border: 1px solid var(--border-card); border-radius: 14px; margin: 0 0 24px 0; overflow: hidden; } .alloc-settings-hd { padding: 14px 18px; border-bottom: 1px solid var(--border-divider); display: flex; flex-direction: column; gap: 4px; } .alloc-settings-hd strong { font-size: 14px; } .alloc-settings-bd { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .alloc-life-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; transition: opacity 0.2s ease; } /* P2 (28 мая 2026): строка лимита теперь живёт ВНУТРИ .alloc-life-mode-block. Тонкий разделитель сверху отделяет её от сегмент-контрола/поля %, оставаясь в той же серой карточке (режим + % + лимит = одна смысловая группа). justify-content:flex-start — инпут прижат к лейблу (родительский space-between на всю ширину широкой карточки давал огромную дыру). */ .alloc-life-mode-block .alloc-life-row { padding-top: 12px; border-top: 1px dashed var(--line); justify-content: flex-start; } .alloc-life-row > span { font-size: 13px; color: var(--ink); font-weight: 500; } .alloc-life-row > input { width: 180px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--mono-font); font-variant-numeric: tabular-nums; } /* DEMO+9.11 (ADR-120.5): приглушение поля «Лимит на жизнь» в режимах, где оно не используется (B = % всегда без лимита, D = Жизнь не участвует). Не прячем — иначе layout прыгает. Показываем визуальный сигнал. */ .alloc-life-row.is-muted { opacity: 0.45; } .alloc-life-row.is-muted::after { content: 'не используется в этом режиме'; font-size: 11px; color: var(--muted); font-style: italic; margin-left: 8px; } /* DEMO+9.11 (ADR-120.5): сегмент-контрол режимов Жизни. 4 кнопки горизонтально, активная — белый фон + лёгкая тень (как в settings-tabs). Подпись двухстрочная: верх — название режима, низ — короткое уточнение. */ /* DEMO+11.10 (ADR-134.R10): «Режим Жизни» + «% от притока в Жизнь» в едином сером блоке. Раньше label, сегмент-контрол A/B/C/D и поле % были тремя отдельными элементами без визуальной связи. Юзер не понимал что % относится именно к режиму (а не к общим настройкам). Объединение в одну карточку с фоном делает связь явной. Внутренний серый сегмент-контрола (.alloc-life-mode-seg) остаётся — двойной серый создаёт иерархию «это контрол внутри блока настройки». */ .alloc-life-mode-block { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; padding: 14px 16px; background: var(--bg-elevate, var(--card-shade, #f5f5f4)); border-radius: 12px; border: 1px solid var(--line, transparent); } .alloc-life-mode-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .alloc-life-mode-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; /* P-darkfix (28 мая): было var(--bg2, var(--card-shade, #f5f5f4)) — но --bg2 и --card-shade НЕ определены в тёмных темах, fallback #f5f5f4 рисовал СВЕТЛЫЙ контейнер в business-dark → неактивные кнопки (--muted) сливались с фоном, текст «пропадал» при наведении. --bg-elevate определён во всех темах. */ background: var(--bg-elevate, #f5f5f4); padding: 4px; border-radius: 10px; } .alloc-life-mode-seg button { padding: 10px 8px; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--muted); display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; min-height: 56px; font-family: inherit; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .alloc-life-mode-seg button .lm-line1 { font-size: 13px; font-weight: 500; } .alloc-life-mode-seg button .lm-line2 { font-size: 11px; opacity: 0.75; } .alloc-life-mode-seg button.active { background: var(--card, white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .alloc-life-mode-seg button:hover:not(.active) { color: var(--ink); /* color-mix к --ink даёт лёгкую подсветку в ЛЮБОЙ теме: на светлой темнит, на тёмной светлит (раньше rgba(0,0,0,0.03) на тёмном фоне был не виден). */ background: color-mix(in srgb, var(--ink) 8%, transparent); } .alloc-life-mode-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ============================================================ DEMO+11 (ADR-124): «Витрина» секции «Распределение» для Free — модуль goals недоступен по тарифу → секция показана read-only с paywall-плашкой сверху. Принцип: видишь как будет работать на Pro, но не настраиваешь то что у тебя физически не работает. ============================================================ */ /* Сегмент режимов Жизни — disabled-состояние при витрине. Активная (A) кнопка остаётся подсвечена визуально — это «дефолт по умолчанию», юзер видит «вот это будет работать у меня сразу после апгрейда». */ .alloc-showcase-free .alloc-life-mode-seg button[disabled] { cursor: not-allowed; opacity: 0.55; } .alloc-showcase-free .alloc-life-mode-seg button[disabled].active { opacity: 0.75; } .alloc-showcase-free .alloc-life-mode-seg button[disabled]:hover { /* Снимаем hover-фон чтобы не казалось что кнопка реагирует */ background: transparent; } .alloc-showcase-free .alloc-life-mode-seg button[disabled].active:hover { background: var(--card, white); } /* Поле «% от притока в Жизнь» — disabled при витрине */ .alloc-showcase-free #sLifePct[disabled] { cursor: not-allowed; opacity: 0.55; background: rgba(0,0,0,0.02); } /* Paywall-плашка сверху секции «Распределение». Стиль согласован с .pro-paywall-inline (paywall.js) — единый язык: замочек-иконка слева, текст по центру, CTA справа. Баннер вставляется внутрь .alloc-settings-bd как первый ребёнок — получает тот же padding контейнера + gap:14px между детьми автоматически (margin не нужен). */ .alloc-free-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elevate, rgba(0,0,0,0.03)); border: 1px solid var(--line, rgba(0,0,0,0.08)); border-radius: 10px; font-size: 13px; } .alloc-free-banner .afb-icon { flex: none; width: 20px; height: 20px; color: var(--muted); } .alloc-free-banner .afb-text { flex: 1; min-width: 0; } .alloc-free-banner .afb-title { font-weight: 500; color: var(--ink); margin-bottom: 2px; } .alloc-free-banner .afb-sub { color: var(--muted); font-size: 12px; line-height: 1.4; } .alloc-free-banner .afb-cta { flex: none; font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; } .alloc-free-banner .afb-cta:hover { text-decoration: underline; } /* DEMO+9.11: строка ввода % — появляется только для режимов B/C. Слева — акцент-полоска (визуальный маркер «активный параметр»). Закрытие/раскрытие через max-height + opacity. DEMO+11.10 (ADR-134.R10): фон убран (полупрозрачная подложка не нужна когда родительский .alloc-life-mode-block уже серый). Акцент-полоска слева остаётся — она маркирует «параметр активен в текущем режиме». */ .alloc-life-pct-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 8px; background: var(--card); border-left: 3px solid var(--accent); max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height 0.22s ease, opacity 0.22s ease, padding 0.22s ease; } .alloc-life-pct-row.visible { max-height: 60px; opacity: 1; padding-top: 10px; padding-bottom: 10px; } .alloc-life-pct-label { font-size: 13px; color: var(--ink); font-weight: 500; } .alloc-life-pct-input-wrap { display: inline-flex; align-items: center; gap: 6px; } .alloc-life-pct-input-wrap input { width: 80px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--mono-font); font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; } .alloc-life-pct-input-wrap input::-webkit-outer-spin-button, .alloc-life-pct-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .alloc-life-pct-suffix { font-size: 13px; color: var(--muted); } /* DEMO+9.11: info-плашка в форме редактирования записи — «эта запись посчитана по режиму X, сейчас режим Y». Стилистически близка к em-banner-info, но менее настойчива. */ .em-life-mode-note { margin: 8px 0 12px; padding: 10px 14px; background: var(--bg-subtle, rgba(0,0,0,0.03)); border-left: 3px solid var(--accent-soft, var(--accent)); border-radius: 0 8px 8px 0; font-size: 12px; color: var(--muted); line-height: 1.5; } .em-life-mode-note strong { color: var(--ink); font-weight: 600; } /* Веса */ .aw-head { display: grid; grid-template-columns: 1fr 100px 60px; gap: 14px; padding: 6px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border-divider); margin-bottom: 6px; } .aw-row { display: grid; grid-template-columns: 1fr 100px 60px; gap: 14px; align-items: center; padding: 6px 0; } .aw-name { font-size: 13px; color: var(--ink); } .aw-weight { padding: 6px 10px; border: 1px solid var(--border-card); border-radius: 6px; background: var(--card); color: var(--ink); font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-size: 13px; } .aw-pct { font-size: 12px; color: var(--muted); text-align: right; font-family: var(--mono-font); } .aw-hint { font-size: 11px; padding-top: 6px; } /* Превью */ .alloc-preview { background: var(--bg-elevate); border: 1px solid var(--border-input); border-radius: 10px; padding: 12px 14px; } .ap-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .ap-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ap-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .ap-row b { font-family: var(--mono-font); font-variant-numeric: tabular-nums; color: var(--accent); } .ap-hint { font-size: 11px; padding-top: 8px; border-top: 1px dashed var(--border-divider); } /* Баннер «Применится к новым» */ .alloc-banner { background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); border-radius: 8px; padding: 10px 14px; font-size: 13px; animation: allocBannerIn 0.3s ease; } @keyframes allocBannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Два сценария в превью */ .ap-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; } @media (max-width: 600px) { .ap-scenarios { grid-template-columns: 1fr; } } .ap-scenario { background: var(--card); border: 1px solid var(--border-card); border-radius: 8px; padding: 10px 12px; } .ap-scenario-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 500; } /* === v4e-В.1.2: бейджи счетов в записях журнала === */ .acc-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; vertical-align: middle; } .acc-badge .acc-letter { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; letter-spacing: 0; } .acc-badge .acc-last4 { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-size: 10px; color: var(--muted); } /* ============================================================ DEMO+9.9 (ADR-113): Косметика вкладки Цели - Плейсхолдер «+ Добавить новую цель» — тонкая полоска во всю ширину сетки - Раскрытие цели через FLIP-анимацию: span 1 → span 2 в grid 3-в-ряд - Inline-форма «Новая цель» вместо отдельной .card снизу ============================================================ */ /* Сетка целей фиксированно 3 колонки */ #goalsBoard{ grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px){ #goalsBoard{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px){ #goalsBoard{ grid-template-columns: 1fr; } } /* === Плейсхолдер «+ Добавить новую цель» (вариант B — тонкая полоска) === */ .goal-add-placeholder{ grid-column: 1 / -1; background: var(--bg-elevate); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); padding: 14px 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); transition: border-color .18s ease, background .18s ease, color .18s ease; min-height: 56px; user-select: none; font-size: 14px; } .goal-add-placeholder:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* === Inline-форма «Новая цель» (#goalForm в раскрытом состоянии) === */ .goals-new-form{ grid-column: 1 / -1; background: var(--card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 18px 20px 20px; box-shadow: var(--shadow-card); overflow: hidden; animation: goalsFormExpand 0.32s cubic-bezier(.32,.72,.26,1); transform-origin: top; } @keyframes goalsFormExpand{ from{ opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 800px; } } .goals-new-form .gnf-hdr{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .goals-new-form .gnf-hdr strong{ font-size: 15px; } .goals-new-form .gnf-close{ background: transparent; border: none; cursor: pointer; font-size: 18px; color: var(--muted); padding: 4px 8px; border-radius: 6px; transition: background .15s, color .15s; } .goals-new-form .gnf-close:hover{ background: var(--bg-elevate); color: var(--ink); } .goals-new-form .gnf-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .goals-new-form .gnf-grid > label, .goals-new-form .gnf-grid > .gnf-toggle-row, .goals-new-form .gnf-grid > .gnf-actions{ display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .goals-new-form .gnf-grid input, .goals-new-form .gnf-grid select{ padding: 10px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font-size: 14px; font-family: inherit; } .goals-new-form .gnf-grid input[type="number"]{ font-family: var(--mono-font, 'JetBrains Mono', monospace); } .goals-new-form .gnf-toggle-row{ grid-column: 1 / -1; flex-direction: row !important; align-items: center; gap: 12px !important; padding: 6px 0; } .goals-new-form .gnf-actions{ grid-column: 1 / -1; flex-direction: row !important; justify-content: flex-end; gap: 10px !important; margin-top: 4px; } /* === Карточка цели (.goal-kpi) — переопределение для нового layout === */ /* Базовая карточка остаётся как .kpi.goal-kpi из v4d. Здесь только то, что меняется. */ .goal-kpi{ cursor: pointer; position: relative; min-width: 0; /* важно для grid: ребёнок не должен распирать колонку */ /* НЕ ставим transition на grid-column — анимируем через FLIP в goals.js */ transition: border-color .18s ease, box-shadow .18s ease; } /* В режиме объединения курсор не «pointer» а «default» — клик обрабатывает чекбокс */ .goal-kpi.merge-mode{ cursor: default; } /* Раскрытое состояние: span 2 + горизонтальный layout */ .goal-kpi.goal-expanded{ grid-column: span 2; cursor: default; border-color: var(--border-strong); box-shadow: 0 8px 28px rgba(0,0,0,0.08); display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 20px; align-items: start; padding: 16px 18px; } .goal-kpi.goal-expanded > .gk-summary{ display: flex; flex-direction: column; gap: 8px; padding-right: 18px; border-right: 1px solid var(--border-divider); min-width: 0; } @media (max-width: 900px){ .goal-kpi.goal-expanded{ grid-column: 1 / -1; } } @media (max-width: 700px){ .goal-kpi.goal-expanded{ grid-template-columns: 1fr; } .goal-kpi.goal-expanded > .gk-summary{ padding-right: 0; padding-bottom: 14px; border-right: none; border-bottom: 1px solid var(--border-divider); } } /* Кнопки в углу (✎ Изменить / ×) */ .gk-actions{ position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 2; } .goal-kpi:hover .gk-actions, .goal-kpi.goal-expanded .gk-actions{ opacity: 1; } .gk-edit, .gk-close{ background: var(--card); border: 1px solid var(--border-input); border-radius: 6px; cursor: pointer; padding: 4px 8px; font-size: 12px; color: var(--muted); transition: all .15s; font-family: inherit; } .gk-edit:hover{ color: var(--accent); border-color: var(--accent); } .gk-close:hover{ color: var(--ink); border-color: var(--border-strong); } /* === Detail-блок (правая колонка в раскрытой цели) === */ .goal-detail-inline{ display: flex; flex-direction: column; gap: 14px; min-width: 0; } .goal-detail-inline .gdi-section-title{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; } .goal-detail-inline .gdi-acc{ display: flex; align-items: center; gap: 10px; padding: 6px 0; } .goal-detail-inline .gdi-acc-bank{ width: 28px; height: 28px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 13px; } .goal-detail-inline .gdi-acc-name{ flex: 1; font-size: 13px; display: flex; align-items: center; gap: 8px; } .goal-detail-inline .gdi-acc-primary{ display: inline-block; padding: 2px 8px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; } .goal-detail-inline .gdi-acc-balance{ font-family: var(--mono-font, 'JetBrains Mono', monospace); font-size: 13px; } .goal-detail-inline .gdi-tabs{ display: flex; gap: 16px; border-bottom: 1px solid var(--border-divider); } .goal-detail-inline .gdi-tab{ padding: 8px 0; background: transparent; border: none; cursor: pointer; font-size: 13px; color: var(--muted); position: relative; font-family: inherit; } .goal-detail-inline .gdi-tab.active{ color: var(--accent); } .goal-detail-inline .gdi-tab.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); } .goal-detail-inline .gdi-empty{ padding: 8px 0; font-size: 13px; color: var(--muted); } /* FLIP — used by goals.js animateExpand() */ .goal-kpi.flip-anim{ will-change: transform; } /* ============================================================ DEMO+9.9.1.1 (ADR-117.4) — Плашка просрочек: B-инлайн флоу + Bulk ============================================================ */ /* Базовая структура плашки overdue (раньше была инлайн в home.js) */ .overdue-card { background: var(--card); border: 1px solid var(--border-card); border-radius: var(--radius-card, 14px); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 16px; } .overdue-hd { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-divider); margin-bottom: 14px; } .overdue-icon { font-size: 22px; line-height: 1; color: var(--warn, #d97706); } .overdue-title-block { flex: 1; min-width: 0; } .overdue-title { font: 600 15px/1.2 var(--ui-font); color: var(--ink); margin-bottom: 3px; } .overdue-sub { font: 400 12px/1.4 var(--ui-font); color: var(--muted); } .overdue-total { font: 600 16px/1 var(--mono-font); color: var(--ink); } /* Кнопка «☑ Выбрать несколько» в шапке плашки */ .overdue-bulk-toggle { font-size: 12px; padding: 6px 12px; } /* Список и строки */ .overdue-list { display: flex; flex-direction: column; gap: 8px; } .overdue-row { background: var(--bg-elevate, var(--card)); border: 1px solid var(--border-card); border-radius: 10px; transition: outline 0.15s ease, background 0.15s ease; } .overdue-row-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .overdue-info { flex: 1; min-width: 0; } .overdue-source { font: 600 13px var(--ui-font); color: var(--ink); margin-bottom: 2px; } .overdue-meta { font: 400 12px/1.3 var(--ui-font); } .overdue-actions { display: flex; gap: 6px; flex-wrap: wrap; } .overdue-actions .btn { font-size: 12px; padding: 6px 12px; } /* Раскрытая строка — выделена акцентной обводкой */ .overdue-row.is-expanded { outline: 2px solid var(--accent); outline-offset: -1px; } /* Inline-форма раскрытия (B-флоу) */ .overdue-inline-form { padding: 14px 16px 14px 16px; border-top: 1px solid var(--border-divider); background: var(--card); } .overdue-inline-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .overdue-inline-label { font: 500 12px var(--ui-font); color: var(--muted); } .overdue-inline-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .overdue-inline-chips .chip { padding: 5px 11px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font: 500 12px var(--ui-font); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .overdue-inline-chips .chip:hover { border-color: var(--accent); } .overdue-inline-chips .chip.active { border-color: var(--accent); background: var(--accent); color: #fff; } .overdue-inline-goal-wrap { display: flex; gap: 6px; align-items: center; } .overdue-inline-goal-select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font: 500 12px var(--ui-font); cursor: pointer; } .overdue-inline-date { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font: 500 12px var(--ui-font); } .overdue-inline-hint { font: 400 12px/1.5 var(--ui-font); color: var(--ink); padding: 8px 12px; background: var(--accent-soft, rgba(196,106,74,0.08)); border-left: 3px solid var(--accent); border-radius: 6px; margin-bottom: 12px; } .overdue-inline-hint b { font-weight: 600; } .overdue-inline-actions { display: flex; gap: 8px; justify-content: flex-end; } .overdue-inline-actions .btn { font-size: 12px; padding: 7px 14px; } /* Bulk-режим: bulk-bar в шапке, чекбоксы в строках */ .overdue-bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--accent-soft, rgba(196,106,74,0.1)); border-radius: 10px; margin-bottom: 12px; } .overdue-bulk-all { display: flex; align-items: center; gap: 10px; font: 500 13px var(--ui-font); cursor: pointer; user-select: none; } .overdue-bulk-all input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .overdue-bulk-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .overdue-bulk-actions .btn { font-size: 12px; padding: 6px 12px; } .overdue-bulk-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .overdue-row-checkbox { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } .overdue-row.is-selected { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--accent-soft, rgba(196,106,74,0.06)); } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .overdue-row { transition: none; } .overdue-inline-chips .chip { transition: none; } } /* ============================================================ DEMO+9.9.1.2 (ADR-118.2): Фикс мерцающего вертикального скролла при FLIP-переключении layout журнала. Регрессия из DEMO+4: класс .proto-clip навешивается на родителя #jJournalContent в applyJournalLayout() (см. js/sections/journal.js), но CSS-правило никогда не было добавлено — overflow не обрезался. На фазе invert (transformed-карточки за границами родителя) браузер показывал вертикальный скролл-бар на 100-200мс. Решение: overflow:clip на родителе во время FLIP + страховка через body:has() для случаев когда скроллится body. ============================================================ */ #jJournalContent.proto-clip { overflow: clip; } body:has(#jJournalContent.proto-clip) { overflow-y: clip; } /* DEMO+11.1 (ADR-121): FAB-бар запуска тура на Главной (preview). Стиль самого .tour-fab инжектится из js/ui/tour.js при первом ensureCSS(). */ .screen-tour-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; } /* DEMO+9.11.1 hotfix (ADR-122): плашка «Подтверди распределение» в карточке журнала. Появляется на записях, отфакченных через mark_paid без подтверждения распределения через модалку (override:false, нет полей life/ goals). Кликабельная — открывает модалку редактирования через data-edit. */ .jc-needs-alloc { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--warn, #b54708); background: var(--warn-soft, #fef3c7); border: 1px solid var(--warn-line, #fde68a); border-radius: 8px; cursor: pointer; font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease; } .jc-needs-alloc:hover { background: var(--warn-soft-hover, #fde68a); border-color: var(--warn, #b54708); } /* ============================================================ DEMO+11.6 (ADR-129) — Целевые даты у целей ============================================================ */ /* Узел A/B: строка с процентом + чип даты справа. Применяется и в .goal-kpi (вкладка Цели), и в .kpi-featured (Hero на главной). */ .gk-percent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .gk-percent-row > .gk-percent-text { flex: 1; min-width: 0; } /* Чип даты (общий стиль для всех состояний — серый по умолчанию) */ .gk-date-chip { font: 500 11px/1 'Inter', sans-serif; color: var(--muted, #94a3b8); background: color-mix(in srgb, currentColor 8%, transparent); padding: 5px 9px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; flex-shrink: 0; } /* Близкая дата (≤30 дней) или сегодня — мягкий акцент */ .gk-date-chip.gk-date-chip-near { color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 14%, transparent); } /* Прошедшая дата — акцент посильнее */ .gk-date-chip.gk-date-chip-past { color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 9%, transparent); } /* Узел C: плашка «целевая дата прошла» в раскрытой карточке цели. Двухстрочный layout: текст сверху, кнопки снизу. margin-right: 180px резервирует место в углу под системные ✎ × (см. ADR-129). */ .goal-overdue-banner { background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 18%, transparent); border-radius: 12px; padding: 12px 14px; margin: 0 180px 16px 0; /* справа уступаем место под кнопки ✎ × */ display: flex; flex-direction: column; gap: 10px; } .goal-overdue-banner .god-text { font: 500 13px/1.4 'Inter', sans-serif; color: var(--text, #0f172a); } .goal-overdue-banner .god-text strong { color: var(--accent, #6366f1); font-weight: 600; } .goal-overdue-banner .god-actions { display: flex; gap: 6px; flex-wrap: wrap; } .goal-overdue-banner button.god-btn { padding: 6px 12px; border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff); color: var(--text, #0f172a); border-radius: 8px; font: 500 12px/1 'Inter', sans-serif; cursor: pointer; transition: all .15s; white-space: nowrap; } .goal-overdue-banner button.god-btn:hover { background: var(--bg-soft, rgba(0,0,0,.04)); border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, var(--border, #e2e8f0)); } /* Mobile: на узких экранах (<700px) убираем margin-right плашки — там карточка все равно занимает всю ширину и системные кнопки сидят выше. */ @media (max-width: 700px) { .goal-overdue-banner { margin-right: 0; } } /* ============================================================ R1.4-A (ADR-DEMOR14): Recurring-цели — стили ============================================================ */ /* Бейдж recurring рядом с именем цели */ .goal-badge-recurring { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 500; background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent); color: var(--accent, #6366f1); border-radius: 4px; vertical-align: middle; white-space: nowrap; } /* Карточка цели в списке: для recurring чуть отличающийся бордер */ .goal-kpi.goal-recurring { border-left: 3px solid var(--accent, #6366f1); } /* Goals dashboard: строка recurring цели */ .gd-row.gd-row-recurring .gd-name { display: inline-flex; align-items: center; gap: 4px; } /* ============================================================ R1.4-A: переключение типа цели в форме создания (gnf-) и модалке (ge-) ============================================================ По умолчанию форма в режиме accumulating (класс на корне), при выборе recurring класс переключается. CSS прячет нерелевантные поля. */ /* Форма создания (#goalForm) */ #goalForm.gnf-form-accumulating .gnf-only-recurring { display: none; } #goalForm.gnf-form-recurring .gnf-only-accumulating { display: none; } /* Блок выбора типа цели в форме создания */ .gnf-type-block { padding: 10px 12px; background: var(--bg-elevate, rgba(0,0,0,.03)); border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 8px; margin-bottom: 4px; } .gnf-type-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .gnf-type-radios { display: flex; gap: 16px; flex-wrap: wrap; } .gnf-type-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; } .gnf-type-radio input[type="radio"] { margin: 0; } .gnf-type-name { font-weight: 500; } .gnf-type-hint { display: block; margin-top: 4px; } /* Модалка редактирования цели */ .ge-form-accumulating .ge-only-recurring { display: none; } .ge-form-recurring .ge-only-accumulating { display: none; } /* В recurring-режиме скрываем подсказку про featured (она теряет смысл) */ .ge-form-accumulating .ge-recurring-hint { display: none; } /* Блок Тип цели в модалке */ .ge-type-block { padding: 12px; background: var(--bg-elevate, rgba(0,0,0,.03)); border-radius: 8px; } .ge-type-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 8px; } .ge-type-radios { display: flex; flex-direction: column; gap: 10px; } .ge-type-radio { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 6px; border-radius: 6px; transition: background .12s; } .ge-type-radio:hover { background: var(--bg-soft, rgba(0,0,0,.04)); } .ge-type-radio input[type="radio"] { margin-top: 2px; } .ge-type-radio .ge-type-name { font-weight: 500; font-size: 14px; display: block; } .ge-type-radio .ge-type-hint { font-size: 11px; display: block; margin-top: 2px; } /* ============================================================ R1.4-A.1: Заголовки групп целей (Накопительные / Ежемесячные) ============================================================ На странице Цели #goalsBoard это grid-контейнер — заголовок занимает всю ширину через grid-column 1/-1. Аналогично в архиве и на дашборде. */ .goals-group-hdr { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; padding: 14px 4px 6px; margin: 0; } /* Первый заголовок без верхнего отступа — он сразу под плейсхолдером */ .goals-group-hdr:first-of-type, #goalsBoard > .goals-group-hdr:nth-of-type(1) { padding-top: 4px; } /* Goals dashboard заголовок группы */ .gd-group-hdr { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; padding: 12px 4px 8px; } .gd-group-hdr-recurring { margin-top: 4px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); padding-top: 16px; } /* ============================================================ DEMO+R1.4-B — NWH-блок + mini-progress-bar + state-pill Визуальная переразверстка Месяца Плана (ветка current). Адаптируется под все темы через CSS-переменные. data-drill атрибуты ставятся в HTML, но визуальной интерактивности (cursor:pointer / стрелки / hover) НЕТ — она появится в R1.4-C через js/ui/drill.js. ============================================================ */ /* ---------- NWH-BLOCK ---------- */ .nwh-block { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px; } @media (max-width: 880px) { .nwh-block { grid-template-columns: 1fr; } } .nwh-col { background: var(--card); border: 1px solid var(--border-card); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; } .nwh-col.need { background: color-mix(in srgb, var(--info) 5%, var(--card)); border-color: color-mix(in srgb, var(--info) 22%, var(--line)); } .nwh-col.have { background: color-mix(in srgb, var(--good) 5%, var(--card)); border-color: color-mix(in srgb, var(--good) 22%, var(--line)); } .nwh-col.miss { background: color-mix(in srgb, var(--accent) 6%, var(--card)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); } .nwh-col.miss.ok { background: color-mix(in srgb, var(--good) 5%, var(--card)); border-color: color-mix(in srgb, var(--good) 22%, var(--line)); } .nwh-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .nwh-col.need .nwh-title { color: var(--info); } .nwh-col.have .nwh-title { color: var(--good); } .nwh-col.miss .nwh-title { color: var(--accent); } .nwh-col.miss.ok .nwh-title { color: var(--good); } .nwh-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 5px 0; } .nwh-row.dim { color: var(--muted); padding-left: 12px; font-size: 12.5px; } .nwh-row b { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); } .nwh-row.recurring { color: var(--accent); } .nwh-divider { height: 1px; background: var(--border-divider); margin: 4px 0; } .nwh-section-hdr { font-size: 12.5px; color: var(--muted); padding: 5px 0 0; } /* R1.4-C.4: подзаголовок группы внутри need-колонки («Ежемесячные · 1» / «Накопительные · 3»). Помельче чем .nwh-section-hdr, с uppercase + letter-spacing — тот же визуальный язык что .goals-group-hdr и .gd-group-hdr на странице Целей и в Goals dashboard (R1.4-A.1). */ .nwh-group-hdr { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: 8px 0 2px; margin-top: 2px; } .nwh-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding: 6px 0 0; border-top: 1px dashed var(--border-divider); /* R1.4-B.1: margin-top: auto прижимает итого ко дну колонки flex-column. Это выравнивает все три «Нужно собрать» / «Собрано» / (одиночная строка в miss) на одной горизонтальной линии независимо от количества строк выше. */ margin-top: auto; } .nwh-total b { font-family: var(--mono-font); font-variant-numeric: tabular-nums; } .nwh-col.need .nwh-total b { color: var(--info); } .nwh-col.have .nwh-total b { color: var(--good); } .nwh-col.miss .nwh-total b { color: var(--accent); } .nwh-col.miss.ok .nwh-total b { color: var(--good); } /* R1.4-B.2 (8 мая 2026): строка после .nwh-total — вспомогательная справочная цифра («Прогноз с темпа»). Идёт ПОД итогом «Собрано», не входит в него. Без верхней границы (она уже у .nwh-total), без margin-top: auto (он сбросил бы прижатие итога ко дну колонки). Лёгкий padding сверху для визуального отделения. */ .nwh-row.nwh-after-total { padding-top: 6px; margin-top: 0; } .nwh-extra { font-size: 12px; color: var(--muted); margin-top: 2px; } .nwh-badge { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--bg-elevate); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .nwh-col.miss .nwh-badge { background: var(--accent); color: #fff; } .nwh-col.miss.ok .nwh-badge { background: var(--good); color: #fff; } /* ---------- MONTH-PROGRESS ---------- */ .month-progress { margin-top: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border-card); border-radius: var(--r-md); } .mp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--muted); gap: 8px; flex-wrap: wrap; } .mp-head b { color: var(--ink); font-family: var(--mono-font); font-weight: 600; } .mp-track { position: relative; height: 14px; background: var(--bg-elevate); border-radius: 999px; overflow: visible; /* для риски цели */ /* R1.4-B.1: margin-top уменьшен с 18px до 6px — лейбл «цель Xk» удалён, место сверху больше не нужно. */ margin-top: 6px; } .mp-fill { position: absolute; top: 0; bottom: 0; border-radius: 0; } .mp-fill.mp-fact { left: 0; background: var(--accent); border-radius: 999px 0 0 999px; } .mp-fill.mp-pending { background: color-mix(in srgb, var(--accent) 55%, transparent); } .mp-fill.mp-planned { background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--accent) 35%, transparent) 0 4px, color-mix(in srgb, var(--accent) 18%, transparent) 4px 8px ); border-radius: 0 999px 999px 0; } .mp-fill.last-segment { border-radius: 0 999px 999px 0; } .mp-fact.only-segment, .mp-pending.only-segment { border-radius: 999px; } .mp-target-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; pointer-events: none; } /* R1.4-B.1: .mp-target-label УДАЛЁН — лейбл «цель Xk» над риской больше не рендерится. Цифра «цель X ₽» уже видна в .mp-head справа, дублирование убрано. */ .mp-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); } .mp-legend .li { display: inline-flex; align-items: center; gap: 6px; } .mp-legend .li::before { content: ''; width: 12px; height: 12px; border-radius: 3px; } .mp-legend .li.fact::before { background: var(--accent); } .mp-legend .li.pending::before { background: color-mix(in srgb, var(--accent) 55%, transparent); } .mp-legend .li.planned::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent) 0 3px, color-mix(in srgb, var(--accent) 18%, transparent) 3px 6px); } .mp-legend .li.target::before { background: var(--ink); width: 2px; height: 14px; border-radius: 1px; } .mp-legend b { color: var(--ink); font-family: var(--mono-font); font-weight: 600; } /* ---------- STATE-PILL ---------- */ .state-pill { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--muted); background: var(--bg-elevate); font-size: 13.5px; line-height: 1.5; } .state-pill.state-achieved { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--bg-elevate)); } .state-pill.state-closed-soft { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 5%, var(--bg-elevate)); } .state-pill.state-planned-full { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--bg-elevate)); } .state-pill.state-gap { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevate)); } .state-pill .sp-icon { font-size: 22px; flex-shrink: 0; } .state-pill .sp-label { font-weight: 700; font-size: 14px; margin-bottom: 2px; } .state-pill.state-achieved .sp-label, .state-pill.state-closed-soft .sp-label { color: var(--good); } .state-pill.state-planned-full .sp-label { color: var(--warn); } .state-pill.state-gap .sp-label { color: var(--accent); } .state-pill .sp-desc { color: var(--ink-soft); font-size: 12.5px; } /* ============================================================ /DEMO+R1.4-B ============================================================ */ /* ============================================================ DEMO+R1.4-C — Drill-spotlight универсальный (8 мая 2026) ------------------------------------------------------------ • body.is-drill-active — глобальный «фокус-режим» (приглушает шапку/сайдбар) • body.drill-month — scope «Месяц Плана» • body.drill-month-{need|have|miss} — subscope (приглушает неактивные колонки NWH) • .nwh-drill-zone — карточка под NWH-блоком (полная ширина) • .nwh-row.expandable — кликабельная строка (cursor + hover + стрелка) • .nwh-row.is-expanded — раскрытая строка (background tint, стрелка повёрнута) • Через CSS-переменные → темо-адаптивно ============================================================ */ /* === Базовые состояния NWH-строк === */ .nwh-row.expandable { cursor: pointer; position: relative; transition: background-color 0.12s ease; padding-right: 22px; /* место под стрелочку ▸ */ } .nwh-row.expandable::after { content: '▸'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); transition: transform 0.18s ease, color 0.12s ease; opacity: 0.6; } .nwh-row.expandable:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .nwh-row.expandable:hover::after { color: var(--accent); opacity: 1; } .nwh-row.is-expanded { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; } .nwh-row.is-expanded::after { transform: translateY(-50%) rotate(90deg); color: var(--accent); opacity: 1; } /* === Drill-карточка — полная ширина под NWH-блоком === */ .nwh-drill-zone { position: relative; margin-top: 14px; background: var(--card, var(--bg-elevate)); border: 1px solid var(--accent); border-radius: 10px; padding: 18px 20px; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent); animation: drillIn 0.22s cubic-bezier(.2,.7,.3,1); } @keyframes drillIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Маленький треугольник-соединитель сверху drill-карточки. left задаётся через inject в head: