/* Spark CMe2 - Glassmorphism Design System */

:root {
    /* Typography scale */
    --font-size-12: 0.75rem;
    --font-size-15: 1rem;
    --font-size-18: 1.125rem;
    --font-size-24: 1.4375rem;
    --font-size-30: 1.8125rem;
    --font-size-37: 2.125rem;
    --font-size-46: 2.625rem;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-heading: 1.28;
    --line-height-body: 1.6;
    --line-height-ui: 1.46;
    --letter-spacing-tight: -0.012em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.035em;

    /* Color ramps */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #2563eb;
    --color-primary-600: #1d4ed8;
    --color-primary-700: #1e40af;
    --color-primary-800: #1e3a8a;
    --color-primary-900: #172554;

    --color-secondary-50: #f5f3ff;
    --color-secondary-100: #ede9fe;
    --color-secondary-200: #ddd6fe;
    --color-secondary-300: #c4b5fd;
    --color-secondary-400: #a78bfa;
    --color-secondary-500: #8b5cf6;
    --color-secondary-600: #7c3aed;
    --color-secondary-700: #6d28d9;
    --color-secondary-800: #5b21b6;
    --color-secondary-900: #4c1d95;

    --color-success-500: #16a34a;
    --color-warning-500: #d97706;
    --color-danger-500: #dc2626;
    --color-info-500: #0284c7;

    /* Surface colors with AA contrast pairing */
    --surface-1: rgba(255, 255, 255, 0.08);
    --surface-2: rgba(255, 255, 255, 0.14);
    --surface-3: rgba(255, 255, 255, 0.2);
    --text-on-light: #101828;
    --text-on-dark: #f8fafc;

    /* Base Glass Properties */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-hover: rgba(255, 255, 255, 0.18);
    --glass-bg-active: rgba(255, 255, 255, 0.22);
    --glass-border: rgba(255, 255, 255, 0.28);
    --glass-border-strong: rgba(255, 255, 255, 0.38);
    --glass-panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    --glass-input-bg: rgba(255, 255, 255, 0.05);
    --glass-toolbar-bg: rgba(255, 255, 255, 0.04);
    --glass-panel-blur: 26px;
    --glass-control-blur: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.18);
    --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.24);
    --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 18px 42px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 24px rgba(251, 191, 36, 0.12);

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
    --ambient-gradient-duration: 30s;
    --ambient-float-duration: 6.5s;
    --ambient-breathe-duration: 8.5s;
    --ambient-layer-duration: 12s;

    /* Spacing (4px/8px grid) */
    --sidebar-width: 16rem;
    --header-height: 5rem;
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.5rem; /* 24px */
    --space-6: 2rem; /* 32px */
    --space-7: 3rem; /* 48px */
    --space-8: 4rem; /* 64px */
    --page-gutter: 1.5rem;
    --section-gap: 1.25rem;
    --control-height-sm: 2rem; /* 32px */
    --control-height: 2.5rem; /* 40px */
    --control-height-lg: 3rem; /* 48px */

    /* Radius scale */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-control: var(--radius-12);
    --radius-card: var(--radius-12);
    --radius-panel: var(--radius-16);
    --radius-pill: 999px;
    --border-radius: var(--radius-card);
    --border-radius-lg: var(--radius-panel);

    /* iOS mobile top navigation */
    --mobile-nav-surface: rgba(255, 255, 255, 0.9);
    --mobile-nav-border: rgba(15, 15, 15, 0.08);
    --mobile-nav-ink: #111111;
    --mobile-nav-badge-bg: rgba(0, 0, 0, 0.04);
    --mobile-nav-badge-border: rgba(0, 0, 0, 0.15);
    --mobile-nav-badge-ink: rgba(17, 17, 17, 0.7);
    --mobile-menu-surface: #101114;
    --mobile-menu-ink: #f4f4f2;
    --mobile-menu-muted: rgba(244, 244, 242, 0.66);
    --mobile-menu-divider: rgba(255, 255, 255, 0.14);
    --mobile-menu-button-bg: #f8dd2a;
    --mobile-menu-button-ink: #121212;
}

/* Theme Definitions */
.theme-sunrise {
    --bg-gradient: linear-gradient(135deg, #4b140e 0%, #7a251b 32%, #b24a34 60%, #d8866a 82%, #f1c9ab 100%);
    --accent-primary: #f6d1b5;
    --accent-secondary: #e8a982;
    --accent-rgb: 246, 209, 181;
    --text-primary: #fff7f0;
    --text-secondary: #f7dcc8;
    --text-muted: rgba(255, 255, 255, 0.6);
    --mobile-nav-surface: rgba(255, 240, 231, 0.82);
    --mobile-nav-border: rgba(255, 245, 238, 0.24);
    --mobile-nav-ink: #fff4ea;
    --mobile-nav-badge-bg: rgba(255, 255, 255, 0.12);
    --mobile-nav-badge-border: rgba(255, 255, 255, 0.3);
    --mobile-nav-badge-ink: rgba(255, 245, 238, 0.82);
    --mobile-menu-surface: #220f0d;
    --mobile-menu-ink: #fff3e8;
    --mobile-menu-muted: rgba(255, 243, 232, 0.68);
    --mobile-menu-divider: rgba(255, 243, 232, 0.16);
}


.theme-midnight {
    --bg-gradient: linear-gradient(135deg, #00131f 0%, #001a2a 35%, #00243a 70%, #00324d 100%);
    --accent-primary: #8bd3ff;
    --accent-secondary: #56a8d6;
    --accent-rgb: 139, 211, 255;
    --text-primary: #e9f5ff;
    --text-secondary: #c8e6f7;
    --text-muted: rgba(255, 255, 255, 0.6);
    --mobile-nav-surface: rgba(4, 22, 35, 0.86);
    --mobile-nav-border: rgba(139, 211, 255, 0.22);
    --mobile-nav-ink: #e9f5ff;
    --mobile-nav-badge-bg: rgba(139, 211, 255, 0.12);
    --mobile-nav-badge-border: rgba(139, 211, 255, 0.28);
    --mobile-nav-badge-ink: rgba(233, 245, 255, 0.8);
    --mobile-menu-surface: #041927;
    --mobile-menu-ink: #e8f6ff;
    --mobile-menu-muted: rgba(232, 246, 255, 0.68);
    --mobile-menu-divider: rgba(139, 211, 255, 0.2);
}

.theme-desert {
    --bg-gradient: linear-gradient(135deg, #b3a287 0%, #c4b39a 35%, #d5c7b0 70%, #e6cfa1 100%);
    --accent-primary: #e9dcc5;
    --accent-secondary: #cdbfa6;
    --accent-rgb: 233, 220, 197;
    --text-primary: #3a2f22;
    --text-secondary: #5b4a36;
    --text-muted: rgba(0, 0, 0, 0.45);
    --mobile-nav-surface: rgba(248, 238, 223, 0.9);
    --mobile-nav-border: rgba(58, 47, 34, 0.12);
    --mobile-nav-ink: #33281c;
    --mobile-nav-badge-bg: rgba(0, 0, 0, 0.03);
    --mobile-nav-badge-border: rgba(58, 47, 34, 0.18);
    --mobile-nav-badge-ink: rgba(51, 40, 28, 0.7);
    --mobile-menu-surface: #302721;
    --mobile-menu-ink: #f7f0e3;
    --mobile-menu-muted: rgba(247, 240, 227, 0.66);
    --mobile-menu-divider: rgba(247, 240, 227, 0.16);
}

.theme-mountain {
    --bg-gradient: linear-gradient(135deg, #3a3a3a 0%, #5a5a5a 35%, #7a7a7a 70%, #898989 100%);
    --accent-primary: #d9d9d9;
    --accent-secondary: #b5b5b5;
    --accent-rgb: 217, 217, 217;
    --text-primary: #f2f2f2;
    --text-secondary: #d6d6d6;
    --text-muted: rgba(255, 255, 255, 0.6);
    --mobile-nav-surface: rgba(48, 48, 48, 0.86);
    --mobile-nav-border: rgba(255, 255, 255, 0.2);
    --mobile-nav-ink: #f2f2f2;
    --mobile-nav-badge-bg: rgba(255, 255, 255, 0.08);
    --mobile-nav-badge-border: rgba(255, 255, 255, 0.26);
    --mobile-nav-badge-ink: rgba(242, 242, 242, 0.8);
    --mobile-menu-surface: #1b1b1d;
    --mobile-menu-ink: #f3f3f3;
    --mobile-menu-muted: rgba(243, 243, 243, 0.68);
    --mobile-menu-divider: rgba(243, 243, 243, 0.18);
}

.theme-minimalism {
    --bg-gradient: linear-gradient(135deg, #f9f9f7 0%, #f1f1ee 50%, #e9e9e6 100%);
    --accent-primary: #111111;
    --accent-secondary: #2a2a2a;
    --accent-rgb: 17, 17, 17;
    --text-primary: #0f0f0f;
    --text-secondary: #282828;
    --text-muted: rgba(0, 0, 0, 0.64);
    --glass-bg: rgba(0, 0, 0, 0.04);
    --glass-bg-hover: rgba(0, 0, 0, 0.07);
    --glass-bg-active: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(0, 0, 0, 0.16);
    --glass-border-strong: rgba(0, 0, 0, 0.23);
    --mobile-nav-surface: rgba(248, 248, 245, 0.92);
    --mobile-nav-border: rgba(15, 15, 15, 0.08);
    --mobile-nav-ink: #101010;
    --mobile-nav-badge-bg: rgba(0, 0, 0, 0.03);
    --mobile-nav-badge-border: rgba(0, 0, 0, 0.13);
    --mobile-nav-badge-ink: rgba(16, 16, 16, 0.66);
    --mobile-menu-surface: #f5f5f2;
    --mobile-menu-ink: #151515;
    --mobile-menu-muted: rgba(21, 21, 21, 0.6);
    --mobile-menu-divider: rgba(21, 21, 21, 0.12);
    --mobile-menu-button-bg: #ececec;
    --mobile-menu-button-ink: #111111;
    --surface-1: rgba(0, 0, 0, 0.04);
    --surface-2: rgba(0, 0, 0, 0.08);
    --surface-3: rgba(0, 0, 0, 0.14);
    --text-on-light: #0f172a;
    --text-on-dark: #f8fafc;
}

.theme-minimalism-dark {
    --bg-gradient: #0c0d10;
    --accent-primary: #f2f2f0;
    --accent-secondary: #d7d7d2;
    --accent-rgb: 242, 242, 240;
    --text-primary: #f7f7f2;
    --text-secondary: #cfcfc7;
    --text-muted: rgba(255, 255, 255, 0.55);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-hover: rgba(255, 255, 255, 0.1);
    --glass-bg-active: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-strong: rgba(255, 255, 255, 0.22);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.08);
    --mobile-nav-surface: rgba(13, 14, 17, 0.9);
    --mobile-nav-border: rgba(255, 255, 255, 0.14);
    --mobile-nav-ink: #f7f7f2;
    --mobile-nav-badge-bg: rgba(255, 255, 255, 0.06);
    --mobile-nav-badge-border: rgba(255, 255, 255, 0.16);
    --mobile-nav-badge-ink: rgba(247, 247, 242, 0.72);
    --mobile-menu-surface: #090a0c;
    --mobile-menu-ink: #f7f7f2;
    --mobile-menu-muted: rgba(247, 247, 242, 0.66);
    --mobile-menu-divider: rgba(247, 247, 242, 0.16);
    --surface-1: rgba(255, 255, 255, 0.06);
    --surface-2: rgba(255, 255, 255, 0.1);
    --surface-3: rgba(255, 255, 255, 0.16);
    --text-on-light: #0f172a;
    --text-on-dark: #f8fafc;
}

/* Minimalism overrides */
.theme-minimalism .logo-badge {
    background: #f3f3f3;
    color: #111111;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.theme-minimalism .glass-panel {
    background: var(--glass-panel-bg);
    border-color: var(--glass-border);
}

.theme-minimalism .glass-button {
    border-color: rgba(0, 0, 0, 0.16);
}

.theme-minimalism .settings-toggle-row:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-minimalism .settings-switch {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

.theme-minimalism .settings-switch:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.theme-minimalism .settings-switch.is-on {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.34),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.theme-minimalism .settings-switch__status {
    color: rgba(20, 20, 20, 0.62);
}

.theme-minimalism .settings-switch.is-on .settings-switch__status {
    color: rgba(20, 20, 20, 0.9);
}

.theme-minimalism .settings-switch.is-off .settings-switch__status {
    color: rgba(20, 20, 20, 0.5);
}

.theme-minimalism .glass-input,
.theme-minimalism .journal-title-input,
.theme-minimalism .journal-link-field input,
.theme-minimalism .journal-tag-input {
    background: var(--glass-input-bg);
    border-color: var(--glass-border);
    color: #141414;
}

.theme-minimalism .journal-toolbar {
    background: var(--glass-toolbar-bg);
    border-color: var(--glass-border);
}

.theme-minimalism .journal-editor {
    background: rgba(255, 255, 255, 0.93);
    border-color: rgba(0, 0, 0, 0.17);
}

.theme-minimalism .journal-toggle-switch {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.14);
}

.theme-minimalism .journal-toggle-switch button {
    color: rgba(20, 20, 20, 0.86);
}

.theme-minimalism .journal-toggle-switch button.active {
    border-color: rgba(0, 0, 0, 0.18);
    color: #111111;
}

.theme-minimalism .glass-input::placeholder,
.theme-minimalism .journal-editor[data-placeholder]:empty:before,
.theme-minimalism .journal-tag-input::placeholder,
.theme-minimalism .declutter-search::placeholder {
    color: rgba(0, 0, 0, 0.56);
    opacity: 1;
}

.theme-minimalism-dark .logo-badge {
    background: #121317;
    color: #f7f7f2;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
}

.theme-minimalism .dashboard-module > *:not(.module-controls) {
    border-color: rgba(0, 0, 0, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(247, 247, 244, 0.95));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.theme-minimalism-dark .dashboard-module > *:not(.module-controls) {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

.theme-minimalism .dashboard-module.module-focused > *:not(.module-controls) {
    border-color: rgba(0, 0, 0, 0.28);
}

.theme-minimalism-dark .dashboard-module.module-focused > *:not(.module-controls) {
    border-color: rgba(255, 255, 255, 0.16);
}

.theme-minimalism .dashboard-module.module-focused::before {
    filter:
        drop-shadow(0 0 20px rgba(0, 0, 0, 0.12))
        drop-shadow(0 0 40px rgba(0, 0, 0, 0.08));
    opacity: 0.6;
}

.theme-minimalism-dark .dashboard-module.module-focused::before {
    filter:
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.06))
        drop-shadow(0 0 34px rgba(255, 255, 255, 0.04));
    opacity: 0.45;
}

.theme-minimalism .glass-button.primary {
    background: #f5f5f5;
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.theme-minimalism-dark .glass-button.primary {
    background: #f4f4f1;
    color: #0c0d10;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-minimalism .glass-button.primary:hover {
    background: #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}

.theme-minimalism-dark .glass-button.primary:hover {
    background: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.theme-minimalism-dark .glass-panel {
    background: var(--glass-panel-bg);
    border-color: var(--glass-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

.theme-minimalism-dark .glass-input {
    background: var(--glass-input-bg);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

.recent-activity-panel h3 {
    justify-content: flex-start;
}

.recent-activity-panel .activity-item {
    justify-content: flex-start;
    text-align: left;
}

.recent-activity-panel .activity-item .flex-1 {
    flex: 1 1 auto;
}

.recent-activity-panel .space-y-3 {
    padding-bottom: 0.5rem;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: #000;
    line-height: 1.6;
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.no-animations *, 
body.no-animations *::before, 
body.no-animations *::after {
    animation: none !important;
    transition: none !important;
}

.settings-stack {
    margin-top: 1.25rem;
}

.app-container {
    background: var(--bg-gradient);
    background-attachment: fixed;
    background-size: 400% 400%;
    animation: gradientShift var(--ambient-gradient-duration) ease infinite;
    min-height: 100dvh;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.app-sidebar,
.app-container > main {
    min-width: 0;
}

.app-sidebar {
    width: var(--sidebar-width);
    margin: var(--space-4);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    height: calc(100vh - 2rem);
    height: calc(100dvh - 2rem);
}

.app-nav {
    flex: 1 1 auto;
    padding: var(--space-6) var(--space-3);
}

.app-settings-nav {
    padding: var(--space-4);
}

.app-page-content {
    overflow-y: auto;
    overflow-x: hidden;
}

.app-page-shell {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-height: 100%;
}

.app-page-body {
    min-width: 0;
}

/* Precision rhythm */
#page-content.app-page-content {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)) !important;
}

.app-main-header {
    padding: var(--space-5) var(--page-gutter);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.app-main-header > div:first-child {
    min-width: 0;
}

.app-main-header h1 {
    font-size: clamp(2.35rem, 4vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: var(--letter-spacing-tight);
    font-weight: 400;
}

.app-main-header p {
    margin-top: var(--space-2);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 38rem;
}

#header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

#header-actions > .glass-button {
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
}

.app-page-body > .max-w-5xl,
.app-page-body > .max-w-4xl,
.app-page-body > .max-w-2xl {
    margin-left: auto;
    margin-right: auto;
}

.app-page-body > .settings-stack--left {
    margin-left: 0;
    margin-right: auto;
}

.mobile-topbar,
.mobile-menu-backdrop {
    display: none;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glassmorphism Components */
.glass-panel {
    background: var(--glass-panel-bg);
    backdrop-filter: blur(var(--glass-panel-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--glass-panel-blur)) saturate(125%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-lg);
}

.glass-button {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-control-blur));
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    transition: all var(--transition-base);
    cursor: pointer;
}

.glass-button:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--glass-border-strong);
}

.glass-button:active {
    background: var(--glass-bg-active);
    transform: translateY(0);
}

.toggle-option {
    position: relative;
}

.toggle-default-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-primary);
    opacity: 0.7;
}

.settings-toggle-row {
    border: 1px solid transparent;
}

.settings-toggle-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.settings-switch {
    position: relative;
    width: 3.55rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
}

.settings-switch:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.28);
}

.settings-switch:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.45);
    outline-offset: 3px;
}

.settings-switch.is-on {
    background: rgba(var(--accent-rgb), 0.28);
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(var(--accent-rgb), 0.14);
}

.settings-switch.is-off {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.settings-switch__status {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    transform: translateY(-50%);
    transition:
        left var(--transition-base),
        color var(--transition-base),
        opacity var(--transition-base);
    pointer-events: none;
}

.settings-switch.is-on .settings-switch__status {
    left: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
}

.settings-switch.is-off .settings-switch__status {
    left: 1.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.settings-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 240, 240, 0.92));
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition:
        transform var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
    pointer-events: none;
}

.settings-switch.is-on .settings-switch__knob {
    transform: translateX(1.62rem);
}

.settings-switch.is-off .settings-switch__knob {
    background: linear-gradient(180deg, rgba(248, 248, 248, 0.96), rgba(224, 224, 224, 0.88));
}

.glass-button.primary {
    background: var(--accent-primary);
    color: rgba(0, 0, 0, 0.8);
    border-color: transparent;
    font-weight: 600;
}

.glass-button.primary:hover {
    background: var(--accent-secondary);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
}

.glass-input {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-control-blur));
    color: var(--text-primary);
    border-radius: var(--radius-control);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    width: 100%;
    transition: all var(--transition-base);
}

