:root {
            /* Figma TaskDay c9o6NCtB9gKUzMfrnn3ZPa — Desktop Сегодня */
            --sidebar-w: 240px;
            --aside-w: 286px;
            --bg-app: #f6f8fb;
            --bg-panel: #fbfcfd;
            --bg-card: #ffffff;
            --bg-card-hover: #f6f7f9;
            --bg-subtle: #f6f7f9;
            --text-primary: #1a2433;
            --text-secondary: #1f2938;
            --text-muted: #667387;
            --text-soft: #6e7a8f;
            --border: #e3e8f0;
            /* Шкала шрифтов (минимум 12px) */
            --fs-xs: 12px;
            --fs-sm: 13px;
            --fs-base: 14px;
            --fs-md: 15px;
            --fs-ml: 16px;
            --fs-lg: 17px;
            --fs-xl: 20px;
            --fs-2xl: 24px;
            --border-subtle: #e3e8f0;
            --accent: #2963e8;
            --accent-hover: #1f56e5;
            --accent-soft: #e5edff;
            --life: #0a8f7d;
            --life-soft: #def5ed;
            --purple: #7c5cff;
            --purple-soft: rgba(124, 92, 255, 0.14);
            --success: #0a8f7d;
            --success-soft: #def5ed;
            --warning: #d97706;
            --warning-soft: rgba(217, 119, 6, 0.1);
            --danger: #dc2626;
            --danger-soft: rgba(220, 38, 38, 0.1);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 14px;
            --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
            --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);
            /* Мобильный dock / FAB (единая точка для padding и позиционирования) */
            --mobile-dock-h: 46px;
            --mobile-fab-size: 46px;
            --mobile-dock-gap: 8px;
            --mobile-dock-side: 12px;
            --mobile-bottom-pad: 14px;
            --mobile-bottom-inset: max(var(--mobile-bottom-pad), env(safe-area-inset-bottom, 0px));
            /* запас под dock + Дейли над ним */
            --mobile-board-pad-bottom: calc(var(--mobile-dock-h) + var(--mobile-bottom-inset) + 44px + 18px);
            color-scheme: light;
        }
        /* Чёрная тема: фон почти #000, карточки и линии — тёмно-серые */
        html[data-theme="dark"] {
            --bg-app: #000000;
            --bg-panel: #0a0a0a;
            --bg-card: #111111;
            --bg-card-hover: #1a1a1a;
            --bg-subtle: #141414;
            --text-primary: #f5f5f5;
            --text-secondary: #a3a3a3;
            --text-muted: #8a8a8a;
            --border: #333333;
            --border-subtle: #2a2a2a;
            --accent: #3b82f6;
            --accent-hover: #60a5fa;
            --accent-soft: rgba(59, 130, 246, 0.18);
            --success: #34d399;
            --success-soft: rgba(52, 211, 153, 0.14);
            --warning: #fbbf24;
            --warning-soft: rgba(251, 191, 36, 0.14);
            --danger: #f87171;
            --danger-soft: rgba(248, 113, 113, 0.16);
            --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.75);
            --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.85);
            color-scheme: dark;
        }
        html[data-theme="dark"] #boardGrid .tc-empty {
            border-bottom-color: #333333;
        }
        html[data-theme="dark"] .column-panel {
            border-color: #2a2a2a;
            background: #0a0a0a;
        }
        html[data-theme="dark"] #colToday.column-panel,
        html[data-theme="dark"] #colOther.column-panel {
            border: none !important;
            background: transparent !important;
        }
        html[data-theme="dark"] .column-header {
            border-bottom-color: #2a2a2a;
        }
        html[data-theme="dark"] .boot-overlay,
        html[data-theme="dark"] .auth-overlay {
            background: var(--bg-app);
        }
        html[data-theme="dark"] .boot-card {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            padding: 28px 26px 22px;
            min-width: min(280px, 100%);
        }
        html[data-theme="dark"] .boot-mark {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            border: none;
            box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
        }
        html[data-theme="dark"] .auth-tabs button.active {
            background: #fff;
            color: var(--accent);
        }
        html[data-theme="dark"] .auth-form input {
            background: var(--bg-subtle) !important;
            border-color: transparent !important;
        }
        html[data-theme="dark"] .split-capture-btn,
        html[data-theme="dark"] .add-task-group {
            background: var(--bg-subtle);
            border: 1px solid var(--border);
            box-shadow: none;
        }
        html[data-theme="dark"] .split-capture-btn:hover,
        html[data-theme="dark"] .add-task-group:hover {
            background: var(--bg-card);
            border-color: #404040;
            box-shadow: none;
        }
        html[data-theme="dark"] .btn-add-task,
        html[data-theme="dark"] .split-main-action {
            background: transparent;
            color: var(--text-primary);
            text-shadow: none;
            -webkit-text-stroke: 0;
            box-shadow: none;
        }
        html[data-theme="dark"] .btn-add-task:hover,
        html[data-theme="dark"] .split-main-action:hover {
            background: transparent;
            color: var(--text-primary);
        }
        html[data-theme="dark"] .btn-add-task.is-open {
            background: var(--accent);
            color: #fff;
        }
        html[data-theme="dark"] .btn-add-mic,
        html[data-theme="dark"] .split-mic-action {
            background: transparent;
            border-left: 1px solid var(--border);
            color: var(--text-secondary);
            box-shadow: none;
        }
        html[data-theme="dark"] .btn-add-mic:hover,
        html[data-theme="dark"] .split-mic-action:hover {
            background: var(--bg-card-hover);
            color: var(--accent);
        }
        html[data-theme="dark"] .task-card,
        html[data-theme="dark"] .task-card.is-expanded,
        html[data-theme="dark"] .task-card.is-collapsed,
        html[data-theme="dark"] .task-check-btn,
        html[data-theme="dark"] .column-panel,
        html[data-theme="dark"] .column-header,
        html[data-theme="dark"] .column-body,
        html[data-theme="dark"] .mobile-board-tabs,
        html[data-theme="dark"] .shift-capsule,
        html[data-theme="dark"] .workday-widget,
        html[data-theme="dark"] .backlog-search input,
        html[data-theme="dark"] .backlog-search input:focus,
        html[data-theme="dark"] .topbar-menu-dropdown,
        html[data-theme="dark"] .topbar-menu-btn,
        html[data-theme="dark"] .topbar-icon-btn,
        html[data-theme="dark"] .cal-widget-panel,
        html[data-theme="dark"] .toast,
        html[data-theme="dark"] .modal-dialog,
        html[data-theme="dark"] .capture-dialog,
        html[data-theme="dark"] .focus-modal,
        html[data-theme="dark"] .task-sheet,
        html[data-theme="dark"] .boot-card,
        html[data-theme="dark"] .auth-card,
        html[data-theme="dark"] .empty-slot-box,
        html[data-theme="dark"] .empty-slot-pill,
        html[data-theme="dark"] .slot-row .task-card,
        html[data-theme="dark"] .completed-bar,
        html[data-theme="dark"] .done-chip,
        html[data-theme="dark"] .meta-pill,
        html[data-theme="dark"] .attr-chip,
        html[data-theme="dark"] .drawer-chips .mini-chip,
        html[data-theme="dark"] .pop-menu,
        html[data-theme="dark"] .task-schedule-pop,
        html[data-theme="dark"] .session-end-card,
        html[data-theme="dark"] .voice-live-banner {
            background: var(--bg-panel);
            color: var(--text-primary);
            border-color: var(--border);
        }
        /* После общих стилей колонок — снова без рамки у доски */
        html[data-theme="dark"] #colToday.column-panel,
        html[data-theme="dark"] #colOther.column-panel {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        html[data-theme="dark"] .column-body > .backlog-toolbar {
            background: var(--bg-panel);
        }
        html[data-theme="dark"] .today-empty-hero {
            background: var(--bg-subtle);
            border-color: var(--border);
        }
        html[data-theme="dark"] .tab-btn,
        html[data-theme="dark"] .backlog-search-toggle,
        html[data-theme="dark"] .mini-chip,
        html[data-theme="dark"] .cal-stat-pill,
        html[data-theme="dark"] .slot-badge,
        html[data-theme="dark"] .counter-badge,
        html[data-theme="dark"] .slot-load-pill {
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border-color: var(--border);
        }
        html[data-theme="dark"] .backlog-search-toggle {
            border: none;
            box-shadow: none;
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .backlog-search-toggle:hover {
            background: var(--bg-card-hover);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .backlog-toolbar .backlog-search input {
            background: var(--bg-subtle);
            border: none;
            box-shadow: none;
            color: transparent;
        }
        html[data-theme="dark"] .backlog-toolbar .backlog-search:not(:focus-within):hover input {
            background: var(--bg-card-hover);
        }
        html[data-theme="dark"] .backlog-toolbar .backlog-search:not(:focus-within):hover .backlog-search-icon {
            color: var(--text-primary);
        }
        html[data-theme="dark"] .backlog-toolbar .backlog-search:focus-within input {
            background: var(--bg-subtle);
            border: none;
            box-shadow: none;
            color: var(--text-primary);
        }
        html[data-theme="dark"] .tab-btn:hover,
        html[data-theme="dark"] .mini-chip:hover,
        html[data-theme="dark"] .pop-item:hover {
            background: var(--bg-card-hover);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .tab-btn.active {
            background: #f5f5f5;
            color: #0a0a0a;
        }
        html[data-theme="dark"] .tab-btn.active:hover {
            background: #ffffff;
            color: #0a0a0a;
        }
        html[data-theme="dark"] .task-card.in-work-card {
            background: rgba(248, 113, 113, 0.08);
        }
        html[data-theme="dark"] .task-card.in-work-card.is-timer-paused {
            background: var(--bg-card);
        }
        html[data-theme="dark"] .task-card.in-work-card.is-timer-live {
            background: rgba(248, 113, 113, 0.1);
        }
        html[data-theme="dark"] .task-card.is-done {
            background: var(--bg-subtle);
        }
        html[data-theme="dark"] .row-action-btn {
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border-color: var(--border);
        }
        html[data-theme="dark"] .row-action-btn.is-primary,
        html[data-theme="dark"] .btn-primary {
            background: var(--accent);
            color: #fff;
            border-color: transparent;
        }
        html[data-theme="dark"] .mobile-dock-bar {
            background: #141414;
            border-color: #333;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        }
        html[data-theme="dark"] .mobile-add-fab-main {
            background: transparent;
            color: #f5f5f5;
            border: none;
            box-shadow: none;
        }
        html[data-theme="dark"] .mobile-add-fab-main .icon {
            color: var(--accent);
        }
        html[data-theme="dark"] .mobile-add-fab-main-label {
            color: #a3a3a3;
        }
        html[data-theme="dark"] .mobile-add-fab-main:hover,
        html[data-theme="dark"] .mobile-add-fab-main:active {
            background: #1a1a1a;
        }
        html[data-theme="dark"] .mobile-add-fab-opt.is-mic {
            color: #a3a3a3;
        }
        html[data-theme="dark"] .mobile-add-fab-opt.is-mic:hover,
        html[data-theme="dark"] .mobile-add-fab-opt.is-mic:active {
            background: rgba(59, 130, 246, 0.16);
            color: var(--accent);
        }
        html[data-theme="dark"] .mobile-board-tabs {
            background: transparent;
            border-color: transparent;
            border-bottom-color: #2a2a2a;
        }
        html[data-theme="dark"] .mobile-board-tabs button {
            background: transparent;
            color: #8a8a8a;
            border-color: transparent;
            box-shadow: none;
        }
        html[data-theme="dark"] .mobile-board-tabs button .tab-count {
            background: #1c1c1c;
            border-color: transparent;
            color: #9a9a9a;
        }
        html[data-theme="dark"] .mobile-board-tabs button.active {
            background: transparent;
            color: #f5f5f5;
            border-color: transparent;
            border-bottom-color: var(--accent);
            box-shadow: none;
        }
        html[data-theme="dark"] .mobile-board-tabs button.active .tab-count {
            background: var(--accent-soft);
            border-color: transparent;
            color: var(--accent);
            font-weight: 800;
        }
        /* Календарь / время — тёмная тема */
        html[data-theme="dark"] .date-picker-pop,
        html[data-theme="dark"] .task-schedule-pop,
        html[data-theme="dark"] #captureModal > .capture-cal-pop {
            background: #121212;
            border-color: #2a2a2a;
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .date-picker-actions,
        html[data-theme="dark"] .task-schedule-pop .date-picker-actions,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .date-picker-actions {
            border-top-color: #2a2a2a;
        }
        html[data-theme="dark"] .cal-day,
        html[data-theme="dark"] .task-schedule-pop .cal-day,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day,
        html[data-theme="dark"] .cal-widget-panel .cal-day {
            background: #1a1a1a;
            color: #e5e5e5;
            border-color: transparent;
        }
        html[data-theme="dark"] .cal-day:hover:not(:disabled),
        html[data-theme="dark"] .task-schedule-pop .cal-day:hover:not(:disabled),
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day:hover:not(:disabled) {
            background: #242424;
            border-color: rgba(59, 130, 246, 0.55);
            color: #93c5fd;
        }
        html[data-theme="dark"] .cal-day.is-today,
        html[data-theme="dark"] .task-schedule-pop .cal-day.is-today,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day.is-today {
            background: #1e1e1e;
            border-color: rgba(59, 130, 246, 0.65);
            color: #f5f5f5;
            box-shadow: none;
        }
        html[data-theme="dark"] .cal-day.is-today:hover:not(:disabled):not(.is-peek),
        html[data-theme="dark"] .task-schedule-pop .cal-day.is-today:hover:not(:disabled):not(.is-peek),
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day.is-today:hover:not(:disabled):not(.is-peek) {
            background: #242424;
            color: #93c5fd;
        }
        html[data-theme="dark"] .cal-day.is-peek,
        html[data-theme="dark"] .task-schedule-pop .cal-day.is-peek,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day.is-peek {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        html[data-theme="dark"] .cal-day.is-peek:hover:not(:disabled),
        html[data-theme="dark"] .task-schedule-pop .cal-day.is-peek:hover:not(:disabled),
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day.is-peek:hover:not(:disabled) {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
            color: #fff;
        }
        html[data-theme="dark"] .cal-day.is-friday:not(.is-peek),
        html[data-theme="dark"] .task-schedule-pop .cal-day.is-friday:not(.is-peek),
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-day.is-friday:not(.is-peek) {
            color: #93c5fd;
        }
        html[data-theme="dark"] .cal-weekdays span,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-weekdays span {
            color: #737373;
        }
        html[data-theme="dark"] .cal-month-title,
        html[data-theme="dark"] .task-schedule-pop .cal-month-title,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .cal-month-title {
            color: #f5f5f5;
        }
        html[data-theme="dark"] .time-picker-date-hint {
            color: #8a8a8a;
        }
        html[data-theme="dark"] .time-picker-hm-col label {
            color: #737373;
        }
        html[data-theme="dark"] .time-picker-step,
        html[data-theme="dark"] .task-schedule-pop .time-picker-step {
            background: #141414;
            border-color: #2a2a2a;
        }
        html[data-theme="dark"] .time-picker-step-btn {
            background: transparent;
            color: #a3a3a3;
        }
        html[data-theme="dark"] .time-picker-step-btn:hover {
            background: #242424 !important;
            color: #93c5fd !important;
        }
        html[data-theme="dark"] .time-picker-step-btn:active {
            background: rgba(59, 130, 246, 0.18) !important;
        }
        html[data-theme="dark"] .time-picker-step-val {
            color: #f5f5f5;
        }
        html[data-theme="dark"] .time-picker-hm-sep {
            color: #737373;
        }
        html[data-theme="dark"] .time-picker-quick {
            background: #1a1a1a;
            border-color: transparent;
            color: #e5e5e5;
        }
        html[data-theme="dark"] .time-picker-quick:hover {
            background: #242424 !important;
            border-color: #333 !important;
            color: #93c5fd !important;
        }
        html[data-theme="dark"] .time-picker-quick.active,
        html[data-theme="dark"] .time-picker-quick.is-active {
            background: rgba(59, 130, 246, 0.18) !important;
            border-color: transparent !important;
            color: #93c5fd !important;
            box-shadow: none;
        }
        html[data-theme="dark"] .task-schedule-pop .date-picker-actions .btn-ghost,
        html[data-theme="dark"] #captureModal > .capture-cal-pop .date-picker-actions .btn-ghost {
            color: #e5e5e5;
            background: transparent;
        }
        html[data-theme="dark"] #captureModal > .capture-cal-pop .date-picker-actions .btn-ghost:hover {
            background: #1a1a1a;
        }
        html[data-theme="dark"] .settings-hours-grid input,
        html[data-theme="dark"] #remindMinutesInput,
        html[data-theme="dark"] .title-input,
        html[data-theme="dark"] .desc-textarea,
        html[data-theme="dark"] .step-add-row input,
        html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        html[data-theme="dark"] textarea,
        html[data-theme="dark"] select {
            background: var(--bg-subtle) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }
        html[data-theme="dark"] .settings-sheet-footer button:not(.btn-primary),
        html[data-theme="dark"] .capture-close-btn,
        html[data-theme="dark"] .btn-icon-only {
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border-color: var(--border);
        }
        html[data-theme="dark"] .topbar .realm-opt.active[data-realm="work"],
        html[data-theme="dark"] .topbar .realm-opt.active[data-realm="life"],
        html[data-theme="dark"] .theme-pill-toggle .theme-opt.active,
        html[data-theme="dark"] .realm-opt.active[data-realm="work"],
        html[data-theme="dark"] .realm-opt.active[data-realm="life"] {
            background: #fff;
            color: var(--accent);
        }
        html[data-theme="dark"] .realm-opt.active[data-realm="life"] {
            color: #0f766e;
        }
        html[data-theme="dark"] .clock-box,
        html[data-theme="dark"] .brand-logo,
        html[data-theme="dark"] .column-title,
        html[data-theme="dark"] .list-col-title,
        html[data-theme="dark"] .task-row-title,
        html[data-theme="dark"] .section-label-row,
        html[data-theme="dark"] .backlog-group-head,
        html[data-theme="dark"] .focus-task-title,
        html[data-theme="dark"] .timer-readout,
        html[data-theme="dark"] .task-sheet-title,
        html[data-theme="dark"] .settings-sheet-head h3,
        html[data-theme="dark"] .capacity-pill,
        html[data-theme="dark"] .kbd-hint {
            color: var(--text-primary);
        }
        html[data-theme="dark"] .kbd-hint,
        html[data-theme="dark"] .capacity-pill {
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .progress-bar-bg {
            background: var(--bg-subtle);
        }
        html[data-theme="dark"] .attributes-bar,
        html[data-theme="dark"] .card-footer,
        html[data-theme="dark"] .task-drawer,
        html[data-theme="dark"] .task-card .task-details,
        html[data-theme="dark"] .task-sheet-footer,
        html[data-theme="dark"] .settings-sheet-footer {
            background: var(--bg-panel);
            border-color: var(--border);
        }
        html[data-theme="dark"] .attributes-bar,
        html[data-theme="dark"] .task-drawer,
        html[data-theme="dark"] .task-card .task-details {
            background: var(--bg-card);
        }
        html[data-theme="dark"] .focus-subtask-add > button,
        html[data-theme="dark"] .focus-close-btn,
        html[data-theme="dark"] .attr-chip,
        html[data-theme="dark"] .mini-chip,
        html[data-theme="dark"] .task-card.is-expanded .drawer-chips .mini-chip,
        html[data-theme="dark"] .task-card.is-expanded .drawer-steps .drawer-step-row,
        html[data-theme="dark"] .task-sheet-steps .drawer-step-row,
        html[data-theme="dark"] .drawer-step-row,
        html[data-theme="dark"] .capture-popover {
            background: var(--bg-subtle);
            color: var(--text-primary);
            border-color: var(--border);
        }
        html[data-theme="dark"] .focus-modal .subtask-row {
            background: transparent;
            color: var(--text-primary);
            border-color: #2a2a2a;
        }
        html[data-theme="dark"] .focus-preset-row {
            background: transparent;
        }
        html[data-theme="dark"] .focus-preset-btn {
            background: var(--bg-subtle);
            color: var(--text-primary);
            border: 0;
        }
        html[data-theme="dark"] .focus-preset-btn.is-active {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
        }
        html[data-theme="dark"] .focus-preset-more,
        html[data-theme="dark"] .focus-preset-more.is-active {
            background: transparent !important;
            box-shadow: none !important;
            color: var(--text-muted);
        }
        html[data-theme="dark"] .focus-preset-more.is-active {
            color: var(--accent);
        }
        html[data-theme="dark"] .focus-task-desc {
            background: var(--bg-subtle);
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .focus-meta-realm {
            color: var(--accent);
        }
        html[data-theme="dark"] .focus-meta-dot {
            background: var(--accent);
        }
        html[data-theme="dark"] .focus-done-btn {
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .focus-done-btn:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .focus-duration-menu {
            background: #161616;
            border-color: #2a2a2a;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
        }
        html[data-theme="dark"] .focus-duration-opt {
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .focus-duration-opt:hover,
        html[data-theme="dark"] .focus-duration-opt.is-active {
            background: #0a0a0a;
            color: var(--text-primary);
        }
        html[data-theme="dark"] .task-sheet-steps .drawer-step-row span,
        html[data-theme="dark"] .drawer-step-row span {
            color: var(--text-primary);
        }
        html[data-theme="dark"] .task-sheet-desc,
        html[data-theme="dark"] .drawer-desc,
        html[data-theme="dark"] .focus-subtasks-title {
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .focus-overlay {
            background: var(--bg-app);
        }
        html[data-theme="dark"] .focus-modal {
            background: var(--bg-app);
        }
        @media (min-width: 1025px) {
            html[data-theme="dark"] .focus-overlay,
            html[data-theme="dark"] .focus-modal {
                background: var(--bg-app);
                border: none;
                box-shadow: none;
            }
            html[data-theme="dark"] .focus-topbar {
                border-bottom: 0;
            }
            html[data-theme="dark"] .focus-stage {
                background: transparent;
                border: 0;
                border-left: 0;
            }
            html[data-theme="dark"] .focus-preset-row {
                background: transparent;
            }
            html[data-theme="dark"] .focus-preset-btn.is-active {
                background: var(--accent);
                color: #fff;
            }
            html[data-theme="dark"] .focus-stage .focus-help {
                border-top-color: transparent;
            }
        }
        html[data-theme="dark"] .focus-timer-panel,
        html[data-theme="dark"] .focus-modal .subtasks-box {
            background: transparent;
            border-color: #2a2a2a;
            box-shadow: none;
        }
        html[data-theme="dark"] .focus-back-btn,
        html[data-theme="dark"] .focus-live-pill {
            background: transparent;
            border: 0;
            color: var(--text-secondary);
        }
        html[data-theme="dark"] .focus-back-btn:hover {
            background: transparent;
            color: var(--text-primary);
        }
        html[data-theme="dark"] .focus-live-pill.is-live {
            color: #f87171;
            background: transparent;
            border: 0;
        }
        html[data-theme="dark"] .focus-live-pill.is-live .dot { background: #f87171; }
        html[data-theme="dark"] .focus-live-pill.is-paused {
            color: #fbbf24;
            background: transparent;
            border: 0;
        }
        html[data-theme="dark"] .focus-live-pill.is-paused .dot { background: #fbbf24; }
        /* focus-done-btn dark: see Canva deep-focus rules above */
        html[data-theme="dark"] .focus-task-meta .badge,
        html[data-theme="dark"] .focus-meta-item {
            background: transparent;
            border: 0;
            color: var(--text-muted);
        }
        html[data-theme="dark"] .focus-help-title,
        html[data-theme="dark"] .focus-help-toggle {
            color: var(--accent);
        }
        html[data-theme="dark"] .focus-ai-chip {
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border-color: var(--border);
        }
        html[data-theme="dark"] .focus-ai-chip:hover {
            color: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
            background: var(--accent-soft);
        }
        html[data-theme="dark"] .focus-ai-hint {
            border-top-color: #2a2a2a;
        }
        html[data-theme="dark"] .subtask-del-btn {
            color: var(--text-muted);
        }
        html[data-theme="dark"] .subtask-del-btn:hover {
            background: var(--danger-soft);
            color: var(--danger);
        }
        html[data-theme="dark"] .task-sheet-chips .task-sheet-delete-chip {
            background: var(--danger-soft);
            border-color: rgba(248, 113, 113, 0.35);
            color: #f87171;
        }
        html[data-theme="dark"] .task-sheet-chips .task-sheet-delete-chip:hover {
            background: rgba(248, 113, 113, 0.22);
        }
        .theme-pill-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-subtle);
            width: 100%;
            max-width: 280px;
        }
        .theme-pill-toggle .theme-opt {
            flex: 1;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: var(--fs-sm);
            font-weight: 700;
            min-height: 36px;
            border-radius: 999px;
            cursor: pointer;
        }
        .theme-pill-toggle .theme-opt.active {
            background: var(--bg-panel);
            color: var(--text-primary);
            box-shadow: var(--shadow-sm);
        }

        /* Зона системных кнопок телефона — всегда тёмная (белые кнопки читаются) */
        .nav-safe-fill {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: env(safe-area-inset-bottom, 0px);
            min-height: 0;
            background: #0a0a0a;
            z-index: 100000;
            pointer-events: none;
        }
        @media (max-width: 1024px) {
            html, body {
                background-color: #0a0a0a;
            }
            body {
                background-image: linear-gradient(var(--bg-app), var(--bg-app));
                background-repeat: no-repeat;
                background-size: 100% calc(100% - env(safe-area-inset-bottom, 0px));
                background-attachment: fixed;
            }
            .nav-safe-fill {
                display: block;
                /* запас, если inset=0, но жесты/кнопки всё равно есть */
                min-height: max(env(safe-area-inset-bottom, 0px), 12px);
            }
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            height: 100dvh;
            height: var(--app-height, 100dvh);
            overflow: hidden;
            background-color: #0a0a0a;
        }

        body {
            font-family: var(--td-font-sans) ;
            background-color: var(--bg-app);
            color: var(--text-primary);
            line-height: 1.45;
            height: 100%;
            height: 100dvh;
            height: var(--app-height, 100dvh);
            min-height: 100%;
            min-height: var(--app-height, 100dvh);
            max-height: 100%;
            max-height: var(--app-height, 100dvh);
            display: flex;
            flex-direction: column;
            font-size: var(--fs-base);
            -webkit-font-smoothing: antialiased;
            overflow: hidden;
        }

        /* Иконки SVG */
        .icon {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            flex-shrink: 0;
        }
        .icon-sm { width: 14px; height: 14px; }
        .icon-lg { width: 20px; height: 20px; }


/* ===== redesign: old variables -> Figma tokens (static/css/tokens.css) ===== */
:root {
  --bg-app: var(--td-color-bg-workspace);
  --bg-card: var(--td-color-bg-surface);
  --bg-card-hover: var(--td-color-bg-subtle);
  --bg-subtle: var(--td-color-bg-subtle);
  --text-primary: var(--td-color-text-primary);
  --text-secondary: var(--td-color-text-heading);
  --text-muted: var(--td-color-text-secondary);
  --text-soft: var(--td-color-text-secondary);
  --border: var(--td-color-border-default);
  --border-subtle: var(--td-color-border-default);
  --accent: var(--td-color-accent);
  --accent-soft: var(--td-color-accent-subtle);
  --life: var(--td-color-success);
  --life-soft: var(--td-color-success-subtle);
  --success: var(--td-color-success);
  --success-soft: var(--td-color-success-subtle);
  --purple: var(--td-color-daily);
  --purple-soft: var(--td-color-daily-subtle);
  --warning: var(--td-color-warning);
  --warning-soft: var(--td-color-warning-subtle);
  --danger: var(--td-color-danger);
  --danger-soft: var(--td-color-danger-subtle);
  --radius-sm: var(--td-radius-chip);
  --radius-md: var(--td-radius-tile);
  --fs-xs: var(--td-fs-caption);
  --fs-base: var(--td-fs-body);
  --fs-md: var(--td-fs-body-lg);
  --fs-2xl: var(--td-fs-title);
  /* no Figma equivalent (kept as is): --bg-panel --accent-hover --radius-lg
     --fs-sm --fs-ml --fs-lg --fs-xl --shadow-sm --shadow-lg --sidebar-w --aside-w --mobile-* */
}