/* ═══════════════════════════════════════════════════════════════════
   RoutineGrid — Premium Redesign v4.0
   Dark-first Glassmorphism Design System
   WCAG 2.2 AA Compliant | Vibrant & Animated
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. RESET ────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input { font: inherit; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* ── 2. DESIGN TOKENS — SHARED ───────────────────────────────────── */
:root {
    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --fs-xs:  11px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  18px;
    --fs-xl:  22px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;
    --fs-4xl: 48px;
    --fs-5xl: 64px;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    /* Spacing — 4pt grid */
    --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
    --sp-4:  16px;  --sp-5:  20px;  --sp-6:  24px;
    --sp-7:  32px;  --sp-8:  40px;  --sp-9:  48px;
    --sp-10: 56px;  --sp-11: 64px;  --sp-12: 80px;

    /* Radius */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  36px;
    --r-pill: 999px;
    --r-full: 50%;

    /* Motion */
    --dur-instant: 80ms;
    --dur-fast:    200ms;
    --dur-normal:  350ms;
    --dur-slow:    600ms;
    --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --container-max: 740px;
    --header-h: 64px;
    --sidebar-w: 300px;
    --touch-min: 44px;
}

/* ── 3. DARK THEME (Primary) ─────────────────────────────────────── */
[data-theme="dark"] {
    /* Backgrounds */
    --c-bg:              #080b14;
    --c-bg-2:            #0d1120;
    --c-surface:         rgba(255,255,255,0.045);
    --c-surface-alt:     rgba(255,255,255,0.07);
    --c-surface-raised:  rgba(255,255,255,0.09);
    --c-glass:           rgba(13,17,32,0.7);

    /* Borders */
    --c-border:          rgba(255,255,255,0.08);
    --c-border-strong:   rgba(255,255,255,0.16);
    --c-divider:         rgba(255,255,255,0.06);

    /* Shadows */
    --c-shadow:          rgba(0,0,0,0.5);
    --c-shadow-md:       rgba(0,0,0,0.65);
    --c-shadow-lg:       rgba(0,0,0,0.8);
    --c-glow-primary:    rgba(124, 58, 237, 0.35);
    --c-glow-accent:     rgba(99, 200, 255, 0.25);

    /* Text */
    --c-text:            #f0f4ff;
    --c-text-2:          #8b9cc8;
    --c-text-3:          #5c6a90;
    --c-text-4:          #3a4460;

    /* Brand Colors */
    --c-primary:         #7c3aed;
    --c-primary-light:   #9f67f7;
    --c-primary-dark:    #5b21b6;
    --c-primary-bg:      rgba(124,58,237,0.12);
    --c-primary-hover:   rgba(124,58,237,0.2);

    --c-accent:          #63c8ff;
    --c-accent-dark:     #0ea5e9;
    --c-accent-bg:       rgba(99,200,255,0.1);

    --c-success:         #22d3a0;
    --c-success-dark:    #10b981;
    --c-success-bg:      rgba(34,211,160,0.12);

    --c-warning:         #fbbf24;
    --c-warning-bg:      rgba(251,191,36,0.12);

    --c-danger:          #f87171;
    --c-danger-dark:     #ef4444;
    --c-danger-bg:       rgba(248,113,113,0.12);

    /* Gradients */
    --g-primary:         linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    --g-accent:          linear-gradient(135deg, #63c8ff 0%, #0ea5e9 100%);
    --g-success:         linear-gradient(135deg, #22d3a0 0%, #10b981 100%);
    --g-brand:           linear-gradient(135deg, #7c3aed 0%, #63c8ff 60%, #22d3a0 100%);
    --g-fire:            linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --g-card:            linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    --g-bg:              radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,0.18) 0%, transparent 70%),
                         radial-gradient(ellipse 60% 40% at 90% 80%, rgba(99,200,255,0.08) 0%, transparent 60%),
                         #080b14;

    /* UI Components */
    --c-header-bg:       rgba(8,11,20,0.88);
    --c-sidebar-bg:      rgba(10,13,24,0.96);
    --c-overlay:         rgba(0,0,0,0.7);
    --c-banner-bg:       linear-gradient(90deg, #7c3aed, #0ea5e9);
    --c-banner-text:     #ffffff;

    --c-input-bg:        rgba(255,255,255,0.06);
    --c-input-border:    rgba(255,255,255,0.1);
    --c-input-focus:     #7c3aed;

    --c-check-bg:        rgba(255,255,255,0.06);
    --c-check-border:    rgba(255,255,255,0.12);
    --c-check-hover:     rgba(124,58,237,0.2);
    --c-check-on-from:   #7c3aed;
    --c-check-on-to:     #22d3a0;

    --c-heat-0:          rgba(255,255,255,0.04);
    --c-heat-1:          rgba(124,58,237,0.2);
    --c-heat-2:          rgba(124,58,237,0.5);
    --c-heat-3:          #7c3aed;
    --c-heat-t0:         #3a4460;
    --c-heat-t1:         #9f67f7;
    --c-heat-t2:         #ffffff;

    --c-xp-from:         #7c3aed;
    --c-xp-to:           #22d3a0;
    --c-xp-track:        rgba(255,255,255,0.08);

    color-scheme: dark;
}

/* ── 4. LIGHT THEME ──────────────────────────────────────────────── */
[data-theme="light"] {
    --c-bg:              #f3f4f8;
    --c-bg-2:            #eaecf3;
    --c-surface:         #ffffff;
    --c-surface-alt:     #f7f8fc;
    --c-surface-raised:  #ffffff;
    --c-glass:           rgba(255,255,255,0.85);

    --c-border:          rgba(0,0,0,0.07);
    --c-border-strong:   rgba(0,0,0,0.14);
    --c-divider:         rgba(0,0,0,0.05);

    --c-shadow:          rgba(100,80,200,0.07);
    --c-shadow-md:       rgba(100,80,200,0.12);
    --c-shadow-lg:       rgba(100,80,200,0.18);
    --c-glow-primary:    rgba(124, 58, 237, 0.2);
    --c-glow-accent:     rgba(99, 200, 255, 0.15);

    --c-text:            #0f1323;
    --c-text-2:          #4a527a;
    --c-text-3:          #7c86a8;
    --c-text-4:          #b0b8d4;

    --c-primary:         #7c3aed;
    --c-primary-light:   #9f67f7;
    --c-primary-dark:    #5b21b6;
    --c-primary-bg:      rgba(124,58,237,0.08);
    --c-primary-hover:   rgba(124,58,237,0.14);

    --c-accent:          #0ea5e9;
    --c-accent-dark:     #0284c7;
    --c-accent-bg:       rgba(14,165,233,0.08);

    --c-success:         #10b981;
    --c-success-dark:    #059669;
    --c-success-bg:      rgba(16,185,129,0.08);

    --c-warning:         #f59e0b;
    --c-warning-bg:      rgba(245,158,11,0.1);

    --c-danger:          #ef4444;
    --c-danger-dark:     #dc2626;
    --c-danger-bg:       rgba(239,68,68,0.08);

    --g-primary:         linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    --g-accent:          linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --g-success:         linear-gradient(135deg, #10b981 0%, #059669 100%);
    --g-brand:           linear-gradient(135deg, #7c3aed 0%, #0ea5e9 60%, #10b981 100%);
    --g-fire:            linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --g-card:            linear-gradient(145deg, rgba(124,58,237,0.03) 0%, rgba(255,255,255,0) 100%);
    --g-bg:              radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,0.07) 0%, transparent 70%),
                         #f3f4f8;

    --c-header-bg:       rgba(243,244,248,0.9);
    --c-sidebar-bg:      rgba(255,255,255,0.98);
    --c-overlay:         rgba(15,19,35,0.5);
    --c-banner-bg:       linear-gradient(90deg, #7c3aed, #0ea5e9);
    --c-banner-text:     #ffffff;

    --c-input-bg:        rgba(0,0,0,0.04);
    --c-input-border:    rgba(0,0,0,0.1);
    --c-input-focus:     #7c3aed;

    --c-check-bg:        rgba(0,0,0,0.04);
    --c-check-border:    rgba(0,0,0,0.1);
    --c-check-hover:     rgba(124,58,237,0.1);
    --c-check-on-from:   #7c3aed;
    --c-check-on-to:     #10b981;

    --c-heat-0:          #e8eaf0;
    --c-heat-1:          rgba(124,58,237,0.15);
    --c-heat-2:          rgba(124,58,237,0.4);
    --c-heat-3:          #7c3aed;
    --c-heat-t0:         #b0b8d4;
    --c-heat-t1:         #7c3aed;
    --c-heat-t2:         #ffffff;

    --c-xp-from:         #7c3aed;
    --c-xp-to:           #10b981;
    --c-xp-track:        rgba(0,0,0,0.07);

    color-scheme: light;
}

/* ── 5. BASE ─────────────────────────────────────────────────────── */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--c-text);
    background-color: #06080d;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    position: relative;
}

/* Premium dot-grid background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Subtle top-edge glow — like light from above */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.5) 30%, rgba(99,200,255,0.4) 70%, transparent);
    box-shadow: 0 0 60px 20px rgba(124,58,237,0.08), 0 0 120px 60px rgba(99,200,255,0.04);
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] body {
    background-color: #f0f1f7;
}
[data-theme="light"] body::before {
    background-image: radial-gradient(circle, rgba(100,80,200,0.06) 1px, transparent 1px);
}
[data-theme="light"] body::after {
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.2) 30%, rgba(99,200,255,0.15) 70%, transparent);
    box-shadow: none;
}

::selection {
    background-color: var(--c-primary-bg);
    color: var(--c-primary-light);
}

/* ── 6. LAYOUT UTILITIES ─────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
}
.hidden      { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7. CARDS ────────────────────────────────────────────────────── */
.card {
    background: rgba(10, 12, 20, 0.6);
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.05) inset,
        0 4px 24px rgba(0,0,0,0.4),
        0 1px 2px rgba(0,0,0,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .card {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.8) inset, 0 4px 20px rgba(80,60,180,0.06), 0 1px 2px rgba(0,0,0,0.06);
}

/* Shimmer top accent line (non-glow cards only) */
.card:not(.glow-card)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── BORDER GLOW — Clean edge-only light, no gradient slop ── */
.glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 25;
    --cone-spread: 18;
    --glow-padding: 36px;
    overflow: visible;
    border-radius: var(--r-xl);
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
}

/* Remove the old ::before rainbow gradient, use a clean subtle border instead */
.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    /* On hover, the border brightens slightly — pure white glow, no rainbow */
    box-shadow: inset 0 0 0 1px rgba(255,255,255, calc((var(--edge-proximity) - 40) / 100 * 0.18));
    transition: box-shadow 0.2s ease;
}

/* Outer edge-light: directional clean glow on card sides */
.glow-card > .edge-light {
    position: absolute;
    inset: calc(var(--glow-padding) * -1);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: plus-lighter;
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    transition: opacity 0.6s ease-in-out;
    mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black 2%,
        transparent 12%,
        transparent 88%,
        black 98%
    );
}
.glow-card > .edge-light::before {
    content: '';
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    /* Clean single-color electric glow — pure bright light, not a rainbow */
    box-shadow:
        inset 0 0 0 1px  rgba(180, 140, 255, 0.9),
        inset 0 0 4px 0  rgba(180, 140, 255, 0.6),
        inset 0 0 12px 0 rgba(160, 120, 255, 0.35),
        inset 0 0 28px 2px rgba(140, 100, 255, 0.18),
              0 0 2px 0  rgba(200, 170, 255, 0.7),
              0 0 8px 0  rgba(180, 140, 255, 0.4),
              0 0 20px 2px rgba(160, 120, 255, 0.2),
              0 0 40px 4px rgba(124, 80, 237, 0.12);
}

.glow-card:not(:hover) > .edge-light {
    transition: opacity 0.8s ease-in-out;
}

/* ── 8. BUTTONS ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    border-radius: var(--r-md);
    transition: all var(--dur-fast) var(--ease);
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--g-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px var(--c-glow-primary);
}
.btn-primary:hover {
    box-shadow: 0 6px 24px var(--c-glow-primary);
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px var(--c-glow-primary);
}

.btn-secondary {
    background-color: var(--c-primary-bg);
    color: var(--c-primary-light);
    border: 1px solid rgba(124,58,237,0.2);
}
.btn-secondary:hover {
    background: var(--g-primary);
    color: #ffffff;
    border-color: transparent;
}
.btn-secondary:active { transform: scale(0.97); }

.btn-success {
    background: var(--g-success);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(34,211,160,0.3);
}
.btn-success:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.btn-danger {
    background-color: var(--c-danger-bg);
    color: var(--c-danger);
    border: 1px solid rgba(248,113,113,0.2);
}
.btn-danger:hover {
    background-color: var(--c-danger-dark);
    color: #ffffff;
    border-color: transparent;
}
.btn-danger:active { transform: scale(0.97); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border-radius: var(--r-md);
    color: var(--c-text-2);
    background: transparent;
    transition: all var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.btn-icon:hover {
    color: var(--c-primary-light);
    background-color: var(--c-primary-bg);
}
.btn-icon:active { transform: scale(0.9); }
.btn-icon svg { width: 20px; height: 20px; }

/* ── 9. FORM INPUTS ──────────────────────────────────────────────── */
.input {
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    min-height: var(--touch-min);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    background-color: var(--c-input-bg);
    border: 1.5px solid var(--c-input-border);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
    outline: none;
}
.input::placeholder { color: var(--c-text-3); font-weight: var(--fw-regular); }
.input:focus {
    border-color: var(--c-input-focus);
    box-shadow: 0 0 0 3px var(--c-primary-bg);
    background-color: var(--c-surface-alt);
}

/* ── 10. BANNER ──────────────────────────────────────────────────── */
.banner {
    background: var(--c-banner-bg);
    color: var(--c-banner-text);
    text-align: center;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quote-text {
    transition: opacity 0.5s ease-in-out;
    display: inline-block;
}

/* ── 11. HEADER ──────────────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--c-header-bg);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border-bottom: 1px solid var(--c-divider);
    height: var(--header-h);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--sp-3);
}
.header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}
.header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.03em;
}
/* Logo img */
.logo-img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 2px 12px var(--c-glow-primary);
    flex-shrink: 0;
}
.logo-text-main { color: var(--c-text); }
.logo-text-accent {
    background: var(--g-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* XP display */
.xp-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.xp-pill {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px var(--sp-2) 3px var(--sp-2);
    background: var(--c-primary-bg);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: var(--r-pill);
}
.xp-level {
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--c-primary-light);
    letter-spacing: 0.01em;
}
.xp-text {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
}
.xp-bar-track {
    width: 100px;
    height: 4px;
    background-color: var(--c-xp-track);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-xp-from), var(--c-xp-to));
    border-radius: var(--r-pill);
    transition: width 0.6s var(--ease-out);
    box-shadow: 0 0 6px rgba(124,58,237,0.5);
}

/* ── 12. SIDEBAR ─────────────────────────────────────────────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--c-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--dur-normal) var(--ease);
    cursor: pointer;
}
.sidebar-overlay.visible { opacity: 1; }

.sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: var(--sidebar-w);
    z-index: 60;
    background: var(--c-sidebar-bg);
    border-right: 1px solid var(--c-divider);
    box-shadow: 8px 0 48px var(--c-shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--dur-normal) var(--ease-out);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6);
    border-bottom: 1px solid var(--c-divider);
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.sidebar-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 2px 10px var(--c-glow-primary);
    flex-shrink: 0;
}
.sidebar-logo-name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    background: var(--g-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1;
    padding: var(--sp-4) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    overflow-y: auto;
}

.sidebar-section-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-1);
    margin-top: var(--sp-2);
}

.sidebar-footer {
    padding: var(--sp-6);
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-4);
    border-top: 1px solid var(--c-divider);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    min-height: var(--touch-min);
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    text-align: left;
    transition: all var(--dur-fast) var(--ease);
    position: relative;
}
.nav-btn .nav-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--c-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    transition: all var(--dur-fast) var(--ease);
}
.nav-btn:hover {
    background-color: var(--c-primary-bg);
    color: var(--c-text);
}
.nav-btn:hover .nav-icon-wrap {
    background: var(--c-primary-bg);
}
.nav-btn.active {
    background: var(--c-primary-bg);
    color: var(--c-primary-light);
    font-weight: var(--fw-bold);
}
.nav-btn.active .nav-icon-wrap {
    background: var(--g-primary);
    box-shadow: 0 2px 10px var(--c-glow-primary);
}
.nav-btn.active::after {
    content: '';
    position: absolute;
    right: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-primary-light);
    box-shadow: 0 0 8px var(--c-primary-light);
}

.install-btn {
    margin-top: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    min-height: var(--touch-min);
    border-radius: var(--r-md);
    background: var(--g-primary);
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    box-shadow: 0 4px 16px var(--c-glow-primary);
    transition: all var(--dur-fast) var(--ease);
}
.install-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.install-btn svg { width: 18px; height: 18px; }

/* ── 13. MAIN CONTENT ────────────────────────────────────────────── */
.main-content {
    flex: 1;
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-12);
}
.main-content.fade-in {
    animation: fadeSlideUp var(--dur-normal) var(--ease-out) forwards;
}

/* ── 14. DASHBOARD ───────────────────────────────────────────────── */

/* Week Nav */
.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-5);
}
.week-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.week-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.01em;
}
.week-sublabel {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    letter-spacing: 0.02em;
}

/* Today banner */
.today-banner {
    padding: var(--sp-6) var(--sp-7);
    margin-bottom: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background: #f4f5f9;
    border-radius: 32px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
}
[data-theme="dark"] .today-banner {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}
.today-info {}
.today-date {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7983a5;
    margin-bottom: 6px;
}
[data-theme="dark"] .today-date { color: var(--c-text-3); }
.today-greeting {
    font-size: 26px;
    font-weight: 900;
    color: #1a1e34;
    letter-spacing: -0.02em;
}
[data-theme="dark"] .today-greeting { color: var(--c-text); }
.today-completion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.completion-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
}
.completion-ring {
    width: 64px;
    height: 64px;
    transform: rotate(-90deg);
}
.ring-track {
    fill: none;
    stroke: #e2e4ed;
    stroke-width: 6;
}
[data-theme="dark"] .ring-track { stroke: rgba(255,255,255,0.1); }
.ring-fill {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s var(--ease-out);
}
[data-theme="dark"] .ring-fill { stroke: #3b82f6; }
.ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #1a1e34;
}
[data-theme="dark"] .ring-text { color: var(--c-text); }
.completion-label {
    font-size: 13px;
    font-weight: 600;
    color: #7983a5;
}
[data-theme="dark"] .completion-label { color: var(--c-text-3); }

/* Habit list */
.habits-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Habit card */
.habit-card {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    transition: all var(--dur-fast) var(--ease);
}
.habit-card:hover {
    border-color: rgba(124,58,237,0.2);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px rgba(124,58,237,0.1);
}
.habit-card.is-done-today {
    border-color: rgba(255,255,255,0.08);
}
.habit-card.is-done-today::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
}