.glass-input::placeholder {
    color: var(--text-muted);
}

/* Time nudge badge */
.time-nudge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.05rem;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(120deg, rgba(var(--accent-rgb), 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), var(--shadow-glow);
    max-width: 360px;
    position: relative;
    overflow: hidden;
    animation: nudgeFloat 6s ease-in-out infinite;
}

.time-nudge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.3), transparent 55%);
    opacity: 0.75;
    pointer-events: none;
}

.time-nudge__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    animation: nudgeIconPulse 3.2s ease-in-out infinite;
}

.time-nudge__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time-nudge__dismiss {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.time-nudge__dismiss:hover {
    border-color: var(--glass-border-strong);
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.time-nudge.is-hidden {
    display: none;
}

@keyframes nudgePulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
    }
    50% {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.45);
    }
}

@keyframes nudgeIconPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.05);
    }
}

/* Time nudge icon colors per slot */
.time-nudge.nudge-early .time-nudge__icon {
    color: #ffd79b;
}

.time-nudge.nudge-early {
    background: linear-gradient(120deg, rgba(88, 126, 183, 0.85), rgba(128, 164, 214, 0.75));
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.time-nudge.nudge-morning .time-nudge__icon {
    color: #ffffff;
}

.time-nudge.nudge-morning {
    background: linear-gradient(120deg, rgba(246, 214, 120, 0.95), rgba(255, 230, 150, 0.9));
    border-color: rgba(0, 0, 0, 0.08);
    color: #1b1b1b;
}

.time-nudge.nudge-noon .time-nudge__icon {
    color: #151515;
}

.time-nudge.nudge-noon {
    background: linear-gradient(120deg, rgba(244, 165, 80, 0.95), rgba(255, 190, 120, 0.9));
    border-color: rgba(0, 0, 0, 0.08);
    color: #151515;
}

.time-nudge.nudge-evening .time-nudge__icon {
    color: #ffd16b;
}

.time-nudge.nudge-evening {
    background: linear-gradient(120deg, rgba(18, 34, 78, 0.95), rgba(28, 48, 105, 0.9));
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.time-nudge.nudge-rest .time-nudge__icon {
    color: #ffffff;
}

.time-nudge.nudge-rest {
    background: linear-gradient(120deg, rgba(14, 26, 62, 0.95), rgba(22, 40, 92, 0.9));
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.time-nudge.nudge-sleep .time-nudge__icon {
    color: #ffffff;
}

.time-nudge.nudge-sleep {
    background: linear-gradient(120deg, rgba(15, 25, 60, 0.95), rgba(20, 35, 80, 0.85));
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

@keyframes nudgeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.time-nudge-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 30;
}

.time-nudge-panel {
    width: min(360px, 44vw);
    padding: 0.75rem 0.9rem;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.4;
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
    animation: nudgePanelIn var(--transition-base);
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 40;
}

.time-nudge-panel__text {
    margin-bottom: 0.45rem;
}

.time-nudge-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border-strong);
    background: rgba(255, 255, 255, 0.2);
    transition: all var(--transition-fast);
}

.time-nudge-panel__link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
}

.time-nudge-panel.is-hidden {
    display: none;
}

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

.glass-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    transition: all var(--transition-base);
    cursor: pointer;
    gap: var(--space-3);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.dashboard-card-icon,
.dashboard-stat-icon,
.activity-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 22px rgba(0, 0, 0, 0.18);
}

.dashboard-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
}

.dashboard-stat-icon,
.activity-item__icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.95rem;
}

.dashboard-card-icon__glyph,
.dashboard-stat-icon__glyph,
.activity-item__icon-glyph {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.35;
}

/* Navigation */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.72rem 0.95rem;
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

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

.nav-item.active {
    color: var(--text-primary);
    background: var(--glass-bg-active);
    border-color: var(--glass-border);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

/* Logo */
.logo-container {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.spark-wordmark {
    font-family: 'Inter', sans-serif;
    font-size: 1.58rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
}

.spark-logo-trigger {
    cursor: pointer;
}

.spark-icon {
    width: 2rem;
    height: 2rem;
    position: relative;
}

.logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: var(--accent-primary);
    color: #111111;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.25);
}

.clock-panel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.clock-section {
    position: relative;
}

.clock-section::after {
    content: '';
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
    opacity: 0.6;
    pointer-events: none;
}

.cme2-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: all var(--transition-fast);
}

.cme2-badge--title {
    font-size: 0.95rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
}

.cme2-badge::after {
    content: attr(data-alt) " ♥";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: #ff3b30;
    white-space: nowrap;
    transition: all var(--transition-fast);
    pointer-events: none;
}

.cme2-badge:hover {
    color: transparent;
    border-color: rgba(var(--accent-rgb), 0.35);
}

.cme2-badge:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cme2-badge.is-icu {
    color: var(--text-primary);
}

.cme2-badge.is-icu::after {
    content: none;
}

/* Declutter toast */
.declutter-toast {
    position: sticky;
    top: 0.5rem;
    margin: 0 auto;
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--text-primary);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 2;
}

.declutter-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* App-level toast */
.global-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translate(-50%, 12px);
    background: rgba(16, 16, 16, 0.92);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    z-index: 90;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

.global-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Placeholder fade */
.placeholder-fade::placeholder {
    opacity: 0;
    transition: opacity 300ms ease;
}

.declutter-search::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

/* Declutter controls */
.declutter-save-btn {
    background: #0f0f0f;
    color: #ffffff;
    border-color: transparent;
}

.declutter-save-btn:hover {
    background: #000000;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

.declutter-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.declutter-delete:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}

.declutter-actions .glass-button,
.journal-save-row .journal-save-btn {
    min-height: var(--control-height);
    border-radius: var(--radius-pill);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.declutter-filter-row .glass-input,
.journal-filter-row .glass-input {
    min-height: var(--control-height);
    border-radius: var(--radius-pill);
}

.filter-pill {
    min-width: 0;
}

.filter-pill--search {
    min-width: 0;
}

.filter-field {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
    font: inherit;
    line-height: 1.2;
}

.filter-field:focus {
    outline: none;
    box-shadow: none;
}

.filter-field--input::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

.filter-select {
    position: relative;
    padding-right: 2.75rem;
    flex: 0 0 auto;
    min-width: 0;
}

.filter-field--select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: auto;
    padding-right: 0.2rem;
}

.filter-field--select::-ms-expand {
    display: none;
}

.filter-select--month {
    width: 10rem;
}

.filter-select--year {
    width: 7.25rem;
}

.filter-select--category {
    width: 11.5rem;
}

.filter-select__chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.recent-activity-panel .activity-item {
    border-radius: var(--radius-control);
}

/* Journal */
.journal-compose {
    position: relative;
    border-radius: var(--border-radius-lg);
}

.journal-toolbar {
    display: flex;
    gap: 0.65rem;
    padding: 0.8rem;
    border-radius: calc(var(--radius-control) + 0.1rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--glass-toolbar-bg);
    flex-wrap: wrap;
    align-items: center;
}

.journal-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.journal-toolbar__group--fullscreen {
    margin-left: 0.15rem;
}

.journal-toolbar__group > button {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.journal-toolbar__group > button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.journal-toolbar__group > button.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.journal-toolbar__group > button[data-format-action^="h"] {
    width: auto;
    min-width: 2.5rem;
    padding: 0 0.62rem;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.journal-header-actions .glass-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 var(--space-4);
    min-height: var(--control-height);
    border-radius: var(--radius-pill);
}

.journal-header-actions .glass-button i {
    width: 1rem;
    height: 1rem;
}

.journal-header-actions .journal-save-btn-top {
    display: none;
}

.journal-fullscreen .journal-header-actions .journal-save-btn-top {
    display: inline-flex;
}

.journal-link-panel {
    display: none;
    gap: 1rem;
    align-items: flex-end;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 0.6rem;
}

.journal-link-panel.is-visible {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
}

.journal-link-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.journal-link-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-link-field input {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-control);
    padding: 0.55rem 0.75rem;
    color: var(--text-primary);
    outline: none;
}

.journal-link-actions {
    display: flex;
    gap: 0.5rem;
}

.journal-link-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.journal-link-icon-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
}

.journal-link-icon-btn.is-primary {
    background: var(--accent-primary);
    color: rgba(0, 0, 0, 0.85);
    border-color: transparent;
}

.journal-editor {
    min-height: 260px;
    padding: 1.3rem 1.4rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.7;
    outline: none;
}

.journal-editor:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.journal-editor[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    opacity: 0.8;
    pointer-events: none;
}

.journal-editor.placeholder-fade[data-placeholder]:empty:before {
    opacity: 0;
    transition: opacity 300ms ease;
}

.journal-editor blockquote {
    margin: 0.5rem 0;
    padding-left: 0.9rem;
    border-left: 3px solid rgba(var(--accent-rgb), 0.35);
    color: var(--text-secondary);
    font-style: italic;
}

.journal-editor h1,
.journal-editor h2,
.journal-editor h3 {
    margin: 0.75rem 0 0.45rem;
    font-family: inherit;
    line-height: 1.4;
    font-weight: 600;
}

.journal-editor h1 {
    font-size: 1.7rem;
}

.journal-editor h2 {
    font-size: 1.4rem;
}

.journal-editor h3 {
    font-size: 1.2rem;
}

.journal-editor a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.journal-editor a:hover {
    text-decoration-thickness: 2px;
}

.journal-favorite-btn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.journal-favorite-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    color: var(--text-primary);
}

.journal-favorite-btn.is-active {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
}

.journal-week-group {
    display: grid;
    gap: 0.9rem;
}

.journal-week-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    padding-left: 0.5rem;
}

.journal-week-dailies {
    margin-left: 0.5rem;
    border-left: 1px dashed var(--glass-border);
    padding-left: 1rem;
    display: grid;
    gap: 0.6rem;
}

.journal-week-dailies__title {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.journal-week-dailies__list {
    display: grid;
    gap: 0.5rem;
}

.journal-entry-compact {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.journal-entry-compact:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
}

.journal-entry-compact__date {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 3.5rem;
}

.journal-entry-compact__title {
    font-size: 0.85rem;
}
.journal-link-hover {
    position: absolute;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.75rem;
    z-index: 10;
    pointer-events: auto;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.journal-link-hover.is-visible {
    display: inline-flex;
}

.journal-link-hover-edit {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.theme-minimalism-dark .journal-link-hover {
    background: rgba(20, 20, 24, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
}

.journal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

.journal-tags-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.journal-tag-chip {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    background: var(--glass-bg);
    color: var(--text-primary);
}

.journal-tag-input {
    flex: 1;
    min-width: 180px;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.8rem;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.journal-tag-input::placeholder {
    color: var(--text-secondary);
}

.journal-type-toggle .active {
    background: var(--glass-bg-active);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.journal-toggle-switch {
    margin-left: auto;
    display: inline-flex;
    gap: 0.18rem;
    padding: 0.22rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.journal-toggle-switch button {
    height: 1.8rem;
    width: auto;
    min-width: 3.2rem;
    padding: 0 0.78rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.journal-toggle-switch button.active {
    background: rgba(255, 255, 255, 0.9);
    color: #101010;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.journal-fullscreen .fullscreen-only {
    display: inline-flex;
}

.fullscreen-only {
    display: none;
}

.journal-toast {
    position: sticky;
    top: 0.5rem;
    margin: 0 auto;
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--text-primary);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 2;
}

.journal-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Journal Fullscreen */
.journal-fullscreen .journal-fullscreen-toggle {
    background: var(--glass-bg-active);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.journal-title-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

body.journal-fullscreen,
body.journal-fullscreen .app-container {
    overflow: hidden !important;
}

body.journal-fullscreen .mobile-topbar,
body.journal-fullscreen .app-main-header,
body.journal-fullscreen .app-sidebar {
    display: none !important;
}

body.journal-fullscreen .app-container > main {
    width: 100%;
    margin: 0;
    padding-top: 0 !important;
}

body.journal-fullscreen #page-content {
    height: 100dvh;
    min-height: 100dvh;
    padding: max(env(safe-area-inset-top), 0.6rem) 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    display: block;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.journal-fullscreen .max-w-4xl {
    max-width: min(1520px, calc(100vw - 1.5rem)) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.journal-fullscreen .app-page-shell {
    gap: 0 !important;
    min-height: auto;
}

body.journal-fullscreen .journal-compose {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    min-height: calc(100dvh - max(env(safe-area-inset-top), 0.6rem) - (0.75rem + env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

body.journal-fullscreen .journal-header-title p {
    display: block;
    margin-top: 0.35rem;
    opacity: 0.8;
}

body.journal-fullscreen .journal-header-row {
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

body.journal-fullscreen .journal-save-btn-top {
    background: #0f0f0f;
    color: #ffffff;
    border-color: transparent;
}

body.journal-fullscreen .journal-save-btn-top:hover {
    background: #000000;
}

body.journal-fullscreen .journal-title-input {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.12);
}

body.journal-fullscreen .journal-editor {
    flex: 1 1 auto;
    min-height: clamp(320px, 48dvh, 70dvh);
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 14px 30px rgba(0, 0, 0, 0.08);
}

body.journal-fullscreen .journal-header-actions {
    width: 100%;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.journal-fullscreen .journal-header-actions .glass-button {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 0;
    justify-content: center;
}

body.theme-minimalism-dark.journal-fullscreen .journal-compose {
    background: rgba(10, 10, 12, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

body.theme-minimalism-dark.journal-fullscreen .journal-header-title h2,
body.theme-minimalism-dark.journal-fullscreen .journal-header-title p,
body.theme-minimalism-dark.journal-fullscreen #journal-date {
    color: var(--text-primary);
    opacity: 0.9;
}

body.theme-minimalism-dark.journal-fullscreen .journal-title-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

body.theme-minimalism-dark.journal-fullscreen .journal-editor {
    background: rgba(20, 20, 24, 0.98);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 40px rgba(0, 0, 0, 0.45);
}

body.theme-minimalism-dark.journal-fullscreen .journal-editor[data-placeholder]:empty:before {
    color: var(--text-secondary);
}

body.theme-minimalism-dark.journal-fullscreen .journal-fullscreen-toggle,
body.theme-minimalism-dark.journal-fullscreen .journal-save-btn-top {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
}

body.theme-minimalism-dark.journal-fullscreen .journal-save-btn-top {
    background: #f2f2f0;
    color: #0c0d10;
    border-color: transparent;
}

.theme-minimalism-dark .journal-link-panel {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.theme-minimalism-dark .journal-link-field input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}

body.journal-fullscreen .journal-save-row {
    display: none;
}

body.journal-fullscreen .journal-tags,
body.journal-fullscreen .glass-panel + .glass-panel {
    display: none;
}
/* Theme Switcher */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
}

.theme-option {
    position: relative;
    height: 60px;
    border-radius: calc(var(--radius-control) + 0.1rem);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
}


.theme-option::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    opacity: 0.4;
    pointer-events: none;
}

.theme-option-label {
    position: absolute;
    left: 0.65rem;
    bottom: 0.55rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.45);
}

.theme-option.active {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25), var(--shadow-md);
}

/* Minimalism light/dark toggle */
.minimalism-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

body:not(.theme-minimalism):not(.theme-minimalism-dark) .minimalism-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
}

.minimalism-toggle i {
    width: 16px;
    height: 16px;
    opacity: 0.35;
    transition: all var(--transition-fast);
}

.minimalism-toggle i.is-active {
    opacity: 1;
    color: var(--text-primary);
}

.minimalism-toggle:hover {
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: var(--shadow-sm);
}

.theme-option:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.6);
    outline-offset: 3px;
}

/* Dashboard Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--section-gap);
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
    padding-top: var(--section-gap);
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: start;
}

.dashboard-module {
    --row-span: 2;
    grid-column: span var(--col-span, 1);
    grid-row: span var(--row-span);
    min-width: 180px;
    height: calc(var(--row-span) * 140px + (var(--row-span) - 1) * var(--section-gap));
    position: relative;
    overflow: visible;
}

.dashboard-module > *:not(.module-controls) {
    height: 100%;
    border-color: transparent;
}

.dashboard-module.compact {
    --row-span: 1;
}

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

.glass-card-footer {
    margin-top: auto;
}

.stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layout-editing .dashboard-module {
    cursor: move;
}

.layout-editing .dashboard-module.dragging {
    opacity: 0.6;
    outline: 1px dashed rgba(255, 255, 255, 0.35);
}

.module-controls {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.3rem;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 2;
}

.layout-editing .module-controls {
    opacity: 1;
    pointer-events: auto;
}

.module-size-button,
.module-focus-toggle {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.module-size-button.active {
    background: rgba(var(--accent-rgb), 0.28);
    border-color: rgba(var(--accent-rgb), 0.65);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}

.module-focus-toggle.active {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-rgb), 0.6);
    color: var(--text-primary);
}

.module-size-button:hover,
.module-focus-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
    color: var(--text-primary);
}

.module-size-button:focus-visible,
.module-focus-toggle:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.5);
    outline-offset: 2px;
}

.dashboard-module.module-focused > *:not(.module-controls) {
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    box-shadow: none;
}

.dashboard-module.module-focused::before {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: -6px;
    bottom: -6px;
    border-radius: calc(var(--border-radius-lg) + 8px);
    filter:
        drop-shadow(0 0 26px rgba(255, 255, 255, 0.24))
        drop-shadow(0 0 56px rgba(255, 255, 255, 0.18));
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}

/* Typography */
.text-gradient {
    background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.3; }
}

@keyframes ambientDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -12px, 0) scale(1.03); }
}

@keyframes ambientPulse {
    0%, 100% { opacity: 0.82; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2); }
    50% { box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.4); }
}

.animate-float {
    animation: float var(--ambient-float-duration) ease-in-out infinite;
}

.animate-breathe {
    animation: breathe var(--ambient-breathe-duration) ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-bg);
    border-radius: 3px;
    border: 1px solid var(--glass-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--glass-bg-hover);
}

/* Page Transitions */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-base);
}

.page-transition-exit {
    opacity: 1;
    transform: translateY(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: all var(--transition-base);
}

/* Utility Classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 14rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-main-header {
        align-items: flex-start;
    }

    #header-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --ios-safe-top: max(env(safe-area-inset-top), 2.9rem);
        --mobile-topbar-height: 4.2rem;
        --page-gutter: 0.9rem;
        --section-gap: 0.95rem;
        --control-height: 2.5rem;
    }

    .app-container {
        flex-direction: column;
        height: 100dvh;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .app-container > main {
        padding-top: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        position: relative;
        z-index: 1;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .mobile-topbar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 120;
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem;
        align-items: center;
        gap: 0.8rem;
        min-height: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        padding: calc(var(--ios-safe-top) + 0.45rem) 1rem 0.55rem;
        background: var(--mobile-nav-surface);
        backdrop-filter: blur(22px) saturate(132%);
        -webkit-backdrop-filter: blur(22px) saturate(132%);
        border-bottom: 1px solid var(--mobile-nav-border);
        color: var(--mobile-nav-ink);
    }

    .mobile-topbar__menu {
        width: 2.9rem;
        height: 2.9rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: calc(var(--radius-control) + 0.12rem);
        background: var(--mobile-menu-button-bg);
        color: var(--mobile-menu-button-ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .mobile-topbar__menu i {
        width: 1.45rem;
        height: 1.45rem;
    }

    .mobile-topbar__brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        justify-self: center;
        cursor: pointer;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .mobile-topbar__title {
        font-size: clamp(1.42rem, 5.2vw, 1.72rem);
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--mobile-nav-ink);
        white-space: nowrap;
    }

    .mobile-topbar__spacer {
        width: 2.9rem;
        height: 2.9rem;
    }

    .mobile-topbar .cme2-badge {
        font-size: 0.52rem;
        letter-spacing: 0.18em;
        padding: 0.38rem 0.78rem;
        border-radius: var(--radius-pill);
        border-color: var(--mobile-nav-badge-border);
        background: var(--mobile-nav-badge-bg);
        color: var(--mobile-nav-badge-ink);
        box-shadow: none;
    }

    .mobile-topbar .cme2-badge::after {
        content: none;
    }

    .mobile-topbar .cme2-badge:hover {
        color: var(--mobile-nav-badge-ink);
        border-color: var(--mobile-nav-badge-border);
    }

    .mobile-menu-backdrop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        z-index: 105;
        width: 100%;
        border: 0;
        background: rgba(0, 0, 0, 0.64);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
    }

    body.mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
    }

    .app-sidebar {
        position: fixed !important;
        z-index: 110;
        left: 0;
        right: 0;
        top: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        width: 100% !important;
        max-width: 100vw;
        height: calc(100dvh - var(--ios-safe-top) - var(--mobile-topbar-height)) !important;
        margin: 0;
        max-height: calc(100dvh - var(--ios-safe-top) - var(--mobile-topbar-height));
        overflow-y: auto !important;
        overflow-x: hidden;
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-100%);
        transition: transform var(--transition-fast), visibility 0s linear var(--transition-fast);
        background: var(--mobile-menu-surface) !important;
        border: 1px solid var(--mobile-menu-divider);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: 0 24px 44px rgba(0, 0, 0, 0.32);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        isolation: isolate;
    }

    body.mobile-menu-open .app-sidebar {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform var(--transition-fast);
    }

    body.mobile-menu-open .app-container > main {
        overflow: hidden !important;
    }

    body.mobile-menu-open #page-content {
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .app-logo-block {
        display: none;
    }

    .app-nav {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 1.25rem 1.2rem 1rem;
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .app-nav > * + * {
        margin-top: 0 !important;
    }

    .app-nav > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .app-nav .nav-item {
        width: 100%;
        min-width: 0;
        min-height: 3.35rem;
        padding: 0.7rem 0.9rem;
        justify-content: flex-start;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--mobile-menu-ink);
        font-size: 1.05rem;
        font-weight: 600;
    }

    .app-nav .nav-item:hover,
    .app-nav .nav-item.active {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid var(--mobile-menu-divider);
    }

    .app-nav .nav-item i {
        opacity: 0.96;
    }

    .app-clock-module {
        display: block;
        margin-top: auto;
        flex: 0 0 auto;
        padding: 1.3rem 1.2rem 1.4rem;
        border-top: 0;
        border-bottom: 1px solid var(--mobile-menu-divider);
    }

    .app-clock-module .clock-panel {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .app-clock-module #clock {
        color: var(--mobile-menu-ink);
        font-size: 2rem;
    }

    .app-clock-module #date,
    .app-clock-module .text-\[var\(--text-secondary\)\] {
        color: var(--mobile-menu-muted) !important;
    }

    .app-settings-nav {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 1rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
        border-top: 0;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .app-settings-nav > * + * {
        margin-top: 0 !important;
    }

    .app-settings-nav > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .app-settings-nav .nav-item {
        margin-top: 0 !important;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
        text-align: left;
        min-height: 3.25rem;
        padding: 0.7rem 0.9rem;
        background: transparent;
        color: var(--mobile-menu-ink);
        border: 0;
        border-radius: var(--radius-control);
        font-size: 1.05rem;
    }

    .app-main-header {
        padding: var(--space-4) var(--page-gutter);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        position: static !important;
        top: auto !important;
    }

    .app-main-header h1 {
        font-size: clamp(1.82rem, 8vw, 2.2rem);
        line-height: 1.16;
    }

    #header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        align-items: stretch;
    }

    #header-actions .time-nudge-stack {
        grid-column: 1 / -1;
        width: 100%;
    }

    #header-actions .time-nudge {
        width: 100%;
        max-width: 100%;
    }

    #header-actions .glass-button {
        width: 100%;
        justify-content: center;
        min-width: 0;
    }

    .time-nudge-panel {
        width: min(100%, 100vw - 2rem);
        left: 0;
        right: auto;
    }

    .app-page-content,
    #page-content {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        padding-bottom: calc(var(--page-gutter) + env(safe-area-inset-bottom)) !important;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: 100%;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-page-shell {
        gap: var(--section-gap);
        min-width: 0;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--section-gap);
        grid-auto-rows: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .dashboard-module {
        min-width: 0;
        max-width: 100%;
        height: auto;
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .dashboard-module > * {
        min-width: 0;
        max-width: 100%;
    }

    .glass-panel,
    .glass-card,
    .glass-button,
    .glass-input,
    .nav-item,
    .time-nudge,
    .time-nudge-panel {
        max-width: 100%;
        min-width: 0;
    }

    .journal-link-panel.is-visible {
        grid-template-columns: 1fr;
    }

    .journal-compose {
        padding: var(--space-4);
        overflow: hidden;
    }

    .journal-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .journal-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .journal-header-actions .glass-button {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: 0;
        justify-content: center;
    }

    .journal-header-actions .journal-save-btn-top {
        flex-basis: 100%;
    }

    .journal-meta-row {
        grid-template-columns: 1fr !important;
    }

    .journal-toolbar {
        gap: 0.55rem;
        padding: 0.65rem;
    }

    .journal-toolbar__group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .journal-toolbar__group > button {
        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;
    }

    .journal-toolbar__group > button[data-format-action^="h"] {
        flex: 0 0 auto;
        min-width: 2.3rem;
        height: 2rem;
    }

    .journal-toggle-switch {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .journal-toggle-switch button {
        width: auto;
        min-width: 2.9rem;
    }

    .journal-save-row {
        justify-content: stretch;
    }

    .journal-save-btn {
        width: 100%;
        justify-content: center;
    }

    .declutter-actions {
        flex-direction: column;
    }

    .declutter-actions > button {
        width: 100%;
        justify-content: center;
    }

    .declutter-filter-controls,
    .journal-filter-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .declutter-filter-controls > div,
    .journal-filter-controls > div {
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
    }

    .journal-filter-controls > div:last-child {
        flex-basis: 100%;
    }

    .journal-tag-input {
        min-width: 0;
        width: 100%;
    }

    .journal-toggle-switch {
        margin-left: 0;
    }

    .settings-stack .flex.gap-2 {
        flex-wrap: wrap;
    }

    .settings-stack .flex.gap-2 > button {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 480px) {
    :root {
        --ios-safe-top: max(env(safe-area-inset-top), 2.6rem);
        --mobile-topbar-height: 3.95rem;
        --page-gutter: 0.65rem;
        --control-height: 2.4rem;
    }

    .app-sidebar {
        left: 0;
        right: 0;
        width: 100% !important;
        top: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        max-width: 100vw;
    }

    .mobile-topbar {
        grid-template-columns: 2.65rem 1fr 2.65rem;
        min-height: calc(var(--ios-safe-top) + var(--mobile-topbar-height));
        padding: calc(var(--ios-safe-top) + 0.34rem) 0.78rem 0.48rem;
    }

    .mobile-topbar__menu,
    .mobile-topbar__spacer {
        width: 2.65rem;
        height: 2.65rem;
    }

    .mobile-topbar__title {
        font-size: clamp(1.58rem, 7vw, 2.05rem);
    }

    .mobile-topbar .cme2-badge {
        font-size: 0.47rem;
        padding: 0.33rem 0.68rem;
    }

    .app-main-header {
        padding: var(--space-3) var(--page-gutter);
    }

    .app-page-content,
    #page-content {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }

    #header-actions {
        grid-template-columns: 1fr;
    }

    #header-actions .time-nudge-stack {
        grid-column: auto;
    }

    .journal-header-actions .glass-button {
        flex-basis: 100%;
    }

    .journal-filter-controls > div {
        flex-basis: 100%;
    }
}

/* Focus Visible for Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--text-primary);
}

/* Premium design system overrides */
.app-container {
    position: relative;
    isolation: isolate;
}

.app-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px circle at 12% -10%, rgba(var(--accent-rgb), 0.1), transparent 52%),
        radial-gradient(880px circle at 100% 8%, rgba(255, 255, 255, 0.05), transparent 46%),
        radial-gradient(1350px circle at 52% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    animation: ambientDrift var(--ambient-layer-duration) ease-in-out infinite;
    transform-origin: center;
}

