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

        :root {
            --font-heading: "Playfair Display", Georgia, serif;
            --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
            --bg-primary: #ffffff;
            --bg-secondary: #fbfcfe;
            --bg-hover: #f3f5f8;
            --bg-elevated: #ffffff;
            --text-primary: #2a2621;
            --text-secondary: #5f6670;
            --text-muted: #87909d;
            --border: rgba(22, 30, 45, 0.13);
            --accent: #d8c4a1;
            --accent-rgb: 216, 196, 161;
            --accent-strong: #b79a73;
            --accent-soft: rgba(216, 196, 161, 0.12);
            --sidebar-width: 300px;
            --sidebar-collapsed-width: 76px;
            --editor-bg: #ffffff;
            --code-bg: #f8fafc;
            --status-bar-height: 30px;
            --glass-01: rgba(255, 255, 255, 0.94);
            --glass-02: rgba(252, 253, 255, 0.97);
            --glass-border: rgba(22, 30, 45, 0.12);
            --glass-blur: 22px;
            --shadow-soft: 0 14px 32px rgba(22, 30, 45, 0.08);
            --shadow-soft-lg: 0 24px 52px rgba(22, 30, 45, 0.12);
            --neumo-bg: #ffffff;
            --neumo-shadow-light: rgba(255, 255, 255, 0.85);
            --neumo-shadow-dark: rgba(22, 30, 45, 0.12);
            --neumo-radius: 14px;
            --neumo-offset: 8px;
            --neumo-inset-dark: rgba(22, 30, 45, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.8);
            /* Surface tokens: consistent bg/border for components in both themes */
            --surface-bg: rgba(22, 30, 45, 0.03);
            --surface-bg-hover: rgba(22, 30, 45, 0.06);
            --surface-bg-active: rgba(22, 30, 45, 0.08);
            --surface-border: rgba(22, 30, 45, 0.10);
            --surface-border-strong: rgba(22, 30, 45, 0.16);
            --surface-bg-elevated: rgba(22, 30, 45, 0.02);
            --surface-inset: rgba(22, 30, 45, 0.04);
            --code-inline-bg: rgba(22, 30, 45, 0.06);
            --code-block-bg: rgba(22, 30, 45, 0.04);
            --sidebar-bg: var(--glass-01);
            --button-bg: var(--surface-bg);
            --button-bg-hover: var(--surface-bg-hover);
            --button-border: var(--surface-border);
            --button-text: var(--text-primary);
            --theme-gradient-start: var(--bg-primary);
            --theme-gradient-mid: var(--bg-secondary);
            --theme-gradient-end: var(--bg-primary);
            /* Approximate height of the top navigation (used for placing the floating toolbar) */
            --top-nav-height: 88px;
            --top-nav-height-mobile: 64px;
            --radius: 18px;
            --radius-lg: 28px;
            --radius-pill: 999px;
            --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
            --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        @font-face {
            font-family: "Dune Rise";
            src:
                local("Dune Rise"),
                local("Dune_Rise"),
                url("assets/fonts/DuneRise-Regular.woff2") format("woff2"),
                url("assets/fonts/DuneRise-Regular.woff") format("woff");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

            .toolbar-time-widget {
                font-variant-numeric: tabular-nums;
                font-feature-settings: "tnum";
            }

        /* Theme */
        [data-theme="dark"] {
            --bg-primary: #1a1d22;
            --bg-secondary: #232831;
            --bg-hover: #2c323d;
            --bg-elevated: #262b33;
            --text-primary: #f2ede4;
            --text-secondary: #c7beb3;
            --text-muted: #9e968c;
            --border: rgba(255, 255, 255, 0.08);
            --accent: #d8c4a1;
            --accent-rgb: 216, 196, 161;
            --accent-strong: #b79a73;
            --accent-soft: rgba(var(--accent-rgb), 0.14);
            --editor-bg: #181c22;
            --code-bg: #20252d;
            --glass-01: rgba(29, 33, 40, 0.58);
            --glass-02: rgba(36, 41, 49, 0.72);
            --glass-border: rgba(255, 255, 255, 0.08);
            --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.34);
            --shadow-soft-lg: 0 28px 56px rgba(0, 0, 0, 0.4);
            --neumo-bg: #1d2127;
            --neumo-shadow-light: rgba(255, 255, 255, 0.035);
            --neumo-shadow-dark: rgba(0, 0, 0, 0.48);
            --neumo-inset-dark: rgba(0, 0, 0, 0.5);
            --neumo-inset-light: rgba(255, 255, 255, 0.06);
            /* Surface tokens for dark mode */
            --surface-bg: rgba(255, 255, 255, 0.03);
            --surface-bg-hover: rgba(255, 255, 255, 0.06);
            --surface-bg-active: rgba(255, 255, 255, 0.10);
            --surface-border: rgba(255, 255, 255, 0.08);
            --surface-border-strong: rgba(255, 255, 255, 0.14);
            --surface-bg-elevated: rgba(255, 255, 255, 0.02);
            --surface-inset: rgba(255, 255, 255, 0.04);
            --code-inline-bg: rgba(255, 255, 255, 0.08);
            --code-block-bg: rgba(0, 0, 0, 0.25);
            --sidebar-bg: rgba(19, 22, 27, 0.96);
            --button-bg: rgba(255, 255, 255, 0.06);
            --button-bg-hover: rgba(255, 255, 255, 0.1);
            --button-border: rgba(255, 255, 255, 0.12);
            --button-text: var(--text-primary);
        }

        [data-theme="botanical"] {
            --bg-primary: #f6fbf4;
            --bg-secondary: #edf6e9;
            --bg-hover: #e2efdc;
            --bg-elevated: #fbfef9;
            --text-primary: #1f3327;
            --text-secondary: #3f5b4a;
            --text-muted: #6f8778;
            --border: rgba(44, 74, 58, 0.16);
            --accent: #3f8f5a;
            --accent-rgb: 63, 143, 90;
            --accent-strong: #2f7145;
            --accent-soft: rgba(63, 143, 90, 0.15);
            --editor-bg: #fcfffb;
            --code-bg: #eaf4ea;
            --glass-01: rgba(239, 247, 238, 0.9);
            --glass-02: rgba(245, 251, 244, 0.94);
            --glass-border: rgba(44, 74, 58, 0.16);
            --shadow-soft: 0 14px 30px rgba(31, 51, 39, 0.1);
            --shadow-soft-lg: 0 24px 52px rgba(31, 51, 39, 0.14);
            --neumo-bg: #f4faf1;
            --neumo-shadow-light: rgba(255, 255, 255, 0.88);
            --neumo-shadow-dark: rgba(31, 51, 39, 0.12);
            --neumo-inset-dark: rgba(31, 51, 39, 0.11);
            --neumo-inset-light: rgba(255, 255, 255, 0.86);
            --surface-bg: rgba(31, 51, 39, 0.04);
            --surface-bg-hover: rgba(31, 51, 39, 0.07);
            --surface-bg-active: rgba(31, 51, 39, 0.11);
            --surface-border: rgba(31, 51, 39, 0.14);
            --surface-border-strong: rgba(31, 51, 39, 0.2);
            --surface-bg-elevated: rgba(31, 51, 39, 0.025);
            --surface-inset: rgba(31, 51, 39, 0.05);
            --code-inline-bg: rgba(63, 143, 90, 0.12);
            --code-block-bg: rgba(31, 51, 39, 0.05);
        }

        [data-theme="editorial"] {
            --bg-primary: #fdfbf7;
            --bg-secondary: #f4efe7;
            --bg-hover: #ece5da;
            --bg-elevated: #fffcf7;
            --text-primary: #2d2720;
            --text-secondary: #5d5245;
            --text-muted: #8a7b6a;
            --border: rgba(54, 44, 33, 0.14);
            --accent: #9d6c3b;
            --accent-rgb: 157, 108, 59;
            --accent-strong: #7c5327;
            --accent-soft: rgba(157, 108, 59, 0.14);
            --editor-bg: #fffdfa;
            --code-bg: #f2ede5;
            --glass-01: rgba(248, 242, 233, 0.88);
            --glass-02: rgba(252, 247, 240, 0.94);
            --glass-border: rgba(54, 44, 33, 0.14);
            --shadow-soft: 0 14px 30px rgba(45, 39, 32, 0.09);
            --shadow-soft-lg: 0 24px 50px rgba(45, 39, 32, 0.14);
            --neumo-bg: #f8f2ea;
            --neumo-shadow-light: rgba(255, 255, 255, 0.88);
            --neumo-shadow-dark: rgba(45, 39, 32, 0.11);
            --neumo-inset-dark: rgba(45, 39, 32, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.86);
            --surface-bg: rgba(45, 39, 32, 0.04);
            --surface-bg-hover: rgba(45, 39, 32, 0.07);
            --surface-bg-active: rgba(45, 39, 32, 0.11);
            --surface-border: rgba(45, 39, 32, 0.14);
            --surface-border-strong: rgba(45, 39, 32, 0.2);
            --surface-bg-elevated: rgba(45, 39, 32, 0.025);
            --surface-inset: rgba(45, 39, 32, 0.05);
            --code-inline-bg: rgba(157, 108, 59, 0.12);
            --code-block-bg: rgba(45, 39, 32, 0.05);
        }

        [data-theme="luxury"] {
            --bg-primary: #fbf7ef;
            --bg-secondary: #f2eadb;
            --bg-hover: #e7dbc8;
            --bg-elevated: #fffaf2;
            --text-primary: #2b2114;
            --text-secondary: #594734;
            --text-muted: #88745f;
            --border: rgba(64, 48, 30, 0.16);
            --accent: #c08a2f;
            --accent-rgb: 192, 138, 47;
            --accent-strong: #9f6f1d;
            --accent-soft: rgba(192, 138, 47, 0.17);
            --editor-bg: #fffaf1;
            --code-bg: #f2e7d3;
            --glass-01: rgba(246, 236, 220, 0.88);
            --glass-02: rgba(251, 243, 229, 0.94);
            --glass-border: rgba(64, 48, 30, 0.16);
            --shadow-soft: 0 14px 30px rgba(43, 33, 20, 0.1);
            --shadow-soft-lg: 0 24px 52px rgba(43, 33, 20, 0.16);
            --neumo-bg: #f8efe1;
            --neumo-shadow-light: rgba(255, 255, 255, 0.89);
            --neumo-shadow-dark: rgba(43, 33, 20, 0.12);
            --neumo-inset-dark: rgba(43, 33, 20, 0.11);
            --neumo-inset-light: rgba(255, 255, 255, 0.85);
            --surface-bg: rgba(43, 33, 20, 0.045);
            --surface-bg-hover: rgba(43, 33, 20, 0.075);
            --surface-bg-active: rgba(43, 33, 20, 0.12);
            --surface-border: rgba(43, 33, 20, 0.15);
            --surface-border-strong: rgba(43, 33, 20, 0.22);
            --surface-bg-elevated: rgba(43, 33, 20, 0.03);
            --surface-inset: rgba(43, 33, 20, 0.055);
            --code-inline-bg: rgba(192, 138, 47, 0.14);
            --code-block-bg: rgba(43, 33, 20, 0.055);
        }

        [data-theme="sepia"] {
            --bg-primary: #f7f1e6;
            --bg-secondary: #eee3cf;
            --bg-hover: #e3d3b7;
            --bg-elevated: #fbf6ec;
            --text-primary: #3a2f22;
            --text-secondary: #66543f;
            --text-muted: #8f7c66;
            --border: rgba(73, 56, 39, 0.15);
            --accent: #a86a3f;
            --accent-rgb: 168, 106, 63;
            --accent-strong: #844b28;
            --accent-soft: rgba(168, 106, 63, 0.15);
            --editor-bg: #fcf7ef;
            --code-bg: #f0e2cd;
            --glass-01: rgba(242, 233, 218, 0.88);
            --glass-02: rgba(248, 241, 228, 0.94);
            --glass-border: rgba(73, 56, 39, 0.15);
            --shadow-soft: 0 14px 30px rgba(58, 47, 34, 0.1);
            --shadow-soft-lg: 0 24px 50px rgba(58, 47, 34, 0.15);
            --neumo-bg: #f3ead8;
            --neumo-shadow-light: rgba(255, 255, 255, 0.88);
            --neumo-shadow-dark: rgba(58, 47, 34, 0.12);
            --neumo-inset-dark: rgba(58, 47, 34, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.84);
            --surface-bg: rgba(58, 47, 34, 0.045);
            --surface-bg-hover: rgba(58, 47, 34, 0.075);
            --surface-bg-active: rgba(58, 47, 34, 0.12);
            --surface-border: rgba(58, 47, 34, 0.15);
            --surface-border-strong: rgba(58, 47, 34, 0.21);
            --surface-bg-elevated: rgba(58, 47, 34, 0.03);
            --surface-inset: rgba(58, 47, 34, 0.055);
            --code-inline-bg: rgba(168, 106, 63, 0.13);
            --code-block-bg: rgba(58, 47, 34, 0.055);
        }

        [data-theme="ocean"] {
            --bg-primary: #eef7fb;
            --bg-secondary: #e1f0f7;
            --bg-hover: #d4e8f3;
            --bg-elevated: #f6fbff;
            --text-primary: #173447;
            --text-secondary: #3e6278;
            --text-muted: #68899d;
            --border: rgba(33, 76, 103, 0.15);
            --accent: #2f82a7;
            --accent-rgb: 47, 130, 167;
            --accent-strong: #216787;
            --accent-soft: rgba(47, 130, 167, 0.16);
            --editor-bg: #f8fcff;
            --code-bg: #e4f2f9;
            --glass-01: rgba(228, 243, 250, 0.88);
            --glass-02: rgba(236, 248, 253, 0.94);
            --glass-border: rgba(33, 76, 103, 0.16);
            --shadow-soft: 0 14px 30px rgba(23, 52, 71, 0.1);
            --shadow-soft-lg: 0 24px 50px rgba(23, 52, 71, 0.15);
            --neumo-bg: #eaf4f9;
            --neumo-shadow-light: rgba(255, 255, 255, 0.9);
            --neumo-shadow-dark: rgba(23, 52, 71, 0.11);
            --neumo-inset-dark: rgba(23, 52, 71, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.88);
            --surface-bg: rgba(23, 52, 71, 0.04);
            --surface-bg-hover: rgba(23, 52, 71, 0.07);
            --surface-bg-active: rgba(23, 52, 71, 0.11);
            --surface-border: rgba(23, 52, 71, 0.14);
            --surface-border-strong: rgba(23, 52, 71, 0.2);
            --surface-bg-elevated: rgba(23, 52, 71, 0.025);
            --surface-inset: rgba(23, 52, 71, 0.05);
            --code-inline-bg: rgba(47, 130, 167, 0.13);
            --code-block-bg: rgba(23, 52, 71, 0.05);
        }

        [data-theme="sunrise"] {
            --bg-primary: #fff6f0;
            --bg-secondary: #fbe8dd;
            --bg-hover: #f5d8c7;
            --bg-elevated: #fffaf6;
            --text-primary: #40271f;
            --text-secondary: #735145;
            --text-muted: #9b7366;
            --border: rgba(84, 52, 41, 0.14);
            --accent: #d06f41;
            --accent-rgb: 208, 111, 65;
            --accent-strong: #af562c;
            --accent-soft: rgba(208, 111, 65, 0.16);
            --editor-bg: #fffbf8;
            --code-bg: #f6e4d8;
            --glass-01: rgba(251, 236, 226, 0.88);
            --glass-02: rgba(255, 244, 236, 0.94);
            --glass-border: rgba(84, 52, 41, 0.14);
            --shadow-soft: 0 14px 30px rgba(64, 39, 31, 0.1);
            --shadow-soft-lg: 0 24px 50px rgba(64, 39, 31, 0.15);
            --neumo-bg: #fcede2;
            --neumo-shadow-light: rgba(255, 255, 255, 0.9);
            --neumo-shadow-dark: rgba(64, 39, 31, 0.11);
            --neumo-inset-dark: rgba(64, 39, 31, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.86);
            --surface-bg: rgba(64, 39, 31, 0.04);
            --surface-bg-hover: rgba(64, 39, 31, 0.07);
            --surface-bg-active: rgba(64, 39, 31, 0.11);
            --surface-border: rgba(64, 39, 31, 0.14);
            --surface-border-strong: rgba(64, 39, 31, 0.2);
            --surface-bg-elevated: rgba(64, 39, 31, 0.025);
            --surface-inset: rgba(64, 39, 31, 0.05);
            --code-inline-bg: rgba(208, 111, 65, 0.13);
            --code-block-bg: rgba(64, 39, 31, 0.05);
        }

        [data-theme="graphite"] {
            --bg-primary: #f3f4f6;
            --bg-secondary: #e7e9ee;
            --bg-hover: #d9dde6;
            --bg-elevated: #f8f9fb;
            --text-primary: #1f2733;
            --text-secondary: #4c5d72;
            --text-muted: #73849a;
            --border: rgba(36, 54, 76, 0.15);
            --accent: #4e6a8a;
            --accent-rgb: 78, 106, 138;
            --accent-strong: #395571;
            --accent-soft: rgba(78, 106, 138, 0.15);
            --editor-bg: #fafbfd;
            --code-bg: #e7ebf2;
            --glass-01: rgba(234, 238, 244, 0.88);
            --glass-02: rgba(240, 243, 248, 0.94);
            --glass-border: rgba(36, 54, 76, 0.15);
            --shadow-soft: 0 14px 30px rgba(31, 39, 51, 0.09);
            --shadow-soft-lg: 0 24px 50px rgba(31, 39, 51, 0.14);
            --neumo-bg: #eef1f5;
            --neumo-shadow-light: rgba(255, 255, 255, 0.87);
            --neumo-shadow-dark: rgba(31, 39, 51, 0.11);
            --neumo-inset-dark: rgba(31, 39, 51, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.84);
            --surface-bg: rgba(31, 39, 51, 0.04);
            --surface-bg-hover: rgba(31, 39, 51, 0.07);
            --surface-bg-active: rgba(31, 39, 51, 0.11);
            --surface-border: rgba(31, 39, 51, 0.14);
            --surface-border-strong: rgba(31, 39, 51, 0.2);
            --surface-bg-elevated: rgba(31, 39, 51, 0.025);
            --surface-inset: rgba(31, 39, 51, 0.05);
            --code-inline-bg: rgba(78, 106, 138, 0.12);
            --code-block-bg: rgba(31, 39, 51, 0.05);
        }

        [data-theme="aurora"] {
            --bg-primary: #f2fbfb;
            --bg-secondary: #e2f4f4;
            --bg-hover: #d4ebeb;
            --bg-elevated: #f9ffff;
            --text-primary: #173a39;
            --text-secondary: #3d6765;
            --text-muted: #68908d;
            --border: rgba(33, 78, 77, 0.15);
            --accent: #2d9f97;
            --accent-rgb: 45, 159, 151;
            --accent-strong: #1f7f79;
            --accent-soft: rgba(45, 159, 151, 0.16);
            --editor-bg: #f9ffff;
            --code-bg: #e4f3f2;
            --glass-01: rgba(229, 245, 244, 0.88);
            --glass-02: rgba(237, 250, 249, 0.94);
            --glass-border: rgba(33, 78, 77, 0.15);
            --shadow-soft: 0 14px 30px rgba(23, 58, 57, 0.1);
            --shadow-soft-lg: 0 24px 50px rgba(23, 58, 57, 0.15);
            --neumo-bg: #eaf6f5;
            --neumo-shadow-light: rgba(255, 255, 255, 0.9);
            --neumo-shadow-dark: rgba(23, 58, 57, 0.11);
            --neumo-inset-dark: rgba(23, 58, 57, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.87);
            --surface-bg: rgba(23, 58, 57, 0.04);
            --surface-bg-hover: rgba(23, 58, 57, 0.07);
            --surface-bg-active: rgba(23, 58, 57, 0.11);
            --surface-border: rgba(23, 58, 57, 0.14);
            --surface-border-strong: rgba(23, 58, 57, 0.2);
            --surface-bg-elevated: rgba(23, 58, 57, 0.025);
            --surface-inset: rgba(23, 58, 57, 0.05);
            --code-inline-bg: rgba(45, 159, 151, 0.13);
            --code-block-bg: rgba(23, 58, 57, 0.05);
        }

        [data-theme="rosewater"] {
            --bg-primary: #fff5f7;
            --bg-secondary: #fbe7ec;
            --bg-hover: #f4d7df;
            --bg-elevated: #fffafd;
            --text-primary: #402431;
            --text-secondary: #6f4a5d;
            --text-muted: #946f81;
            --border: rgba(88, 52, 70, 0.14);
            --accent: #c56582;
            --accent-rgb: 197, 101, 130;
            --accent-strong: #a24a69;
            --accent-soft: rgba(197, 101, 130, 0.16);
            --editor-bg: #fffbfc;
            --code-bg: #f6e3ea;
            --glass-01: rgba(251, 234, 241, 0.88);
            --glass-02: rgba(255, 243, 247, 0.94);
            --glass-border: rgba(88, 52, 70, 0.14);
            --shadow-soft: 0 14px 30px rgba(64, 36, 49, 0.1);
            --shadow-soft-lg: 0 24px 50px rgba(64, 36, 49, 0.15);
            --neumo-bg: #fcedf1;
            --neumo-shadow-light: rgba(255, 255, 255, 0.9);
            --neumo-shadow-dark: rgba(64, 36, 49, 0.11);
            --neumo-inset-dark: rgba(64, 36, 49, 0.1);
            --neumo-inset-light: rgba(255, 255, 255, 0.86);
            --surface-bg: rgba(64, 36, 49, 0.04);
            --surface-bg-hover: rgba(64, 36, 49, 0.07);
            --surface-bg-active: rgba(64, 36, 49, 0.11);
            --surface-border: rgba(64, 36, 49, 0.14);
            --surface-border-strong: rgba(64, 36, 49, 0.2);
            --surface-bg-elevated: rgba(64, 36, 49, 0.025);
            --surface-inset: rgba(64, 36, 49, 0.05);
            --code-inline-bg: rgba(197, 101, 130, 0.13);
            --code-block-bg: rgba(64, 36, 49, 0.05);
        }

        [data-theme="dune"] {
            --font-heading: "Dune Rise", "Cinzel", "Playfair Display", serif;
            --bg-primary: #1a120d;
            --bg-secondary: #281b14;
            --bg-hover: #3a271b;
            --bg-elevated: #231811;
            --text-primary: #f3e7d2;
            --text-secondary: #c7b79d;
            --text-muted: #9f8e75;
            --border: rgba(238, 206, 149, 0.16);
            --accent: #d4ad73;
            --accent-rgb: 212, 173, 115;
            --accent-strong: #be904e;
            --accent-soft: rgba(212, 173, 115, 0.18);
            --editor-bg: #20150f;
            --code-bg: #2a1d14;
            --glass-01: rgba(48, 33, 24, 0.68);
            --glass-02: rgba(40, 28, 20, 0.76);
            --glass-border: rgba(238, 206, 149, 0.14);
            --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.38);
            --shadow-soft-lg: 0 24px 50px rgba(0, 0, 0, 0.46);
            --neumo-bg: #231811;
            --neumo-shadow-light: rgba(255, 255, 255, 0.04);
            --neumo-shadow-dark: rgba(0, 0, 0, 0.56);
            --neumo-inset-dark: rgba(0, 0, 0, 0.54);
            --neumo-inset-light: rgba(255, 255, 255, 0.06);
            --surface-bg: rgba(255, 233, 194, 0.05);
            --surface-bg-hover: rgba(255, 233, 194, 0.1);
            --surface-bg-active: rgba(255, 233, 194, 0.16);
            --surface-border: rgba(238, 206, 149, 0.17);
            --surface-border-strong: rgba(238, 206, 149, 0.27);
            --surface-bg-elevated: rgba(255, 233, 194, 0.035);
            --surface-inset: rgba(255, 233, 194, 0.07);
            --code-inline-bg: rgba(212, 173, 115, 0.2);
            --code-block-bg: rgba(0, 0, 0, 0.25);
            --sidebar-bg: rgba(39, 27, 20, 0.92);
            --button-bg: rgba(212, 173, 115, 0.2);
            --button-bg-hover: rgba(212, 173, 115, 0.28);
            --button-border: rgba(238, 206, 149, 0.34);
            --button-text: #f5e8d3;
        }

        /* Neumorphic utility classes and defaults */
        /* These provide soft shadows and rounded surfaces for a gentle "neumorphism" look. */
        .neumo-card {
            background: var(--neumo-bg);
            border-radius: var(--neumo-radius);
            box-shadow: 8px 8px 18px var(--neumo-shadow-dark), -8px -8px 18px var(--neumo-shadow-light);
            border: 1px solid var(--border);
        }

        .neumo-btn {
            background: var(--neumo-bg);
            border-radius: var(--radius-pill);
            padding: 8px 14px;
            box-shadow: 6px 6px 14px var(--neumo-shadow-dark), -6px -6px 14px var(--neumo-shadow-light);
            border: 1px solid var(--border);
            color: var(--text-primary);
            cursor: pointer;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }

        .neumo-btn:hover {
            transform: translateY(-1px);
        }

        .neumo-btn:active {
            transform: translateY(0);
            box-shadow: inset 3px 3px 7px var(--neumo-inset-dark), inset -3px -3px 7px var(--neumo-shadow-light);
        }

        .neumo-input {
            background: var(--neumo-bg);
            border-radius: 12px;
            padding: 10px 12px;
            box-shadow: inset 3px 3px 6px var(--neumo-inset-dark), inset -3px -3px 6px var(--neumo-inset-light);
            border: 1px solid var(--border);
            color: var(--text-primary);
            outline: none;
            transition: box-shadow var(--transition-fast), transform var(--transition-fast);
        }

        .neumo-input:focus {
            box-shadow: inset 2px 2px 4px var(--neumo-inset-dark), inset -2px -2px 4px var(--neumo-inset-light), 0 0 0 3px var(--accent-soft);
        }

        /* Theme native select popups so open dropdown menus match app theme */
        select {
            color: var(--text-primary);
            background-color: var(--bg-elevated);
            border-color: var(--border);
            color-scheme: light;
        }

        [data-theme="dark"] select,
        [data-theme="dune"] select,
        [data-theme="tokyo-night"] select,
        [data-theme="dracula"] select,
        [data-theme="nord"] select,
        [data-theme="monokai"] select,
        [data-theme="gruvbox"] select,
        [data-theme="solarized-dark"] select,
        [data-theme="one-dark"] select,
        [data-theme="midnight-blue"] select,
        [data-theme="ocean-dark"] select {
            color-scheme: dark;
            background-color: rgba(255, 255, 255, 0.04);
        }

        select option,
        select optgroup {
            background: var(--bg-elevated);
            color: var(--text-primary);
        }

        select option:disabled {
            color: var(--text-muted);
        }

        /* Custom animated select component */
        .nf-select {
            position: relative;
            display: inline-block;
            min-width: 0;
            vertical-align: middle;
        }

        .nf-select.nf-select--full {
            width: 100%;
        }

        .nf-select.nf-select--flex {
            flex: 1;
        }

        .nf-select-native {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
        }

        .nf-select-trigger {
            width: 100%;
            min-height: 42px;
            border-radius: 16px;
            border: 1px solid var(--glass-border, var(--border));
            background: var(--glass-01);
            color: var(--text-primary);
            font: inherit;
            text-align: left;
            padding: 10px 38px 10px 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
            box-shadow: 0 8px 18px rgba(22, 30, 45, 0.08);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        .nf-select:not(.is-disabled) .nf-select-trigger:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(22, 30, 45, 0.12);
        }

        .nf-select-trigger:focus-visible {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 20px rgba(22, 30, 45, 0.12);
        }

        .nf-select.open .nf-select-trigger {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft), 0 12px 24px rgba(22, 30, 45, 0.14);
        }

        .nf-select-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nf-select-chevron {
            position: absolute;
            right: 14px;
            top: 50%;
            width: 10px;
            height: 10px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-60%) rotate(45deg);
            transition: transform var(--transition-fast);
            opacity: 0.9;
            pointer-events: none;
        }

        .nf-select.open .nf-select-chevron {
            transform: translateY(-40%) rotate(-135deg);
        }

        .nf-select-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            min-width: max(100%, 190px);
            max-height: 260px;
            overflow: auto;
            padding: 8px;
            border-radius: 16px;
            border: 1px solid var(--glass-border, var(--border));
            background: var(--bg-elevated);
            box-shadow: 0 18px 38px rgba(22, 30, 45, 0.18);
            z-index: 2200;
            opacity: 0;
            transform: translateY(-8px) scale(0.98);
            transform-origin: top center;
            pointer-events: none;
            transition: opacity var(--transition-fast), transform var(--transition-fast);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
        }

        .nf-select.open .nf-select-menu {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .nf-select-menu.is-open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .nf-select-menu--portal {
            position: fixed;
            right: auto;
            min-width: 190px;
            z-index: 13000;
        }

        .nf-select-menu--portal.nf-select-menu--open-up {
            transform-origin: bottom center;
            transform: translateY(8px) scale(0.98);
        }

        .nf-select-menu--portal.is-open.nf-select-menu--open-up {
            transform: translateY(0) scale(1);
        }

        .nf-select-group {
            padding: 7px 10px 6px;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            font-weight: 700;
        }

        .nf-select-option {
            width: 100%;
            border: 0;
            border-radius: 11px;
            background: transparent;
            color: var(--text-primary);
            font: inherit;
            font-size: 13px;
            text-align: left;
            padding: 8px 10px;
            cursor: pointer;
            display: block;
            transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }

        .nf-select-option:hover,
        .nf-select-option:focus-visible {
            outline: none;
            background: var(--accent-soft);
            color: var(--text-primary);
            transform: translateX(2px);
        }

        .nf-select-option.is-selected {
            background: var(--accent-soft);
            color: var(--text-primary);
            font-weight: 600;
        }

        .nf-select-option.is-disabled {
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.7;
        }

        .nf-select.is-disabled .nf-select-trigger {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .nf-select.nf-select--compact .nf-select-trigger {
            min-height: 28px;
            border-radius: 10px;
            padding: 4px 26px 4px 8px;
            font-size: 11px;
            box-shadow: none;
        }

        .nf-select.nf-select--compact .nf-select-chevron {
            right: 9px;
            width: 8px;
            height: 8px;
            border-width: 1.7px;
        }

        .nf-select.nf-select--compact .nf-select-menu {
            min-width: max(100%, 140px);
            border-radius: 10px;
            padding: 6px;
            max-height: 220px;
        }

        .nf-select.nf-select--compact .nf-select-option {
            font-size: 11px;
            padding: 6px 8px;
            border-radius: 8px;
        }

        #toolbarTimeControls .nf-select {
            min-width: 86px;
        }

        @media (prefers-reduced-motion: reduce) {
            .nf-select-trigger,
            .nf-select-menu,
            .nf-select-option,
            .nf-select-chevron {
                transition: none !important;
                transform: none !important;
            }
        }

        /* Custom animated date picker component */
        .nf-date {
            position: relative;
            display: inline-block;
            min-width: 0;
            vertical-align: middle;
        }

        .nf-date.nf-date--full {
            width: 100%;
        }

        .nf-date-native {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
        }

        .nf-date-trigger {
            width: 100%;
            min-height: 42px;
            border-radius: 16px;
            border: 1px solid var(--glass-border, var(--border));
            background: var(--glass-01);
            color: var(--text-primary);
            font: inherit;
            text-align: left;
            padding: 10px 40px 10px 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
            box-shadow: 0 8px 18px rgba(22, 30, 45, 0.08);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        .nf-date:not(.is-disabled) .nf-date-trigger:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(22, 30, 45, 0.12);
        }

        .nf-date-trigger:focus-visible {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 20px rgba(22, 30, 45, 0.12);
        }

        .nf-date.open .nf-date-trigger {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft), 0 12px 24px rgba(22, 30, 45, 0.14);
        }

        .nf-date-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nf-date-icon {
            position: absolute;
            right: 13px;
            top: 50%;
            width: 16px;
            height: 16px;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--text-secondary);
        }

        .nf-date-icon::before,
        .nf-date-icon::after {
            content: "";
            position: absolute;
            box-sizing: border-box;
        }

        .nf-date-icon::before {
            inset: 3px 1px 1px;
            border: 1.8px solid currentColor;
            border-radius: 4px;
        }

        .nf-date-icon::after {
            left: 3px;
            right: 3px;
            top: 1px;
            height: 4px;
            border-top: 2px solid currentColor;
            border-left: 2px solid currentColor;
            border-right: 2px solid currentColor;
            border-radius: 2px 2px 0 0;
        }

        .nf-date-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 280px;
            width: max(100%, 280px);
            padding: 10px;
            border-radius: 16px;
            border: 1px solid var(--glass-border, var(--border));
            background: var(--bg-elevated);
            box-shadow: 0 18px 38px rgba(22, 30, 45, 0.18);
            z-index: 2400;
            opacity: 0;
            transform: translateY(-8px) scale(0.98);
            transform-origin: top center;
            pointer-events: none;
            transition: opacity var(--transition-fast), transform var(--transition-fast);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
        }

        .nf-date.open .nf-date-panel {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .nf-date-panel.is-open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .nf-date-panel--portal {
            position: fixed;
            right: auto;
            z-index: 13020;
        }

        .nf-date-panel--portal.nf-date-panel--open-up {
            transform-origin: bottom center;
            transform: translateY(8px) scale(0.98);
        }

        .nf-date-panel--portal.is-open.nf-date-panel--open-up {
            transform: translateY(0) scale(1);
        }

        .nf-date.drop-up .nf-date-panel {
            top: auto;
            bottom: calc(100% + 8px);
            transform: translateY(8px) scale(0.98);
            transform-origin: bottom center;
        }

        .nf-date.drop-up.open .nf-date-panel {
            transform: translateY(0) scale(1);
        }

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

        .nf-date-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.01em;
        }

        .nf-date-nav {
            border: 1px solid var(--glass-border, var(--border));
            background: var(--glass-01);
            color: var(--text-primary);
            width: 28px;
            height: 28px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
        }

        .nf-date-nav:hover {
            background: var(--accent-soft);
            border-color: var(--accent);
            transform: translateY(-1px);
        }

        .nf-date-weekdays,
        .nf-date-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }

        .nf-date-weekday {
            text-align: center;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary);
            padding: 4px 0;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .nf-date-day {
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: var(--text-primary);
            height: 32px;
            font: inherit;
            font-size: 12px;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }

        .nf-date-day:hover,
        .nf-date-day:focus-visible {
            outline: none;
            background: var(--accent-soft);
            transform: translateY(-1px);
        }

        .nf-date-day.is-other {
            color: var(--text-muted);
            opacity: 0.65;
        }

        .nf-date-day.is-selected {
            background: var(--accent);
            color: #fff;
            font-weight: 700;
        }

        .nf-date-day.is-today:not(.is-selected) {
            box-shadow: inset 0 0 0 1px var(--accent);
            color: var(--text-primary);
            font-weight: 600;
        }

        .nf-date-day:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            transform: none !important;
            background: transparent !important;
        }

        .nf-date-footer {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .nf-date-action {
            border: 0;
            background: transparent;
            color: var(--accent);
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 6px;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .nf-date-action:hover {
            background: var(--accent-soft);
        }

        .nf-date.is-disabled .nf-date-trigger {
            opacity: 0.65;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .nf-date-panel {
                min-width: 260px;
                width: max(100%, 260px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .nf-date-trigger,
            .nf-date-panel,
            .nf-date-day,
            .nf-date-nav,
            .nf-date-action {
                transition: none !important;
                transform: none !important;
            }
        }

        /* A subtle variant for darker themes */
        [data-theme="dark"] .neumo-card,
        [data-theme="dark"] .neumo-btn,
        [data-theme="dark"] .neumo-input {
            background: var(--neumo-bg);
            box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
        }

        .new-page-btn,
        .todo-add-btn,
        .toolbar-btn,
        .btn,
        .todo-filter-btn,
        .theme-switcher-btn {
            background: var(--button-bg, var(--neumo-bg));
            border-radius: var(--radius-pill);
            border: 1px solid var(--button-border, var(--border));
            box-shadow: 6px 6px 14px var(--neumo-shadow-dark), -6px -6px 14px var(--neumo-shadow-light);
            color: var(--button-text, var(--text-primary));
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }

        .new-page-btn:hover,
        .todo-add-btn:hover,
        .toolbar-btn:hover,
        .btn:hover,
        .todo-filter-btn:hover,
        .theme-switcher-btn:hover {
            transform: translateY(-1px);
            background: var(--button-bg-hover, var(--button-bg, var(--neumo-bg)));
        }

        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .top-nav,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .toolbar-wrapper,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .view-tabs,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .integrations-dock,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .toolbar-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .view-tab,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .tabs-shell .tab-clock-embed,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .quick-app-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .custom-shortcut-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .command-palette-trigger,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .global-search,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .word-count-display,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .command-palette-kbd {
            background: var(--theme-ui-surface, rgba(26, 12, 38, 0.86)) !important;
            border-color: var(--theme-ui-border, rgba(255, 195, 150, 0.46)) !important;
            color: var(--theme-ui-text, #fff6ed) !important;
            box-shadow: var(--theme-ui-shadow, 0 8px 20px rgba(0, 0, 0, 0.34)) !important;
        }

        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .global-search::placeholder {
            color: color-mix(in srgb, var(--theme-ui-text, #fff6ed) 65%, transparent) !important;
        }

        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .toolbar-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .view-tab:hover:not(.active),
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .quick-app-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .custom-shortcut-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .tabs-shell .tab-clock-embed:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .command-palette-trigger:hover {
            background: var(--theme-ui-surface-hover, rgba(44, 20, 66, 0.92)) !important;
            color: var(--theme-ui-text-strong, #fff8f0) !important;
        }

        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .neumo-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .new-page-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .todo-add-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .todo-filter-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .theme-switcher-btn,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .tabs-shell .tab-clock-gear,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .view-tab.active,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .toolbar-btn.active,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .storage-btn.primary {
            background: var(--theme-ui-primary-bg, linear-gradient(150deg, rgba(255, 214, 178, 0.99), rgba(255, 185, 125, 0.96))) !important;
            border-color: var(--theme-ui-primary-border, rgba(255, 224, 194, 0.92)) !important;
            color: var(--theme-ui-primary-text, #2f1706) !important;
            box-shadow: var(--theme-ui-primary-shadow, 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.38)) !important;
        }

        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .neumo-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .new-page-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .todo-add-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .todo-filter-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .theme-switcher-btn:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .tabs-shell .tab-clock-gear:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .view-tab.active:hover,
        body:is([data-theme-key="ubuntu"], [data-theme-key="spotify"], [data-theme-key="netflix"], [data-theme-key="slack"], [data-theme-key="dune"]) .storage-btn.primary:hover {
            background: var(--theme-ui-primary-hover, linear-gradient(150deg, rgba(255, 226, 197, 1), rgba(255, 197, 140, 0.98))) !important;
            color: var(--theme-ui-primary-text-hover, #251103) !important;
        }

        .btn-primary {
            background: var(--accent-soft);
            color: var(--text-primary);
        }

        .glass-panel,
        .glass-card,
        .glass-modal {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
            backdrop-filter: blur(var(--glass-blur)) saturate(160%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-soft);
        }

        .glass-panel {
            border-radius: var(--radius-lg);
        }

        .glass-card {
            border-radius: var(--radius);
            background: var(--glass-01);
        }

        .glass-modal {
            border-radius: calc(var(--radius-lg) + 6px);
        }

        .neumo-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-pill);
            background: var(--neumo-bg);
            box-shadow: 4px 4px 10px var(--neumo-shadow-dark), -4px -4px 10px var(--neumo-shadow-light);
            border: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .neumo-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: var(--radius-pill);
            background: var(--neumo-bg);
            box-shadow: inset 2px 2px 5px var(--neumo-inset-dark), inset -2px -2px 5px var(--neumo-inset-light);
            border: 1px solid var(--border);
            font-size: 13px;
            color: var(--text-secondary);
        }

        .streak-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-pill);
            background: var(--accent-soft);
            color: var(--text-primary);
            font-weight: 600;
            letter-spacing: 0.01em;
        }

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

        body[data-theme="dark"] {
            background:
                radial-gradient(1100px 800px at 8% -10%, rgba(var(--accent-rgb), 0.12), transparent 60%),
                radial-gradient(900px 700px at 90% 10%, rgba(0, 0, 0, 0.45), transparent 55%),
                linear-gradient(160deg, var(--bg-primary), var(--bg-secondary));
        }

        body[data-theme-key] {
            background:
                radial-gradient(1100px 800px at 8% -10%, rgba(var(--accent-rgb), 0.18), transparent 60%),
                linear-gradient(160deg, var(--theme-gradient-start), var(--theme-gradient-mid) 52%, var(--theme-gradient-end));
        }

        body[data-theme-key="chromeos"] {
            background:
                radial-gradient(980px 700px at 12% -10%, rgba(52, 168, 83, 0.13), transparent 60%),
                radial-gradient(780px 560px at 92% 8%, rgba(234, 67, 53, 0.05), transparent 58%),
                radial-gradient(760px 540px at 84% 86%, rgba(52, 168, 83, 0.08), transparent 56%),
                radial-gradient(860px 600px at 18% 90%, rgba(251, 188, 5, 0.06), transparent 58%),
                linear-gradient(160deg, #f7fbf8 0%, #f2f8f3 52%, #f7faf7 100%);
            --bg-primary: #f7fbf8;
            --bg-secondary: #f2f8f3;
            --bg-hover: #edf6ef;
            --bg-elevated: #ffffff;
            --text-primary: #1f2f46;
            --text-secondary: #55657c;
            --text-muted: #7a8798;
            --border: rgba(69, 101, 79, 0.16);
            --accent: #34a853;
            --accent-rgb: 52, 168, 83;
            --accent-strong: #188038;
            --accent-soft: rgba(52, 168, 83, 0.13);
            --editor-bg: #ffffff;
            --code-bg: #f2f8f3;
            --glass-01: rgba(248, 252, 248, 0.9);
            --glass-02: rgba(242, 249, 243, 0.95);
            --glass-border: rgba(76, 118, 88, 0.14);
            --sidebar-bg: rgba(253, 242, 195, 0.98);
            --surface-bg: rgba(52, 168, 83, 0.05);
            --surface-bg-hover: rgba(52, 168, 83, 0.09);
            --surface-bg-active: rgba(52, 168, 83, 0.14);
            --surface-border: rgba(76, 118, 88, 0.16);
            --surface-border-strong: rgba(52, 168, 83, 0.24);
            --surface-bg-elevated: rgba(255, 255, 255, 0.84);
            --button-bg: rgba(230, 244, 234, 0.96);
            --button-bg-hover: rgba(238, 248, 240, 0.99);
            --button-border: rgba(76, 118, 88, 0.18);
            --button-text: #1f2f46;
            --theme-gradient-start: #f7fbf8;
            --theme-gradient-mid: #f2f8f3;
            --theme-gradient-end: #f7faf7;
        }

        body[data-theme-key="ubuntu"] {
            background:
                radial-gradient(900px 620px at 14% -8%, rgba(255, 184, 122, 0.16), transparent 58%),
                linear-gradient(160deg, #6a2aa6 0%, #351653 50%, #0d0715 100%);
            --accent: #ffbf8d;
            --accent-rgb: 255, 191, 141;
            --accent-strong: #ff9d57;
            --accent-soft: rgba(255, 191, 141, 0.24);
            --text-primary: #fff8f2;
            --text-secondary: #f3e8ff;
            --text-muted: #d7c2ea;
            --border: rgba(255, 206, 166, 0.34);
            --bg-hover: rgba(255, 255, 255, 0.12);
            --bg-elevated: rgba(23, 10, 35, 0.9);
            --surface-bg: rgba(255, 255, 255, 0.11);
            --surface-bg-hover: rgba(255, 255, 255, 0.18);
            --surface-bg-active: rgba(255, 255, 255, 0.24);
            --surface-border: rgba(255, 206, 166, 0.44);
            --surface-border-strong: rgba(255, 206, 166, 0.62);
            --surface-bg-elevated: rgba(255, 255, 255, 0.16);
            --button-bg: rgba(255, 214, 178, 0.96);
            --button-bg-hover: rgba(255, 226, 197, 0.99);
            --button-text: #2f1706;
            --button-border: rgba(255, 218, 186, 0.9);
            --theme-ui-surface: rgba(26, 12, 38, 0.86);
            --theme-ui-surface-hover: rgba(44, 20, 66, 0.92);
            --theme-ui-border: rgba(255, 195, 150, 0.46);
            --theme-ui-text: #fff6ed;
            --theme-ui-text-strong: #fff8f0;
            --theme-ui-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
            --theme-ui-primary-bg: linear-gradient(150deg, rgba(255, 214, 178, 0.99), rgba(255, 185, 125, 0.96));
            --theme-ui-primary-hover: linear-gradient(150deg, rgba(255, 226, 197, 1), rgba(255, 197, 140, 0.98));
            --theme-ui-primary-text: #2f1706;
            --theme-ui-primary-text-hover: #251103;
            --theme-ui-primary-border: rgba(255, 224, 194, 0.92);
            --theme-ui-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.38);
        }

        body[data-theme-key="dune"] {
            background:
                radial-gradient(900px 680px at 12% -10%, rgba(230, 180, 110, 0.18), transparent 58%),
                radial-gradient(720px 560px at 92% 12%, rgba(70, 45, 28, 0.35), transparent 60%),
                linear-gradient(160deg, #1a120d 0%, #281b14 52%, #110c08 100%);
            --theme-gradient-start: #281b14;
            --theme-gradient-mid: #1e1510;
            --theme-gradient-end: #110c08;
            --theme-ui-surface: rgba(41, 28, 20, 0.88);
            --theme-ui-surface-hover: rgba(56, 38, 26, 0.94);
            --theme-ui-border: rgba(238, 206, 149, 0.36);
            --theme-ui-text: #f3e7d2;
            --theme-ui-text-strong: #fbf1df;
            --theme-ui-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
            --theme-ui-primary-bg: linear-gradient(150deg, rgba(220, 181, 119, 0.96), rgba(184, 136, 74, 0.92));
            --theme-ui-primary-hover: linear-gradient(150deg, rgba(234, 200, 146, 0.98), rgba(198, 151, 91, 0.95));
            --theme-ui-primary-text: #1f130c;
            --theme-ui-primary-text-hover: #160d08;
            --theme-ui-primary-border: rgba(246, 220, 172, 0.76);
            --theme-ui-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24);
        }

        body[data-theme-key="spotify"] {
            background:
                radial-gradient(920px 640px at 12% -10%, rgba(98, 255, 155, 0.16), transparent 58%),
                linear-gradient(160deg, #0f2f1f 0%, #09150f 54%, #050807 100%);
            --accent: #62ff9b;
            --accent-rgb: 98, 255, 155;
            --accent-strong: #2fd874;
            --accent-soft: rgba(98, 255, 155, 0.24);
            --text-primary: #f3fff8;
            --text-secondary: #d9f9e6;
            --text-muted: #aad7c0;
            --border: rgba(130, 247, 180, 0.34);
            --bg-hover: rgba(255, 255, 255, 0.11);
            --bg-elevated: rgba(6, 20, 13, 0.92);
            --surface-bg: rgba(255, 255, 255, 0.1);
            --surface-bg-hover: rgba(255, 255, 255, 0.16);
            --surface-bg-active: rgba(255, 255, 255, 0.22);
            --surface-border: rgba(130, 247, 180, 0.42);
            --surface-border-strong: rgba(130, 247, 180, 0.6);
            --surface-bg-elevated: rgba(255, 255, 255, 0.14);
            --button-bg: rgba(161, 255, 205, 0.96);
            --button-bg-hover: rgba(189, 255, 221, 0.99);
            --button-text: #053019;
            --button-border: rgba(196, 255, 223, 0.9);
            --theme-ui-surface: rgba(8, 24, 15, 0.88);
            --theme-ui-surface-hover: rgba(14, 36, 22, 0.94);
            --theme-ui-border: rgba(130, 247, 180, 0.46);
            --theme-ui-text: #edfff5;
            --theme-ui-text-strong: #f5fff9;
            --theme-ui-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
            --theme-ui-primary-bg: linear-gradient(150deg, rgba(162, 255, 206, 0.98), rgba(96, 236, 152, 0.95));
            --theme-ui-primary-hover: linear-gradient(150deg, rgba(194, 255, 222, 1), rgba(121, 248, 172, 0.98));
            --theme-ui-primary-text: #062a16;
            --theme-ui-primary-text-hover: #041f0f;
            --theme-ui-primary-border: rgba(202, 255, 226, 0.92);
            --theme-ui-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34);
        }

        body[data-theme-key="netflix"] {
            background:
                radial-gradient(920px 640px at 12% -10%, rgba(255, 125, 141, 0.17), transparent 58%),
                linear-gradient(160deg, #2e0b11 0%, #13070a 54%, #080506 100%);
            --accent: #ff7d8d;
            --accent-rgb: 255, 125, 141;
            --accent-strong: #ff4f66;
            --accent-soft: rgba(255, 125, 141, 0.24);
            --text-primary: #fff3f5;
            --text-secondary: #ffe0e6;
            --text-muted: #d9aab3;
            --border: rgba(255, 153, 166, 0.34);
            --bg-hover: rgba(255, 255, 255, 0.11);
            --bg-elevated: rgba(30, 10, 13, 0.92);
            --surface-bg: rgba(255, 255, 255, 0.1);
            --surface-bg-hover: rgba(255, 255, 255, 0.16);
            --surface-bg-active: rgba(255, 255, 255, 0.22);
            --surface-border: rgba(255, 153, 166, 0.42);
            --surface-border-strong: rgba(255, 153, 166, 0.6);
            --surface-bg-elevated: rgba(255, 255, 255, 0.14);
            --button-bg: rgba(255, 191, 198, 0.96);
            --button-bg-hover: rgba(255, 213, 218, 0.99);
            --button-text: #3a090f;
            --button-border: rgba(255, 222, 226, 0.9);
            --theme-ui-surface: rgba(26, 9, 12, 0.88);
            --theme-ui-surface-hover: rgba(40, 13, 18, 0.94);
            --theme-ui-border: rgba(255, 153, 166, 0.46);
            --theme-ui-text: #fff1f4;
            --theme-ui-text-strong: #fff7f8;
            --theme-ui-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
            --theme-ui-primary-bg: linear-gradient(150deg, rgba(255, 198, 206, 0.99), rgba(255, 141, 157, 0.96));
            --theme-ui-primary-hover: linear-gradient(150deg, rgba(255, 216, 221, 1), rgba(255, 165, 177, 0.98));
            --theme-ui-primary-text: #32070c;
            --theme-ui-primary-text-hover: #250409;
            --theme-ui-primary-border: rgba(255, 222, 226, 0.92);
            --theme-ui-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.34);
        }

        body[data-theme-key="slack"] {
            background:
                radial-gradient(920px 640px at 12% -10%, rgba(184, 155, 255, 0.16), transparent 58%),
                linear-gradient(160deg, #31174a 0%, #171027 54%, #0d0a16 100%);
            --accent: #b89bff;
            --accent-rgb: 184, 155, 255;
            --accent-strong: #9470ff;
            --accent-soft: rgba(184, 155, 255, 0.24);
            --text-primary: #f7f2ff;
            --text-secondary: #e8ddff;
            --text-muted: #c6b7eb;
            --border: rgba(195, 170, 255, 0.34);
            --bg-hover: rgba(255, 255, 255, 0.11);
            --bg-elevated: rgba(21, 13, 36, 0.92);
            --surface-bg: rgba(255, 255, 255, 0.1);
            --surface-bg-hover: rgba(255, 255, 255, 0.16);
            --surface-bg-active: rgba(255, 255, 255, 0.22);
            --surface-border: rgba(195, 170, 255, 0.42);
            --surface-border-strong: rgba(195, 170, 255, 0.6);
            --surface-bg-elevated: rgba(255, 255, 255, 0.14);
            --button-bg: rgba(224, 209, 255, 0.96);
            --button-bg-hover: rgba(235, 224, 255, 0.99);
            --button-text: #2b1748;
            --button-border: rgba(237, 226, 255, 0.9);
            --theme-ui-surface: rgba(25, 14, 40, 0.88);
            --theme-ui-surface-hover: rgba(37, 21, 58, 0.94);
            --theme-ui-border: rgba(195, 170, 255, 0.46);
            --theme-ui-text: #f6efff;
            --theme-ui-text-strong: #fcf8ff;
            --theme-ui-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
            --theme-ui-primary-bg: linear-gradient(150deg, rgba(225, 210, 255, 0.99), rgba(187, 158, 255, 0.96));
            --theme-ui-primary-hover: linear-gradient(150deg, rgba(238, 227, 255, 1), rgba(203, 180, 255, 0.98));
            --theme-ui-primary-text: #24123e;
            --theme-ui-primary-text-hover: #1a0b2f;
            --theme-ui-primary-border: rgba(237, 226, 255, 0.92);
            --theme-ui-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.34);
        }

        h1, h2, h3, h4, h5 {
            font-family: var(--font-heading);
            letter-spacing: -0.01em;
        }

        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .app-container {
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        /* Sidebar Styling - Liquid Glass */
        .sidebar {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            background: var(--sidebar-bg, var(--glass-02));
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
            backdrop-filter: blur(var(--glass-blur)) saturate(160%);
            border-right: 1px solid var(--glass-border);
            box-shadow: var(--shadow-soft);
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease, min-width 0.3s ease;
            flex-shrink: 0;
            position: relative;
            z-index: 1200; /* keep sidebar above most floating UI */
            overflow: hidden;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
            min-width: var(--sidebar-collapsed-width);
        }

        .sidebar.collapsed > * {
            opacity: 1;
            visibility: visible;
        }

        .sidebar-toggle-btn {
            position: fixed;
            top: 70px;
            left: calc(var(--sidebar-width) - 14px);
            width: 28px;
            height: 28px;
            background: var(--surface-bg-hover);
            -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
            border: 1px solid var(--surface-border);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1300;
            color: var(--text-secondary);
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            transition: left 0.3s ease, background 0.2s ease, transform 0.2s ease;
            font-size: 12px;
        }

        .sidebar-toggle-btn:hover {
            background: var(--surface-bg-active);
            color: var(--text-primary);
            transform: scale(1.05);
        }

        .sidebar-toggle-btn.collapsed {
            left: calc(var(--sidebar-collapsed-width) - 14px);
        }

        .sidebar-toggle-btn i {
            transition: transform 0.3s ease;
        }

        .sidebar-toggle-btn.collapsed i {
            transform: rotate(180deg);
        }

        .sidebar-header {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--surface-border);
            background: var(--surface-bg);
        }

        .app-title {
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sidebar-search {
            padding: 10px 16px;
            border-bottom: 1px solid var(--surface-border);
        }

        .search-input {
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
        }
        
        .search-input:focus {
            border-color: var(--accent);
            background: var(--surface-bg-hover);
        }

        /* Compact focus timer with Apple-like styling */
        .focus-timer {
            padding: 8px 10px;
            border-radius: 10px;
            margin: 8px 12px 6px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            border: 1px solid var(--surface-border);
            font-size: 13px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .focus-timer:hover {
            background: var(--surface-bg);
            border-color: var(--surface-border);
        }
        .focus-timer .timer-top {
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:4px;
        }
        .focus-timer .timer-left {
            display:flex;
            align-items:center;
            gap:8px;
        }
        .focus-timer .timer-mode-badge{
            background: var(--surface-bg);
            color:var(--text-secondary);
            padding:6px 10px;
            border-radius:999px;
            font-weight:600;
            font-size:11px;
            border: 1px solid var(--surface-border);
        }
        .focus-timer .timer-display {
            display: inline-block;
            font-size:16px;
            font-weight:700;
            padding:6px 12px;
            border-radius:8px;
            background: transparent;
            color:var(--text-primary);
            min-width:70px;
            text-align:center;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            white-space: nowrap;
        }

        .focus-timer .timer-wheel-segment {
            position: relative;
            display: inline-block;
            height: 1.15em;
            vertical-align: middle;
            overflow: hidden;
        }

        .focus-timer .timer-wheel-sep {
            display: inline-block;
            vertical-align: middle;
            padding: 0 0.08em;
        }

        .focus-timer .timer-wheel-static {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
        }

        .focus-timer .timer-wheel-face {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            backface-visibility: hidden;
            transform-origin: center center;
            text-align: center;
        }

        .focus-timer .timer-wheel-segment-animate .timer-wheel-prev {
            animation: timerWheelOut 0.28s cubic-bezier(0.2, 0.9, 0.2, 1) both;
        }

        .focus-timer .timer-wheel-segment-animate .timer-wheel-next {
            animation: timerWheelIn 0.28s cubic-bezier(0.2, 0.9, 0.2, 1) both;
        }

        @keyframes timerWheelOut {
            from {
                transform: translateY(-50%) rotateX(0deg);
                opacity: 1;
                filter: blur(0);
            }
            to {
                transform: translateY(-140%) rotateX(65deg);
                opacity: 0.1;
                filter: blur(1.4px);
            }
        }

        @keyframes timerWheelIn {
            from {
                transform: translateY(35%) rotateX(-65deg);
                opacity: 0.15;
                filter: blur(1.4px);
            }
            to {
                transform: translateY(-50%) rotateX(0deg);
                opacity: 1;
                filter: blur(0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .focus-timer .timer-wheel-segment-animate .timer-wheel-prev,
            .focus-timer .timer-wheel-segment-animate .timer-wheel-next {
                animation: none;
            }
        }
        .focus-timer .timer-controls {
            display:flex;
            gap:10px;
            align-items:center;
            margin-left: 4px;
            padding: 2px;
            border-radius: 12px;
            background: rgba(22, 30, 45, 0.05);
            border: 1px solid rgba(22, 30, 45, 0.08);
        }
        .focus-timer .icon-btn {
            width:32px;
            height:32px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:9px;
            border:1px solid transparent;
            background: transparent;
            color:var(--text-primary);
            cursor:pointer;
            font-size:12px;
            transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
        }
        .focus-timer .icon-btn:hover{
            transform: translateY(-1px);
            background: rgba(22, 30, 45, 0.08);
            border-color: rgba(22, 30, 45, 0.12);
        }
        .focus-timer .icon-btn.primary{
            background:var(--accent);
            color:#fff;
            border-color:transparent;
        }
        .focus-timer .timer-settings {
            display:none; /* hidden by default to save space */
            flex-direction: column;
            gap:12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            margin-top: 12px;
            font-size:12px;
            color:var(--text-secondary);
        }
        .focus-timer.expanded .timer-settings{ display:flex; }

        /* Keep timer controls above page rows when dropdowns open inside sidebar */
        .sidebar > .focus-timer {
            position: relative;
            z-index: 8;
        }

        .sidebar > .focus-timer.expanded {
            z-index: 18;
        }

        .sidebar > .focus-timer .timer-settings {
            position: relative;
            z-index: 2;
        }
        
        .timer-presets {
            display: flex;
            gap: 8px;
            justify-content: space-between;
        }
        
        .preset-btn {
            flex: 1;
            min-height: 30px;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(22, 30, 45, 0.1);
            background: var(--surface-bg);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.16s ease;
        }
        
        .preset-btn:hover {
            background: var(--accent-soft);
            color: var(--text-primary);
            border-color: var(--accent);
        }
        
        .timer-custom-input {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            align-items: stretch;
        }

        .timer-audio-settings {
            display: grid;
            gap: 8px;
        }

        .timer-field {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 8px;
            border: 1px solid rgba(22, 30, 45, 0.1);
            background: var(--surface-bg);
            font-size: 11px;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .timer-field--wide {
            align-items: stretch;
            flex-direction: column;
            gap: 7px;
            padding: 8px 9px;
        }

        .timer-field--wide > span {
            font-size: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .focus-timer .timer-settings input[type="number"]{
            width:100%;
            min-width: 0;
            padding:5px 6px;
            border-radius:6px;
            border:1px solid rgba(22, 30, 45, 0.14);
            background: var(--surface-bg-elevated);
            color:var(--text-primary);
            text-align:center;
            font-weight: 600;
        }
        .focus-timer .timer-settings input[type="number"]:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-soft);
        }

        .focus-timer .timer-settings select {
            width: 100%;
            min-width: 0;
            padding: 7px 8px;
            border-radius: 8px;
            border: 1px solid rgba(22, 30, 45, 0.14);
            background: var(--surface-bg-elevated);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
        }

        .focus-timer .timer-settings select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-soft);
        }

        #timerSettings .nf-select {
            width: 100%;
            z-index: 2400;
        }

        #timerSettings .nf-select.open {
            z-index: 4200;
        }

        #timerSettings .nf-select .nf-select-trigger {
            min-height: 40px;
            border-radius: 12px;
            border: 1px solid rgba(62, 136, 255, 0.5);
            background: #141b29;
            color: #f3f6fb;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        #timerSettings .nf-select .nf-select-label {
            color: #f6f8fc;
            font-weight: 600;
        }

        #timerSettings .nf-select-menu {
            border-radius: 12px;
            border: 1px solid rgba(96, 165, 250, 0.55);
            background: #050d1b;
            color: #f4f7fc;
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.52);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            z-index: 5000;
        }

        #timerSettings .nf-select-option {
            color: #eef3ff;
            font-size: 13px;
            border-radius: 10px;
        }

        #timerSettings .nf-select-option:hover,
        #timerSettings .nf-select-option:focus-visible {
            background: rgba(96, 165, 250, 0.24);
            color: #ffffff;
            transform: none;
        }

        #timerSettings .nf-select-option.is-selected {
            background: #1e3659;
            color: #ffffff;
            font-weight: 700;
        }

        body:not([data-theme]) #timerSettings .nf-select-menu,
        [data-theme="light"] #timerSettings .nf-select-menu {
            background: #ffffff;
            color: #0f172a;
            border-color: rgba(37, 99, 235, 0.42);
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
        }

        body:not([data-theme]) #timerSettings .nf-select .nf-select-trigger,
        [data-theme="light"] #timerSettings .nf-select .nf-select-trigger {
            background: #ffffff;
            color: #0f172a;
            border-color: rgba(37, 99, 235, 0.42);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
        }

        body:not([data-theme]) #timerSettings .nf-select .nf-select-label,
        [data-theme="light"] #timerSettings .nf-select .nf-select-label {
            color: #0f172a;
        }

        body:not([data-theme]) #timerSettings .nf-select-option,
        [data-theme="light"] #timerSettings .nf-select-option {
            color: #0f172a;
        }

        body:not([data-theme]) #timerSettings .nf-select-option:hover,
        body:not([data-theme]) #timerSettings .nf-select-option:focus-visible,
        [data-theme="light"] #timerSettings .nf-select-option:hover,
        [data-theme="light"] #timerSettings .nf-select-option:focus-visible {
            background: #dbeafe;
            color: #0b1322;
        }

        body:not([data-theme]) #timerSettings .nf-select-option.is-selected,
        [data-theme="light"] #timerSettings .nf-select-option.is-selected {
            background: #bfdbfe;
            color: #0b1322;
        }

        .timer-volume-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .focus-timer .timer-settings input[type="range"] {
            flex: 1;
            margin: 0;
            accent-color: var(--accent);
            cursor: pointer;
        }

        .timer-volume-row output {
            min-width: 42px;
            text-align: right;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.02em;
        }
        .focus-timer .timer-progress {
            height:6px;
            background:rgba(22, 30, 45, 0.08);
            border-radius:6px;
            overflow:hidden;
        }
        .focus-timer .timer-progress-bar {
            height:100%;
            width:0%;
            background: linear-gradient(90deg, var(--accent), var(--accent-strong));
            transition:width 0.25s linear;
        }

        [data-theme="dark"] .focus-timer .timer-controls {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
        }

        [data-theme="dark"] .focus-timer .icon-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.16);
        }

        [data-theme="dark"] .preset-btn,
        [data-theme="dark"] .timer-field {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.14);
            color: var(--text-secondary);
        }

        [data-theme="dark"] .focus-timer .timer-settings input[type="number"] {
            background: rgba(10, 10, 10, 0.35);
            border-color: rgba(255, 255, 255, 0.16);
            color: var(--text-primary);
        }

        [data-theme="dark"] .focus-timer .timer-settings select {
            background: rgba(10, 10, 10, 0.35);
            border-color: rgba(255, 255, 255, 0.16);
            color: var(--text-primary);
        }

        [data-theme="dark"] #timerSettings .nf-select .nf-select-trigger {
            background: #101217;
            border-color: rgba(96, 165, 250, 0.5);
            color: #f5f7fb;
        }

        [data-theme="dark"] #timerSettings .nf-select-menu {
            background: #080c12;
            border-color: rgba(96, 165, 250, 0.48);
        }

        .pages-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px 0;
        }

        .page-item {
            padding: 6px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-secondary);
            transition: all 0.2s ease;
            user-select: none;
            margin: 0 8px;
            border-radius: 8px;
            position: relative;
            min-height: 32px;
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }

        .page-item:hover {
            background: var(--surface-bg-hover);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
            border: 1px solid var(--surface-border);
            margin: 0 7px;
        }

        .page-item.active {
            background: var(--surface-bg-active);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            color: var(--text-primary);
            font-weight: 500;
            border: 1px solid var(--surface-border);
            margin: 0 7px;
        }

        /* Visual drop indicators for drag-and-drop reordering */
        .page-item.drop-before::before {
            content: '';
            position: absolute;
            left: 8px;
            right: 8px;
            top: 0;
            height: 0;
            border-top: 3px solid var(--accent);
            border-radius: 3px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.12);
            transform: translateY(-50%);
            pointer-events: none;
        }

        .page-item.drop-after::after {
            content: '';
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 0;
            height: 0;
            border-bottom: 3px solid var(--accent);
            border-radius: 3px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.12);
            transform: translateY(50%);
            pointer-events: none;
        }

        .page-item.drop-inside {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border-left: 4px solid var(--accent);
            margin-left: 6px;
            padding-left: 10px;
        }

        .page-title-text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .page-star-indicator {
            color: #f1c40f;
            font-size: 10px;
            margin-left: 4px;
            flex-shrink: 0;
        }

        .page-item-icons .fa-star {
            color: var(--text-secondary);
        }

        .page-item-icons .fa-star.starred {
            color: #f1c40f;
        }

        .page-item-icons .fa-star:hover {
            color: #f1c40f;
        }

        .page-icon {
            font-size: 16px;
            cursor: pointer;
            opacity: 1;
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .page-icon:hover {
            transform: scale(1.2);
        }

        .page-icon-empty {
            opacity: 0.5;
        }

        /* Prevent background scroll when modal is open */
        body.modal-open {
            overflow: hidden !important;
            height: 100% !important;
        }

        .page-item-icons {
            margin-left: auto;
            display: none;
            gap: 8px;
            opacity: 0.6;
        }

        .page-item:hover .page-item-icons {
            display: flex;
        }
        
        .page-item-icons i:hover {
            color: var(--text-primary);
            opacity: 1;
        }

        .sidebar-new-page {
            padding: 0 16px 16px;
        }

        .sidebar .new-page-btn {
            margin: 0;
            width: 100%;
            display: block;
        }

        .new-page-btn {
            margin: 16px;
            padding: 10px;
            background: var(--button-bg, var(--surface-bg));
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border: 1px dashed var(--button-border, var(--surface-border-strong));
            color: var(--button-text, var(--text-secondary));
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .new-page-btn:hover {
            border-color: var(--button-border, var(--surface-border-strong));
            color: var(--button-text, var(--text-primary));
            background: var(--button-bg-hover, var(--surface-bg-hover));
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        /* Enhanced Todo Styles */
        .sidebar-todo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .todo-filter-btn {
            padding: 4px 8px;
            cursor: pointer;
            border-radius: 6px;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .todo-filter-btn:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
        }

        .todo-progress-container {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            margin-bottom: 8px;
        }

        .todo-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            border-radius: 6px;
            overflow: hidden;
        }

        .todo-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), #27ae60);
            border-radius: 3px;
            transition: width 0.3s ease;
            width: 0%;
        }

        .todo-progress-text {
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .todo-filter-panel, .todo-options-panel {
            display: none;
            padding: 12px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            margin-bottom: 10px;
            flex-direction: column;
            gap: 8px;
        }

        .todo-filter-panel.active, .todo-options-panel.active {
            display: flex;
        }

        .filter-group, .todo-option-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-group label, .todo-option-group label {
            font-size: 11px;
            color: var(--text-secondary);
            min-width: 60px;
        }

        .filter-group select, .todo-option-group select,
        .todo-option-group input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--surface-border);
            border-radius: 8px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            color: var(--text-primary);
            font-size: 11px;
        }

        .todo-item {
            flex-wrap: wrap;
        }

        .todo-priority-badge {
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
        }

        .priority-high {
            background: #ff4444;
            color: white;
        }

        .priority-medium {
            background: #ffaa00;
            color: #333;
        }

        .priority-low {
            background: #27ae60;
            color: white;
        }

        .todo-meta {
            display: flex;
            gap: 8px;
            width: 100%;
            padding-left: 24px;
            margin-top: 4px;
        }

        .todo-meta-item {
            font-size: 10px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .todo-meta-item.overdue {
            color: #ff4444;
        }

        .todo-category-badge {
            font-size: 9px;
            padding: 2px 6px;
            background: var(--accent);
            color: white;
            border-radius: 10px;
        }

        .top-nav {
            margin: 18px 20px 12px;
            padding: 16px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            border-radius: var(--radius-lg);
            position: sticky;
            top: 12px;
            z-index: 1200;
        }

        .nav-left,
        .nav-right {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .window-chrome {
            display: none;
        }

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

        .app-brand-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .app-brand-ring {
            display: none;
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border-radius: 50%;
            background:
                radial-gradient(circle at center, transparent 55%, rgba(255,255,255,0.98) 56%, rgba(255,255,255,0.98) 60%, transparent 61%),
                conic-gradient(
                    #ea4335 0deg 85deg,
                    #fbbc05 85deg 178deg,
                    #34a853 178deg 272deg,
                    #4285f4 272deg 360deg
                );
            box-shadow: 0 2px 8px rgba(22, 30, 45, 0.08);
        }

        .brand-label {
            font-family: var(--font-heading);
            font-size: 20px;
            letter-spacing: 0.01em;
        }

        .brand-sub {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-muted);
        }

        .nav-divider {
            width: 1px;
            height: 32px;
            background: var(--border);
            opacity: 0.6;
        }

        .tabs-shell {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .view-tabs {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            border-radius: 999px;
            background: var(--neumo-bg);
            border: 1px solid var(--border);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
            box-shadow: inset 3px 3px 6px var(--neumo-inset-dark), inset -3px -3px 6px var(--neumo-inset-light);
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            max-width: min(100vw - 420px, 1120px);
            scrollbar-width: thin;
        }

        .view-tab {
            border: none;
            background: transparent;
            padding: 6px 12px;
            border-radius: var(--radius-pill);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            line-height: 1;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
        }

        .view-tab.active {
            background: var(--bg-hover);
            color: var(--text-primary);
            box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 4px 10px rgba(20,16,12,0.1);
        }

        .view-tab:hover:not(.active) {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        @media (min-width: 1025px) {
            .view-tabs > .view-tab[data-view="settings"] {
                margin-left: auto;
            }
        }

        @media (max-width: 1024px) {
            .view-tabs > .view-tab[data-view="settings"] {
                margin-left: 0;
            }
        }

        .tabs-shell .tab-clock-embed {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 3px 10px 3px 12px;
            margin-left: 4px;
            border-radius: 999px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
            box-shadow: inset 0 1px 0 var(--neumo-inset-light), 0 8px 18px rgba(22, 30, 45, 0.08);
            position: relative;
            flex-shrink: 0;
        }

        .tabs-shell .tab-clock-main {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            line-height: 1;
        }

        .tabs-shell .tab-clock-icon {
            color: var(--accent);
            font-size: 14px;
        }

        .tabs-shell .toolbar-time-widget {
            min-width: 82px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: left;
            letter-spacing: 0.01em;
            display: inline-block;
            padding: 0;
        }

        .tabs-shell .tab-clock-gear {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 8px;
            background: var(--bg-hover);
            color: var(--text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(22, 30, 45, 0.12);
            transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
        }

        .tabs-shell .tab-clock-gear i {
            font-size: 13px;
        }

        .tabs-shell .tab-clock-gear:hover {
            color: var(--text-primary);
            background: var(--surface-bg-active);
            box-shadow: 0 6px 12px rgba(22, 30, 45, 0.14);
        }

        .integrations-dock {
            display: none;
            align-items: center;
            gap: 8px;
            margin-left: 2px;
            padding: 5px 8px;
            border-radius: 14px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(18px) saturate(170%);
            backdrop-filter: blur(18px) saturate(170%);
            box-shadow: 0 10px 18px rgba(22, 30, 45, 0.1);
        }

        .integrations-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.11em;
            color: var(--text-secondary);
            padding: 0 2px;
            white-space: nowrap;
        }

        .quick-app-launchers,
        .custom-shortcut-launchers {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .quick-app-btn,
        .custom-shortcut-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--surface-border-strong);
            border-radius: 999px;
            padding: 7px 12px;
            background: linear-gradient(155deg, var(--surface-bg), var(--surface-bg-hover));
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
            white-space: nowrap;
        }

        .quick-app-btn:hover,
        .custom-shortcut-btn:hover {
            background: linear-gradient(155deg, var(--surface-bg-hover), var(--surface-bg-active));
            border-color: rgba(var(--accent-rgb), 0.38);
            box-shadow: 0 8px 16px rgba(22, 30, 45, 0.15);
            transform: translateY(-1px);
        }

        .quick-app-btn:active,
        .custom-shortcut-btn:active {
            transform: translateY(0);
        }

        .quick-app-btn.active {
            border-color: rgba(var(--accent-rgb), 0.55);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 10px 20px rgba(22, 30, 45, 0.2);
        }

        .quick-app-btn i,
        .custom-shortcut-btn i {
            font-size: 13px;
        }

        .custom-shortcut-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            min-width: 18px;
            font-size: 14px;
            line-height: 1;
        }

        .custom-shortcut-btn .shortcut-label {
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quick-app-btn.spotify i {
            color: #1db954;
        }

        .quick-app-btn.chatgpt i {
            color: #10a37f;
        }

        .quick-app-btn-add {
            padding-inline: 10px;
        }

        [data-theme="dark"] .integrations-dock,
        [data-theme="dark"] .quick-app-btn,
        [data-theme="dark"] .custom-shortcut-btn {
            border-color: rgba(255, 255, 255, 0.12);
            background: linear-gradient(165deg, rgba(20, 19, 18, 0.62), rgba(20, 19, 18, 0.44));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.34);
        }

        [data-theme="dark"] .tabs-shell .tab-clock-embed {
            border-color: rgba(255, 255, 255, 0.1);
            background: linear-gradient(165deg, rgba(20, 19, 18, 0.62), rgba(20, 19, 18, 0.44));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.34);
        }

        [data-theme="dark"] .tabs-shell .tab-clock-gear {
            background: linear-gradient(165deg, rgba(34, 31, 28, 0.72), rgba(20, 19, 18, 0.56));
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
        }

        .global-search {
            min-width: 220px;
        }

        .view {
            display: none;
            flex: 1;
            overflow-y: auto;
            padding: 8px 28px 28px;
        }

        .view.active {
            display: block;
        }

        .view-notes {
            /* Reduced top padding so the fixed toolbar no longer creates a large empty gap
               The toolbar is fixed; we keep a small breathing room but avoid the huge 128px gap. */
            padding-top: 24px;
        }

        /* Progress view (compact dashboard) */
        .view-progress {
            display: none; /* views are controlled by .view.active */
            flex-direction: column;
            gap: 12px;
            padding-top: 12px;
        }

    .view-progress .view-header { margin-bottom: 10px; }
    /* When Progress is merged into Today, ensure Today view headers match Progress spacing */
    #view-today .view-header { margin-bottom: 10px; }

        .stats-grid .glass-card {
            padding: 18px;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        @media (max-width: 900px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
        }

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

        .view-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: 20px;
            margin-bottom: 18px;
        }

        .view-header h2 {
            font-size: 30px;
            margin: 0;
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        .eyebrow {
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .summary-card {
            padding: 22px 20px;
            border-radius: 18px;
            background: var(--surface-bg-elevated);
            box-shadow: 0 12px 32px rgba(0,0,0,0.06);
        }

        .summary-label {
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .summary-value {
            font-size: 36px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
            letter-spacing: -0.01em;
        }

        .summary-meta {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .today-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 360px;
            gap: 20px;
            align-items: start;
        }

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

        .today-panel {
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 260px;
            border-radius: 18px;
            background: var(--glass-01);
            box-shadow: 0 18px 40px rgba(0,0,0,0.06);
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .panel-header h3 { font-size: 18px; margin:0; }

        .task-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .task-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 18px;
            border-radius: 16px;
            background: var(--surface-bg-elevated);
            border: 1px solid var(--surface-border);
            border-left: 4px solid transparent;
            box-shadow: 0 10px 28px rgba(0,0,0,0.06);
            transition: transform 180ms var(--transition-fast), box-shadow 180ms var(--transition-fast);
        }

        .task-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.09); }

        .task-card.task-priority-high {
            border-left-color: #d32f2f;
            background: linear-gradient(90deg, rgba(211, 47, 47, 0.08), rgba(211, 47, 47, 0.02) 38%, var(--surface-bg-elevated) 100%);
        }

        .task-card.task-priority-medium {
            border-left-color: #f57c00;
            background: linear-gradient(90deg, rgba(245, 124, 0, 0.08), rgba(245, 124, 0, 0.02) 38%, var(--surface-bg-elevated) 100%);
        }

        .task-card.task-priority-low {
            border-left-color: #2e7d32;
            background: linear-gradient(90deg, rgba(46, 125, 50, 0.07), rgba(46, 125, 50, 0.02) 38%, var(--surface-bg-elevated) 100%);
        }

        [data-theme="dark"] .task-card.task-priority-high {
            background: linear-gradient(90deg, rgba(211, 47, 47, 0.22), rgba(211, 47, 47, 0.06) 40%, rgba(20,19,18,0.82) 100%);
        }

        [data-theme="dark"] .task-card.task-priority-medium {
            background: linear-gradient(90deg, rgba(245, 124, 0, 0.2), rgba(245, 124, 0, 0.06) 40%, rgba(20,19,18,0.82) 100%);
        }

        [data-theme="dark"] .task-card.task-priority-low {
            background: linear-gradient(90deg, rgba(46, 125, 50, 0.2), rgba(46, 125, 50, 0.06) 40%, rgba(20,19,18,0.82) 100%);
        }

        .task-card.completed {
            opacity: 0.65;
            text-decoration: line-through;
        }

        .task-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .task-title {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 15px;
            line-height: 1.25;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .task-meta {
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .task-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .habit-add-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .habit-add-row .neumo-input {
            flex: 1;
            min-width: 0;
        }

        .empty-state {
            padding: 14px;
            border-radius: var(--radius);
            background: var(--surface-bg);
            text-align: center;
        }

        .empty-title {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .empty-subtitle {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* Quick actions UI removed */

        /* Linked task panel removed -- styles cleared */


        .stats-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(160px, 260px);
            width: 100%;
            max-width: 1200px; /* keep dashboard content from stretching to full page width */
            align-items: start; /* prevent cards from stretching to full height */
            margin: 8px 20px 40px; /* breathing room above/below */
        }

        .glass-card {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 140px;
            background: var(--glass-01);
            border-radius: 14px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-soft);
        }

        .bar-chart {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            align-items: end;
            height: 120px;
        }

        .bar {
            width: 100%;
            border-radius: 10px;
            background: var(--accent-soft);
            position: relative;
        }

        .bar span {
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: var(--text-secondary);
        }

        .streak-stats,
        .category-stats {
            display: grid;
            gap: 10px;
        }

        .history-list {
            display: grid;
            gap: 8px;
            /* keep the recent history column scrollable and constrained */
            max-height: 520px;
            overflow-y: auto;
            padding-right: 6px;
        }

        /* Responsive: fall back to stacked layout on narrower screens */
        @media (max-width: 1100px) {
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                max-width: 100%;
                margin: 8px 12px 40px;
            }
        }

        /* Small helpers for dashboard placeholders */
        .card-content { display:flex; flex:1; gap:12px; align-items:center; }
        .sparkline { flex:1; height:48px; background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
        .heatmap-placeholder { flex:1; height:110px; background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
        .donut-placeholder { width:84px; height:84px; border-radius:50%; background: conic-gradient(var(--accent) 0 25%, #6c5ce7 0 55%, #00b894 0 100%); box-shadow: inset 0 -6px 12px rgba(0,0,0,0.06); }
        .legend { display:flex; flex-direction:column; gap:6px; color:var(--text-secondary); font-size:13px; }
        .legend-item { display:flex; justify-content:space-between; gap:12px; align-items:center; }
        .legend-color { width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:8px; }
        .card-stat { font-size:22px; font-weight:700; color:var(--text-primary); }
        .card-meta { font-size:13px; color:var(--text-secondary); }

        .settings-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: 1fr;
            align-items: start;
        }

        .settings-main-stack {
            display: grid;
            gap: 18px;
        }

        .settings-feature-rail {
            align-self: start;
        }

        .settings-card {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-self: start;
            height: auto;
        }

        @media (min-width: 1180px) {
            #view-settings .settings-grid {
                grid-template-columns: minmax(340px, 1fr) minmax(360px, 440px);
                grid-template-rows: auto auto;
                column-gap: 18px;
                row-gap: 18px;
                align-items: start;
            }

            #view-settings .settings-main-stack-top {
                grid-column: 1;
                grid-row: 1;
            }

            #view-settings .settings-main-stack-bottom {
                grid-column: 1;
                grid-row: 2;
            }

            #view-settings .settings-feature-rail {
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: start;
            }
        }

        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .settings-row-calendar-sync {
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        #view-settings .settings-row-calendar-sync .modal-input {
            flex: 1 1 220px;
            max-width: 320px;
            min-width: 180px;
            margin: 0;
        }

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

        .settings-actions .neumo-btn.active {
            background: var(--accent-soft);
            box-shadow: inset 2px 2px 6px var(--neumo-inset-dark), inset -2px -2px 6px var(--neumo-inset-light);
            color: var(--text-primary);
        }

        .settings-help {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .settings-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .feature-toggle-list {
            display: grid;
            gap: 10px;
        }

        #featureToggleListSettings {
            gap: 8px;
        }

        #featureToggleListSettings .settings-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            border: 1px solid color-mix(in srgb, var(--surface-border) 84%, transparent);
            border-radius: 10px;
            background: color-mix(in srgb, var(--surface-bg) 94%, transparent);
            padding: 8px 10px;
            cursor: pointer;
        }

        #featureToggleListSettings .settings-toggle > span {
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        #featureToggleListSettings .feature-toggle-input {
            position: static;
            width: 18px;
            height: 18px;
            opacity: 1;
            pointer-events: auto;
            margin: 0;
            accent-color: var(--accent);
            flex: 0 0 auto;
        }

        .feature-toggle-list-onboarding {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .feature-toggle-card {
            position: relative;
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            min-height: 70px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--surface-border-strong) 62%, transparent);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--surface-bg-elevated) 88%, var(--bg-elevated) 12%),
                color-mix(in srgb, var(--surface-bg) 78%, var(--surface-bg-elevated) 22%)
            );
            box-shadow: 0 8px 20px color-mix(in srgb, #000 16%, transparent);
            cursor: pointer;
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
        }

        .feature-toggle-card:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--accent) 58%, var(--surface-border-strong));
            box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.16));
        }

        .feature-toggle-card[data-checked="true"] {
            border-color: color-mix(in srgb, var(--accent) 72%, var(--surface-border-strong));
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--accent-soft) 82%, var(--surface-bg-elevated) 18%),
                color-mix(in srgb, var(--surface-bg-elevated) 78%, var(--accent-soft) 22%)
            );
            box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.18));
        }

        .feature-toggle-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .feature-toggle-icon {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface-bg) 22%);
            color: var(--accent);
            transition: background 160ms ease, color 160ms ease, transform 160ms ease;
        }

        .feature-toggle-icon i {
            font-size: 14px;
        }

        .feature-toggle-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .feature-toggle-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.25;
        }

        .feature-toggle-description {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.35;
        }

        .feature-toggle-switch {
            width: 46px;
            height: 26px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--surface-border-strong) 66%, transparent);
            background: color-mix(in srgb, var(--surface-bg-active) 72%, var(--surface-bg) 28%);
            display: inline-flex;
            align-items: center;
            padding: 3px;
            transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        .feature-toggle-switch-handle {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-elevated) 92%, #ffffff);
            box-shadow: 0 2px 6px color-mix(in srgb, #000 24%, transparent);
            transition: transform 160ms ease;
        }

        .feature-toggle-input:checked ~ .feature-toggle-icon {
            background: color-mix(in srgb, var(--accent) 86%, var(--surface-bg));
            color: #ffffff;
            transform: scale(1.03);
        }

        .feature-toggle-input:checked ~ .feature-toggle-switch {
            background: color-mix(in srgb, var(--accent) 82%, var(--surface-bg) 18%);
            border-color: color-mix(in srgb, var(--accent) 88%, var(--surface-border-strong));
            box-shadow: 0 0 0 2px color-mix(in srgb, rgba(var(--accent-rgb), 0.24) 100%, transparent);
        }

        .feature-toggle-input:checked ~ .feature-toggle-switch .feature-toggle-switch-handle {
            transform: translateX(20px);
        }

        .feature-toggle-input:focus-visible ~ .feature-toggle-switch {
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28);
            border-color: color-mix(in srgb, var(--accent) 64%, var(--surface-border-strong));
        }

        body.feature-setup-open {
            overflow: hidden;
        }

        .feature-setup-overlay {
            position: fixed;
            inset: 0;
            z-index: 12600;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .feature-setup-overlay.active {
            display: flex;
        }

        .feature-setup-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(8, 13, 21, 0.56);
            backdrop-filter: blur(3px);
        }

        .feature-setup-card {
            position: relative;
            width: min(860px, calc(100vw - 32px));
            max-height: min(88vh, 760px);
            overflow: auto;
            border-radius: 22px;
            border: 1px solid var(--border);
            background: var(--surface-bg-elevated);
            box-shadow: 0 30px 70px rgba(17, 24, 39, 0.35);
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .feature-setup-card h2 {
            margin: 0;
            font-size: clamp(24px, 3.2vw, 34px);
            letter-spacing: -0.015em;
        }

        .feature-setup-card p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.45;
        }

        .feature-setup-note {
            margin-top: 4px;
            font-size: 12px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }

        .feature-setup-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .feature-setup-actions .neumo-btn {
            min-width: 132px;
        }

        @media (max-width: 900px) {
            .feature-toggle-list-onboarding {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .feature-setup-overlay {
                padding: 12px;
            }

            .feature-setup-card {
                width: min(560px, calc(100vw - 24px));
                max-height: calc(100vh - 24px);
                padding: 16px;
                border-radius: 16px;
            }

            .feature-toggle-card {
                min-height: 66px;
                padding: 10px;
                grid-template-columns: 34px minmax(0, 1fr) auto;
            }

            .feature-toggle-description {
                font-size: 11px;
            }
        }

        .tutorial-overlay {
            position: fixed;
            inset: 0;
            display: none;
            z-index: 12000;
        }

        .tutorial-overlay.active {
            display: block;
        }

        .tutorial-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(12, 15, 21, 0.42);
        }

        .tutorial-spotlight {
            position: fixed;
            border-radius: 14px;
            border: 2px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 0 9999px rgba(12, 15, 21, 0.64), 0 10px 36px rgba(0, 0, 0, 0.32);
            pointer-events: none;
            transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
            z-index: 12005;
        }

        .tutorial-card {
            position: fixed;
            width: min(420px, calc(100vw - 32px));
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
            z-index: 12010;
        }

        .tutorial-card.centered {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .tutorial-card h3 {
            margin: 0 0 8px;
            font-size: 20px;
        }

        .tutorial-card p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.45;
            font-size: 14px;
        }

        .tutorial-step {
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--accent);
        }

        .tutorial-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 14px;
        }

        #tutorialActionBtn {
            background: var(--accent-soft);
        }

        .tutorial-actions .neumo-btn[disabled] {
            opacity: 0.45;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .tutorial-card {
                width: calc(100vw - 24px);
                padding: 14px;
            }
        }

        .weekday-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .weekday-selector label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: var(--radius-pill);
            background: var(--neumo-bg);
            box-shadow: inset 2px 2px 4px var(--neumo-inset-dark), inset -2px -2px 4px var(--neumo-inset-light);
            font-size: 12px;
            color: var(--text-secondary);
        }

        @media (max-width: 960px) {
            .top-nav {
                flex-direction: column;
                align-items: flex-start;
            }

            .nav-right {
                width: 100%;
                flex-wrap: wrap;
            }

            .global-search {
                flex: 1;
                min-width: 160px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }

    .toolbar-wrapper {
            /* Floating pill-shaped toolbar separated from the sidebar and screen edges */
            position: fixed;
                /* place the toolbar just below the top nav using a CSS variable for robustness */
                /* add extra breathing room between the tab switcher (top-nav) and the floating toolbar */
                top: calc(var(--top-nav-height) + 20px);
            left: calc(var(--sidebar-width) + 16px); /* keep gap from sidebar */
            right: 16px; /* gap from right edge */
            max-width: calc(100% - (var(--sidebar-width) + 32px));
            height: 56px;
            z-index: 1150; /* float above most UI but below top nav */
            display: flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 999px; /* pill */
            /* Frosted glass background tuned for a pill look */
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
            border: 1px solid var(--glass-border, rgba(0,0,0,0.06));
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            transition: left 0.25s ease, right 0.25s ease, max-width 0.25s ease, background 0.2s ease, top 0.2s ease;
        }

    [data-theme="dark"] .toolbar-wrapper,
        [data-theme="tokyo-night"] .toolbar-wrapper,
        [data-theme="dracula"] .toolbar-wrapper,
        [data-theme="nord"] .toolbar-wrapper,
        [data-theme="monokai"] .toolbar-wrapper,
        [data-theme="gruvbox"] .toolbar-wrapper,
        [data-theme="solarized-dark"] .toolbar-wrapper,
        [data-theme="one-dark"] .toolbar-wrapper,
        [data-theme="midnight-blue"] .toolbar-wrapper,
        [data-theme="ocean-dark"] .toolbar-wrapper {
            /* Make dark theme toolbar mostly transparent but keep a subtle tint */
            background: rgba(30, 30, 40, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        /* When sidebar is collapsed, keep the floating pill offset from the viewport edge */
        .sidebar.collapsed ~ .main-content .toolbar-wrapper,
        body:has(.sidebar.collapsed) .toolbar-wrapper {
            left: 16px;
            max-width: calc(100% - 32px);
        }

    .toolbar-scroll-btn {
            /* position the scroll buttons inside the fixed toolbar so they don't overlap the sidebar */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            /* make scroll buttons more subtle */
            background: var(--surface-bg);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: all 0.18s ease;
            opacity: 0;
            pointer-events: none;
            border-radius: 8px;
            z-index: 12; /* above toolbar content but below sidebar and major overlays */
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }

        .toolbar-scroll-btn:hover {
            background: var(--surface-bg-hover);
            color: var(--accent);
        }

        .toolbar-scroll-btn.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .toolbar-scroll-btn i {
            font-size: 12px;
        }

        .toolbar-scroll-btn.left { left: 8px; }
        .toolbar-scroll-btn.right { right: 8px; }

        .toolbar {
            padding: 0 8px;
            display: flex;
            flex: 1 1 auto;
            gap: 12px;
            align-items: center;
            height: 100%;
            background: transparent; /* wrapper provides the pill background */
            overflow-x: auto;
            overflow-y: visible;
            scroll-behavior: smooth;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        /* Mobile: revert to a compact full-width top bar to avoid overlapping content */
        @media (max-width: 640px) {
            .toolbar-wrapper {
                left: 0 !important;
                right: 0 !important;
                /* on narrow screens place the toolbar under the mobile top nav height */
                top: calc(var(--top-nav-height-mobile));
                height: 64px;
                padding: 6px 10px;
                border-radius: 0 0 12px 12px; /* slight rounding at bottom */
                max-width: none;
                box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            }

            /* Hide scroll buttons on very small screens to avoid floating circles */
            .toolbar-scroll-btn {
                display: none;
            }

            .toolbar {
                padding: 0 10px;
                gap: 8px;
                height: 100%;
                align-items: center;
            }

            /* Slightly reduce button sizes for mobile */
            .toolbar-btn {
                padding: 8px 10px;
                font-size: 14px;
            }
        }

        .toolbar-btn {
            /* make toolbar buttons mostly transparent to reduce visual weight */
            background: var(--surface-bg);
            border: 1px solid var(--surface-border);
            color: var(--text-secondary);
            cursor: pointer;
            padding: 8px 10px;
            border-radius: 8px;
            transition: all 0.2s;
            font-size: 14px;
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        .toolbar-btn:hover {
            background: var(--surface-bg-hover);
            color: var(--text-primary);
            transform: translateY(-1px);
        }

        /* Breadcrumbs */
        .breadcrumbs {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .breadcrumb-link {
            color: var(--text-secondary);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 4px 8px;
            border-radius: 6px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }

        .breadcrumb-link:hover {
            color: var(--accent);
            background: var(--surface-bg-hover);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }

        .breadcrumb-separator {
            color: var(--border);
        }

        .breadcrumb-current {
            color: var(--text-primary);
            font-weight: 500;
        }

        .page-title-input {
            width: 100%;
            border: none;
            font-size: 36px;
            font-weight: 700;
            /* tighten the title spacing so the heading appears closer to the toolbar */
            margin-top: 12px;
            margin-bottom: 16px;
            background: transparent;
            color: var(--text-primary);
            outline: none;
            font-family: inherit;
        }

        .page-title-input::placeholder {
            color: var(--border);
        }

        /* Media container styles */
        .media-container {
            position: relative;
            margin: 16px 0;
            border-radius: 12px;
            overflow: visible;
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border: 1px solid var(--glass-border);
        }
        
        .media-container video,
        .media-container audio {
            display: block;
        }
        
        .media-container iframe {
            background: transparent;
        }
        
        /* Media action button */
        .media-action-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 4px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            z-index: 20;
            transition: all 0.2s ease;
        }
        
        .media-container:hover .media-action-btn,
        .resizable-media:hover .media-action-btn,
        .media-wrapper:hover .media-action-btn {
            display: flex;
        }
        
        .media-action-btn:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
        }
        
        /* Media dropdown menu */
        .media-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(22, 30, 45, 0.16);
            border-radius: 12px;
            box-shadow: 0 12px 30px rgba(22, 30, 45, 0.2);
            min-width: 160px;
            z-index: 100;
            display: none;
            overflow: hidden;
        }
        
        .media-dropdown.active {
            display: block;
        }

        [data-theme="dark"] .media-dropdown {
            background: rgba(20, 19, 18, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.14);
        }
        
        .media-dropdown-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
            transition: all 0.15s ease;
        }
        
        .media-dropdown-item:hover {
            background: rgba(22, 30, 45, 0.08);
        }
        
        .media-dropdown-item i {
            width: 16px;
            color: var(--text-secondary);
        }
        
        .media-dropdown-item.danger {
            color: #dc2626;
        }
        
        .media-dropdown-item.danger i {
            color: #dc2626;
        }
        
        .media-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }

        /* Resizable media and images */
        .resizable-media {
            position: relative;
            display: inline-block;
            max-width: 100%;
        }
        
        .resizable-media img,
        .resizable-media video,
        .resizable-media iframe {
            display: block;
            max-width: 100%;
        }
        
        .resizable-media:hover .resize-handle,
        .resizable-media.resizing .resize-handle {
            opacity: 1;
        }
        
        .resize-handle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: var(--accent);
            border: 2px solid white;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 20;
            cursor: nwse-resize;
        }
        
        .resize-handle.se {
            bottom: -6px;
            right: -6px;
        }
        
        .resize-handle.sw {
            bottom: -6px;
            left: -6px;
            cursor: nesw-resize;
        }
        
        .resizable-media::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px solid transparent;
            border-radius: 4px;
            pointer-events: none;
            transition: border-color 0.2s ease;
        }
        
        .resizable-media:hover::before,
        .resizable-media.resizing::before {
            border-color: var(--accent);
        }
        
        .resizable-media .size-indicator {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        
        .resizable-media.resizing .size-indicator {
            opacity: 1;
        }

        /* Tags System */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0;
            margin-bottom: 12px;
            align-items: center;
        }
        
        .tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 12px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border: 1px solid var(--surface-border);
            border-radius: 14px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tag:hover {
            background: rgba(var(--accent-rgb, 66, 153, 225), 0.6);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            color: white;
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .tag .tag-remove {
            font-size: 10px;
            opacity: 0.7;
            margin-left: 2px;
        }
        
        .tag .tag-remove:hover {
            opacity: 1;
        }
        
        .tag-input-wrapper {
            display: inline-flex;
            align-items: center;
        }
        
        .tag-input {
            border: none;
            background: transparent;
            outline: none;
            font-size: 12px;
            color: var(--text-primary);
            padding: 4px 8px;
            min-width: 80px;
        }
        
        .tag-input::placeholder {
            color: var(--text-secondary);
        }
        
        .add-tag-btn {
            background: none;
            border: 1px dashed var(--border);
            border-radius: 12px;
            padding: 4px 10px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s ease;
        }
        
        .add-tag-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        
        /* Tag colors */
        .tag[data-color="red"] { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
        .tag[data-color="orange"] { background: #ffedd5; color: #ea580c; border-color: #fdba74; }
        .tag[data-color="yellow"] { background: #fef9c3; color: #ca8a04; border-color: #fde047; }
        .tag[data-color="green"] { background: #dcfce7; color: #16a34a; border-color: #86efac; }
        .tag[data-color="blue"] { background: #dbeafe; color: #2563eb; border-color: #93c5fd; }
        .tag[data-color="purple"] { background: #f3e8ff; color: #9333ea; border-color: #d8b4fe; }
        .tag[data-color="pink"] { background: #fce7f3; color: #db2777; border-color: #f9a8d4; }
        .tag[data-color="gray"] { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
        
        /* Dark theme tag adjustments */
        [data-theme="dark"] .tag[data-color="red"] { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
        [data-theme="dark"] .tag[data-color="orange"] { background: #7c2d12; color: #fdba74; border-color: #9a3412; }
        [data-theme="dark"] .tag[data-color="yellow"] { background: #713f12; color: #fde047; border-color: #854d0e; }
        [data-theme="dark"] .tag[data-color="green"] { background: #14532d; color: #86efac; border-color: #166534; }
        [data-theme="dark"] .tag[data-color="blue"] { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
        [data-theme="dark"] .tag[data-color="purple"] { background: #581c87; color: #d8b4fe; border-color: #6b21a8; }
        [data-theme="dark"] .tag[data-color="pink"] { background: #831843; color: #f9a8d4; border-color: #9d174d; }
        [data-theme="dark"] .tag[data-color="gray"] { background: #374151; color: #d1d5db; border-color: #4b5563; }
        
        /* Sidebar tag filter */
        .sidebar-tags-filter {
            padding: 8px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .sidebar-tags-filter-title {
            font-size: 11px;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .sidebar-tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        .sidebar-tag {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            cursor: pointer;
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            color: var(--text-secondary);
            border: 1px solid var(--glass-border);
            transition: all 0.2s ease;
        }
        
        .sidebar-tag:hover,
        .sidebar-tag.active {
            border-color: var(--accent);
            color: var(--accent);
        }
        
        .sidebar-tag.active {
            background: var(--accent);
            color: white;
        }

        .sidebar-shortcuts {
            margin: 12px 12px 10px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            display: grid;
            gap: 8px;
        }

        .sidebar-shortcuts-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .sidebar-shortcut-add {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            border: 1px solid var(--surface-border-strong);
            background: var(--surface-bg-hover);
            color: var(--text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
        }

        .sidebar-shortcut-add:hover {
            color: var(--accent);
            border-color: rgba(var(--accent-rgb), 0.5);
        }

        .sidebar-shortcuts-list {
            display: grid;
            gap: 6px;
        }

        .sidebar-shortcuts-empty {
            font-size: 11px;
            color: var(--text-secondary);
            padding: 6px 2px 2px;
        }

        .sidebar-shortcut-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 7px 10px;
            border-radius: 10px;
            border: 1px solid var(--surface-border-strong);
            background: var(--surface-bg-hover);
            color: var(--text-primary);
            font-size: 12px;
            cursor: pointer;
            text-align: left;
            transition: all var(--transition-fast);
        }

        .sidebar-shortcut-btn:hover {
            border-color: rgba(var(--accent-rgb), 0.45);
            background: var(--surface-bg-active);
        }

        .sidebar-shortcut-btn .custom-shortcut-icon {
            width: 16px;
            min-width: 16px;
            font-size: 13px;
        }

        /* Slash Commands Menu - Liquid Glass */
        .slash-menu {
            position: absolute;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid var(--surface-border);
            border-radius: 14px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
            max-height: 320px;
            overflow-y: auto;
            z-index: 1000;
            width: 280px;
            display: none;
        }
        
        .slash-menu.active {
            display: block;
        }
        
        .slash-menu-header {
            padding: 10px 14px;
            font-size: 11px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 600;
            border-bottom: 1px solid var(--surface-border);
            background: var(--surface-bg);
        }
        
        .slash-menu-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        
        .slash-menu-item:hover,
        .slash-menu-item.selected {
            background: var(--surface-bg-hover);
        }
        
        .slash-menu-item-icon {
            width: 36px;
            height: 36px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--text-secondary);
            border: 1px solid var(--surface-border);
        }
        
        .slash-menu-item-content {
            flex: 1;
        }
        
        .slash-menu-item-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .slash-menu-item-desc {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .slash-menu-empty {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
        }

        /* Status Bar - Hidden, moved to bottom taskbar */
        .status-bar {
            display: none;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Theme Switcher Button - Liquid Glass */
        .theme-switcher-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
            color: var(--accent);
            border: 1px solid var(--surface-border);
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            transition: transform 0.2s, background 0.2s;
        }

        .theme-switcher-btn:hover {
            transform: scale(1.1);
            background: var(--surface-bg-hover);
        }

        /* Theme Panel - Liquid Glass */
        .theme-panel {
            position: fixed;
            top: 80px;
            right: 20px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid var(--surface-border);
            border-radius: 16px;
            padding: 20px;
            width: 320px;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 200;
            box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
            display: none;
            animation: slideIn 0.3s ease;
        }

        .theme-panel.active {
            display: block;
        }

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



        .theme-panel-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }

        .theme-panel-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .apply-mode-toggle {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .mode-btn {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
            border-radius: 10px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }

        .mode-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .page-selector {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            border: 1px solid var(--surface-border);
        }

        .page-selector.active {
            display: block;
        }

        .page-selector-title {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-secondary);
        }

        .page-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            margin-bottom: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .page-checkbox:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        .page-checkbox input[type="checkbox"] {
            cursor: pointer;
        }

        .theme-presets {
            margin-bottom: 20px;
        }

        .preset-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-secondary);
        }

        .preset-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .preset-card {
            padding: 15px;
            border: 2px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .preset-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .preset-card.active {
            border-color: var(--accent);
        }

        .preset-card.active::after {
            content: '\2713';
            position: absolute;
            top: 4px;
            right: 4px;
            background: var(--accent);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .preset-preview {
            display: flex;
            gap: 2px;
            margin-bottom: 8px;
            height: 30px;
        }

        .preset-color {
            flex: 1;
            border-radius: 4px;
        }

        .preset-name {
            font-size: 12px;
            font-weight: 500;
        }

        .custom-colors {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }

        .custom-theme-manager {
            display: grid;
            gap: 10px;
            margin-bottom: 12px;
            padding: 10px;
            border: 1px solid var(--surface-border);
            border-radius: 10px;
            background: var(--surface-bg-elevated);
        }

        .custom-theme-row {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
        }

        .custom-theme-row label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .custom-theme-row select {
            width: 100%;
            min-width: 0;
            padding: 6px 10px;
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            background: var(--glass-01);
            color: var(--text-primary);
            font-size: 12px;
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        .custom-theme-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .custom-theme-actions.custom-theme-actions-io {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .custom-theme-actions .neumo-btn {
            width: 100%;
            min-width: 0;
            padding: 7px 8px;
            border-radius: 10px;
            font-size: 12px;
        }

        .custom-theme-status {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.35;
        }

        .custom-theme-inline-hint {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .color-input-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .color-input-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .color-input-item label {
            font-size: 12px;
            color: var(--text-secondary);
            flex: 1;
        }

        .color-input-item input[type="color"] {
            width: 40px;
            height: 30px;
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="color"].nf-color-native-input {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            opacity: 0 !important;
            pointer-events: none !important;
            overflow: hidden !important;
            clip-path: inset(50%) !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .nf-color-control {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 132px;
        }

        .nf-color-trigger {
            width: 100%;
            min-height: 32px;
            border-radius: 10px;
            border: 1px solid var(--surface-border-strong);
            background: linear-gradient(145deg, var(--surface-bg), var(--surface-bg-elevated));
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            cursor: pointer;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .nf-color-trigger:hover {
            border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border-strong));
            transform: translateY(-1px);
        }

        .nf-color-control.is-open .nf-color-trigger {
            border-color: color-mix(in srgb, var(--accent) 68%, var(--surface-border-strong));
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
        }

        .nf-color-swatch {
            width: 16px;
            height: 16px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.32);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
            flex-shrink: 0;
            background: #4f46e5;
        }

        .nf-color-value {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nf-color-popover {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 250px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid rgba(24, 34, 58, 0.22);
            background: #f5f8ff;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
            z-index: 4200;
            display: grid;
            gap: 10px;
            isolation: isolate;
            opacity: 1;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        [data-theme="dark"] .nf-color-popover,
        body[data-theme-key] .nf-color-popover {
            border-color: rgba(196, 214, 255, 0.24);
            background: #1b2436;
            color: #eef3ff;
        }

        .nf-color-popover[hidden] {
            display: none !important;
        }

        .nf-color-control:not(.is-open) .nf-color-popover {
            display: none;
        }

        .nf-color-control.is-open .nf-color-popover {
            display: grid;
        }

        .nf-color-control.open-up .nf-color-popover {
            top: auto;
            bottom: calc(100% + 8px);
        }

        .nf-color-panel {
            --nf-picker-hue: 220;
            position: relative;
            height: 136px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
            background: hsl(var(--nf-picker-hue), 100%, 50%);
            cursor: crosshair;
            overflow: hidden;
            touch-action: none;
        }

        .nf-color-panel::before,
        .nf-color-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .nf-color-panel::before {
            background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
        }

        .nf-color-panel::after {
            background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
        }

        .nf-color-thumb {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 7px rgba(0, 0, 0, 0.32);
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 2;
        }

        .nf-color-hue-wrap {
            padding: 1px 0;
        }

        .nf-color-hue {
            width: 100%;
            height: 12px;
            margin: 0;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
            background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
        }

        .nf-color-hue::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
            background: transparent;
        }

        .nf-color-hue::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
            background: transparent;
        }

        .nf-color-hue::-moz-range-track {
            height: 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
            background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
        }

        .nf-color-fields {
            display: grid;
            gap: 6px;
        }

        .nf-color-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-radius: 10px;
            border: 1px solid var(--surface-border);
            background: #eaf0ff;
            padding: 6px 9px;
        }

        [data-theme="dark"] .nf-color-field,
        body[data-theme-key] .nf-color-field {
            border-color: rgba(196, 214, 255, 0.2);
            background: #25304a;
        }

        .nf-color-field > span {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .nf-color-hex {
            border: 0;
            background: transparent;
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            width: 86px;
            text-align: right;
            text-transform: uppercase;
            text-decoration: none;
            outline: none;
        }

        .custom-theme-setup-color-field .nf-color-control {
            margin-left: auto;
        }

        /* Font Settings */
        .font-settings, .animation-settings {
            margin-top: 15px;
        }

        .font-input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .font-input-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .font-input-item label {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .font-input-item select {
            padding: 6px 10px;
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            background: var(--glass-01);
            color: var(--text-primary);
            font-size: 12px;
            cursor: pointer;
            min-width: 140px;
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        /* Animation Toggle */
        .animation-toggle {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
        }

        @media (max-width: 640px) {
            .custom-theme-row {
                grid-template-columns: 1fr;
            }
            .custom-theme-actions {
                grid-template-columns: 1fr;
            }
            .font-input-item {
                flex-wrap: wrap;
            }
            .font-input-item select {
                min-width: 0;
                width: 100%;
            }
            .font-settings, .animation-settings {
                max-width: 100%;
                overflow: hidden;
            }
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--border);
            transition: 0.3s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--accent);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

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

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

        body.animations-enabled .page-item {
            animation: slideIn 0.2s ease;
        }

        body.animations-enabled .todo-item {
            animation: slideUp 0.2s ease;
        }

        body.animations-enabled .modal.active .modal-content {
            animation: scaleIn 0.2s ease;
        }

        body.animations-enabled .editor-container {
            animation: fadeIn 0.3s ease;
        }

        .theme-actions {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }

        .reset-theme-btn {
            flex: 1;
            padding: 8px;
            border: 1px solid var(--glass-border);
            background: var(--glass-01);
            color: var(--text-primary);
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }

        .reset-theme-btn:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        /* Sidebar Styles */
        .sidebar {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            background: var(--sidebar-bg, var(--glass-01));
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            backdrop-filter: blur(20px) saturate(160%);
            border-right: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
            z-index: 1200;
            transition: width 0.3s ease, min-width 0.3s ease, background-color 0.3s ease;
        }

        /* Rendering/compositing hints to avoid transient artifacts (vertical streaks) on some GPUs/browsers */
        .sidebar, .app-container, .pages-list, .page-item, .emoji-picker, .modal-content {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            will-change: transform, opacity;
        }

        .sidebar.collapsed {
            width: 0;
            min-width: 0;
            margin-left: 0;
            border-right: none;
        }

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

        .workspace-name {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .sidebar-section {
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .page-item {
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
            transition: background 0.2s;
            position: relative;
        }
        
        .page-item .page-item-icons {
            display: none;
            align-items: center;
            gap: 8px;
        }
        
        .page-item:hover .page-item-icons {
            display: flex;
        }

        .page-item:hover {
            background: var(--bg-hover);
        }

        .page-item.active {
            background: var(--bg-hover);
        }

        .page-item i {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .page-item-icons i {
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
        }
        
        .page-item-icons i:hover {
            opacity: 1;
        }

        .page-theme-indicator {
            position: absolute;
            right: 12px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid var(--border);
        }
        
        .page-item:hover .page-theme-indicator {
            display: none;
        }


        .add-page-btn {
            width: 100%;
            padding: 8px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 6px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
        }

        .add-page-btn:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        /* Main Content Area */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--editor-bg);
            transition: background-color 0.3s ease;
            min-width: 0;
            position: relative;
            padding-bottom: 52px; /* leave room for fixed bottom storage bar */
        }

        .toolbar {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            background: var(--bg-primary);
            transition: background-color 0.3s ease;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .toolbar::-webkit-scrollbar {
            display: none;
        }

        /* If toolbar is inside the fixed toolbar-wrapper use transparent background
           (wrapper provides the frosted glass) and ensure it fills wrapper height so
           controls remain visible and interactive. Also bring scroll buttons above
           toolbar contents to avoid accidental overlays. */
        .toolbar-wrapper .toolbar {
            background: transparent;
            height: 100%;
            align-items: center;
            padding: 0 12px;
        }

        .toolbar-wrapper .toolbar-btn {
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .toolbar-scroll-btn {
            z-index: 1120;
        }

        .toolbar-btn {
            padding: 6px 12px;
            border: none;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .toolbar-btn:hover {
            background: var(--bg-hover);
        }

        .toolbar-btn.active {
            background: var(--accent);
            color: white;
        }

        .toolbar-separator {
            width: 1px;
            height: 24px;
            background: var(--border);
            margin: 0 4px;
        }

        .word-count-display {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 4px 10px;
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
        }

        .focus-mode-quick-toggle {
            position: fixed !important;
            right: 20px !important;
            bottom: 176px !important;
            z-index: 2470 !important;
            width: 52px !important;
            height: 52px !important;
            padding: 0 !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 0 !important;
            border: 1px solid rgba(var(--accent-rgb), 0.22);
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(16px) saturate(170%);
            backdrop-filter: blur(16px) saturate(170%);
            color: var(--text-primary);
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .focus-mode-quick-toggle i {
            font-size: 16px;
            line-height: 1;
        }

        .focus-mode-quick-toggle:hover {
            transform: translateY(-1px);
            border-color: rgba(var(--accent-rgb), 0.42);
        }

        .focus-mode-quick-toggle.is-active {
            background: var(--accent) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: 0 8px 14px rgba(var(--accent-rgb), 0.24);
        }

        body.focus-mode .focus-mode-quick-toggle {
            bottom: 20px !important;
        }

        .export-disclaimer {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin-bottom: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(var(--accent-rgb), 0.22);
            background: rgba(var(--accent-rgb), 0.08);
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.45;
        }

        .export-disclaimer i {
            color: var(--accent);
            margin-top: 1px;
        }

        .import-drop-help {
            margin-top: 8px;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.4;
            max-width: 520px;
        }

        .import-drop-actions {
            margin-top: 12px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .google-docs-paste-area {
            min-height: 180px;
            max-height: 340px;
            overflow: auto;
            border-radius: 12px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            padding: 12px;
            color: var(--text-primary);
            outline: none;
            line-height: 1.55;
        }

        .google-docs-paste-area:focus {
            border-color: rgba(var(--accent-rgb), 0.5);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
        }

        .google-docs-paste-area:empty::before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
            pointer-events: none;
        }

        .shortcut-modal-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .shortcut-modal-error {
            margin-top: 10px;
            color: #b84f4f;
            font-size: 12px;
            line-height: 1.4;
        }

        .shortcut-settings-list {
            display: grid;
            gap: 8px;
        }

        .shortcut-settings-empty {
            padding: 10px;
            border: 1px dashed var(--surface-border-strong);
            border-radius: 10px;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .shortcut-settings-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 10px;
            border-radius: 10px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
        }

        .shortcut-settings-copy {
            min-width: 0;
            display: grid;
            gap: 2px;
        }

        .shortcut-settings-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-primary);
            font-weight: 600;
            min-width: 0;
        }

        .shortcut-settings-url {
            color: var(--text-secondary);
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 360px;
        }

        .shortcut-settings-actions {
            display: inline-flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .shortcut-settings-action {
            border: 1px solid var(--surface-border-strong);
            border-radius: 8px;
            background: var(--surface-bg-hover);
            color: var(--text-secondary);
            padding: 5px 8px;
            font-size: 11px;
            cursor: pointer;
            transition: all var(--transition-fast);
            min-height: 30px;
        }

        .shortcut-settings-action:hover {
            color: var(--text-primary);
            border-color: rgba(var(--accent-rgb), 0.35);
        }

        .shortcut-settings-action.danger {
            color: #b84f4f;
        }

        .shortcut-settings-action.danger:hover {
            color: #9e2f2f;
            border-color: rgba(184, 79, 79, 0.42);
            background: rgba(184, 79, 79, 0.08);
        }

        #view-notes .editor-container {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
            align-items: start;
        }

        body.notes-split-active #view-notes .editor-container {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .notes-pane {
            min-width: 0;
        }

        .notes-pane-secondary {
            display: none;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid var(--surface-border);
            background: linear-gradient(155deg, var(--surface-bg), var(--surface-bg-hover));
            box-shadow: inset 0 0 0 1px var(--surface-border);
        }

        body.notes-split-active .notes-pane-secondary {
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            gap: 10px;
        }

        .split-pane-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }

        .split-pane-title-wrap {
            min-width: 0;
            flex: 1;
            display: grid;
            gap: 6px;
        }

        .split-pane-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .split-note-select {
            margin: 0;
            min-height: 38px;
        }

        .split-pane-actions {
            display: inline-flex;
            gap: 6px;
        }

        .split-pane-action {
            min-height: 34px;
            font-size: 11px;
            padding: 6px 9px;
        }

        .split-pane-meta {
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.4;
            min-height: 16px;
        }

        .split-editor {
            min-height: 360px;
            max-height: min(70vh, 860px);
            overflow: auto;
            padding: 14px;
            border-radius: 10px;
            border: 1px solid var(--surface-border-strong);
            background: var(--bg-primary);
        }

        body.notes-split-active #splitNotesToggleBtn {
            background: var(--accent);
            color: #ffffff;
        }

        .editor-container {
            flex: 1;
            overflow-y: auto;
            padding: 40px;
            width: 100%;
        }

        .page-title {
            font-size: 40px;
            font-weight: 700;
            border: none;
            outline: none;
            width: 100%;
            margin-top: 24px;
            margin-bottom: 20px;
            color: var(--text-primary);
            background: transparent;
        }

        .editor {
            min-height: 500px;
            outline: none;
            font-size: 16px;
            line-height: 1.8;
            color: var(--text-primary);
        }

        .editor h1 {
            font-size: 32px;
            font-weight: 600;
            margin: 20px 0;
        }

        .editor h2 {
            font-size: 24px;
            font-weight: 600;
            margin: 18px 0;
        }

        .editor h3 {
            font-size: 20px;
            font-weight: 600;
            margin: 16px 0;
        }

        .editor p {
            margin: 12px 0;
        }

        .editor ul, .editor ol {
            margin: 12px 0;
            padding-left: 30px;
        }

        .editor ol {
            list-style-type: decimal;
        }

        .editor ol ol {
            list-style-type: lower-alpha;
        }

        .editor ol ol ol {
            list-style-type: lower-roman;
        }

        .editor ol ol ol ol {
            list-style-type: decimal;
        }

        .editor li {
            margin: 4px 0;
        }

        .editor blockquote {
            border-left: 3px solid var(--accent);
            padding: 12px 20px;
            margin: 15px 0;
            color: var(--text-secondary);
            background: var(--surface-bg);
            border-radius: 0 10px 10px 0;
        }

        .editor pre {
            background: var(--code-block-bg);
            border: 1px solid var(--surface-border);
            padding: 15px;
            border-radius: 12px;
            overflow-x: auto;
            margin: 15px 0;
        }

        .editor code {
            background: var(--code-inline-bg);
            padding: 3px 8px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
        }

        /* Table Styles */
        .editor table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .editor table th,
        .editor table td {
            border: 1px solid var(--surface-border);
            padding: 10px 12px;
            text-align: left;
        }

        .editor table th {
            background: var(--surface-bg);
            font-weight: 600;
        }

        .editor table tr:hover td {
            background: var(--surface-bg-hover);
        }

        /* Checklist Styles */
        .editor .checklist-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            margin: 4px 0;
            background: var(--surface-bg);
            border: 1px solid var(--surface-border);
            border-radius: 8px;
        }

        .editor .checklist-item:last-child {
            border-bottom: none;
        }

        .editor .checklist-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }

        .editor .checklist-item.checked .checklist-text {
            text-decoration: line-through;
            color: var(--text-secondary);
        }

        .editor .checklist-text {
            flex: 1;
            outline: none;
        }

        /* Collapsible Section Styles */
        .editor .collapsible-section {
            margin: 15px 0;
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            overflow: visible;
            position: relative;
            background: var(--glass-01);
        }

        .editor .collapsible-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            padding-right: 45px;
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            cursor: pointer;
            user-select: none;
            border-radius: 12px 12px 0 0;
        }

        .editor .collapsible-header:hover {
            background: var(--glass-01);
        }

        .editor .collapsible-icon {
            transition: transform 0.3s ease;
        }

        .editor .collapsible-section.collapsed .collapsible-icon {
            transform: rotate(-90deg);
        }

        .editor .collapsible-title {
            font-weight: 600;
            flex: 1;
            outline: none;
        }

        .editor .collapsible-content {
            padding: 15px;
            border-top: 1px solid var(--glass-border);
        }

        .editor .collapsible-section.collapsed .collapsible-content {
            display: none;
        }
        
        /* Collapsible action button */
        .collapsible-action-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border: 1px solid var(--glass-border);
            border-radius: 6px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            z-index: 20;
            transition: all 0.2s ease;
        }
        
        .collapsible-section:hover .collapsible-action-btn {
            display: flex;
        }
        
        .collapsible-action-btn:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            color: var(--text-primary);
        }
        
        /* Collapsible dropdown menu */
        .collapsible-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            min-width: 140px;
            z-index: 100;
            display: none;
            overflow: hidden;
        }
        
        .collapsible-dropdown.active {
            display: block;
        }
        
        .collapsible-dropdown-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
            transition: all 0.15s ease;
        }
        
        .collapsible-dropdown-item:hover {
            background: var(--surface-bg-hover);
        }
        
        .collapsible-dropdown-item i {
            width: 16px;
            color: var(--text-secondary);
        }
        
        .collapsible-dropdown-item.danger {
            color: #dc2626;
        }
        
        .collapsible-dropdown-item.danger i {
            color: #dc2626;
        }

        /* Image Styles */
        .editor img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
            cursor: pointer;
        }

        .editor img:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .editor .image-container {
            position: relative;
            display: inline-block;
            margin: 15px 0;
        }

        .editor .image-container img {
            margin: 0;
        }

        .editor .image-resize-handle {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 4px;
            cursor: se-resize;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .editor .image-container:hover .image-resize-handle {
            opacity: 0.7;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* lighter backdrop so dialogs don't make the whole app feel too dark */
            background: rgba(0, 0, 0, 0.24);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            /* use theme-aware glass variable and slightly reduce blur/shadow so modal reads brighter */
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
            border-radius: 18px;
            padding: 24px;
            width: 90%;
            max-width: 520px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
        }

        .modal-header {
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .modal-body {
            margin-bottom: 20px;
        }

        .modal-input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--surface-border);
            border-radius: 10px;
            font-size: 14px;
            outline: none;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
            transition: border-color 0.2s, background 0.2s;
        }

        .modal-input:focus {
            border-color: var(--accent);
            background: var(--surface-bg-hover);
        }

        .custom-prompt-modal-content {
            max-width: 500px;
        }

        .custom-prompt-label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
        }

        .custom-confirm-modal-content {
            max-width: 500px;
        }

        .custom-confirm-message {
            margin: 0;
            font-size: 15px;
            line-height: 1.5;
            color: var(--text-primary);
            white-space: pre-wrap;
        }

        .custom-theme-setup-modal-content {
            max-width: 560px;
        }

        .custom-theme-setup-subtitle {
            margin: 0 0 14px 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.45;
        }

        .custom-theme-setup-section-title {
            margin: 10px 0 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }

        .custom-theme-setup-field {
            margin-bottom: 12px;
        }

        .custom-theme-setup-field label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
        }

        .custom-theme-setup-color-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .custom-theme-setup-color-grid-surfaces {
            margin-bottom: 16px;
        }

        .custom-theme-setup-color-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 12px;
            border: 1px solid var(--surface-border);
            border-radius: 10px;
            background: var(--surface-bg);
        }

        .custom-theme-setup-color-field label {
            margin: 0;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .custom-theme-setup-color-input {
            width: 36px;
            height: 28px;
            border: 1px solid var(--surface-border);
            border-radius: 8px;
            background: transparent;
            padding: 0;
            cursor: pointer;
        }

        .custom-theme-setup-preview-card {
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            padding: 14px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
        }

        .custom-theme-setup-preview-top {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
        }

        .custom-theme-setup-preview-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.45;
        }

        .custom-theme-setup-preview-name {
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        .custom-theme-setup-preview-meta {
            margin-top: 3px;
            font-size: 12px;
            opacity: 0.78;
        }

        .custom-theme-setup-preview-chips {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .custom-theme-setup-preview-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        @media (max-width: 560px) {
            .custom-theme-setup-color-grid {
                grid-template-columns: 1fr;
            }

        .custom-theme-setup-color-grid-surfaces {
            margin-bottom: 16px;
        }
        }

        .new-page-modal-content {
            max-width: 680px;
        }

        #newPageModal {
            background: rgba(10, 16, 26, 0.32);
        }

        #newPageModal .new-page-modal-content {
            background: color-mix(in srgb, var(--bg-primary) 84%, #ffffff 16%);
            border: 1px solid rgba(15, 24, 39, 0.12);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            box-shadow: 0 24px 58px rgba(6, 11, 23, 0.22);
        }

        #newPageModal .modal-input,
        #newPageModal .template-preview-panel,
        #newPageModal .template-preview-icon,
        #newPageModal .template-preview-tag {
            background: color-mix(in srgb, var(--bg-primary) 90%, #ffffff 10%);
            border-color: rgba(15, 24, 39, 0.12);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        #newPageModal .template-preview-task-row {
            border-top-color: rgba(15, 24, 39, 0.12);
        }

        [data-theme="dark"] #newPageModal {
            background: rgba(3, 6, 12, 0.54);
        }

        [data-theme="dark"] #newPageModal .new-page-modal-content {
            background: rgba(18, 21, 30, 0.98);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 28px 62px rgba(0, 0, 0, 0.54);
        }

        [data-theme="dark"] #newPageModal .modal-input,
        [data-theme="dark"] #newPageModal .template-preview-panel,
        [data-theme="dark"] #newPageModal .template-preview-icon,
        [data-theme="dark"] #newPageModal .template-preview-tag {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.14);
        }

        [data-theme="dark"] #newPageModal .template-preview-task-row {
            border-top-color: rgba(255, 255, 255, 0.14);
        }

        .template-preview-panel {
            margin-top: 14px;
            border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
            border-radius: 14px;
            background: var(--surface-bg);
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .template-preview-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .template-preview-title-wrap {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            min-width: 0;
        }

        .template-preview-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
            background: var(--surface-bg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex: 0 0 36px;
        }

        .template-preview-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .template-preview-description {
            margin-top: 4px;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.4;
        }

        .template-suggest-btn {
            white-space: nowrap;
            padding: 8px 12px;
            font-size: 12px;
            flex-shrink: 0;
        }

        .template-preview-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .template-preview-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .template-preview-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .template-preview-tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
            background: var(--surface-bg);
            font-size: 11px;
            color: var(--text-primary);
        }

        .template-preview-task-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-top: 6px;
            border-top: 1px dashed var(--glass-border, rgba(255,255,255,0.08));
        }

        .template-task-toggle-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .template-task-summary {
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.3;
        }

        .template-preview-task-row.disabled {
            opacity: 0.55;
        }

        @media (max-width: 640px) {
            .new-page-modal-content {
                max-width: 94vw;
                padding: 18px;
            }

            .template-preview-head {
                flex-direction: column;
                align-items: stretch;
            }

            .template-suggest-btn {
                width: 100%;
            }
        }

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

        /* ===== Add-Item Modal ===== */
        .add-item-modal-content {
            max-width: 560px;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
        }

        .add-item-modal-content .modal-body {
            overflow-y: auto;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding-right: 4px;
        }

        .add-item-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .add-item-field label {
            font-size: 0.73rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-secondary);
        }

        .add-item-field .modal-input {
            margin: 0;
        }

        .add-item-field textarea.modal-input {
            resize: vertical;
            min-height: 56px;
        }

        .add-item-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        @media (max-width: 500px) {
            .add-item-row {
                grid-template-columns: 1fr;
            }
            .add-item-modal-content {
                max-height: 92vh;
            }
        }

        .btn {
            padding: 10px 18px;
            border: 1px solid var(--surface-border);
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            transition: all 0.2s;
            transition: opacity 0.2s;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .btn-primary {
            background: var(--accent);
            color: white;
        }

        .btn-secondary {
            background: var(--glass-01);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
        }

        .btn-danger {
            background: rgba(211, 47, 47, 0.12);
            border-color: rgba(211, 47, 47, 0.34);
            color: #c62828;
        }

        .btn-danger:hover {
            opacity: 1;
            background: rgba(211, 47, 47, 0.18);
        }

        .custom-theme-setup-delete-btn {
            margin-right: auto;
        }

        /* Bottom storage/taskbar */

        .storage-options {
            position: fixed;
            bottom: 0;
            left: var(--sidebar-width, 280px);
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            background: var(--surface-bg);
            -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
            border-top: 1px solid var(--surface-border);
            box-shadow: 0 -6px 30px rgba(0,0,0,0.08);
            z-index: 100;
            transition: left 0.25s ease, opacity 0.15s ease;
        }

        .taskbar-save-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            padding: 6px 10px;
            border-radius: 8px;
            background: rgba(0,0,0,0.03);
            color: var(--text-secondary);
            border: 1px solid var(--surface-border);
        }

        .taskbar-save-status.saved { color: var(--accent); }
        .taskbar-save-status.saving { color: var(--accent-soft); }

        .taskbar-divider { width: 1px; height: 24px; background: var(--surface-border); margin: 0 6px; }

        .storage-btn {
            padding: 8px 12px;
            font-size: 13px;
            border-radius: 8px;
            display: inline-flex;
            gap: 8px;
            align-items: center;
            background: var(--glass-01);
            border: 1px solid var(--border);
            color: var(--text-primary);
            cursor: pointer;
        }

        .storage-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }

        @media (max-width: 900px) {
            .storage-options {
                left: auto !important;
                right: 12px !important;
                bottom: 16px !important;
                width: auto !important;
                padding: 8px !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 12px !important;
                border-radius: 12px !important;
                box-shadow: 0 6px 30px rgba(0,0,0,0.25);
                z-index: 130;
            }

            .storage-btn .btn-text { display: none; }
        }

        /* Toggle Button */
        .toggle-sidebar {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 100;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            display: none;
        }

        /* Mobile-first responsive improvements */
        @media (max-width: 768px) {
            :root {
                --sidebar-width: 280px;
            }

            .top-nav {
                margin: 12px 12px 8px;
                padding: 12px 14px;
                gap: 12px;
                top: 8px;
            }

            .nav-left {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .nav-divider { display: none; }

            .view-tabs {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 4px;
            }

            .tabs-shell .tab-clock-embed {
                display: none;
            }

            .view-tabs::-webkit-scrollbar { display: none; }

            .view-tab {
                padding: 6px 10px;
                font-size: 11px;
                white-space: nowrap;
            }

            .nav-right {
                width: 100%;
            }

            .global-search { width: 100%; }

            .view-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .summary-grid {
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                gap: 12px;
            }

            .today-grid {
                grid-template-columns: 1fr;
            }

            .task-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .task-actions {
                align-self: flex-end;
            }

            /* Use circular toggle on mobile (keep the floating circular control)
               and hide the hamburger `.toggle-sidebar` to avoid duplicates. */
            .toggle-sidebar {
                display: none;
            }
            
            .sidebar {
                position: fixed;
                z-index: 99;
                height: 100vh;
                left: 0;
                transform: translateX(0);
                transition: transform 0.3s ease;
            }
            
            .sidebar.collapsed {
                transform: translateX(-100%);
                width: var(--sidebar-width);
                min-width: var(--sidebar-width);
            }
            
            /* Mobile sidebar overlay */
            .sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.55);
                /* sit above sidebar but below the toolbar */
                z-index: 105;
            }
            
            .sidebar-overlay.active {
                display: block;
            }

            .sidebar-toggle-btn {
                /* Show the floating circular toggle on small screens (circular UI)
                   - keep sizing adjusted for touch targets */
                /* position below the fixed toolbar so it doesn't overlap */
                top: calc(64px + 12px);
                left: 12px;
                width: 40px;
                height: 40px;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .sidebar-toggle-btn.collapsed {
                left: 12px;
            }
            
            .editor-container {
                /* add top padding to account for fixed toolbar on mobile */
                padding: 140px 16px 40px 16px;
            }
            
            .page-title-input {
                font-size: 28px;
                margin-top: 20px;
            }

            /* Touch-friendly toolbar */
            .toolbar-wrapper {
                left: 0 !important;
                right: 0 !important;
                max-width: none !important;
                z-index: 110;
            }

            .toolbar {
                padding: 8px 12px;
                gap: 4px;
                /* Make toolbar sit above the sidebar overlay so controls remain accessible */
            }
            
            .toolbar-btn {
                min-width: 40px;
                min-height: 40px;
                padding: 10px;
            }
            
            .toolbar-separator {
                margin: 0 4px;
            }
            
            .toolbar-scroll-btn {
                width: 40px;
                height: 40px;
            }
            
            .toolbar-scroll-btn i {
                font-size: 14px;
            }

            /* Larger touch targets for page items */
            .page-item {
                min-height: 44px;
                padding: 12px 16px;
            }

            /* Make sidebar content start below the fixed toolbar on small viewports */
            .sidebar {
                padding-top: calc(64px + 12px);
            }

            /* Make the sidebar search input full-width and touch-friendly */
            .sidebar-search {
                padding: 12px 12px 6px 12px;
            }
            .sidebar-search .search-input {
                width: 100%;
                padding: 10px 12px;
            }

            /* Move the NoteFlow app title/logo to the right inside the sidebar header on mobile */
            .sidebar-header .app-title {
                width: 100%;
                justify-content: flex-end;
            }

            .theme-panel {
                width: calc(100% - 40px);
                right: 20px;
                left: 20px;
                max-height: 70vh;
            }
            
            .theme-switcher-btn {
                width: 50px;
                height: 50px;
            }
            
            /* Todo panel mobile */
            .todo-panel {
                width: 100%;
                max-width: 100%;
                right: 0;
                left: 0;
                border-radius: 16px 16px 0 0;
                max-height: 60vh;
            }
            
            /* Word count smaller on mobile */
            .word-count-display {
                font-size: 11px;
                padding: 4px 8px;
            }
            
            /* Time widget compact on mobile */
            .toolbar-time-elegant {
                padding: 4px 10px !important;
            }
            
            .toolbar-time-widget {
                font-size: 13px !important;
                min-width: 60px !important;
            }
        }
        
        /* Small mobile (phones) */
        @media (max-width: 480px) {
            :root { --sidebar-width: 240px; }

            .top-nav {
                margin: 8px 8px 6px;
                padding: 10px 12px;
            }

            .view-tab {
                padding: 6px 10px;
                letter-spacing: 0.08em;
            }

            .editor-container {
                /* keep space for fixed toolbar on small phones */
                padding: 96px 12px 16px 12px;
            }

            .page-title-input {
                font-size: 24px;
                margin-top: 20px;
            }
            
            .toolbar-btn {
                min-width: 36px;
                min-height: 36px;
                padding: 8px;
                font-size: 13px;
            }
            
            .theme-panel {
                width: calc(100% - 20px);
                right: 10px;
                left: 10px;
                padding: 16px;
            }
            
            .sidebar-header {
                padding: 12px;
            }
            
            .app-title span {
                font-size: 16px;
            }
            /* Slightly reduce page-item font-size to avoid cramped rows on very small screens */
            .page-item {
                font-size: 14px;
            }
        }
        
        /* Tablet landscape */
        @media (min-width: 769px) and (max-width: 1024px) {
            :root {
                --sidebar-width: 260px;
            }
            
            .editor-container {
                padding: 30px 40px;
            }
        }
        
        /* Touch device detection - larger targets */
        @media (hover: none) and (pointer: coarse) {
            .toolbar-btn {
                min-width: 44px;
                min-height: 44px;
            }
            
            .page-item {
                min-height: 48px;
            }
            
            .page-item-icons i {
                padding: 8px;
            }
            
            .sidebar-toggle-btn {
                width: 44px;
                height: 44px;
            }

            /* On touch devices, show the page action icons by default (no hover) */
            .page-item .page-item-icons {
                display: flex;
            }

            /* Make sidebar content start below the fixed toolbar so search and timer don't overlap */
            .sidebar {
                padding-top: calc(64px + 12px);
            }

            /* Focus timer: allow wrapping and slightly larger controls on touch */
            .focus-timer {
                gap: 10px;
                padding: 10px 12px;
            }

            .focus-timer .timer-top {
                flex-wrap: wrap;
                align-items: center;
                gap: 10px;
            }

            .focus-timer .timer-controls {
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
            }
            .focus-timer .icon-btn {
                width: 40px;
                height: 40px;
            }

            .neumo-btn {
                min-height: 44px;
            }

            .timeline-mini-btn {
                min-height: 44px;
                min-width: 44px;
            }
        }

        /* Loading Spinner */
        .spinner {
            border: 3px solid var(--bg-hover);
            border-top: 3px solid var(--accent);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 30, 0.85);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            color: #fff;
            padding: 14px 28px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
            display: none;
            z-index: 2000;
            animation: slideUp 0.3s ease;
        }

        .toast.show {
            display: block;
        }

        .mini-celebration-burst {
            position: fixed;
            width: 1px;
            height: 1px;
            pointer-events: none;
            z-index: 3400;
        }

        .mini-celebration-pill {
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-50%, -14px);
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
            color: #fff;
            background: linear-gradient(165deg, rgba(255, 153, 0, 0.95), rgba(244, 114, 182, 0.95));
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
            animation: miniCelebrateBanner 1150ms ease forwards;
        }

        .mini-celebration-spark {
            position: absolute;
            left: 0;
            top: 0;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--spark-color, #f59e0b);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.44);
            animation: miniCelebrateSpark 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
            animation-delay: var(--delay, 0ms);
        }

        @keyframes miniCelebrateSpark {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.42) rotate(var(--rot, 180deg));
            }
        }

        @keyframes miniCelebrateBanner {
            0% {
                opacity: 0;
                transform: translate(-50%, 6px) scale(0.92);
            }
            14% {
                opacity: 1;
                transform: translate(-50%, -14px) scale(1);
            }
            82% {
                opacity: 1;
                transform: translate(-50%, -17px) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -26px) scale(0.96);
            }
        }

        .timer-done-popup {
            position: fixed;
            left: 50%;
            top: 50%;
            width: min(560px, calc(100vw - 28px));
            padding: 24px 22px;
            border-radius: 20px;
            background: var(--surface-bg-elevated);
            border: 1px solid rgba(22, 30, 45, 0.14);
            box-shadow: 0 26px 58px rgba(22, 30, 45, 0.28);
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
            z-index: 12650;
            opacity: 0;
            transform: translate(-50%, -46%) scale(0.94);
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease;
        }

        .timer-done-popup.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }

        .timer-done-title {
            font-size: clamp(26px, 4vw, 34px);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .timer-done-message {
            margin-top: 10px;
            font-size: 16px;
            color: var(--text-secondary);
            line-height: 1.45;
        }

        .timer-done-btn {
            margin-top: 18px;
            min-height: 46px;
            padding: 0 18px;
            border-radius: 12px;
            border: 1px solid rgba(22, 30, 45, 0.14);
            background: var(--surface-bg);
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        .timer-done-btn:hover {
            background: var(--bg-hover);
        }

        [data-theme="dark"] .timer-done-popup {
            background: rgba(24, 22, 19, 0.92);
            border-color: rgba(255, 255, 255, 0.14);
            box-shadow: 0 28px 62px rgba(0, 0, 0, 0.52);
        }

        [data-theme="dark"] .timer-done-btn {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.16);
            color: var(--text-primary);
        }

        @media (max-width: 640px) {
            .timer-done-popup {
                width: calc(100vw - 20px);
                padding: 18px 16px;
                border-radius: 14px;
            }

            .timer-done-title {
                font-size: clamp(22px, 7vw, 28px);
            }

            .timer-done-message {
                margin-top: 8px;
                font-size: 14px;
            }

            .timer-done-btn {
                width: 100%;
                min-height: 42px;
                font-size: 14px;
            }
        }

        /* Link Tooltip */
        .link-tooltip {
            position: fixed;
            background: var(--surface-bg-elevated);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid var(--surface-border);
            padding: 10px 14px;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            display: none;
            z-index: 1000;
            gap: 8px;
            align-items: center;
        }

        .link-tooltip.active {
            display: flex;
        }

        .link-tooltip a {
            color: var(--accent);
            text-decoration: none;
            font-size: 13px;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .link-tooltip a:hover {
            text-decoration: underline;
        }

        .link-tooltip button {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .link-tooltip button:hover {
            background: var(--glass-02);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            color: var(--text-primary);
        }

        @keyframes slideUp {
            from {
                transform: translate(-50%, 100%);
                opacity: 0;
            }
            to {
                transform: translate(-50%, 0);
                opacity: 1;
            }
        }
        /* Strong override placed at end of stylesheet to ensure toolbar inner
           elements do not render their own background which caused the
           dark rectangle. Uses !important to override any earlier rules. */
        .toolbar-wrapper .toolbar {
            background: transparent !important;
            height: 100% !important;
            padding: 0 12px !important;
            box-shadow: none !important;
        }

        /* Ensure individual toolbar buttons don't carry a panel-like background */
        .toolbar-wrapper .toolbar-btn {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: inherit;
        }

        /* Keep scroll buttons hidden by default to reduce visual clutter.
           JS toggles the .visible class when toolbar overflow requires them.
           On small/narrow viewports we show them by default for discoverability. */
        .toolbar-scroll-btn {
            opacity: 0;
            pointer-events: none;
            background: var(--glass-01, rgba(255,255,255,0.06));
            border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
            color: var(--text-primary);
            transition: opacity 0.16s ease, transform 0.16s ease;
            box-shadow: 0 6px 18px rgba(0,0,0,0.10);
        }

        /* Shown state (applied by JS when needed) */
        .toolbar-scroll-btn.visible {
            opacity: 0.92;
            pointer-events: auto;
            transform: scale(1.02);
        }

        .toolbar-scroll-btn:hover {
            background: var(--glass-02, rgba(255,255,255,0.12));
            color: var(--accent);
        }

        /* Mobile / narrow: always show scroll buttons for easier access */
        @media (max-width: 900px) {
            .toolbar-scroll-btn {
                opacity: 0.92;
                pointer-events: auto;
            }
        }

        /* Sidebar mask: add an inner opaque overlay to the sidebar so heavy
           frosted elements behind it (toolbar/save bar) don't visually bleed
           through the semi-transparent sidebar. This keeps the sidebar's
           glass look while preventing rectangles from elements behind it.
           We use a pseudo-element so it doesn't change the DOM. */
        .sidebar::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            /* Make the sidebar more transparent so more light/frost shows through.
               Very subtle overlay for light theme (reduced alpha). */
            background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.01));
            mix-blend-mode: normal;
            transition: background-color 0.22s ease, opacity 0.22s ease;
        }

        /* Progress dashboard refinements to match the mock: tighter spacing,
           improved card proportions, subtle shadows and centered streak stats. */
        .view-progress .view-header { margin-bottom: 8px; }
        .view-progress .view-header h2 { font-size: 28px; margin: 6px 0 0; }

        .stats-grid {
            gap: 14px; /* slightly tighter */
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(120px, 200px);
            margin: 6px 18px 28px;
        }

        .glass-card {
            padding: 18px 20px;
            border-radius: 14px;
            background: var(--glass-01);
            border: 1px solid var(--glass-border);
            box-shadow: 0 18px 40px rgba(20,20,20,0.04);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
        }

        /* Weekly card has a small badge on top-right */
        .card-weekly { position: relative; }
        .card-weekly .neumo-chip, .card-weekly .card-badge {
            position: absolute; top: 12px; right: 12px; transform: none;
        }
        .card-badge {
            background: var(--bg-secondary); color: var(--text-primary);
            border-radius: 999px; padding: 6px 10px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        }

        .card-content { display:flex; align-items:center; gap:16px; }
        .sparkline { flex:1; height:46px; background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
        .heatmap-placeholder { width:100%; height:110px; border-radius:8px; background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
        .donut-placeholder { width:78px; height:78px; border-radius:50%; display:inline-block; }
        .legend { display:flex; flex-direction:column; gap:8px; color:var(--text-secondary); font-size:13px; }

        .card-stat { font-size:20px; font-weight:700; color:var(--text-primary); }
        .card-meta { font-size:13px; color:var(--text-secondary); }

        /* Priority dot styles for task cards */
        .priority-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:middle; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
        .priority-high { background: #d32f2f; }
        .priority-medium { background: #f57c00; }
        .priority-low { background: #2e7d32; }

    .due-chip { display:inline-block; padding:4px 8px; background: rgba(0,0,0,0.03); border-radius:999px; font-size:12px; color:var(--text-secondary); margin-left:8px; }

        /* Streak card: center content and make the large number prominent */
        .card-streaks { align-items:center; justify-content:center; text-align:center; }
        .card-streaks .streak-large { font-size:48px; line-height:1; }
        .card-streaks .streak-meta { color:var(--text-secondary); margin-top:6px; }

        @media (max-width: 900px) {
            .stats-grid { grid-auto-rows: auto; gap:12px; margin: 6px 12px 20px; }
            .card-streaks .streak-large { font-size:40px; }
            .view-progress .view-header h2 { font-size:22px; }
        }

        /* Today view layout cleanup: tighter sections, balanced columns, cleaner task rows */
        #view-today {
            max-width: none;
            width: 100%;
            margin: 0;
            padding: 14px 18px 24px;
        }

        #view-today .view-header {
            margin-bottom: 14px;
            align-items: flex-end;
            gap: 14px;
        }

        .today-header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* -- Today Stats Strip -- */
        .today-stats-strip {
            display: flex;
            align-items: center;
            gap: 0;
            padding: 12px 18px;
            border-radius: 16px;
            background: var(--surface-bg);
            border: 1px solid var(--surface-border);
            margin-bottom: 18px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .today-stats-strip::-webkit-scrollbar { display: none; }
        .today-stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 14px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .today-stat-item > i {
            font-size: 15px;
            color: var(--accent);
            width: 18px;
            text-align: center;
        }
        .today-stat-value {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -0.02em;
            line-height: 1;
        }
        .today-stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
        }
        .today-stat-divider {
            width: 1px;
            height: 28px;
            background: var(--surface-border);
            flex-shrink: 0;
        }

        .command-palette-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .command-palette-kbd {
            font-size: 11px;
            line-height: 1;
            padding: 4px 6px;
            border-radius: 6px;
            border: 1px solid var(--surface-border);
            color: var(--text-secondary);
            background: var(--surface-bg);
        }

        .command-palette-modal {
            position: fixed;
            inset: 0;
            z-index: 3200;
            background: rgba(8, 10, 16, 0.62);
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 70px 18px 24px;
            -webkit-backdrop-filter: blur(6px) saturate(125%);
            backdrop-filter: blur(6px) saturate(125%);
        }

        .command-palette-modal.active {
            display: flex;
        }

        .command-palette-panel {
            width: min(690px, 100%);
            max-height: min(78vh, 760px);
            border-radius: 16px;
            border: 1px solid rgba(11, 18, 34, 0.12);
            background: color-mix(in srgb, var(--bg-secondary) 92%, #ffffff 8%);
            box-shadow: 0 26px 58px rgba(0, 0, 0, 0.3);
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            overflow: hidden;
        }

        .command-palette-input-wrap {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 14px 14px;
            border-bottom: 1px solid rgba(11, 18, 34, 0.12);
            background: color-mix(in srgb, var(--bg-primary) 82%, #ffffff 18%);
        }

        .command-palette-input-wrap > i {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .command-palette-input-wrap input {
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            color: var(--text-primary);
            font-size: 15px;
        }

        .command-palette-input-wrap input::placeholder {
            color: var(--text-secondary);
        }

        .command-palette-esc {
            font-size: 11px;
            letter-spacing: 0.02em;
            border-radius: 7px;
            border: 1px solid rgba(11, 18, 34, 0.16);
            padding: 4px 8px;
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--surface-bg) 75%, #ffffff 25%);
        }

        .command-palette-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 14px;
            font-size: 12px;
            color: var(--text-secondary);
            border-bottom: 1px solid rgba(11, 18, 34, 0.1);
            background: color-mix(in srgb, var(--bg-primary) 75%, #ffffff 25%);
        }

        .command-palette-list {
            overflow: auto;
            padding: 8px 10px 10px;
            display: grid;
            gap: 6px;
        }

        .command-palette-item {
            width: 100%;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(11, 18, 34, 0.08);
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-primary) 88%, #ffffff 12%);
            color: var(--text-primary);
            text-align: left;
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
        }

        .command-palette-item:hover,
        .command-palette-item.active {
            background: color-mix(in srgb, var(--accent) 12%, var(--bg-primary));
            border-color: color-mix(in srgb, var(--accent) 40%, transparent);
            transform: translateY(-1px);
        }

        .command-palette-item-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: 1px solid rgba(11, 18, 34, 0.14);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--bg-primary) 86%, #ffffff 14%);
        }

        .command-palette-item-label {
            font-weight: 600;
            font-size: 15px;
            color: var(--text-primary);
        }

        .command-palette-item-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .command-palette-item-keywords {
            display: none;
        }

        .command-palette-empty {
            padding: 16px 12px;
            border-radius: 10px;
            border: 1px dashed var(--surface-border);
            background: var(--surface-bg);
            color: var(--text-secondary);
            text-align: center;
            font-size: 13px;
        }

        [data-theme="dark"] .command-palette-modal {
            background: rgba(4, 6, 12, 0.68);
        }

        [data-theme="dark"] .command-palette-panel {
            background: rgba(17, 20, 28, 0.96);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 30px 62px rgba(0, 0, 0, 0.52);
        }

        [data-theme="dark"] .command-palette-input-wrap {
            border-bottom-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
        }

        [data-theme="dark"] .command-palette-meta {
            border-bottom-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
        }

        [data-theme="dark"] .command-palette-item {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
        }

        [data-theme="dark"] .command-palette-item:hover,
        [data-theme="dark"] .command-palette-item.active {
            background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.03));
            border-color: color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.12));
        }

        [data-theme="dark"] .command-palette-item-icon {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.04);
        }

        #view-today.dashboard-today .today-workflow-hub {
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44));
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
            padding: 14px;
            margin-bottom: 12px;
            display: grid;
            gap: 12px;
        }

        #view-today.dashboard-today .today-workflow-hub-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        #view-today.dashboard-today .today-workflow-hub-head h3 {
            margin: 4px 0 0;
            font-size: 18px;
        }

        #view-today.dashboard-today .today-workflow-hub-metrics {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        #view-today.dashboard-today .workflow-metric {
            display: grid;
            gap: 2px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.52);
        }

        #view-today.dashboard-today .workflow-metric-label {
            font-size: 11px;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 600;
        }

        #view-today.dashboard-today .workflow-metric-value {
            font-size: 22px;
            line-height: 1.1;
            color: var(--text-primary);
        }

        #view-today.dashboard-today .today-workflow-controls {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: end;
        }

        #view-today.dashboard-today .workflow-control {
            display: grid;
            gap: 6px;
            min-width: 0;
        }

        #view-today.dashboard-today .workflow-control span {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        #view-today.dashboard-today .workflow-control-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.56);
        }

        #view-today.dashboard-today .workflow-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
            grid-column: span 4;
        }

        #view-today.dashboard-today .today-plan-output {
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.52);
            padding: 10px;
            display: grid;
            gap: 8px;
        }

        #view-today.dashboard-today .today-plan-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        #view-today.dashboard-today .today-plan-header h4 {
            margin: 0;
            font-size: 14px;
        }

        #view-today.dashboard-today .today-plan-list {
            display: grid;
            gap: 8px;
            max-height: 280px;
            overflow: auto;
            padding-right: 4px;
        }

        #view-today.dashboard-today .today-plan-item {
            display: grid;
            gap: 4px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.66);
            padding: 10px;
        }

        #view-today.dashboard-today .today-plan-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        #view-today.dashboard-today .today-plan-item-title {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 13px;
        }

        #view-today.dashboard-today .today-plan-item-time {
            font-size: 12px;
            color: var(--accent);
            font-weight: 600;
        }

        #view-today.dashboard-today .today-plan-item-meta {
            font-size: 12px;
            color: var(--text-secondary);
        }

        #view-today.dashboard-today .today-plan-item-reason {
            font-size: 11px;
            color: var(--text-muted);
        }

        /* -- Today Grid -- */
        #view-today .today-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }

        #view-today .today-panel {
            min-height: 280px;
            padding: 18px 18px 16px;
            gap: 12px;
        }

        /* -- Task Card (compact icon actions) -- */
        #view-today .today-panel .task-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
        }

        #view-today .today-panel .task-main {
            min-width: 0;
        }

        #view-today .today-panel .task-actions-compact {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .task-action-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
            font-size: 13px;
            padding: 0;
            flex-shrink: 0;
        }
        .task-action-icon:hover {
            background: var(--surface-bg-hover);
            color: var(--text-primary);
            border-color: var(--accent);
        }
        .task-action-icon.active {
            background: color-mix(in srgb, var(--accent) 18%, var(--surface-bg));
            color: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        }
        .task-action-icon.task-done-btn.active {
            background: color-mix(in srgb, #27ae60 18%, var(--surface-bg));
            color: #27ae60;
            border-color: color-mix(in srgb, #27ae60 40%, transparent);
        }

        /* -- Overflow Menu -- */
        .task-overflow-wrap {
            position: relative;
        }
        .task-overflow-menu {
            display: none;
            position: absolute;
            right: 0;
            top: calc(100% + 4px);
            z-index: 200;
            min-width: 160px;
            flex-direction: column;
            background: var(--surface-bg-elevated);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
            padding: 4px;
            animation: taskMenuFadeIn 0.12s ease;
        }
        @keyframes taskMenuFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .task-overflow-wrap.open .task-overflow-menu {
            display: flex;
        }
        .task-overflow-menu button {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 9px 12px;
            border: none;
            background: none;
            color: var(--text-primary);
            font-size: 13px;
            cursor: pointer;
            border-radius: 8px;
            transition: background 0.12s;
            text-align: left;
        }
        .task-overflow-menu button:hover {
            background: var(--surface-bg-hover);
        }
        .task-overflow-menu button i {
            width: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .task-overflow-menu .task-overflow-danger {
            color: #e74c3c;
        }
        .task-overflow-menu .task-overflow-danger i {
            color: #e74c3c;
        }

        /* -- Collapsible Sections -- */
        .today-collapsible {
            margin-bottom: 8px;
            border-radius: 16px;
            border: 1px solid var(--surface-border);
            background: var(--surface-bg);
            overflow: hidden;
        }
        .today-collapsible-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 16px 20px;
            border: none;
            background: none;
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
        }
        .today-collapsible-trigger:hover {
            background: var(--surface-bg-hover);
        }
        .today-collapsible-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .today-collapsible-left > i {
            font-size: 16px;
            color: var(--accent);
            width: 20px;
            text-align: center;
        }
        .today-collapsible-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
        }
        .today-collapsible-arrow {
            font-size: 13px;
            color: var(--text-secondary);
            transition: transform 0.25s ease;
        }
        .today-collapsible.open .today-collapsible-arrow {
            transform: rotate(180deg);
        }
        .today-collapsible-body {
            display: none;
            padding: 0 20px 20px;
        }
        .today-collapsible.open .today-collapsible-body {
            display: block;
        }
        .today-academic-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }

        /* -- Today Stats Grid (analytics) -- */
        #view-today .stats-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-auto-rows: minmax(140px, auto);
            gap: 14px;
            margin: 6px 0 14px;
            max-width: 100%;
        }

        @media (max-width: 1400px) {
            #view-today .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 1024px) {
            #view-today .today-grid {
                grid-template-columns: 1fr;
            }

            #view-today.dashboard-today .today-workflow-hub-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #view-today.dashboard-today .today-workflow-controls {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #view-today.dashboard-today .workflow-actions {
                grid-column: span 2;
                justify-content: flex-start;
            }

            #view-today .stats-grid {
                grid-template-columns: 1fr;
            }

            #view-today .today-panel {
                min-height: auto;
            }

            #view-today .view-header {
                align-items: flex-start;
            }

            .today-stats-strip {
                padding: 10px 12px;
                gap: 0;
            }
            .today-stat-item {
                padding: 4px 10px;
            }
        }

        @media (max-width: 600px) {
            .today-stat-label { display: none; }
            .today-stat-item > i { font-size: 13px; }
            .today-stat-value { font-size: 16px; }
            .today-stat-divider { height: 22px; }
            .today-collapsible-trigger { padding: 14px 16px; font-size: 14px; }
            .today-collapsible-body { padding: 0 14px 16px; }
            .command-palette-trigger span:not(.command-palette-kbd) { display: none; }
            .command-palette-kbd { display: none; }
            #view-today.dashboard-today .today-workflow-hub-metrics {
                grid-template-columns: 1fr;
            }
            #view-today.dashboard-today .today-workflow-controls {
                grid-template-columns: 1fr;
            }
            #view-today.dashboard-today .workflow-actions {
                grid-column: auto;
            }
            #taskModal .task-priority-grid {
                grid-template-columns: 1fr !important;
            }
        }

        @media (max-width: 700px) {
            #view-today {
                padding: 14px 12px 18px;
            }

            #view-today .summary-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .today-header-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }

        /* Dark theme: lower the overlay alpha so the sidebar is less blocking but
           still slightly grounded to avoid complete bleed-through. */
        [data-theme="dark"] .sidebar::before {
            background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.08));
        }

        /* Dark mode shadow tuning for cleaner depth and less glow */
        [data-theme="dark"] .glass-panel,
        [data-theme="dark"] .glass-card,
        [data-theme="dark"] .glass-modal {
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
            border-color: rgba(255, 255, 255, 0.06);
        }

        /* Let document content bleed through the sticky nav in dark mode */
        [data-theme="dark"] .top-nav {
            background: rgba(20, 20, 24, 0.08);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
        }

        [data-theme="dark"] .neumo-btn,
        [data-theme="dark"] .toolbar-btn,
        [data-theme="dark"] .theme-switcher-btn {
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.42), -2px -2px 8px rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .view-tabs {
            background: var(--neumo-bg);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
        }

        [data-theme="dark"] .view-tab.active {
            background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.07));
            box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 3px 8px rgba(0, 0, 0, 0.18);
        }

        [data-theme="dark"] .view-tab:hover:not(.active) {
            background: rgba(255,255,255,0.06);
        }

        [data-theme="dark"] .settings-actions .neumo-btn.active {
            box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.56), inset -1px -1px 4px rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .feature-toggle-card {
            border-color: color-mix(in srgb, var(--surface-border-strong) 72%, transparent);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--surface-bg-elevated) 86%, #000 14%),
                color-mix(in srgb, var(--surface-bg) 74%, #000 26%)
            );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.34);
        }

        [data-theme="dark"] .feature-toggle-card:hover {
            border-color: color-mix(in srgb, var(--accent) 62%, var(--surface-border-strong));
        }

        [data-theme="dark"] .feature-toggle-card[data-checked="true"] {
            border-color: color-mix(in srgb, var(--accent) 76%, var(--surface-border-strong));
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--accent-soft) 84%, rgba(0, 0, 0, 0.24) 16%),
                color-mix(in srgb, var(--accent-soft) 54%, rgba(0, 0, 0, 0.46) 46%)
            );
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
        }

        [data-theme="dark"] .feature-toggle-switch {
            border-color: color-mix(in srgb, var(--surface-border-strong) 78%, transparent);
            background: color-mix(in srgb, var(--surface-bg-active) 74%, rgba(255, 255, 255, 0.04));
        }

        [data-theme="dark"] .feature-toggle-switch-handle {
            background: #f9f9f9;
        }

        [data-theme="dark"] .feature-toggle-input:checked ~ .feature-toggle-switch {
            background: color-mix(in srgb, var(--accent) 84%, rgba(255, 255, 255, 0.06) 16%);
            border-color: color-mix(in srgb, var(--accent) 88%, var(--surface-border-strong));
            box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
        }

        [data-theme="dark"] .feature-toggle-input:focus-visible ~ .feature-toggle-switch {
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.34);
        }

        [data-theme="dark"] .feature-setup-backdrop {
            background: rgba(4, 8, 14, 0.72);
        }

        [data-theme="dark"] .feature-setup-card {
            border-color: rgba(255, 255, 255, 0.14);
            background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(20, 22, 26, 0.97));
            box-shadow: 0 36px 72px rgba(0, 0, 0, 0.5);
        }

        /* Also ensure the sidebar content is rendered above the overlay */
        .sidebar > * { position: relative; z-index: 1; }

/* Floating Add Task FAB */
.fab-add-task {
    display: none; /* hidden by default; shown inside the Today view */
}

.ap-study-view-shell {
    padding: 18px;
}

.ap-study-shell {
    display: grid;
    gap: 16px;
}

.ap-study-header,
.ap-study-panel,
.ap-study-sidebar,
.ap-study-sidecard,
.ap-study-subject-hero {
    border: 1px solid var(--glass-border);
}

.ap-study-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px;
}

.ap-study-header h2,
.ap-study-sidebar h3,
.ap-study-panel h3,
.ap-study-subject-hero h2 {
    margin: 0;
}

.ap-study-header p,
.ap-study-subject-description,
.ap-study-empty-state p,
.ap-study-empty-inline {
    color: var(--text-secondary);
}

.ap-study-header-actions,
.ap-study-inline-actions,
.ap-study-session-actions,
.ap-study-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-study-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ap-study-stat-card,
.ap-study-mini-metric,
.ap-study-hero-metric,
.ap-study-priority-card,
.ap-study-unit-card,
.ap-study-session-card,
.ap-study-practice-card,
.ap-study-nested-panel,
.ap-study-subject-card {
    background: linear-gradient(160deg, var(--surface-bg), rgba(255,255,255,0.02));
    border: 1px solid var(--surface-border-strong);
    border-radius: 16px;
}

.ap-study-stat-card {
    padding: 14px;
    display: grid;
    gap: 4px;
}

.ap-study-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.ap-study-stat-value {
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--text-primary);
}

.ap-study-stat-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ap-study-main-grid {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(250px, 320px);
    gap: 16px;
    align-items: start;
}

.ap-study-sidebar,
.ap-study-sidecard,
.ap-study-panel,
.ap-study-subject-hero {
    padding: 16px;
    border-radius: 20px;
    background: var(--neumo-bg);
}

.ap-study-sidebar {
    position: sticky;
    top: calc(var(--top-nav-height, 84px) + 8px);
    display: grid;
    gap: 14px;
}

.ap-study-sidebar-head,
.ap-study-panel-head,
.ap-study-sidecard-head,
.ap-study-nested-head,
.ap-study-unit-head,
.ap-study-session-top,
.ap-study-practice-top,
.ap-study-subject-card-top,
.ap-study-list-row,
.ap-study-checklist-row,
.ap-study-analytics-row,
.ap-study-sidecard-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ap-study-subject-list,
.ap-study-unit-list,
.ap-study-session-list,
.ap-study-practice-list,
.ap-study-activity-list,
.ap-study-weak-list,
.ap-study-list,
.ap-study-analytics-list {
    display: grid;
    gap: 10px;
}

.ap-study-subject-card {
    width: 100%;
    text-align: left;
    padding: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ap-study-subject-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--ap-subject-color, var(--accent));
}

.ap-study-subject-card.is-active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ap-subject-color, var(--accent)) 50%, transparent);
    transform: translateY(-1px);
}

.ap-study-subject-card-meta,
.ap-study-session-meta,
.ap-study-subject-tags,
.ap-study-priority-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.ap-study-progress-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    margin: 10px 0 8px;
}

.ap-study-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));
}

.ap-study-content,
.ap-study-rail {
    display: grid;
    gap: 16px;
}

.ap-study-subject-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.ap-study-subject-hero::before {
    content: "";
    position: absolute;
    inset: auto -20% -40% auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ap-subject-color, var(--accent)) 28%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.ap-study-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.ap-study-subject-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ap-study-countdown,
.ap-study-session-type,
.ap-study-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--surface-border-strong);
    font-size: 0.76rem;
}

.ap-study-countdown-live {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.ap-study-inline-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-study-inline-countdown strong {
    font-size: 0.84rem;
    font-weight: 700;
}

.ap-study-subject-hero-metrics,
.ap-study-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.ap-study-hero-metric,
.ap-study-mini-metric {
    padding: 12px;
    display: grid;
    gap: 4px;
}

.ap-study-hero-metric > span,
.ap-study-mini-metric > span {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.ap-study-hero-metric strong,
.ap-study-mini-metric strong {
    font-size: 1.2rem;
    line-height: 1.1;
}

.ap-study-hero-countdown {
    align-content: start;
    grid-column: 1 / -1;
}

.ap-study-exam-countdown {
    display: grid;
    gap: 10px;
}

.ap-study-exam-countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: 10px;
}

.ap-study-exam-countdown-cell {
    border-radius: 10px;
    border: 1px solid var(--surface-border-strong);
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    padding: 9px 8px;
    display: grid;
    gap: 3px;
    text-align: center;
}

.ap-study-exam-countdown-cell strong {
    font-size: 1.08rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ap-study-exam-countdown-cell span {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.ap-study-exam-countdown-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
}

.ap-study-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-study-tab {
    border: 1px solid var(--surface-border-strong);
    border-radius: 999px;
    padding: 10px 14px;
    background: var(--surface-bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 700;
}

.ap-study-tab.is-active {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-bg));
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--surface-border-strong));
}

.ap-study-panel,
.ap-study-sidecard,
.ap-study-nested-panel {
    display: grid;
    gap: 12px;
}

.ap-study-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ap-study-link-btn {
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-bg);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 7px 11px;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ap-study-link-btn.danger {
    color: #ff8f8f;
}

.ap-study-toggle-row,
.ap-study-checkbox-inline,
.ap-study-checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ap-study-unit-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ap-study-unit-controls label,
.ap-study-modal-form label {
    display: grid;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.ap-study-topic-table {
    display: grid;
    gap: 6px;
}

.ap-study-topic-table-head,
.ap-study-topic-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr)) minmax(160px, 1.4fr);
    gap: 8px;
    align-items: center;
}

.ap-study-topic-table-head {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
    padding: 0 2px;
}

.ap-study-topic-row {
    padding: 10px;
    border-radius: 12px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
}

.ap-study-topic-title {
    display: grid;
    gap: 3px;
}

.ap-study-session-card,
.ap-study-practice-card,
.ap-study-priority-card,
.ap-study-unit-card {
    padding: 14px;
}

.ap-study-session-card.is-complete,
.ap-study-practice-card.is-weak {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border-strong));
}

.ap-study-session-card.is-skipped {
    opacity: 0.74;
}

.ap-study-practice-score,
.ap-study-analytics-score,
.ap-study-checklist-progress {
    font-weight: 800;
    color: var(--text-primary);
}

.ap-study-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ap-study-empty-state,
.ap-study-empty-inline {
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed var(--surface-border-strong);
    background: var(--surface-bg);
}

.ap-study-empty-state.compact {
    padding: 18px;
}

.ap-study-sidecard-row.is-active {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
}

.ap-study-sidecard-row,
.ap-study-activity-item,
.ap-study-weak-item,
.ap-study-list-row,
.ap-study-checklist-row,
.ap-study-analytics-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-border);
}

.ap-study-sidecard-row:last-child,
.ap-study-activity-item:last-child,
.ap-study-weak-item:last-child,
.ap-study-list-row:last-child,
.ap-study-checklist-row:last-child,
.ap-study-analytics-row:last-child {
    border-bottom: none;
}

.ap-study-modal-content {
    width: min(760px, 92vw);
}

.ap-study-modal-form {
    display: grid;
    gap: 12px;
}

.ap-study-form-grid {
    display: grid;
    gap: 10px;
}

.ap-study-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ap-study-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ap-study-form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ap-study-modal-footer {
    justify-content: flex-end;
}

@media (max-width: 1400px) {
    .ap-study-main-grid {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }

    .ap-study-rail {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .ap-study-summary-grid,
    .ap-study-rail,
    .ap-study-two-column,
    .ap-study-priority-grid,
    .ap-study-subject-hero,
    .ap-study-unit-controls,
    .ap-study-form-grid.three,
    .ap-study-form-grid.four {
        grid-template-columns: 1fr;
    }

    .ap-study-main-grid {
        grid-template-columns: 1fr;
    }

    .ap-study-sidebar {
        position: static;
    }

    .ap-study-topic-table-head {
        display: none;
    }

    .ap-study-topic-row {
        grid-template-columns: 1fr;
    }

    .ap-study-exam-countdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ap-study-view-shell {
        padding: 12px;
    }

    .ap-study-header,
    .ap-study-sidebar,
    .ap-study-panel,
    .ap-study-sidecard,
    .ap-study-subject-hero {
        padding: 14px;
    }

    .ap-study-form-grid.two {
        grid-template-columns: 1fr;
    }

    .ap-study-header-actions .neumo-btn,
    .ap-study-inline-actions .neumo-btn,
    .ap-study-link-btn,
    .ap-study-tab {
        min-height: 42px;
    }

    .ap-study-exam-countdown-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .ap-study-exam-countdown-cell {
        padding: 7px 5px;
    }
}

/* Show and position FAB only when the Today view is active */
#view-today.active .fab-container { display: block; position: fixed; bottom: 108px; right: 24px; z-index: 2400; }
#view-today.active .fab-add-task {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--accent, #d8c4a1);
    color: #fff;
    border: none;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    font-size: 20px;
    position: relative;
}

/* Minimal, streak-first layout: move tasks into a right drawer */
.all-tasks-drawer {
    position: fixed;
    top: 88px; /* below top nav */
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: calc(100vh - 120px);
    background: var(--glass-01);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-left: 1px solid var(--glass-border);
    box-shadow: -20px 0 40px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22,1,0.36,1);
    z-index: 2600;
    display: flex;
    flex-direction: column;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}
.all-tasks-drawer[aria-hidden="false"] { transform: translateX(0); }
.all-tasks-drawer .drawer-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--surface-border); }
.all-tasks-drawer .drawer-body { padding:12px 14px; overflow:auto; overflow-x:hidden; }
.all-tasks-drawer .drawer-empty { padding:12px 14px; }
.all-tasks-drawer .task-list { gap: 10px; }
.all-tasks-drawer .task-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
}
.all-tasks-drawer .task-main { min-width: 0; }
.all-tasks-drawer .task-meta {
    white-space: normal;
    line-height: 1.35;
}
.all-tasks-drawer .task-actions-compact {
    justify-content: flex-end;
    gap: 4px;
}

/* Header buttons */
#toggleAllTasksBtn { padding:8px 12px; border-radius: 10px; }
#topAddTaskBtn { padding:8px 14px; border-radius: 12px; background:var(--accent); color:#fff; box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

/* Hide floating FAB for the minimal layout; top add button is used instead */
#view-today.active .fab-container { display: none !important; }

@media (max-width: 900px) {
    .all-tasks-drawer {
        width: min(92vw, 420px);
        top: var(--top-nav-height-mobile);
        height: calc(100vh - var(--top-nav-height-mobile) - 12px);
        border-radius: 16px 0 0 16px;
    }
    .all-tasks-drawer .task-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .all-tasks-drawer .task-actions-compact {
        justify-content: flex-start;
    }
}

#view-today.active .fab-container .fab-label {
    display: inline-block;
    margin-left: 12px;
    background: var(--surface-bg-elevated);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    vertical-align: middle;
}

#view-today.active .fab-container .fab-label::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px; border-radius:50%; margin-right:8px; vertical-align:middle;
    background: var(--accent, #d8c4a1);
}

@media (max-width: 900px) {
    #view-today.active .fab-container { bottom: 150px; right: 16px; }
    #view-today.active .fab-add-task { width:48px; height:48px; font-size:18px; }
    #view-today.active .fab-container .fab-label { display: none; }
}

/* Hide assistant/chatbot in the Today view to avoid overlap and distraction */
body:has(#view-today.active) .chatbot-btn,
body:has(#view-today.active) .chatbot-panel,
body:has(#view-today.active) .chatbot-info {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Debug task panel (development aid) - removed */

/* ===============================================================================
   TIMELINE VIEW (TimeTile integration)
   =============================================================================== */

.view-timeline { padding: 24px; }
.view-timeline .view-header { margin-bottom: 20px; }

.timeline-source-status {
    margin-top: 8px;
    max-width: 720px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.timeline-header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.timeline-inline-field {
    display: grid;
    gap: 6px;
    min-width: 150px;
}

.timeline-inline-field[hidden] {
    display: none !important;
}

.timeline-inline-field span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-inline-field .neumo-input {
    width: 100%;
    padding: 9px 12px;
}

.mode-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.timeline-wrapper {
    padding: 24px;
    border-radius: var(--radius-lg);
}

.timeline-three-day {
    display: grid;
    gap: 16px;
}

.timeline-day-row {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.timeline-day-header {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--glass-02) 72%, #ffffff 28%), var(--glass-01));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.timeline-day-row.today .timeline-day-header {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.timeline-day-header-top {
    display: grid;
    gap: 4px;
}

.timeline-day-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-day-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-primary);
}

.timeline-day-subtitle,
.timeline-day-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline-track-shell {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--glass-01) 74%, #ffffff 26%), color-mix(in srgb, var(--glass-02) 84%, #ffffff 16%));
}

.timeline-track {
    position: relative;
    min-width: 1240px;
    padding: 48px 18px 18px;
}

.timeline-hour-labels {
    position: absolute;
    inset: 14px 18px auto 18px;
    height: 20px;
    pointer-events: none;
}

.timeline-hour-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.timeline-track-grid {
    position: absolute;
    inset: 48px 18px 18px 18px;
    pointer-events: none;
}

.timeline-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--border) 78%, transparent);
}

.timeline-grid-line.major {
    background: color-mix(in srgb, var(--accent) 16%, var(--border));
}

.timeline-grid-now {
    position: absolute;
    top: 48px;
    bottom: 18px;
    width: 2px;
    background: color-mix(in srgb, var(--accent) 68%, #ff6f61 32%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
    z-index: 2;
    pointer-events: none;
}

.timeline-grid-now::before {
    content: "Now";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 78%, #ffffff 22%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-lane {
    position: relative;
    height: 82px;
}

.timeline-event-card {
    position: absolute;
    top: 8px;
    min-height: 66px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    padding: 10px 12px;
    color: #102033;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.timeline-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
}

.timeline-event-card.current {
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 18px 34px rgba(15, 23, 42, 0.2);
}

.timeline-event-time {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(16, 32, 51, 0.7);
}

.timeline-event-title {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.timeline-event-source {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(16, 32, 51, 0.72);
}

.timeline-empty-day {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

.timeline-empty-state {
    padding: 34px 28px;
    border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--glass-01) 78%, #ffffff 22%);
    display: grid;
    gap: 8px;
    text-align: center;
}

.timeline-empty-state strong {
    font-size: 16px;
    color: var(--text-primary);
}

.timeline-empty-state span {
    color: var(--text-secondary);
}

.timeline-calendar-view {
    display: grid;
    gap: 12px;
}

.timeline-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.timeline-calendar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-mini-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.timeline-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.timeline-weekday-row > div {
    text-align: center;
    padding: 4px 0;
}

.timeline-calendar-grid.week,
.timeline-calendar-grid.month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.timeline-calendar-cell {
    border: 1px solid var(--border);
    background: var(--glass-01);
    border-radius: 12px;
    padding: 10px;
    text-align: left;
    display: grid;
    gap: 6px;
    min-height: 128px;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.timeline-calendar-cell:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.timeline-calendar-cell.outside {
    opacity: 0.5;
}

.timeline-calendar-cell.today {
    border-color: var(--accent);
}

.timeline-calendar-cell.selected {
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.timeline-calendar-dayhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.timeline-calendar-daynum {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-calendar-weekday {
    font-size: 11px;
    color: var(--text-secondary);
}

.timeline-calendar-count {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
}

.timeline-calendar-events {
    display: grid;
    gap: 4px;
}

.timeline-calendar-event {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--surface-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-calendar-empty {
    font-size: 11px;
    color: var(--text-muted);
}

.timeline-calendar-more {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.timeline-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.timeline-year-card {
    border: 1px solid var(--border);
    background: var(--glass-01);
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    display: grid;
    gap: 6px;
    min-height: 84px;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.timeline-year-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.timeline-year-month {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-year-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.timeline-calendar-hint {
    font-size: 12px;
    color: var(--text-muted);
}

[data-theme="dark"] .timeline-calendar-cell,
[data-theme="dark"] .timeline-year-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .timeline-calendar-event {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.timeline-container {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    min-height: 520px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.timeline-scale {
    position: relative;
    height: 100%;
}

.hour-marker {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding-right: 8px;
    text-align: right;
}
.hour-marker::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 0;
    width: calc(var(--timeline-grid-span, 0px) + 16px);
    height: 1px;
    background: var(--border);
    pointer-events: none;
}

.timeline-blocks {
    position: relative;
    min-height: 600px; /* 25px per hour * 24 */
}

.timeline-block {
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px 14px;
    border-radius: var(--neumo-radius);
    background: var(--neumo-bg);
    border-left: 5px solid var(--accent);
    box-shadow: 4px 4px 12px var(--neumo-shadow-dark),
                -4px -4px 12px var(--neumo-shadow-light);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
    z-index: 1;
}
.timeline-block:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px var(--neumo-shadow-dark),
                -6px -6px 16px var(--neumo-shadow-light);
    z-index: 2;
}
.timeline-block.current {
    background: var(--accent-soft);
    border-left-width: 7px;
    box-shadow: 0 0 20px var(--accent-soft),
                4px 4px 12px var(--neumo-shadow-dark),
                -4px -4px 12px var(--neumo-shadow-light);
}

.timeline-block .block-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.timeline-block .block-time {
    font-size: 12px;
    color: var(--text-muted);
}

.page-temporary-meta {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #d97706 34%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--glass-01));
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.page-temporary-meta strong {
    color: var(--text-primary);
}

.temporary-page-panel {
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--glass-01) 82%, #ffffff 18%);
    display: grid;
    gap: 12px;
}

.temporary-page-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.temporary-page-copy {
    display: grid;
    gap: 4px;
}

.temporary-page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.temporary-page-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.temporary-page-warning {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #b45309 32%, transparent);
    background: color-mix(in srgb, #f59e0b 14%, var(--bg-primary));
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}

.settings-row-temporary-pages {
    align-items: center;
}

.settings-row-temporary-pages .modal-input:first-child {
    flex: 0 0 120px;
    max-width: 120px;
}

.settings-row-temporary-pages .modal-input:last-child {
    flex: 0 0 160px;
    max-width: 160px;
}

.now-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    z-index: 50;
    pointer-events: none;
}
.now-indicator::before {
    content: attr(data-now-label);
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-primary);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    line-height: 1.2;
}

.current-block-card {
    padding: 20px;
}
.current-block-card .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.current-block-card h3 {
    margin: 0;
    font-size: 16px;
}

.progress-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 300ms ease;
}

/* Timeline upgrade overrides */
.timeline-mode-field,
.timeline-inline-field {
    display: grid;
    gap: 6px;
}

.timeline-mode-field {
    min-width: min(100%, 440px);
    flex: 1 1 440px;
}

.timeline-inline-field span,
.timeline-mode-field > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-header-controls {
    gap: 12px;
}

.timeline-mode-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid var(--surface-border-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--glass-02) 82%, transparent), color-mix(in srgb, var(--glass-01) 90%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 36%, transparent), 0 16px 30px rgba(22, 30, 45, 0.08);
}

.timeline-mode-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.timeline-mode-tab:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-bg-hover) 88%, transparent);
}

.timeline-mode-tab.active {
    color: var(--text-primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, transparent), color-mix(in srgb, var(--surface-bg) 78%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent), 0 10px 18px rgba(22, 30, 45, 0.12);
}

.timeline-mode-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
    outline-offset: 2px;
}

.timeline-wrapper {
    display: grid;
    gap: 18px;
}

.timeline-planner-view,
.timeline-three-day,
.timeline-calendar-view {
    gap: 18px;
}

.timeline-planner-shell {
    display: grid;
    gap: 18px;
}

.timeline-planner-summary {
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--surface-border);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 54%),
        linear-gradient(180deg, color-mix(in srgb, var(--glass-02) 92%, transparent), color-mix(in srgb, var(--glass-01) 96%, transparent));
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 18px;
}

.timeline-planner-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.timeline-planner-date {
    display: grid;
    gap: 6px;
}

.timeline-planner-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-planner-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 0.98;
    color: var(--text-primary);
}

.timeline-planner-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 720px;
}

.timeline-planner-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-planner-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
    background: color-mix(in srgb, var(--surface-bg) 84%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.timeline-planner-chip strong {
    color: var(--text-primary);
    font-size: 13px;
}

.timeline-planner-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.timeline-planner-metric {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-bg-elevated) 86%, transparent);
    display: grid;
    gap: 6px;
}

.timeline-planner-metric-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-planner-metric-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.timeline-planner-metric-note {
    font-size: 12px;
    color: var(--text-secondary);
}

.timeline-planner-content {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.82fr);
    gap: 18px;
    align-items: start;
}

.timeline-planner-track-shell,
.timeline-planner-sidecard,
.timeline-three-day-day {
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--glass-01) 92%, transparent), color-mix(in srgb, var(--glass-02) 96%, transparent));
    box-shadow: var(--shadow-soft);
}

.timeline-planner-track-shell {
    padding: 18px;
    border-radius: 24px;
    display: grid;
    gap: 16px;
}

.timeline-planner-track-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.timeline-planner-track-title {
    display: grid;
    gap: 4px;
}

.timeline-planner-track-title strong {
    font-size: 16px;
    color: var(--text-primary);
}

.timeline-planner-track-title span {
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline-planner-track-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 82%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.timeline-vertical-layout {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.timeline-vertical-axis {
    position: relative;
    min-height: var(--timeline-surface-height, 720px);
}

.timeline-vertical-axis-label {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.timeline-vertical-surface {
    position: relative;
    min-height: var(--timeline-surface-height, 720px);
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-bg) 84%, transparent), color-mix(in srgb, var(--glass-01) 96%, transparent)),
        radial-gradient(circle at top, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 62%);
    overflow: hidden;
}

.timeline-vertical-hour-line,
.timeline-vertical-quarter-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
}

.timeline-vertical-hour-line {
    background: color-mix(in srgb, var(--surface-border-strong) 86%, transparent);
}

.timeline-vertical-quarter-line {
    background: color-mix(in srgb, var(--surface-border) 64%, transparent);
}

.timeline-vertical-hour-line.major {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-border-strong));
}

.timeline-vertical-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: color-mix(in srgb, var(--accent) 72%, #ff7952 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 26%, transparent);
    z-index: 4;
    pointer-events: none;
}

.timeline-vertical-now::before {
    content: attr(data-now-label);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 86%, #ffffff 14%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-vertical-lanes {
    position: absolute;
    inset: 0;
}

.timeline-planner-block,
.timeline-three-day-block {
    position: absolute;
    border-radius: 18px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, rgba(16, 24, 40, 0.18) 82%, transparent);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.timeline-planner-block:hover,
.timeline-three-day-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
}

.timeline-planner-block.current,
.timeline-three-day-block.current {
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 18px 38px rgba(15, 23, 42, 0.24);
}

.timeline-planner-block.compact,
.timeline-three-day-block.compact {
    padding: 10px;
}

.timeline-planner-block-top,
.timeline-three-day-block-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.timeline-planner-block-badges,
.timeline-three-day-block-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.timeline-block-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: inherit;
}

.timeline-block-badge.ghost {
    background: rgba(255, 255, 255, 0.14);
}

.timeline-planner-block-title,
.timeline-three-day-block-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
}

.timeline-planner-block-time,
.timeline-three-day-block-time {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.76;
}

.timeline-planner-block-meta,
.timeline-three-day-block-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.78;
}

.timeline-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.82;
}

.timeline-progress-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

.timeline-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.5;
}

.timeline-planner-task-list {
    display: grid;
    gap: 6px;
}

.timeline-planner-task {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    border-radius: 12px;
    padding: 7px 9px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.timeline-planner-task:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

.timeline-planner-task.is-complete {
    opacity: 0.78;
}

.timeline-task-check {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid currentColor;
    flex: 0 0 12px;
    margin-top: 2px;
    opacity: 0.72;
}

.timeline-planner-task.is-complete .timeline-task-check {
    background: currentColor;
}

.timeline-task-content {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.timeline-task-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.72;
}

.timeline-planner-sidebar {
    display: grid;
    gap: 14px;
    position: static;
    top: auto;
}

.timeline-planner-sidecard {
    padding: 16px;
    border-radius: 20px;
    display: grid;
    gap: 12px;
}

.timeline-planner-sidecard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.timeline-planner-sidecard-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.timeline-planner-sidecard-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.timeline-planner-queue {
    display: grid;
    gap: 8px;
}

.timeline-planner-queue-item {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-bg) 90%, transparent);
    display: grid;
    gap: 4px;
}

.timeline-planner-queue-item strong {
    font-size: 13px;
    color: var(--text-primary);
}

.timeline-planner-queue-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

.timeline-three-day-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.timeline-three-day-day {
    padding: 16px;
    border-radius: 24px;
    display: grid;
    gap: 14px;
}

.timeline-three-day-day.today {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--surface-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-soft);
}

.timeline-three-day-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.timeline-three-day-titleblock {
    display: grid;
    gap: 4px;
}

.timeline-three-day-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-three-day-title {
    font-size: 22px;
    line-height: 1.05;
    font-weight: 800;
    color: var(--text-primary);
}

.timeline-three-day-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline-three-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.timeline-three-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
    background: color-mix(in srgb, var(--surface-bg) 86%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.timeline-three-day-track {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.timeline-three-day-surface {
    --timeline-surface-height: 760px;
}

.timeline-three-day-empty,
.timeline-empty-day {
    min-height: 160px;
    display: grid;
    place-items: center;
    padding: 24px;
}

.timeline-empty-state {
    padding: 30px 24px;
    border: 1px dashed color-mix(in srgb, var(--surface-border-strong) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-bg-elevated) 88%, transparent);
    display: grid;
    gap: 8px;
    text-align: center;
}

@media (max-width: 1200px) {
    .timeline-planner-content {
        grid-template-columns: 1fr;
    }

    .timeline-planner-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-three-day-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .timeline-mode-field {
        min-width: 0;
        flex-basis: 100%;
    }

    .timeline-mode-switcher {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }

    .timeline-mode-tab {
        flex: 0 0 auto;
    }

    .timeline-planner-summary-top,
    .timeline-three-day-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-planner-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-planner-sidebar {
        grid-template-columns: 1fr;
    }

    .timeline-vertical-layout,
    .timeline-three-day-track {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .timeline-vertical-axis-label {
        font-size: 10px;
    }
}

@media (max-width: 560px) {
    .timeline-wrapper,
    .timeline-planner-summary,
    .timeline-planner-track-shell,
    .timeline-planner-sidecard,
    .timeline-three-day-day {
        padding: 14px;
        border-radius: 20px;
    }

    .timeline-planner-metrics {
        grid-template-columns: 1fr;
    }

    .timeline-planner-title {
        font-size: 28px;
    }
}

/* Time-of-day mode theming */
body[data-time-mode="morning"] {
    --time-mode-tint: #d8c4a1;
}
body[data-time-mode="afternoon"] {
    --time-mode-tint: #2563eb;
}
body[data-time-mode="evening"] {
    --time-mode-tint: #fb7185;
}
body[data-time-mode="night"] {
    --time-mode-tint: #60a5fa;
}

/* Responsive timeline */
@media (max-width: 768px) {
    .timeline-container {
        grid-template-columns: 44px 1fr;
        gap: 10px;
        max-height: 60vh;
    }
    .timeline-block {
        padding: 8px 10px;
    }
    .hour-marker {
        font-size: 10px;
    }
    .now-indicator::before {
        left: 6px;
        font-size: 9px;
    }

    .timeline-calendar-grid.week,
    .timeline-calendar-grid.month {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-weekday-row {
        display: none;
    }

    .timeline-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-header-controls {
        justify-content: stretch;
    }

    .timeline-day-row {
        grid-template-columns: 1fr;
    }

    .timeline-day-header {
        padding: 14px 16px;
    }

    .timeline-track {
        min-width: 1080px;
    }

    .temporary-page-toggle-row {
        flex-direction: column;
    }

    .settings-row-temporary-pages .modal-input:first-child,
    .settings-row-temporary-pages .modal-input:last-child {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Emoji Picker - Final override (single source of truth) */
.emoji-modal-overlay {
    background: rgba(8, 12, 18, 0.52);
}

.emoji-picker {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2600;
    width: min(860px, calc(100vw - 28px));
    max-height: min(82vh, 760px);
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    display: none;
    overflow: hidden;
    box-sizing: border-box;
}

.emoji-picker.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.emoji-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin: 0;
}

.emoji-header-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emoji-picker-title {
    margin: 0;
    line-height: 1.1;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.emoji-picker-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emoji-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.emoji-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.emoji-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.emoji-remove-btn {
    border: 1px solid rgba(216, 74, 74, 0.45);
    background: rgba(216, 74, 74, 0.12);
    color: #b84141;
    border-radius: 10px;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.emoji-remove-btn:hover {
    background: rgba(216, 74, 74, 0.2);
    border-color: rgba(216, 74, 74, 0.7);
    color: #9f2f2f;
}

[data-theme="dark"] .emoji-remove-btn {
    color: #ffb0b0;
    background: rgba(255, 90, 90, 0.14);
    border-color: rgba(255, 125, 125, 0.45);
}

[data-theme="dark"] .emoji-remove-btn:hover {
    background: rgba(255, 90, 90, 0.24);
}

.emoji-search-container {
    margin: 0;
}

.emoji-search {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    box-sizing: border-box;
}

.emoji-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-primary);
}

.emoji-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 2px 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
}

.emoji-cat-btn {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

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

.emoji-cat-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 2px 4px;
    max-height: min(52vh, 430px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.emoji-option {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
    transition: transform 140ms ease, background 140ms ease;
}

.emoji-option:hover {
    transform: translateY(-1px) scale(1.08);
    background: var(--bg-hover);
}

.emoji-option:active {
    transform: scale(0.96);
}

.emoji-empty {
    grid-column: 1 / -1;
    padding: 18px 10px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.emoji-grid::-webkit-scrollbar,
.emoji-categories::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.emoji-grid::-webkit-scrollbar-thumb,
.emoji-categories::-webkit-scrollbar-thumb {
    background: rgba(130, 130, 130, 0.4);
    border-radius: 12px;
}

.emoji-grid::-webkit-scrollbar-thumb:hover,
.emoji-categories::-webkit-scrollbar-thumb:hover {
    background: rgba(130, 130, 130, 0.6);
}

.emoji-grid::-webkit-scrollbar-track,
.emoji-categories::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 768px) {
    .emoji-picker {
        width: calc(100vw - 16px);
        max-height: 76vh;
        border-radius: 14px;
        padding: 12px 10px 10px;
    }

    .emoji-picker-title {
        font-size: 18px;
    }

    .emoji-picker-subtitle {
        font-size: 11px;
    }

    .emoji-search {
        height: 40px;
        font-size: 13px;
    }

    .emoji-cat-btn {
        padding: 6px 11px;
        font-size: 11px;
    }

    .emoji-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 7px;
        max-height: 46vh;
    }

    .emoji-option {
        width: 38px;
        height: 38px;
        font-size: 22px;
        border-radius: 8px;
    }
}

/* Light mode: enforce pure white app and sidebar surfaces */
body:not([data-theme="dark"]) .sidebar {
    background: var(--sidebar-bg, var(--glass-01));
    border-right: 1px solid rgba(22, 30, 45, 0.12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body:not([data-theme="dark"]) .sidebar::before {
    background: transparent;
}

body:not([data-theme="dark"]) .sidebar-header,
body:not([data-theme="dark"]) .sidebar-search,
body:not([data-theme="dark"]) .sidebar-shortcuts,
body:not([data-theme="dark"]) .pages-list,
body:not([data-theme="dark"]) .sidebar-new-page,
body:not([data-theme="dark"]) .focus-timer {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Sidebar should read as one continuous surface across themes */
.sidebar .sidebar-header,
.sidebar .sidebar-search,
.sidebar .sidebar-shortcuts,
.sidebar .focus-timer,
.sidebar .pages-list,
.sidebar .sidebar-new-page {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sidebar .focus-timer:hover {
    background: transparent !important;
    border-color: transparent !important;
}

.sidebar .sidebar-header,
.sidebar .sidebar-search,
.sidebar .sidebar-shortcuts,
.sidebar .focus-timer,
.sidebar .pages-list,
.sidebar .sidebar-new-page {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .sidebar-header,
.sidebar .sidebar-search,
.sidebar .sidebar-shortcuts,
.sidebar .focus-timer,
.sidebar .pages-list,
.sidebar .sidebar-new-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sidebar .sidebar-shortcuts,
.sidebar .focus-timer,
.sidebar .pages-list,
.sidebar .sidebar-new-page {
    background-clip: padding-box;
}
/* Toolbar clock controls: keep the settings popover anchored and inside toolbar bounds */
.toolbar-time-elegant {
    position: relative !important;
    overflow: visible !important;
}

#toolbarTimeControls {
    position: absolute !important;
    top: calc(100% + 8px);
    right: 0;
    margin-left: 0 !important;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 10px 26px rgba(22, 30, 45, 0.14);
    z-index: 1400;
    white-space: nowrap;
    transform: translateX(0);
}

#toolbarTimeControls select {
    min-width: 86px;
}

@media (max-width: 768px) {
    #toolbarTimeControls {
        left: 0;
        right: auto;
        max-width: calc(100vw - 32px);
    }
}

/* Homework priority visuals */
.hw-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.2;
}

.hw-priority-high {
    background: rgba(211, 47, 47, 0.16);
    color: #b71c1c;
}

.hw-priority-medium {
    background: rgba(245, 124, 0, 0.18);
    color: #8a4700;
}

.hw-priority-low {
    background: rgba(46, 125, 50, 0.16);
    color: #1b5e20;
}

.hw-inline-add select {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: var(--text-primary);
    font-size: .8rem;
}

.hw-inline-add input[type="date"] {
    min-width: 124px;
    height: 38px;
    padding-right: 30px;
    text-align: left;
}

.hw-inline-add input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 8px;
    opacity: 0.9;
    cursor: pointer;
}

.hw-task-controls {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.hw-task-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.hw-task-control select {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
}

[data-theme="dark"] .hw-priority-high {
    background: rgba(211, 47, 47, 0.22);
    color: #ff8a80;
}

[data-theme="dark"] .hw-priority-medium {
    background: rgba(245, 124, 0, 0.22);
    color: #ffcc80;
}

[data-theme="dark"] .hw-priority-low {
    background: rgba(46, 125, 50, 0.24);
    color: #a5d6a7;
}

/* ------------------------------------------------------------------
   Responsive hardening layer
   Keeps app usable across narrow/short screens and mixed orientations.
------------------------------------------------------------------- */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: clamp(240px, 30vw, 300px);
    }

    .top-nav {
        gap: 12px !important;
    }

    .nav-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .nav-right {
        min-width: 200px;
    }

    .global-search {
        min-width: 0 !important;
        width: min(280px, 34vw);
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: clamp(240px, 72vw, 340px);
    }

    .app-container {
        overflow: hidden;
    }

    .main-content {
        min-width: 0;
        width: 100%;
    }

    .top-nav {
        margin: 8px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .nav-left {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .nav-right {
        display: none !important;
    }

    .brand-sub,
    .nav-divider {
        display: none !important;
    }

    .tabs-shell {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        padding-right: 56px; /* room for mobile toggle */
    }

    .view-tabs-toggle {
        right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    }

    .view-tabs.expanded {
        right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
        width: min(360px, calc(100vw - 16px - env(safe-area-inset-right, 0px))) !important;
        max-height: min(70vh, calc(100vh - 96px)) !important;
    }

    .toolbar-wrapper {
        left: 8px !important;
        right: 8px !important;
        max-width: none !important;
        top: calc(var(--top-nav-height-mobile) + 8px) !important;
        border-radius: 12px !important;
    }

    .toolbar {
        min-height: 48px;
    }

    .editor-container {
        padding: calc(var(--top-nav-height-mobile) + 72px) 12px 84px 12px !important;
    }

    .page-title-input {
        margin-top: 10px !important;
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    .editor {
        min-height: 48vh !important;
    }

    .storage-options {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
        width: auto !important;
        max-width: none !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px !important;
        z-index: 2400 !important;
    }

    .storage-options .storage-btn {
        min-height: 36px;
    }

    .chatbot-btn {
        right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
        z-index: 2500 !important;
    }

    .chatbot-panel {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
        max-height: 60vh !important;
    }

    .all-tasks-drawer {
        width: min(92vw, 420px) !important;
        right: 0 !important;
        top: var(--top-nav-height-mobile) !important;
        height: calc(100vh - var(--top-nav-height-mobile) - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 16px 0 0 16px !important;
        z-index: 2600 !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        width: min(var(--sidebar-width), 84vw) !important;
        min-width: min(var(--sidebar-width), 84vw) !important;
        max-width: min(var(--sidebar-width), 84vw) !important;
        z-index: 5000 !important;
        transform: translateX(0);
        transition: transform 0.25s ease;
    }

    .sidebar:not(.collapsed) {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Mobile source-of-truth: body class controls whether sidebar is visible */
    body:not(.sidebar-open) .sidebar {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar.collapsed {
        /* Use element-relative translation so any later width override still hides fully */
        transform: translateX(-100%) !important;
        width: min(var(--sidebar-width), 84vw) !important;
        min-width: min(var(--sidebar-width), 84vw) !important;
        border-right: none !important;
        box-shadow: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .sidebar-overlay {
        z-index: 4200 !important;
    }

    .sidebar-overlay.active {
        background: rgba(0, 0, 0, 0.38) !important;
    }

    .sidebar-toggle-btn {
        left: 12px !important;
        top: calc(var(--top-nav-height-mobile) + 52px) !important;
        z-index: 5200 !important;
    }

    .sidebar-toggle-btn.collapsed {
        left: 12px !important;
    }
}

@media (max-width: 640px) {
    .top-nav {
        margin: 6px !important;
        padding: 8px 10px !important;
    }

    .brand-label {
        font-size: 15px !important;
    }

    .view-tabs.expanded {
        padding: 8px !important;
        gap: 6px !important;
    }

    .view-tab {
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .toolbar {
        padding: 6px 8px !important;
    }

    .toolbar-btn {
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .editor-container {
        padding: calc(var(--top-nav-height-mobile) + 68px) 10px 90px 10px !important;
    }

    .summary-grid,
    .today-grid,
    .stats-grid {
        gap: 10px !important;
    }
}

@media (max-height: 760px) and (max-width: 1024px) {
    .top-nav {
        position: sticky;
        top: 4px !important;
    }

    .toolbar-wrapper {
        top: calc(var(--top-nav-height-mobile) + 4px) !important;
    }

    .editor-container {
        padding-top: calc(var(--top-nav-height-mobile) + 62px) !important;
    }

    .sidebar {
        padding-top: 74px !important;
    }

    .chatbot-panel {
        max-height: 52vh !important;
    }
}

/* ------------------------------------------------------------------
   Clean Scrollbars (sidebar + drawer surfaces)
------------------------------------------------------------------- */
:root {
    --scrollbar-track: rgba(22, 30, 45, 0.06);
    --scrollbar-thumb: rgba(22, 30, 45, 0.24);
    --scrollbar-thumb-hover: rgba(22, 30, 45, 0.36);
}

[data-theme="dark"] {
    --scrollbar-track: rgba(255, 255, 255, 0.06);
    --scrollbar-thumb: rgba(255, 255, 255, 0.24);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
}

.pages-list,
.all-tasks-drawer .drawer-body,
.emoji-picker-body,
.emoji-grid,
.emoji-categories,
.hw-setup-card {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: stable;
}

.pages-list::-webkit-scrollbar,
.all-tasks-drawer .drawer-body::-webkit-scrollbar,
.emoji-picker-body::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar,
.emoji-categories::-webkit-scrollbar,
.hw-setup-card::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pages-list::-webkit-scrollbar-track,
.all-tasks-drawer .drawer-body::-webkit-scrollbar-track,
.emoji-picker-body::-webkit-scrollbar-track,
.emoji-grid::-webkit-scrollbar-track,
.emoji-categories::-webkit-scrollbar-track,
.hw-setup-card::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

.pages-list::-webkit-scrollbar-thumb,
.all-tasks-drawer .drawer-body::-webkit-scrollbar-thumb,
.emoji-picker-body::-webkit-scrollbar-thumb,
.emoji-grid::-webkit-scrollbar-thumb,
.emoji-categories::-webkit-scrollbar-thumb,
.hw-setup-card::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scrollbar-thumb), var(--scrollbar-thumb));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.pages-list::-webkit-scrollbar-thumb:hover,
.all-tasks-drawer .drawer-body::-webkit-scrollbar-thumb:hover,
.emoji-picker-body::-webkit-scrollbar-thumb:hover,
.emoji-grid::-webkit-scrollbar-thumb:hover,
.emoji-categories::-webkit-scrollbar-thumb:hover,
.hw-setup-card::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--scrollbar-thumb-hover), var(--scrollbar-thumb-hover));
    background-clip: padding-box;
}

/* Hide arrow buttons that create the dated boxed look on Windows */
.pages-list::-webkit-scrollbar-button,
.all-tasks-drawer .drawer-body::-webkit-scrollbar-button,
.emoji-picker-body::-webkit-scrollbar-button,
.emoji-grid::-webkit-scrollbar-button,
.emoji-categories::-webkit-scrollbar-button,
.hw-setup-card::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Imported file-type icon accents */
.page-icon .imported-word-icon {
    color: #2b579a;
    font-size: 15px;
    line-height: 1;
}

[data-theme="dark"] .page-icon .imported-word-icon {
    color: #7fb0ff;
}

/* Import drag-and-drop modal */
.import-drop-modal {
    max-width: 620px;
}

.import-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    background: var(--glass-01);
    display: grid;
    gap: 10px;
    justify-items: center;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.import-drop-zone i {
    font-size: 24px;
    color: var(--accent);
}

.import-drop-title {
    font-weight: 700;
    color: var(--text-primary);
}

.import-drop-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 500px;
}

.import-drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------
   Today Dashboard Refresh
------------------------------------------------------------------- */
#view-today.dashboard-today {
    width: 100%;
    max-width: none;
    padding: 16px 20px 26px;
}

#view-today.dashboard-today > .view-header {
    margin-bottom: 14px;
    align-items: flex-end;
    gap: 14px;
}

#view-today.dashboard-today .today-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#view-today.dashboard-today .today-dashboard-surface {
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 186, 73, 0.18), transparent 35%),
        radial-gradient(circle at 92% 100%, rgba(255, 122, 60, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.34));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
}

#view-today.dashboard-today .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

#view-today.dashboard-today .summary-card {
    min-height: 130px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.38));
}

#view-today.dashboard-today .summary-value {
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
}

#view-today.dashboard-today .today-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 0.92fr);
    grid-template-areas:
        "commit commit habits"
        "due completed habits";
}

#view-today.dashboard-today .today-panel {
    min-height: 290px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.38));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
    padding: 16px;
    gap: 12px;
}

#view-today.dashboard-today .today-panel-committed { grid-area: commit; min-height: 340px; }
#view-today.dashboard-today .today-panel-due { grid-area: due; }
#view-today.dashboard-today .today-panel-completed { grid-area: completed; }
#view-today.dashboard-today .today-panel-habits { grid-area: habits; min-height: 100%; }

#view-today.dashboard-today .panel-header h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0.02em;
}

#view-today.dashboard-today .today-panel .neumo-chip {
    border-radius: 999px;
    padding: 4px 10px;
}

#view-today.dashboard-today .today-panel .task-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

#view-today.dashboard-today .today-panel .empty-state {
    margin-top: auto;
    border: 1px dashed rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.44);
}

#view-today.dashboard-today .today-panel .task-card {
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

#view-today.dashboard-today .today-panel .task-actions .neumo-btn {
    padding: 8px 12px;
    font-size: 13px;
}

#view-today.dashboard-today .habit-add-row {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px;
    border-radius: 12px;
}

#view-today.dashboard-today .today-analytics-section {
    margin-top: 8px;
}

#view-today.dashboard-today .today-analytics-header {
    margin-bottom: 12px;
}

#view-today.dashboard-today .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: 12px;
    margin: 0 0 34px;
    max-width: 100%;
}

#view-today.dashboard-today .card-weekly { grid-column: span 1; }
#view-today.dashboard-today .card-monthly { grid-column: span 1; }
#view-today.dashboard-today .card-categories { grid-column: span 1; }
#view-today.dashboard-today .card-streaks { grid-column: span 1; }
#view-today.dashboard-today .card-categories .card-content {
    align-items: center;
    gap: 16px;
}

#view-today.dashboard-today #categoryDonut {
    width: 174px;
    height: 174px;
    min-width: 174px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(0, 0, 0, 0.08);
}

#view-today.dashboard-today #categoryDonut svg {
    width: 156px;
    height: 156px;
}

#view-today.dashboard-today .card-categories .legend {
    flex: 1;
    min-width: 0;
    gap: 8px;
}

#view-today.dashboard-today .card-categories .legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.58);
}

#view-today.dashboard-today .card-categories .legend-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#view-today.dashboard-today .card-categories .legend-color {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.62);
}

#view-today.dashboard-today .card-categories .legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

#view-today.dashboard-today .card-categories .legend-metrics {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 0 auto;
}

#view-today.dashboard-today .card-categories .legend-percent {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 34px;
    text-align: right;
}

#view-today.dashboard-today .card-categories .legend-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: right;
}

[data-theme="dark"] #view-today.dashboard-today .today-dashboard-surface {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 10% 4%, rgba(255, 162, 0, 0.2), transparent 35%),
        radial-gradient(circle at 92% 96%, rgba(255, 88, 41, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(16, 14, 12, 0.88), rgba(11, 10, 9, 0.78));
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] #view-today.dashboard-today .summary-card,
[data-theme="dark"] #view-today.dashboard-today .today-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
}

[data-theme="dark"] #view-today.dashboard-today .today-panel .empty-state {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] #view-today.dashboard-today .habit-add-row {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] #view-today.dashboard-today #categoryDonut {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] #view-today.dashboard-today .card-categories .legend-item {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] #view-today.dashboard-today .today-workflow-hub {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
}

[data-theme="dark"] #view-today.dashboard-today .workflow-metric,
[data-theme="dark"] #view-today.dashboard-today .today-plan-output,
[data-theme="dark"] #view-today.dashboard-today .workflow-control-toggle,
[data-theme="dark"] #view-today.dashboard-today .today-plan-item {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1420px) {
    #view-today.dashboard-today .today-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "commit habits"
            "due habits"
            "completed habits";
    }

    #view-today.dashboard-today .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1024px) {
    #view-today.dashboard-today {
        padding: 14px 12px 20px;
    }

    #view-today.dashboard-today .today-dashboard-surface {
        padding: 12px;
    }

    #view-today.dashboard-today .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-today.dashboard-today .today-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "commit"
            "due"
            "completed"
            "habits";
    }

    #view-today.dashboard-today .today-panel {
        min-height: 240px;
    }

    #view-today.dashboard-today .stats-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    #view-today.dashboard-today .summary-grid {
        grid-template-columns: 1fr;
    }

    #view-today.dashboard-today .today-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    #view-today.dashboard-today .card-categories .card-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #view-today.dashboard-today #categoryDonut {
        width: 100%;
        max-width: 200px;
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        align-self: center;
    }
}

/* -------------------- College Tracker (Application Sheets sub-page) -------------------- */
#collegeappPage-sheets {
    gap: 18px;
    padding: 20px 20px 32px;
    flex-direction: column;
}

#collegeappPage-sheets .college-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

#collegeappPage-sheets .college-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#collegeappPage-sheets .college-tracker-shell {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#collegeappPage-sheets .college-sheet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#collegeappPage-sheets .college-sheet-tab {
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

#collegeappPage-sheets .college-sheet-tab:hover {
    transform: translateY(-1px);
}

#collegeappPage-sheets .college-sheet-tab.active {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #ffffff 38%));
    color: #fff;
    border-color: transparent;
}

#collegeappPage-sheets .college-sheet-panel {
    display: none;
}

#collegeappPage-sheets .college-sheet-panel.active {
    display: block;
}

#collegeappPage-sheets .college-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

#collegeappPage-sheets .college-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: collapse;
}

#collegeappPage-sheets .college-table thead th {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 8px;
    position: sticky;
    top: 0;
    z-index: 1;
}

#collegeappPage-sheets .college-table tbody td {
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 64%, transparent);
    padding: 8px;
    vertical-align: top;
}

#collegeappPage-sheets .college-empty-row td {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 20px 10px;
}

#collegeappPage-sheets .college-input,
#collegeappPage-sheets .college-select,
#collegeappPage-sheets .college-textarea {
    width: 100%;
    min-width: 110px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 0.84rem;
    outline: none;
}

#collegeappPage-sheets .college-textarea {
    resize: vertical;
    min-height: 42px;
    line-height: 1.35;
}

#collegeappPage-sheets .college-input:focus,
#collegeappPage-sheets .college-select:focus,
#collegeappPage-sheets .college-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 65%, #ffffff 35%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

#collegeappPage-sheets .college-cell-center {
    text-align: center;
}

#collegeappPage-sheets .college-checkbox-input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin-top: 7px;
}

#collegeappPage-sheets .college-row-actions {
    text-align: center;
    width: 42px;
}

#collegeappPage-sheets .college-row-actions .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

@media (max-width: 1280px) {
    #collegeappPage-sheets .college-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    #collegeappPage-sheets {
        padding: 12px 12px 24px;
    }

    #collegeappPage-sheets .college-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #collegeappPage-sheets .college-tracker-shell {
        padding: 10px;
    }

    #collegeappPage-sheets .college-sheet-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    #collegeappPage-sheets .college-sheet-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 7px 10px;
    }

    #collegeappPage-sheets .college-table {
        min-width: 900px;
    }

    #collegeappPage-sheets .college-table thead th {
        font-size: 0.72rem;
        padding: 8px 7px;
    }

    #collegeappPage-sheets .college-table tbody td {
        padding: 7px;
    }

    #collegeappPage-sheets .college-input,
    #collegeappPage-sheets .college-select,
    #collegeappPage-sheets .college-textarea {
        min-width: 94px;
        font-size: 0.78rem;
        padding: 6px 7px;
    }
}

@media (max-width: 560px) {
    #collegeappPage-sheets .college-summary-grid {
        grid-template-columns: 1fr;
    }

    #collegeappPage-sheets .college-header-actions {
        width: 100%;
    }

    #collegeappPage-sheets .college-header-actions .neumo-btn {
        width: 100%;
        justify-content: center;
    }

    #collegeappPage-sheets .college-table {
        min-width: 780px;
    }

    #collegeappPage-sheets .college-sheet-tab {
        font-size: 0.76rem;
        padding: 6px 9px;
    }
}

/* -------------------- College App / Life -------------------- */
#view-collegeapp,
#view-life {
    --workspace-card-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-secondary) 90%, transparent),
        color-mix(in srgb, var(--bg-secondary) 76%, transparent)
    );
    --workspace-card-border: color-mix(in srgb, var(--glass-border) 86%, transparent);
    --workspace-table-head-bg: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    --workspace-row-border: color-mix(in srgb, var(--glass-border) 64%, transparent);
    --workspace-row-hover: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 18px;
    padding: 22px 22px 36px;
}

#view-collegeapp.active,
#view-life.active {
    display: grid;
}

#view-collegeapp .view-header,
#view-life .view-header {
    margin-bottom: 2px;
    align-items: flex-end;
}

#view-collegeapp .view-header h2,
#view-life .view-header h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.65rem);
    letter-spacing: -0.02em;
}

#view-collegeapp .eyebrow,
#view-life .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
}

.academic-header-actions,
.collegeapp-header-actions,
.life-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.academic-header-actions .neumo-btn,
.collegeapp-header-actions .neumo-btn,
.life-header-actions .neumo-btn {
    min-height: 38px;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 0.84rem;
    white-space: nowrap;
}

.academic-summary-grid,
.collegeapp-summary-grid,
.life-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#view-collegeapp .summary-card,
#view-life .summary-card {
    min-height: 138px;
    padding: 18px 18px;
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 10px 26px rgba(8, 12, 18, 0.16);
}

#view-collegeapp .summary-label,
#view-life .summary-label {
    font-size: 0.69rem;
    letter-spacing: 0.18em;
}

#view-collegeapp .summary-value,
#view-life .summary-value {
    font-size: clamp(1.95rem, 3.2vw, 2.5rem);
    margin-bottom: 8px;
    line-height: 1.05;
}

#view-collegeapp .summary-meta,
#view-life .summary-meta {
    font-size: 0.82rem;
}

#view-collegeapp .collegeapp-summary-card--sat .summary-value {
    font-size: clamp(1.3rem, 2.4vw, 1.95rem);
    letter-spacing: -0.02em;
}

.sat-exam-countdown-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
}

.sat-exam-countdown-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.sat-exam-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sat-exam-control-grid label {
    display: grid;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.sat-exam-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sat-exam-live-cell {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 88%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    padding: 10px 8px;
    text-align: center;
    display: grid;
    gap: 2px;
}

.sat-exam-live-cell strong {
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

.sat-exam-live-cell span {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.sat-exam-countdown-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* ===== College App Dashboard Nav Grid ===== */
.collegeapp-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.collegeapp-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    border-radius: 18px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.collegeapp-nav-btn i {
    font-size: 1.6rem;
    color: var(--accent);
    transition: transform var(--transition-fast);
}

.collegeapp-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 8px 8px 22px var(--neumo-shadow-dark), -8px -8px 22px var(--neumo-shadow-light);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.collegeapp-nav-btn:hover i {
    transform: scale(1.12);
}

.collegeapp-nav-btn:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 8px var(--neumo-shadow-dark), inset -3px -3px 8px var(--neumo-shadow-light);
}

/* Sub-page back button */
.collegeapp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 4px 4px 12px var(--neumo-shadow-dark), -4px -4px 12px var(--neumo-shadow-light);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.collegeapp-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
}

.collegeapp-back-btn:active {
    transform: translateY(0);
    box-shadow: inset 2px 2px 6px var(--neumo-shadow-dark), inset -2px -2px 6px var(--neumo-shadow-light);
}

.collegeapp-back-btn i {
    color: var(--accent);
}

/* Sub-page animation */
.collegeapp-subpage {
    animation: collegeappPageFadeIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

#collegeappPage-decision {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

/* ===== Life Calculator ===== */
.life-calculator-page-wrap {
    display: grid;
    gap: 12px;
}

.life-calculator-shell {
    width: 100%;
    padding: 14px 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 10px 24px rgba(8, 12, 18, 0.14);
    display: grid;
    gap: 10px;
}

.life-calculator-shell-head h3 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.life-calculator-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.life-calculator-expression-input {
    min-height: 40px;
    font-size: 0.95rem;
}

.life-calculator-eval-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 24%, var(--bg-secondary));
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.life-calculator-eval-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 78%, transparent);
    background: color-mix(in srgb, var(--accent) 34%, var(--bg-secondary));
}

.life-calculator-eval-btn:active {
    transform: translateY(1px);
}

.life-calculator-hint {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.life-calculator-hint.is-success {
    color: color-mix(in srgb, #7ee787 70%, var(--text-primary));
}

.life-calculator-hint.is-error {
    color: color-mix(in srgb, #ff8585 82%, var(--text-primary));
}

/* ===== Life Dashboard Nav Grid ===== */
.life-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.life-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    border-radius: 18px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.life-nav-btn i {
    font-size: 1.6rem;
    color: var(--accent);
    transition: transform var(--transition-fast);
}

.life-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 8px 8px 22px var(--neumo-shadow-dark), -8px -8px 22px var(--neumo-shadow-light);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.life-nav-btn:hover i {
    transform: scale(1.12);
}

.life-nav-btn:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 8px var(--neumo-shadow-dark), inset -3px -3px 8px var(--neumo-shadow-light);
}

/* Life sub-page back button */
.life-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 4px 4px 12px var(--neumo-shadow-dark), -4px -4px 12px var(--neumo-shadow-light);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.life-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 16px var(--neumo-shadow-dark), -6px -6px 16px var(--neumo-shadow-light);
}

.life-back-btn:active {
    transform: translateY(0);
    box-shadow: inset 2px 2px 6px var(--neumo-shadow-dark), inset -2px -2px 6px var(--neumo-shadow-light);
}

.life-back-btn i {
    color: var(--accent);
}

/* Life sub-page animation */
.life-subpage {
    animation: lifePageFadeIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Mobile tweaks */
@media (max-width: 600px) {
    .collegeapp-nav-grid,
    .life-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .collegeapp-nav-btn,
    .life-nav-btn {
        padding: 20px 12px;
        font-size: 0.84rem;
    }
    .collegeapp-nav-btn i,
    .life-nav-btn i {
        font-size: 1.35rem;
    }

    .life-calculator-shell-head h3 {
        font-size: 1.35rem;
    }

    .life-calculator-inline {
        grid-template-columns: minmax(0, 1fr) 34px;
    }
}

.academic-module-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    min-height: 0;
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 10px 24px rgba(8, 12, 18, 0.14);
}

.academic-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.academic-module-head h3 {
    margin: 0;
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.academic-lite-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

#view-collegeapp .college-table-wrap,
#view-life .college-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 95%, transparent);
    border-radius: 13px;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    scrollbar-width: thin;
}

#view-collegeapp .college-table,
#view-life .college-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    height: auto;
    table-layout: auto;
}

#view-collegeapp .college-table thead,
#view-life .college-table thead {
    display: table-header-group;
}

#view-collegeapp .college-table tbody,
#view-life .college-table tbody {
    display: table-row-group;
}

#view-collegeapp .college-table tr,
#view-life .college-table tr {
    display: table-row;
}

#view-collegeapp .college-table th,
#view-life .college-table th,
#view-collegeapp .college-table td,
#view-life .college-table td {
    display: table-cell;
}

#view-collegeapp .college-table thead th,
#view-life .college-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--workspace-table-head-bg);
    border-bottom: 1px solid var(--workspace-row-border);
    padding: 12px 10px;
    white-space: nowrap;
    position: static;
    top: auto;
}

#view-collegeapp .college-table tbody tr,
#view-life .college-table tbody tr {
    transition: background-color 140ms ease;
}

#view-collegeapp .college-table tbody tr:nth-child(even),
#view-life .college-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

#view-collegeapp .college-table tbody tr:hover,
#view-life .college-table tbody tr:hover {
    background: var(--workspace-row-hover);
}

#view-collegeapp .college-table tbody td,
#view-life .college-table tbody td {
    border-bottom: 1px solid var(--workspace-row-border);
    padding: 11px 10px;
    vertical-align: middle;
}

#view-collegeapp .college-empty-row td,
#view-life .college-empty-row td {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 20px 10px;
}

#view-collegeapp .college-input,
#view-life .college-input,
#view-collegeapp .college-select,
#view-life .college-select,
#view-collegeapp .college-textarea,
#view-life .college-textarea {
    width: 100%;
    min-width: 110px;
    min-height: 36px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 0.86rem;
    line-height: 1.25;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-collegeapp .college-table .nf-select,
#view-life .college-table .nf-select {
    width: 100%;
    min-width: 110px;
}

#view-collegeapp .college-table .nf-date,
#view-life .college-table .nf-date {
    width: 100%;
    min-width: 110px;
}

#view-collegeapp .college-table .nf-select-trigger,
#view-life .college-table .nf-select-trigger {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 32px 7px 10px;
    font-size: 0.86rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-color: color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-collegeapp .college-table .nf-date-trigger,
#view-life .college-table .nf-date-trigger {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 34px 7px 10px;
    font-size: 0.86rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-color: color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-collegeapp .college-table .nf-select:not(.is-disabled) .nf-select-trigger:hover,
#view-life .college-table .nf-select:not(.is-disabled) .nf-select-trigger:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

#view-collegeapp .college-table .nf-select.open .nf-select-trigger,
#view-life .college-table .nf-select.open .nf-select-trigger {
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#view-collegeapp .college-table .nf-date:not(.is-disabled) .nf-date-trigger:hover,
#view-life .college-table .nf-date:not(.is-disabled) .nf-date-trigger:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

#view-collegeapp .college-table .nf-date.open .nf-date-trigger,
#view-life .college-table .nf-date.open .nf-date-trigger {
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#view-collegeapp .college-table .nf-select-chevron,
#view-life .college-table .nf-select-chevron {
    right: 11px;
    width: 9px;
    height: 9px;
    border-width: 1.7px;
}

#view-collegeapp .college-table .nf-date-icon,
#view-life .college-table .nf-date-icon {
    right: 10px;
    width: 14px;
    height: 14px;
}

#view-collegeapp .college-textarea,
#view-life .college-textarea {
    resize: vertical;
    min-height: 56px;
    line-height: 1.35;
}

#view-collegeapp .college-input::placeholder,
#view-life .college-input::placeholder,
#view-collegeapp .college-textarea::placeholder,
#view-life .college-textarea::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 85%, transparent);
}

#view-collegeapp .college-input:focus,
#view-life .college-input:focus,
#view-collegeapp .college-select:focus,
#view-life .college-select:focus,
#view-collegeapp .college-textarea:focus,
#view-life .college-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#view-collegeapp .college-cell-center,
#view-life .college-cell-center {
    text-align: center;
}

#view-collegeapp .college-checkbox-input,
#view-life .college-checkbox-input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin-top: 7px;
}

#view-collegeapp .college-row-actions,
#view-life .college-row-actions {
    text-align: center;
    width: 48px;
}

#view-collegeapp .college-row-actions .icon-btn,
#view-life .college-row-actions .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 85%, transparent);
}

#view-collegeapp .college-countdown-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

#view-collegeapp .college-countdown-chip--neutral {
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--workspace-card-border) 80%, transparent);
}

#view-collegeapp .college-countdown-chip--danger {
    background: color-mix(in srgb, #ff667a 18%, transparent);
    color: color-mix(in srgb, #bb2d43 78%, var(--text-primary) 22%);
    border-color: color-mix(in srgb, #ff667a 45%, transparent);
}

#view-collegeapp .college-countdown-chip--warn {
    background: color-mix(in srgb, #ff9f43 20%, transparent);
    color: color-mix(in srgb, #7d4b00 76%, var(--text-primary) 24%);
    border-color: color-mix(in srgb, #ff9f43 40%, transparent);
}

#view-collegeapp .college-countdown-chip--soon {
    background: color-mix(in srgb, #ffd166 26%, transparent);
    color: color-mix(in srgb, #6a5200 78%, var(--text-primary) 22%);
    border-color: color-mix(in srgb, #ffd166 48%, transparent);
}

#view-collegeapp .college-countdown-chip--safe {
    background: color-mix(in srgb, #44c37d 20%, transparent);
    color: color-mix(in srgb, #0a6b3a 70%, var(--text-primary) 30%);
    border-color: color-mix(in srgb, #44c37d 42%, transparent);
}

#view-collegeapp .college-countdown-chip--complete {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: color-mix(in srgb, var(--accent) 84%, var(--text-primary) 16%);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

#view-collegeapp .college-rec-tracker {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

#view-collegeapp .college-rec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#view-collegeapp .college-rec-grid label {
    display: grid;
    gap: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

#view-collegeapp .college-rec-input {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 0.78rem;
}

#view-collegeapp .college-app-progress-cell {
    min-width: 220px;
    display: grid;
    gap: 7px;
}

#view-collegeapp .college-app-progress-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 85%, transparent);
    overflow: hidden;
}

#view-collegeapp .college-app-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #ffffff 22%), color-mix(in srgb, #44c37d 64%, var(--accent) 36%));
    transition: width 180ms ease;
}

#view-collegeapp .college-app-progress-controls {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 64px auto;
    gap: 8px;
    align-items: center;
}

#view-collegeapp .college-app-progress-range {
    width: 100%;
    accent-color: var(--accent);
}

#view-collegeapp .college-app-progress-number {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 0.8rem;
}

#view-collegeapp .college-app-progress-percent {
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.academic-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 12px;
    align-items: start;
    padding: 2px 0;
}

.academic-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.academic-filter-grid label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ===== Decision Matrix -- Card-Based Redesign ===== */

/* Hero card - top pick spotlight */
.dm-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)), color-mix(in srgb, var(--accent) 4%, var(--bg-secondary)));
    box-shadow: 0 12px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.12);
    overflow: hidden;
}

.dm-hero-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.30);
}

.dm-hero-badge i {
    font-size: 1.35rem;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.dm-hero-body { flex: 1; min-width: 0; }

.dm-hero-label {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 2px;
}

.dm-hero-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.dm-hero-score {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.dm-hero-bar-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: var(--surface-bg);
}

.dm-hero-bar {
    height: 100%;
    border-radius: 0 4px 0 0;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffdf80));
    transition: width 420ms cubic-bezier(0.22,1,0.36,1);
}

/* Actions row */
.dm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dm-actions .neumo-btn {
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.dm-actions .neumo-btn:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-1px);
}

.dm-actions .neumo-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

[data-theme="dark"] .dm-actions .neumo-btn {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme="dark"] .dm-actions .neumo-btn:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- Layout: stacked ---- */
.dm-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-panel {
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 8px 24px rgba(8,12,18,0.12);
    overflow: hidden;
}

.dm-panel-head {
    padding: 14px 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dm-panel-head h4 {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-panel-head h4 i {
    color: var(--accent);
    font-size: 0.82rem;
}

/* Criteria toggle button */
.dm-criteria-toggle-btn {
    background: none;
    border: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.72rem;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.dm-criteria-toggle-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---- Criteria panel: compact 2-col grid ---- */
.dm-criteria-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0 14px 14px;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.dm-criteria-panel.collapsed .dm-criteria-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
}

.dm-criterion-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-card-border) 40%, transparent);
    transition: background var(--transition-fast);
}

.dm-criterion-card:nth-last-child(-n+2) {
    border-bottom: none;
}

.dm-criterion-card:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.dm-criterion-name-input {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    width: 100%;
    min-width: 0;
}

.dm-criterion-name-input::placeholder {
    color: var(--text-muted);
}

.dm-criterion-weight {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.dm-criterion-weight-bar-wrap {
    flex: 1;
    height: 5px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    overflow: hidden;
    min-width: 36px;
}

.dm-criterion-weight-bar {
    height: 100%;
    border-radius: 5px;
    background: var(--accent);
    transition: width 280ms cubic-bezier(0.22,1,0.36,1);
}

.dm-criterion-weight-input {
    width: 40px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 70%, transparent);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    padding: 3px 2px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.dm-criterion-weight-input:focus {
    border-color: var(--accent);
}

.dm-criterion-delete {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.dm-criterion-card:hover .dm-criterion-delete {
    opacity: 1;
}

/* Empty state */
.dm-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.dm-empty i {
    font-size: 1.6rem;
    color: var(--accent);
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}

/* ---- College Score Cards ---- */
.dm-college-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    padding: 0 14px 14px;
}

.dm-college-card {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 80%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.dm-college-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.dm-college-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-card-border) 50%, transparent);
}

.dm-college-name-input {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    flex: 1;
    min-width: 0;
}

.dm-college-name-input::placeholder {
    color: var(--text-muted);
}

.dm-college-card-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.dm-weighted-total {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-size: 1.15rem;
}

.dm-weighted-sub {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.dm-college-card-delete {
    opacity: 0.3;
    transition: opacity var(--transition-fast);
}

.dm-college-card:hover .dm-college-card-delete {
    opacity: 1;
}

.dm-college-card-body {
    padding: 8px 0;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Individual score row inside card */
.dm-card-row {
    display: grid;
    grid-template-columns: 1fr auto auto 52px;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    transition: background var(--transition-fast);
}

.dm-card-row:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.dm-card-row-zero {
    opacity: 0.55;
}

.dm-card-row-zero:hover {
    opacity: 1;
}

.dm-card-criterion-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-card-criterion-weight {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.dm-card-score-bar-wrap {
    width: 54px;
    height: 5px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    overflow: hidden;
    flex-shrink: 0;
}

.dm-card-score-bar {
    height: 100%;
    border-radius: 5px;
    background: var(--accent);
    transition: width 280ms cubic-bezier(0.22,1,0.36,1);
}

.dm-score-input {
    width: 48px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 60%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    padding: 4px 2px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dm-score-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Rankings ---- */
.dm-ranking-section {
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 8px 24px rgba(8,12,18,0.12);
    overflow: hidden;
}

.dm-ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.dm-rank-card {
    position: relative;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.dm-rank-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.dm-rank-card[data-rank="1"] {
    border-color: rgba(255, 215, 0, 0.45);
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
}

.dm-rank-card[data-rank="2"] {
    border-color: rgba(192, 192, 192, 0.35);
    background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(192,192,192,0.01));
}

.dm-rank-card[data-rank="3"] {
    border-color: rgba(205, 127, 50, 0.35);
    background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(205,127,50,0.01));
}

.dm-rank-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dm-rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 70%, transparent);
}

.dm-rank-card[data-rank="1"] .dm-rank-badge {
    background: linear-gradient(135deg, #ffd700, #f0c060);
    color: #5a4200;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255,215,0,0.35);
}

.dm-rank-card[data-rank="2"] .dm-rank-badge {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
    color: #444;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(192,192,192,0.35);
}

.dm-rank-card[data-rank="3"] .dm-rank-badge {
    background: linear-gradient(135deg, #cd7f32, #e0a060);
    color: #3a2200;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(205,127,50,0.35);
}

.dm-rank-name {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-rank-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dm-rank-score-label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
}

.dm-rank-score-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.dm-rank-bar-wrap {
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    overflow: hidden;
}

.dm-rank-bar {
    height: 100%;
    border-radius: 6px;
    background: var(--accent);
    transition: width 380ms cubic-bezier(0.22,1,0.36,1);
}

.dm-rank-card[data-rank="1"] .dm-rank-bar {
    background: linear-gradient(90deg, #ffd700, #f0c060);
}

.dm-rank-card[data-rank="2"] .dm-rank-bar {
    background: linear-gradient(90deg, #b0b0b0, #d0d0d0);
}

.dm-rank-card[data-rank="3"] .dm-rank-bar {
    background: linear-gradient(90deg, #cd7f32, #dda560);
}

/* Dark mode overrides */
[data-theme="dark"] .dm-hero {
    box-shadow: 0 12px 32px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.04);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)), color-mix(in srgb, var(--accent) 3%, var(--bg-secondary)));
}

[data-theme="dark"] .dm-panel,
[data-theme="dark"] .dm-ranking-section {
    box-shadow: 0 8px 24px rgba(0,0,0,0.36);
    border-color: rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}

[data-theme="dark"] .dm-criterion-card:hover,
[data-theme="dark"] .dm-card-row:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

[data-theme="dark"] .dm-criterion-weight-bar-wrap,
[data-theme="dark"] .dm-rank-bar-wrap,
[data-theme="dark"] .dm-card-score-bar-wrap {
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .dm-score-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .dm-score-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}

[data-theme="dark"] .dm-criterion-weight-input {
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .dm-college-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border-color: rgba(255,255,255,0.07);
}

[data-theme="dark"] .dm-college-card:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme="dark"] .dm-rank-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border-color: rgba(255,255,255,0.07);
}

[data-theme="dark"] .dm-rank-card[data-rank="1"] {
    border-color: rgba(255,215,0,0.28);
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
}

[data-theme="dark"] .dm-rank-card[data-rank="2"] {
    border-color: rgba(192,192,192,0.2);
    background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(192,192,192,0.015));
}

[data-theme="dark"] .dm-rank-card[data-rank="3"] {
    border-color: rgba(205,127,50,0.22);
    background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(205,127,50,0.015));
}

[data-theme="dark"] .dm-hero-bar-wrap {
    background: rgba(255,255,255,0.04);
}

/* Responsive */
@media (max-width: 960px) {
    .dm-criteria-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dm-hero {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px 16px 14px;
    }
    .dm-ranking-grid {
        grid-template-columns: 1fr;
    }
    .dm-hero-name {
        font-size: 1.15rem;
    }
    .dm-college-cards {
        grid-template-columns: 1fr;
    }
    .dm-criteria-list {
        grid-template-columns: 1fr;
    }
}

/* ================ Major Deciding Matrix (mdm-*) ================ */
.mdm-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)), color-mix(in srgb, var(--accent) 4%, var(--bg-secondary)));
    box-shadow: 0 12px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.12);
    overflow: hidden;
}
.mdm-hero-badge {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.30);
}
.mdm-hero-badge i { font-size: 1.35rem; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.mdm-hero-body { flex: 1; min-width: 0; }
.mdm-hero-label { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--accent); margin-bottom: 2px; }
.mdm-hero-name { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.mdm-hero-score { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 1px; }
.mdm-hero-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--surface-bg); }
.mdm-hero-bar { height: 100%; border-radius: 0 4px 0 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffdf80)); transition: width 420ms cubic-bezier(0.22,1,0.36,1); }

/* Actions */
.mdm-actions { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 0; }
.mdm-actions .neumo-btn {
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
    color: var(--accent); font-size: 0.82rem; font-weight: 700; padding: 8px 16px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.mdm-actions .neumo-btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }
.mdm-actions .neumo-btn:active { transform: translateY(0); box-shadow: none; }
[data-theme="dark"] .mdm-actions .neumo-btn { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
[data-theme="dark"] .mdm-actions .neumo-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Layout */
.mdm-layout { display: flex; flex-direction: column; gap: 16px; }
.mdm-panel {
    border-radius: 16px; border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg); box-shadow: 0 8px 24px rgba(8,12,18,0.12); overflow: hidden;
}
.mdm-panel-head { padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; }
.mdm-panel-head h4 { margin: 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.mdm-panel-head h4 i { color: var(--accent); font-size: 0.82rem; }

/* Criteria toggle */
.mdm-criteria-toggle-btn {
    background: none; border: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent);
    border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary); font-size: 0.72rem;
    transition: transform var(--transition-fast), background var(--transition-fast);
}
.mdm-criteria-toggle-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Criteria list - 2-col grid */
.mdm-criteria-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0 14px 14px;
    max-height: 420px; overflow-y: auto; scrollbar-width: thin;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
.mdm-criteria-panel.collapsed .mdm-criteria-list { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; }

.mdm-criterion-card {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-card-border) 40%, transparent);
    transition: background var(--transition-fast);
}
.mdm-criterion-card:nth-last-child(-n+2) { border-bottom: none; }
.mdm-criterion-card:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.mdm-criterion-name-input {
    border: none; background: transparent; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600;
    color: var(--text-primary); outline: none; width: 100%; min-width: 0;
}
.mdm-criterion-name-input::placeholder { color: var(--text-muted); }

.mdm-criterion-weight { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.mdm-criterion-weight-bar-wrap { flex: 1; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); overflow: hidden; min-width: 36px; }
.mdm-criterion-weight-bar { height: 100%; border-radius: 5px; background: var(--accent); transition: width 280ms cubic-bezier(0.22,1,0.36,1); }
.mdm-criterion-weight-input {
    width: 40px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 70%, transparent); border-radius: 8px;
    background: transparent; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--accent); padding: 3px 2px; outline: none;
    transition: border-color var(--transition-fast);
}
.mdm-criterion-weight-input:focus { border-color: var(--accent); }
.mdm-criterion-delete { opacity: 0; transition: opacity var(--transition-fast); }
.mdm-criterion-card:hover .mdm-criterion-delete { opacity: 1; }

/* Empty state */
.mdm-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 0.84rem; }
.mdm-empty i { font-size: 1.6rem; color: var(--accent); opacity: 0.4; display: block; margin-bottom: 8px; }

/* Major Score Cards */
.mdm-major-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 0 14px 14px; }
.mdm-major-card {
    border-radius: 14px; border: 1px solid color-mix(in srgb, var(--workspace-card-border) 80%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.mdm-major-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.mdm-major-card-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-card-border) 50%, transparent);
}
.mdm-major-name-input {
    border: none; background: transparent; font-family: var(--font-body); font-size: 1rem; font-weight: 700;
    color: var(--text-primary); outline: none; flex: 1; min-width: 0;
}
.mdm-major-name-input::placeholder { color: var(--text-muted); }

.mdm-major-card-score { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.mdm-weighted-total { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); font-size: 1.15rem; }
.mdm-weighted-sub { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.mdm-major-card-delete { opacity: 0.3; transition: opacity var(--transition-fast); }
.mdm-major-card:hover .mdm-major-card-delete { opacity: 1; }

.mdm-major-card-body { padding: 8px 0; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }

.mdm-card-row {
    display: grid; grid-template-columns: 1fr auto auto 52px; align-items: center; gap: 8px; padding: 5px 16px;
    transition: background var(--transition-fast);
}
.mdm-card-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mdm-card-row-zero { opacity: 0.55; }
.mdm-card-row-zero:hover { opacity: 1; }

.mdm-card-criterion-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdm-card-criterion-weight { font-size: 0.66rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; flex-shrink: 0; }
.mdm-card-score-bar-wrap { width: 54px; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); overflow: hidden; flex-shrink: 0; }
.mdm-card-score-bar { height: 100%; border-radius: 5px; background: var(--accent); transition: width 280ms cubic-bezier(0.22,1,0.36,1); }

.mdm-score-input {
    width: 48px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 60%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--text-primary); padding: 4px 2px; outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mdm-score-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Rankings */
.mdm-ranking-section {
    border-radius: 16px; border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg); box-shadow: 0 8px 24px rgba(8,12,18,0.12); overflow: hidden;
}
.mdm-ranking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 0 16px 16px; }

.mdm-rank-card {
    position: relative; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 6px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.mdm-rank-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }
.mdm-rank-card[data-rank="1"] { border-color: rgba(255,215,0,0.45); background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); }
.mdm-rank-card[data-rank="2"] { border-color: rgba(192,192,192,0.35); background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(192,192,192,0.01)); }
.mdm-rank-card[data-rank="3"] { border-color: rgba(205,127,50,0.35); background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(205,127,50,0.01)); }

.mdm-rank-header { display: flex; align-items: center; gap: 10px; }
.mdm-rank-badge {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 800; flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 70%, transparent);
}
.mdm-rank-card[data-rank="1"] .mdm-rank-badge { background: linear-gradient(135deg, #ffd700, #f0c060); color: #5a4200; border-color: transparent; box-shadow: 0 4px 12px rgba(255,215,0,0.35); }
.mdm-rank-card[data-rank="2"] .mdm-rank-badge { background: linear-gradient(135deg, #c0c0c0, #e0e0e0); color: #444; border-color: transparent; box-shadow: 0 4px 10px rgba(192,192,192,0.35); }
.mdm-rank-card[data-rank="3"] .mdm-rank-badge { background: linear-gradient(135deg, #cd7f32, #e0a060); color: #3a2200; border-color: transparent; box-shadow: 0 4px 10px rgba(205,127,50,0.35); }

.mdm-rank-name { font-weight: 700; font-size: 0.94rem; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdm-rank-score-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mdm-rank-score-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.mdm-rank-score-value { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.mdm-rank-bar-wrap { width: 100%; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg-secondary) 80%, transparent); overflow: hidden; }
.mdm-rank-bar { height: 100%; border-radius: 6px; background: var(--accent); transition: width 380ms cubic-bezier(0.22,1,0.36,1); }
.mdm-rank-card[data-rank="1"] .mdm-rank-bar { background: linear-gradient(90deg, #ffd700, #f0c060); }
.mdm-rank-card[data-rank="2"] .mdm-rank-bar { background: linear-gradient(90deg, #b0b0b0, #d0d0d0); }
.mdm-rank-card[data-rank="3"] .mdm-rank-bar { background: linear-gradient(90deg, #cd7f32, #dda560); }

/* MDM Dark mode */
[data-theme="dark"] .mdm-hero { box-shadow: 0 12px 32px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.04); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)), color-mix(in srgb, var(--accent) 3%, var(--bg-secondary))); }
[data-theme="dark"] .mdm-panel, [data-theme="dark"] .mdm-ranking-section { box-shadow: 0 8px 24px rgba(0,0,0,0.36); border-color: rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); }
[data-theme="dark"] .mdm-criterion-card:hover, [data-theme="dark"] .mdm-card-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-theme="dark"] .mdm-criterion-weight-bar-wrap, [data-theme="dark"] .mdm-rank-bar-wrap, [data-theme="dark"] .mdm-card-score-bar-wrap { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .mdm-score-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mdm-score-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18); }
[data-theme="dark"] .mdm-criterion-weight-input { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mdm-criterion-weight-input:focus { border-color: var(--accent); }
[data-theme="dark"] .mdm-criterion-name-input { color: var(--text-primary); }
[data-theme="dark"] .mdm-major-name-input { color: var(--text-primary); }
[data-theme="dark"] .mdm-criteria-toggle-btn { border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
[data-theme="dark"] .mdm-criteria-toggle-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
[data-theme="dark"] .mdm-empty { color: var(--text-muted); }
[data-theme="dark"] .mdm-empty i { color: var(--accent); }
[data-theme="dark"] .mdm-major-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .mdm-major-card:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
[data-theme="dark"] .mdm-major-card-head { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .mdm-rank-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .mdm-rank-card[data-rank="1"] { border-color: rgba(255,215,0,0.28); background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); }
[data-theme="dark"] .mdm-rank-card[data-rank="2"] { border-color: rgba(192,192,192,0.15); background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(192,192,192,0.015)); }
[data-theme="dark"] .mdm-rank-card[data-rank="3"] { border-color: rgba(205,127,50,0.22); background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(205,127,50,0.015)); }
[data-theme="dark"] .mdm-rank-badge { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mdm-hero-bar-wrap { background: rgba(255,255,255,0.04); }

/* MDM Responsive */
@media (max-width: 960px) {
    .mdm-criteria-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mdm-hero { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px 14px; }
    .mdm-hero-badge { width: 44px; height: 44px; }
    .mdm-hero-badge i { font-size: 1.1rem; }
    .mdm-hero-name { font-size: 1.15rem; }
    .mdm-hero-score { font-size: 0.78rem; }
    .mdm-ranking-grid { grid-template-columns: 1fr; }
    .mdm-major-cards { grid-template-columns: 1fr; }
    .mdm-criteria-list { grid-template-columns: 1fr; }
    .mdm-actions { justify-content: center; gap: 12px; }
    .mdm-actions .neumo-btn { padding: 10px 18px; font-size: 0.84rem; }
    .mdm-panel-head { padding: 12px 14px 8px; }
    .mdm-panel-head h4 { font-size: 0.72rem; }
    .mdm-criterion-card { padding: 10px; gap: 6px; }
    .mdm-criterion-weight { min-width: 72px; }
    .mdm-criterion-delete { opacity: 1; }
    .mdm-major-card-head { padding: 12px 14px 8px; }
    .mdm-major-card-delete { opacity: 1; }
    .mdm-card-row { grid-template-columns: 1fr auto 36px; gap: 6px; padding: 5px 12px; }
    .mdm-card-score-bar-wrap { display: none; }
    .mdm-score-input { width: 44px; padding: 6px 2px; font-size: 0.84rem; }
    .mdm-rank-card { padding: 14px 12px 12px; }
    .mdm-ranking-grid { gap: 10px; padding: 0 12px 12px; }
}
@media (max-width: 420px) {
    .mdm-hero { padding: 14px 12px 12px; gap: 10px; }
    .mdm-hero-name { font-size: 1rem; }
    .mdm-actions .neumo-btn { padding: 9px 14px; font-size: 0.8rem; }
    .mdm-criterion-card { grid-template-columns: 1fr auto; }
    .mdm-criterion-weight-bar-wrap { display: none; }
    .mdm-major-cards { padding: 0 10px 10px; }
    .mdm-card-row { padding: 5px 10px; }
    .mdm-rank-card { padding: 12px 10px 10px; }
}
/* ================ End Major Deciding Matrix ================ */

.life-spending-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.life-spending-summary-item {
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 84%, transparent);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
}

/* ===== Spending Tracker Professional Styles ===== */
.spending-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.spending-stat-card {
    border-radius: 14px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 6px 18px rgba(8, 12, 18, 0.1);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spending-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-secondary);
}

.spending-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.15;
}

.spending-stat-value-sm {
    font-size: 1.05rem;
    font-weight: 700;
}

/* Breakdown table */
.spending-breakdown-card {
    margin-bottom: 0;
}

.spending-breakdown-table .spending-col-right,
.spending-ledger-table .spending-col-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.spending-breakdown-table thead th {
    font-size: 0.7rem !important;
}

.spending-breakdown-table tbody td {
    font-size: 0.88rem;
}

.spending-breakdown-table tfoot td {
    font-weight: 800;
    font-size: 0.9rem;
    border-top: 2px solid var(--accent);
    padding-top: 10px;
    padding-bottom: 10px;
}

.spending-cat-bar-wrap {
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    overflow: hidden;
}

.spending-cat-bar {
    height: 100%;
    border-radius: 8px;
    background: var(--accent);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ledger table */
.spending-ledger-table tbody td input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.spending-ledger-table tbody td input[type="date"] {
    min-width: 130px;
}

.spending-period-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 6px;
}

@media (max-width: 600px) {
    .spending-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .spending-stat-card {
        padding: 12px 14px;
    }
    .spending-stat-value {
        font-size: 1.25rem;
    }
}

#view-today .today-academic-section {
    --workspace-card-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-secondary) 90%, transparent),
        color-mix(in srgb, var(--bg-secondary) 76%, transparent)
    );
    --workspace-card-border: color-mix(in srgb, var(--glass-border) 86%, transparent);
    --workspace-table-head-bg: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    --workspace-row-border: color-mix(in srgb, var(--glass-border) 64%, transparent);
    --workspace-row-hover: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px;
}

/* -- Academic: Module Head -- */
.acad-head-icon {
    color: var(--accent);
    margin-right: 4px;
    font-size: 0.95em;
}
.acad-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acad-filter-toggle {
    font-size: 13px;
    padding: 7px 12px;
}
.acad-filter-toggle i { margin-right: 4px; }
.acad-filter-toggle.active {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-secondary));
    border-color: var(--accent);
    color: var(--accent);
}
.acad-add-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    font-size: 13px;
    padding: 7px 14px;
}
.acad-add-btn:hover { filter: brightness(1.08); }
.acad-cancel-btn {
    font-size: 13px;
    padding: 7px 14px;
}

/* -- Academic: Compact Filter Bar -- */
.acad-filter-bar {
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
    border: 1px solid var(--workspace-card-border, var(--surface-border));
}
.acad-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.acad-filter-pill {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 120px;
    max-width: 180px;
}
.acad-filter-pill label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-secondary);
    padding-left: 2px;
}
.acad-filter-pill .college-select {
    min-height: 32px;
    font-size: 0.82rem;
    padding: 5px 8px;
    border-radius: 8px;
}

/* -- Academic: Upcoming Strip (cards instead of table) -- */
.acad-upcoming-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acad-upcoming-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.acad-upcoming-label i { color: var(--accent); font-size: 11px; }
.acad-upcoming-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.acad-upcoming-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    border: 1px solid var(--workspace-card-border, var(--surface-border));
    transition: background 0.12s;
}
.acad-upcoming-card:hover {
    background: var(--workspace-row-hover, var(--surface-bg-hover));
}
.acad-upcoming-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.acad-upcoming-card-icon.type-assignment {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-secondary));
    color: var(--accent);
}
.acad-upcoming-card-icon.type-exam {
    background: color-mix(in srgb, #e74c3c 18%, var(--bg-secondary));
    color: #e74c3c;
}
.acad-upcoming-card-icon.type-extracurricular {
    background: color-mix(in srgb, #6c5ce7 18%, var(--bg-secondary));
    color: #6c5ce7;
}
.acad-upcoming-card-body {
    min-width: 0;
    flex: 1;
}
.acad-upcoming-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acad-upcoming-card-sub {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acad-upcoming-card-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}
.acad-upcoming-card-date.is-soon {
    color: #e67e22;
}
.acad-upcoming-card-date.is-overdue {
    color: #e74c3c;
}
.acad-upcoming-empty {
    display: none;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 10px 0;
    text-align: center;
}
.acad-upcoming-strip:not(:has(.acad-upcoming-card)) .acad-upcoming-empty {
    display: block;
}
.acad-upcoming-strip:has(.acad-upcoming-card) .acad-upcoming-empty {
    display: none;
}

/* ===========================================================
   Academic: Add Deadline Modal  (complete rewrite)
   =========================================================== */

/* -- Overlay -- */
.acad-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: amoIn .2s ease;
    padding: 16px;
}
.acad-modal-overlay[hidden] { display: none !important; }
@keyframes amoIn { from { opacity: 0 } to { opacity: 1 } }

/* -- Card shell -- */
.acad-modal-card {
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
    padding: 0;
    background: var(--bg-primary, #ffffff);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.07)) 70%, transparent);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 8px 30px rgba(0,0,0,.12),
        0 30px 70px rgba(0,0,0,.16);
    animation: amcIn .28s cubic-bezier(.16,1,.3,1);
    display: flex;
    flex-direction: column;
}
@keyframes amcIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.acad-modal-card::-webkit-scrollbar { width: 4px; }
.acad-modal-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 8px; }

/* -- Header -- */
.acad-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.06)) 55%, transparent);
}
.acad-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.acad-modal-icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #f06292) 13%, transparent);
    color: var(--accent, #f06292);
    font-size: .88rem;
    flex-shrink: 0;
}
.acad-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-primary, #1a1a1a);
}
.acad-modal-close-btn {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.07)) 55%, transparent);
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary, #888);
    cursor: pointer;
    font-size: .82rem;
    flex-shrink: 0;
    transition: all .13s ease;
}
.acad-modal-close-btn:hover {
    background: color-mix(in srgb, var(--accent, #f06292) 11%, transparent);
    border-color: color-mix(in srgb, var(--accent, #f06292) 28%, transparent);
    color: var(--accent, #f06292);
}

/* -- Body - flat 2-col grid -- */
.acad-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 24px;
}

/* -- Individual field -- */
.acad-mf {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.acad-mf--title { grid-column: 1 / -1; }
.acad-mf--notes { grid-column: 1 / -1; }

.acad-mf label {
    font-size: .72rem;
    font-weight: 650;
    color: var(--text-secondary, #777);
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1;
    padding-left: 2px;
}
.acad-mf-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .55;
    font-size: .71rem;
}

/* Hidden time wrap */
.acad-mf#todayAcademicNewTimeWrap.is-hidden,
#todayAcademicNewTimeWrap.is-hidden {
    display: none;
}

/* -- Inputs inside modal -- */
.acad-mf .college-input,
.acad-mf .college-select,
.acad-mf .college-textarea {
    width: 100%;
    min-height: 38px;
    background: color-mix(in srgb, var(--bg-secondary, #f5f5f5) 50%, transparent);
    color: var(--text-primary, #1a1a1a);
    border: 1.5px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.07)) 65%, transparent);
    border-radius: 10px;
    padding: 7px 11px;
    font-size: .85rem;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    transition: border-color .14s, box-shadow .14s;
}
.acad-mf .college-input:focus,
.acad-mf .college-select:focus,
.acad-mf .college-textarea:focus {
    border-color: var(--accent, #f06292);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent, #f06292) 13%, transparent);
}
.acad-mf .college-input::placeholder,
.acad-mf .college-textarea::placeholder {
    color: color-mix(in srgb, var(--text-secondary, #888) 50%, transparent);
}
.acad-mf .college-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}
.acad-mf .college-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* -- Force custom nf-select / nf-date to fill grid cells -- */
.acad-mf .nf-select,
.acad-mf .nf-date {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
.acad-mf .nf-select-trigger,
.acad-mf .nf-date-trigger {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    padding: 7px 30px 7px 11px;
    font-size: .85rem;
    background: color-mix(in srgb, var(--bg-secondary, #f5f5f5) 50%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.07)) 65%, transparent);
    box-shadow: none;
    transition: border-color .14s, box-shadow .14s;
}
.acad-mf .nf-select:not(.is-disabled) .nf-select-trigger:hover,
.acad-mf .nf-date:not(.is-disabled) .nf-date-trigger:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--accent, #f06292) 60%, transparent);
    box-shadow: none;
}
.acad-mf .nf-select.open .nf-select-trigger,
.acad-mf .nf-date.open .nf-date-trigger {
    border-color: var(--accent, #f06292);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent, #f06292) 13%, transparent);
}
.acad-mf .nf-select-chevron {
    right: 10px;
    width: 8px; height: 8px;
    border-width: 1.6px;
}
.acad-mf .nf-date-icon {
    right: 10px;
    width: 13px; height: 13px;
}

/* -- Footer -- */
.acad-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 20px;
    border-top: 1px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.06)) 55%, transparent);
}

.acad-modal-cancel {
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.09)) 75%, transparent) !important;
    color: var(--text-secondary, #777) !important;
    border-radius: 10px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    cursor: pointer;
    transition: all .13s ease;
}
.acad-modal-cancel:hover {
    background: color-mix(in srgb, var(--bg-secondary, #f5f5f5) 75%, transparent) !important;
    color: var(--text-primary, #1a1a1a) !important;
    border-color: color-mix(in srgb, var(--workspace-card-border, rgba(0,0,0,.12)) 90%, transparent) !important;
}

.acad-modal-submit {
    background: var(--accent, #f06292) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .16s ease;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent, #f06292) 32%, transparent);
}
.acad-modal-submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent, #f06292) 40%, transparent);
    transform: translateY(-1px);
}
.acad-modal-submit:active {
    transform: translateY(0);
}

/* -- Responsive -- */
@media (max-width: 480px) {
    .acad-modal-card { max-width: 100%; border-radius: 18px; }
    .acad-modal-header { padding: 16px 18px 14px; }
    .acad-modal-body   { padding: 16px 18px; gap: 12px; grid-template-columns: 1fr; }
    .acad-mf--title, .acad-mf--notes { grid-column: span 1; }
    .acad-modal-footer { padding: 12px 18px 16px; flex-direction: column-reverse; }
    .acad-modal-footer .acad-modal-cancel,
    .acad-modal-footer .acad-modal-submit {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* -- Dark theme -- */
[data-theme="dark"] .acad-modal-card {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 8px 30px rgba(0,0,0,.35),
        0 30px 70px rgba(0,0,0,.45);
}
[data-theme="dark"] .acad-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .acad-mf .college-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -- Academic: Responsive -- */
@media (max-width: 700px) {
    .acad-filter-pill { max-width: none; flex: 1 1 100%; }
    .acad-upcoming-cards { grid-template-columns: 1fr; }
    #view-today .today-academic-section .today-academic-add-grid {
        grid-template-columns: 1fr 1fr;
    }
    #view-today .today-academic-section .today-academic-add-notes {
        grid-column: 1 / -1;
    }
}

#view-today .today-academic-section .today-academic-add-form {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 92%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
}

#view-today .today-academic-section .today-academic-add-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px;
}

#view-today .today-academic-section .today-academic-add-notes {
    grid-column: span 2;
}

#view-today .today-academic-section .today-academic-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

#view-today .today-academic-section #todayAcademicNewTimeWrap.is-hidden {
    display: none;
}

#view-today .today-academic-section .today-academic-add-form .college-input,
#view-today .today-academic-section .today-academic-add-form .college-select,
#view-today .today-academic-section .today-academic-add-form .college-textarea {
    min-width: 0;
}

#view-today .today-academic-section .today-academic-add-form .nf-select,
#view-today .today-academic-section .today-academic-add-form .nf-date {
    width: 100%;
    min-width: 0;
}

#view-today .today-academic-section .today-academic-add-form .nf-select-trigger,
#view-today .today-academic-section .today-academic-add-form .nf-date-trigger {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 34px 7px 10px;
    font-size: 0.86rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-color: color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-today .today-academic-section .academic-module-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    min-height: 0;
    border-radius: 16px;
    border: 1px solid var(--workspace-card-border);
    background: var(--workspace-card-bg);
    box-shadow: 0 10px 24px rgba(8, 12, 18, 0.14);
}

#view-today .today-academic-section .academic-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

#view-today .today-academic-section .academic-module-head h3 {
    margin: 0;
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

#view-today .today-academic-section .college-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 95%, transparent);
    border-radius: 13px;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    scrollbar-width: thin;
}

#view-today .today-academic-section .college-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    table-layout: auto;
}

#view-today .today-academic-section .college-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--workspace-table-head-bg);
    border-bottom: 1px solid var(--workspace-row-border);
    padding: 12px 10px;
    white-space: nowrap;
}

#view-today .today-academic-section .college-table tbody tr {
    transition: background-color 140ms ease;
}

#view-today .today-academic-section .college-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

#view-today .today-academic-section .college-table tbody tr:hover {
    background: var(--workspace-row-hover);
}

#view-today .today-academic-section .college-table tbody td {
    border-bottom: 1px solid var(--workspace-row-border);
    padding: 11px 10px;
    vertical-align: middle;
}

#view-today .today-academic-section .college-empty-row td {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 20px 10px;
}

#view-today .today-academic-section .college-input,
#view-today .today-academic-section .college-select,
#view-today .today-academic-section .college-textarea {
    width: 100%;
    min-width: 110px;
    min-height: 36px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 0.86rem;
    line-height: 1.25;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-today .today-academic-section .college-textarea {
    resize: vertical;
    min-height: 56px;
    line-height: 1.35;
}

#view-today .today-academic-section .college-input::placeholder,
#view-today .today-academic-section .college-textarea::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 85%, transparent);
}

#view-today .today-academic-section .college-input:focus,
#view-today .today-academic-section .college-select:focus,
#view-today .today-academic-section .college-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#view-today .today-academic-section .college-row-actions {
    text-align: center;
    width: 48px;
}

#view-today .today-academic-section .college-row-actions .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--workspace-card-border) 85%, transparent);
}

#view-today .today-academic-section .college-table .nf-select,
#view-today .today-academic-section .college-table .nf-date {
    width: 100%;
    min-width: 110px;
}

#view-today .today-academic-section .college-table .nf-select-trigger {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 32px 7px 10px;
    font-size: 0.86rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-color: color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-today .today-academic-section .college-table .nf-date-trigger {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 34px 7px 10px;
    font-size: 0.86rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-color: color-mix(in srgb, var(--workspace-card-border) 90%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#view-today .today-academic-section .college-table .nf-select:not(.is-disabled) .nf-select-trigger:hover,
#view-today .today-academic-section .college-table .nf-date:not(.is-disabled) .nf-date-trigger:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

#view-today .today-academic-section .college-table .nf-select.open .nf-select-trigger,
#view-today .today-academic-section .college-table .nf-date.open .nf-date-trigger {
    border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#view-today .today-academic-section .college-table .nf-select-chevron {
    right: 11px;
    width: 9px;
    height: 9px;
    border-width: 1.7px;
}

#view-today .today-academic-section .college-table .nf-date-icon {
    right: 10px;
    width: 14px;
    height: 14px;
}

[data-theme="dark"] #view-collegeapp,
[data-theme="dark"] #view-life {
    --workspace-card-bg: linear-gradient(
        180deg,
        rgba(21, 20, 18, 0.86),
        rgba(16, 15, 13, 0.84)
    );
    --workspace-card-border: rgba(255, 255, 255, 0.12);
    --workspace-table-head-bg: rgba(255, 255, 255, 0.03);
    --workspace-row-border: rgba(255, 255, 255, 0.08);
    --workspace-row-hover: rgba(255, 191, 84, 0.09);
}

[data-theme="dark"] #view-today .today-academic-section {
    --workspace-card-bg: linear-gradient(
        180deg,
        rgba(21, 20, 18, 0.86),
        rgba(16, 15, 13, 0.84)
    );
    --workspace-card-border: rgba(255, 255, 255, 0.12);
    --workspace-table-head-bg: rgba(255, 255, 255, 0.03);
    --workspace-row-border: rgba(255, 255, 255, 0.08);
    --workspace-row-hover: rgba(255, 191, 84, 0.09);
}

@media (max-width: 1180px) {
    .academic-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #view-today .today-academic-section .today-academic-add-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dm-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 840px) {
    #view-collegeapp,
    #view-life {
        padding: 14px 12px 26px;
        gap: 14px;
    }

    .academic-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-today .today-academic-section .today-academic-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #view-today .today-academic-section .today-academic-add-notes {
        grid-column: span 2;
    }

    #view-collegeapp .college-table,
    #view-life .college-table {
        min-width: 860px;
    }

    #view-today .today-academic-section .college-table {
        min-width: 860px;
    }

    #view-collegeapp .college-table thead th,
    #view-life .college-table thead th {
        font-size: 0.69rem;
        padding: 8px 7px;
    }

    #view-today .today-academic-section .college-table thead th {
        font-size: 0.69rem;
        padding: 8px 7px;
    }

    #view-collegeapp .college-table tbody td,
    #view-life .college-table tbody td {
        padding: 7px;
    }

    #view-today .today-academic-section .college-table tbody td {
        padding: 7px;
    }

    #view-collegeapp .college-input,
    #view-life .college-input,
    #view-collegeapp .college-select,
    #view-life .college-select,
    #view-collegeapp .college-textarea,
    #view-life .college-textarea {
        min-width: 94px;
        font-size: 0.78rem;
        padding: 6px 7px;
    }

    #view-today .today-academic-section .college-input,
    #view-today .today-academic-section .college-select,
    #view-today .today-academic-section .college-textarea {
        min-width: 94px;
        font-size: 0.78rem;
        padding: 6px 7px;
    }
}

@media (max-width: 560px) {
    .academic-header-actions .neumo-btn,
    .collegeapp-header-actions .neumo-btn,
    .life-header-actions .neumo-btn,
    .academic-module-head .neumo-btn {
        width: 100%;
        justify-content: center;
    }

    .academic-filter-grid {
        grid-template-columns: 1fr;
    }

    #view-today .today-academic-section .today-academic-add-grid {
        grid-template-columns: 1fr;
    }

    #view-today .today-academic-section .today-academic-add-notes {
        grid-column: span 1;
    }

    #view-today .today-academic-section .today-academic-add-actions {
        justify-content: flex-start;
    }

    #view-today .today-academic-section .today-academic-add-actions .neumo-btn {
        width: 100%;
        justify-content: center;
    }

    #view-collegeapp .college-table,
    #view-life .college-table {
        min-width: 760px;
    }

    #view-today .today-academic-section .college-table {
        min-width: 760px;
    }
}

/* ------------------------------------------------------------------
   Mobile polish pass
   Improves settings density, touch targets, and small-screen layout flow.
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #view-settings {
        padding: 12px 12px 120px;
    }

    #view-settings .settings-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    #view-settings .settings-main-stack {
        gap: 14px;
    }

    #view-settings .settings-feature-rail {
        align-self: stretch;
    }

    #view-settings .settings-card {
        padding: 14px;
        gap: 10px;
        border-radius: 14px;
    }

    #view-settings .settings-row {
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
    }

    #view-settings .settings-row > .neumo-btn {
        flex: 0 0 auto;
        width: 100%;
        min-height: 42px;
        justify-content: center;
    }

    #view-settings .settings-row .modal-input {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #view-settings #taskOrderStrategySelect {
        width: 100% !important;
        max-width: none !important;
    }

    #view-settings #featureToggleListSettings {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    #view-settings .settings-help {
        line-height: 1.45;
    }

    .chatbot-panel .chat-settings-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
    }

    .chatbot-panel .chat-settings-row button {
        width: 100%;
        min-height: 40px;
    }

    .chatbot-panel .chat-key-item {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }

    .chatbot-panel .chat-settings-actions {
        justify-content: stretch;
    }

    .chatbot-panel .chat-settings-actions button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    #view-settings {
        padding: 10px 10px 132px;
    }

    #view-settings .view-header h2 {
        font-size: clamp(1.15rem, 5.3vw, 1.45rem);
    }

    #view-settings .settings-grid,
    #view-settings .settings-main-stack {
        gap: 12px;
    }

    #view-settings .settings-card {
        padding: 12px;
    }

    #view-settings #featureToggleListSettings {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #view-settings #featureToggleListSettings .feature-toggle-card {
        min-height: 60px;
        padding: 10px;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 10px;
    }

    #view-settings #featureToggleListSettings .feature-toggle-description {
        display: none;
    }

    #view-settings .settings-actions {
        width: 100%;
    }

    #view-settings .settings-actions .neumo-btn {
        flex: 1 1 auto;
        width: 100%;
        min-height: 40px;
    }

    .nf-select .nf-select-trigger {
        min-height: 42px;
        padding: 10px 12px;
    }

    .nf-select .nf-select-menu {
        max-height: min(44vh, 320px);
    }

    .nf-select .nf-select-option {
        min-height: 38px;
        font-size: 14px;
    }

    .focus-timer .timer-settings {
        gap: 10px;
    }

    .focus-timer .timer-settings .timer-field {
        padding: 8px 9px;
    }

    .timer-volume-row {
        align-items: center;
        gap: 10px;
    }

    .timer-volume-row output {
        min-width: 46px;
        font-size: 12px;
    }

    .tutorial-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .tutorial-actions .neumo-btn {
        flex: 1 1 calc(50% - 8px);
        min-height: 38px;
    }

    .modal-content {
        width: min(560px, calc(100vw - 18px));
        max-height: calc(100vh - 16px);
        padding: 14px;
    }
}

/* =====================================================================
   Dark-mode overrides for new dashboard / modal / spending components
   ===================================================================== */

/* --- Nav buttons (College App + Life dashboards) --- */
[data-theme="dark"] .collegeapp-nav-btn,
[data-theme="dark"] .life-nav-btn {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.48), -2px -2px 8px rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

[data-theme="dark"] .collegeapp-nav-btn:hover,
[data-theme="dark"] .life-nav-btn:hover {
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.56), -3px -3px 10px rgba(255, 255, 255, 0.03);
    border-color: rgba(var(--accent-rgb), 0.36);
}

[data-theme="dark"] .collegeapp-nav-btn:active,
[data-theme="dark"] .life-nav-btn:active {
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.52), inset -2px -2px 6px rgba(255, 255, 255, 0.025);
}

/* --- Back buttons --- */
[data-theme="dark"] .collegeapp-back-btn,
[data-theme="dark"] .life-back-btn {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.44), -2px -2px 8px rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

[data-theme="dark"] .collegeapp-back-btn:hover,
[data-theme="dark"] .life-back-btn:hover {
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.52), -3px -3px 10px rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .collegeapp-back-btn:active,
[data-theme="dark"] .life-back-btn:active {
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.5), inset -2px -2px 6px rgba(255, 255, 255, 0.02);
}

/* --- Summary cards in workspace views --- */
[data-theme="dark"] #view-collegeapp .summary-card,
[data-theme="dark"] #view-life .summary-card {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
    border-color: rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
}

/* --- Spending stat cards --- */
[data-theme="dark"] .spending-stat-card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
    border-color: rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
}

/* --- Spending breakdown table --- */
[data-theme="dark"] .spending-breakdown-table thead th {
    color: var(--text-secondary);
}

[data-theme="dark"] .spending-breakdown-table tfoot td {
    border-color: rgba(var(--accent-rgb), 0.45);
}

[data-theme="dark"] .spending-cat-bar-wrap {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .spending-cat-bar {
    background: var(--accent);
    opacity: 0.85;
}

/* --- Spending ledger inputs --- */
[data-theme="dark"] .spending-ledger-table tbody td input,
[data-theme="dark"] .spending-ledger-table tbody td select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* --- Add-Item Modal --- */
[data-theme="dark"] .add-item-modal-content {
    background: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .add-item-field label {
    color: var(--text-muted);
}

[data-theme="dark"] .add-item-field .modal-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .add-item-field .modal-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .add-item-field select.modal-input option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* --- Workspace tables (College App + Life + Academic) dark rows --- */
[data-theme="dark"] .academic-module-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}

/* --- Spending breakdown card dark --- */
[data-theme="dark"] .spending-breakdown-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.06);
}

/* =====================================================================
   Additional mobile optimizations for dashboard components
   ===================================================================== */

/* Tablet breakpoint for nav grids */
@media (max-width: 768px) {
    .collegeapp-nav-grid,
    .life-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .collegeapp-nav-btn,
    .life-nav-btn {
        padding: 24px 14px;
        font-size: 0.88rem;
    }

    #view-collegeapp,
    #view-life {
        padding: 16px 14px 30px;
    }

    .sat-exam-control-grid,
    .sat-exam-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spending-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small phone breakpoint enhancements */
@media (max-width: 480px) {
    .collegeapp-nav-grid,
    .life-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .collegeapp-nav-btn,
    .life-nav-btn {
        padding: 18px 10px;
        font-size: 0.82rem;
        border-radius: 14px;
    }

    .collegeapp-nav-btn i,
    .life-nav-btn i {
        font-size: 1.25rem;
    }

    .collegeapp-back-btn,
    .life-back-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .spending-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .spending-stat-card {
        padding: 10px 12px;
    }

    .spending-stat-value {
        font-size: 1.15rem;
    }

    .spending-stat-label {
        font-size: 0.62rem;
    }

    /* Spending tables horizontal scroll on small screens */
    .spending-breakdown-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .spending-breakdown-table,
    .spending-ledger-table {
        min-width: 420px;
    }

    .add-item-modal-content {
        max-width: calc(100vw - 16px);
        margin: 8px;
    }

    .add-item-row {
        grid-template-columns: 1fr;
    }

    #view-collegeapp .view-header h2,
    #view-life .view-header h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .collegeapp-summary-grid,
    .life-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .sat-exam-countdown-card {
        padding: 12px;
    }

    .sat-exam-control-grid,
    .sat-exam-live-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sat-exam-countdown-meta {
        font-size: 0.78rem;
    }

    #view-collegeapp .summary-card,
    #view-life .summary-card {
        min-height: 100px;
        padding: 12px 14px;
    }

    #view-collegeapp .summary-value,
    #view-life .summary-value {
        font-size: 1.45rem;
    }
}

/* ------------------------------------------------------------------
   Improved Sidebar Scrollbar
------------------------------------------------------------------- */
.pages-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}
.pages-list:hover {
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.pages-list::-webkit-scrollbar {
    width: 6px;
}
.pages-list::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.pages-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background 0.3s ease;
}
.pages-list:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}
.pages-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ------------------------------------------------------------------
   Page Link Picker Modal
------------------------------------------------------------------- */
.page-link-modal-content {
    max-width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.page-link-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.page-link-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.page-link-search {
    padding-left: 38px !important;
}

.page-link-list {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.page-link-list::-webkit-scrollbar {
    width: 5px;
}
.page-link-list::-webkit-scrollbar-track {
    background: transparent;
}
.page-link-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}

.page-link-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
}

.page-link-option:hover {
    background: var(--bg-hover);
    border-color: var(--glass-border);
    transform: translateX(2px);
}

.page-link-option:active {
    transform: scale(0.985);
}

.page-link-option-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-soft);
}

.page-link-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page-link-option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-link-option-path {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-link-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Page link chip in editor -- improved look */
.editor .page-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-modify: read-only;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    vertical-align: baseline;
}

.editor .page-link:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

/* Help page in-editor anchor buttons */
.editor .help-anchor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 0.95em;
    line-height: 1.25;
    color: var(--text-primary);
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.editor .help-anchor-btn:hover {
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    color: var(--accent);
    transform: translateY(-1px);
}

.editor .help-anchor-btn:active {
    transform: translateY(0);
}

.editor .help-anchor-top-btn {
    font-size: 13px;
    padding: 5px 10px;
}

/* ------------------------------------------------------------------
   Active Sidebar Page Highlight (accent-driven)
------------------------------------------------------------------- */
.pages-list .page-item.active,
.pages-list .page-item.active:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 600;
    position: relative;
}

.pages-list .page-item.active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 3px;
    background: var(--accent);
}

.pages-list .page-item.active .page-title-text,
.pages-list .page-item.active .page-icon,
.pages-list .page-item.active > i {
    color: var(--accent) !important;
}

/* ------------------------------------------------------------------
   Dark Theme Sidebar: single continuous surface
------------------------------------------------------------------- */
body[data-theme-key="dark"] .sidebar {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
}

body[data-theme-key="dark"] .sidebar::before {
    background: transparent !important;
}

body[data-theme-key="dark"] .sidebar-header,
body[data-theme-key="dark"] .sidebar-search,
body[data-theme-key="dark"] .sidebar-shortcuts,
body[data-theme-key="dark"] .pages-list,
body[data-theme-key="dark"] .sidebar-new-page,
body[data-theme-key="dark"] .focus-timer,
body[data-theme-key="dark"] .page-item,
body[data-theme-key="dark"] .sidebar .new-page-btn,
body[data-theme-key="dark"] .sidebar-shortcut-btn,
body[data-theme-key="dark"] .sidebar-shortcut-add,
body[data-theme-key="dark"] .search-input {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body[data-theme-key="dark"] .sidebar-header,
body[data-theme-key="dark"] .sidebar-search {
    border-bottom-color: transparent !important;
}

body[data-theme-key="dark"] .focus-timer:hover {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
    border-color: transparent !important;
}

body[data-theme-key="dark"] .sidebar .focus-timer.neumo-card,
body[data-theme-key="dark"] .sidebar .focus-timer.neumo-card:hover {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body[data-theme-key="dark"] .page-item:hover,
body[data-theme-key="dark"] .page-item.active,
body[data-theme-key="dark"] .page-item.active:hover,
body[data-theme-key="dark"] .sidebar-shortcut-btn:hover,
body[data-theme-key="dark"] .sidebar .new-page-btn:hover {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
    border-color: transparent !important;
}

body[data-theme-key="dark"] .pages-list .page-item.active,
body[data-theme-key="dark"] .pages-list .page-item.active:hover {
    background: var(--sidebar-bg, rgba(19, 22, 27, 0.96)) !important;
    border-color: transparent !important;
    color: var(--text-primary) !important;
}

body[data-theme-key="dark"] .pages-list .page-item.active .page-title-text,
body[data-theme-key="dark"] .pages-list .page-item.active .page-icon,
body[data-theme-key="dark"] .pages-list .page-item.active > i {
    color: var(--text-primary) !important;
}

/* ------------------------------------------------------------------
   Global Scroll Stability (anchor cards/chips, remove lift jitter)
------------------------------------------------------------------- */
:where(
    [class*="card"],
    .glass-panel,
    .today-panel,
    .page-item,
    .neumo-chip,
    .editor pre,
    .editor code
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

:where(
    [class*="card"],
    .glass-panel,
    .today-panel,
    .page-item,
    .neumo-chip,
    .page-link-option,
    .collegeapp-nav-btn,
    .life-nav-btn
):hover,
:where(
    [class*="card"],
    .glass-panel,
    .today-panel,
    .page-item,
    .neumo-chip,
    .page-link-option,
    .collegeapp-nav-btn,
    .life-nav-btn
):active {
    transform: none !important;
}

.page-item,
.page-item:hover,
.page-item.active {
    margin: 0 8px !important;
}

.page-item {
    border: 1px solid transparent;
}

/* 2026 UI refresh: simplified nav, utility dock, and focus mode */
.top-nav,
.tabs-shell,
.view-tabs {
    overflow: visible !important;
}

.view-tabs {
    position: relative;
    z-index: 2400;
}

.view-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.view-more[hidden] {
    display: none !important;
}

.view-more-toggle {
    border: none;
    background: transparent;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.view-more-toggle .view-more-current {
    display: none;
}

.view-more-toggle i {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.view-more.open .view-more-toggle i {
    transform: rotate(180deg);
}

.view-more.open .view-more-toggle,
.view-more.has-active-secondary .view-more-toggle {
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 4px 10px rgba(20,16,12,0.1);
}

.view-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--surface-border);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    z-index: 6200;
}

.view-more.open .view-more-menu {
    display: flex;
}

.view-more-item {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

#topAddTaskBtn {
    background: var(--accent) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.24) !important;
}

#view-today.dashboard-today .today-grid {
    grid-template-areas:
        "due due habits"
        "commit completed habits";
}

#view-today.dashboard-today .today-panel-due {
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    box-shadow: 0 14px 26px rgba(var(--accent-rgb), 0.12);
}

.view-tab:focus-visible,
.view-more-toggle:focus-visible,
.theme-switcher-btn:focus-visible,
.storage-btn:focus-visible,
.neumo-btn:focus-visible,
.chatbot-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.5) !important;
    outline-offset: 2px;
}

.theme-switcher-btn {
    position: fixed !important;
    top: calc(var(--safe-top) + 12px) !important;
    right: calc(var(--safe-right) + 12px) !important;
    left: auto !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 4200 !important;
}

.storage-options {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: auto !important;
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
    width: max-content !important;
    max-width: 52px !important;
    min-height: 46px !important;
    padding: 6px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    z-index: 2420 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 72%, transparent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-bg-elevated) 92%, transparent),
        color-mix(in srgb, var(--surface-bg) 84%, transparent)
    ) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
    transition: max-width 0.24s ease, border-radius 0.24s ease, padding 0.24s ease, box-shadow 0.24s ease !important;
}

.storage-options .storage-collapsed-icon {
    width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(35, 49, 79, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 2px 6px rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.2s ease, width 0.2s ease !important;
}

.storage-options .storage-collapsed-icon > i {
    font-size: 14px;
    line-height: 1;
    color: currentColor;
}

.storage-options > :not(.storage-collapsed-icon) {
    opacity: 0 !important;
    transform: translateX(10px) !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.16s ease, transform 0.2s ease, max-width 0.22s ease !important;
}

.storage-options:hover {
    max-width: min(760px, calc(100vw - 40px)) !important;
    border-radius: 999px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    cursor: default !important;
}

.storage-options:hover .storage-collapsed-icon {
    opacity: 0 !important;
    transform: translateX(-8px) scale(0.94) !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.storage-options:hover > :not(.storage-collapsed-icon) {
    opacity: 1 !important;
    transform: translateX(0) !important;
    max-width: 340px !important;
    pointer-events: auto !important;
}

.storage-options .btn-text { display: inline !important; white-space: nowrap !important; }
.storage-options .taskbar-save-status span { display: inline !important; white-space: nowrap !important; }
.storage-options .taskbar-divider { display: block !important; }

.storage-options .storage-btn,
.storage-options .taskbar-save-status {
    min-height: 34px !important;
    padding: 6px 9px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.storage-options:not(:hover) > :not(.storage-collapsed-icon) {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.main-content { padding-bottom: 0 !important; }

.chatbot-btn {
    right: 20px !important;
    bottom: 92px !important;
    z-index: 2460 !important;
}

.chatbot-panel {
    right: 20px !important;
    bottom: 164px !important;
}

body.focus-mode .integrations-dock,
body.focus-mode .today-stats-strip,
body.focus-mode .today-panel-habits,
body.focus-mode .chatbot-btn,
body.focus-mode .chatbot-panel,
body.focus-mode .chatbot-info,
body.focus-mode .storage-options,
body.focus-mode .theme-switcher-btn,
body.focus-mode .top-nav,
body.focus-mode .sidebar-overlay,
body.focus-mode #sidebarToggle,
body.focus-mode .tabs-shell .view-tabs,
body.focus-mode .tabs-shell .view-tabs-toggle,
body.focus-mode #splitNotesToggleBtn,
body.focus-mode #notesSecondaryPane {
    display: none !important;
}

body.focus-mode {
    --top-nav-height: 0px;
    --top-nav-height-mobile: 0px;
}

body.focus-mode .view {
    padding-top: 12px !important;
}

body.focus-mode #view-notes .editor-container {
    padding-top: 96px !important;
    padding-bottom: 24px !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

body.focus-mode .main-content {
    margin-left: var(--sidebar-collapsed-width) !important;
    width: calc(100% - var(--sidebar-collapsed-width)) !important;
}

@media (max-width: 1024px) {
    body.focus-mode .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.view { padding-bottom: 8px !important; }
#view-notes .editor-container { padding-bottom: 8px !important; }

@media (max-width: 1024px) {
    .view-more {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .view-more-toggle {
        width: 100%;
        justify-content: space-between;
        border-radius: 10px;
    }

    .view-more-menu {
        position: static;
        min-width: 0;
        margin-top: 6px;
        box-shadow: none;
    }

    .storage-options {
        top: auto !important;
        right: 10px !important;
        left: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 6px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px !important;
        cursor: default !important;
    }

    .storage-options .storage-collapsed-icon {
        display: inline-flex !important;
    }

    .storage-options > * {
        opacity: 1 !important;
        transform: none !important;
        max-width: none !important;
        pointer-events: auto !important;
    }

    .theme-switcher-btn {
        inset: calc(var(--safe-top) + 4px) calc(var(--safe-right) + 4px) auto auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .focus-mode-quick-toggle {
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 220px) !important;
    }

    body.focus-mode .focus-mode-quick-toggle {
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    }

    .chatbot-btn {
        right: 12px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
    }

    .chatbot-panel {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 146px) !important;
    }

    .integrations-dock {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .integrations-label {
        display: none;
    }

    .quick-app-btn,
    .custom-shortcut-btn {
        padding: 7px 10px !important;
    }

    .quick-app-btn span,
    .custom-shortcut-btn span.shortcut-label {
        display: none;
    }

    .shortcut-settings-url {
        max-width: 180px;
    }

    body.notes-split-active #view-notes .editor-container {
        grid-template-columns: 1fr !important;
    }

    body.notes-split-active .notes-pane-secondary {
        min-height: 380px;
    }

    .split-pane-header {
        flex-direction: column;
        align-items: stretch;
    }

    .split-pane-actions {
        width: 100%;
    }

    .split-pane-actions .split-pane-action {
        flex: 1;
        justify-content: center;
    }

    .shortcut-modal-grid {
        grid-template-columns: 1fr;
    }

    .view { padding-bottom: 8px !important; }
    #view-notes .editor-container { padding-bottom: 8px !important; }
}

/* ------------------------------------------------------------------
   Theme Contrast Fix (Today Dashboard / All Themes)
------------------------------------------------------------------- */
#view-today.dashboard-today .today-dashboard-surface {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 72%, transparent);
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb), 0.16), transparent 40%),
        radial-gradient(circle at 92% 100%, rgba(var(--accent-rgb), 0.10), transparent 34%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-elevated) 86%, var(--surface-bg-elevated)),
            color-mix(in srgb, var(--bg-secondary) 78%, var(--surface-bg))
        );
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}

#view-today.dashboard-today .summary-card,
#view-today.dashboard-today .today-panel,
#view-today.dashboard-today .today-workflow-hub,
#view-today.dashboard-today .today-student-hub {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 74%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 92%, var(--surface-bg-elevated)),
        color-mix(in srgb, var(--surface-bg-elevated) 64%, var(--surface-bg) 36%)
    );
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

#view-today.dashboard-today .workflow-metric,
#view-today.dashboard-today .today-plan-output,
#view-today.dashboard-today .workflow-control-toggle,
#view-today.dashboard-today .today-plan-item,
#view-today.dashboard-today .habit-add-row,
#view-today.dashboard-today .today-panel .empty-state,
#view-today.dashboard-today #categoryDonut,
#view-today.dashboard-today .card-categories .legend-item,
#view-today.dashboard-today .student-hub-metric {
    border-color: color-mix(in srgb, var(--surface-border-strong) 76%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 82%, var(--surface-bg-active) 18%);
}

#view-today.dashboard-today .panel-header h3,
#view-today.dashboard-today .today-plan-header h4,
#view-today.dashboard-today .today-plan-item-title,
#view-today.dashboard-today .legend-label,
#view-today.dashboard-today .student-hub-metric-value,
#view-today.dashboard-today .student-hub-metric-label,
#view-today.dashboard-today .student-hub-metric-note {
    color: var(--text-primary);
}

#view-today.dashboard-today .today-plan-item-meta,
#view-today.dashboard-today .today-plan-item-reason,
#view-today.dashboard-today .workflow-metric-label,
#view-today.dashboard-today .workflow-control span,
#view-today.dashboard-today .today-stat-label {
    color: var(--text-secondary);
}

#view-today.dashboard-today .habit-add-row .neumo-input {
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--surface-bg));
    border-color: color-mix(in srgb, var(--surface-border-strong) 70%, transparent);
    color: var(--text-primary);
}

#view-today.dashboard-today .habit-add-row .neumo-input::placeholder {
    color: var(--text-secondary);
}

#view-today.dashboard-today .today-panel .task-card {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}



/* Font Awesome offline fallback */
body.icon-fallback-active i[class*="fa-"] {
    font-family: var(--font-body) !important;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
}

body.icon-fallback-active .toolbar-btn i[class*="fa-"] {
    font-size: 0.95rem;
    min-width: 1.1em;
}

body.icon-fallback-active .icon-btn i[class*="fa-"] {
    font-size: 0.95rem;
    min-width: 1.1em;
}

body.icon-fallback-active .quick-app-btn i[class*="fa-"] {
    font-size: 0.95rem;
    min-width: 1.1em;
}

/* ------------------------------------------------------------------
   2026 Refinement Pass
------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width) !important;
        min-width: var(--sidebar-collapsed-width) !important;
        border-right: 1px solid var(--glass-border) !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar.collapsed > * {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 14px 8px;
}

.sidebar.collapsed .sidebar-header .app-title span,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .sidebar-shortcuts,
.sidebar.collapsed .sidebar-tags-filter,
.sidebar.collapsed .focus-timer {
    display: none !important;
}

.sidebar.collapsed .sidebar-new-page {
    padding: 10px 0 12px;
    border-top: 1px solid var(--surface-border);
    display: flex;
    justify-content: center;
}

.sidebar.collapsed .sidebar-new-page .new-page-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    gap: 0;
    justify-content: center;
}

.sidebar.collapsed .sidebar-new-page .btn-text {
    display: none !important;
}

.sidebar.collapsed .sidebar-new-page .new-page-btn i {
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

.sidebar.collapsed .pages-list {
    padding: 8px 6px;
}

.sidebar.collapsed .page-item {
    justify-content: center;
    gap: 0;
    padding: 10px 0 !important;
    border-radius: 12px;
}

.sidebar.collapsed .page-title-text,
.sidebar.collapsed .page-item-icons,
.sidebar.collapsed .page-star-indicator,
.sidebar.collapsed .page-theme-indicator,
.sidebar.collapsed .page-item > .fa-chevron-right,
.sidebar.collapsed .page-item > .fa-chevron-down {
    display: none !important;
}

.sidebar.collapsed .page-icon {
    margin: 0;
    font-size: 17px;
}

.tabs-shell .tab-clock-embed {
    min-height: 40px;
    padding: 4px 9px 4px 11px;
    border-radius: 999px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated) 92%, var(--surface-bg-elevated)), color-mix(in srgb, var(--bg-secondary) 76%, var(--surface-bg)));
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent), 0 10px 22px rgba(22, 30, 45, 0.12);
}

.tabs-shell .tab-clock-main {
    gap: 7px;
}

.tabs-shell .tab-clock-icon {
    font-size: 12px;
    color: color-mix(in srgb, var(--accent) 82%, var(--text-secondary));
}

.tabs-shell .toolbar-time-widget {
    min-width: 92px;
    font-family: "Sora", "Manrope", "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

.tabs-shell .tab-clock-gear {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-bg) 70%, var(--bg-elevated));
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 5px 12px rgba(22, 30, 45, 0.16);
}

.tabs-shell .tab-clock-gear:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-bg-active) 78%, var(--bg-elevated));
}

.hw-assignment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}

.hw-assignment {
    display: grid;
    gap: 9px;
    border: 1px solid var(--surface-border-strong);
    border-radius: 12px;
    padding: 10px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 90%, var(--surface-bg-elevated)), color-mix(in srgb, var(--surface-bg-elevated) 72%, var(--surface-bg)));
}

.hw-assignment.is-done {
    opacity: 0.82;
}

.hw-assignment.is-done .hw-assignment-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.hw-assignment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.hw-assignment-title-wrap {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hw-assignment-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

.hw-assignment .hw-task-badge {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--surface-border));
    color: color-mix(in srgb, var(--accent) 84%, var(--text-primary));
}

.hw-assignment-menu-wrap {
    position: relative;
}

.hw-task-menu-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-bg) 78%, var(--bg-elevated));
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.hw-task-menu-btn:hover,
.hw-task-menu-btn[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--surface-border-strong);
    background: color-mix(in srgb, var(--surface-bg-hover) 84%, var(--bg-elevated));
}

.hw-task-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 188px;
    display: grid;
    gap: 3px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--surface-border-strong);
    background: color-mix(in srgb, var(--bg-elevated) 95%, var(--surface-bg));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    z-index: 80;
}

.hw-task-menu[hidden] {
    display: none !important;
}

.hw-task-menu button {
    text-align: left;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.hw-task-menu button:hover {
    background: var(--surface-bg-hover);
    border-color: var(--surface-border);
}

.hw-task-menu button.danger {
    color: #b43b3b;
}

.hw-assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hw-global-add-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.hw-global-add-title {
    margin: 0;
    font-size: 0.94rem;
    letter-spacing: 0.02em;
}

.hw-global-add-trigger {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--surface-border-strong);
    background: color-mix(in srgb, var(--surface-bg) 85%, var(--bg-elevated));
    color: var(--text-primary);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hw-global-add-trigger:hover {
    background: var(--surface-bg-hover);
}

.hw-global-add-modal {
    position: fixed;
    inset: 0;
    z-index: 6200;
    display: grid;
    place-items: center;
    background: rgba(8, 10, 14, 0.78);
    padding: 14px;
}

.hw-global-add-modal[hidden] {
    display: none !important;
}

.hw-course-quick-modal {
    position: fixed;
    inset: 0;
    z-index: 6300;
    display: grid;
    place-items: center;
    background: rgba(8, 10, 14, 0.78);
    padding: 14px;
}

.hw-course-quick-modal[hidden] {
    display: none !important;
}

.hw-course-quick-card {
    width: min(420px, calc(100vw - 24px));
    border-radius: 14px;
    border: 1px solid var(--surface-border-strong);
    background: var(--bg-primary);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.hw-course-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hw-course-quick-title {
    margin: 0;
    font-size: 1rem;
}

.hw-course-quick-close {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.hw-course-quick-copy {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.hw-course-quick-card input[data-course-quick-input] {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 0.9rem;
}

.hw-global-add-card {
    width: min(720px, calc(100vw - 24px));
    border-radius: 16px;
    border: 1px solid var(--surface-border-strong);
    background: var(--bg-primary);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.hw-global-add-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hw-global-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.hw-global-close:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 84%, var(--bg-primary));
}

.hw-global-add-form {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.hw-global-add-form input,
.hw-global-add-form select,
.hw-global-add-form button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.86rem;
}

.hw-global-add-form input::placeholder {
    color: var(--text-secondary);
}

.hw-global-add-form button[type="submit"] {
    background: var(--button-bg, var(--bg-secondary));
    color: var(--button-text, var(--text-primary));
    border-color: var(--button-border, var(--surface-border-strong));
}

.hw-global-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hw-global-course-col {
    display: grid;
    gap: 6px;
}

.hw-global-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hw-global-course-col label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}

.hw-global-course-col select {
    width: 100%;
    min-height: 40px;
}

.hw-global-mini-add {
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
}

.hw-global-mini-add:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 84%, var(--bg-primary));
}

.hw-global-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) auto;
    gap: 10px;
}

.hw-lane-table-wrap {
    overflow-x: auto;
}

.hw-lane-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.hw-lane-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px 10px;
    border-bottom: 1px solid var(--surface-border);
}

.hw-lane-row td {
    vertical-align: top;
    padding: 10px;
    border-bottom: 1px solid var(--surface-border);
}

.hw-lane-row:last-child td {
    border-bottom: 0;
}

.hw-lane-course-cell {
    width: 220px;
    min-width: 220px;
}

.hw-lane-assignments-cell .hw-assignment-list {
    gap: 8px;
}

.hw-meta-chip,
.hw-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-bg) 82%, var(--bg-elevated));
    color: var(--text-secondary);
}

.hw-status-chip {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hw-status-chip.is-overdue {
    color: #b43b3b;
    border-color: rgba(180, 59, 59, 0.35);
    background: rgba(180, 59, 59, 0.1);
}

.hw-status-chip.is-soon {
    color: #ad6d22;
    border-color: rgba(173, 109, 34, 0.34);
    background: rgba(173, 109, 34, 0.1);
}

.hw-status-chip.is-upcoming,
.hw-status-chip.is-open {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-border));
}

.hw-status-chip.is-done {
    color: #1f7a4a;
    border-color: rgba(31, 122, 74, 0.32);
    background: rgba(31, 122, 74, 0.1);
}

body[data-theme-key="dune"] .sidebar .app-title span,
body[data-theme-key="dune"] .theme-panel-title,
body[data-theme-key="dune"] .hw-header-bar h2,
body[data-theme-key="dune"] .hw-lane-title,
body[data-theme-key="dune"] .preset-card[data-theme="dune"] .preset-name {
    font-family: "Dune Rise", "Cinzel", "Playfair Display", serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-theme-key="dune"] .sidebar,
body[data-theme-key="dune"] .top-nav,
body[data-theme-key="dune"] .toolbar-wrapper,
body[data-theme-key="dune"] .theme-panel,
body[data-theme-key="dune"] .modal-content,
body[data-theme-key="dune"] .storage-options {
    border-color: rgba(238, 206, 149, 0.22) !important;
}

        body[data-theme-key="dune"] .hw-assignment,
        body[data-theme-key="dune"] .hw-course-panel,
        body[data-theme-key="dune"] .hw-lane,
        body[data-theme-key="dune"] .hw-stat-card {
            background: linear-gradient(160deg, rgba(47, 32, 23, 0.92), rgba(31, 21, 15, 0.9));
            box-shadow: 0 14px 26px rgba(0, 0, 0, 0.33);
        }

body[data-theme-key="chromeos"] .sidebar,
body[data-theme-key="chromeos"] .theme-panel,
body[data-theme-key="chromeos"] .modal-content,
body[data-theme-key="chromeos"] .storage-options {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 252, 0.97));
    border-color: rgba(88, 108, 136, 0.14) !important;
    box-shadow: 0 12px 28px rgba(31, 47, 70, 0.08);
}

body[data-theme-key="chromeos"] .sidebar {
    background: linear-gradient(180deg, rgba(253, 242, 195, 0.98), rgba(248, 232, 170, 0.99));
    border-color: rgba(201, 163, 57, 0.24) !important;
    box-shadow: 0 12px 28px rgba(161, 128, 43, 0.10);
}

body[data-theme-key="chromeos"] .sidebar,
body[data-theme-key="chromeos"] .sidebar::before {
    background: linear-gradient(180deg, rgba(253, 242, 195, 0.98), rgba(248, 232, 170, 0.99)) !important;
}

body[data-theme-key="chromeos"] .top-nav {
    background: linear-gradient(180deg, rgba(252, 232, 230, 0.97), rgba(247, 218, 214, 0.99));
    border-color: rgba(234, 67, 53, 0.22) !important;
    box-shadow: 0 10px 24px rgba(234, 67, 53, 0.10);
}

body[data-theme-key="chromeos"] .view-tabs {
    background: linear-gradient(180deg, rgba(230, 244, 234, 0.96), rgba(220, 241, 226, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.22) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .view-tab {
    color: #356145;
}

body[data-theme-key="chromeos"] .view-tab:hover:not(.active) {
    background: rgba(52, 168, 83, 0.10) !important;
    color: #21422f !important;
}

body[data-theme-key="chromeos"] .view-tab.active {
    position: relative;
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(52, 168, 83, 0.26) !important;
    color: #1f3528 !important;
    box-shadow: 0 8px 16px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .view-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: rgba(52, 168, 83, 0.78);
}

body[data-theme-key="chromeos"] .toolbar-wrapper,
body[data-theme-key="chromeos"] .global-search,
body[data-theme-key="chromeos"] .word-count-display {
    background: linear-gradient(180deg, rgba(230, 244, 234, 0.96), rgba(220, 241, 226, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.20) !important;
    box-shadow: 0 10px 22px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .tabs-shell .tab-clock-embed,
body[data-theme-key="chromeos"] .integrations-dock,
body[data-theme-key="chromeos"] .quick-app-btn,
body[data-theme-key="chromeos"] .custom-shortcut-btn {
    background: linear-gradient(180deg, rgba(230, 244, 234, 0.96), rgba(220, 241, 226, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.20) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .command-palette-trigger,
body[data-theme-key="chromeos"] .command-palette-kbd {
    background: linear-gradient(180deg, rgba(230, 244, 234, 0.96), rgba(220, 241, 226, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.22) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .global-search,
body[data-theme-key="chromeos"] .word-count-display,
body[data-theme-key="chromeos"] .command-palette-trigger,
body[data-theme-key="chromeos"] .command-palette-kbd,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-embed,
body[data-theme-key="chromeos"] .quick-app-btn,
body[data-theme-key="chromeos"] .custom-shortcut-btn,
body[data-theme-key="chromeos"] .integrations-dock {
    color: var(--text-primary) !important;
}

body[data-theme-key="chromeos"] .global-search::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
}

body[data-theme-key="chromeos"] .toolbar-btn,
body[data-theme-key="chromeos"] .view-tab {
    color: var(--text-secondary);
}

body[data-theme-key="chromeos"] .toolbar-btn:hover,
body[data-theme-key="chromeos"] .quick-app-btn:hover,
body[data-theme-key="chromeos"] .custom-shortcut-btn:hover,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-embed:hover,
body[data-theme-key="chromeos"] .command-palette-trigger:hover {
    background: rgba(52, 168, 83, 0.10) !important;
    color: var(--text-primary) !important;
}

body[data-theme-key="chromeos"] .toolbar-btn.active,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-gear,
body[data-theme-key="chromeos"] .storage-btn.primary,
body[data-theme-key="chromeos"] .theme-switcher-btn {
    background: linear-gradient(180deg, rgba(214, 238, 220, 0.98), rgba(196, 231, 205, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.26) !important;
    color: #21422f !important;
    box-shadow: 0 10px 22px rgba(52, 168, 83, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body[data-theme-key="chromeos"] .view-tab.active:hover,
body[data-theme-key="chromeos"] .toolbar-btn.active:hover,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-gear:hover,
body[data-theme-key="chromeos"] .storage-btn.primary:hover,
body[data-theme-key="chromeos"] .theme-switcher-btn:hover {
    background: linear-gradient(180deg, rgba(223, 242, 228, 1), rgba(205, 235, 213, 1)) !important;
    color: #1f3528 !important;
}

body[data-theme-key="chromeos"] .sidebar .new-page-btn,
body[data-theme-key="chromeos"] .todo-add-btn,
body[data-theme-key="chromeos"] .btn-primary {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #4c8bf5, #3f7ae0) !important;
    border-color: rgba(55, 106, 201, 0.44) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(66, 133, 244, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body[data-theme-key="chromeos"] .sidebar .new-page-btn:hover,
body[data-theme-key="chromeos"] .todo-add-btn:hover,
body[data-theme-key="chromeos"] .btn-primary:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #5a95f6, #4782e6) !important;
}

body[data-theme-key="chromeos"] .page-item.active,
body[data-theme-key="chromeos"] .pages-list .page-item.active:hover {
    background:
        linear-gradient(90deg, rgba(66, 133, 244, 0.12) 0 2px, transparent 2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 243, 255, 0.96));
    border-color: rgba(66, 133, 244, 0.22) !important;
    box-shadow: 0 8px 18px rgba(66, 133, 244, 0.12);
}

@media (max-width: 1024px) {
    .sidebar-toggle-btn.collapsed {
        left: 10px;
    }

    #exportOptionsModal .modal-content {
        width: calc(100vw - 18px) !important;
        max-width: none !important;
    }

    #exportOptionsModal .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #exportOptionsModal .modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .tabs-shell .tab-clock-embed {
        min-height: 36px;
        padding: 3px 8px 3px 10px;
    }

    .tabs-shell .toolbar-time-widget {
        min-width: 80px;
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .hw-assignment-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .hw-status-chip {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .hw-global-course-grid {
        grid-template-columns: 1fr;
    }

    .hw-global-meta-row {
        grid-template-columns: 1fr 1fr;
    }

    .hw-global-meta-row button[type="submit"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .hw-assignment-meta {
        grid-template-columns: 1fr;
    }

    .hw-global-add-card {
        width: calc(100vw - 14px);
        padding: 12px;
    }

    .hw-global-meta-row {
        grid-template-columns: 1fr;
    }

    .hw-task-menu {
        right: 0;
        min-width: 174px;
    }

    .hw-inline-add input,
    .hw-inline-add select,
    .hw-inline-add button,
    .hw-btn {
        min-height: 42px;
    }
}

/* ---------------- Business workspace ---------------- */
.business-header-copy {
    margin: 10px 0 0;
    max-width: 720px;
    color: var(--text-secondary);
}

.business-dashboard-root {
    min-width: 0;
}

.business-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.92fr);
    gap: 16px;
    align-items: start;
}

.business-main-column,
.business-side-column,
.business-list,
.business-goal-grid,
.business-analytics-grid {
    display: grid;
    gap: 14px;
}

.business-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), transparent 28%),
        linear-gradient(180deg, var(--surface-bg-elevated), rgba(var(--accent-rgb), 0.015));
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-soft);
}

.business-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 44%);
    opacity: 0.55;
}

.business-card > * {
    position: relative;
    z-index: 1;
}

.business-card-head,
.business-section-head,
.business-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.business-card-head h3,
.business-section-head h3,
.business-hero-head h3 {
    margin: 0;
    font-size: 1.02rem;
}

.business-card-head p,
.business-section-head p,
.business-hero-head p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.business-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.business-global-controls {
    justify-content: flex-end;
}

.business-search-input {
    min-width: min(320px, 46vw);
}

.business-density-toggle.active {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: rgba(var(--accent-rgb), 0.12);
}

.business-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.business-metric {
    display: grid;
    gap: 6px;
    min-height: 108px;
    padding: 12px;
    border-radius: 15px;
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), var(--surface-bg));
}

.business-metric strong {
    font-size: 1.18rem;
    line-height: 1.1;
    color: var(--text-primary);
}

.business-metric-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.business-metric-meta,
.business-metric-context,
.business-muted-copy {
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.business-metric-context {
    color: var(--text-muted);
}

.business-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.business-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}

.business-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-chart-card {
    min-height: 230px;
}

.business-chart {
    min-height: 160px;
}

.business-bar-chart {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.business-bar-group {
    display: grid;
    justify-items: center;
    gap: 8px;
    flex: 1 1 0;
}

.business-bar-pair {
    display: flex;
    align-items: end;
    gap: 6px;
    width: 100%;
    min-height: 120px;
}

.business-bar {
    flex: 1 1 0;
    border-radius: 12px 12px 5px 5px;
    background: rgba(var(--accent-rgb), 0.26);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.business-bar.income {
    background: rgba(54, 163, 106, 0.34);
    border-color: rgba(54, 163, 106, 0.28);
}

.business-bar.expense {
    background: rgba(201, 105, 76, 0.28);
    border-color: rgba(201, 105, 76, 0.24);
}

.business-bar-label {
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.business-stacked-list,
.business-distribution-list {
    display: grid;
    gap: 12px;
}

.business-stacked-row,
.business-distribution-row,
.business-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.business-distribution-row {
    grid-template-columns: 110px minmax(0, 1fr) auto;
}

.business-distribution-bar {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: var(--surface-bg);
    overflow: hidden;
}

.business-distribution-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: rgba(var(--accent-rgb), 0.42);
}

.business-distribution-bar.accent span {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.62), rgba(var(--accent-rgb), 0.28));
}

.business-section-toolbar,
.business-inline-summary,
.business-template-row,
.business-draft-meta,
.business-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-section-toolbar {
    margin-bottom: 14px;
}

.business-inline-summary {
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.business-inline-summary span,
.business-focus-list span {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
}

.business-inline-select {
    min-width: 118px;
    margin: 0;
}

.business-group {
    display: grid;
    gap: 10px;
}

.business-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.business-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(180px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.business-board-column {
    min-width: 180px;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), var(--surface-bg));
}

.business-board-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
}

.business-item-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, var(--surface-bg-elevated), var(--surface-bg));
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.business-item-card:hover {
    transform: translateY(-1px);
    border-color: var(--surface-border-strong);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.09), var(--surface-bg));
}

.business-item-card.compact {
    padding: 10px;
}

.business-item-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.business-item-top strong {
    display: block;
    font-size: 0.98rem;
}

.business-item-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.business-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.business-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-mini-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
}

.business-mini-btn.danger {
    border-color: rgba(201, 105, 76, 0.35);
}

.business-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 999px;
    padding: 4px 9px;
    border: 1px solid var(--surface-border);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text-primary);
}

.business-chip.tone-success { background: rgba(54, 163, 106, 0.16); border-color: rgba(54, 163, 106, 0.24); }
.business-chip.tone-warning { background: rgba(214, 144, 48, 0.16); border-color: rgba(214, 144, 48, 0.24); }
.business-chip.tone-danger { background: rgba(201, 105, 76, 0.16); border-color: rgba(201, 105, 76, 0.24); }
.business-chip.tone-neutral { background: var(--surface-bg); }
.business-chip.tone-accent { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.28); }

.business-notes-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 14px;
}

.business-quick-draft,
.business-notes-list {
    display: grid;
    gap: 12px;
}

.business-notes-input {
    width: 100%;
    min-height: 240px;
}

.business-draft-meta {
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.business-goal-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.business-progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-bg);
    overflow: hidden;
}

.business-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.72), rgba(var(--accent-rgb), 0.28));
}

.business-side-column {
    position: sticky;
    top: calc(var(--top-nav-height, 74px) + 12px);
}

.business-detail-card,
.business-side-card {
    margin-bottom: 14px;
}

.business-detail-empty {
    display: grid;
    gap: 10px;
}

.business-detail-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.business-detail-tab {
    border: 1px solid var(--surface-border);
    background: var(--surface-bg);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
}

.business-detail-tab.active {
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.28);
}

.business-detail-grid {
    display: grid;
    gap: 12px;
}

.business-detail-row span {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.business-detail-note {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--surface-border);
    background: var(--surface-bg);
    color: var(--text-secondary);
    white-space: pre-wrap;
    line-height: 1.55;
}

.business-empty-state {
    display: grid;
    gap: 10px;
}

.business-empty-action {
    justify-self: start;
}

.business-modal-close {
    min-width: 42px;
    min-height: 42px;
    font-size: 1.25rem;
    line-height: 1;
}

.business-entity-modal {
    max-width: min(980px, calc(100vw - 32px));
}

.business-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.business-form-field {
    display: grid;
    gap: 8px;
}

.business-form-field span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.business-form-field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .business-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .business-notes-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .business-dashboard-grid,
    .business-overview-grid,
    .business-analytics-grid {
        grid-template-columns: 1fr;
    }

    .business-side-column {
        position: static;
        top: auto;
    }
}

@media (max-width: 680px) {
    .business-card-head,
    .business-section-head,
    .business-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    .business-head-controls,
    .business-global-controls,
    .business-section-toolbar {
        width: 100%;
    }

    .business-search-input,
    .business-inline-select {
        width: 100%;
        min-width: 0;
    }

    .business-form-grid {
        grid-template-columns: 1fr;
    }

    .business-quick-actions,
    .business-goal-grid {
        grid-template-columns: 1fr;
    }

    .business-board {
        grid-template-columns: repeat(6, minmax(220px, 1fr));
    }
}








/* ==========================================================
   Atelier visual refinement pass (system + restraint layer)
   ========================================================== */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --surface-stroke-soft: color-mix(in srgb, var(--surface-border) 58%, transparent);
    --surface-stroke-quiet: color-mix(in srgb, var(--surface-border) 36%, transparent);
    --elevation-1: 0 8px 20px color-mix(in srgb, #000 8%, transparent);
    --elevation-2: 0 14px 34px color-mix(in srgb, #000 12%, transparent);
}

/* App shell + rhythm */
.view {
    padding: var(--space-3) var(--space-6) var(--space-6);
}

.view-header {
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.view-header h2 {
    font-size: clamp(28px, 2.4vw, 36px);
    line-height: 1.1;
}

.eyebrow {
    letter-spacing: 0.15em;
    margin-bottom: var(--space-2);
}

/* Header / top navigation */
.top-nav {
    margin: var(--space-4) var(--space-5) var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 22px;
    background: color-mix(in srgb, var(--glass-02) 86%, transparent);
    border: 1px solid var(--surface-stroke-soft);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 8%, transparent);
}

.view-tabs {
    padding: 3px;
    gap: 3px;
    background: color-mix(in srgb, var(--surface-bg) 88%, var(--bg-elevated) 12%);
    border: 1px solid var(--surface-stroke-quiet);
    box-shadow: none;
}

.view-tab {
    padding: 7px 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.view-tab.active {
    background: color-mix(in srgb, var(--surface-bg-active) 82%, var(--bg-elevated) 18%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.tabs-shell .tab-clock-embed,
.integrations-dock {
    border: 1px solid var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg-elevated) 88%, var(--bg-elevated) 12%);
    box-shadow: none;
}

.quick-app-btn,
.custom-shortcut-btn {
    border-radius: 12px;
    border-color: var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg) 90%, var(--bg-elevated) 10%);
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Sidebar simplification */
.sidebar {
    border-right: 1px solid var(--surface-stroke-soft);
    box-shadow: none;
}

.sidebar-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--surface-stroke-quiet);
    background: transparent;
}

.sidebar-search {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 0;
}

.search-input {
    border: 1px solid var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg) 78%, transparent);
    border-radius: 10px;
}

.search-input:focus {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--surface-border));
    background: color-mix(in srgb, var(--surface-bg-hover) 84%, var(--bg-elevated) 16%);
}

.pages-list {
    padding: 4px var(--space-2) var(--space-3);
    gap: 2px;
}

.page-item {
    min-height: 34px;
    padding: 7px 10px;
    margin: 0;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
}

.page-item:hover {
    margin: 0;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface-bg-hover) 74%, transparent);
}

.page-item.active {
    margin: 0;
    font-weight: 600;
    border: 1px solid var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg-active) 78%, var(--bg-elevated) 22%);
}

.new-page-btn {
    border-style: solid;
    border-color: var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg) 72%, transparent);
    box-shadow: none;
}

body[data-theme-key="chromeos"] .top-nav {
    background: linear-gradient(180deg, rgba(251, 223, 218, 0.98), rgba(244, 201, 194, 0.99)) !important;
    border-color: rgba(234, 67, 53, 0.28) !important;
    box-shadow: 0 10px 24px rgba(234, 67, 53, 0.14) !important;
}

body[data-theme-key="chromeos"] .top-nav.glass-panel {
    background: #f4b8af !important;
    border-color: rgba(234, 67, 53, 0.30) !important;
    box-shadow: 0 10px 24px rgba(234, 67, 53, 0.16) !important;
}

body[data-theme-key="chromeos"] .nav-left,
body[data-theme-key="chromeos"] .nav-right,
body[data-theme-key="chromeos"] .tabs-shell {
    background: linear-gradient(180deg, rgba(251, 223, 218, 0.98), rgba(244, 201, 194, 0.99)) !important;
}

body[data-theme-key="chromeos"] .top-nav.glass-panel .nav-left,
body[data-theme-key="chromeos"] .top-nav.glass-panel .nav-right {
    background: transparent !important;
}

body[data-theme-key="chromeos"] .top-nav {
    gap: 18px !important;
}

body[data-theme-key="chromeos"] .app-brand,
body[data-theme-key="chromeos"] .tabs-shell,
body[data-theme-key="chromeos"] .global-search,
body[data-theme-key="chromeos"] .command-palette-trigger {
    border-radius: 22px !important;
}

body[data-theme-key="chromeos"] .app-brand {
    padding: 10px 16px !important;
    background: linear-gradient(180deg, rgba(219, 242, 225, 0.97), rgba(198, 234, 208, 0.99)) !important;
    border: 1px solid rgba(52, 168, 83, 0.22) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.12) !important;
}

body[data-theme-key="chromeos"] .app-brand-ring {
    display: block;
}

body[data-theme-key="chromeos"] .app-brand-copy {
    min-width: 0;
}

body[data-theme-key="chromeos"] .app-brand .brand-label {
    color: #1d3a29 !important;
}

body[data-theme-key="chromeos"] .app-brand .brand-sub {
    color: #4a7a5c !important;
}

body[data-theme-key="chromeos"] .nav-left {
    gap: 16px !important;
}

body[data-theme-key="chromeos"] .nav-right {
    gap: 16px !important;
}

body[data-theme-key="chromeos"] .nav-divider {
    width: 12px !important;
    height: auto !important;
    background: transparent !important;
}

body[data-theme-key="chromeos"] .tabs-shell {
    background: linear-gradient(180deg, rgba(246, 170, 156, 0.99), rgba(236, 126, 110, 1)) !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(215, 56, 40, 0.34) !important;
    box-shadow: 0 10px 24px rgba(215, 56, 40, 0.18) !important;
}

body[data-theme-key="chromeos"] .nav-divider {
    background: rgba(234, 67, 53, 0.22) !important;
    opacity: 1;
}

body[data-theme-key="chromeos"] .global-search,
body[data-theme-key="chromeos"] .word-count-display,
body[data-theme-key="chromeos"] .command-palette-trigger,
body[data-theme-key="chromeos"] .command-palette-kbd {
    background: linear-gradient(180deg, rgba(219, 242, 225, 0.97), rgba(198, 234, 208, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.26) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.14) !important;
}

body[data-theme-key="chromeos"] .view-tabs,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-embed {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-theme-key="chromeos"] .tabs-shell .tab-clock-main,
body[data-theme-key="chromeos"] .tabs-shell .toolbar-time-widget,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-icon,
body[data-theme-key="chromeos"] .tabs-shell .tab-clock-gear {
    color: #4d1813 !important;
}

body[data-theme-key="chromeos"] .tabs-shell .tab-clock-gear {
    background: rgba(151, 29, 18, 0.14) !important;
    border-color: rgba(151, 29, 18, 0.18) !important;
    box-shadow: none !important;
}

body[data-theme-key="chromeos"] .tabs-shell .tab-clock-gear:hover {
    background: rgba(151, 29, 18, 0.20) !important;
    color: #43120d !important;
}

body[data-theme-key="chromeos"] .view-tab {
    color: #5e1e18 !important;
}

body[data-theme-key="chromeos"] .view-tab:hover:not(.active) {
    background: rgba(151, 29, 18, 0.12) !important;
    color: #47130e !important;
}

body[data-theme-key="chromeos"] .view-tab.active {
    background: rgba(151, 29, 18, 0.16) !important;
    border-color: rgba(151, 29, 18, 0.20) !important;
    color: #45120d !important;
    box-shadow: inset 0 0 0 1px rgba(151, 29, 18, 0.12) !important;
}

body[data-theme-key="chromeos"] .view-tab.active::after {
    background: rgba(125, 21, 12, 0.9) !important;
}

body[data-theme-key="chromeos"] .toolbar-wrapper,
body[data-theme-key="chromeos"] .focus-timer,
body[data-theme-key="chromeos"] .glass-card,
body[data-theme-key="chromeos"] .summary-card,
body[data-theme-key="chromeos"] .today-panel,
body[data-theme-key="chromeos"] .settings-card,
body[data-theme-key="chromeos"] .task-card,
body[data-theme-key="chromeos"] .modal-content,
body[data-theme-key="chromeos"] .add-item-modal-content,
body[data-theme-key="chromeos"] .new-page-modal-content {
    background: linear-gradient(180deg, rgba(233, 247, 237, 0.96), rgba(220, 241, 226, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.20) !important;
    box-shadow: 0 10px 22px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] .toolbar-btn.active,
body[data-theme-key="chromeos"] .toolbar-btn[aria-pressed="true"],
body[data-theme-key="chromeos"] .sidebar .new-page-btn,
body[data-theme-key="chromeos"] .todo-add-btn,
body[data-theme-key="chromeos"] .btn-primary {
    background: linear-gradient(180deg, rgba(86, 194, 114, 0.96), rgba(52, 168, 83, 0.99)) !important;
    border-color: rgba(33, 126, 58, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(52, 168, 83, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-theme-key="chromeos"] .toolbar-btn.active:hover,
body[data-theme-key="chromeos"] .toolbar-btn[aria-pressed="true"]:hover,
body[data-theme-key="chromeos"] .sidebar .new-page-btn:hover,
body[data-theme-key="chromeos"] .todo-add-btn:hover,
body[data-theme-key="chromeos"] .btn-primary:hover {
    background: linear-gradient(180deg, rgba(98, 201, 125, 0.98), rgba(62, 177, 92, 1)) !important;
}

body[data-theme-key="chromeos"] .page-item.active,
body[data-theme-key="chromeos"] .pages-list .page-item.active:hover {
    background:
        linear-gradient(90deg, rgba(52, 168, 83, 0.18) 0 2px, transparent 2px),
        linear-gradient(180deg, rgba(240, 249, 242, 0.96), rgba(226, 244, 231, 0.99)) !important;
    border-color: rgba(52, 168, 83, 0.24) !important;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] #view-notes .editor-container {
    background: linear-gradient(180deg, rgba(235, 247, 238, 0.98), rgba(220, 241, 226, 0.99)) !important;
    border: 1px solid rgba(52, 168, 83, 0.20) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 26px rgba(52, 168, 83, 0.10) !important;
}

body[data-theme-key="chromeos"] #view-notes .notes-pane-primary,
body[data-theme-key="chromeos"] #view-notes .breadcrumbs,
body[data-theme-key="chromeos"] #view-notes .tags-container {
    background: transparent !important;
}

body[data-theme-key="chromeos"] #view-notes .editor,
body[data-theme-key="chromeos"] #view-notes .page-title-input,
body[data-theme-key="chromeos"] #view-notes .split-editor {
    background: linear-gradient(180deg, rgba(198, 236, 208, 0.99), rgba(173, 223, 186, 1)) !important;
    border: 1px solid rgba(52, 168, 83, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 6px 16px rgba(52, 168, 83, 0.08) !important;
}

body[data-theme-key="chromeos"] #view-notes .page-title-input {
    padding: 14px 18px !important;
}

body[data-theme-key="chromeos"] #view-notes .editor {
    padding: 18px !important;
}

body[data-theme-key="chromeos"] #editor,
body[data-theme-key="chromeos"] #editorSecondary {
    background: #bde6c8 !important;
    background-image: none !important;
}

.focus-timer {
    margin: 6px var(--space-3) 4px;
    border: 1px solid var(--surface-stroke-soft);
    background: color-mix(in srgb, var(--surface-bg-elevated) 88%, transparent);
    box-shadow: none;
}

.focus-timer .timer-controls {
    padding: 1px;
    background: transparent;
    border-color: var(--surface-stroke-quiet);
}

/* Toolbar calming + button hierarchy */
.toolbar-wrapper {
    top: calc(var(--top-nav-height) + 14px);
    height: 52px;
    padding: 4px 10px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--glass-02) 88%, transparent);
    border: 1px solid var(--surface-stroke-soft);
    box-shadow: var(--elevation-1);
}

.toolbar {
    gap: 8px;
}

.toolbar-btn {
    height: 38px;
    min-width: 38px;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

.toolbar-btn:hover {
    background: color-mix(in srgb, var(--surface-bg-hover) 76%, transparent);
    color: var(--text-primary);
}

.toolbar-btn.active,
.toolbar-btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-bg-active) 20%);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text-primary);
}

.toolbar-separator {
    height: 18px;
    background: var(--surface-stroke-soft);
}

/* Shared cards/panels: fewer heavy effects */
.glass-card,
.summary-card,
.today-panel,
.task-card,
.settings-card,
.feature-toggle-card,
.feature-setup-card,
.modal-content,
.add-item-modal-content,
.new-page-modal-content {
    border: 1px solid var(--surface-stroke-soft);
    box-shadow: var(--elevation-1);
}

.glass-card,
.summary-card,
.today-panel,
.settings-card {
    background: color-mix(in srgb, var(--surface-bg-elevated) 88%, var(--bg-elevated) 12%);
}

.summary-card,
.today-panel,
.settings-card {
    padding: var(--space-5);
    border-radius: 16px;
}

.task-card {
    padding: 12px 14px;
    border-left-width: 3px;
    border-radius: 12px;
    box-shadow: none;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-1);
}

/* Typography-led metadata + chips/pills */
.summary-label,
.section-title,
.feature-toggle-description,
.task-meta,
.card-meta,
.settings-help,
.empty-subtitle {
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.neumo-chip,
.streak-pill,
.hw-priority,
.todo-category-badge {
    border: 1px solid var(--surface-stroke-soft);
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Buttons + form controls */
.neumo-btn,
.btn,
.todo-add-btn,
.todo-filter-btn,
.theme-switcher-btn,
.storage-btn {
    border: 1px solid var(--surface-stroke-soft);
    box-shadow: none;
    border-radius: 10px;
}

.storage-btn.primary,
.btn-primary {
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.2);
}

.modal-input,
select,
input[type="text"],
input[type="search"],
input[type="date"],
textarea {
    border-color: var(--surface-stroke-soft);
    border-radius: 10px;
}

/* Floating utility controls: less visual noise */
.storage-options {
    padding: 8px 12px;
    gap: 10px;
    background: color-mix(in srgb, var(--surface-bg) 82%, var(--bg-elevated) 18%);
    border-top: 1px solid var(--surface-stroke-soft);
    box-shadow: 0 -8px 20px color-mix(in srgb, #000 10%, transparent);
}

.chatbot-btn,
.theme-switcher-btn,
.sidebar-toggle-btn {
    box-shadow: 0 4px 12px color-mix(in srgb, #000 14%, transparent);
    border: 1px solid var(--surface-stroke-soft);
}

/* Keep the refinement behavior coherent on smaller screens */
@media (max-width: 1024px) {
    .top-nav {
        margin: 10px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .toolbar-wrapper {
        border-radius: 12px;
        top: calc(var(--top-nav-height-mobile) + 8px);
    }

    .view {
        padding: 8px 14px 20px;
    }
}

/* ==========================================================
   Mobile product pass
   ========================================================== */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --app-height: 100dvh;
    --viewport-height: 100dvh;
    --viewport-width: 100vw;
}

html,
body {
    min-height: 100%;
    overflow-x: clip;
}

body {
    min-height: var(--app-height);
}

.app-container {
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
}

.main-content {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-top: calc(var(--top-nav-height) + 24px);
}

.view {
    min-width: 0;
}

.view-header,
.today-header-actions,
.workflow-actions,
.hw-header-actions,
.settings-actions {
    flex-wrap: wrap;
}

.view-tabs-toggle {
    display: none;
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: clamp(280px, 78vw, 360px);
        --top-nav-height-mobile: 112px;
    }

    .app-container {
        position: relative;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-width), 86vw) !important;
        min-width: min(var(--sidebar-width), 86vw) !important;
        max-width: min(var(--sidebar-width), 86vw) !important;
        height: var(--app-height) !important;
        padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 16px) !important;
        z-index: 5000 !important;
        transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
        overflow-y: auto;
        box-shadow: var(--shadow-soft-lg);
    }

    body.sidebar-open .sidebar:not(.collapsed) {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body:not(.sidebar-open) .sidebar,
    .sidebar.collapsed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .sidebar .focus-timer,
    .sidebar-tags-filter {
        display: none !important;
    }

    .sidebar-header {
        padding: 8px 8px 14px;
    }

    .sidebar-search {
        padding: 0 8px 12px;
    }

    .sidebar-shortcuts,
    .sidebar-new-page {
        padding-inline: 8px;
    }

    .pages-list {
        padding-inline: 4px;
        padding-bottom: 18px;
    }

    .page-item {
        min-height: 44px;
        padding-block: 10px;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 4800 !important;
        background: rgba(12, 17, 23, 0.18);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-toggle-btn,
    .sidebar-toggle-btn.collapsed {
        left: calc(var(--safe-left) + 12px) !important;
        top: calc(var(--safe-top) + 12px) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        z-index: 5200 !important;
    }

    .main-content {
        padding-bottom: calc(132px + var(--safe-bottom));
        scroll-padding-top: calc(var(--top-nav-height-mobile) + 18px);
    }

    .top-nav {
        position: sticky;
        top: calc(var(--safe-top) + 8px);
        z-index: 1300;
        margin: calc(var(--safe-top) + 8px) 10px 10px;
        padding: 12px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
        border-radius: 20px;
    }

    .nav-left,
    .nav-right {
        width: 100%;
        min-width: 0;
    }

    .nav-left {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 12px;
        align-items: start;
    }

    .app-brand {
        min-width: 0;
        padding-left: 54px;
    }

    .brand-label {
        font-size: clamp(16px, 2.4vw, 18px);
    }

    .brand-sub,
    .nav-divider,
    .window-chrome {
        display: none !important;
    }

    .tabs-shell {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding-right: 0 !important;
        overflow: hidden;
    }

    .view-tabs {
        display: flex !important;
        width: 100%;
        max-width: none;
        padding: 4px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .view-tabs::-webkit-scrollbar {
        display: none;
    }

    .view-tab,
    .view-more-toggle {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 12px;
        scroll-snap-align: start;
    }

    .view-more {
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .view-more-toggle {
        width: auto !important;
        justify-content: center !important;
        border-radius: 12px;
    }

    .view-more-menu {
        position: absolute !important;
        min-width: 220px;
        margin-top: 0 !important;
        box-shadow: var(--shadow-soft);
    }

    .view-tabs-toggle {
        display: none !important;
    }

    .nav-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: stretch;
    }

    .global-search {
        width: 100% !important;
        min-width: 0 !important;
    }

    .command-palette-trigger {
        min-height: 44px;
        justify-content: center;
        padding-inline: 14px;
        white-space: nowrap;
    }

    .command-palette-trigger .command-palette-kbd {
        display: none;
    }

    .command-palette-trigger {
        display: none !important;
    }

    .nav-right {
        grid-template-columns: 1fr;
    }

    .theme-switcher-btn {
        position: fixed !important;
        top: calc(var(--safe-top) + 12px) !important;
        right: calc(var(--safe-right) + 12px) !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 4200 !important;
    }

    #storageOptions,
    .storage-options {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        top: auto !important;
        bottom: calc(var(--safe-bottom) + 10px) !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: visible !important;
        border-radius: 18px !important;
        z-index: 3200 !important;
        -webkit-overflow-scrolling: touch;
        cursor: default !important;
    }

    #storageOptions::-webkit-scrollbar,
    .storage-options::-webkit-scrollbar {
        display: none;
    }

    #storageOptions .storage-collapsed-icon,
    .storage-options .storage-collapsed-icon {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        flex: 0 0 0 !important;
    }

    #storageOptions > :not(.storage-collapsed-icon),
    #storageOptions:hover > :not(.storage-collapsed-icon),
    #storageOptions:not(:hover) > :not(.storage-collapsed-icon),
    .storage-options > :not(.storage-collapsed-icon),
    .storage-options:hover > :not(.storage-collapsed-icon),
    .storage-options:not(:hover) > :not(.storage-collapsed-icon) {
        width: auto !important;
        min-width: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        max-width: none !important;
        min-height: 40px !important;
        pointer-events: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        border-width: 1px !important;
        flex: 1 1 auto !important;
    }

    #storageOptions:hover,
    .storage-options:hover {
        max-width: none !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        cursor: default !important;
    }

    #storageOptions .taskbar-save-status,
    .storage-options .taskbar-save-status {
        grid-column: 1 / -1;
        justify-content: center !important;
    }

    #storageOptions .storage-btn,
    #storageOptions .taskbar-save-status,
    .storage-options .storage-btn,
    .storage-options .taskbar-save-status {
        min-height: 40px;
    }

    #storageOptions .btn-text,
    #storageOptions .taskbar-save-status span,
    .storage-options .btn-text,
    .storage-options .taskbar-save-status span {
        display: inline !important;
        white-space: nowrap;
    }

    #storageOptions .taskbar-divider,
    .storage-options .taskbar-divider {
        display: none !important;
    }

    #storageOptions .storage-btn,
    .storage-options .storage-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    #storageOptions .storage-btn,
    #storageOptions .taskbar-save-status,
    .storage-options .storage-btn,
    .storage-options .taskbar-save-status {
        flex: 1 1 auto !important;
    }

    .chatbot-btn {
        right: calc(var(--safe-right) + 12px) !important;
        bottom: calc(var(--safe-bottom) + 156px) !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 3300 !important;
    }

    .focus-mode-quick-toggle {
        right: calc(var(--safe-right) + 12px) !important;
        bottom: calc(var(--safe-bottom) + 220px) !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 3300 !important;
    }

    .chatbot-panel {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        top: auto !important;
        bottom: calc(var(--safe-bottom) + 144px) !important;
        height: min(68vh, 540px) !important;
        max-height: min(68vh, 540px) !important;
        border-radius: 22px !important;
    }

    .theme-panel {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: calc(var(--safe-bottom) + 24px) !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(78vh, 720px) !important;
        border-radius: 24px !important;
    }

    .toolbar-scroll-btn {
        display: none !important;
    }

    .toolbar-wrapper {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        top: calc(var(--safe-top) + var(--top-nav-height-mobile) + 4px) !important;
        height: auto !important;
        min-height: 56px;
        padding: 8px 10px !important;
        border-radius: 20px !important;
    }

    .toolbar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        padding: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .toolbar::-webkit-scrollbar {
        display: none;
    }

    .toolbar .toolbar-btn {
        flex: 0 0 auto;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .toolbar .toolbar-separator {
        display: none !important;
    }

    .toolbar-dropdown {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }

    #view-notes .editor-container {
        padding: 88px 14px calc(var(--safe-bottom) + 120px) 14px !important;
        gap: 12px;
    }

    #view-notes .notes-pane-primary {
        margin-top: 0 !important;
    }

    #view-notes .breadcrumbs {
        margin-bottom: 8px !important;
    }

    #view-notes .tags-container {
        padding-top: 4px !important;
        margin-bottom: 8px !important;
    }

    .page-title-input,
    .page-title {
        font-size: clamp(1.9rem, 6vw, 2.4rem) !important;
        line-height: 1.08;
        margin-top: 0 !important;
    }

    .editor {
        min-height: 52vh !important;
        font-size: 1rem;
        line-height: 1.72;
    }

    .editor table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .editor table tbody,
    .editor table thead,
    .editor table tr {
        white-space: nowrap;
    }

    body.notes-split-active #view-notes .editor-container {
        grid-template-columns: 1fr !important;
    }

    body.notes-split-active .notes-pane-secondary {
        display: grid;
        order: 2;
        min-height: 320px;
    }

    .today-grid,
    .summary-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    #view-homework,
    #view-business {
        padding-bottom: calc(var(--safe-bottom) + 132px);
    }

    #hwMainArea {
        padding: 8px 0 0 !important;
    }

    .hw-header-bar {
        gap: 12px;
        align-items: flex-start;
    }

    .hw-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .hw-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hw-dashboard-body {
        grid-template-columns: 1fr !important;
    }

    .hw-course-grid {
        display: grid;
        gap: 12px;
    }

    .hw-course-panel {
        padding: 14px;
        border-radius: 16px;
    }

    #view-settings .settings-row > .neumo-btn,
    #view-settings .settings-row-calendar-sync > .neumo-btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 42px !important;
    }

    #view-settings .settings-actions .neumo-btn {
        min-height: 40px !important;
    }

    .hw-assignment {
        padding: 12px;
        border-radius: 14px;
    }

    .hw-assignment-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hw-meta-chip,
    .hw-status-chip {
        min-height: 32px;
    }

    .hw-global-add-wrap {
        margin-left: auto;
    }

    .hw-global-add-trigger {
        width: 52px;
        height: 52px;
    }

    .hw-global-add-modal,
    .hw-course-quick-modal {
        align-items: flex-end;
        padding: 0;
    }

    .hw-global-add-card,
    .hw-course-quick-card {
        width: 100%;
        max-width: none;
        border-radius: 24px 24px 0 0;
        padding: 18px 16px calc(var(--safe-bottom) + 18px);
    }

    .hw-global-add-form,
    .hw-global-course-grid,
    .hw-global-meta-row {
        grid-template-columns: 1fr !important;
    }

    .hw-global-add-form input,
    .hw-global-add-form select,
    .hw-global-add-form button,
    .hw-btn {
        min-height: 46px;
    }

    .hw-task-menu {
        right: 0;
        left: auto;
        min-width: 200px;
    }

    .business-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .business-side-column {
        position: static !important;
        top: auto !important;
        order: -1;
    }

    .business-card {
        padding: 16px;
        border-radius: 18px;
    }

    .business-card-head,
    .business-section-head,
    .business-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    .business-head-controls,
    .business-global-controls,
    .business-section-toolbar {
        width: 100%;
    }

    .business-section-toolbar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .business-search-input,
    .business-inline-select {
        width: 100%;
        min-width: 0;
    }

    .business-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .business-analytics-grid,
    .business-notes-layout,
    .business-form-grid,
    .business-goal-grid {
        grid-template-columns: 1fr !important;
    }

    .business-item-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .business-board {
        grid-template-columns: repeat(6, minmax(72vw, 1fr));
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
    }

    .business-board-column {
        min-width: 72vw;
        scroll-snap-align: start;
    }

    .business-detail-tabs {
        flex-wrap: wrap;
    }

    .business-detail-row,
    .business-distribution-row,
    .business-stacked-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .business-item-actions {
        width: 100%;
    }

    .business-item-actions .business-mini-btn {
        flex: 1 1 140px;
        min-height: 40px;
    }

    .business-entity-modal {
        width: min(100%, 720px) !important;
        max-width: none !important;
        max-height: min(calc(var(--app-height) - 12px), 100%) !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .business-entity-modal .modal-body {
        overflow: auto;
        max-height: calc(var(--app-height) - 178px);
        padding-right: 0;
    }

    .modal {
        padding: 12px;
    }

    .modal.active {
        align-items: flex-end;
    }

    .modal-content {
        width: min(100%, 760px);
        max-width: none;
        max-height: min(calc(var(--app-height) - 12px), 100%);
        border-radius: 22px 22px 0 0;
        padding: 18px;
        overflow: hidden;
    }

    .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .modal-body {
        overflow: auto;
        max-height: calc(var(--app-height) - 190px);
    }

    .modal-footer {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .modal-footer > * {
        flex: 1 1 160px;
        min-height: 44px;
    }

    .add-item-modal-content,
    .new-page-modal-content,
    .custom-theme-setup-modal-content {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 720px) {
    :root {
        --top-nav-height-mobile: 126px;
    }

    .top-nav {
        margin: calc(var(--safe-top) + 6px) 8px 10px;
        padding: 10px;
        gap: 8px;
    }

    .nav-left {
        grid-template-columns: 1fr;
    }

    .app-brand {
        padding-left: 52px;
    }

    .nav-right {
        grid-template-columns: 1fr;
    }

    .command-palette-trigger {
        width: 100%;
    }

    .toolbar-wrapper {
        top: calc(var(--safe-top) + var(--top-nav-height-mobile) + 8px) !important;
    }

    #view-notes .editor-container {
        padding-top: 84px !important;
    }

    #view-notes .notes-pane-primary {
        margin-top: 0 !important;
    }

    .hw-dashboard-grid,
    .business-overview-grid {
        grid-template-columns: 1fr !important;
    }

    .business-section-toolbar {
        grid-template-columns: 1fr;
    }

    .business-board {
        grid-template-columns: repeat(6, minmax(84vw, 1fr));
    }

    .business-board-column {
        min-width: 84vw;
    }
}

/* ------------------------------------------------------------------
   No Parallax / Anchored Layout
------------------------------------------------------------------- */
body.no-parallax,
body.no-parallax * {
    scroll-behavior: auto !important;
}

body.no-parallax *,
body.no-parallax *::before,
body.no-parallax *::after {
    animation: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

body.no-parallax .top-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 14px clamp(12px, 2vw, 20px) 6px !important;
}

body.no-parallax .toolbar-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 clamp(12px, 2vw, 20px) 14px !important;
    z-index: 1200 !important;
    transition: none !important;
}

body.no-parallax #view-notes {
    padding: 0 0 8px !important;
}

body.no-parallax .main-content {
    scroll-padding-top: 24px !important;
}

body.no-parallax #view-notes .editor-container {
    padding: 16px clamp(10px, 2vw, 24px) calc(var(--safe-bottom, 0px) + 40px) !important;
}

body.no-parallax .business-side-column,
body.no-parallax .timeline-planner-sidebar,
body.no-parallax .ap-study-sidebar {
    position: static !important;
    top: auto !important;
}

body.no-parallax #view-settings,
body.no-parallax #view-settings * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

body.no-parallax #view-settings .settings-row-temporary-pages {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

body.no-parallax #view-settings .settings-row-temporary-pages .modal-input:first-child,
body.no-parallax #view-settings .settings-row-temporary-pages .modal-input:last-child,
body.no-parallax #view-settings .settings-row-temporary-pages .nf-select {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
}

@media (max-width: 1024px) {
    body.settings-anchored-mode .top-nav {
        margin: calc(var(--safe-top) + 6px) 8px 10px !important;
    }

    body.no-parallax .toolbar-wrapper {
        margin: 0 8px 12px !important;
    }

    body.no-parallax #view-notes .editor-container {
        padding: 12px 12px calc(var(--safe-bottom, 0px) + 96px) !important;
    }
}

@media (max-width: 720px) {
    body.settings-anchored-mode .top-nav {
        margin: calc(var(--safe-top) + 6px) 8px 10px !important;
    }

    body.no-parallax .top-nav {
        margin: calc(var(--safe-top) + 6px) 8px 10px !important;
    }

    body.no-parallax .toolbar-wrapper {
        margin: 0 8px 10px !important;
    }

    body.no-parallax #view-notes .editor-container {
        padding: 12px 12px calc(var(--safe-bottom, 0px) + 88px) !important;
    }
}

/* ------------------------------------------------------------------
   Onboarding Overlay Readability Pass
------------------------------------------------------------------- */
.feature-setup-overlay .feature-setup-backdrop {
    background: rgba(8, 13, 21, 0.38);
    backdrop-filter: blur(2px);
}

[data-theme="dark"] .feature-setup-overlay .feature-setup-backdrop {
    background: rgba(4, 8, 14, 0.58);
}

.feature-setup-overlay .feature-setup-card {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 84%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 96%, #ffffff 4%),
        color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-elevated) 8%)
    );
    box-shadow: 0 26px 58px color-mix(in srgb, #000 18%, transparent);
}

.feature-setup-overlay .feature-setup-card h2 {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.feature-setup-overlay .feature-setup-card p {
    color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-primary) 22%);
}

.feature-setup-overlay .feature-setup-note {
    color: color-mix(in srgb, var(--text-secondary) 72%, var(--text-primary) 28%);
}

.feature-setup-overlay .feature-toggle-card {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 86%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 98%, var(--surface-bg-elevated) 2%),
        color-mix(in srgb, var(--bg-secondary) 93%, var(--bg-elevated) 7%)
    );
    box-shadow: 0 8px 18px color-mix(in srgb, #000 11%, transparent);
}

.feature-setup-overlay .feature-toggle-card:hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--surface-border-strong));
    box-shadow: 0 10px 22px color-mix(in srgb, #000 14%, transparent);
}

.feature-setup-overlay .feature-toggle-card[data-checked="true"] {
    border-color: color-mix(in srgb, var(--accent) 78%, var(--surface-border-strong));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-soft) 58%, var(--bg-elevated) 42%),
        color-mix(in srgb, var(--accent-soft) 34%, var(--bg-secondary) 66%)
    );
    box-shadow: 0 10px 24px color-mix(in srgb, rgba(var(--accent-rgb), 0.28) 78%, rgba(0, 0, 0, 0.1));
}

.feature-setup-overlay .feature-toggle-icon {
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--bg-elevated) 42%);
    color: color-mix(in srgb, var(--accent) 86%, var(--text-primary) 14%);
}

.feature-setup-overlay .feature-toggle-input:checked ~ .feature-toggle-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #ffffff 8%), var(--accent-strong));
    color: #ffffff;
}

.feature-setup-overlay .feature-toggle-description {
    color: color-mix(in srgb, var(--text-secondary) 72%, var(--text-primary) 28%);
}

.feature-setup-overlay .feature-toggle-switch {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 88%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 90%, var(--surface-bg-active) 10%);
}

.feature-setup-overlay .feature-toggle-switch-handle {
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.feature-setup-overlay .feature-toggle-input:checked ~ .feature-toggle-switch {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 92%, #ffffff 8%),
        color-mix(in srgb, var(--accent-strong) 82%, var(--accent) 18%)
    );
    border-color: color-mix(in srgb, var(--accent) 86%, var(--surface-border-strong));
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.24);
}

.feature-setup-overlay .feature-setup-actions .neumo-btn {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--surface-border));
    background: color-mix(in srgb, var(--accent-soft) 46%, var(--bg-elevated) 54%);
    color: var(--text-primary);
    font-weight: 700;
}

/* Settings Control Center */
.view[data-view="settings"] {
    isolation: isolate;
}

body[data-view="settings"] .top-nav,
body[data-view="settings"] .toolbar-wrapper,
body[data-view="settings"] .sidebar,
body[data-view="settings"] .theme-switcher-btn {
    filter: saturate(0.72);
    opacity: 0.66;
}

body[data-view="settings"] .toolbar-wrapper {
    pointer-events: none;
}

body[data-view="settings"] #storageOptions {
    opacity: 0.72;
}

body.settings-anchored-mode,
body.settings-anchored-mode * {
    scroll-behavior: auto !important;
}

body.settings-anchored-mode #view-settings,
body.settings-anchored-mode #view-settings *,
body.settings-anchored-mode .top-nav,
body.settings-anchored-mode .toolbar-wrapper {
    animation: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

body.settings-anchored-mode .top-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 14px clamp(12px, 2vw, 20px) 6px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-elevated) 4%) !important;
}

body.settings-anchored-mode .toolbar-wrapper {
    display: none !important;
}

body.settings-anchored-mode .main-content {
    scroll-padding-top: 24px !important;
}

body.settings-anchored-mode .theme-switcher-btn,
body.settings-anchored-mode #storageOptions,
body.settings-anchored-mode .storage-options {
    display: none !important;
}

body.settings-anchored-mode .atelier-settings-nav,
body.settings-anchored-mode .atelier-settings-preview-rail,
body.settings-anchored-mode .atelier-settings-action-bar {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
}

body.settings-anchored-mode .atelier-settings-workspace,
body.settings-anchored-mode .atelier-settings-nav,
body.settings-anchored-mode .atelier-settings-search-card,
body.settings-anchored-mode .atelier-settings-section,
body.settings-anchored-mode .atelier-settings-preview-card,
body.settings-anchored-mode .atelier-settings-preview-notes,
body.settings-anchored-mode .atelier-settings-action-bar,
body.settings-anchored-mode #view-settings .glass-card,
body.settings-anchored-mode #view-settings .settings-card,
body.settings-anchored-mode #view-settings .atelier-setting-row,
body.settings-anchored-mode #view-settings .atelier-setting-grid > label,
body.settings-anchored-mode #view-settings .settings-toggle[data-setting-item],
body.settings-anchored-mode #view-settings .modal-input,
body.settings-anchored-mode #view-settings .nf-select-trigger,
body.settings-anchored-mode #view-settings .nf-select-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

body.settings-anchored-mode .view-settings {
    background: var(--bg-secondary) !important;
}

body.settings-anchored-mode .atelier-settings-workspace {
    background: color-mix(in srgb, var(--bg-elevated) 98%, #ffffff 2%) !important;
    border-color: color-mix(in srgb, var(--surface-border-strong) 88%, transparent);
}

body.settings-anchored-mode .atelier-settings-nav,
body.settings-anchored-mode .atelier-settings-search-card,
body.settings-anchored-mode .atelier-settings-section,
body.settings-anchored-mode .atelier-settings-preview-card,
body.settings-anchored-mode .atelier-settings-preview-notes,
body.settings-anchored-mode .atelier-settings-action-bar,
body.settings-anchored-mode #view-settings .settings-card,
body.settings-anchored-mode #view-settings .atelier-setting-row,
body.settings-anchored-mode #view-settings .atelier-setting-grid > label,
body.settings-anchored-mode #view-settings .settings-toggle[data-setting-item],
body.settings-anchored-mode #view-settings .modal-input,
body.settings-anchored-mode #view-settings .nf-select-trigger,
body.settings-anchored-mode #view-settings .nf-select-menu {
    background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-elevated) 6%) !important;
}

body.settings-anchored-mode .atelier-settings-nav-btn:hover,
body.settings-anchored-mode .neumo-btn:hover,
body.settings-anchored-mode .nf-select:not(.is-disabled) .nf-select-trigger:hover,
body.settings-anchored-mode .toolbar-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

body.settings-anchored-mode .atelier-settings-nav-btn,
body.settings-anchored-mode .neumo-btn,
body.settings-anchored-mode .nf-select-trigger,
body.settings-anchored-mode .nf-select-menu,
body.settings-anchored-mode .modal-input {
    transition: none !important;
}

body.settings-anchored-mode .atelier-settings-preview-surface {
    box-shadow: none !important;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-elevated) 4%) !important;
}

#view-settings {
    padding-top: 12px;
}

.view-settings {
    background:
        radial-gradient(circle at 6% 4%, rgba(var(--accent-rgb), 0.08), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #ffffff 8%), var(--bg-secondary));
}

.atelier-settings-workspace {
    display: grid;
    gap: 14px;
    min-height: calc(100dvh - var(--top-nav-height) - 82px);
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 84%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 95%, #ffffff 5%),
        color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-elevated) 12%)
    );
    box-shadow: 0 24px 58px color-mix(in srgb, #000 14%, transparent);
}

.atelier-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
    padding-bottom: 12px;
}

.atelier-settings-header-main h2 {
    margin: 0;
    letter-spacing: -0.02em;
}

.atelier-settings-header-main .settings-header-copy {
    margin: 5px 0 0;
    max-width: 72ch;
    color: color-mix(in srgb, var(--text-secondary) 84%, var(--text-primary) 16%);
}

.atelier-settings-header-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    text-align: right;
}

.atelier-settings-status-pill {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 92%, transparent);
    background: color-mix(in srgb, var(--surface-bg) 88%, transparent);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.atelier-settings-last-applied {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.atelier-settings-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 310px;
    gap: 14px;
    align-items: start;
}

.atelier-settings-nav {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 90%, transparent);
    background: color-mix(in srgb, var(--surface-bg-elevated) 90%, var(--bg-elevated) 10%);
}

.atelier-settings-nav h3 {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.atelier-settings-mobile-nav {
    display: none;
}

.atelier-settings-nav-groups {
    display: grid;
    gap: 10px;
}

.atelier-settings-nav-group {
    display: grid;
    gap: 5px;
}

.atelier-settings-nav-group-label {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 800;
    padding-inline: 3px;
}

.atelier-settings-nav-btn {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--surface-border) 90%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
    color: var(--text-primary);
    text-align: left;
    padding: 7px 9px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    display: grid;
    gap: 2px;
}

.atelier-settings-nav-btn-title {
    font-weight: 700;
}

.atelier-settings-nav-btn-copy {
    font-size: 0.66rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.atelier-settings-nav-btn:hover {
    background: var(--surface-bg-hover);
    transform: translateY(-1px) scale(1.002);
}

.atelier-settings-nav-btn.active {
    background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface-bg-active) 25%);
    border-color: color-mix(in srgb, var(--accent) 72%, var(--surface-border-strong));
    box-shadow: 0 8px 20px color-mix(in srgb, rgba(var(--accent-rgb), 0.22) 76%, rgba(0, 0, 0, 0.03));
}

.atelier-settings-reset-all {
    margin-top: 4px;
}

.atelier-settings-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.atelier-settings-sections {
    display: grid;
    gap: 10px;
}

.atelier-settings-search-card {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 82%, transparent);
}

.atelier-settings-search-card label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 800;
}

.atelier-settings-search-hint {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.atelier-settings-section {
    display: none;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 80%, transparent);
    background: color-mix(in srgb, var(--surface-bg-elevated) 92%, var(--bg-elevated) 8%);
}

.atelier-settings-section.active {
    display: grid;
}

.atelier-settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.atelier-settings-section-head h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.atelier-settings-section-copy {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.38;
}

.atelier-setting-row,
.atelier-setting-grid > label,
.settings-toggle[data-setting-item] {
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface-bg) 94%, transparent);
    padding: 8px 10px;
}

.atelier-setting-grid > label.is-dirty,
.settings-toggle[data-setting-item].is-dirty,
.atelier-setting-row.is-dirty {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--surface-border-strong));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, rgba(var(--accent-rgb), 0.32) 78%, transparent);
}

.atelier-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.atelier-setting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 8px;
}

.atelier-setting-grid > label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.atelier-setting-grid > label > span,
.atelier-setting-row > span,
.settings-toggle[data-setting-item] > span {
    font-size: 0.73rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.settings-toggle[data-setting-item] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-toggle[data-setting-item] input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.atelier-settings-preview-rail {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 100px;
}

.atelier-settings-preview-card,
.atelier-settings-preview-notes {
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 86%, transparent);
    background: color-mix(in srgb, var(--surface-bg-elevated) 92%, var(--bg-elevated) 8%);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.atelier-settings-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.atelier-settings-preview-head h3 {
    margin: 1px 0 0;
    font-size: 0.98rem;
}

.atelier-settings-preview-label {
    margin: 0;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 800;
}

.atelier-settings-preview-chip {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 90%, transparent);
    background: color-mix(in srgb, var(--surface-bg) 90%, transparent);
    padding: 5px 8px;
    font-weight: 800;
    color: var(--text-secondary);
}

.atelier-settings-preview-surface {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 86%, transparent);
    background: linear-gradient(180deg, #f8faff, #edf3ff);
    display: grid;
    gap: 8px;
    padding: 9px;
}

body[data-theme="dark"] .atelier-settings-preview-surface,
body[data-theme-key] .atelier-settings-preview-surface {
    background: linear-gradient(180deg, #1e283c, #172031);
}

.atelier-settings-preview-surface[data-density="compact"] .atelier-settings-preview-panel {
    padding: 6px 7px;
    gap: 2px;
}

.atelier-settings-preview-surface[data-density="spacious"] .atelier-settings-preview-panel {
    padding: 9px 10px;
}

.atelier-settings-preview-surface[data-contrast="high"] .atelier-settings-preview-panel,
.atelier-settings-preview-surface[data-contrast="high"] .atelier-settings-preview-sidebar {
    border-color: color-mix(in srgb, var(--surface-border-strong) 98%, #000 2%);
}

.atelier-settings-preview-surface[data-card-style="solid"] .atelier-settings-preview-panel {
    background: color-mix(in srgb, var(--bg-elevated) 94%, #ffffff 6%);
}

.atelier-settings-preview-surface[data-card-style="minimal"] .atelier-settings-preview-panel {
    border-style: dashed;
    background: transparent;
}

.atelier-settings-preview-surface[data-corner-style="sharp"] .atelier-settings-preview-panel,
.atelier-settings-preview-surface[data-corner-style="sharp"] .atelier-settings-preview-sidebar {
    border-radius: 6px;
}

.atelier-settings-preview-surface[data-corner-style="pill"] .atelier-settings-preview-panel,
.atelier-settings-preview-surface[data-corner-style="pill"] .atelier-settings-preview-sidebar {
    border-radius: 999px;
}

.atelier-settings-preview-toolbar {
    display: flex;
    gap: 4px;
}

.atelier-settings-preview-toolbar span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-border-strong) 86%, transparent);
}

.atelier-settings-preview-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
}

.atelier-settings-preview-sidebar {
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
    background: color-mix(in srgb, var(--surface-bg-elevated) 92%, transparent);
    padding: 6px;
    display: grid;
    gap: 5px;
    align-content: start;
}

.atelier-settings-preview-line {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-border-strong) 88%, transparent);
}

.atelier-settings-preview-line.short {
    width: 65%;
}

.atelier-settings-preview-content {
    display: grid;
    gap: 7px;
}

.atelier-settings-preview-panel {
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
    background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
    padding: 7px 8px;
    display: grid;
    gap: 3px;
}

.atelier-settings-preview-panel.muted {
    opacity: 0.86;
}

.atelier-settings-preview-panel-title {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-secondary);
    font-weight: 800;
}

.atelier-settings-preview-panel-copy {
    font-size: 0.72rem;
    color: var(--text-primary);
}

.atelier-settings-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.atelier-settings-preview-stat {
    border: 1px solid color-mix(in srgb, var(--surface-border) 84%, transparent);
    border-radius: 9px;
    padding: 7px;
    display: grid;
    gap: 3px;
    background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
}

.atelier-settings-preview-stat span {
    font-size: 0.61rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 800;
}

.atelier-settings-preview-stat strong {
    font-size: 0.78rem;
}

.atelier-settings-preview-notes h4 {
    margin: 0;
    font-size: 0.85rem;
}

.atelier-settings-preview-notes p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.atelier-settings-action-bar {
    position: sticky;
    bottom: 8px;
    z-index: 4;
    border: 1px solid color-mix(in srgb, var(--surface-border-strong) 84%, #000 16%);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 96%, #ffffff 4%),
        color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-elevated) 8%)
    );
    -webkit-backdrop-filter: blur(10px) saturate(112%);
    backdrop-filter: blur(10px) saturate(112%);
    border-radius: 14px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 16px 34px color-mix(in srgb, #000 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.atelier-settings-action-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary) 12%);
    font-weight: 700;
}

.atelier-settings-action-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-border-strong) 90%, transparent);
}

body[data-theme="dark"] .atelier-settings-action-bar,
body[data-theme-key] .atelier-settings-action-bar {
    background: linear-gradient(180deg, rgba(18, 26, 40, 0.96), rgba(13, 20, 32, 0.97));
    border-color: rgba(188, 205, 242, 0.3);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#view-settings.has-unsaved-settings .atelier-settings-action-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, rgba(var(--accent-rgb), 0.24) 82%, transparent);
}

#view-settings.has-unsaved-settings #settingsStatusPill {
    border-color: color-mix(in srgb, var(--accent) 76%, var(--surface-border-strong));
    background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface-bg-active) 26%);
    color: color-mix(in srgb, var(--text-primary) 94%, var(--accent) 6%);
}

.atelier-settings-action-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
}

.atelier-settings-action-buttons .neumo-btn {
    min-height: 36px;
}

#settingsApplyBtn {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--surface-border-strong));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-soft) 72%, #ffffff 28%),
        color-mix(in srgb, var(--accent-soft) 54%, var(--surface-bg-active) 46%)
    );
    font-weight: 800;
}

#settingsApplyBtn:disabled,
#settingsRevertBtn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

@media (max-width: 1420px) {
    .atelier-settings-shell {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .atelier-settings-preview-rail {
        grid-column: 1 / -1;
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .atelier-settings-workspace {
        padding: 12px;
        min-height: auto;
    }

    .atelier-settings-header {
        flex-direction: column;
        align-items: stretch;
    }

    .atelier-settings-header-meta {
        justify-items: start;
        text-align: left;
    }

    .atelier-settings-shell {
        grid-template-columns: 1fr;
    }

    .atelier-settings-nav {
        position: static;
    }

    .atelier-settings-mobile-nav {
        display: block;
    }

    .atelier-settings-nav-groups {
        display: none;
    }

    .atelier-settings-preview-rail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .atelier-setting-grid {
        grid-template-columns: 1fr;
    }

    .atelier-settings-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .atelier-settings-action-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Preference-driven UI controls */
html {
    font-size: calc(16px * var(--app-ui-scale, 1));
}

#view-notes .editor-container {
    max-width: var(--notes-editor-max-width, 940px);
    margin-inline: auto;
}

#view-notes .editor {
    font-size: calc(1rem * var(--notes-editor-font-scale, 1));
}

body.pref-hide-metadata .word-count-display,
body.pref-hide-metadata #view-notes .breadcrumbs,
body.pref-hide-metadata #pageTemporaryMeta {
    display: none !important;
}

body.pref-toolbar-hidden .toolbar-wrapper {
    display: none !important;
}

body.pref-toolbar-focus-only .toolbar-wrapper {
    opacity: 0.3;
    transition: opacity var(--transition-fast);
}

body.pref-toolbar-focus-only .toolbar-wrapper:hover,
body.pref-toolbar-focus-only .toolbar-wrapper:focus-within {
    opacity: 1;
}

body.pref-touch-large .neumo-btn,
body.pref-touch-large .toolbar-btn,
body.pref-touch-large .view-tab,
body.pref-touch-large .settings-toggle {
    min-height: 44px;
}

body.pref-high-contrast {
    --surface-border: rgba(13, 21, 34, 0.24);
    --surface-border-strong: rgba(13, 21, 34, 0.36);
    --glass-border: rgba(13, 21, 34, 0.3);
}

body.pref-quiet-mode * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

body.animations-reduced * {
    transition-duration: 120ms !important;
    animation-duration: 140ms !important;
}

body[data-task-density="compact"] .task-card {
    padding: 8px 10px;
}

body[data-task-density="compact"] .task-meta {
    font-size: 0.69rem;
}

body[data-task-completion-style="fade"] .task-card.completed {
    opacity: 0.56;
}

body[data-task-completion-style="fade"] .task-card.completed .task-title,
body[data-task-completion-style="minimal"] .task-card.completed .task-title {
    text-decoration: none;
}

body[data-task-completion-style="minimal"] .task-card.completed {
    opacity: 0.72;
}

body.pref-hide-completed .today-panel-completed,
body.pref-hide-completed .task-card.completed {
    display: none !important;
}

body[data-notes-list-style="compact"] .page-item {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
}

body[data-notes-list-style="expanded"] .page-item {
    min-height: 46px;
    padding-top: 9px;
    padding-bottom: 9px;
}

body[data-dashboard-density="compact"] .today-grid {
    gap: 10px;
}

body[data-dashboard-density="spacious"] .today-grid {
    gap: 18px;
}

body[data-ui-density="compact"] .glass-card {
    padding: 10px;
}

body[data-ui-density="spacious"] .glass-card {
    padding: 16px;
}

body[data-ui-contrast="high"] {
    --surface-border: rgba(0, 0, 0, 0.34);
    --surface-border-strong: rgba(0, 0, 0, 0.44);
}

body[data-ui-contrast="soft"] {
    --surface-border: rgba(18, 28, 44, 0.1);
    --surface-border-strong: rgba(18, 28, 44, 0.16);
}

body[data-card-style="solid"] .glass-card {
    background: var(--bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body[data-card-style="minimal"] .glass-card {
    background: transparent;
    box-shadow: none;
}

body[data-corner-style="sharp"] {
    --radius: 10px;
    --radius-lg: 12px;
    --radius-pill: 14px;
    --neumo-radius: 10px;
}

body[data-corner-style="pill"] {
    --radius: 22px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --neumo-radius: 20px;
}

body[data-corner-style] .glass-card,
body[data-corner-style] .settings-card,
body[data-corner-style] .task-card,
body[data-corner-style] .business-item-card,
body[data-corner-style] .timeline-planner-block,
body[data-corner-style] .timeline-three-day-block,
body[data-corner-style] .modal-content,
body[data-corner-style] .chatbot-panel,
body[data-corner-style] .nf-select-menu {
    border-radius: var(--radius-lg) !important;
}

body[data-corner-style] .neumo-btn,
body[data-corner-style] .modal-input,
body[data-corner-style] .nf-select-trigger,
body[data-corner-style] .view-tab,
body[data-corner-style] .toolbar-btn,
body[data-corner-style] .task-action-icon,
body[data-corner-style] .settings-toggle,
body[data-corner-style] .page-item,
body[data-corner-style] .chatbot-suggestion {
    border-radius: var(--radius) !important;
}

body[data-shadow-intensity="subtle"] .glass-card {
    box-shadow: 0 8px 20px rgba(20, 24, 34, 0.08);
}

body[data-shadow-intensity="bold"] .glass-card {
    box-shadow: 0 20px 48px rgba(20, 24, 34, 0.24);
}

body[data-blur-intensity="off"] .glass-card,
body[data-blur-intensity="off"] .toolbar-wrapper {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body[data-sidebar-style="solid"] .sidebar {
    background: var(--bg-secondary) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body[data-sidebar-style="minimal"] .sidebar {
    border-right-style: dashed;
    background: transparent !important;
    box-shadow: none;
}

body[data-icon-size="small"] {
    --app-icon-scale: 0.86;
}

body[data-icon-size="medium"] {
    --app-icon-scale: 1;
}

body[data-icon-size="large"] {
    --app-icon-scale: 1.14;
}

body[data-icon-size] i.fa,
body[data-icon-size] i.fas,
body[data-icon-size] i.far,
body[data-icon-size] i.fab,
body[data-icon-size] i[class*="fa-"] {
    font-size: calc(1em * var(--app-icon-scale, 1));
}

body.pref-homework-hide-duetime .hw-meta-time,
body.pref-homework-hide-duetime .hw-task-due-wrap {
    display: none !important;
}

body[data-homework-density="compact"] .hw-course-grid {
    gap: 10px;
}

body[data-homework-density="compact"] .hw-course-panel {
    padding: 10px 12px;
}

body[data-homework-density="compact"] .hw-assignment {
    padding: 8px 10px;
}

body[data-homework-density="compact"] .hw-assignment-meta {
    gap: 6px;
    font-size: 0.7rem;
}

body.pref-homework-hide-difficulty .hw-meta-difficulty,
body.pref-homework-hide-difficulty .hw-task-control:has([data-field="difficulty"]) {
    display: none !important;
}

body.pref-no-homework-hub [data-hub-view="homework"],
body.pref-no-homework-hub .student-hub-metric:has(#studentHubHomeworkOpen) {
    display: none !important;
}

body:not(.pref-show-weak-areas) .ap-study-weak-list,
body:not(.pref-show-weak-areas) .ap-study-weak-item,
body:not(.pref-show-weak-areas) [data-ap-action="schedule-weak-review"] {
    display: none !important;
}

body.pref-business-compact .business-item-card {
    padding: 10px 12px;
}

body.pref-business-list .business-list {
    gap: 8px;
}

body.pref-notification-quiet #toast.show {
    opacity: 0.86;
}

body.pref-notification-high #toast.show {
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.32);
}

.today-panel-due.alerts-muted {
    opacity: 0.86;
}

.chatbot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 8px;
}

.chatbot-suggestion {
    border: 1px solid var(--surface-border-strong);
    border-radius: 999px;
    background: var(--surface-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.72rem;
    padding: 5px 9px;
    cursor: pointer;
}

.chatbot-suggestion:hover {
    background: var(--surface-bg-hover);
}

@media (max-width: 1100px) {
    .atelier-settings-shell {
        grid-template-columns: 1fr;
    }

    .atelier-settings-nav {
        position: static;
    }

    .atelier-settings-mobile-nav {
        display: block;
    }

    .atelier-settings-nav-list {
        display: none;
    }
}

@media (max-width: 760px) {
    .atelier-setting-grid {
        grid-template-columns: 1fr;
    }

    .atelier-setting-row {
        align-items: stretch;
        flex-direction: column;
    }
}