.habit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.habit-name-wrap { flex: 1; min-width: 0; }
.habit-emoji {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
}
.habit-name {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--lh-snug);
}
.habit-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Streak badge */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: 0.02em;
}
.streak-badge.hot {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.15));
    border: 1px solid rgba(245,158,11,0.3);
    color: #fbbf24;
}
.streak-badge.cold {
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    color: var(--c-text-3);
}
.streak-icon { font-size: 13px; }

/* Delete button */
.delete-btn {
    color: var(--c-text-4);
    border-radius: var(--r-sm);
    opacity: 0;
    transition: all var(--dur-fast) var(--ease);
}
.habit-card:hover .delete-btn { opacity: 1; }
.delete-btn:hover {
    color: var(--c-danger);
    background-color: var(--c-danger-bg);
    opacity: 1;
}

/* Week grid */
.week-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-2);
    padding: 2px 0 var(--sp-1);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.week-grid::-webkit-scrollbar { display: none; }

.day-col {
    scroll-snap-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 58px;
}
.day-label {
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-3);
}
.day-num {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
}
.day-label.today { color: var(--c-primary-light); }
.day-num.today {
    color: var(--c-primary-light);
    background: var(--c-primary-bg);
    border-radius: var(--r-pill);
    padding: 1px 6px;
}

/* Check button */
.check-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-check-border);
    background-color: var(--c-check-bg);
    color: transparent;
    transition: all var(--dur-fast) var(--ease-bounce);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.check-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g-primary);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    border-radius: calc(var(--r-lg) - 2px);
}
.check-btn:hover:not(.checked) {
    background-color: var(--c-check-hover);
    border-color: rgba(124,58,237,0.3);
    transform: scale(1.05);
}
.check-btn.checked {
    background: var(--g-primary);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 16px var(--c-glow-primary);
}
.check-btn.checked::after { opacity: 0; }
.check-btn.checked {
    color: var(--c-primary-light);
}
.check-btn.pre-checked {
    color: #f97316; /* Orange color */
}
.check-btn.pre-checked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f97316;
    opacity: 0.15;
}
.check-btn:active { transform: scale(0.88); }
.check-btn.disabled-future {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent !important;
}
.check-btn.disabled-future:hover {
    transform: none;
    background: transparent;
}
.check-btn svg { width: 22px; height: 22px; position: relative; z-index: 1; }

/* Progress bar under habit */
.habit-progress-bar {
    height: 3px;
    background: var(--c-xp-track);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.habit-progress-fill {
    height: 100%;
    background: var(--g-success);
    border-radius: var(--r-pill);
    transition: width 0.6s var(--ease-out);
}

/* Add habit form */
.add-form-section {
    margin-top: var(--sp-6);
    padding: var(--sp-6);
}
.add-form-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-3);
    margin-bottom: var(--sp-4);
}
.add-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.input-with-emoji {
    display: flex;
    gap: var(--sp-2);
}
.emoji-picker-btn {
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--r-md);
    background: var(--c-input-bg);
    border: 1.5px solid var(--c-input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.emoji-picker-btn:hover {
    border-color: var(--c-primary-light);
    background: var(--c-primary-bg);
}

/* Empty state */
.empty-state {
    padding: var(--sp-12) var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    text-align: center;
}
.empty-illustration {
    width: 80px;
    height: 80px;
    border-radius: var(--r-2xl);
    background: var(--c-primary-bg);
    border: 1px solid rgba(124,58,237,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    animation: float 3s ease-in-out infinite;
}
.empty-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.02em;
}
.empty-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    max-width: 280px;
    line-height: var(--lh-relaxed);
}

/* ── 15. CALENDAR ────────────────────────────────────────────────── */
.calendar-section { padding: var(--sp-6); }

.calendar-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.calendar-day-header {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-3);
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sp-2);
}
.calendar-cell {
    aspect-ratio: 1;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
    cursor: default;
}
.calendar-cell:hover { transform: scale(1.08); }
.calendar-cell.heat-0 { background: var(--c-heat-0); color: var(--c-heat-t0); }
.calendar-cell.heat-1 { background: var(--c-heat-1); color: var(--c-heat-t1); font-weight: var(--fw-bold); }
.calendar-cell.heat-2 { background: var(--c-heat-2); color: var(--c-heat-t2); font-weight: var(--fw-bold); }
.calendar-cell.heat-3 {
    background: var(--g-primary);
    color: var(--c-heat-t2);
    font-weight: var(--fw-black);
    box-shadow: 0 2px 12px var(--c-glow-primary);
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch {
    width: 12px; height: 12px;
    border-radius: 4px;
    display: inline-block;
}

/* ── 16. INSIGHTS ────────────────────────────────────────────────── */
.insights-header {
    margin-bottom: var(--sp-6);
}
.insights-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.02em;
}
.insights-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    margin-top: var(--sp-1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.stat-card {
    padding: var(--sp-6) var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: attr(data-icon);
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-2);
    font-size: 40px;
    opacity: 0.12;
    line-height: 1;
    pointer-events: none;
}
.stat-value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
}
.stat-value.primary { color: var(--c-primary-light); }
.stat-value.success { color: var(--c-success); }
.stat-value.accent  { color: var(--c-accent); }
.stat-value.warning { color: var(--c-warning); }
.stat-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.stat-trend {
    font-size: var(--fs-xs);
    color: var(--c-success);
    font-weight: var(--fw-semibold);
}

.xp-hero-card {
    padding: var(--sp-8) var(--sp-7);
    text-align: center;
    margin-bottom: var(--sp-4);
}
.xp-hero-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-3);
    margin-bottom: var(--sp-3);
}
.xp-hero-value {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-black);
    background: var(--g-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: var(--lh-tight);
    letter-spacing: -0.04em;
}

.habit-insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.habit-insight-row {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.hi-rank {
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    color: var(--c-text-3);
    width: 20px;
    text-align: center;
}
.hi-name {
    flex: 1;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hi-bar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.hi-bar-track {
    width: 80px;
    height: 6px;
    background: var(--c-xp-track);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.hi-bar-fill {
    height: 100%;
    background: var(--g-primary);
    border-radius: var(--r-pill);
}
.hi-pct {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    width: 28px;
    text-align: right;
}

/* ── 17. SETTINGS ────────────────────────────────────────────────── */
.settings-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.settings-page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-1);
}
.settings-page-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    margin-bottom: var(--sp-2);
}
.settings-card { padding: var(--sp-6); }
.settings-heading {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: var(--sp-2);
}
.settings-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-5);
}
.settings-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.settings-action-btn {
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
    transition: all var(--dur-fast) var(--ease);
    border: 1px solid transparent;
}
.settings-action-btn:active { transform: scale(0.98); }
.settings-action-btn svg { width: 18px; height: 18px; }
.settings-action-btn.export {
    background-color: var(--c-primary-bg);
    color: var(--c-primary-light);
    border-color: rgba(124,58,237,0.2);
}
.settings-action-btn.export:hover {
    background: var(--g-primary);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 16px var(--c-glow-primary);
}
.settings-action-btn.import {
    background-color: var(--c-success-bg);
    color: var(--c-success);
    border-color: rgba(34,211,160,0.2);
}
.settings-action-btn.import:hover {
    background: var(--g-success);
    color: #ffffff;
    border-color: transparent;
}

.file-input-wrap {
    position: relative;
    width: 100%;
}
.file-input-wrap input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.danger-zone {
    border-color: rgba(248,113,113,0.15);
    background: rgba(248,113,113,0.03);
}
.danger-heading {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-danger);
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.danger-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-5);
}

/* Theme toggle */
.theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
}
.theme-row-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.theme-row-desc {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    margin-top: 1px;
}
.theme-toggle-pill {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
}
.theme-pill-btn {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    transition: all var(--dur-fast) var(--ease);
}
.theme-pill-btn.active {
    background: var(--g-primary);
    color: #fff;
    box-shadow: 0 2px 8px var(--c-glow-primary);
}

/* ── 18. MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-overlay);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--sp-4);
}
/* Confirm-modal inner box */
.modal-box {
    background: var(--c-surface);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: var(--sp-8) var(--sp-7);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    animation: modal-in 0.22s var(--ease-spring) both;
}
@keyframes modal-in {
    from { opacity:0; transform: translateY(16px) scale(0.97); }
    to   { opacity:1; transform: none; }
}
.modal-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    margin-bottom: var(--sp-5);
    line-height: var(--lh-relaxed);
}
.modal-card {
    padding: var(--sp-9) var(--sp-8);
    text-align: center;
    max-width: 380px;
    width: 100%;
}
.modal-badge {
    width: 88px;
    height: 88px;
    border-radius: var(--r-2xl);
    background: var(--g-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-6);
    font-size: 44px;
    line-height: 1;
    box-shadow: 0 8px 32px var(--c-glow-primary);
    animation: pulse-glow 2s ease-in-out infinite;
}
.modal-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--c-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-2);
}
.modal-desc {
    font-size: var(--fs-md);
    color: var(--c-text-2);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-7);
}
.modal-level {
    background: var(--g-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
}
.modal-stars {
    display: flex;
    justify-content: center;
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-6);
    line-height: 1.5;
}
.confirm-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    text-align: left;
}
.confirm-item {
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-hover);
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.modal-actions {
    display: flex;
    gap: var(--sp-3);
    width: 100%;
}
.modal-actions .btn {
    flex: 1;
}
.modal-stars {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    font-size: 22px;
    animation: star-appear 0.5s var(--ease-spring) both;
}

/* ── 19. TOAST ───────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: var(--sp-7);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    background: var(--c-surface-raised);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    box-shadow: 0 8px 32px var(--c-shadow-lg);
    transform: translateY(24px) scale(0.95);
    opacity: 0;
    transition: all var(--dur-fast) var(--ease-bounce);
    pointer-events: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.toast.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.toast-icon { font-size: 16px; }

/* ── 20. ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
    0%   { transform: scale(0.7) rotate(-5deg); opacity: 0; }
    60%  { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes checkPop {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.8); }
    65%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 8px 32px var(--c-glow-primary); }
    50%       { box-shadow: 0 8px 48px rgba(124,58,237,0.6); }
}
@keyframes star-appear {
    from { transform: scale(0) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes confetti {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-80px) rotate(360deg); opacity: 0; }
}

.pop-anim   { animation: pop 0.45s var(--ease-spring) forwards; }
.check-pop  { animation: checkPop 0.4s var(--ease-bounce); }

/* ── 21. ACCESSIBILITY ───────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--c-primary-light);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
*:focus:not(:focus-visible) { outline: none; }

/* ── 22. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 23. RESPONSIVE ──────────────────────────────────────────────── */
@media (min-width: 480px) {
    .add-form { flex-direction: row; }
    .add-form .btn-primary {
        width: auto;
        flex-shrink: 0;
    }
    .input-with-emoji { flex: 1; }
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--sp-7);
        padding-right: var(--sp-7);
    }
    .check-btn { width: 52px; height: 52px; }
    .day-col { min-width: 64px; }
    .week-grid { gap: var(--sp-3); }
    .calendar-grid { gap: var(--sp-3); }
    .calendar-cell { font-size: var(--fs-md); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    :root { --container-max: 800px; }
}

/* \u2500\u2500 SEO FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.seo-footer {
    background: var(--c-bg);
    border-top: 1px solid var(--c-divider);
    margin-top: var(--sp-8);
    padding: var(--sp-10) 0 var(--sp-12);
}
.seo-footer-inner {
    max-width: 800px;
    margin: 0 auto;
}
.seo-article {
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}
.seo-h1 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--c-text-2);
    margin-bottom: var(--sp-4);
    letter-spacing: -0.01em;
}
.seo-article h2 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
}
.seo-article p {
    margin-bottom: var(--sp-4);
    color: var(--c-text-3);
}
.seo-article strong {
    color: var(--c-text-2);
    font-weight: var(--fw-semibold);
}

/* Page-level back / home button */
.page-back-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--sp-4);
}
.page-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 6px 14px;
    transition: all var(--dur-fast) var(--ease);
}
.page-back-btn:hover {
    background: rgba(255,255,255,0.09);
    color: var(--c-text);
    transform: translateX(-2px);
}

.seo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}
.seo-tag {
    padding: 5px 12px;
    border-radius: 10px;
    background: rgba(124,58,237,0.08);
    font-weight: var(--fw-semibold);
    border: 1px solid rgba(124,58,237,0.18);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   POMODORO TIMER
   ═══════════════════════════════════════════════════════════════════ */
.pomo-page {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.pomo-card {
    width: 100%;
    padding: var(--sp-8) var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-8);
}

.pomo-mode-tabs {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}
.pomo-tab {
    padding: var(--sp-2) var(--sp-5);
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-3);
    transition: all var(--dur-fast) var(--ease);
    letter-spacing: 0.01em;
}
.pomo-tab:hover {
    color: var(--c-text);
    background: rgba(255,255,255,0.06);
}
.pomo-tab.active {
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 2px 12px rgba(124,58,237,0.5);
}
.pomo-tab-time {
    font-size: 10px;
    opacity: 0.65;
    font-weight: var(--fw-medium);
    margin-left: 3px;
}

/* Edit Times toggle row */
.pomo-edit-row {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-4);
}
.pomo-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    background: rgba(124,58,237,0.10);
    border: 1.5px solid rgba(124,58,237,0.28);
    border-radius: 12px;
    padding: 10px 22px;
    transition: all var(--dur-fast) var(--ease);
    cursor: pointer;
    letter-spacing: 0.02em;
}
.pomo-edit-toggle:hover {
    background: rgba(124,58,237,0.18);
    color: var(--c-text);
    border-color: rgba(124,58,237,0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(124,58,237,0.25);
}

/* Scrollable tabs bar (for many timers) */
.pomo-mode-tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.pomo-mode-tabs::-webkit-scrollbar { display: none; }

/* Panel section labels & divider */
.pomo-panel-section-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-3);
    margin-bottom: var(--sp-3);
}
.pomo-panel-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: var(--sp-5) 0 var(--sp-4);
}

/* Add timer name+duration row */
.pomo-add-timer-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

/* Add Timer Tab button */
.pomo-add-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--sp-3) var(--sp-5);
    background: rgba(34,211,160,0.12);
    color: #22d3a0;
    border: 1.5px solid rgba(34,211,160,0.3);
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    transition: all var(--dur-fast) var(--ease);
    margin-bottom: var(--sp-4);
}
.pomo-add-btn:hover {
    background: rgba(34,211,160,0.22);
    border-color: rgba(34,211,160,0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(34,211,160,0.2);
}

/* Custom timer chips list */
.pomo-custom-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: 0;
}
.pomo-custom-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 5px 10px 5px 12px;
    font-size: var(--fs-xs);
}
.pomo-chip-name {
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.pomo-chip-mins {
    color: var(--c-text-3);
    font-size: 10px;
}
.pomo-chip-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,80,80,0.12);
    color: rgba(255,100,100,0.8);
    transition: all var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.pomo-chip-del:hover {
    background: rgba(255,80,80,0.28);
    color: #ff6464;
}

/* Slide-down custom panel */
.pomo-custom-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.38s var(--ease), opacity 0.25s var(--ease), margin 0.35s var(--ease);
    margin-top: 0;
}
.pomo-custom-panel.open {
    max-height: 600px;
    opacity: 1;
    margin-top: var(--sp-4);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: var(--sp-5);
}

.pomo-ring-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pomo-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pomo-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.05);
    stroke-width: 6;
}
.pomo-ring-fill {
    fill: none;
    stroke: var(--c-primary-light);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
    filter: drop-shadow(0 0 12px rgba(159,103,247,0.4));
}

.pomo-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    z-index: 1;
}
.pomo-time {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
.pomo-mode-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pomo-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.pomo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border-radius: 14px;
    font-weight: var(--fw-bold);
    transition: all var(--dur-fast) var(--ease);
}
.pomo-btn-primary {
    background: var(--c-primary);
    color: #fff;
    padding: var(--sp-4) var(--sp-10);
    font-size: var(--fs-md);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(124,58,237,0.5);
    letter-spacing: 0.02em;
}
.pomo-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--c-primary-light);
    box-shadow: 0 6px 28px rgba(124,58,237,0.65);
}
.pomo-btn-ghost {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    color: var(--c-text-2);
}
.pomo-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    color: var(--c-text);
}

.pomo-sessions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.pomo-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
}
.pomo-dot.done {
    background: var(--c-primary);
    box-shadow: 0 0 8px rgba(124,58,237,0.6);
}
.pomo-sessions-label {
    margin-left: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    font-weight: var(--fw-medium);
}

.pomo-tips-card {
    padding: var(--sp-5) var(--sp-6);
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.04);
}
.pomo-tips-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-3);
    color: var(--c-text-2);
}
.pomo-tips-list {
    padding-left: var(--sp-5);
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.pomo-tips-list strong {
    color: var(--c-text);
}

/* ── Custom Timer Durations Card ─────────────────────────────────── */
.pomo-custom-card {
    padding: var(--sp-5) var(--sp-6);
}
.pomo-custom-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-2);
    margin-bottom: var(--sp-4);
}
.pomo-custom-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
@media (max-width: 480px) {
    .pomo-custom-row { grid-template-columns: 1fr; }
}
.pomo-custom-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.pomo-custom-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
}
.pomo-custom-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease);
}
.pomo-custom-input-wrap:focus-within {
    border-color: var(--c-primary);
}
.pomo-custom-input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    color: var(--c-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    border: none;
    outline: none;
}
.pomo-custom-input::-webkit-inner-spin-button,
.pomo-custom-input::-webkit-outer-spin-button { opacity: 0.4; }
.pomo-custom-unit {
    padding: 0 var(--sp-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    white-space: nowrap;
}
.pomo-custom-btn {
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-primary);
    color: #fff;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    transition: all var(--dur-fast) var(--ease);
    box-shadow: 0 4px 16px rgba(124,58,237,0.4);
}
.pomo-custom-btn:hover {
    background: var(--c-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124,58,237,0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD WIDGETS (Timer & Stats)
   ═══════════════════════════════════════════════════════════════════ */
.dash-widgets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

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

.dash-timer-card {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.dash-timer-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-2);
    margin-bottom: var(--sp-2);
}
.dash-timer-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
}
.dash-timer-ring-wrap:hover {
    transform: scale(1.02);
}
.dash-timer-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.dash-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.05);
    stroke-width: 12;
}
.dash-ring-fill {
    fill: none;
    stroke: #38bdf8; /* Thick light blue ring */
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.dash-timer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 1;
}
.dash-time {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    color: #38bdf8;
}
.dash-play-icon {
    color: var(--c-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease);
}
.dash-timer-ring-wrap:hover .dash-play-icon {
    color: #38bdf8;
}
.dash-timer-mode {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: var(--r-full);
}

.dash-stats-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.dash-stat-box {
    flex: 1;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
}
.dash-stat-box:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.04);
}
.dash-stat-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-2);
    margin-bottom: var(--sp-1);
}
.dash-stat-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -1px;
}