.app-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%, transparent 74%, rgba(0, 0, 0, 0.16)),
        radial-gradient(760px circle at 50% -14%, rgba(255, 255, 255, 0.03), transparent 60%);
    opacity: 0.9;
    animation: ambientPulse calc(var(--ambient-layer-duration) * 1.15) ease-in-out infinite;
    transform-origin: center;
}

.app-container > * {
    position: relative;
    z-index: 1;
}

.app-main-header h1 {
    font-size: clamp(2.35rem, 4vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: var(--letter-spacing-tight);
    font-weight: 400;
}

.app-main-header p {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 38rem;
}

button,
a,
input,
select,
textarea {
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.app-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-12);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.app-breadcrumb__item {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: var(--line-height-ui);
}

button.app-breadcrumb__item {
    cursor: pointer;
    transition: color var(--transition-fast);
}

button.app-breadcrumb__item:hover {
    color: var(--text-primary);
}

.app-breadcrumb__item.is-current {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.app-breadcrumb__divider {
    opacity: 0.5;
}

.glass-panel {
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
}

.glass-card {
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
}

.glass-card:hover {
    box-shadow: var(--shadow-elevated);
}

.glass-button {
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-12);
    font-size: var(--font-size-15);
    font-weight: 500;
    line-height: var(--line-height-ui);
    letter-spacing: 0.005em;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.glass-button.btn-sm {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    font-size: var(--font-size-12);
}

.glass-button.btn-lg {
    min-height: var(--control-height-lg);
    padding: 0 var(--space-5);
    font-size: var(--font-size-18);
}

.glass-input,
.journal-editor,
select,
textarea {
    font-size: var(--font-size-15);
    line-height: var(--line-height-ui);
    border-radius: var(--radius-12);
}

.nav-item,
.journal-toolbar > button,
.module-size-button,
.module-focus-toggle {
    line-height: var(--line-height-ui);
}

.nav-item {
    font-size: var(--font-size-15);
    font-weight: 500;
}

#page-content .glass-panel h2,
#page-content .glass-card h2 {
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.22;
    font-weight: 400;
}

#page-content .glass-panel h3,
#page-content .glass-card h3 {
    letter-spacing: -0.01em;
    line-height: 1.4;
    font-weight: 500;
}

.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }

.sync-indicator {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(16, 16, 18, 0.78);
    backdrop-filter: blur(12px);
    color: #f8fafc;
    font-size: var(--font-size-12);
    letter-spacing: 0.01em;
    z-index: 95;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.sync-indicator.is-online {
    background: rgba(5, 86, 46, 0.7);
}

.sync-indicator.is-offline {
    background: rgba(146, 64, 14, 0.75);
}

.sync-indicator.is-flashing {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.state-card {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-16);
    padding: var(--space-6);
    text-align: center;
    background: var(--surface-1);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
}

.state-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-12);
    margin: 0 auto var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
}

.state-title {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-2);
}

.state-message {
    color: var(--text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-body);
}

.state-actions {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.state-error .state-icon {
    color: #fee2e2;
    background: rgba(127, 29, 29, 0.55);
}

.state-loading__icon {
    margin-bottom: var(--space-4);
}

.spark-spinner {
    width: 28px;
    height: 28px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.state-skeleton {
    margin-top: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.state-skeleton span {
    display: block;
    height: 0.6rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.06));
    background-size: 220% 100%;
    animation: skeleton 1.15s ease-in-out infinite;
}

.state-skeleton span:nth-child(2) { width: 86%; margin: 0 auto; }
.state-skeleton span:nth-child(3) { width: 72%; margin: 0 auto; }

@keyframes skeleton {
    0% { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

.hint-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-12);
    border: 1px solid var(--glass-border);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), rgba(255, 255, 255, 0.07));
    color: var(--text-primary);
    font-size: var(--font-size-12);
    line-height: var(--line-height-ui);
}

.hint-banner strong {
    font-weight: var(--font-weight-semibold);
}

.autosave-status {
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    background: rgba(var(--accent-rgb), 0.18);
    font-size: var(--font-size-12);
    letter-spacing: 0.01em;
}

.progress-track {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.progress-track__fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-info-500), var(--accent-primary));
    border-radius: var(--radius-pill);
    transition: width 300ms ease;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    transition-delay: 0.3s;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%) translateY(4px);
    background: rgba(10, 10, 12, 0.92);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-8);
    padding: 0.35rem 0.5rem;
    font-size: var(--font-size-12);
    white-space: nowrap;
    z-index: 150;
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: rgba(10, 10, 12, 0.92);
    z-index: 149;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary-300);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .spark-spinner,
    .state-skeleton span,
    .time-nudge,
    .animate-float,
    .animate-breathe {
        animation: none !important;
    }
}

@media (pointer: coarse) {
    .glass-button,
    button,
    input,
    textarea,
    select,
    .nav-item {
        min-height: 44px;
    }

    .journal-toolbar > button,
    .module-size-button,
    .module-focus-toggle,
    .declutter-delete,
    .journal-favorite-btn {
        min-width: 44px;
        min-height: 44px;
    }

    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .sync-indicator {
        right: 0.65rem;
        left: 0.65rem;
        bottom: calc(0.6rem + env(safe-area-inset-bottom));
        justify-content: center;
    }

    .app-main-header h1 {
        font-size: clamp(var(--font-size-30), 8vw, var(--font-size-37));
    }
}

/* Mapping */
.mapping-page {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-width: 0;
}

.mapping-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--section-gap);
    align-items: start;
}

.mapping-main {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-width: 0;
}

.mapping-library,
.mapping-inspector {
    min-width: 0;
}

.mapping-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.mapping-panel-heading__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.mapping-panel-heading__eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mapping-panel-heading__title {
    font-size: 1.05rem;
    font-weight: 600;
}

.mapping-panel-heading__copy {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mapping-library__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: min(72vh, 860px);
    overflow-y: auto;
    padding-right: 0.15rem;
}

.mapping-library__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.mapping-library__open {
    width: 100%;
    text-align: left;
    padding: 0.9rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.mapping-library__open:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.mapping-library__item.is-active .mapping-library__open {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.38);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
}

.mapping-library__title,
.mapping-library__meta,
.mapping-library__preview {
    display: block;
}

