/* HSG — Habits, Systems, Goals — Stylesheet */
/* Extracted from monolithic build for GitHub Pages static hosting */

:root {
            --bg: #ffffff;
            --bg-elevated: #f4f9fd;
            --bg-card: #ffffff;
            --bg-hover: #eaf3fb;
            --border: #d7e6f2;
            --border-light: #c3daec;
            --text-primary: #16232e;
            --text-secondary: #57697a;
            --text-muted: #93a5b3;
            --accent: #2e86d6;
            --accent-light: #1a6fb0;
            --accent-dark: #1e5f94;
            --success: #2fa84f;
            --warning: #1e5f94;
            --danger: #e0433d;
            --info: #2e86d6;
            --purple: #5fa8e0;
            --pink: #e0433d;
            --teal: #2fa84f;
            --orange: #1e5f94;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* Theme colors and fonts beyond Classic (default, above) are applied dynamically as inline
           custom properties on :root by the theme system in js/app.js — see THEMES. This keeps 20
           themes maintainable in one place instead of 20 near-duplicate CSS blocks. */

        html {
            font-size: 16px; /* base for all rem font sizes — scaled by JS for the text-size setting */
        }

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

        body {
            font-family: var(--font-body);
            background: var(--bg);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .page-title, .logo-text, .section-title, .modal-title, .goal-title,
        .habit-name, .vision-title, .login-title, .card-title, h1, h2, h3 {
            font-family: var(--font-heading);
        }

        /* Login / lock screen */
        .login-screen {
            position: fixed;
            inset: 0;
            z-index: 500;
            background: linear-gradient(135deg, rgba(46,134,214,0.06), rgba(47,168,79,0.06)), var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .login-card {
            width: 100%;
            max-width: 400px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            box-shadow: 0 12px 40px rgba(16,35,46,0.10);
        }
        .login-title {
            font-size: 1.1875rem;
            font-weight: 700;
            text-align: center;
            margin: 10px 0 6px;
        }
        .login-sub {
            font-size: 0.7812rem;
            color: var(--text-secondary);
            text-align: center;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        .login-error {
            font-size: 0.7812rem;
            color: var(--danger);
            margin-bottom: 10px;
            min-height: 16px;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-light);
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 260px;
            height: 100vh;
            background: var(--bg-elevated);
            border-right: 1px solid var(--border);
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .sidebar-header {
            padding: 24px 20px;
            border-bottom: 1px solid var(--border);
        }

        .site-mode-switch {
            display: flex;
            gap: 4px;
            margin-top: 14px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 3px;
        }
        .site-mode-btn {
            flex: 1;
            border: none;
            background: none;
            font-family: inherit;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 6px 4px;
            border-radius: 7px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .site-mode-btn:hover { color: var(--text-primary); }
        .site-mode-btn.active { background: var(--accent); color: #fff; }
        .site-mode-desc {
            font-size: 0.6875rem;
            color: var(--text-muted);
            margin-top: 8px;
            line-height: 1.4;
        }

        /* ===== Global site-mode tiered visibility (2 modes: Basic / Advanced) =====
           .tier-basic and .tier-advanced both mean "extra, non-essential content":
           hidden in Basic mode (the bare-minimum experience), visible only in
           Advanced. Anything without these classes is core content, always visible
           in both modes. (Two class names are kept for backward compatibility with
           where they're applied in the markup — they now behave identically.)
           !important is required here: many of these elements also carry a page's
           own "active" tab/panel class (e.g. .planning-panel.active, .budget-panel.active),
           which has higher CSS specificity than a single .tier-advanced class and would
           otherwise silently override this hiding if that tab ever became the active one
           while in Basic mode — defeating the whole point of the restriction. */
        .tier-basic, .tier-advanced { display: none !important; }
        body.site-mode-advanced .tier-basic,
        body.site-mode-advanced .tier-advanced { display: block !important; }

        /* FIX: when tier-advanced is applied to an individual panel within a tabbed
           system (Budget, Planning, Fitness, Spirit), the blanket "show in advanced
           mode" rule above was overriding the tab system's own active/inactive state,
           making every advanced-tier panel in that tab bar visible simultaneously
           instead of just the selected one. These higher-specificity rules restore
           "only the active panel shows" as the deciding rule, even in advanced mode. */
        body.site-mode-advanced .budget-panel.tier-advanced:not(.active),
        body.site-mode-advanced .planning-panel.tier-advanced:not(.active),
        body.site-mode-advanced .fitness-tab-panel.tier-advanced:not(.active),
        body.site-mode-advanced .spirit-tab-panel.tier-advanced:not(.active) {
            display: none !important;
        }

        /* Basic mode also halves large *static* content grids (roughly every other
           card hidden) rather than hiding them outright, since these are teaching
           content, not tools — Proverbs/Scripture cards and author/book literature
           cards on the Identity and Systems pages. */
        body.site-mode-basic #identity-proverbs-grid > :nth-child(even),
        body.site-mode-basic #identity-verses-grid > :nth-child(even),
        body.site-mode-basic #identity-lit-authors > :nth-child(even),
        body.site-mode-basic #identity-lit-books > :nth-child(even),
        body.site-mode-basic #systems-lit-authors > :nth-child(even),
        body.site-mode-basic #systems-lit-books > :nth-child(even) { display: none; }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--accent), var(--purple));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.125rem;
            overflow: hidden;
            flex-shrink: 0;
        }
        .logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .logo-text {
            font-size: 1.125rem;
            font-weight: 800;
            letter-spacing: -0.3px;
            line-height: 1.15;
        }

        .logo-caption {
            font-size: 0.6875rem;
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-top: 1px;
        }

        .nav-section {
            padding: 16px 12px;
            flex: 1;
            overflow-y: auto;
        }

        .nav-label {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            padding: 8px 16px;
            margin-bottom: 4px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            margin: 2px 0;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            position: relative;
        }

        .nav-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .nav-item.active {
            background: rgba(46, 134, 214, 0.12);
            color: var(--accent-dark);
        }

        .nav-item .nav-icon {
            width: 20px;
            text-align: center;
            font-size: 1rem;
        }

        .nav-badge {
            margin-left: auto;
            background: var(--accent);
            color: white;
            font-size: 0.6875rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
        }

        .nav-download-btn {
            width: 100%;
            background: none;
            border: none;
            border-top: 1px dashed var(--border);
            font-family: inherit;
            text-align: left;
            margin-top: 10px;
            padding-top: 12px;
        }
        .nav-download-btn:hover {
            background: var(--bg-hover);
            color: var(--accent-dark);
        }
        .nav-download-btn .nav-icon { color: var(--accent); }

        .sidebar-footer {
            padding: 16px;
            border-top: 1px solid var(--border);
        }

        .storage-bar {
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .storage-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--purple));
            border-radius: 2px;
            transition: width 0.5s ease;
        }

        .storage-text {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Main Content */
        .main {
            margin-left: 260px;
            min-height: 100vh;
            padding: 24px 32px;
        }

        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
        }

        .page-title {
            font-size: 1.75rem;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .page-subtitle {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: white;
            box-shadow: 0 4px 14px rgba(46, 134, 214, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(46, 134, 214, 0.4);
        }

        .btn-ghost {
            background: var(--bg-card);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .btn-ghost:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            padding: 0;
            justify-content: center;
            border-radius: 10px;
        }

        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            border-color: var(--border-light);
            transform: translateY(-2px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: 16px 16px 0 0;
        }

        .stat-card:nth-child(1)::before { background: linear-gradient(90deg, var(--accent), var(--purple)); }
        .stat-card:nth-child(2)::before { background: linear-gradient(90deg, var(--success), var(--teal)); }
        .stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--warning), var(--orange)); }
        .stat-card:nth-child(4)::before { background: linear-gradient(90deg, var(--pink), var(--danger)); }

        .stat-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 500;
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .stat-change {
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 4px;
        }

        .stat-change.positive { color: var(--success); }
        .stat-change.negative { color: var(--danger); }

        /* Section */
        .section {
            margin-bottom: 32px;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 1.125rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-actions {
            display: flex;
            gap: 8px;
        }

        .filter-pill {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .filter-pill:hover, .filter-pill.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        /* Goal Cards */
        .goals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 16px;
        }

        .goals-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            align-items: start;
        }
        @media (max-width: 900px) { .goals-board { grid-template-columns: 1fr; } }
        .board-column {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 14px;
            min-height: 120px;
        }
        .board-column-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            font-weight: 700;
            font-size: 0.8125rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--text-secondary);
        }
        .board-column-count {
            background: var(--bg-card);
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 0.6875rem;
        }
        .board-column .goal-card { margin-bottom: 12px; }
        .board-column .goal-card:last-child { margin-bottom: 0; }

        .goal-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .goal-card:hover {
            border-color: var(--border-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(16,35,46,0.10);
        }

        .goal-card.completed {
            opacity: 0.7;
        }

        .goal-card.completed .goal-title {
            text-decoration: line-through;
            color: var(--text-muted);
        }

        .goal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .goal-category {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .cat-career { background: rgba(46, 134, 214, 0.15); color: var(--accent-light); }
        .cat-health { background: rgba(47, 168, 79, 0.15); color: var(--success); }
        .cat-finance { background: rgba(30, 95, 148, 0.15); color: var(--warning); }
        .cat-learning { background: rgba(95, 168, 224, 0.15); color: var(--accent-dark); }
        .cat-personal { background: rgba(224, 67, 61, 0.15); color: var(--pink); }
        .cat-relationship { background: rgba(89, 199, 115, 0.15); color: var(--info); }

        .goal-menu {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            font-size: 1rem;
        }

        .goal-menu:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .goal-header-actions {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .goal-edit-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 6px;
            font-size: 0.875rem;
        }

        .goal-edit-btn:hover {
            background: var(--bg-hover);
            color: var(--accent);
        }

        .goal-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .goal-desc {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .goal-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .priority-badge {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.6875rem;
            font-weight: 600;
        }

        .priority-high { background: rgba(224, 67, 61, 0.15); color: var(--danger); }
        .priority-medium { background: rgba(30, 95, 148, 0.15); color: var(--warning); }
        .priority-low { background: rgba(47, 168, 79, 0.15); color: var(--success); }

        /* Progress */
        .progress-section {
            margin-bottom: 12px;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .progress-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .progress-value {
            font-size: 0.75rem;
            font-weight: 700;
        }

        .progress-bar {
            height: 6px;
            background: var(--bg);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.5s ease;
            position: relative;
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .goal-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .milestones-count {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .milestones-count span {
            color: var(--text-secondary);
            font-weight: 600;
        }

        .check-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 2px solid var(--border-light);
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: all 0.2s ease;
            font-size: 0.875rem;
        }

        .check-btn:hover {
            border-color: var(--success);
            color: var(--success);
        }

        .check-btn.checked {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        /* Milestones List */
        .milestones-list {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .milestone-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 0.8125rem;
        }

        .milestone-check {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid var(--border-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
            font-size: 0.625rem;
        }

        .milestone-check:hover {
            border-color: var(--accent);
        }

        .milestone-check.done {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .milestone-text {
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .milestone-text.done {
            text-decoration: line-through;
            color: var(--text-muted);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalIn 0.3s ease;
        }

        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .modal-header {
            padding: 24px 24px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 800;
        }

        .modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .modal-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .modal-body {
            padding: 20px 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.875rem;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .form-input:focus, .form-textarea:focus, .form-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(46, 134, 214, 0.15);
        }

        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .category-options {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .cat-option {
            padding: 8px 14px;
            border-radius: 8px;
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .cat-option:hover, .cat-option.selected {
            border-color: var(--accent);
            color: var(--accent-light);
            background: rgba(46, 134, 214, 0.08);
        }

        .priority-options {
            display: flex;
            gap: 8px;
        }

        .priority-option {
            flex: 1;
            padding: 10px;
            border-radius: 10px;
            border: 2px solid var(--border);
            background: transparent;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .priority-option:hover, .priority-option.selected {
            border-color: var(--accent);
        }

        .priority-option .p-label {
            font-size: 0.75rem;
            font-weight: 600;
            display: block;
            margin-bottom: 4px;
        }

        .priority-option .p-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .milestones-input-area {
            margin-top: 12px;
        }

        .milestone-input-row {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .milestone-input-row input {
            flex: 1;
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.8125rem;
            font-family: inherit;
        }

        .milestone-input-row input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .milestone-remove {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 1rem;
        }

        .milestone-remove:hover {
            color: var(--danger);
            background: rgba(224, 67, 61, 0.1);
        }

        .add-milestone-btn {
            background: none;
            border: 1px dashed var(--border-light);
            color: var(--text-muted);
            padding: 10px;
            border-radius: 8px;
            width: 100%;
            cursor: pointer;
            font-size: 0.8125rem;
            font-weight: 500;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .add-milestone-btn:hover {
            border-color: var(--accent);
            color: var(--accent-light);
        }

        .modal-footer {
            padding: 16px 24px 24px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        .empty-icon {
            font-size: 3rem;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .empty-desc {
            font-size: 0.875rem;
            margin-bottom: 20px;
        }

        /* Toast */
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 8px 32px rgba(16,35,46,0.14);
            animation: toastIn 0.3s ease;
            min-width: 280px;
        }

        @keyframes toastIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .toast-icon {
            font-size: 1.25rem;
        }

        .toast-text {
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Dropdown Menu */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 6px;
            min-width: 160px;
            box-shadow: 0 8px 32px rgba(16,35,46,0.14);
            z-index: 50;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
            animation: dropdownIn 0.15s ease;
        }

        @keyframes dropdownIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        .dropdown-item {
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.8125rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.15s ease;
            color: var(--text-secondary);
        }

        .dropdown-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .dropdown-item.danger {
            color: var(--danger);
        }

        .dropdown-item.danger:hover {
            background: rgba(224, 67, 61, 0.1);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .main {
                margin-left: 0;
                padding: 16px;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .goals-grid {
                grid-template-columns: 1fr;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
        }

        /* Mobile menu toggle */
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
        }

        @media (max-width: 768px) {
            .mobile-toggle {
                display: block;
            }
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Confetti */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            pointer-events: none;
            z-index: 3000;
        }

        /* Page sections */
        .page-section {
            display: none;
        }

        .page-section.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        /* Vision Board */
        .vision-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        .vision-grid.layout-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
        .vision-grid.layout-spacious { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; }

        /* Vision board toolbar */
        .vision-toolbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }
        .vision-toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

        /* Board background themes */
        .vision-grid.theme-warm { background: linear-gradient(135deg, rgba(230,168,44,0.08), rgba(224,67,61,0.05)); border-radius: 20px; padding: 20px; }
        .vision-grid.theme-cool { background: linear-gradient(135deg, rgba(46,134,214,0.08), rgba(95,168,224,0.05)); border-radius: 20px; padding: 20px; }
        .vision-grid.theme-dreamy { background: linear-gradient(135deg, rgba(178,124,214,0.10), rgba(230,168,214,0.06)); border-radius: 20px; padding: 20px; }
        .vision-grid.theme-mono { background: var(--bg-elevated); border-radius: 20px; padding: 20px; }

        /* Affirmation + milestones on card */
        .vision-affirmation {
            font-style: italic;
            font-size: 0.75rem;
            color: var(--accent-dark);
            background: rgba(46,134,214,0.08);
            border-radius: 8px;
            padding: 8px 10px;
            margin-top: 8px;
        }
        .vision-milestones { margin-top: 10px; }
        .vision-milestone-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; padding: 3px 0; }
        .vision-milestone-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; }
        .vision-milestone-row.done span { text-decoration: line-through; color: var(--text-muted); }
        .vision-milestone-add { display: flex; gap: 6px; margin-top: 8px; }
        .vision-milestone-add input { flex: 1; font-size: 0.75rem; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); }

        /* Present mode */
        .vision-present-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(10,16,20,0.94);
            z-index: 999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 24px;
        }
        .vision-present-overlay.active { display: flex; }
        .vision-present-close {
            position: absolute;
            top: 20px;
            right: 24px;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .vision-present-card {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 40px;
            max-width: 560px;
            width: 90%;
            text-align: center;
        }
        .vision-present-card .vp-image { font-size: 5rem; margin-bottom: 16px; }
        .vision-present-card .vp-image img { max-width: 100%; max-height: 320px; border-radius: 14px; }
        .vision-present-card .vp-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
        .vision-present-card .vp-why { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
        .vision-present-card .vp-affirmation { font-style: italic; color: var(--accent-dark); font-size: 0.9375rem; }
        .vision-present-controls { display: flex; align-items: center; gap: 18px; }

        .vision-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .vision-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(16,35,46,0.10);
        }

        .vision-image {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, var(--accent), var(--purple));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            position: relative;
            overflow: hidden;
        }

        .vision-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .vision-card-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 6px;
            z-index: 2;
        }

        .vision-icon-btn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: none;
            background: rgba(22, 35, 46, 0.55);
            color: #fff;
            cursor: pointer;
            font-size: 0.8125rem;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
        }
        .vision-icon-btn:hover { background: rgba(22, 35, 46, 0.8); }
        .vision-icon-btn.danger:hover { background: var(--danger); }

        .vision-content {
            padding: 16px;
        }

        .vision-title {
            font-size: 0.9375rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .vision-desc {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .vision-why {
            font-size: 0.7812rem;
            color: var(--text-secondary);
            font-style: italic;
            border-left: 2px solid var(--accent-light);
            padding-left: 10px;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .vision-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        .vision-tag {
            font-size: 0.6562rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 3px 9px;
            border-radius: 20px;
            background: var(--bg-elevated);
            color: var(--text-secondary);
        }
        .vision-tag.date { color: var(--accent-dark); }
        .vision-tag.date.overdue { color: var(--danger); }

        /* Calendar View */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }

        .calendar-day-header {
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            padding: 8px;
            text-transform: uppercase;
        }

        .calendar-day {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            min-height: 96px;
            display: flex;
            flex-direction: column;
        }

        .calendar-day:hover {
            border-color: var(--accent);
        }

        .calendar-day-notes-preview {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-top: 4px;
            overflow: hidden;
        }
        .calendar-day-note-line {
            font-size: 0.625rem;
            color: var(--text-secondary);
            background: var(--bg-elevated);
            border-radius: 4px;
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
        }

        .calendar-day-number {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .calendar-day-today {
            background: rgba(46, 134, 214, 0.1);
            border-color: var(--accent);
        }

        .calendar-day-today .calendar-day-number {
            color: var(--accent-light);
        }

        .calendar-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 2px;
        }

        .calendar-note-icon {
            position: absolute;
            top: 6px;
            right: 6px;
            font-size: 0.6875rem;
        }

        .calendar-view-switch {
            display: flex;
            gap: 6px;
        }

        /* Week view */
        .calendar-week-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }
        .calendar-week-day {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            min-height: 160px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: border-color 0.15s ease;
        }
        .calendar-week-day:hover { border-color: var(--accent); }
        .calendar-week-day.today { background: rgba(46,134,214,0.1); border-color: var(--accent); }
        .calendar-week-day-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
        .calendar-week-day-number { font-size: 1.125rem; font-weight: 700; }
        .calendar-week-item { font-size: 0.6875rem; padding: 3px 6px; border-radius: 6px; background: var(--bg-elevated); color: var(--text-secondary); line-height: 1.3; }
        .calendar-week-note { font-size: 0.6875rem; padding: 3px 6px; border-radius: 6px; background: rgba(46,134,214,0.1); color: var(--accent-dark); line-height: 1.3; }

        /* Year view */
        .calendar-year-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }

        /* Agenda view */
        .calendar-agenda-view { display: flex; flex-direction: column; gap: 8px; }
        .agenda-row {
            display: grid;
            grid-template-columns: 130px 24px 1fr auto;
            align-items: center;
            gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 0.8125rem;
        }
        .agenda-date { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
        .agenda-icon { font-size: 1rem; text-align: center; }
        .agenda-label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .agenda-label.done { text-decoration: line-through; color: var(--text-muted); }
        .agenda-type { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
        @media (max-width: 600px) {
            .agenda-row { grid-template-columns: 90px 20px 1fr; }
            .agenda-type { display: none; }
        }
        .calendar-year-month {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px;
        }
        .calendar-year-month-title {
            font-size: 0.8125rem;
            font-weight: 700;
            margin-bottom: 8px;
            text-align: center;
        }
        .calendar-year-mini-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }
        .calendar-year-mini-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.5625rem;
            border-radius: 4px;
            color: var(--text-muted);
            cursor: pointer;
            position: relative;
        }
        .calendar-year-mini-day:hover { background: var(--bg-hover); }
        .calendar-year-mini-day.has-activity { background: rgba(46,134,214,0.15); color: var(--accent-dark); font-weight: 700; }
        .calendar-year-mini-day.is-today { outline: 1.5px solid var(--accent); color: var(--accent-dark); font-weight: 700; }

        /* Analytics */
        .chart-container svg, .edu-fig svg, .fitness-tool-card svg {
            max-width: 100%;
            height: auto;
        }
        /* ===== Website Topology (User Support) diagrams — flexbox/grid based, fully fluid ===== */
        .topo-sitemap { display: flex; flex-direction: column; gap: 10px; }
        .topo-page-row {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            border-radius: 10px;
            padding: 12px 16px;
        }
        .topo-page-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.875rem; cursor: pointer; }
        .topo-page-head .topo-caret { font-size: 0.7em; color: var(--text-muted); transition: transform 0.15s; }
        .topo-page-head.open .topo-caret { transform: rotate(90deg); }
        .topo-page-tabcount { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); background: var(--bg-hover); padding: 2px 10px; border-radius: 999px; }
        .topo-tab-chips { display: none; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
        .topo-tab-chips.open { display: flex; }
        .topo-tab-chip {
            font-size: 0.7rem;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            white-space: nowrap;
        }
        .topo-tab-chip.advanced { border-color: var(--accent); color: var(--accent); }

        .topo-anatomy-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
        .topo-anatomy-row { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
        .topo-anatomy-block {
            flex: 1 1 160px;
            background: var(--bg-elevated);
            border: 1.5px solid var(--accent);
            border-radius: 10px;
            padding: 14px;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 700;
            min-width: 0;
        }
        .topo-anatomy-block .topo-sub { display: block; font-weight: 400; color: var(--text-muted); margin-top: 4px; font-size: 0.7rem; }
        .topo-anatomy-block.wide { flex-basis: 100%; }
        .topo-anatomy-arrow { text-align: center; color: var(--text-muted); font-size: 1.1rem; }

        .topo-flow-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
        .topo-flow-pill {
            background: var(--accent);
            color: #fff;
            border-radius: 999px;
            padding: 8px 16px;
            font-size: 0.75rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .topo-flow-pill.alt { background: var(--bg-elevated); color: var(--text-primary); border: 1.5px solid var(--accent); }
        .topo-flow-arrow { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }

        .topo-mode-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
        .topo-mode-table th, .topo-mode-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
        .topo-mode-table th { font-weight: 700; background: var(--bg-elevated); }
        .topo-mode-yes { color: var(--success, #2fa84f); font-weight: 700; }
        .topo-mode-no { color: var(--text-muted); }
        .tm-edu-tab-panel { display: none; }
        .tm-edu-tab-panel.active { display: block; }
        .pmconcept-category-panel { display: none; }
        .pmconcept-category-panel.active { display: block; }
        .cq-subtab-panel { display: none; }
        .cq-subtab-panel.active { display: block; }
        .gantt-wrap { overflow-x: auto; }
        .gantt-header-row { display: flex; margin-bottom: 4px; padding-left: 220px; min-width: 600px; }
        .gantt-week-mark { flex: 1; font-size: 0.65rem; color: var(--text-muted); border-left: 1px solid var(--border); padding-left: 4px; }
        .gantt-row { border-bottom: 1px solid var(--border); padding: 10px 0; }
        .gantt-row-main { display: flex; align-items: center; min-width: 600px; }
        .gantt-row-label { width: 220px; flex-shrink: 0; padding-right: 10px; }
        .gantt-row-label input { width: 100%; font-size: 0.75rem; padding: 4px 6px; border: 1px solid transparent; background: transparent; border-radius: 6px; color: var(--text-primary); font-weight: 600; }
        .gantt-row-label input:hover, .gantt-row-label input:focus { border-color: var(--border); background: var(--bg-elevated); }
        .gantt-track { position: relative; flex: 1; height: 26px; background: var(--bg-hover); border-radius: 6px; }
        .gantt-bar { position: absolute; top: 2px; height: 22px; border-radius: 5px; background: var(--accent); overflow: hidden; cursor: pointer; }
        .gantt-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,0.35); }
        .gantt-bar-label { position: absolute; left: 6px; top: 3px; font-size: 0.65rem; font-weight: 700; color: #fff; white-space: nowrap; }
        .gantt-milestone { position: absolute; top: -2px; width: 18px; height: 18px; transform: rotate(45deg); cursor: pointer; }
        .gantt-edit-fields { display: flex; gap: 6px; margin-left: 8px; flex-shrink: 0; }
        .gantt-edit-fields input { width: 52px; font-size: 0.7rem; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); text-align: center; }
        .gantt-add-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
        .gantt-detail-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 220px; margin-top: 6px; min-width: 600px; }
        .gantt-detail-row select, .gantt-detail-row input[type="text"] { font-size: 0.7rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
        .gantt-status-badge { font-size: 0.65rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; }
        .gantt-status-notstarted { background: rgba(147,165,179,0.18); color: #93a5b3; }
        .gantt-status-inprogress { background: rgba(46,134,214,0.18); color: #2e86d6; }
        .gantt-status-done { background: rgba(47,168,79,0.18); color: #2fa84f; }
        .gantt-status-blocked { background: rgba(224,67,61,0.18); color: #e0433d; }
        .gantt-priority-badge { font-size: 0.65rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
        .gantt-priority-low { background: rgba(47,168,79,0.15); color: #2fa84f; }
        .gantt-priority-medium { background: rgba(245,158,11,0.18); color: #f59e0b; }
        .gantt-priority-high { background: rgba(224,67,61,0.18); color: #e0433d; }
        .gantt-notes-toggle { font-size: 0.7rem; color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; }
        .gantt-notes-box { width: 100%; margin-top: 6px; padding-left: 220px; min-width: 600px; }
        .gantt-notes-box textarea { width: calc(100% - 40px); font-size: 0.75rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); resize: vertical; min-height: 40px; }
        .chart-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 20px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow-x: auto;
        }

        .chart-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .bar-chart {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            height: 200px;
            padding-bottom: 30px;
            border-bottom: 1px solid var(--border);
            position: relative;
            width: 100%;
            min-width: 0;
        }

        .bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .bar {
            width: 100%;
            max-width: 40px;
            background: linear-gradient(to top, var(--accent), var(--purple));
            border-radius: 6px 6px 0 0;
            transition: height 0.5s ease;
            position: relative;
        }

        .bar-label {
            font-size: 0.6875rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .bar-value {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        /* Habit Tracker */
        .habit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 16px;
        }

        .habit-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
        }
        .habit-card.is-paused { opacity: 0.6; }
        .habit-paused-badge {
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 2px 8px;
            border-radius: 10px;
            background: var(--bg-elevated);
            color: var(--text-muted);
            margin-left: 6px;
        }

        /* Habit templates */
        .habit-template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .habit-template-card {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px 14px;
            cursor: pointer;
            font-size: 0.8125rem;
            font-weight: 600;
        }
        .habit-template-card:hover { border-color: var(--accent); background: var(--bg-hover); color: var(--accent-dark); }
        .habit-template-card .htc-icon { font-size: 1.25rem; flex-shrink: 0; }

        /* Habit template category grouping (Systems > Habit Template Library) */
        .habit-template-category-group { margin-bottom: 22px; }
        .habit-template-category-group:last-child { margin-bottom: 0; }
        .habit-template-category-heading {
            font-family: var(--font-heading);
            font-size: 0.8125rem;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 10px;
        }
        .habit-template-category-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            text-align: left;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            cursor: pointer;
            margin-bottom: 0;
        }
        .habit-template-category-toggle:hover { background: var(--bg-hover); }
        .htc-toggle-caret { font-size: 0.7em; color: var(--text-muted); }
        .habit-template-category-group .habit-template-grid { margin-top: 10px; }

        /* ===== Habit Stacker ===== */
        .stacker-builder {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
            margin-bottom: 18px;
        }
        .stacker-anchor-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 480px; }
        .stacker-chain-builder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
        .stacker-link-row { display: flex; align-items: center; gap: 10px; max-width: 560px; }
        .stacker-link-num {
            flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
            background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
        }
        .stacker-link-row .form-input { flex: 1; }
        .stacker-link-remove {
            flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
            background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1;
        }
        .stacker-link-remove:hover { color: var(--danger); border-color: var(--danger); }
        .stacker-builder-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

        .stacker-stacks-list { display: flex; flex-direction: column; gap: 14px; }
        .stacker-stack-card {
            background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
        }
        .stacker-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
        .stacker-chip {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px;
            padding: 6px 8px 6px 14px; font-size: 0.75rem; font-weight: 600; color: var(--text-primary);
        }
        .stacker-chip-anchor { background: var(--accent); color: #fff; border-color: var(--accent); padding-right: 14px; }
        .stacker-chip-arrow { color: var(--text-muted); font-weight: 700; }
        .stacker-chip-added { background: color-mix(in srgb, var(--success) 16%, var(--bg-elevated)); border-color: var(--success); }
        .stacker-chip-badge { color: var(--success); font-weight: 800; }
        .stacker-chip-add, .stacker-chip-x {
            border: none; background: rgba(0,0,0,0.08); color: inherit; border-radius: 50%;
            width: 18px; height: 18px; font-size: 0.75rem; line-height: 1; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .stacker-chip-add:hover { background: var(--success); color: #fff; }
        .stacker-chip-x:hover { background: var(--danger); color: #fff; }
        .stacker-stack-actions { display: flex; flex-wrap: wrap; gap: 8px; }

        /* ===== Habit & Systems Literature (authors + books) ===== */
        .lit-authors-grid, .lit-books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 14px;
            margin-bottom: 8px;
        }
        .lit-author-card, .lit-book-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px;
        }
        .lit-book-card { cursor: pointer; }
        .lit-book-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
        .lit-book-open-btn {
            flex-shrink: 0;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1.5px solid var(--accent);
            background: var(--bg-card);
            color: var(--accent);
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
        }
        .lit-book-open-btn:hover { background: var(--accent); color: #fff; }
        .lit-book-open-btn-active { background: var(--accent); color: #fff; }
        .lit-author-icon, .lit-book-icon { font-size: 1.5rem; margin-bottom: 6px; }
        .lit-author-name, .lit-book-title {
            font-family: var(--font-heading);
            font-size: 0.9375rem;
            font-weight: 800;
            color: var(--text-primary);
        }
        .lit-author-tag {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--accent);
            margin: 2px 0 8px;
        }
        .lit-book-author {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin: 2px 0 8px;
        }
        .lit-author-body, .lit-book-body {
            font-size: 0.75rem;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        @media (max-width: 560px) {
            .lit-authors-grid, .lit-books-grid { grid-template-columns: 1fr; }
        }

        /* ===== Biblical Wisdom cards (Identity page) ===== */
        .bible-verse-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 14px;
            margin-bottom: 8px;
        }
        .bible-verse-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 12px;
            padding: 16px;
        }
        .bible-verse-ref {
            font-family: var(--font-heading);
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .bible-verse-theme {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 3px 0 8px;
        }
        .bible-verse-text {
            font-size: 0.8125rem;
            font-style: italic;
            line-height: 1.55;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .bible-verse-note {
            font-size: 0.75rem;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        @media (max-width: 560px) {
            .bible-verse-grid { grid-template-columns: 1fr; }
        }

        /* ===== Expanded Teachings on Identity (author/book cards with points + diagrams) ===== */
        .teach-grid-expanded {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        .teach-card-expanded { display: flex; flex-direction: column; }
        .teach-subhead {
            font-size: 0.6875rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin: 12px 0 6px;
        }
        .teach-points-list {
            margin: 0;
            padding-left: 18px;
            font-size: 0.75rem;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        .teach-points-list li { margin-bottom: 4px; }
        .teach-diagram-wrap {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px;
        }
        .teach-diagram { width: 100%; height: auto; display: block; }

        .process-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }
        .process-chip {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--accent-dark);
            white-space: nowrap;
        }
        .process-arrow { color: var(--text-muted); font-size: 0.75rem; }

        @media (max-width: 560px) {
            .teach-grid-expanded { grid-template-columns: 1fr; }
        }

        /* ===== Wheel of Life ===== */
        .wheel-of-life-layout {
            display: grid;
            grid-template-columns: minmax(240px, 340px) 1fr;
            gap: 24px;
            align-items: start;
        }
        .wheel-of-life-chart-wrap {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px;
        }
        .wheel-of-life-svg { width: 100%; height: auto; display: block; }
        .wheel-of-life-sliders { display: flex; flex-direction: column; gap: 14px; }
        .wol-slider-row { display: flex; flex-direction: column; gap: 4px; }
        .flesh-ref-note { font-size: 0.625rem; color: var(--text-muted); font-style: italic; margin-top: -2px; }
        .wol-slider-label { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
        .wol-slider-value { color: var(--accent); font-weight: 800; }
        .wol-slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }

        @media (max-width: 720px) {
            .wheel-of-life-layout { grid-template-columns: 1fr; }
        }

        /* ===== Ikigai ===== */
        .ikigai-layout {
            display: grid;
            grid-template-columns: minmax(260px, 360px) 1fr;
            gap: 24px;
            align-items: start;
        }
        .ikigai-diagram-wrap {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px;
        }
        .ikigai-svg { width: 100%; height: auto; display: block; }
        .ikigai-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .ikigai-inputs .form-textarea { min-height: 70px; }

        @media (max-width: 720px) {
            .ikigai-layout { grid-template-columns: 1fr; }
            .ikigai-inputs { grid-template-columns: 1fr; }
        }

        /* ===== Vision Board: Life Timeline & Best Possible Self ===== */
        .life-timeline-wrap {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px;
            overflow-x: auto;
        }
        .life-timeline-svg { width: 100%; min-width: 640px; height: auto; display: block; }

        .bps-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .bps-grid .form-textarea { min-height: 100px; }

        @media (max-width: 720px) {
            .bps-grid { grid-template-columns: 1fr; }
        }

        /* ============================================================
           HEALTH & FITNESS SECTION
           ============================================================ */

        /* Shared data table (used by Exercise, Diagrams, Nutrition tabs) */
        .fitness-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
        .fitness-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; min-width: 640px; }
        .fitness-table th {
            text-align: left; padding: 10px 12px; background: var(--bg-elevated);
            border-bottom: 2px solid var(--border); font-weight: 800; white-space: nowrap;
            color: var(--text-primary);
        }
        .fitness-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); line-height: 1.5; }
        .fitness-table tr:last-child td { border-bottom: none; }
        .fitness-table tr:hover td { background: var(--bg-hover); }

        /* Tool cards grid */
        .fitness-tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px;
        }
        .fitness-tool-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
        }
        .fitness-tool-card-wide { grid-column: 1 / -1; }
        .fitness-tool-title {
            font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 800;
            display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-primary);
        }
        .fitness-tool-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
        .fitness-tool-form { display: flex; flex-direction: column; gap: 8px; }
        .ft-row { display: flex; gap: 8px; }
        .ft-row .form-input { flex: 1; min-width: 0; }
        .ft-checks { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; }
        .fitness-tool-output { margin-top: 14px; }

        .mc-result-row { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 4px 0; color: var(--text-secondary); }
        .mc-result-row b { color: var(--text-primary); }
        .mc-result-highlight { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; padding: 8px 0 !important; }
        .mc-result-highlight b { color: var(--accent); font-size: 0.9375rem; }
        .mc-macro-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
        .mc-macro-seg { height: 100%; }
        .mc-macro-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.6875rem; color: var(--text-secondary); }
        .mc-macro-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }

        .glucose-curve-svg { width: 100%; height: auto; display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }

        .hy-progress-bar { height: 14px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 8px 0; }
        .hy-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width 0.3s ease; }

        .fhm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
        .fhm-chip {
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
            padding: 8px 12px; font-size: 0.75rem; color: var(--text-primary);
        }
        .fhm-chip button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; }
        .fhm-chip button:hover { color: var(--danger); }

        /* Breathwork pacer */
        .breathwork-visual-wrap { display: flex; align-items: center; justify-content: center; padding: 24px 0 8px; }
        .breathwork-circle {
            width: 110px; height: 110px; border-radius: 50%;
            background: color-mix(in srgb, var(--accent) 30%, transparent);
            border: 2px solid var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700; color: var(--text-primary);
            transform: scale(1);
            transition: transform 4s ease-in-out;
        }
        .breathwork-circle.bw-expand { transform: scale(1.7); }
        .breathwork-circle.bw-contract { transform: scale(1); }
        .breathwork-circle.bw-hold { transform: scale(1.7); }

        /* Sleep dashboard */
        .sleep-dashboard-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .sl-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; margin: 8px 0; }
        .sl-bar-seg { height: 100%; }
        .sl-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.6875rem; color: var(--text-secondary); }
        .sl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
        .sl-check-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-secondary); padding: 6px 0; border-bottom: 1px solid var(--border); }
        .sl-check-row:last-child { border-bottom: none; }

        @media (max-width: 720px) {
            .sleep-dashboard-layout { grid-template-columns: 1fr; }
        }

        /* Muscle map */
        .muscle-map-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
        .muscle-map-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 10px; }
        .muscle-map-svg { width: 100%; height: auto; display: block; }
        .mm-legend { display: flex; flex-direction: column; gap: 8px; }
        .mm-legend-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }
        .mm-legend-num {
            flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
            font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
        }

        @media (max-width: 720px) {
            .muscle-map-layout { grid-template-columns: 1fr; }
        }

        /* Daily Dozen tracker */
        .dd-grid-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; overflow-x: auto; }
        .dd-header-row, .dd-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-width: 460px; }
        .dd-header-row { border-bottom: 2px solid var(--border); margin-bottom: 4px; }
        .dd-row { border-bottom: 1px solid var(--border); }
        .dd-row:last-child { border-bottom: none; }
        .dd-label { flex: 1; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
        .dd-note { font-weight: 400; color: var(--text-muted); font-size: 0.6875rem; }
        .dd-boxes { display: flex; gap: 4px; flex-shrink: 0; }
        .dd-box {
            width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            font-size: 0.6875rem; color: #fff; flex-shrink: 0;
        }
        .dd-box.checked { background: var(--success); border-color: var(--success); }
        .dd-daylabel { width: 22px; text-align: center; font-size: 0.625rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }

        /* Longevity curve */
        .longevity-curve-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; overflow-x: auto; }
        .longevity-curve-svg { width: 100%; min-width: 600px; height: auto; display: block; }

        /* Yoga flow list */
        .yoga-flow-list { display: flex; flex-direction: column; gap: 10px; }
        .yoga-step-card {
            display: flex; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: 12px; padding: 12px 14px;
        }
        .yoga-step-num {
            flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
            font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
        }
        .yoga-step-pose { font-weight: 700; font-size: 0.8125rem; color: var(--text-primary); }
        .yoga-step-breath { font-size: 0.6875rem; font-weight: 600; color: var(--accent); margin: 2px 0 4px; }
        .yoga-step-cue { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

        /* Remedy cards */
        .remedy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
        .remedy-card { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: 12px; padding: 16px; }
        .remedy-card-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.875rem; color: var(--text-primary); margin-bottom: 8px; }

        /* Spirituality & Mental Health: pie chart layout */
        .spirit-pie-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
        .spirit-pie-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
        .spirit-pie-svg { width: 100%; height: auto; display: block; }

        @media (max-width: 720px) {
            .spirit-pie-layout { grid-template-columns: 1fr; }
        }

        /* ===== Icon Pack system: consistent SVG icon rendering + 100 packs across 10 real icon-design families ===== */
        .emoji-icon {
            height: calc(1em * var(--icon-scale, 1)); width: calc(1em * var(--icon-scale, 1)); vertical-align: -0.15em; display: inline-block;
            object-fit: contain; filter: none; user-select: none;
        }
        .icon-pack-pack001 .emoji-icon { filter: none; }
        .icon-pack-pack002 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack003 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack004 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack005 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack006 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack007 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack008 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack009 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack010 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack011 .emoji-icon { filter: none; }
        .icon-pack-pack012 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack013 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack014 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack015 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack016 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack017 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack018 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack019 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack020 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack021 .emoji-icon { filter: none; }
        .icon-pack-pack022 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack023 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack024 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack025 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack026 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack027 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack028 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack029 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack030 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack031 .emoji-icon { filter: none; }
        .icon-pack-pack032 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack033 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack034 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack035 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack036 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack037 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack038 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack039 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack040 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack041 .emoji-icon { filter: none; }
        .icon-pack-pack042 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack043 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack044 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack045 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack046 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack047 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack048 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack049 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack050 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack051 .emoji-icon { filter: none; }
        .icon-pack-pack052 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack053 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack054 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack055 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack056 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack057 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack058 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack059 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack060 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack061 .emoji-icon { filter: none; }
        .icon-pack-pack062 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack063 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack064 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack065 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack066 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack067 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack068 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack069 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack070 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack071 .emoji-icon { filter: none; }
        .icon-pack-pack072 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack073 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack074 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack075 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack076 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack077 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack078 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack079 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack080 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack081 .emoji-icon { filter: none; }
        .icon-pack-pack082 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack083 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack084 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack085 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack086 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack087 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack088 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack089 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack090 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }
        .icon-pack-pack091 .emoji-icon { filter: none; }
        .icon-pack-pack092 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(1.4) brightness(0.95) contrast(1.0); }
        .icon-pack-pack093 .emoji-icon { filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(1.6) brightness(1.0) contrast(1.05); }
        .icon-pack-pack094 .emoji-icon { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
        .icon-pack-pack095 .emoji-icon { filter: saturate(0.7) brightness(1.05) contrast(0.95); }
        .icon-pack-pack096 .emoji-icon { filter: contrast(1.3) saturate(1.1); }
        .icon-pack-pack097 .emoji-icon { filter: hue-rotate(10deg) saturate(1.2) brightness(1.05); }
        .icon-pack-pack098 .emoji-icon { filter: hue-rotate(-15deg) saturate(1.1) brightness(1.02); }
        .icon-pack-pack099 .emoji-icon { filter: brightness(0.85) contrast(1.2) saturate(1.1); }
        .icon-pack-pack100 .emoji-icon { filter: hue-rotate(90deg) saturate(2.0) contrast(1.15); }

        .habit-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 12px;
            gap: 10px;
        }

        .habit-name {
            font-size: 0.9375rem;
            font-weight: 700;
        }

        .habit-streak {
            font-size: 0.75rem;
            color: var(--warning);
            font-weight: 600;
            white-space: nowrap;
        }

        .habit-header-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }

        .habit-icon-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 6px;
            font-size: 0.8125rem;
        }
        .habit-icon-btn:hover { background: var(--bg-hover); color: var(--accent); }
        .habit-icon-btn.danger:hover { color: var(--danger); }

        .habit-meta-row {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
            line-height: 1.4;
        }
        .habit-meta-row .tag-icon { flex-shrink: 0; }
        .habit-meta-row b { color: var(--text-primary); font-weight: 600; }

        .habit-consistency-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 12px 0;
        }
        .habit-consistency-bar {
            flex: 1;
            height: 6px;
            background: var(--bg-elevated);
            border-radius: 4px;
            overflow: hidden;
        }
        .habit-consistency-fill { height: 100%; border-radius: 4px; }
        .habit-consistency-label { font-size: 0.6875rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

        .habit-days {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .habit-day {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text-muted);
        }

        .habit-day.done {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .habit-day:hover {
            border-color: var(--accent);
        }

        .habit-days.compact .habit-day {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            font-size: 0.5625rem;
        }

        .habit-window-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--border);
        }
        .habit-window-label {
            font-size: 0.6875rem;
            color: var(--text-muted);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .habit-window-slider {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 4px;
            border-radius: 999px;
            background: var(--border);
            outline: none;
            cursor: pointer;
            margin: 0;
        }
        .habit-window-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg-card);
            box-shadow: 0 1px 3px rgba(16,35,46,0.3);
            cursor: pointer;
        }
        .habit-window-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg-card);
            cursor: pointer;
        }
        .habit-window-value {
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--text-secondary);
            width: 28px;
            text-align: right;
            flex-shrink: 0;
        }

        /* Compounding callout */
        .compound-note {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            background: rgba(46, 134, 214, 0.08);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 28px;
            font-size: 0.8438rem;
            color: var(--text-secondary);
            line-height: 1.55;
        }
        .compound-icon { font-size: 1.125rem; flex-shrink: 0; }
        .compound-note b { color: var(--text-primary); }

        /* Quick add bar */
        .quick-add-bar { display: flex; flex-wrap: wrap; gap: 10px; }
        .quick-add-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-primary);
            font-weight: 600;
            font-size: 0.8125rem;
            cursor: pointer;
            flex: 1;
            min-width: 150px;
            justify-content: center;
        }
        .quick-add-btn:hover { border-color: var(--accent); background: var(--bg-hover); color: var(--accent-dark); }

        /* Upcoming deadlines */
        .deadline-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 8px;
        }
        .deadline-row .dl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .deadline-row .dl-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .deadline-row .dl-meta { font-size: 0.6875rem; color: var(--text-muted); }
        .deadline-row .dl-badge {
            flex-shrink: 0;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
        }
        .dl-badge.soon { background: rgba(224,67,61,0.12); color: var(--danger); }
        .dl-badge.upcoming { background: rgba(230,168,44,0.14); color: var(--warning); }
        .dl-badge.later { background: var(--bg-elevated); color: var(--text-secondary); }

        /* Identity layers */
        .identity-layers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .layer-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
        }
        .layer-eyebrow {
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            font-weight: 600;
            margin-bottom: 8px;
        }
        .layer-title {
            font-size: 0.9375rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .layer-desc {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            line-height: 1.55;
        }

        /* Identity statement list */
        .identity-list { display: flex; flex-direction: column; gap: 8px; }
        .identity-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 0.875rem;
        }
        .identity-item .del-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            flex-shrink: 0;
        }
        .identity-item .del-btn:hover { color: var(--danger); }

        /* Core Values */
        .value-chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
        .value-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 8px 14px;
            font-size: 0.8125rem;
            font-weight: 600;
        }
        .value-chip .del-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8125rem; }
        .value-chip .del-btn:hover { color: var(--danger); }

        /* Evidence log */
        .evidence-add-row { display: flex; flex-wrap: wrap; gap: 10px; }
        .evidence-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-left: 3px solid var(--success);
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 8px;
        }
        .evidence-row .ev-main { flex: 1; min-width: 0; }
        .evidence-row .ev-text { font-size: 0.875rem; color: var(--text-primary); }
        .evidence-row .ev-meta { font-size: 0.6875rem; color: var(--text-muted); margin-top: 3px; }
        .evidence-row .del-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9375rem; flex-shrink: 0; }
        .evidence-row .del-btn:hover { color: var(--danger); }

        /* Four laws grid */
        .laws-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        .law-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
        }
        .law-number {
            font-size: 1.375rem;
            font-weight: 800;
            font-family: monospace;
            margin-bottom: 6px;
        }
        .law-title {
            font-size: 0.9062rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .law-desc {
            font-size: 0.7812rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Trend sparkline */
        .trend-chart-svg { width: 100%; height: 140px; display: block; }

        /* Identity page: hero stat */
        .power-stat-wrap {
            display: flex;
            align-items: center;
            gap: 24px;
            background: linear-gradient(135deg, rgba(46,134,214,0.06), rgba(47,168,79,0.06));
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px 28px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .power-stat-number {
            font-size: 2.625rem;
            font-weight: 800;
            font-family: monospace;
            color: var(--accent);
            line-height: 1;
            flex-shrink: 0;
        }
        .power-stat-text {
            font-size: 0.8438rem;
            color: var(--text-secondary);
            line-height: 1.6;
            max-width: 560px;
        }
        .power-stat-text b { color: var(--text-primary); }

        /* Law card tip list */
        .law-tips {
            margin: 10px 0 0;
            padding-left: 18px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.65;
        }
        .law-tips li { margin-bottom: 3px; }

        /* Loop steps / inversion cards reuse .laws-grid; step badges */
        .step-badge {
            display: inline-block;
            font-size: 0.6562rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        /* Valley of latent potential chart */
        .valley-wrap {
            display: flex;
            gap: 24px;
            align-items: center;
            flex-wrap: wrap;
        }
        .valley-svg { width: 100%; max-width: 460px; height: 200px; flex-shrink: 0; }
        .valley-legend {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            flex: 1;
            min-width: 220px;
        }
        .valley-legend .dot {
            display: inline-block;
            width: 10px; height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .callout-tip {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            background: rgba(47, 168, 79, 0.08);
            border: 1px solid var(--border);
            border-left: 3px solid var(--success);
            border-radius: 12px;
            padding: 16px 18px;
            font-size: 0.8438rem;
            color: var(--text-secondary);
            line-height: 1.55;
        }
        .callout-tip b { color: var(--text-primary); }

        @media (max-width: 900px) {
            .identity-layers, .laws-grid { grid-template-columns: 1fr; }
        }

        /* Search */
        .search-bar {
            position: relative;
            margin-bottom: 24px;
        }

        .search-input {
            width: 100%;
            padding: 14px 20px 14px 48px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 0.875rem;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(46, 134, 214, 0.15);
        }

        .search-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 1rem;
        }

        /* Export/Import */
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .settings-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
        }

        .settings-card h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .settings-card p {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }

        /* Live preview */
        .settings-preview-box {
            background: var(--bg-elevated);
            border: 1px dashed var(--border);
            border-radius: 14px;
            padding: 20px;
        }
        .settings-preview-topbar { display: flex; gap: 6px; margin-bottom: 14px; }
        .settings-preview-dot { width: 10px; height: 10px; border-radius: 50%; }
        .settings-preview-heading { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: var(--text-primary); margin-bottom: 8px; }
        .settings-preview-body { font-family: var(--font-body); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
        .settings-preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

        /* Density */
        .density-options { display: flex; gap: 10px; flex-wrap: wrap; }
        .density-option {
            flex: 1;
            min-width: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            border-radius: 10px;
            border: 2px solid var(--border);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.8125rem;
            cursor: pointer;
        }
        .density-option:hover { border-color: var(--border-light); }
        .density-option.active { border-color: var(--accent); color: var(--accent-dark); background: var(--bg-hover); }

        /* Keyboard shortcuts */
        .shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
        .shortcut-row { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--text-secondary); }
        .shortcut-key {
            flex-shrink: 0;
            min-width: 90px;
            text-align: center;
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-elevated);
            font-family: monospace;
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.75rem;
        }

        /* Density: compact mode */
        body.density-compact .card, body.density-compact .settings-card, body.density-compact .chart-container,
        body.density-compact .habit-card, body.density-compact .checklist-card, body.density-compact .goal-card {
            padding: 14px !important;
        }
        body.density-compact .page-section { gap: 12px; }
        body.density-compact .top-bar { margin-bottom: 14px; }

        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        .file-input-wrapper input[type=file] {
            position: absolute;
            left: -9999px;
        }

        .file-input-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .file-input-label:hover {
            border-color: var(--accent);
            color: var(--accent-light);
        }

        /* Export format picker */
        .export-format-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .export-format-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            text-align: left;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: inherit;
        }
        .export-format-btn:hover {
            border-color: var(--accent);
            background: var(--bg-hover);
            transform: translateY(-1px);
        }
        .export-format-icon { font-size: 1.25rem; }
        .export-format-name { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
        .export-format-desc { font-size: 0.7188rem; color: var(--text-muted); line-height: 1.4; }

        @media (max-width: 560px) {
            .export-format-grid { grid-template-columns: 1fr; }
        }

        /* Theme picker — category tabs */
        .theme-category-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 10px 0 18px;
        }
        .theme-cat-tab {
            font-family: inherit;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 7px 14px;
            border-radius: 999px;
            border: 1.5px solid var(--border);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .theme-cat-tab:hover { border-color: var(--accent-light); color: var(--text-primary); }
        .theme-cat-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

        .theme-category-group { margin-bottom: 26px; }
        .theme-category-group:last-child { margin-bottom: 0; }
        .theme-category-heading h4 {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-primary);
            display: flex;
            align-items: baseline;
            gap: 6px;
        }
        .theme-category-count { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
        .theme-category-heading p {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin: 2px 0 12px;
            max-width: 640px;
        }

        /* Theme picker grid — detailed per-theme mockup preview */
        .theme-picker {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .theme-swatch-v2 {
            display: flex;
            flex-direction: column;
            gap: 0;
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            overflow: hidden;
            transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
            position: relative;
        }
        .theme-swatch-v2:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
        .theme-swatch-v2.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

        /* Detailed mini mockup: a tiny "card on a page" so every theme's bg / card / accents / text are all visible at once */
        .tsw-preview {
            display: block;
            width: 100%;
            height: 96px;
            padding: 12px;
            position: relative;
            overflow: hidden;
        }
        .tsw-card {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            border: 1px solid;
            padding: 10px;
            position: relative;
            box-sizing: border-box;
        }
        .tsw-dots { display: flex; gap: 4px; margin-bottom: 8px; }
        .tsw-dots span { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        .tsw-line { display: block; height: 6px; border-radius: 3px; margin-bottom: 5px; opacity: 0.9; }
        .tsw-btn { display: block; width: 46%; height: 12px; border-radius: 5px; margin-top: 8px; }
        .tsw-glare { position: absolute; inset: 0; pointer-events: none; }

        .tsw-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px 12px;
            background: var(--bg-elevated);
        }
        .tsw-icon { font-size: 1rem; flex-shrink: 0; }
        .tsw-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
        .tsw-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tsw-desc { font-size: 0.625rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Per-category visual "effect" treatments applied to the preview mockup */
        .fx-candy .tsw-card { box-shadow: 0 3px 10px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6); }
        .fx-candy .tsw-glare { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 55%); }

        .fx-textured .tsw-card { box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35); backdrop-filter: blur(1px); }
        .fx-textured .tsw-glare { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); mix-blend-mode: overlay; }

        .fx-plain .tsw-card { box-shadow: none; border-radius: 3px; }
        .fx-plain .tsw-preview { padding: 8px; }
        .fx-plain .tsw-line, .fx-plain .tsw-btn { border-radius: 0; }

        .fx-contrast .tsw-card { box-shadow: 3px 3px 0 rgba(0,0,0,0.9); border-width: 2px; border-radius: 2px; }
        .fx-contrast .tsw-line, .fx-contrast .tsw-btn { border-radius: 0; }

        .fx-multi .tsw-card { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
        .fx-multi .tsw-glare { background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent); background-size: 200% 200%; animation: fxMultiShift 3.5s ease-in-out infinite; }
        @keyframes fxMultiShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

        .fx-blackdark .tsw-card { box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
        .fx-blackdark .tsw-glare { background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%); }

        @media (max-width: 560px) {
            .theme-picker { grid-template-columns: repeat(2, 1fr); }
        }

        /* Text size control */
        .text-size-control {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 8px;
        }
        .text-size-icon {
            flex-shrink: 0;
            font-weight: 700;
            color: var(--text-secondary);
            font-family: var(--font-heading);
            line-height: 1;
        }
        .text-size-icon.small { font-size: 0.75rem; }
        .text-size-icon.large { font-size: 1.375rem; }
        .text-size-slider-wrap {
            flex: 1;
            min-width: 140px;
        }
        .text-size-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 25%), var(--border) var(--fill, 25%), var(--border) 100%);
            outline: none;
            cursor: pointer;
            margin: 0;
        }
        .text-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            border: 3px solid var(--bg-card);
            box-shadow: 0 1px 4px rgba(16,35,46,0.3);
            cursor: pointer;
            margin-top: -1px;
        }
        .text-size-slider::-moz-range-track {
            height: 6px;
            border-radius: 999px;
            background: var(--border);
        }
        .text-size-slider::-moz-range-progress {
            height: 6px;
            border-radius: 999px;
            background: var(--accent);
        }
        .text-size-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 3px solid var(--bg-card);
            box-shadow: 0 1px 4px rgba(16,35,46,0.3);
            cursor: pointer;
        }
        .text-size-ticks {
            display: flex;
            justify-content: space-between;
            font-size: 0.625rem;
            color: var(--text-muted);
            margin-top: 4px;
            padding: 0 2px;
        }
        .text-size-btn {
            width: 44px;
            height: 44px;
            padding: 0;
            font-size: 1rem;
            font-weight: 700;
            flex-shrink: 0;
            justify-content: center;
        }
        .text-size-readout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            min-width: 64px;
            flex-shrink: 0;
        }
        #text-size-label {
            font-size: 1.125rem;
            font-weight: 700;
            font-family: var(--font-heading);
            color: var(--text-primary);
        }
        .text-size-reset {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.6875rem;
            cursor: pointer;
            padding: 0;
            font-family: inherit;
        }
        .text-size-reset:hover { text-decoration: underline; }

        .icon-size-control {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 8px;
        }
        .icon-size-anchor {
            flex-shrink: 0;
            color: var(--text-secondary);
            line-height: 1;
        }
        .icon-size-anchor { font-size: 0.5rem; }
        .icon-size-anchor-large { font-size: 1.25rem; }
        .icon-size-slider-wrap {
            flex: 1;
            min-width: 140px;
        }
        .icon-size-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 44%), var(--border) var(--fill, 44%), var(--border) 100%);
            outline: none;
            cursor: pointer;
            margin: 0;
        }
        .icon-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            border: 3px solid var(--bg-card);
            box-shadow: 0 1px 4px rgba(16,35,46,0.3);
            cursor: pointer;
            margin-top: -1px;
        }
        .icon-size-slider::-moz-range-track {
            height: 6px;
            border-radius: 999px;
            background: var(--border);
        }
        .icon-size-slider::-moz-range-progress {
            height: 6px;
            border-radius: 999px;
            background: var(--accent);
        }
        .icon-size-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 3px solid var(--bg-card);
            box-shadow: 0 1px 4px rgba(16,35,46,0.3);
            cursor: pointer;
        }
        .icon-size-ticks {
            display: flex;
            justify-content: space-between;
            font-size: 0.625rem;
            color: var(--text-muted);
            margin-top: 4px;
            padding: 0 2px;
        }
        .icon-size-readout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 110px;
            flex-shrink: 0;
        }
        #icon-size-label {
            font-size: 0.8125rem;
            font-weight: 700;
            font-family: var(--font-heading);
            color: var(--text-primary);
            white-space: nowrap;
        }

        .color-studio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .color-studio-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 10px;
        }
        .color-studio-item input[type="color"] {
            width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
            padding: 0; cursor: pointer; background: none; flex-shrink: 0;
        }
        .color-studio-item-label { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
        .color-studio-item-sub { font-size: 0.625rem; color: var(--text-muted); }

        /* Vision Board: Affirmations */
        .affirmations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
        .affirmation-card {
            background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent);
            border-radius: 10px; padding: 12px 14px; font-size: 0.8125rem; font-style: italic; color: var(--text-primary);
            display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
        }
        .affirmation-card button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.875rem; flex-shrink: 0; }
        .affirmation-card button:hover { color: var(--danger); }

        .core-values-grid { display: flex; flex-wrap: wrap; gap: 8px; }
        .core-value-chip {
            padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
            background: var(--bg-card); color: var(--text-primary); font-size: 0.8125rem;
            cursor: pointer; transition: all 0.15s ease; font-family: inherit;
        }
        .core-value-chip:hover { border-color: var(--accent); }
        .core-value-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

        /* Planning: Decision Matrix */
        .decision-matrix-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
        .decision-matrix-table th, .decision-matrix-table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; }
        .decision-matrix-table input[type="number"] { width: 56px; padding: 4px 6px; }



        /* Reminder notification banner */
        .notify-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background: var(--bg-elevated); margin-bottom:14px; }
        .notify-banner-icon { font-size:1.25rem; }
        .notify-banner-text { flex:1 1 240px; min-width:0; font-size:0.8125rem; color: var(--text-secondary); line-height:1.45; }
        .notify-banner-text strong { color: var(--text-primary); }
        .notify-banner.ok { border-color:#10b981; background: rgba(16,185,129,0.08); }
        .notify-banner.blocked { border-color:#ef4444; background: rgba(239,68,68,0.08); }
        .notify-banner-actions { display:flex; gap:8px; flex-wrap:wrap; }

        /* Calendar: 24-hour timeline + reminders */
        .day-hours-head { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
        .day-hours-hint { font-size:0.6875rem; color: var(--text-muted); margin: 2px 0 10px; }
        .day-hours-list { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; padding-right:4px; }
        .day-hour-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:8px; background: var(--bg-elevated); }
        .day-hour-row.is-now { outline:1.5px solid var(--accent); }
        .day-hour-label { flex:0 0 58px; font-size:0.6875rem; font-weight:700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .day-hour-input { flex:1 1 auto; min-width:0; font-size:0.8125rem; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
        .day-hour-input:focus { outline:none; border-color: var(--accent); }
        .day-hour-min { flex:0 0 64px; font-size:0.75rem; padding:5px 4px; border-radius:6px; border:1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
        .day-hour-bell { flex:0 0 auto; border:1px solid var(--border); background: var(--bg-card); border-radius:6px; cursor:pointer; font-size:0.875rem; line-height:1; padding:5px 7px; opacity:0.45; }
        .day-hour-bell.on { opacity:1; border-color: var(--accent); background: rgba(46,134,214,0.12); }
        .alarm-bell { font-size:3rem; animation: alarmShake 0.9s ease-in-out infinite; }
        @keyframes alarmShake { 0%,100%{transform:rotate(-12deg);} 50%{transform:rotate(12deg);} }
        .alarm-time { font-size:2rem; font-weight:800; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
        .alarm-text { font-size:1rem; font-weight:600; margin-top:6px; color: var(--text-primary); }
        .alarm-date { font-size:0.75rem; color: var(--text-muted); margin-top:4px; }

        /* Calendar: Countdown widget */
        .countdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
        .countdown-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; position: relative; }
        .countdown-days { font-size: 1.5rem; font-weight: 800; font-family: var(--font-heading); color: var(--accent); }
        .countdown-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
        .countdown-remove { position: absolute; top: 4px; right: 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; }

        /* Fitness: Body Measurements */
        .measurements-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }

        .font-preview {
            margin-top: 14px;
            padding: 20px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 1.25rem;
            color: var(--text-primary);
            line-height: 1.5;
        }

        /* Quote of the Day */
        .qod-card {
            background: linear-gradient(135deg, rgba(46,134,214,0.07), rgba(47,168,79,0.07));
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px;
            text-align: center;
        }
        .qod-label {
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 14px;
        }
        .qod-text {
            font-family: var(--font-heading);
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.5;
            max-width: 640px;
            margin: 0 auto;
        }
        .qod-author {
            margin-top: 12px;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 600;
        }

        /* Quote filters + gallery */
        .quote-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .quote-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 14px;
            max-height: 560px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .quote-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
        }
        .quote-card-text {
            font-size: 0.875rem;
            color: var(--text-primary);
            line-height: 1.5;
            margin-bottom: 8px;
        }
        .quote-card-author {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        /* Analytics: layout grid */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .analytics-grid .chart-container {
            margin-bottom: 0;
        }
        .chart-container.span-2 {
            grid-column: span 2;
        }
        @media (max-width: 720px) {
            .chart-container.span-2 { grid-column: span 1; }
        }

        /* ===== Dashboard: Insights & Analytics ===== */
        .dash-insights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }
        .dash-insights-grid .chart-container { margin-bottom: 0; }

        .productivity-score-wrap { display: flex; align-items: center; gap: 16px; }
        .productivity-score-num { font-size: 2.5rem; font-weight: 800; font-family: var(--font-heading); color: var(--accent); line-height: 1; }
        .productivity-score-breakdown { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
        .productivity-score-bar-row { display: flex; align-items: center; gap: 8px; }
        .productivity-score-bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
        .productivity-score-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }

        /* Heatmap */
        .heatmap-wrap { overflow-x: auto; }
        .heatmap-grid { display: flex; gap: 3px; min-width: 480px; }
        .heatmap-col { display: flex; flex-direction: column; gap: 3px; }
        .heatmap-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--border); display: inline-block; }
        .heatmap-level-0 { background: var(--bg-elevated); border: 1px solid var(--border); }
        .heatmap-level-1 { background: color-mix(in srgb, var(--accent) 30%, var(--bg-elevated)); }
        .heatmap-level-2 { background: color-mix(in srgb, var(--accent) 55%, var(--bg-elevated)); }
        .heatmap-level-3 { background: color-mix(in srgb, var(--accent) 80%, var(--bg-elevated)); }
        .heatmap-level-4 { background: var(--accent); }
        .heatmap-level-future { background: transparent; }
        .heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 0.6875rem; color: var(--text-muted); }

        /* Streak leaderboard */
        .streak-leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
        .streak-leaderboard-row:last-child { border-bottom: none; }
        .streak-rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; color: var(--text-secondary); }
        .streak-rank.top1 { background: #f5c518; border-color: #f5c518; color: #4a3800; }
        .streak-rank.top2 { background: #c7cdd6; border-color: #c7cdd6; color: #3a3f45; }
        .streak-rank.top3 { background: #d9a066; border-color: #d9a066; color: #4a2f10; }
        .streak-name { flex: 1; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .streak-count { font-size: 0.8125rem; font-weight: 800; color: var(--accent); white-space: nowrap; }

        /* This Month at a Glance */
        .dash-month-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
        .dash-month-stat { text-align: center; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
        .dash-month-stat-value { font-size: 1.375rem; font-weight: 800; font-family: var(--font-heading); color: var(--text-primary); }
        .dash-month-stat-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

        /* Milestones progress */
        .milestones-progress-track { height: 16px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 8px; }
        .milestones-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--purple)); }

        /* Money snapshot mini */
        .money-snapshot-row { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 5px 0; color: var(--text-secondary); }
        .money-snapshot-row b { color: var(--text-primary); }

        /* ===== Calendar: Tools ===== */
        .cal-legend { display: flex; flex-direction: column; gap: 8px; }
        .cal-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-secondary); }
        .cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
        @media print {
            .no-print, .sidebar, .top-actions, .mobile-toggle { display: none !important; }
            .main { margin-left: 0 !important; }
        }

        /* ===== Budgeting: Calculator (Basic + Scientific) ===== */
        .calc-tool-wrap {
            max-width: 380px;
            margin: 0 auto;
            outline: none;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 14px;
        }
        .calc-tool-wrap:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
        .calc-tool-mode-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
        .calc-tool-memory-indicator {
            width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
            font-size: 0.6875rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
        }
        .calc-tool-angle-toggle {
            margin-left: auto; font-size: 0.6875rem; font-weight: 700; padding: 5px 10px; border-radius: 999px;
            border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-family: inherit;
        }
        .calc-tool-angle-toggle:hover { border-color: var(--accent); color: var(--accent); }

        .calc-tool-display {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 14px;
            text-align: right;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .calc-tool-expression {
            font-size: 0.8125rem;
            color: var(--text-muted);
            min-height: 1.2em;
            white-space: nowrap;
            overflow-x: auto;
            font-family: var(--font-heading);
        }
        .calc-tool-result {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--text-primary);
            font-family: var(--font-heading);
            white-space: nowrap;
            overflow-x: auto;
            line-height: 1.2;
        }

        .calc-tool-basic-grid, .calc-tool-sci-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .calc-tool-sci-grid { grid-template-columns: repeat(6, 1fr); margin-bottom: 8px; }

        .calc-tool-basic-grid button, .calc-tool-sci-grid button {
            font-family: inherit;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-primary);
            border-radius: 10px;
            font-size: 1.125rem;
            font-weight: 600;
            padding: 0;
            aspect-ratio: 1;
            min-height: 46px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.1s ease, transform 0.06s ease;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        .calc-tool-sci-grid button { font-size: 0.75rem; font-weight: 700; aspect-ratio: auto; min-height: 38px; }
        .calc-tool-basic-grid button:hover, .calc-tool-sci-grid button:hover { background: var(--bg-hover); }
        .calc-tool-basic-grid button:active, .calc-tool-sci-grid button:active { transform: scale(0.94); background: var(--bg-hover); }

        .calc-tool-btn-op {
            background: var(--accent) !important;
            color: #fff !important;
            border-color: var(--accent) !important;
            font-size: 1.375rem !important;
        }
        .calc-tool-btn-eq {
            background: var(--success) !important;
            color: #fff !important;
            border-color: var(--success) !important;
            font-size: 1.375rem !important;
        }
        .calc-tool-btn-fn {
            background: var(--bg-elevated) !important;
            color: var(--danger) !important;
            font-weight: 700 !important;
        }

        @media (max-width: 480px) {
            .calc-tool-wrap { max-width: 100%; padding: 10px; }
            .calc-tool-result { font-size: 1.875rem; }
            .calc-tool-sci-grid { grid-template-columns: repeat(4, 1fr); }
            .calc-tool-basic-grid button, .calc-tool-sci-grid button { min-height: 50px; font-size: 1.25rem; }
            .calc-tool-sci-grid button { font-size: 0.75rem; min-height: 40px; }
        }

        /* Analytics: overview stat row */
        .analytics-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        /* Pie / donut chart */
        .pie-chart-wrap {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .pie-chart-svg svg { display: block; }
        .pie-legend {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .pie-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }
        .pie-legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Gauge */
        .gauge-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .gauge-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-align: center;
        }

        /* Line / trend chart */
        .line-chart-svg { width: 100%; height: 180px; display: block; }

        .analytics-empty {
            text-align: center;
            padding: 30px 10px;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .record-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 4px 10px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--border);
        }
        .record-row:last-child { border-bottom: none; }
        .record-label { font-size: 0.8125rem; color: var(--text-secondary); flex: 1 1 auto; }
        .record-value { font-weight: 700; color: var(--accent-dark); font-size: 0.9375rem; }
        .record-sub { width: 100%; font-size: 0.6875rem; color: var(--text-muted); }

        /* Financial statements (Income Statement, Balance Sheet) */
        .statement-block { margin-bottom: 18px; }
        .statement-heading {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 0.875rem;
            color: var(--text-primary);
            padding-bottom: 6px;
            margin-bottom: 8px;
            border-bottom: 2px solid var(--border);
        }
        .statement-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 7px 2px;
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }
        .statement-row.statement-subtotal {
            font-weight: 700;
            color: var(--text-primary);
            border-top: 1px dashed var(--border);
            margin-top: 4px;
            padding-top: 8px;
        }
        .statement-row.statement-total {
            font-weight: 800;
            font-size: 1rem;
            border-top: 2px solid var(--border);
            padding-top: 14px;
            margin-top: 6px;
        }
        .statement-row.statement-total.positive { color: var(--success); }
        .statement-row.statement-total.negative { color: var(--danger); }

        /* Budgeting page */
        .budget-panel { display: none; }
        .budget-panel.active { display: block; }
        .planning-panel { display: none; }
        .planning-panel.active { display: block; }
        .fitness-tab-panel { display: none; }
        .fitness-tab-panel.active { display: block; }
        .spirit-tab-panel { display: none; }
        .spirit-tab-panel.active { display: block; }
        .goal-tools-tab-panel { display: none; }
        .goal-tools-tab-panel.active { display: block; }

        /* ===== Goals: Mini-Dashboard & Goal-Setting Tools ===== */
        .goals-mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
        .goals-mini-stat { text-align: center; padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
        .goals-mini-stat-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-heading); color: var(--text-primary); }
        .goals-mini-stat-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

        .smart-builder-grid { display: flex; flex-direction: column; gap: 12px; }
        .smart-preview {
            margin-top: 14px; padding: 14px; background: var(--bg-card); border: 1px solid var(--accent);
            border-radius: 10px; font-size: 0.875rem; color: var(--text-primary); line-height: 1.6;
        }

        .goal-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
        .goal-template-filters {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 8px;
            margin-bottom: 16px;
        }
        @media (max-width: 720px) {
            .goal-template-filters { grid-template-columns: 1fr 1fr; }
        }
        .goal-template-badge {
            display: inline-block; font-size: 0.625rem; font-weight: 700; padding: 2px 7px;
            border-radius: 999px; margin-right: 4px; color: #fff;
        }
        .goal-template-badge.tf-short { background: var(--success); }
        .goal-template-badge.tf-medium { background: var(--accent); }
        .goal-template-badge.tf-long { background: var(--purple); }

        /* Goals: Basic / Advanced mode toggle */

        .goal-template-card {
            background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px;
            padding: 14px; cursor: pointer; transition: border-color 0.15s ease, transform 0.12s ease;
        }
        .goal-template-card:hover { border-color: var(--accent); transform: translateY(-1px); }
        .goal-template-icon { font-size: 1.25rem; margin-bottom: 6px; }
        .goal-template-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
        .goal-template-meta { font-size: 0.6875rem; color: var(--text-muted); }

        .impact-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 320px; }
        .impact-matrix-quad { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
        .impact-matrix-quad-title { font-size: 0.75rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
        .impact-matrix-goal-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.75rem; color: var(--text-primary); }

        /* ===== Money: Personal / Business group switch ===== */
        .money-group-switch { display: flex; gap: 10px; margin-bottom: 16px; }
        .money-group-btn { font-weight: 800 !important; font-size: 0.875rem !important; padding: 10px 20px !important; }

        /* ===== Cash Flow Quadrant ===== */
        .cash-quadrant-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 260px; }
        .cash-quadrant-cell {
            border-radius: 14px; padding: 18px; cursor: pointer; color: #fff;
            display: flex; flex-direction: column; justify-content: center;
            transition: transform 0.15s ease;
        }
        .cash-quadrant-cell:hover { transform: scale(1.02); }
        .cash-quadrant-letter { font-size: 2rem; font-weight: 800; font-family: var(--font-heading); line-height: 1; }
        .cash-quadrant-name { font-size: 0.9375rem; font-weight: 700; margin-top: 4px; }
        .cash-quadrant-sub { font-size: 0.75rem; opacity: 0.9; margin-top: 2px; }

        /* ===== Investment Systems ===== */
        .investment-systems-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
        .investment-system-card {
            background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
            padding: 16px; cursor: pointer; transition: border-color 0.15s ease;
        }
        .investment-system-card:hover { border-color: var(--accent); }
        .investment-system-header { display: flex; align-items: center; gap: 10px; }
        .investment-system-title { font-weight: 800; font-size: 0.9375rem; color: var(--text-primary); flex: 1; }
        .investment-system-tool-badge { font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--success); color: #fff; }
        .investment-system-summary { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }
        .investment-system-detail { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
        .investment-system-detail.expanded { display: block; }
        .investment-system-detail h5 { font-size: 0.75rem; font-weight: 800; color: var(--accent); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.4px; }
        .investment-system-detail p { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
        .investment-tool-wrap { margin-top: 14px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }

        /* ===== Project Management Tools ===== */
        .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
        .kanban-column { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 120px; }
        .kanban-column-title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; }
        .kanban-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.75rem; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
        .kanban-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
        .kanban-card-actions button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; }
        .kanban-card-actions button:hover { color: var(--accent); }
        @media (max-width: 720px) { .kanban-board { grid-template-columns: 1fr; } }

        .wbs-deliverable { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
        .wbs-deliverable-title { font-weight: 700; font-size: 0.8125rem; display: flex; justify-content: space-between; align-items: center; }
        .wbs-subtask-row { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 16px; font-size: 0.75rem; }
        .wbs-add-row { display: flex; gap: 6px; margin-top: 8px; padding-left: 16px; }

        .moscow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
        .moscow-column { border-radius: 10px; padding: 10px; min-height: 100px; }
        .moscow-column.must { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); border: 1px solid var(--danger); }
        .moscow-column.should { background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); border: 1px solid var(--warning); }
        .moscow-column.could { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); border: 1px solid var(--accent); }
        .moscow-column.wont { background: var(--bg-elevated); border: 1px solid var(--border); }
        .moscow-column-title { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
        .moscow-item { background: var(--bg-card); border-radius: 6px; padding: 6px 8px; font-size: 0.6875rem; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 4px; }
        @media (max-width: 720px) { .moscow-grid { grid-template-columns: 1fr 1fr; } }

        .budget-line-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 14px;
        }
        .budget-line-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.8125rem;
        }
        .budget-line-item .bli-main { display: flex; flex-direction: column; gap: 2px; }
        .budget-line-item .bli-name { font-weight: 600; color: var(--text-primary); }
        .budget-line-item .bli-meta { font-size: 0.6875rem; color: var(--text-muted); }
        .budget-line-item .bli-amount { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
        .bli-del {
            background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9375rem; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
        }
        .bli-del:hover { color: var(--danger); background: var(--bg-hover); }

        /* Net Worth Tracker */
        .networth-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 22px;
        }
        .networth-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            text-align: center;
        }
        .nw-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 6px; }
        .nw-value { font-size: 1.25rem; font-weight: 700; }
        .networth-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        @media (max-width: 700px) { .networth-columns { grid-template-columns: 1fr; } }

        /* Recurring Bills */
        .bill-row {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 8px;
        }
        .bill-row.paid { opacity: 0.55; }
        .bill-row.paid .bill-name { text-decoration: line-through; }
        .bill-main { flex: 1; min-width: 0; }
        .bill-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
        .bill-meta { font-size: 0.6875rem; color: var(--text-muted); }
        .bill-amount { font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }

        .budget-line-add {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto;
            gap: 10px;
            align-items: center;
        }

        .budget-summary-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.875rem;
        }
        .budget-summary-row:last-child { border-bottom: none; }
        .budget-summary-row .label { color: var(--text-secondary); }
        .budget-summary-row .value { font-weight: 700; color: var(--text-primary); }
        .budget-summary-row.total .value { font-size: 1.125rem; }
        .budget-summary-row.positive .value { color: var(--success); }
        .budget-summary-row.negative .value { color: var(--danger); }

        .rule-split-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-top: 10px;
        }
        .rule-split-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }
        .rule-split-pct { font-size: 1.5rem; font-weight: 800; }
        .rule-split-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0; }
        .rule-split-amount { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
        .rule-split-actual { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 4px; }

        /* Budgeting systems picker */
        .budget-system-picker {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
        }
        .budget-system-card {
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .budget-system-card:hover { border-color: var(--border-light); background: var(--bg-hover); }
        .budget-system-card.active { border-color: var(--accent); background: var(--bg-hover); }
        .budget-system-icon { font-size: 1.375rem; margin-bottom: 6px; }
        .budget-system-name { font-weight: 700; font-size: 0.9375rem; margin-bottom: 6px; }
        .budget-system-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

        /* To-Do & Checklists */
        .checklist-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 18px;
        }
        .checklist-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
        }
        .checklist-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
        .checklist-title-input {
            border: none;
            background: none;
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 1rem;
            color: var(--text-primary);
            padding: 4px 6px;
            border-radius: 6px;
            width: 100%;
        }
        .checklist-title-input:hover, .checklist-title-input:focus { background: var(--bg-hover); outline: none; }
        .checklist-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 12px 0;
            max-height: 240px;
            overflow-y: auto;
        }
        .checklist-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: var(--bg-elevated);
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 0.8125rem;
        }
        .checklist-item.done .checklist-item-check span,
        .checklist-item.done span { text-decoration: line-through; color: var(--text-muted); }
        .checklist-item-check {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            flex: 1;
        }
        .checklist-item-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

        /* Editable to-do item row (checkbox + inline-editable text input) */
        .checklist-item-check-box { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
        .checklist-item-text-input {
            flex: 1;
            border: none;
            background: none;
            font-family: inherit;
            font-size: 0.8125rem;
            color: var(--text-primary);
            padding: 4px 6px;
            border-radius: 6px;
            min-width: 0;
        }
        .checklist-item-text-input:hover { background: var(--bg-hover); }
        .checklist-item-text-input:focus { background: var(--bg-card); outline: 2px solid var(--accent); }
        .checklist-item.done .checklist-item-text-input { text-decoration: line-through; color: var(--text-muted); }

        /* SWOT & Eisenhower */
        .swot-grid, .eisenhower-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        @media (max-width: 700px) {
            .swot-grid, .eisenhower-grid { grid-template-columns: 1fr; }
        }
        .swot-quadrant, .eisenhower-quadrant {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px;
            border-top: 4px solid var(--accent);
        }
        .swot-strengths, .eh-do { border-top-color: var(--success); }
        .swot-weaknesses, .eh-delegate { border-top-color: var(--warning); }
        .swot-opportunities, .eh-schedule { border-top-color: var(--info); }
        .swot-threats, .eh-eliminate { border-top-color: var(--danger); }
        .swot-quadrant-title {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 0.9375rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .swot-hint { font-size: 0.625rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
        .swot-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-height: 40px;
            margin-bottom: 12px;
        }
        .swot-add { display: flex; gap: 8px; }
        .swot-add .form-input { flex: 1; }

        .result-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
        }
        .result-headline { font-size: 1.375rem; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
        .result-sub { font-size: 0.8125rem; color: var(--text-secondary); }

        .debt-order-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .debt-order-item:last-child { border-bottom: none; }
        .debt-order-rank {
            width: 26px; height: 26px; border-radius: 50%;
            background: var(--accent); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
        }

        /* ============================================================
           UI LAYOUT PRESETS — 10 structural variants for sidebar + content.
           Applied as a class on <body>. Default (no class) = Classic Left.
           ============================================================ */

        /* 2. Right Dock — sidebar mirrored to the right edge */
        body.layout-right .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
        body.layout-right .main { margin-left: 0; margin-right: 260px; }
        @media (max-width: 1024px) { body.layout-right .sidebar { right: 0; left: auto; transform: translateX(100%); } body.layout-right .sidebar.open { transform: translateX(0); } body.layout-right .main { margin-right: 0; } }

        /* 3. Compact Rail — icon-only 76px sidebar, left */
        body.layout-rail .sidebar { width: 76px; }
        body.layout-rail .main { margin-left: 76px; }
        body.layout-rail .logo-text, body.layout-rail .logo-caption, body.layout-rail .nav-label { display: none; }
        body.layout-rail .nav-item { justify-content: center; font-size: 0; padding: 12px 0; }
        body.layout-rail .nav-icon { font-size: 1.25rem; }
        body.layout-rail .sidebar-header { display: flex; justify-content: center; padding: 20px 8px; }

        /* 4. Icon Rail Right — same as rail, mirrored to the right */
        body.layout-rail-right .sidebar { width: 76px; left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
        body.layout-rail-right .main { margin-left: 0; margin-right: 76px; }
        body.layout-rail-right .logo-text, body.layout-rail-right .logo-caption, body.layout-rail-right .nav-label { display: none; }
        body.layout-rail-right .nav-item { justify-content: center; font-size: 0; padding: 12px 0; }
        body.layout-rail-right .nav-icon { font-size: 1.25rem; }
        body.layout-rail-right .sidebar-header { display: flex; justify-content: center; padding: 20px 8px; }

        /* 5. Floating Sidebar Card — detached rounded panel with margin + shadow */
        body.layout-floating .sidebar { left: 14px; top: 14px; height: calc(100vh - 28px); border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,0.16); }
        body.layout-floating .main { margin-left: 292px; }
        @media (max-width: 1024px) { body.layout-floating .main { margin-left: 0; } }

        /* 6. Wide Command Sidebar — extra-wide, heavier divider */
        body.layout-wide .sidebar { width: 320px; border-right-width: 2px; }
        body.layout-wide .main { margin-left: 320px; }
        body.layout-wide .nav-item { padding: 12px 18px; font-size: 0.9375rem; }
        @media (max-width: 1024px) { body.layout-wide .main { margin-left: 0; } }

        /* 7. Boxed Centered Canvas — classic sidebar, content constrained + centered */
        body.layout-boxed .main { max-width: 1180px; margin-left: 260px; margin-right: auto; padding: 32px 40px; }
        @media (max-width: 1024px) { body.layout-boxed .main { margin-left: 0; } }

        /* 8. Full-Bleed Edge-to-Edge — classic sidebar, content runs to the viewport edge */
        body.layout-fullbleed .main { padding: 16px 16px 16px 20px; }
        body.layout-fullbleed .top-bar { margin-bottom: 20px; }

        /* 9. Sharp Brutalist — zero radius, thick borders, no soft shadows anywhere */
        body.layout-brutalist .sidebar,
        body.layout-brutalist .settings-card, body.layout-brutalist .stat-card, body.layout-brutalist .goal-card,
        body.layout-brutalist .habit-card, body.layout-brutalist .todo-item, body.layout-brutalist .modal-content,
        body.layout-brutalist .theme-swatch-v2, body.layout-brutalist .btn, body.layout-brutalist .form-input,
        body.layout-brutalist .login-card, body.layout-brutalist .vision-tag {
            border-radius: 0 !important;
            box-shadow: none !important;
            border-width: 2px !important;
        }
        body.layout-brutalist .btn-primary { box-shadow: 3px 3px 0 var(--text-primary) !important; }

        /* 10. Soft Glass Floating — translucent blurred floating sidebar + rounded glassy cards */
        body.layout-glass .sidebar {
            left: 14px; top: 14px; height: calc(100vh - 28px); border-radius: 24px;
            background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
            backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
            border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
            box-shadow: 0 20px 48px rgba(0,0,0,0.20);
        }
        body.layout-glass .main { margin-left: 292px; }
        body.layout-glass .settings-card, body.layout-glass .stat-card, body.layout-glass .goal-card,
        body.layout-glass .habit-card, body.layout-glass .modal-content {
            border-radius: 22px !important;
            background: color-mix(in srgb, var(--bg-card) 85%, transparent) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important;
        }
        @media (max-width: 1024px) { body.layout-glass .main { margin-left: 0; } }

        /* ===== Layout picker UI (Settings) ===== */
        .layout-picker {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
            margin-top: 10px;
        }
        .layout-swatch {
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 10px;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            transition: border-color 0.15s ease, transform 0.12s ease;
        }
        .layout-swatch:hover { transform: translateY(-1px); }
        .layout-swatch.active { border-color: var(--accent); }
        .lsw-thumb {
            position: relative;
            width: 100%;
            height: 70px;
            border-radius: 6px;
            background: var(--bg);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        .lsw-bar { position: absolute; background: var(--accent); opacity: 0.85; }
        .lsw-block { position: absolute; background: var(--border-light); border-radius: 2px; }
        .lsw-name { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); }
        .lsw-desc { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.35; }

        @media (max-width: 560px) {
            .layout-picker { grid-template-columns: repeat(2, 1fr); }
        }

        /* ===== Icon Pack picker (Settings) ===== */
        .icon-pack-tier-heading {
            font-family: var(--font-heading);
            font-size: 0.8125rem;
            font-weight: 800;
            color: var(--text-primary);
            margin: 18px 0 10px;
        }
        .icon-pack-tier-heading:first-child { margin-top: 4px; }
        .icon-pack-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
        }
        .icon-pack-swatch {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 12px 8px;
            cursor: pointer;
            font-family: inherit;
            transition: border-color 0.15s ease, transform 0.12s ease;
        }
        .icon-pack-swatch:hover { transform: translateY(-1px); }
        .icon-pack-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
        .icon-pack-preview-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            z-index: 2;
            transition: background 0.15s ease, transform 0.1s ease;
        }
        .icon-pack-preview-btn:hover { background: var(--accent); transform: scale(1.1); }
        .icon-pack-preview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            align-items: center;
            justify-items: center;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 8px;
            width: 100%;
        }
        .icon-pack-preview .emoji-icon { height: 1.2em; width: 1.2em; }
        .icon-pack-name { font-size: 0.6875rem; font-weight: 700; color: var(--text-primary); text-align: center; }

        /* Full pack preview modal (WhatsApp-style: every icon in the pack) */
        .icon-pack-full-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
            gap: 8px;
            max-height: 50vh;
            overflow-y: auto;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px;
        }
        .icon-pack-full-grid-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
        }
        .icon-pack-full-grid-cell .emoji-icon { height: 1.5em; width: 1.5em; }

        @media (max-width: 560px) {
            .icon-pack-grid { grid-template-columns: repeat(2, 1fr); }
            .icon-pack-full-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }
        }



        .systems-page-tab-panel { display: none; }
        .systems-page-tab-panel.active { display: block; }
        /* In basic mode the top tab bar is hidden (tier-advanced), so fall back to showing every panel stacked, same as before tabs existed */
        .settings-page-tab-panel { display: none; }
        .settings-page-tab-panel.active { display: block; }
        .calendar-page-tab-panel { display: none; }
        .calendar-page-tab-panel.active { display: block; }
        .todos-page-tab-panel { display: none; }
        .todos-page-tab-panel.active { display: block; }
        .tm-mini-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 0.8125rem;
            cursor: pointer;
        }
        .tm-mini-card.tm-done { opacity: 0.6; text-decoration: line-through; }
        .tm-list-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.8125rem;
        }
        .tm-list-row:last-child { border-bottom: none; }
        .tm-list-row.tm-done { opacity: 0.55; }
        .tm-batch-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
        }
        .tm-leak-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 6px 0;
            font-size: 0.8125rem;
            cursor: pointer;
        }
        .tm-leak-row input { margin-top: 3px; }
        .identity-page-tab-panel { display: none; }
        .identity-page-tab-panel.active { display: block; }
        .vision-page-tab-panel { display: none; }
        .vision-page-tab-panel.active { display: block; }
        .goals-page-tab-panel { display: none; }
        .goals-page-tab-panel.active { display: block; }
        /* ===== Goals: Setting Goals Education tab ===== */
        .edu-jump-nav { display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0 18px; }
        .edu-jump { font-size: 0.6875rem; }
        .edu-content { max-width: 900px; }
        .edu-content .edu-author {
            display:flex; align-items:center; gap:10px;
            font-family: var(--font-heading); font-size: 1.125rem; font-weight: 800;
            color: var(--text-primary); margin: 28px 0 10px; scroll-margin-top: 20px;
        }
        .edu-content .edu-num {
            flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
            background: var(--accent); color: #fff; font-size: 0.75rem;
            display:inline-flex; align-items:center; justify-content:center;
        }
        .edu-content .edu-sub {
            font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700;
            color: var(--text-primary); margin: 20px 0 8px;
            display:flex; align-items:center; gap:8px;
        }
        .edu-content .edu-step {
            flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
            background: var(--bg-hover); color: var(--accent-dark);
            border: 1px solid var(--border);
            font-size: 0.6875rem; font-weight: 800;
            display:inline-flex; align-items:center; justify-content:center;
        }
        .edu-content .edu-blocklabel {
            font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; color: var(--text-muted); margin: 14px 0 6px;
        }
        .edu-content .edu-p { font-size: 0.8125rem; line-height: 1.7; color: var(--text-secondary); margin: 0 0 10px; }
        .edu-content .edu-list { list-style: none; padding: 0; margin: 0 0 12px; }
        .edu-content .edu-list li {
            position: relative; font-size: 0.8125rem; line-height: 1.7;
            color: var(--text-secondary); padding-left: 14px; margin-bottom: 8px;
        }
        .edu-content .edu-list li::before {
            content: ''; position: absolute; left: 0; top: 0.65em;
            width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
        }
        .edu-content .edu-list-num li { padding-left: 0; display:flex; gap:8px; align-items:flex-start; }
        .edu-content .edu-list-num li::before { display:none; }
        .edu-content .edu-key { color: var(--text-primary); }
        .edu-content .edu-diagram {
            font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.6875rem; line-height: 1.5;
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: 10px; padding: 14px; margin: 0 0 14px;
            overflow-x: auto; white-space: pre; color: var(--text-primary);
        }

        .edu-content .edu-fig {
            margin: 0 0 18px; padding: 12px 12px 6px;
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: 12px; overflow-x: auto;
        }
        .edu-content .edu-figcap {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .edu-content .edu-figkind {
            font-size: 0.625rem; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; color: var(--accent-dark, var(--accent));
            background: var(--bg-hover); border: 1px solid var(--border);
            border-radius: 999px; padding: 2px 8px;
        }
        .edu-content .edu-svg { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; }
        .edu-content .edu-rule { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }