/* CSS Variables & Reset */
:root {
    /* Light Mode (Default) */
    --bg-primary: #f8fafc;
    /* Slate 50 */
    --bg-secondary: #ffffff;
    /* White */
    --surface: #e2e8f0;
    /* Slate 200 */
    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #64748b;
    /* Slate 500 */
    --accent: #6366f1;
    /* Indigo 500 */
    --accent-hover: #4f46e5;
    /* Indigo 600 */
    --border: #cbd5e1;
    /* Slate 300 */

    /* Navigation - Light Mode */
    --nav-bg: #ffffff;
    /* White */
    --nav-text: #1e293b;
    /* Slate 800 */
    --nav-border: #e2e8f0;
    /* Slate 200 */

    /* Cards - Light Mode */
    --card-bg: #ffffff;
    /* White */
    --card-border: #e2e8f0;
    /* Slate 200 */

    /* Inputs - Light Mode */
    --input-bg: #ffffff;
    /* White */

    /* Codex - Light Mode */
    --codex-bg: #f8fafc;
    /* Slate 50 */
    --codex-text: #334155;
    /* Slate 700 */
    --codex-toolbar-bg: #e2e8f0;
    /* Slate 200 */
    --codex-border: #cbd5e1;
    /* Slate 300 */

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body.dark-mode {
    /* Dark Mode Overrides */
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-secondary: #1e293b;
    /* Slate 800 */
    --surface: #334155;
    /* Slate 700 */
    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --border: #334155;
    /* Slate 700 */

    /* Navigation - Dark Mode */
    --nav-bg: rgba(30, 41, 59, 0.9);
    --nav-text: #f8fafc;
    --nav-border: rgba(255, 255, 255, 0.1);

    /* Cards - Dark Mode */
    --card-bg: rgba(30, 41, 59, 0.5);
    --card-border: rgba(255, 255, 255, 0.05);

    /* Inputs - Dark Mode */
    --input-bg: #0f172a;
    /* Slate 900 */

    /* Codex - Dark Mode */
    --codex-bg: #111111;
    /* Deep dark */
    --codex-text: #e0e0e0;
    /* Light gray */
    --codex-toolbar-bg: #1a1a1a;
    /* Dark gray */
    --codex-border: #333333;
    /* Dark border */
}

/* ============================================================
   Color Themes — Light
   ============================================================ */

/* Ocean — cool blue tones */
body.theme-ocean { --bg-primary:#eef4fb; --bg-secondary:#ffffff; --surface:#cddcee; --text-primary:#0c2d4a; --text-secondary:#4a7396; --accent:#2563eb; --accent-hover:#1d4ed8; --border:#b3cde3; --nav-bg:#ffffff; --nav-text:#0c2d4a; --nav-border:#cddcee; --card-bg:#ffffff; --card-border:#cddcee; --input-bg:#ffffff; --codex-bg:#eef4fb; --codex-text:#1e3a5f; --codex-toolbar-bg:#cddcee; --codex-border:#b3cde3; }

/* Forest — earthy green */
body.theme-forest { --bg-primary:#f0f7f0; --bg-secondary:#ffffff; --surface:#c8dfc8; --text-primary:#1a2e1a; --text-secondary:#4d7a4d; --accent:#16a34a; --accent-hover:#15803d; --border:#a3c9a3; --nav-bg:#ffffff; --nav-text:#1a2e1a; --nav-border:#c8dfc8; --card-bg:#ffffff; --card-border:#c8dfc8; --input-bg:#ffffff; --codex-bg:#f0f7f0; --codex-text:#2d4a2d; --codex-toolbar-bg:#c8dfc8; --codex-border:#a3c9a3; }

/* Sunset — warm amber/orange */
body.theme-sunset { --bg-primary:#fef7ed; --bg-secondary:#ffffff; --surface:#f5dfc4; --text-primary:#431a04; --text-secondary:#92600e; --accent:#d97706; --accent-hover:#b45309; --border:#e8c99b; --nav-bg:#ffffff; --nav-text:#431a04; --nav-border:#f5dfc4; --card-bg:#ffffff; --card-border:#f5dfc4; --input-bg:#ffffff; --codex-bg:#fef7ed; --codex-text:#5c3d0e; --codex-toolbar-bg:#f5dfc4; --codex-border:#e8c99b; }

/* Lavender — soft purple */
body.theme-lavender { --bg-primary:#f5f0ff; --bg-secondary:#ffffff; --surface:#ddd0f5; --text-primary:#2e1065; --text-secondary:#7c5cbf; --accent:#8b5cf6; --accent-hover:#7c3aed; --border:#c4b0e8; --nav-bg:#ffffff; --nav-text:#2e1065; --nav-border:#ddd0f5; --card-bg:#ffffff; --card-border:#ddd0f5; --input-bg:#ffffff; --codex-bg:#f5f0ff; --codex-text:#3b1f7a; --codex-toolbar-bg:#ddd0f5; --codex-border:#c4b0e8; }

/* Sand — warm neutral */
body.theme-sand { --bg-primary:#faf6f1; --bg-secondary:#ffffff; --surface:#e8ddd0; --text-primary:#3d2e1e; --text-secondary:#8b7355; --accent:#a3754e; --accent-hover:#8b5e3c; --border:#d4c4ae; --nav-bg:#ffffff; --nav-text:#3d2e1e; --nav-border:#e8ddd0; --card-bg:#ffffff; --card-border:#e8ddd0; --input-bg:#ffffff; --codex-bg:#faf6f1; --codex-text:#4a3828; --codex-toolbar-bg:#e8ddd0; --codex-border:#d4c4ae; }

/* Rose — soft pink */
body.theme-rose { --bg-primary:#fdf2f4; --bg-secondary:#ffffff; --surface:#f5d0d6; --text-primary:#4c0519; --text-secondary:#b04a5a; --accent:#e11d48; --accent-hover:#be123c; --border:#eab8c2; --nav-bg:#ffffff; --nav-text:#4c0519; --nav-border:#f5d0d6; --card-bg:#ffffff; --card-border:#f5d0d6; --input-bg:#ffffff; --codex-bg:#fdf2f4; --codex-text:#6b1a2f; --codex-toolbar-bg:#f5d0d6; --codex-border:#eab8c2; }

/* Sky — light cyan */
body.theme-sky { --bg-primary:#ecfeff; --bg-secondary:#ffffff; --surface:#c5e8ec; --text-primary:#0e3b43; --text-secondary:#3d8a95; --accent:#0891b2; --accent-hover:#0e7490; --border:#a5d5dc; --nav-bg:#ffffff; --nav-text:#0e3b43; --nav-border:#c5e8ec; --card-bg:#ffffff; --card-border:#c5e8ec; --input-bg:#ffffff; --codex-bg:#ecfeff; --codex-text:#1a4d56; --codex-toolbar-bg:#c5e8ec; --codex-border:#a5d5dc; }

/* Cream — elegant warm white */
body.theme-cream { --bg-primary:#fdfbf7; --bg-secondary:#ffffff; --surface:#ede5d8; --text-primary:#33261a; --text-secondary:#7d6b55; --accent:#78716c; --accent-hover:#57534e; --border:#d6ccbe; --nav-bg:#ffffff; --nav-text:#33261a; --nav-border:#ede5d8; --card-bg:#ffffff; --card-border:#ede5d8; --input-bg:#ffffff; --codex-bg:#fdfbf7; --codex-text:#44372b; --codex-toolbar-bg:#ede5d8; --codex-border:#d6ccbe; }

/* Mint — fresh green */
body.theme-mint { --bg-primary:#f0fdf4; --bg-secondary:#ffffff; --surface:#bbf7d0; --text-primary:#052e16; --text-secondary:#3d8b5e; --accent:#22c55e; --accent-hover:#16a34a; --border:#86efac; --nav-bg:#ffffff; --nav-text:#052e16; --nav-border:#bbf7d0; --card-bg:#ffffff; --card-border:#bbf7d0; --input-bg:#ffffff; --codex-bg:#f0fdf4; --codex-text:#14532d; --codex-toolbar-bg:#bbf7d0; --codex-border:#86efac; }

/* Peach — soft coral */
body.theme-peach { --bg-primary:#fff5f0; --bg-secondary:#ffffff; --surface:#fddcc8; --text-primary:#4a1e0a; --text-secondary:#b06040; --accent:#f97316; --accent-hover:#ea580c; --border:#f5c4a1; --nav-bg:#ffffff; --nav-text:#4a1e0a; --nav-border:#fddcc8; --card-bg:#ffffff; --card-border:#fddcc8; --input-bg:#ffffff; --codex-bg:#fff5f0; --codex-text:#6b3a1f; --codex-toolbar-bg:#fddcc8; --codex-border:#f5c4a1; }

/* Fog — cool gray */
body.theme-fog { --bg-primary:#f4f6f8; --bg-secondary:#ffffff; --surface:#d8dee6; --text-primary:#1a2332; --text-secondary:#6b7d94; --accent:#6b7280; --accent-hover:#4b5563; --border:#bfc8d4; --nav-bg:#ffffff; --nav-text:#1a2332; --nav-border:#d8dee6; --card-bg:#ffffff; --card-border:#d8dee6; --input-bg:#ffffff; --codex-bg:#f4f6f8; --codex-text:#2d3e52; --codex-toolbar-bg:#d8dee6; --codex-border:#bfc8d4; }

/* Iris — deep indigo-blue */
body.theme-iris { --bg-primary:#eef0ff; --bg-secondary:#ffffff; --surface:#d0d5f5; --text-primary:#1e1b4b; --text-secondary:#6366a8; --accent:#4f46e5; --accent-hover:#4338ca; --border:#b8bee8; --nav-bg:#ffffff; --nav-text:#1e1b4b; --nav-border:#d0d5f5; --card-bg:#ffffff; --card-border:#d0d5f5; --input-bg:#ffffff; --codex-bg:#eef0ff; --codex-text:#312e81; --codex-toolbar-bg:#d0d5f5; --codex-border:#b8bee8; }

/* Sage — muted green-gray */
body.theme-sage { --bg-primary:#f0f4f0; --bg-secondary:#ffffff; --surface:#d4ddd4; --text-primary:#1a2e1a; --text-secondary:#5a7a5a; --accent:#4a7c59; --accent-hover:#3a6a49; --border:#bccabc; --nav-bg:#ffffff; --nav-text:#1a2e1a; --nav-border:#d4ddd4; --card-bg:#ffffff; --card-border:#d4ddd4; --input-bg:#ffffff; --codex-bg:#f0f4f0; --codex-text:#2a3e2a; --codex-toolbar-bg:#d4ddd4; --codex-border:#bccabc; }

/* Dusk — warm pink-mauve */
body.theme-dusk { --bg-primary:#f8f0f4; --bg-secondary:#ffffff; --surface:#e8d0dd; --text-primary:#3a1a2a; --text-secondary:#9a6080; --accent:#b05078; --accent-hover:#983e66; --border:#d8b8c8; --nav-bg:#ffffff; --nav-text:#3a1a2a; --nav-border:#e8d0dd; --card-bg:#ffffff; --card-border:#e8d0dd; --input-bg:#ffffff; --codex-bg:#f8f0f4; --codex-text:#4a2a3a; --codex-toolbar-bg:#e8d0dd; --codex-border:#d8b8c8; }

/* Linen — warm neutral beige */
body.theme-linen { --bg-primary:#f5f0e8; --bg-secondary:#faf8f4; --surface:#e0d8c8; --text-primary:#2e2820; --text-secondary:#8a7e6e; --accent:#8b7355; --accent-hover:#7a6248; --border:#ccc4b4; --nav-bg:#faf8f4; --nav-text:#2e2820; --nav-border:#e0d8c8; --card-bg:#faf8f4; --card-border:#e0d8c8; --input-bg:#faf8f4; --codex-bg:#f5f0e8; --codex-text:#3e3830; --codex-toolbar-bg:#e0d8c8; --codex-border:#ccc4b4; }

/* Glacier — cool icy blue */
body.theme-glacier { --bg-primary:#edf5f8; --bg-secondary:#ffffff; --surface:#c8dde8; --text-primary:#152838; --text-secondary:#5080a0; --accent:#2e7da8; --accent-hover:#1e6d98; --border:#b0cad8; --nav-bg:#ffffff; --nav-text:#152838; --nav-border:#c8dde8; --card-bg:#ffffff; --card-border:#c8dde8; --input-bg:#ffffff; --codex-bg:#edf5f8; --codex-text:#1e3848; --codex-toolbar-bg:#c8dde8; --codex-border:#b0cad8; }

/* ============================================================
   Color Themes — Dark
   ============================================================ */

/* Midnight — deep blue */
body.theme-midnight { --bg-primary:#0a1628; --bg-secondary:#111d33; --surface:#1e3050; --text-primary:#e0e8f0; --text-secondary:#7a9cc0; --accent:#3b82f6; --accent-hover:#2563eb; --border:#1e3050; --nav-bg:rgba(17,29,51,0.95); --nav-text:#e0e8f0; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(17,29,51,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#0a1628; --codex-bg:#080e1a; --codex-text:#c8d8e8; --codex-toolbar-bg:#111d33; --codex-border:#1e3050; }

/* Ember — dark warm */
body.theme-ember { --bg-primary:#1a0e0a; --bg-secondary:#261510; --surface:#3d2218; --text-primary:#f0ddd5; --text-secondary:#b0806a; --accent:#ef6c00; --accent-hover:#e65100; --border:#3d2218; --nav-bg:rgba(38,21,16,0.95); --nav-text:#f0ddd5; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(38,21,16,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#1a0e0a; --codex-bg:#120a07; --codex-text:#e0c8b8; --codex-toolbar-bg:#261510; --codex-border:#3d2218; }

/* Slate — cool gray dark */
body.theme-slate { --bg-primary:#15191e; --bg-secondary:#1d2228; --surface:#2a3038; --text-primary:#d8dde3; --text-secondary:#8899a8; --accent:#64748b; --accent-hover:#475569; --border:#2a3038; --nav-bg:rgba(29,34,40,0.95); --nav-text:#d8dde3; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(29,34,40,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#15191e; --codex-bg:#0e1115; --codex-text:#c0c8d0; --codex-toolbar-bg:#1d2228; --codex-border:#2a3038; }

/* Plum — dark purple */
body.theme-plum { --bg-primary:#150e1e; --bg-secondary:#1e1530; --surface:#2e2045; --text-primary:#e8ddf0; --text-secondary:#9a7abf; --accent:#a855f7; --accent-hover:#9333ea; --border:#2e2045; --nav-bg:rgba(30,21,48,0.95); --nav-text:#e8ddf0; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(30,21,48,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#150e1e; --codex-bg:#0e0815; --codex-text:#d0c0e0; --codex-toolbar-bg:#1e1530; --codex-border:#2e2045; }

/* Pine — dark green */
body.theme-pine { --bg-primary:#0a1a10; --bg-secondary:#10261a; --surface:#1a3d28; --text-primary:#d5f0dd; --text-secondary:#6aac80; --accent:#22c55e; --accent-hover:#16a34a; --border:#1a3d28; --nav-bg:rgba(16,38,26,0.95); --nav-text:#d5f0dd; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(16,38,26,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#0a1a10; --codex-bg:#06120a; --codex-text:#b8e0c5; --codex-toolbar-bg:#10261a; --codex-border:#1a3d28; }

/* Aurora — teal-green dark */
body.theme-aurora { --bg-primary:#0a1a1a; --bg-secondary:#102828; --surface:#183a3a; --text-primary:#d0f0f0; --text-secondary:#5aadad; --accent:#14b8a6; --accent-hover:#0d9488; --border:#183a3a; --nav-bg:rgba(16,40,40,0.95); --nav-text:#d0f0f0; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(16,40,40,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#0a1a1a; --codex-bg:#061212; --codex-text:#b0e0e0; --codex-toolbar-bg:#102828; --codex-border:#183a3a; }

/* Cobalt — rich blue dark */
body.theme-cobalt { --bg-primary:#0a0f20; --bg-secondary:#101830; --surface:#1a2848; --text-primary:#d0d8f0; --text-secondary:#6080c0; --accent:#6366f1; --accent-hover:#4f46e5; --border:#1a2848; --nav-bg:rgba(16,24,48,0.95); --nav-text:#d0d8f0; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(16,24,48,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#0a0f20; --codex-bg:#060a18; --codex-text:#b8c0e0; --codex-toolbar-bg:#101830; --codex-border:#1a2848; }

/* Charcoal — pure dark minimal */
body.theme-charcoal { --bg-primary:#141414; --bg-secondary:#1c1c1c; --surface:#2a2a2a; --text-primary:#e0e0e0; --text-secondary:#888888; --accent:#a0a0a0; --accent-hover:#808080; --border:#2a2a2a; --nav-bg:rgba(28,28,28,0.95); --nav-text:#e0e0e0; --nav-border:rgba(255,255,255,0.06); --card-bg:rgba(28,28,28,0.5); --card-border:rgba(255,255,255,0.04); --input-bg:#141414; --codex-bg:#0e0e0e; --codex-text:#c8c8c8; --codex-toolbar-bg:#1c1c1c; --codex-border:#2a2a2a; }

/* Mocha — warm brown dark */
body.theme-mocha { --bg-primary:#1a140e; --bg-secondary:#261e16; --surface:#3a2e22; --text-primary:#f0e4d8; --text-secondary:#a8907a; --accent:#c08050; --accent-hover:#a06840; --border:#3a2e22; --nav-bg:rgba(38,30,22,0.95); --nav-text:#f0e4d8; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(38,30,22,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#1a140e; --codex-bg:#120e08; --codex-text:#e0d0c0; --codex-toolbar-bg:#261e16; --codex-border:#3a2e22; }

/* Steel — blue-gray dark */
body.theme-steel { --bg-primary:#121820; --bg-secondary:#1a2230; --surface:#253040; --text-primary:#d5dde8; --text-secondary:#7898b8; --accent:#5b8abf; --accent-hover:#4a78a8; --border:#253040; --nav-bg:rgba(26,34,48,0.95); --nav-text:#d5dde8; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(26,34,48,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#121820; --codex-bg:#0c1018; --codex-text:#c0cce0; --codex-toolbar-bg:#1a2230; --codex-border:#253040; }

/* Obsidian — very dark with subtle purple */
body.theme-obsidian { --bg-primary:#0e0c14; --bg-secondary:#161420; --surface:#221e30; --text-primary:#ddd8e8; --text-secondary:#8878a8; --accent:#7c6aad; --accent-hover:#6b5a98; --border:#221e30; --nav-bg:rgba(22,20,32,0.95); --nav-text:#ddd8e8; --nav-border:rgba(255,255,255,0.06); --card-bg:rgba(22,20,32,0.5); --card-border:rgba(255,255,255,0.04); --input-bg:#0e0c14; --codex-bg:#08060e; --codex-text:#c8c0d8; --codex-toolbar-bg:#161420; --codex-border:#221e30; }

/* Shadow — near-black */
body.theme-shadow { --bg-primary:#0c0c0c; --bg-secondary:#141414; --surface:#222222; --text-primary:#d8d8d8; --text-secondary:#707070; --accent:#808080; --accent-hover:#606060; --border:#222222; --nav-bg:rgba(20,20,20,0.95); --nav-text:#d8d8d8; --nav-border:rgba(255,255,255,0.05); --card-bg:rgba(20,20,20,0.5); --card-border:rgba(255,255,255,0.03); --input-bg:#0c0c0c; --codex-bg:#080808; --codex-text:#c0c0c0; --codex-toolbar-bg:#141414; --codex-border:#222222; }

/* Crimson — deep red dark */
body.theme-crimson { --bg-primary:#1a0a0a; --bg-secondary:#241010; --surface:#3a1818; --text-primary:#f0d8d8; --text-secondary:#b06060; --accent:#dc2626; --accent-hover:#b91c1c; --border:#3a1818; --nav-bg:rgba(36,16,16,0.95); --nav-text:#f0d8d8; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(36,16,16,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#1a0a0a; --codex-bg:#120707; --codex-text:#e0c0c0; --codex-toolbar-bg:#241010; --codex-border:#3a1818; }

/* Evergreen — deep olive-green */
body.theme-evergreen { --bg-primary:#0e1608; --bg-secondary:#181f10; --surface:#2a3518; --text-primary:#dde8cc; --text-secondary:#8a9a60; --accent:#6b8f2a; --accent-hover:#5a7a20; --border:#2a3518; --nav-bg:rgba(24,31,16,0.95); --nav-text:#dde8cc; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(24,31,16,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#0e1608; --codex-bg:#0a1005; --codex-text:#c8d8b0; --codex-toolbar-bg:#181f10; --codex-border:#2a3518; }

/* Copper — reddish amber dark */
body.theme-copper { --bg-primary:#1c0e08; --bg-secondary:#28140c; --surface:#401e12; --text-primary:#f0d8c8; --text-secondary:#c07050; --accent:#d4652a; --accent-hover:#b85520; --border:#401e12; --nav-bg:rgba(40,20,12,0.95); --nav-text:#f0d8c8; --nav-border:rgba(255,255,255,0.08); --card-bg:rgba(40,20,12,0.5); --card-border:rgba(255,255,255,0.05); --input-bg:#1c0e08; --codex-bg:#140a05; --codex-text:#e0c4b0; --codex-toolbar-bg:#28140c; --codex-border:#401e12; }

/* Void — deep space navy */
body.theme-void { --bg-primary:#080810; --bg-secondary:#0e0e1a; --surface:#1a1a30; --text-primary:#d0d0e8; --text-secondary:#6868a0; --accent:#5858c8; --accent-hover:#4848b0; --border:#1a1a30; --nav-bg:rgba(14,14,26,0.95); --nav-text:#d0d0e8; --nav-border:rgba(255,255,255,0.06); --card-bg:rgba(14,14,26,0.5); --card-border:rgba(255,255,255,0.04); --input-bg:#080810; --codex-bg:#050508; --codex-text:#b8b8d0; --codex-toolbar-bg:#0e0e1a; --codex-border:#1a1a30; }

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

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
.logo {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1 {
    font-size: 3.3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

/* Utilities */
.text-accent {
    color: var(--accent);
}

.logo-i {
    position: relative;
    font-style: normal;
}

/* Three short ticks emanating from the dot of the 'i' in Habits.
   Uses mask-image so the fill color follows var(--accent). */
.logo-i::before {
    content: '';
    position: absolute;
    top: 0.06em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.4em;
    height: 0.17em;
    pointer-events: none;
    background-color: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cline x1='5' y1='5' x2='5' y2='2.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='3' y1='5' x2='1.3' y2='3.3' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='7' y1='5' x2='8.7' y2='3.3' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cline x1='5' y1='5' x2='5' y2='2.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='3' y1='5' x2='1.3' y2='3.3' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='7' y1='5' x2='8.7' y2='3.3' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.text-gradient {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

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

.btn-secondary {
    background-color: transparent;
    border-color: var(--surface);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--surface);
}

.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Layout */
.landing-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    position: sticky;
    top: 0;
    background-color: var(--nav-bg);
    backdrop-filter: blur(10px);
    z-index: 100;
    border-bottom: 1px solid var(--nav-border);
    transition: background-color 0.3s, border-color 0.3s;
}

.logo {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--nav-text);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--nav-text);
    padding: 0.35rem 0.65rem !important;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover {
    color: var(--accent);
    background-color: var(--surface);
}

/* Reusable link styled like nav-link hover */
.action-link {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s;
    background: none;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
}

.action-link:hover {
    color: var(--accent);
    background-color: var(--surface);
}

.action-link-on {
    background-color: var(--surface);
}

.action-link-on:hover {
    color: var(--accent);
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 6rem 5%;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-subtitle {
    font-size: 1.25rem;
    max-width: 500px;
    margin: 1.5rem 0 2.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* Hero Visual (App Window Mockup) */
.app-window {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    height: 400px;
    position: relative;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.app-window:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.window-header {
    background: var(--bg-primary);
    padding: 12px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red {
    background: #ef4444;
}

.dot.yellow {
    background: #eab308;
}

.dot.green {
    background: #22c55e;
}

.window-body {
    display: flex;
    height: 100%;
}

.sidebar {
    width: 20%;
    border-right: 1px solid var(--border);
    background: rgba(30, 41, 59, 0.5);
}

.content {
    flex: 1;
    padding: 2rem;
}

.line {
    height: 8px;
    background: var(--surface);
    border-radius: 4px;
    margin-bottom: 12px;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-90 {
    width: 90%;
}

.w-60 {
    width: 60%;
}

/* Features */
.features-section {
    padding: 5rem 5%;
    background: var(--bg-primary);
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.feature-card {
    background: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: transform 0.2s;
    text-align: left;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.icon-box {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

/* CTA & Footer */
.cta-section {
    padding: 6rem 5%;
    text-align: center;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
}

.footer {
    padding: 2rem 5%;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Auth Pages */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--auth-bg);
}

.auth-card {
    background: var(--bg-secondary);
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.btn-block {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- Dashboard Header (Consolidated) --- */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    margin-bottom: 0;
    transition: background 0.3s, color 0.3s;
}

.nav-menu {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.user-welcome {
    color: var(--nav-text);
    font-weight: 500;
}

.btn-nav-outline {
    color: var(--nav-text);
    border: 1px solid var(--text-secondary);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-nav-outline:hover {
    background-color: var(--surface);
    color: var(--text-primary);
}

/* Dropdown specific adjustments if needed */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background-color: var(--bg-secondary);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Invisible bridge for hover */
.dropdown-content::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    /* Cover slightly more than margin */
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: var(--text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background-color: var(--surface);
}

/* --- Consolidated Card Styles --- */
.goal-card,
.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 0.65rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, border-color 0.2s;
    color: var(--text-primary);
}

/* Writing Card Specifics */
.writing-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, border-color 0.2s;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.writing-card:hover {
    border-color: var(--accent);
}

.writing-card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.writing-card .date {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Goal Card Specifics */
.goal-card h2 {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 1rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.4em;
    color: var(--text-primary);
}

/* Profile Card Specifics */
.profile-card {
    max-width: 720px;
}

/* ==============================
   Auth Pages (shared across landing, login, pricing, features)
   ============================== */

.error-msg {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    padding: 0.75rem;
    border: 1px solid #ef4444;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.oauth-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--text-secondary);
}

.oauth-separator::before,
.oauth-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--oauth-border);
}

.oauth-separator span {
    padding: 0 10px;
    font-size: 0.8rem;
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Auth form overrides for modal contexts */
.auth-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
}

/* Logo link (no underline, inherits color) */
.logo-link {
    text-decoration: none;
    color: inherit;
}

/* Subtitle shown next to logo in navbar */
.nav-subtitle {
    margin-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ==============================
   Modal Overlay & Components
   ============================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    transition: background 0.15s, color 0.15s;
}

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

.auth-card-modal {
    position: relative;
    max-width: 400px;
}

.auth-card-scrollable {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.auth-card-wide {
    position: relative;
    max-width: 500px;
}

.auth-card-wider {
    position: relative;
    max-width: 600px;
}

/* Scrollable modal body text */
.modal-body {
    color: var(--text-secondary);
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.6;
}

.modal-body-lg {
    color: var(--text-secondary);
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.6;
    font-size: 0.9rem;
    padding-right: 0.5rem;
}

/* Actions row at bottom of modal (e.g., Close link) */
.modal-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.modal-close-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

/* ==============================
   Footer Links
   ============================== */

.footer-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--accent);
}

/* ==============================
   Contact Form
   ============================== */

.contact-textarea {
    width: 100%;
    height: 150px;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    font-family: inherit;
    resize: vertical;
}

.contact-send-wrapper {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

/* ==============================
   Notice Modal
   ============================== */

.notice-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    position: relative;
}

.notice-title {
    margin-top: 0;
    color: var(--text-primary);
}

.notice-msg {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ==============================
   Magic Link Form
   ============================== */

.magic-link-form {
    display: flex;
    gap: 10px;
}

.magic-link-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.btn-nowrap {
    white-space: nowrap;
}

/* Auth switch text (e.g., "Already have an account?") */
.auth-switch-text {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ==============================
   Pricing Page
   ============================== */

.pricing-hero {
    min-height: auto;
    padding-top: 3.5rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing-hero-content {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.pricing-hero-subtitle {
    margin: 1.5rem auto 2.5rem;
}

.pricing-cta-btn {
    margin-top: 1rem;
}

.pricing-section {
    padding-top: 0;
}

.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.pricing-card {
    display: flex;
    flex-direction: column;
}

.pricing-card-accent {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--accent);
}

.pricing-tier-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.pricing-period {
    font-size: 1rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.pricing-list {
    text-align: left;
    padding-left: 1.5rem;
    margin-bottom: 0;
    flex-grow: 1;
    line-height: 1.6;
}

.pricing-list li {
    margin-bottom: 0.5rem;
}

/* ==============================
   Features Page
   ============================== */

.features-top-section {
    padding-top: 3.5rem;
}

.features-detail-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 3rem auto 0;
    text-align: left;
}

.feature-lead {
    margin-bottom: 0.5rem;
}

/* ============================================================
   Settings Page
   ============================================================ */

.dashboard-container {
    padding: 0.5rem 2rem 2rem;
    max-width: 680px;
    margin: 0 auto;
}

.page-title-center {
    text-align: center;
    margin-top: -3.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.profile-card h2 {
    margin-top: 0;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.profile-card h3 {
    color: var(--text-primary);
    margin-top: 0;
}

.section-heading-lg {
    margin-bottom: 1.5rem;
}

.section-block {
    margin-bottom: 2rem;
}

.dark-mode-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.dark-mode-toggle input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

.dark-mode-toggle label {
    margin-bottom: 0;
    cursor: pointer;
    color: var(--text-primary);
}

.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.theme-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    position: relative;
}

.theme-swatch:hover {
    transform: scale(1.15);
    border-color: var(--text-primary);
}

.theme-swatch-active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

.theme-swatch[data-tooltip]::after {
    bottom: 100%;
    margin-bottom: 6px;
}

.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
}

.form-select:focus {
    border-color: var(--accent);
    outline: none;
}

.dict-word-list {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1rem;
    background: var(--bg-primary);
}

.dict-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dict-add-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
}

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

.dict-add-btn {
    padding: 0.5rem 1rem;
    background: var(--surface);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.dict-add-btn:hover {
    background: var(--accent);
    color: white;
}

.twofa-actions {
    display: flex;
    gap: 2rem;
}

.verify-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
    align-items: center;
    display: inline-flex;
    padding: 0 0.5rem;
}

.verify-link:hover {
    color: var(--accent-hover);
}

.qr-code-container {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    width: fit-content;
    text-align: center;
}

.qr-code-container p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.qr-code-container img {
    display: block;
    margin: 0 auto;
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0 0.75rem;
}

.plan-info {
    margin: 0 0 1.25rem;
}

.plan-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.plan-tier {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.plan-actions {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.delete-account-link {
    color: #ef4444;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}

.delete-account-link:hover {
    color: #dc2626;
}

/* Confirmation modal heading in red */
.modal-heading-danger {
    margin-top: 0;
    color: #ef4444;
}

.modal-text {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.modal-text-lg {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.verify-code-input {
    width: calc(100% - 1.5rem);
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.2rem;
    margin-bottom: 1.5rem;
}

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

/* Compare Tiers Modal */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.tier-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
}

.tier-card-accent {
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 1.5rem;
}

.tier-card h4,
.tier-card-accent h4 {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.tier-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.tier-price-detail {
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.tier-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.tier-features {
    padding-left: 1.25rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.9rem;
}

.modal-box-secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
}

.tiers-modal-body {
    max-width: 960px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.tier-card,
.tier-card-accent {
    background: var(--bg-primary);
}

.tiers-modal-footer {
    text-align: center;
    margin-top: 1.5rem;
}

/* Farewell Modal */
.farewell-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.farewell-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 3rem;
    border-radius: 20px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalIn 0.4s ease-out;
}

.farewell-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.farewell-heading {
    margin-top: 0;
    color: var(--accent);
    font-size: 2rem;
    margin-bottom: 1.1rem;
}

.farewell-text {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

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

/* Nav link compact (no padding override for dashboard nav) */
.nav-link-compact {
    padding: 0.35rem 0.5rem;
    display: inline-flex;
    align-items: center;
}

.nav-link-compact .nav-icon {
    display: block;
}

/* Nav link active state */
.nav-link-active {
    color: var(--accent);
    background-color: var(--surface);
}

/* Form submit link */
.form-submit-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.form-submit-link:hover {
    color: var(--accent-hover);
}

.form-actions-right {
    display: flex;
    justify-content: flex-end;
}

/* Dropdown button reset (support page nav) */
.dropdown-btn-reset {
    padding: 0;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-family: inherit;
}

/* ============================================================
   Support Page
   ============================================================ */

.support-container {
    padding: 2.5rem 2rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.support-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.support-card h3 {
    margin-top: 0;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.faq-section {
    margin-bottom: 3rem;
}

.faq-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.faq-question {
    font-weight: bold;
    color: var(--text-primary);
    padding: 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    user-select: none;
    transition: background 0.2s;
}

.faq-question:hover {
    background: var(--surface);
}

.faq-chevron {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

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

.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    outline: none;
}

/* ============================================================
   2FA Page
   ============================================================ */

.auth-subtitle-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* ============================================================
   Shared Page Styles (Goals & Notifications)
   ============================================================ */

.dashboard-container-wide {
    max-width: 1200px;
    padding: 0.25rem 1rem 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
}

.page-header {
    margin-bottom: 2rem;
}

.page-subtext {
    color: var(--text-secondary);
    margin-top: 0;
}

/* Page title bar: centered heading with action on the right */
.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.page-title-bar h2 {
    font-size: 1.8rem;
    margin: 0;
}

.page-title-bar .page-action {
    position: absolute;
    right: 0;
}

.page-top-action {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Form labels and inputs for goals/notification pages */
.page-label {
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.2s;
}

.page-label:hover {
    color: var(--accent);
}

.page-checkbox,
.page-radio {
    margin-right: 12px;
    accent-color: var(--accent);
    transform: scale(1.1);
}

/* Days List Flex Column */
.days-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* ============================================================
   Modal Content & Components (Goals & Notifications)
   ============================================================ */

.modal-content {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-content-wide {
    max-width: 525px;
}

.modal-content-groups {
    max-width: 750px;
}

.modal-content-groups .modal-header h2 {
    font-size: 1.15rem;
}

.modal-content-groups .meeting-row {
    flex-wrap: wrap;
}

.modal-content-groups .meeting-row-date {
    width: 170px;
}

.modal-content-groups .meeting-row-time {
    width: 130px;
}

.modal-content-narrow {
    max-width: 400px;
    text-align: center;
}

.modal-content-narrow h3 {
    margin-top: 0;
    color: var(--text-primary);
}

.modal-content-narrow p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    margin: 0;
}

.modal-close {
    cursor: pointer;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
}

/* Confirmation dialog (delete modals) */
.modal-confirm {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    text-align: center;
}

.modal-confirm h3 {
    margin-top: 0;
    color: var(--text-primary);
}

.modal-confirm p {
    color: var(--text-secondary);
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Form control for modal inputs/selects */
.form-control {
    width: 100%;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 4px;
}

/* Override form-group inside modal-content for tighter spacing */
.modal-content .form-group {
    margin-bottom: 1rem;
}

.modal-content .form-group label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Modal form action rows (Cancel / Save links at bottom) */
.modal-form-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.modal-form-actions-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Validation error text */
.validation-error {
    color: #ef4444;
    font-size: 0.85rem;
    display: none;
    margin-right: auto;
}

/* ============================================================
   Button Variants (Goals & Notifications)
   ============================================================ */

.btn-danger {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-cancel {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel:hover {
    background-color: var(--surface);
}

.btn-delete-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #ef4444;
    font-size: 1.1rem;
}

/* ============================================================
   Goal & Notification List Items
   ============================================================ */

/* Goal cards */
.goal-card {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s;
    gap: 0.75rem;
}

.goal-card:hover {
    border-color: var(--accent);
}

.goal-card-cb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.goal-card-cb:hover,
.group-card-cb:hover {
    background-color: var(--surface);
}

.goal-card-body {
    flex: 1;
    min-width: 0;
}

.goal-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.goal-card-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.goal-card-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.goal-card-date {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.goal-card-progress {
    margin-top: 0.4rem;
}

.goal-card-stats {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.goal-card-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.goal-status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    background: var(--surface);
    color: var(--text-primary);
}

/* ============================================================
   Goals Page
   ============================================================ */

/* Row of two form fields side-by-side */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Target input row */
.target-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.target-input-row .form-control {
    flex: 1;
    min-width: 0;
}

.target-slash {
    color: var(--text-secondary);
}

/* Progress group separator */
.progress-group-separator {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

/* Goal delete link */
.goal-delete-link {
    color: #ef4444;
    text-decoration: none;
    font-size: 0.85rem;
}

.goal-star-badge {
    color: #FFD700;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

/* Goal meta text (dates, timestamps, progress) */
.goal-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.goal-timestamps {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.goal-progress {
    margin-top: 0.6rem;
}

.goal-progress-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.goal-progress-pct {
    color: var(--accent);
    font-weight: 600;
}

.goal-progress-bar {
    width: 50%;
    background: var(--border);
    border-radius: 4px;
    height: 6px;
}

.goal-progress-fill {
    background: var(--accent);
    border-radius: 4px;
    height: 6px;
}

.goal-progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

/* ============================================================
   Achievements Page
   ============================================================ */

.ach-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ach-category {
    margin-bottom: 2rem;
}

.ach-category-title {
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.ach-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 0.75rem;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.ach-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    border-color: var(--accent);
}

.ach-locked {
    opacity: 0.35;
    filter: grayscale(1);
}

.ach-locked:hover {
    opacity: 0.55;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: var(--border);
}

.ach-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.ach-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.ach-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.ach-date {
    font-size: 0.68rem;
    color: var(--accent);
    margin-top: 0.4rem;
    font-weight: 500;
}

/* Achievement toast notification */
.ach-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--surface);
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: ach-toast-in 0.4s ease-out;
    cursor: pointer;
    max-width: 320px;
}

.ach-toast-icon {
    font-size: 2rem;
    line-height: 1;
}

.ach-toast-body {
    flex: 1;
}

.ach-toast-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFD700;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.ach-toast-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

@keyframes ach-toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ach-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(20px) scale(0.95); }
}

/* ============================================================
   Notifications Page
   ============================================================ */

/* Notification preference section headers */
.notif-prefs-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.notif-prefs-header h3 {
    margin: 0;
}

.notif-section-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.notif-section-subtitle {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
    color: var(--text-secondary);
}

.notif-section-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.notif-section-intro {
    color: var(--text-secondary);
    line-height: 1.6;
}

.notif-section-intro-spaced {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 1rem;
}

.notif-section-cta {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 1.5rem;
}

.notif-genre-heading {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.notif-genre-heading-spaced {
    font-weight: bold;
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.notif-checkbox-group {
    margin-top: 0.5rem;
}

.notif-topic-spacer {
    margin-top: 2rem;
}

.notif-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2rem 0 1.5rem;
}

/* Notifications page — card layout */
.notif-card {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s;
}

.notif-card:hover {
    border-color: var(--accent);
}

.notif-card-cb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
    flex-shrink: 0;
}
.notif-card-cb:hover {
    background-color: var(--surface);
}
.notif-select-cb {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.notif-card-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary));
}

.notif-card-info h3 {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.notif-card-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.notif-card-status {
    flex-shrink: 0;
    padding-left: 1rem;
}

/* Notifications page — legacy two-column layout */
.notif-page {
    max-width: none;
}

.notif-sidebar {
    width: 45%;
    flex-shrink: 0;
    overflow-y: auto;
    padding-left: 1.5rem;
}

.notif-new-btn {
    display: block;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.notif-sidebar-section {
    padding: 0;
}

.notif-sidebar-heading {
    padding: 0.75rem 1.25rem 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.notif-sidebar-history {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0;
}

/* Collapsible history section in Details pane */
.notif-history-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0 1rem;
}

.notif-history-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.notif-history-toggle:hover {
    color: var(--text-primary);
}

.notif-history-chevron {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.notif-history-chevron.open {
    transform: rotate(90deg);
}

.notif-history-list {
    margin-top: 0.75rem;
}

.notif-history-record {
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-history-date {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.notif-sidebar-item {
    display: block;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.15s;
}

.notif-sidebar-item:hover {
    background: var(--surface);
}

.notif-sidebar-item-active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-left-color: var(--accent);
}

.notif-sidebar-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-sidebar-item-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-sidebar-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

.notif-status-active {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
    border: 1px solid rgba(34,197,94,0.3);
}

.notif-status-paused {
    background: rgba(245,158,11,0.12);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.3);
}

.notif-status-new {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.3);
}

.notif-empty-list {
    padding: 0.5rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.notif-content {
    width: 55%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 0;
}

.notif-content > #notifDetailsPanel {
    flex: 1;
}

.notif-content > #notifPrefsPanel {
    flex: 1;
}

.notif-content > .writings-footer {
    flex-shrink: 0;
    margin-top: auto;
    margin-right: -2rem;
    padding-right: 2rem;
}

.notif-detail-empty {
    color: var(--text-secondary);
    padding: 2rem 0;
}


/* Notification modal day checkboxes */
.notif-day-label {
    display: inline-flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
    white-space: nowrap;
}

.notif-days-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.notif-day-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.5rem;
}

.notif-every-day-wrap {
    margin-bottom: 0.5rem;
    text-align: left;
}

.notif-days-error {
    color: #ef4444;
    font-size: 0.85rem;
    display: none;
    margin-left: 1rem;
}

/* Time selectors */
.time-select-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.time-select {
    width: 80px;
}

/* Tier upgrade message */
.tier-message {
    color: var(--accent);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: none;
}

/* Hidden form utility */
.hidden-form {
    display: none;
}

/* 2FA status label */
.twofa-status {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Modal actions with top spacing */
.modal-actions-spaced {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ============================================================
   Groups Page
   ============================================================ */

textarea.form-control {
    resize: vertical;
}

.form-hint {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin: 0.4rem 0 0;
}

.form-label-optional {
    color: var(--text-secondary);
    font-weight: normal;
    font-size: 0.85em;
}

.group-list-item {
    background: var(--bg-secondary);
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
}

.search-group-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    border: 2px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}

.search-group-item:hover {
    border-color: var(--accent);
}

.search-group-item.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
}

.groups-section-heading {
    margin-bottom: 1rem;
}

.groups-section-list {
    margin-bottom: 2rem;
}

.group-search-bar {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.group-search-input {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    width: 240px;
}

.group-search-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.group-search-active {
    display: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.group-search-result-msg {
    display: none;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.group-card-body {
    min-width: 0;
    flex: 1;
}

.group-card-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.group-card-stats-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.group-card-name {
    color: var(--text-primary);
}

.group-card-badge {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    font-weight: 500;
}

.group-card-badge-private {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    font-weight: 500;
}

.group-meeting-times {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.group-card-description {
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-card-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-shrink: 0;
}

.group-card-btn {
    background: var(--surface);
    border: none;
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.group-card-btn-meeting {
    background: var(--surface);
    border: none;
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.group-card-btn-join {
    background: var(--accent);
    border: none;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}

.group-card-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
}

.group-card-icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--surface);
}

.group-card-icon-btn[data-tooltip]::after {
    bottom: 100%;
    margin-bottom: 6px;
}

.group-owner-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.18);
    color: #b45309;
    border: 1px solid rgba(251, 191, 36, 0.35);
    white-space: nowrap;
}

.dark-mode .group-owner-badge {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.group-member-counts {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.group-meeting-count-active {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.wc-comment-actions {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.wc-comment:hover .wc-comment-actions {
    opacity: 1;
}

.wc-comment-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.2rem;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.wc-comment-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.wc-save-comment-btn {
    margin-left: 0.5rem;
    align-self: flex-end;
}

.group-card-form {
    margin: 0;
}

.group-join-btn-bar {
    margin-bottom: 1rem;
}

.group-join-selected-btn {
    background: var(--surface);
    border: none;
    color: var(--text-primary);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.group-new-btn {
    position: absolute;
    right: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.group-error-msg {
    margin-bottom: 1rem;
}

.group-empty-text {
    color: var(--text-secondary);
}

.meeting-add-link {
    color: var(--accent);
    font-size: 0.88rem;
    text-decoration: none;
}

.meeting-tz-row {
    display: none;
    margin-top: 0.75rem;
}

.meeting-tz-label {
    font-size: 0.85rem;
}

.meeting-tz-select {
    margin-top: 0.25rem;
}

.meeting-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.meeting-row-date {
    flex: 0 0 auto;
    width: 175px;
}

.meeting-row-time {
    flex: 0 0 auto;
    width: 165px;
}

.meeting-row-remove {
    color: var(--text-secondary);
    font-size: 1.3rem;
    text-decoration: none;
    padding: 0 0.25rem;
    line-height: 1;
}

/* Modal link helpers for cancel/danger/accent */
.modal-cancel-link {
    color: var(--text-secondary);
    text-decoration: none;
}

.modal-danger-link {
    color: #ef4444;
    font-weight: 500;
    text-decoration: none;
}

.modal-accent-link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.modal-body-text {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.modal-body-text strong {
    color: var(--text-primary);
}

/* ============================================================
   Group Meeting Page
   ============================================================ */

.meeting-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.meeting-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.meeting-group-name {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.meeting-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.18);
    color: #b45309;
    border: 1px solid rgba(251, 191, 36, 0.35);
    white-space: nowrap;
}

.dark-mode .meeting-badge {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.close-meeting-btn {
    margin-left: auto;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.close-meeting-btn:hover {
    background-color: var(--surface);
    color: var(--accent);
}

/* Sticky menu when a writing is open */
.meeting-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Sticky top when a writing is open */
#meetingTop.sticky {
    position: sticky;
    z-index: 40;
    background: var(--bg-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin: -2rem -2rem 0;
    padding: 1rem 2rem 0.5rem;
}

/* Detail bar (title + toolbar) */
.meeting-detail-info {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.meeting-detail-info strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.meeting-detail-stats {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.meeting-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}

.meeting-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.meeting-toolbar #meetingSearchNav {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Detail mode: hide card list, show only active entry content */
.meeting-container .writing-entry { margin-bottom: 0.5rem; }
.meeting-container.detail-mode .writing-entry { display: none; }
.meeting-container.detail-mode .writing-entry.active { display: block; }
.meeting-container.detail-mode .writing-entry.active > .writing-card { display: none; }

.meeting-container.detail-mode .writing-content-panel {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.5rem;
}

/* Look Here / Follow active button — bright orange like the badge */
.tool-btn-look-here {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #b45309 !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

.dark-mode .tool-btn-look-here {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Group Meeting — Writing cards */
.meeting-container .writing-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.2rem;
    display: block;
    transition: border-color 0.15s, background 0.15s;
    box-shadow: none;
}

.writing-card-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.meeting-container .writing-card:hover {
    border-color: var(--accent);
}

.wc-open-btn {
    margin-left: auto;
    background: var(--accent);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wc-open-btn:hover {
    opacity: 0.85;
}

.writing-card-title {
    color: var(--text-primary);
    font-size: 1rem;
}

.writing-card-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.writing-card-dates {
    font-size: 0.8rem;
    white-space: nowrap;
}

.wc-toggle-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

.wc-toggle-btn:hover {
    color: var(--text-primary);
}

.just-updated-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.writing-content-panel {
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
}

.writing-content-title {
    margin: 0 0 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.writing-content-text {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
}

.writing-content-text p,
.writing-content-text div {
    margin: 0 0 0.75em;
}

.writing-content-text p:last-child,
.writing-content-text div:last-child {
    margin-bottom: 0;
}

.writing-comments-section {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    margin-bottom: 0;
}

.writing-entry {
    margin-bottom: 2.5rem;
}

.writing-comments-section.expanded {
    border-radius: 0;
    margin-bottom: 0;
}

/* Limit comments height in group meetings when in the sticky top */
#meetingTop .writing-comments-section {
    max-height: 30vh;
    overflow-y: auto;
}

.wc-comment {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.wc-comment:last-of-type {
    border-bottom: none;
}

.wc-comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

.wc-comment-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.wc-comment-ago {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-left: 0.35rem;
}

.wc-comment-ago:not(:empty)::before {
    content: '\B7  ';
}

.wc-comment-text {
    margin: 0.25rem 0 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wc-add-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding-top: 0.65rem;
}

.wc-textarea {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    resize: vertical;
    min-height: 2.4rem;
}

.wc-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.wc-submit-btn {
    padding: 0.4rem 0.85rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.wc-submit-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* In-writing search */
mark.wc-highlight {
    background: rgba(253, 224, 71, 0.55);
    color: inherit;
    border-radius: 2px;
}

mark.wc-highlight-current {
    background: rgba(245, 158, 11, 0.85);
    color: #000;
    border-radius: 2px;
    outline: 2px solid rgba(245, 158, 11, 1);
}

.wc-nav-btn {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.wc-nav-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

/* Follow highlights */
mark.wc-follow-highlight {
    background: rgba(96, 165, 250, 0.35);
    color: inherit;
    border-radius: 2px;
}

mark.wc-follow-current {
    background: rgba(59, 130, 246, 0.85);
    color: #fff;
    border-radius: 2px;
    outline: 2px solid rgba(59, 130, 246, 1);
}

/* "Someone is sharing" badge */
.wc-sharing-badge {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 20px;
    color: rgb(220, 38, 38);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.wc-sharing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: wc-sharing-pulse 1.4s ease-in-out infinite;
}

@keyframes wc-sharing-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

/* Look-Here shared highlight marks */
mark.wc-lh-highlight {
    border-radius: 2px;
    color: inherit;
}

/* Highlight palette in search bar */
.wc-lh-hl-wrap {
    position: relative;
    display: none;
}

.wc-lh-hl-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.wc-lh-hl-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.wc-lh-palette {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 200;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    width: 108px;
}

.wc-lh-palette.open {
    display: grid;
}

.wc-lh-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.1s;
}

.wc-lh-swatch:hover {
    transform: scale(1.2);
}

.wc-lh-swatch.clear-sw {
    background: transparent !important;
    border: 1px dashed var(--border);
    font-size: 0.6rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* JS-generated search bar (inside writing content panel) */
.wc-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.wc-search-input {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    width: 210px;
}

.wc-search-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.wc-search-nav {
    display: none;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wc-search-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wc-lh-hl-wrap-active {
    align-items: center;
    gap: 0.3rem;
}

.highlight-palette-wrap {
    position: relative;
}

/* "Look here" label on writing cards */
.wc-look-here-label {
    display: none;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ============================================================
   Codex Editor Page
   ============================================================ */

body.codex-page {
    background: var(--codex-bg);
    color: var(--codex-text);
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.codex-layout {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- Toolbar --- */
.codex-toolbar {
    padding: 1rem 2rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--codex-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    z-index: 100;
}

.toolbar-group {
    display: flex;
    gap: 2px;
    padding-right: 1rem;
    border-right: 1px solid var(--codex-border);
    margin-right: 0.5rem;
}

.toolbar-group:last-child {
    border-right: none;
}

.tool-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    min-width: 2rem;
    text-align: center;
    transition: all 0.2s;
}

.tool-btn:hover {
    color: var(--text-primary);
    background: var(--surface);
}

.tool-btn.active {
    color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
}

select.tool-select {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 0.4rem;
    border-radius: 4px;
    margin-right: 0.5rem;
}

/* --- Header / Meta --- */
.codex-meta {
    padding: 1.5rem 2rem 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.codex-title-input {
    background: transparent;
    border: none;
    color: var(--codex-text);
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    width: 70%;
    outline: none;
}

.codex-title-input::placeholder {
    color: var(--text-secondary);
}

.save-status {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 1rem;
    font-style: italic;
}

.btn-done {
    background: var(--accent);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-done:hover {
    opacity: 0.9;
}

/* --- Editor Area --- */
.codex-editor-container {
    flex-grow: 1;
    padding: 1rem 2rem 6rem 2rem;
    overflow-y: auto;
    cursor: text;
}

#editor {
    outline: none;
    min-height: 100%;
    font-family: 'Merriweather', serif;
    font-size: 1.35rem;
    line-height: 1.8;
    color: var(--codex-text);
    white-space: pre-wrap;
    tab-size: 4;
    -moz-tab-size: 4;
}

.line-spacing-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0;
    z-index: 100;
    min-width: 80px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.line-spacing-menu a {
    display: block;
    padding: 0.3rem 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.line-spacing-menu a:hover {
    background: var(--surface);
}

/* Placeholder for contenteditable */
#editor:empty:before {
    content: "Start writing...";
    color: var(--text-secondary);
    pointer-events: none;
    display: block;
}

/* Helper for search highlight */
.codex-page .highlight {
    background-color: yellow;
    color: black;
}

mark.search-highlight {
    background: #fef08a;
    color: #1a1a1a;
    border-radius: 3px;
    padding: 0 2px;
}

mark.search-highlight-active {
    background: #f97316 !important;
    color: #fff !important;
    border-radius: 3px;
    padding: 0 2px;
}

/* Nav Btn Style (Reused) */
.btn-nav-outline {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

.btn-nav-outline:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Codex Dropdown Styles */
.codex-page .dropdown {
    margin-left: auto;
    position: relative;
    display: inline-block;
}

.codex-page .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--bg-secondary);
    min-width: 140px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 200;
    border: 1px solid var(--border);
    border-radius: 4px;
    top: 100%;
    margin-top: 0;
}

.codex-page .dropdown:hover .dropdown-content {
    display: block;
}

.codex-page .dropdown-content button {
    color: var(--text-primary);
    padding: 10px 14px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: sans-serif;
}

.codex-page .dropdown-content button:hover {
    background-color: var(--surface);
    color: var(--text-primary);
}

/* Codex Modal Styles */
.codex-page .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.codex-page .modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    text-align: center;
}

.codex-page .modal h3 {
    margin-top: 0;
    color: var(--text-primary);
}

.codex-page .modal p {
    color: var(--text-secondary);
}

.codex-page .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-cancel {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel:hover {
    background-color: var(--surface);
}

/* Search nav buttons */
.search-nav-btn {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.search-nav-btn:hover {
    color: var(--accent);
    background-color: var(--surface);
}

/* Font size display between A- and A+ */
.font-size-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 2.2rem;
    text-align: center;
    line-height: 1;
    align-self: center;
    user-select: none;
    vertical-align: middle;
}

/* Highlight color palette */
.codex-page .highlight-palette-wrap {
    position: relative;
}

.highlight-palette {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 500;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 116px;
}

.highlight-palette.open {
    display: grid;
}

.highlight-swatch {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}

.highlight-swatch:hover {
    transform: scale(1.2);
    border-color: var(--text-primary);
}

.highlight-swatch.clear-swatch {
    background: transparent !important;
    border: 1px dashed var(--border);
    font-size: 0.65rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Distraction-free */
.df-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.df-checkbox-label:hover {
    color: var(--text-primary);
}

#dfTitleBar {
    display: none;
    text-align: center;
    padding: 0.75rem 3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--codex-text);
    background: var(--codex-bg);
    border-bottom: 1px solid var(--codex-border);
    position: relative;
    flex-shrink: 0;
}

#dfExitBtn {
    display: none;
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    z-index: 600;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

#dfExitBtn:hover {
    background: var(--surface);
    color: var(--text-primary);
}

/* Title placeholder for new writings */
#pageTitle[data-empty]::before {
    content: 'Click here to change the title of this writing';
    color: var(--text-secondary);
    font-style: italic;
    pointer-events: none;
}

/* Spell check popup */
#spellPopup {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 3000;
    min-width: 150px;
    max-width: 220px;
    display: none;
    font-family: inherit;
}

.spell-word-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.2rem;
}

.spell-sug {
    display: block;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-decoration: none;
}

.spell-sug:hover {
    background: var(--surface);
}

.spell-no-sug {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.spell-add-btn {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border-radius: 0 0 4px 4px;
    font-family: inherit;
    box-sizing: border-box;
}

.spell-add-btn:hover {
    background: var(--surface);
    color: var(--text-primary);
}

/* Thesaurus modal list */
#thesaurusList {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    max-height: 300px;
    overflow-y: auto;
}

#thesaurusList li {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

#thesaurusList li:hover {
    background: var(--surface);
}

/* --- Codex inline style replacements --- */

/* Dashboard header on codex page */
.codex-page .dashboard-header {
    position: relative;
    margin-bottom: 0;
}

/* Nav name label next to logo */
.codex-nav-name {
    margin-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Nav links in codex header — tighter padding */
.codex-page .nav-link {
    padding: 0;
    font-size: 0.95rem;
}

/* Settings dropdown button in codex header */
.codex-profile-btn {
    padding: 0;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-family: inherit;
}

/* Close button group */
.toolbar-group-close {
    padding-right: 0.75rem;
}

/* Close (X) button on toolbar */
.codex-close-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    font-family: inherit;
}

/* SVG icons in toolbar buttons */
.tool-btn svg {
    vertical-align: middle;
}

/* Font size decrease button */
.tool-btn-font-down {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Font size increase button */
.tool-btn-font-up {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Tool button label style (Highlight, Thesaurus, Spelling) */
.tool-btn-label {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Search group */
#searchNavGroup {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Search input in codex toolbar */
.codex-search-input {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 150px;
}

/* Search action link */
.codex-search-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Search active span */
#codexSearchActive {
    display: none;
    align-items: center;
    gap: 0.35rem;
}

/* Match counter */
#matchCounter {
    color: var(--text-secondary);
    font-size: 0.8rem;
    min-width: 3.5rem;
    text-align: center;
    white-space: nowrap;
}

/* Cancel search link */
.codex-cancel-search {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
}

/* Toolbar row 2 (status bar) */
.codex-status-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--codex-border);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

/* Separator pipe in status bar */
.codex-separator {
    color: var(--text-secondary);
    margin: 0 0.1rem;
}

/* Word count display */
#wordCount {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Save status in status bar */
.save-status-inline {
    margin-right: 0;
    min-width: 3.5rem;
    display: inline-block;
    text-align: left;
}

/* Delete button in status bar */
.tool-btn-delete {
    color: var(--text-secondary);
    padding: 0.2rem 0.4rem;
}

.tool-btn-delete:hover {
    color: #ef4444;
}

/* Page title (contenteditable h2) */
#pageTitle {
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 1.8rem;
    outline: none;
    cursor: text;
}

/* Info modal */
.codex-page .modal-sm {
    max-width: 360px;
}

.codex-page .modal-md {
    max-width: 400px;
}

.codex-page .modal-lg {
    max-width: 460px;
}

/* Modal headings with no top margin */
.codex-modal-heading {
    margin: 0 0 0.5rem 0;
}

/* Modal subtext */
.codex-modal-sub {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
}

/* Modal status text */
.codex-modal-status {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    display: none;
}

/* Info modal message paragraph */
.codex-info-msg {
    margin: 0 0 1rem;
    color: var(--text-primary);
}

/* Modal buttons with top margin only */
.codex-modal-buttons-mt {
    margin-top: 1rem;
}

/* Spell modal buttons layout */
.codex-modal-buttons-spread {
    margin-top: 1rem;
    justify-content: space-between;
}

/* Spell modal learn button */
.codex-learn-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

/* Spell modal list */
#spellModalList {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    max-height: 220px;
    overflow-y: auto;
}

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

/* ============================================================
   Dashboard Page
   ============================================================ */

/* Full-viewport flex layout so only the writings list scrolls */
body:has(.page-dashboard) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-dashboard {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page-dashboard .dashboard-header {
    margin-bottom: 0;
    flex-shrink: 0;
}

.page-dashboard .writings-toolbar {
    position: relative;
    z-index: 50;
}

/* Toolbar tooltips point downward to avoid being clipped by overflow:hidden on page-dashboard */
.writings-toolbar [data-tooltip]::after,
.writings-stats-bar [data-tooltip]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

/* Dashboard Toolbar */
.writings-toolbar {
    padding: 0.75rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--codex-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.writings-toolbar .toolbar-group {
    display: flex;
    gap: 4px;
    padding-right: 1rem;
    border-right: 1px solid var(--codex-border);
    margin-right: 0.5rem;
    align-items: center;
}

.writings-toolbar .toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* Dashboard container override (flex layout for scrollable content) */
.page-dashboard .dashboard-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0.5rem 0 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.dashboard-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 0;
    overflow: hidden;
}

.dashboard-sidebar {
    flex: 0 0 25%;
    padding: 0 1rem 1.5rem 1.5rem;
    border-right: 1px solid var(--border);
    margin-right: 0;
    overflow-y: auto;
}

.dashboard-sidebar h3:first-child {
    margin-top: 0;
}

.dashboard-sidebar input[type="checkbox"] {
    margin-right: 0.5rem;
}

.writings-list {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: scroll;
    padding: 0 1.5rem 0 1rem;
}

.writings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem 0.6rem 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.writings-footer-tier {
    min-width: 80px;
}

.writings-footer-links {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.writings-footer-dot {
    color: var(--text-secondary);
}

.writings-footer-activity {
    min-width: 80px;
    text-align: right;
}

.writings-footer-paid .writings-footer-tier {
    display: none;
}

/* Footer pinned to bottom for goals, groups, notifications */
.writings-footer-sticky {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--bg);
    z-index: 10;
}

/* Settings page sticky footer */
.settings-sticky-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    position: sticky;
    bottom: 0;
    background: var(--bg);
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
}
.settings-signout-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
}
.settings-signout-link:hover {
    color: var(--accent);
}

/* Group card checkbox */
.group-card-cb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.group-select-cb {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.writings-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Writing card metadata grid */
.wc-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.5rem;
    margin-top: 0.3rem;
    align-items: baseline;
}

.wc-meta-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: right;
}

.wc-meta-badges {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Label badge */
.wc-label-badge {
    font-size: 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.3rem;
}

/* Group badge */
.wc-group-badge {
    font-size: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.3rem;
}

/* Goal badge */
.wc-goal-badge {
    font-size: 0.72rem;
    background: rgba(254, 243, 199, 0.9);
    color: #b91c1c;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid rgba(185, 28, 28, 0.25);
    white-space: nowrap;
}

/* Label sidebar */
.label-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.labels-modal-item {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.25rem;
    gap: 0.4rem;
}

.labels-modal-cb {
    cursor: pointer;
    flex-shrink: 0;
}

.labels-modal-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 0;
}

.label-create-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.label-create-icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.label-rename-btn,
.label-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    margin-left: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    color: var(--text-secondary);
    border-radius: 4px;
}

.label-rename-btn:hover {
    color: var(--accent);
    background: var(--surface);
}

.label-delete-btn:hover {
    color: #ef4444;
    background: var(--surface);
}

li[data-label-path]:hover .label-rename-btn,
li[data-label-path]:hover .label-delete-btn {
    opacity: 0.5;
}

.label-rename-btn:hover,
.label-delete-btn:hover {
    opacity: 1 !important;
}

/* Sidebar stats */
.sidebar-stat {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.sidebar-stat:last-child {
    margin-bottom: 0;
}

.sidebar-stat strong {
    color: var(--text-primary);
}

.sidebar-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.sidebar-divider-flush {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0 0;
}

/* Toolbar search input */
.toolbar-search-input {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    width: 200px;
}

/* Search active status */
.toolbar-search-status {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.toolbar-search-cancel {
    font-size: 0.8rem;
}

/* Sort label */
.toolbar-sort-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sort-btn.active {
    background-color: var(--accent) !important;
    color: #fff !important;
}

/* Hide comments checkbox label */
.toolbar-hide-comments {
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}

/* Second toolbar row */
.toolbar-selection-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--codex-border);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.toolbar-selection-item {
    display: flex;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid var(--codex-border);
    margin-right: 0.5rem;
}

.toolbar-selection-item:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* Dashboard writing card overrides */
.page-dashboard .writing-card {
    padding: 0;
    margin-bottom: 0;
    align-items: stretch;
    border-radius: 8px 8px 0 0;
}

.wc-checkbox-col {
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 1rem;
}

.wc-checkbox-col input {
    transform: scale(1.2);
    cursor: pointer;
}

.wc-content-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
    min-width: 0;
}

.wc-actions-col {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 1rem;
}

/* Dashboard entry wrapper */
.dash-writing-entry {
    margin-bottom: 0;
}

/* Dashboard-specific wc-toggle-btn overrides */
.page-dashboard .wc-toggle-btn {
    margin-left: 0;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    font-weight: 500;
    transition: color 0.15s, background-color 0.15s;
}

.page-dashboard .wc-toggle-btn:hover {
    color: var(--accent);
    background-color: var(--surface);
}

/* Dashboard-specific writing-comments-section */
.page-dashboard .writing-comments-section {
    background: var(--card-bg);
}

/* Dashboard-specific wc-submit-btn */
.page-dashboard .wc-submit-btn {
    padding: 0.3rem 0.65rem;
    background: none;
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
}

.page-dashboard .wc-submit-btn:hover {
    color: var(--accent);
    background-color: var(--surface);
}

.page-dashboard .wc-submit-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Dashboard-specific wc-delete-comment-btn */
.wc-delete-comment-btn {
    display: block;
    margin-top: 0.4rem;
    margin-left: auto;
    padding: 0.25rem 0.65rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
}

.wc-delete-comment-btn:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

/* Dashboard modal shared styles */
.dash-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.dash-modal-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 8px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    width: 95%;
}

.dash-modal-box-md {
    max-width: 640px;
}

.dash-modal-box-sm {
    max-width: 480px;
}

.dash-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1;
}

.dash-modal-title {
    margin-top: 0;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.dash-modal-title-tight {
    margin-top: 0;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.dash-modal-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.dash-modal-submit {
    padding: 0.4rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}

/* Label search input in modal */
.dash-label-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}

/* New label creation row */
.dash-create-label-row {
    margin-bottom: 0.75rem;
}

.dash-create-label-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dash-create-label-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0.5rem;
}

.dash-create-label-select {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    margin-right: 0.5rem;
}

.dash-create-label-btn {
    padding: 0.25rem 0.65rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    white-space: nowrap;
}

/* Labels checkbox list in modal */
.dash-labels-list {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
}

/* Share group modal writings list */
.dash-share-writings-list {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    font-size: 1rem;
}

/* Group/goal checkbox label in modals */
.dash-modal-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
}

.dash-modal-check-label input {
    accent-color: var(--accent);
    transform: scale(1.1);
}

/* Visibility badge for groups */
.dash-visibility-badge {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    font-weight: 500;
}

.dash-visibility-badge-private {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.dash-visibility-badge-public {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Share group subtitle */
.dash-share-subtitle {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
/* Tutorial */
.tutorial-dialog {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 340px;
    max-height: 80vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.tutorial-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}

.tutorial-content {
    padding: 1rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-y: auto;
    min-height: 100px;
}

.tutorial-content p { margin: 0 0 0.6rem; }
.tutorial-content p:last-child { margin-bottom: 0; }
.tutorial-content strong { color: var(--accent); }

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem 0;
}

.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s;
    cursor: pointer;
}

.tutorial-dot.active {
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
}

.tutorial-hide-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

.tutorial-arrow {
    position: fixed;
    z-index: 899;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
    animation: tutorial-pulse 1.5s ease-in-out infinite;
}

@keyframes tutorial-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
    user-select: none;
    padding: 0.6rem 1rem;
}

/* Admin Page — two-column layout */
.admin-page {
    max-width: 1100px;
}

.admin-sidebar {
    width: 220px;
}

.admin-nav-item {
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

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

.admin-nav-active {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--surface);
}

.admin-panel {
    /* shown/hidden via JS */
}

.admin-templates-list {
    margin-top: 0.5rem;
}

.admin-template-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
}

.admin-template-clickable {
    cursor: pointer;
}

.admin-template-clickable:hover {
    background: var(--surface);
}

.admin-template-info {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-template-name {
    font-weight: 500;
    color: var(--text-primary);
}

.admin-template-type {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--surface);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.admin-chain-badge {
    font-size: 0.75rem;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.admin-modal-wide {
    max-width: 75%;
    width: 75%;
}

.admin-queue-detail {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.admin-status-active {
    font-size: 0.82rem;
    color: #16a34a;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.admin-status-other {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--surface);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.admin-queue-row {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
}

.admin-queue-details {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

/* Flagged content badges */
.admin-flagged-badge {
    font-size: 0.75rem;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    font-weight: 600;
}

.admin-flagged-comment {
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.25);
}

.admin-flagged-count {
    font-size: 0.82rem;
    color: #dc2626;
    font-weight: 600;
}

/* User detail panel */
.admin-user-detail {
    max-width: 600px;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.88rem;
}

.admin-detail-label {
    color: var(--text-secondary);
}

.admin-detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

.notifier-heart {
    color: #dc2626;
    display: inline-block;
    animation: heartbeat-pulse 1.5s ease-in-out infinite;
}

.notifier-heart-stale {
    display: none !important;
}

.notifier-down {
    display: inline-block;
    color: #f59e0b;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: down-pulse 2s ease-in-out infinite;
}

@keyframes heartbeat-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    15% { transform: scale(1.3); opacity: 1; }
    30% { transform: scale(1); opacity: 0.8; }
    45% { transform: scale(1.2); opacity: 1; }
    60% { transform: scale(1); opacity: 0.8; }
}

@keyframes down-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.admin-flag-indicator {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.admin-day-cb {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
}

/* Admin bar charts */
.admin-bar-chart {
    max-width: 500px;
}

.admin-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
}

.admin-bar-label {
    width: 80px;
    flex-shrink: 0;
    color: var(--text-secondary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-bar-track {
    flex: 1;
    height: 16px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
}

.admin-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    min-width: 2px;
}

.admin-bar-value {
    width: 32px;
    flex-shrink: 0;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.8rem;
}

/* Invoice */
.invoice-box {
    max-width: 550px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    background: var(--bg-secondary);
}

.invoice-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.invoice-label {
    font-weight: 600;
    color: var(--text-secondary);
    width: 180px;
}

/* Writings stats bar (Totals + Selected) */
.writings-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.writings-stats-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.writings-stat strong {
    color: var(--text-primary);
}

.writings-stat-sep {
    width: 1px;
    height: 1rem;
    background: var(--border);
}

/* Toolbar action links with icons */
.toolbar-action-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.8rem;
}

.toolbar-action-icon {
    display: block;
}

/* Codex toolbar icon buttons */
.codex-tool-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}

.codex-tool-icon-btn:hover {
    color: var(--accent);
    background-color: var(--surface);
}

.codex-tool-label {
    font-size: 0.7rem;
    line-height: 1;
}

.codex-tool-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Save status with animated dot overlay on icon */
.codex-save-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: default;
}

.codex-save-icon {
    flex-shrink: 0;
}

.codex-save-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

.codex-save-status.saving .codex-save-dot {
    background: #ef4444;
    animation: savePulse 0.8s ease-in-out infinite;
}

@keyframes savePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Custom tooltips above icons */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--nav-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
    margin-bottom: 4px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.4;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

.nav-link[data-tooltip]::after {
    bottom: auto;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin-bottom: 0;
    margin-top: 4px;
    z-index: 9999;
}


.writings-toolbar {
    position: relative;
}

/* Codex Comments Section */
.codex-comments-section {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    max-height: 250px;
    overflow-y: auto;
    flex-shrink: 0;
}

.codex-comments-inner {
    max-width: 800px;
    margin: 0 auto;
}

.codex-comment-add {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.codex-comment-add .wc-textarea {
    flex: 1;
}

.codex-comment-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.codex-comment-item:last-of-type {
    border-bottom: none;
}

.codex-comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

.codex-comment-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.codex-comment-text {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.codex-comment-delete {
    float: right;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

.codex-comment-delete:hover {
    color: #ef4444;
    background: var(--surface);
}

/* Writing card checkbox hover target */
.wc-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.wc-checkbox-label:hover {
    background-color: var(--surface);
}

/* Sidebar filter checkbox hover */
.dashboard-sidebar label {
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.dashboard-sidebar label:hover {
    background-color: var(--surface);
}

/* Search active badge */
.search-active-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.dark-mode .search-active-badge {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

.search-result-message {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.4rem 1rem;
    line-height: 1.4;
}

/* Writing card label badges */
.writing-labels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex-shrink: 0;
    justify-content: flex-end;
    align-self: center;
    padding-right: 1rem;
}

.writing-label-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.25);
    white-space: nowrap;
}

/* Upload drop zone */
.upload-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
}

.upload-drop-zone.drag-over {
    border-color: var(--accent);
    background-color: rgba(99, 102, 241, 0.05);
}

/* Reference Modal (Dictionary/Thesaurus/Wikipedia) */
.ref-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 700px;
    max-width: 90vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.ref-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.ref-search {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
}

.ref-search:focus {
    outline: none;
    border-color: var(--accent);
}

.ref-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0;
}

.ref-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.ref-tab:hover {
    color: var(--text-primary);
    background-color: var(--surface);
}

.ref-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ref-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.ref-placeholder {
    color: var(--text-secondary);
    text-align: center;
    margin-top: 2rem;
}

.ref-word-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.ref-phonetic {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.ref-pos {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
    margin: 0.75rem 0 0.3rem;
}

.ref-def {
    margin: 0.3rem 0 0.3rem 1rem;
    padding: 0.25rem 0.5rem;
    border-left: 2px solid var(--border);
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.15s;
}

.ref-def:hover {
    background-color: var(--surface);
}

.ref-example {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.88rem;
    margin-top: 0.2rem;
}

.ref-syn-group {
    margin: 0.5rem 0;
}

.ref-syn {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin: 0.2rem;
    background: var(--surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background-color 0.15s, color 0.15s;
}

.ref-syn:hover {
    background: var(--accent);
    color: white;
}

.ref-wiki-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
    border-radius: 4px;
}

/* Personal dictionary in Reference modal */
.personal-dict-list {
    max-height: 50vh;
    overflow-y: auto;
}

.personal-dict-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.personal-dict-item:last-child {
    border-bottom: none;
}

.personal-dict-word {
    flex: 1;
    font-size: 0.92rem;
    color: var(--text-primary);
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    cursor: text;
    outline: none;
}

.personal-dict-word:focus {
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Profile section header with toggle */
.profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.profile-section-header h4 {
    margin: 0;
    font-size: 1rem;
}

/* Settings page — two-column layout */
.settings-page {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    min-height: calc(100vh - 60px);
}

.settings-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
}

.settings-title {
    padding: 0 1.25rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.settings-nav-item {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
    transition: background 0.15s, color 0.15s;
}

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

.settings-nav-active {
    color: var(--text-primary);
    font-weight: 500;
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.settings-signout {
    margin-top: auto;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.settings-content {
    flex: 1;
    padding: 1.5rem 2rem;
    min-width: 0;
    overflow-y: auto;
}

.settings-panel-title {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.consent-box {
    background: #f8f0ff;
    border: 2px solid #6c5ce7;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.consent-box label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}
.consent-box input[type="checkbox"] {
    margin-top: 0.3rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #6c5ce7;
}

/* Reference header button tooltips - below */
.ref-header-btn[data-tooltip]::after {
    bottom: auto;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    margin-top: 4px;
}

/* Personal dict paste button tooltip - above */
.personal-paste-btn[data-tooltip]::after {
    bottom: 100%;
    top: auto;
    margin-bottom: 4px;
    margin-top: 0;
}

.ref-word-clickable {
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.08);
    display: inline-block;
    transition: background-color 0.15s;
}

.ref-word-clickable:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* ── Projects page ── */

.proj-sidebar {
    width: 30%;
    flex-shrink: 0;
    overflow-y: auto;
    padding-left: 1.5rem;
}

.proj-content {
    width: 70%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 0;
}

.proj-content > #projDetailsPanel {
    flex: 1;
}

.proj-content > .writings-footer {
    flex-shrink: 0;
    margin-top: auto;
    margin-right: -2rem;
    padding-right: 2rem;
}

.proj-new-btn {
    display: block;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.proj-sidebar-section {
    padding: 0;
}

.proj-sidebar-item {
    display: block;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.15s;
}

.proj-sidebar-item:hover {
    background: var(--surface);
}

.proj-sidebar-item-active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-left-color: var(--accent);
}

.proj-sidebar-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.proj-sidebar-item-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proj-sidebar-item-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.proj-detail-empty {
    color: var(--text-secondary);
    padding: 2rem 0;
}

.proj-open-link {
    text-decoration: none;
    color: var(--text-secondary);
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.proj-open-link:hover {
    background-color: var(--surface);
    color: var(--accent);
}

.proj-stats-row {
    display: flex;
    gap: 2rem;
}

.proj-stat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.proj-stat strong {
    color: var(--text-primary);
}

.proj-detail-section {
    margin-top: 1.25rem;
}

.proj-section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0 0;
}

.proj-section-title {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.proj-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.proj-card-item {
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.15s;
}

.proj-card-item:hover {
    border-color: var(--accent);
}

/* Project goal card — single-line horizontal layout */
.proj-goal-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.proj-goal-name {
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}
.proj-goal-status {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}
.proj-goal-status-active {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent);
}
.proj-goal-status-completed {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.proj-goal-star {
    color: #eab308;
    font-size: 0.75rem;
}
.proj-goal-stats {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.proj-goal-stats strong {
    color: var(--text-primary);
}
.proj-goal-bar {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0;
}
.proj-goal-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}
.proj-goal-pct {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Project writing card — single-line horizontal */
.proj-writing-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.proj-writing-title {
    font-weight: 600;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proj-writing-stats {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Project bar (shown on dashboard when a project is open) ── */

.project-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    margin: 0 0.5rem 0 1rem;
}

.project-bubble:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.codex-toolbar-bubble,
.dash-modal-box .project-bubble,
.modal .project-bubble {
    pointer-events: none;
}

.codex-toolbar-bubble {
    margin: 0 0.25rem;
    align-self: center;
}

.codex-toolbar-bubble:hover {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

.project-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-dot-on {
    background: #22c55e;
}

.project-dot-off {
    background: #ef4444;
}