.mapping-library__title {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mapping-library__meta {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.mapping-library__preview {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.mapping-library__delete {
    width: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.mapping-library__delete:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.mapping-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.mapping-toolbar__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.mapping-toolbar__label,
.mapping-inspector__label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mapping-toolbar__title {
    min-height: 3rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.mapping-toolbar__summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mapping-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: flex-end;
}

.mapping-toolbar__actions .mapping-fullscreen-toggle {
    background: rgba(255, 255, 255, 0.05);
}

.mapping-workspace {
    overflow: hidden;
    padding: 0;
}

.mapping-workspace__hint {
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.mapping-viewport {
    height: min(72vh, 860px);
    overflow: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 24%),
        rgba(8, 10, 14, 0.58);
    cursor: grab;
}

.mapping-surface {
    position: relative;
    width: 1960px;
    height: 1200px;
    background:
        radial-gradient(circle at 18% 16%, rgba(177, 196, 219, 0.18), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(197, 188, 226, 0.2), transparent 22%),
        linear-gradient(180deg, #eef1f5, #e3e8ee);
}

.mapping-viewport.is-pointer-down,
.mapping-viewport.is-panning {
    cursor: grabbing;
}

.mapping-viewport.is-panning {
    user-select: none;
}

.mapping-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(76, 94, 114, 0.14) 0.8px, transparent 0.8px);
    background-size: 22px 22px;
    opacity: 0.34;
    pointer-events: none;
}

.mapping-connections,
.mapping-nodes {
    position: absolute;
    inset: 0;
}

.mapping-connections {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mapping-connection {
    fill: none;
    stroke: rgba(29, 38, 51, 0.88);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-opacity: 0.92;
}

.mapping-node {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 164px;
    max-width: 220px;
    padding: 0.78rem 1rem 0.74rem;
    border-radius: 0.62rem;
    border: 1px solid rgba(64, 83, 103, 0.58);
    background: color-mix(in srgb, var(--node-accent) 76%, #edf4fb 24%);
    box-shadow:
        0 4px 10px rgba(34, 48, 64, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
    text-align: center;
    color: #1d2b3a;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.mapping-node.is-draggable {
    cursor: grab;
}

.mapping-node::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.32);
    opacity: 0.7;
    pointer-events: none;
}

.mapping-node:hover {
    transform: translate(-50%, calc(-50% - 2px));
    border-color: rgba(53, 76, 99, 0.72);
    box-shadow:
        0 10px 20px rgba(27, 39, 52, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.mapping-node.is-selected {
    border-color: #121923;
    box-shadow:
        0 0 0 2px rgba(18, 25, 35, 0.82),
        0 12px 24px rgba(18, 25, 35, 0.18);
}

.mapping-node.is-drop-target {
    border-color: rgba(42, 58, 79, 0.82);
    box-shadow:
        0 0 0 3px rgba(42, 58, 79, 0.24),
        0 14px 24px rgba(24, 34, 46, 0.16);
}

.mapping-node.is-dragging {
    z-index: 30;
    opacity: 0.92;
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow:
        0 18px 32px rgba(18, 29, 40, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.mapping-surface.is-node-dragging,
.mapping-surface.is-node-dragging .mapping-node.is-draggable {
    cursor: grabbing;
}

.mapping-node.is-root {
    min-width: 214px;
    max-width: 264px;
    padding-top: 0.92rem;
    padding-bottom: 0.9rem;
    background: color-mix(in srgb, var(--node-accent) 82%, #efe7fa 18%);
    color: #171220;
    box-shadow:
        0 8px 18px rgba(42, 35, 58, 0.18),
        0 0 0 2px rgba(29, 21, 43, 0.88);
}

.mapping-node__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.28;
    color: inherit;
}

.mapping-node__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.48rem;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: rgba(23, 18, 32, 0.86);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mapping-node__fold {
    position: absolute;
    top: 0.38rem;
    right: 0.44rem;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: rgba(22, 30, 40, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.mapping-side-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.mapping-side-toggle .glass-button.is-active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.mapping-inspector {
    min-height: 18rem;
}

.mapping-inspector__section + .mapping-inspector__section {
    margin-top: 1rem;
}

.mapping-inspector__notes {
    min-height: 8.5rem;
    resize: vertical;
}

.mapping-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.mapping-color-swatch {
    position: relative;
    display: inline-flex;
}

.mapping-color-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mapping-color-swatch span {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--swatch);
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.mapping-color-swatch input:checked + span {
    transform: scale(1.08);
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.mapping-inspector__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.mapping-inspector__stats > div {
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mapping-inspector__stat-label {
    display: block;
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.mapping-inspector__actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
}

.mapping-inspector__actions .glass-button {
    justify-content: center;
}

.mapping-inspector__empty {
    padding: 1rem 0;
}

.mapping-inspector__empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.mapping-inspector__empty-copy {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

body.mapping-fullscreen,
body.mapping-fullscreen .app-container {
    overflow: hidden !important;
}

body.mapping-fullscreen .mobile-topbar,
body.mapping-fullscreen .app-main-header,
body.mapping-fullscreen .app-sidebar {
    display: none !important;
}

body.mapping-fullscreen .app-container > main {
    width: 100%;
    margin: 0;
    padding-top: 0 !important;
}

body.mapping-fullscreen #page-content {
    height: 100dvh;
    min-height: 100dvh;
    padding: max(env(safe-area-inset-top), 0.6rem) 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    display: block;
    overflow: hidden !important;
}

body.mapping-fullscreen .app-page-shell {
    gap: 0 !important;
    min-height: 100%;
}

body.mapping-fullscreen .mapping-page {
    height: 100%;
}

body.mapping-fullscreen .mapping-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 300px);
    min-height: calc(100dvh - max(env(safe-area-inset-top), 0.6rem) - (0.75rem + env(safe-area-inset-bottom)));
}

body.mapping-fullscreen .mapping-library,
body.mapping-fullscreen .mapping-inspector,
body.mapping-fullscreen .mapping-toolbar,
body.mapping-fullscreen .mapping-workspace {
    background: rgba(10, 10, 12, 0.88);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.36);
}

body.mapping-fullscreen .mapping-main {
    min-height: 100%;
}

body.mapping-fullscreen .mapping-workspace {
    flex: 1 1 auto;
    min-height: 0;
}

body.mapping-fullscreen .mapping-viewport {
    height: calc(100dvh - 12.5rem);
    max-height: none;
}

@media (max-width: 1320px) {
    .mapping-layout {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    }

    .mapping-inspector {
        grid-column: 1 / -1;
    }

    .mapping-inspector__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mapping-inspector__actions .glass-button {
        flex: 1 1 180px;
    }
}

@media (max-width: 980px) {
    .mapping-layout {
        grid-template-columns: 1fr;
    }

    .mapping-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mapping-toolbar__actions {
        justify-content: flex-start;
    }

    .mapping-viewport {
        height: 65vh;
    }
}

@media (max-width: 640px) {
    .mapping-library,
    .mapping-toolbar,
    .mapping-inspector {
        padding: 1rem;
    }

    .mapping-library__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .mapping-library__delete {
        width: 100%;
        min-width: 0;
        min-height: 2.6rem;
        border-radius: 0.9rem;
    }

    .mapping-toolbar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mapping-node {
        min-width: 150px;
        max-width: 192px;
    }

    .mapping-surface {
        width: 1560px;
        height: 1080px;
    }
}

/* Cookie consent */
.cookie-consent-root {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 220;
    pointer-events: none;
    padding: 0.85rem;
}

.cookie-consent-banner {
    pointer-events: auto;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--glass-border-strong);
    background: linear-gradient(145deg, rgba(10, 12, 18, 0.92), rgba(14, 16, 22, 0.88));
    color: #f8fafc;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
    padding: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.cookie-consent-banner.is-hidden {
    display: none;
}

.cookie-consent-banner h2 {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.cookie-consent-banner p {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.88);
}

.cookie-consent-banner__links {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.76rem;
    color: rgba(248, 250, 252, 0.7);
}

.cookie-consent-banner__links a {
    color: #d5e7ff;
    text-decoration: underline;
}

.cookie-consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.cookie-consent-btn {
    font-size: 0.82rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
}

.cookie-consent-panel {
    position: fixed;
    inset: 0;
    pointer-events: auto;
}

.cookie-consent-panel.is-hidden {
    display: none;
}

.cookie-consent-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 16, 0.62);
    backdrop-filter: blur(4px);
}

.cookie-consent-panel__card {
    position: absolute;
    right: 0.95rem;
    bottom: 0.95rem;
    width: min(430px, calc(100vw - 1.9rem));
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(17, 19, 24, 0.98), rgba(12, 14, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    padding: 1rem;
    box-shadow: 0 28px 66px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
}

.cookie-consent-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.45rem;
}

.cookie-consent-panel__header h3 {
    font-size: 1rem;
}

.cookie-consent-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    cursor: pointer;
}

.cookie-consent-panel__lead {
    color: rgba(248, 250, 252, 0.75);
    font-size: 0.83rem;
    line-height: 1.4;
}

.cookie-consent-panel__rows {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.5rem;
}

.cookie-consent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
}

.cookie-consent-row.is-required {
    opacity: 0.8;
}

.cookie-consent-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #7ec8ff;
}

.cookie-consent-panel__actions {
    margin-top: 0.9rem;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.cookie-consent-reopen {
    pointer-events: auto;
    position: fixed;
    right: 0.9rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    z-index: 221;
    isolation: isolate;
    overflow: visible;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(15, 17, 21, 0.96);
    color: #f8fafc;
    font-size: 0.76rem;
    padding: 0.45rem 0.78rem;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
}

.cookie-consent-reopen::before {
    content: '';
    position: absolute;
    inset: -0.28rem;
    z-index: -1;
    border-radius: inherit;
    background: rgba(8, 10, 13, 0.82);
    filter: blur(14px);
    opacity: 0.92;
}

@media (max-width: 880px) {
    .cookie-consent-banner {
        grid-template-columns: 1fr;
    }

    .cookie-consent-banner__actions {
        justify-content: flex-start;
    }

    .cookie-consent-panel__card {
        left: 0.95rem;
    }
}

/* ─── Daily Check-In / Reflections ─────────────────────────────────────── */

.checkin-page {
    padding-bottom: 4rem;
}

/* Step progress */
.checkin-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.75rem;
}

.checkin-stepper__step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: color 0.25s;
}

.checkin-stepper__step.is-active {
    color: var(--text-primary);
    font-weight: 600;
}

.checkin-stepper__step.is-done {
    color: var(--accent-primary);
}

.checkin-stepper__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1.5px solid var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    flex-shrink: 0;
}

.checkin-stepper__step.is-active .checkin-stepper__num {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary, #0f1117);
}

.checkin-stepper__step.is-done .checkin-stepper__num {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.checkin-stepper__line {
    flex: 1;
    height: 1.5px;
    background: rgba(255,255,255,0.12);
    margin: 0 0.5rem;
    transition: background 0.3s;
}

.checkin-stepper__line.is-done {
    background: var(--accent-primary);
    opacity: 0.55;
}

/* Step card */
.checkin-card {
    background: var(--glass-panel-bg, linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)));
    backdrop-filter: blur(var(--glass-panel-blur, 24px));
    -webkit-backdrop-filter: blur(var(--glass-panel-blur, 24px));
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 1.25rem;
    padding: 2rem;
    animation: checkin-card-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes checkin-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.checkin-card__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 0.3rem;
}

.checkin-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

.checkin-card__sub {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Emotion grid */
.checkin-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.checkin-emotion-section {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.checkin-emotion-section__label {
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.checkin-emotion-chip {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    user-select: none;
}

.checkin-emotion-chip:hover {
    border-color: rgba(255,255,255,0.28);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.checkin-emotion-chip.is-selected {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary, #0f1117);
    font-weight: 600;
}

.checkin-emotion-selected-summary {
    min-height: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* Day rating */
.checkin-rating {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: space-between;
}

.checkin-rating__option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.4rem;
    border-radius: 0.85rem;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.checkin-rating__option:hover {
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-2px);
}

.checkin-rating__option.is-selected {
    border-color: var(--accent-primary);
    background: rgba(255,255,255,0.1);
}

.checkin-rating__emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.checkin-rating__label {
    font-size: 0.65rem;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Textarea field groups */
.checkin-field {
    margin-bottom: 1.1rem;
}

.checkin-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

/* Card actions row */
.checkin-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.checkin-actions--end {
    justify-content: flex-end;
}

/* Completion card */
.checkin-complete {
    text-align: center;
    padding: 2.5rem 2rem;
}

.checkin-complete__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-primary, #0f1117);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    animation: checkin-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes checkin-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.checkin-complete__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.checkin-complete__sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.checkin-complete__summary {
    text-align: left;
    background: rgba(255,255,255,0.05);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.checkin-complete__summary-row {
    display: flex;
    gap: 0.5rem;
}

.checkin-complete__summary-label {
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 5.5rem;
}

.checkin-complete__summary-value {
    color: var(--text-primary);
}

/* History */
.checkin-history__heading {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.checkin-history__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkin-history__item {
    background: var(--glass-panel-bg);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
    transition: border-color 0.15s;
    cursor: default;
}

.checkin-history__item:hover {
    border-color: rgba(255,255,255,0.18);
}

.checkin-history__rating-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding-top: 0.1rem;
}

.checkin-history__emoji {
    font-size: 1.4rem;
    line-height: 1;
}

.checkin-history__score {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.checkin-history__content {}

.checkin-history__date {
    font-size: 0.72rem;
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.checkin-history__emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
}

.checkin-history__emotion-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
}

.checkin-history__excerpt {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.checkin-history__empty {
    font-size: 0.83rem;
    color: var(--text-secondary);
    opacity: 0.6;
    font-style: italic;
    padding: 0.5rem 0;
}

@media (max-width: 640px) {
    .checkin-card {
        padding: 1.4rem 1.1rem;
    }
    .checkin-rating {
        gap: 0.35rem;
    }
    .checkin-rating__label {
        display: none;
    }
}

/* ── MFA settings ───────────────────────────────────────────────────────────── */

.mfa-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.mfa-badge--active {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.mfa-badge--inactive {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mfa-setup-panel {
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.mfa-setup-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.mfa-setup-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: -0.4rem;
}
.mfa-qr-wrap {
    background: #fff;
    padding: 0.6rem;
    border-radius: 0.75rem;
}
.mfa-qr {
    width: 160px;
    height: 160px;
    display: block;
}
.mfa-manual {
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
}
.mfa-manual summary {
    list-style: none;
    opacity: 0.7;
}
.mfa-secret {
    display: block;
    margin-top: 0.4rem;
    font-family: monospace;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.07);
    padding: 0.4rem 0.7rem;
    border-radius: 0.4rem;
    letter-spacing: 0.05em;
    word-break: break-all;
    text-align: center;
}
.mfa-verify-row {
    display: flex;
    gap: 0.6rem;
    width: 100%;
    max-width: 320px;
}
.mfa-code-input {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
}
.mfa-setup-error {
    font-size: 0.8rem;
    color: #fca5a5;
    text-align: center;
}

/* ── Auth page ──────────────────────────────────────────────────────────────── */

.auth-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-gradient);
}

/* Ambient orbs */
.auth-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.35;
    animation: float 8s ease-in-out infinite;
}
.auth-orb--1 {
    width: 520px;
    height: 520px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.5), transparent 70%);
    animation-delay: 0s;
}
.auth-orb--2 {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -80px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.4), transparent 70%);
    animation-delay: -4s;
}

/* Two-column layout */
.auth-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    padding: 2rem;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

/* Left branding column */
.auth-brand-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.auth-brand-inner {
    max-width: 340px;
}
.auth-brand-mark {
    font-size: 2.2rem;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
    display: block;
}
.auth-brand-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.auth-brand-tagline {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}
.auth-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.auth-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}
.auth-feature-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

/* Right form column */
.auth-form-side {
    flex: 0 0 380px;
}
.auth-card {
    padding: 2.25rem;
    border-radius: 1.75rem;
}

/* Card header */
.auth-card-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-card-icon {
    font-size: 1.4rem;
    color: var(--accent-primary);
    margin-bottom: 0.6rem;
}
.auth-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.auth-card-sub {
    font-size: 0.83rem;
    color: var(--text-secondary);
}

/* Tabs */
.auth-tabs {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 1.5rem;
    gap: 0;
}
.auth-tab-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transition: left 0.25s ease, width 0.25s ease;
    pointer-events: none;
}
.auth-tab {
    flex: 1;
    padding: 0.5rem 0;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color 0.2s;
}
.auth-tab.is-active {
    color: var(--text-primary);
}

/* Alert */
.auth-alert {
    padding: 0.7rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.83rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}
.auth-alert--error {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.25);
}
.auth-alert--success {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Form fields */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.auth-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon {
    position: absolute;
    left: 0.9rem;
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.7;
}
.auth-input {
    width: 100%;
    padding: 0.7rem 2.8rem 0.7rem 2.6rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
}
.auth-eye-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--text-secondary);
    opacity: 0.6;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
}
.auth-eye-btn:hover {
    opacity: 1;
}

/* Submit button */
.auth-submit {
    width: 100%;
    padding: 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Terms */
.auth-terms {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.6;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* Mobile: stack to single column */
@media (max-width: 720px) {
    .auth-layout {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.25rem;
        justify-content: flex-start;
        padding-top: 10vh;
    }
    .auth-brand-side {
        justify-content: center;
        text-align: center;
    }
    .auth-brand-inner {
        max-width: 100%;
    }
    .auth-brand-name {
        font-size: 2.1rem;
    }
    .auth-feature-list {
        display: none;
    }
    .auth-form-side {
        flex: 0 0 auto;
        width: 100%;
        max-width: 420px;
    }
    .auth-card {
        padding: 1.75rem 1.5rem;
    }
}