/* Reset and Base Styles — Layout E: Sidebar + Minimal */
@import url('https://fonts.cdnfonts.com/css/minecraft-4');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap');

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

:root {
    /* Layout E stone palette — warm earth tones */
    --primary-color: #8B6914;
    --primary-hover: #6B4F0E;
    --slate-dark: #1c1917;
    --slate-medium: #44403c;
    --slate-light: #78716c;
    --background: #fafaf9;
    --surface: #ffffff;
    --surface-hover: #f5f5f4;
    --border-color: #e7e5e4;
    --border-strong: #d6d3d1;

    /* Accent colors — warm earth / muted jewel tones */
    --accent-warm: #C2692A;
    --accent-green: #4A7C59;
    --accent-red: #A0402A;
    --accent-yellow: #9C7A1E;
    --accent-purple: #6B4E71;
    --accent-blue: #4A6E8A;
    --accent-teal: #3D7068;

    /* Gamification colors */
    --streak-gradient-start: #5D4037;
    --streak-gradient-end: #C2692A;
    --xp-bar-bg: rgba(255,255,255,0.08);
    --xp-bar-fill: #4A7C59;

    /* Semantic colors — muted earth palette */
    --green: #4A7C59;
    --green-light: #EDF2EE;
    --orange: #C2692A;
    --orange-light: #F7EDE3;
    --blue: #4A6E8A;
    --blue-light: #ECF1F5;
    --purple: #6B4E71;
    --purple-light: #F0EBF2;
    --teal: #3D7068;
    --teal-light: #EAF2F1;

    /* Text aliases for Layout E */
    --text-primary: #1c1917;
    --text-secondary: #78716c;
    --text-muted: #a8a29e;

    /* Typography — DM Sans primary, keep Outfit as alias */
    --font-heading: 'DM Serif Display', 'Outfit', serif;
    --font-body: 'DM Sans', 'Open Sans', -apple-system, sans-serif;
    --font-minecraft: 'Minecraft', 'Courier New', monospace;
    --font-sans: 'DM Sans', -apple-system, sans-serif;

    /* Aliases (shorthand used by feature modules) */
    --primary: var(--primary-color);
    --border: var(--border-color);
    --card-bg: var(--surface);
    --text-dark: var(--slate-dark);
    --text-light: var(--slate-medium);
    --slate: var(--slate-light);
    --shadow: var(--box-shadow);
    --bg-primary: var(--background);
    --bg-secondary: var(--surface-hover);

    /* Spacing & effects — Layout E */
    --border-radius: 14px;
    --border-radius-sm: 10px;
    --border-radius-lg: 16px;
    --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --box-shadow-md: 0 4px 12px rgba(0,0,0,0.05);
    --box-shadow-lg: 0 10px 24px rgba(0,0,0,0.08);
    --transition: all 0.15s ease;

    /* Contacts table row state colors */
    --row-warning-bg:        #FFFAF0;
    --row-warning-hover-bg:  #FFF5E6;
    --row-urgent-bg:         #FFF5F5;
    --row-urgent-hover-bg:   #FFF0F0;
    --badge-good-bg:    #F0FFF4;
    --badge-good-text:  #276749;
    --badge-warn-bg:    #FFFAF0;
    --badge-warn-text:  #C05621;
    --badge-urgent-bg:  #FFF5F5;
    --badge-urgent-text:#C53030;
    --thead-bg:         var(--slate-dark);

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-bg: #1c1917;
    --sidebar-text: #d6d3d1;
    --sidebar-muted: #78716c;
    --sidebar-active-bg: rgba(255,255,255,0.08);
    --sidebar-active-text: #fafaf9;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --primary-color: #D4A574;
    --primary-hover: #E0BC93;
    --slate-dark: #fafaf9;
    --slate-medium: #d6d3d1;
    --slate-light: #a8a29e;
    --background: #0c0a09;
    --surface: #1c1917;
    --surface-hover: #292524;
    --border-color: #292524;
    --border-strong: #44403c;

    --accent-warm: #C2692A;
    --accent-green: #7BAF8A;
    --accent-red: #C47B65;
    --accent-yellow: #C9A84C;
    --accent-purple: #9B7EA8;
    --accent-blue: #7A9BB5;
    --accent-teal: #6AA09A;

    --green: #7BAF8A;
    --green-light: rgba(123,175,138,0.12);
    --orange: #C2692A;
    --orange-light: rgba(194,105,42,0.12);
    --blue-light: rgba(74, 110, 138, 0.12);
    --purple-light: rgba(155, 126, 168, 0.12);

    --text-primary: #fafaf9;
    --text-secondary: #a8a29e;
    --text-muted: #78716c;

    --xp-bar-bg: rgba(0,0,0,0.3);
    --xp-bar-fill: #7BAF8A;
    --streak-gradient-start: #3E2723;
    --streak-gradient-end: #8B6914;

    --primary: var(--primary-color);
    --border: var(--border-color);
    --card-bg: var(--surface);
    --text-dark: var(--slate-dark);
    --text-light: var(--slate-medium);
    --slate: var(--slate-light);
    --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --box-shadow-md: 0 4px 12px rgba(0,0,0,0.25);
    --box-shadow-lg: 0 10px 24px rgba(0,0,0,0.35);
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --bg-primary: var(--background);
    --bg-secondary: var(--surface-hover);

    --sidebar-bg: #0c0a09;
    --sidebar-text: #a8a29e;
    --sidebar-muted: #57534e;
    --sidebar-active-bg: rgba(255,255,255,0.06);
    --sidebar-active-text: #fafaf9;

    --row-warning-bg:        rgba(246, 173, 85, 0.10);
    --row-warning-hover-bg:  rgba(246, 173, 85, 0.15);
    --row-urgent-bg:         rgba(252, 129, 129, 0.10);
    --row-urgent-hover-bg:   rgba(252, 129, 129, 0.15);
    --badge-good-bg:    rgba(123, 175, 138, 0.2);
    --badge-good-text:  #7BAF8A;
    --badge-warn-bg:    rgba(194, 105, 42, 0.2);
    --badge-warn-text:  #C2692A;
    --badge-urgent-bg:  rgba(196, 123, 101, 0.2);
    --badge-urgent-text:#C47B65;
    --thead-bg:         #1A202C;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(123, 175, 138, 0.15);
    color: #7BAF8A;
    border-color: rgba(123, 175, 138, 0.3);
}

[data-theme="dark"] .alert-error {
    background-color: rgba(252, 129, 129, 0.15);
    color: #FC8181;
    border-color: rgba(252, 129, 129, 0.3);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(74, 110, 138, 0.15);
    color: #7A9BB5;
    border-color: rgba(74, 110, 138, 0.3);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(246, 173, 85, 0.15);
    color: #F6AD55;
    border-color: rgba(246, 173, 85, 0.3);
}

[data-theme="dark"] ::selection {
    background-color: rgba(212, 165, 116, 0.3);
}

/* Theme transition */
body, .navbar, .surface, .btn-primary, .btn-secondary,
.stat-card, .dashboard-section, .contact-card, .detail-card,
.form-page, .journal-editor, .filters, .alert {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== THEME TOGGLE SWITCH ===== */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.theme-toggle-label {
    font-size: 1.2rem;
    line-height: 1;
}

.theme-toggle-switch {
    width: 48px;
    height: 26px;
    background-color: var(--border-strong);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.theme-toggle-switch.active {
    background-color: var(--primary-color);
}

.theme-toggle-switch.active::after {
    transform: translateX(22px);
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate-medium);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    display: flex;
    min-height: 100vh;
}

/* Typography — DM Serif Display for headings, DM Sans for body */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--slate-dark);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

/* ===== LAYOUT E: FIXED SIDEBAR ===== */
.le-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.le-sidebar-brand {
    padding: 28px 24px 24px;
}

.le-sidebar-brand a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}

.le-brand-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    filter: invert(0.7) sepia(0.1) brightness(1.2);
}

.le-brand-text {
    min-width: 0;
}

.le-sidebar-brand h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: #fafaf9;
    letter-spacing: -0.01em;
}

.le-brand-sub {
    font-size: 11px;
    color: var(--sidebar-muted);
    margin-top: 2px;
    display: block;
}

.le-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0 16px;
}

.le-section {
    padding: 16px 12px 8px;
}

.le-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-muted);
    padding: 0 12px;
    margin-bottom: 8px;
    font-family: var(--font-sans);
}

.le-nav {
    list-style: none;
}

.le-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--border-radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.le-nav li a:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.le-nav li a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.le-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.7;
    filter: invert(0.7) sepia(0.1) brightness(1.2);
}

.le-nav li a:hover .le-icon,
.le-nav li a.active .le-icon {
    opacity: 1;
    filter: invert(0.85) sepia(0.05) brightness(1.4);
}

.le-action-today .le-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    filter: invert(0.85) sepia(0.05) brightness(1.4);
    opacity: 0.8;
}

/* ===== SVG Icon Utility Classes ===== */
/* Content area icons: darken pencil-drawn SVGs for contrast on light backgrounds */
.le-main .inline-icon,
.le-main .stat-icon-svg,
.le-main .habit-icon-svg,
.le-main .mood-icon-svg,
.le-main .badge-icon-svg,
.le-main .challenge-icon-svg,
.le-main .summary-icon-svg,
.le-main .btn-icon-svg {
    filter: brightness(0.45) contrast(1.3);
}

[data-theme="dark"] .le-main .inline-icon,
[data-theme="dark"] .le-main .stat-icon-svg,
[data-theme="dark"] .le-main .habit-icon-svg,
[data-theme="dark"] .le-main .mood-icon-svg,
[data-theme="dark"] .le-main .badge-icon-svg,
[data-theme="dark"] .le-main .challenge-icon-svg,
[data-theme="dark"] .le-main .summary-icon-svg,
[data-theme="dark"] .le-main .btn-icon-svg {
    filter: brightness(0.85) contrast(1.1);
}

.inline-icon {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    display: inline-block;
    flex-shrink: 0;
}
.stat-icon-svg {
    width: 28px;
    height: 28px;
    vertical-align: -6px;
    display: inline-block;
    flex-shrink: 0;
}
.habit-icon-svg {
    width: 32px;
    height: 32px;
    display: block;
}
.mood-icon-svg {
    width: 24px;
    height: 24px;
    vertical-align: -4px;
    display: inline-block;
}
.badge-icon-svg {
    width: 36px;
    height: 36px;
    display: block;
}
.challenge-icon-svg {
    width: 40px;
    height: 40px;
    display: block;
}
.summary-icon-svg {
    width: 36px;
    height: 36px;
    display: block;
    margin: 0 auto 4px;
}
.btn-icon-svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    display: inline-block;
}

.le-sidebar-footer {
    margin-top: auto;
    padding: 16px;
}

.le-actions {
    margin-bottom: 8px;
}

.le-action-today {
    display: block;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--sidebar-active-text);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font-sans);
    text-decoration: none;
    transition: all 0.15s;
}

.le-action-today:hover {
    background: rgba(255,255,255,0.08);
}

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

.le-action-btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: var(--sidebar-text);
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
}

.le-action-btn:hover {
    background: rgba(255,255,255,0.06);
}

/* Main content area */
.le-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
}

.le-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 36px 40px 80px;
}

/* Mobile top bar */
.le-mobile-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--sidebar-bg);
    color: #fafaf9;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 90;
}

.le-hamburger {
    background: none;
    border: none;
    color: #fafaf9;
    font-size: 22px;
    cursor: pointer;
    padding: 11px;
    margin: -7px;
}

.le-mobile-title {
    font-family: 'DM Serif Display', serif;
    font-size: 16px;
}

.le-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 95;
}

.le-overlay.open {
    display: block;
}

/* Responsive: collapse sidebar on mobile */
@media (max-width: 768px) {
    .le-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }
    .le-sidebar.open {
        transform: translateX(0);
    }
    .le-mobile-bar {
        display: flex;
    }
    .le-main {
        margin-left: 0;
    }
    .le-page {
        padding: 68px 16px 60px;
    }
}

/* Hide old navbar (replaced by sidebar) */
.navbar { display: none !important; }

/* Legacy nav classes — keep for compatibility but hidden */
.nav-brand, .nav-logo { display: none; }

/* Dashboard header with logo (legacy) */
.dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-logo {
    width: 80px;
    height: 80px;
}

/* ===== TODAY'S HABITS ===== */
.habits-today {
    margin-bottom: 1.5rem;
}

.habits-today-header h1 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.habits-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.habit-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    position: relative;
}

.habit-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
}

.habit-card.done {
    border-color: #4A7C59;
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.05) 0%, rgba(74, 124, 89, 0.08) 100%);
}

.habit-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.habit-info {
    flex: 1;
    min-width: 0;
}

.habit-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--slate-dark);
}

.habit-detail {
    font-size: 0.8rem;
    color: var(--slate-light);
    margin-top: 0.15rem;
}

.habit-status {
    flex-shrink: 0;
}

.habit-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #4A7C59;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.habit-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
}

.habit-streak {
    width: 100%;
    font-size: 0.75rem;
    color: var(--slate-light);
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown {
    position: relative;
    list-style: none;
}

.nav-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
}

.nav-more-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-more-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    padding: 0.5rem 0;
    min-width: 180px;
    z-index: 100;
    list-style: none;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu li {
    width: 100%;
}

.nav-dropdown-menu .nav-link {
    padding: 0.6rem 1rem;
    width: 100%;
    border-radius: 0;
    white-space: nowrap;
}

.nav-dropdown-menu .nav-link:hover {
    background: var(--surface-hover);
}

/* ===== CONTACTS ATTENTION SECTION ===== */
.contacts-attention-section {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.contacts-attention-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contact-attention-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    font-size: 0.9rem;
}

.contact-attention-item:hover {
    border-color: var(--accent-warm);
    background: rgba(160, 101, 42, 0.08);
}

.contact-attention-name {
    font-weight: 600;
    color: var(--slate-dark);
}

.contact-attention-days {
    font-size: 0.8rem;
    color: var(--accent-warm);
    font-weight: 500;
}

/* Freeze badge (inline in streak) */
.freeze-badge {
    font-size: 1.25rem;
    margin-left: 0.25rem;
    opacity: 0.8;
}

/* Highlights in dashboard grid (compact variant) */
.highlights-preview-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.25rem;
    align-items: center;
    justify-content: center;
    flex: 1;
}


.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-menu a {
    font-family: var(--font-heading);
    font-weight: 500;
    text-decoration: none;
    color: var(--slate-medium);
    transition: var(--transition);
    padding: 0.5rem 0;
    position: relative;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.2s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Remove underline effect from the CTA button in nav */
.nav-menu .btn-primary::after {
    display: none;
}

.nav-menu .btn-primary:hover {
    color: white;
}

.btn-primary.nav-today-btn {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.5rem 1.3rem;
}

.nav-today-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-logout {
    opacity: 0.5;
    font-size: 1.1rem;
    transition: opacity 0.2s;
    padding: 0 0.25rem !important;
}

.nav-logout:hover {
    opacity: 1;
}

.nav-icon {
    width: 24px;
    height: 24px;
}

/* Container — now inside .le-page, no extra margin needed */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-danger {
    font-family: var(--font-heading);
    font-weight: 500;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition);
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 1px 2px rgba(139, 105, 20, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(139, 105, 20, 0.3);
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--slate-dark);
    border: 1px solid var(--border-color);
}

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

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

.btn-danger:hover {
    background-color: #A0402A;
    transform: translateY(-1px);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background-color: #F0FFF4;
    color: #276749;
    border: 1px solid #9AE6B4;
}

.alert-error {
    background-color: #FFF5F5;
    color: #C53030;
    border: 1px solid #FEB2B2;
}

.alert-info {
    background-color: #EBF8FF;
    color: #2B6CB0;
    border: 1px solid #90CDF4;
}

.alert-warning {
    background-color: #FFFAF0;
    color: #C05621;
    border: 1px solid #FBD38D;
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2rem;
    color: var(--slate-dark);
}

.page-header .actions {
    display: flex;
    gap: 1rem;
}

/* ===== GAMIFICATION BANNER ===== */
.game-stats-banner {
    background: linear-gradient(135deg, var(--streak-gradient-start) 0%, var(--streak-gradient-end) 100%);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.game-stats-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.streak-display, .level-display, .xp-display, .freeze-display, .best-streak-display {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    position: relative;
    z-index: 1;
}

.streak-icon, .level-icon, .freeze-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.freeze-icon.used {
    opacity: 0.4;
    filter: grayscale(0.5);
}

.streak-number, .level-number, .best-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.streak-label, .level-name, .freeze-text, .best-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xp-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.xp-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
}

.xp-bar {
    width: 100%;
    height: 8px;
    background-color: var(--xp-bar-bg);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--xp-bar-fill) 0%, #7BAF8A 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(74, 124, 89, 0.5);
}

.best-streak-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-card:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
}

.stat-card h3 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.stat-card p {
    color: var(--slate-light);
    font-size: 0.9rem;
    font-weight: 500;
}

.stat-card.warning h3 {
    color: var(--accent-warm);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 1.5rem;
}

.dashboard-section {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

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

.section-header h2 {
    font-size: 1.25rem;
    color: var(--slate-dark);
}

/* Contact Cards */
.contact-card {
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.875rem;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.contact-card:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-strong);
    transform: translateX(4px);
}

.contact-card a {
    text-decoration: none;
    color: inherit;
}

.contact-card h3 {
    font-family: var(--font-heading);
    color: var(--slate-dark);
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.contact-category {
    display: inline-block;
    background-color: var(--surface-hover);
    color: var(--slate-medium);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.contact-info {
    font-size: 0.9rem;
    margin: 0.3rem 0;
    color: var(--slate-medium);
}

.contact-last-seen {
    font-size: 0.8rem;
    color: var(--slate-light);
    margin-top: 0.5rem;
}

.contact-last-seen.warning {
    color: var(--accent-warm);
    font-weight: 600;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Filters */
.filters {
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.filter-form {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-form input,
.filter-form select {
    font-family: var(--font-body);
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    background-color: var(--surface);
    color: var(--slate-dark);
    transition: var(--transition);
}

.filter-form input:focus,
.filter-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.1);
}

.filter-form input {
    flex: 1;
    min-width: 250px;
}

/* Forms */
.form-page {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.contact-form {
    max-width: 800px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--slate-dark);
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: var(--slate-dark);
    background-color: var(--surface);
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.1);
}

.form-group small {
    display: block;
    margin-top: 0.35rem;
    color: var(--slate-light);
    font-size: 0.8rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Contact Detail */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-card {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.detail-card h2 {
    margin-bottom: 1.25rem;
    color: var(--slate-dark);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-card h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.info-list {
    display: grid;
    gap: 0.875rem;
}

.info-list dt {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-list dd {
    margin-bottom: 0.75rem;
    color: var(--slate-dark);
}

.badge {
    background-color: var(--primary-color);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.warning-text {
    color: var(--accent-warm);
    font-weight: 600;
}

/* Interactions */
.interaction-form {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-inline {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-inline input,
.form-inline select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
}

.interactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.interaction-item {
    padding: 1rem;
    background-color: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--primary-color);
}

.interaction-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.interaction-type {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
}

.interaction-date {
    color: var(--slate-light);
    font-size: 0.85rem;
}

.interaction-notes {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--slate-medium);
}

/* Journal */
.journal-entries-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.journal-entry-preview {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.journal-entry-preview:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.journal-entry-preview a {
    text-decoration: none;
    color: inherit;
}

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

.entry-header h2 {
    color: var(--slate-dark);
    font-size: 1.25rem;
}

.mood-badge {
    font-size: 1.5rem;
}

.entry-preview-text {
    color: var(--slate-medium);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.entry-preview-text.empty {
    color: var(--slate-light);
    font-style: italic;
}

.entry-mentions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.mention-badge {
    background-color: rgba(139, 105, 20, 0.1);
    color: var(--primary-color);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Journal Editor */
.journal-editor {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.journal-nav {
    display: flex;
    gap: 0.75rem;
}

.journal-form textarea {
    width: 100%;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: var(--font-body);
    line-height: 1.9;
    resize: vertical;
    color: var(--slate-dark);
    min-height: 300px;
    transition: var(--transition);
}

.journal-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.1);
}

.editor-help {
    background-color: rgba(139, 105, 20, 0.05);
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
}

.editor-help p {
    margin: 0;
    color: var(--slate-medium);
    font-size: 0.9rem;
}

.word-counter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.word-counter #wordCount {
    font-weight: 700;
}

.word-min-hint {
    color: var(--text-secondary);
    font-style: italic;
}

.word-count-low {
    color: #e67e22 !important;
}

.word-count-low .word-min-hint {
    color: #e67e22 !important;
}

.word-count-ok {
    color: #27ae60 !important;
}

.mentioned-contacts-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.mentioned-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
    margin-top: 1rem;
}

.mentioned-contact-card {
    background-color: var(--surface-hover);
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    border: 1px solid transparent;
}

.mentioned-contact-card:hover {
    background-color: var(--border-color);
    border-color: var(--border-strong);
}

.mentioned-contact-card h3 {
    color: var(--slate-dark);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.quick-contacts-panel {
    margin-top: 2rem;
    padding: 1.25rem;
    background-color: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.help-text {
    color: var(--slate-light);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.contacts-list-simple {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
}

.contact-quick-item {
    font-size: 0.9rem;
    color: var(--slate-medium);
}

.contact-quick-item code {
    background-color: var(--surface);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Journal Preview on Dashboard */
.journal-preview-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.journal-preview {
    padding: 1rem 1.25rem;
    background-color: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.journal-preview:hover {
    background-color: var(--border-color);
    border-left-color: var(--primary-color);
}

.journal-preview a {
    text-decoration: none;
    color: inherit;
}

.journal-date {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.journal-snippet {
    font-size: 0.9rem;
    color: var(--slate-medium);
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.journal-mentions {
    font-size: 0.8rem;
    color: var(--slate-light);
}

.journal-mentions-section {
    margin-top: 2rem;
}

.section-description {
    color: var(--slate-light);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.journal-mentions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.journal-mention {
    background-color: var(--surface-hover);
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    border-left: 3px solid var(--accent-purple);
}

.journal-mention:hover {
    background-color: var(--border-color);
}

.journal-mention a {
    text-decoration: none;
    color: inherit;
}

.journal-mention-date {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
    margin-bottom: 0.35rem;
}

.journal-mention-snippet {
    font-size: 0.9rem;
    color: var(--slate-medium);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2.5rem;
    color: var(--slate-light);
}

.empty-state a {
    color: var(--primary-color);
    font-weight: 500;
}

.empty-state a:hover {
    text-decoration: underline;
}

.empty-state-large {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-large h2 {
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.empty-state-large p {
    color: var(--slate-light);
    margin-bottom: 2rem;
}

/* View All Links */
.view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
}

.view-all:hover {
    color: var(--primary-hover);
    gap: 0.5rem;
}

/* Footer */
.footer {
    display: none; /* Hidden in Layout E — sidebar replaces footer */
}

/* ===== CONTACTS TABLE ===== */

/* Give contacts page maximum available width */
.le-page:has(.contacts-page) {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

.contacts-table-wrapper {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.contacts-table thead {
    background-color: var(--thead-bg);
    color: white;
}

.contacts-table th {
    font-family: var(--font-heading);
    padding: 0.75rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.contacts-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.contacts-table tbody tr:hover {
    background-color: var(--surface-hover);
}

.contacts-table tbody tr.warning-row {
    background-color: var(--row-warning-bg);
}

.contacts-table tbody tr.warning-row:hover {
    background-color: var(--row-warning-hover-bg);
}

.contacts-table tbody tr.needs-attention {
    background-color: var(--row-urgent-bg);
}

.contacts-table tbody tr.needs-attention:hover {
    background-color: var(--row-urgent-hover-bg);
}

.contacts-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

/* Column widths — keep table compact to avoid horizontal scroll */
.contacts-table .name-cell     { min-width: 120px; white-space: nowrap; }
.contacts-table .category-cell { min-width: 80px; }
.contacts-table .language-cell { min-width: 50px; white-space: nowrap; }
.contacts-table .contact-info-cell { min-width: 130px; font-size: 0.82rem; }
.contacts-table .date-cell     { min-width: 90px; }
.contacts-table .days-cell     { min-width: 65px; white-space: nowrap; text-align: center; }

.name-cell a {
    font-family: var(--font-heading);
    color: var(--slate-dark);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.name-cell a:hover {
    color: var(--primary-color);
}

.category-badge {
    background-color: var(--surface-hover);
    color: var(--slate-medium);
    padding: 0.3rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
}

.language-badge {
    background-color: rgba(139, 105, 20, 0.1);
    color: var(--primary-color);
}

.language-cell {
    font-weight: 500;
    color: var(--slate-medium);
}

.contact-info-cell {
    font-size: 0.85rem;
    color: var(--slate-medium);
}

.contact-info-cell div {
    margin: 0.2rem 0;
}

.no-info {
    color: var(--slate-light);
    font-style: italic;
}

.date-cell {
    white-space: nowrap;
    color: var(--slate-medium);
}

.never-contacted {
    color: var(--accent-red);
    font-style: italic;
    font-weight: 500;
}

.days-badge {
    padding: 0.3rem 0.65rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.days-badge.good {
    background-color: var(--badge-good-bg);
    color: var(--badge-good-text);
}

.days-badge.warning {
    background-color: var(--badge-warn-bg);
    color: var(--badge-warn-text);
}

.days-badge.urgent {
    background-color: var(--badge-urgent-bg);
    color: var(--badge-urgent-text);
}

.notes-cell {
    min-width: 150px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--slate-medium);
}

.no-notes {
    color: var(--slate-light);
}

.recent-mention {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--slate-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mention-date {
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 0.35rem;
    font-style: normal;
}

.no-mentions {
    color: var(--slate-light);
    font-style: italic;
}

/* Journal Mention Improvements */
.journal-mention-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.mood-indicator {
    font-size: 1.2rem;
}

.journal-mention-sentence {
    font-style: italic;
    color: var(--slate-medium);
    padding: 0.65rem 0.875rem;
    background-color: var(--surface);
    border-left: 3px solid var(--accent-purple);
    margin-top: 0.5rem;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* @mention Autocomplete Dropdown */
.mention-autocomplete {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
    min-width: 220px;
}

.mention-option {
    font-family: var(--font-heading);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--slate-dark);
}

.mention-option:last-child {
    border-bottom: none;
}

.mention-option:hover {
    background-color: var(--surface-hover);
}

.mention-option.selected {
    background-color: var(--primary-color);
    color: white;
}

.mention-option::before {
    content: '@';
    margin-right: 0.35rem;
    color: var(--primary-color);
    font-weight: 700;
}

.mention-option.selected::before {
    color: white;
}

/* Mood selector styling */
.mood-options {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mood-options label {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mood-options label:hover {
    border-color: var(--primary-color);
    background-color: var(--surface-hover);
}

.mood-options input[type="radio"] {
    display: none;
}

.mood-options input[type="radio"]:checked + span {
    font-weight: 600;
}

.mood-options label:has(input:checked) {
    border-color: var(--primary-color);
    background-color: rgba(139, 105, 20, 0.1);
}

/* Responsive */
/* In-between breakpoint: shrink nav spacing before full mobile */
@media (max-width: 1024px) {
    .nav-menu {
        gap: 0.2rem 0.75rem;
    }

    .habits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Contacts table — intermediate breakpoint for laptop viewports with sidebar */
@media (max-width: 1100px) {
    .contacts-table-wrapper {
        overflow-x: auto;
    }
    .contacts-table {
        font-size: 0.85rem;
    }
    .contacts-table th,
    .contacts-table td {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 768px) {
    .nav-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        justify-items: center;
    }

    .nav-container .nav-brand,
    .nav-container .nav-primary,
    .nav-container .nav-secondary,
    .nav-container .nav-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .nav-menu {
        justify-content: center;
        gap: 0.3rem 0.75rem;
    }

    .nav-actions {
        justify-content: center;
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .container {
        padding: 0 1rem;
        margin: 1rem auto;
    }

    .dashboard-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

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

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

    .game-stats-banner {
        grid-template-columns: 1fr 1fr;
        padding: 1.25rem;
        gap: 1rem;
    }

    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.75rem;
        justify-content: center;
    }

    .contacts-table-wrapper {
        overflow-x: auto;
    }

    .contacts-table {
        font-size: 0.8rem;
    }

    .contacts-table th,
    .contacts-table td {
        padding: 0.5rem 0.75rem;
    }

    .journal-form textarea {
        padding: 1rem;
        min-height: 250px;
    }
}

/* ===== ACHIEVEMENTS SECTION ===== */
.achievements-section {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.achievements-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.achievements-count {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--slate-light);
    font-weight: 500;
}

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

.achievement-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.achievement-badge.unlocked {
    background: linear-gradient(135deg, rgba(246, 224, 94, 0.15) 0%, rgba(160, 101, 42, 0.1) 100%);
    border-color: var(--accent-warm);
}

.achievement-badge.locked {
    background: var(--surface-hover);
    opacity: 0.6;
}

.achievement-badge.locked .badge-icon {
    filter: grayscale(1);
    opacity: 0.4;
}

.badge-icon {
    font-size: 2rem;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: var(--box-shadow);
}

.achievement-badge.unlocked .badge-icon {
    background: linear-gradient(135deg, #D4A574 0%, #A0652A 100%);
    box-shadow: 0 2px 8px rgba(160, 101, 42, 0.3);
}

.badge-info {
    flex: 1;
}

.badge-name {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.achievement-badge.locked .badge-name {
    color: var(--slate-light);
}

.badge-description {
    font-size: 0.8rem;
    color: var(--slate-light);
    line-height: 1.4;
}

/* Achievement collapse/expand */
.achievement-hidden {
    display: none;
}

.achievements-grid.expanded .achievement-hidden {
    display: flex;
}

.achievements-expand-area {
    text-align: center;
    margin-top: 1rem;
}

.btn-expand-achievements {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--slate-medium);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.btn-expand-achievements:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--slate-dark);
}

.btn-expand-achievements .expand-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    margin-left: 0.3rem;
}

.btn-expand-achievements.expanded .expand-arrow {
    transform: rotate(180deg);
}

/* ===== HIGHLIGHTS =====*/

/* Saved highlight mark in reading content */
mark.saved-highlight {
    background: rgba(160, 101, 42, 0.2);
    border-bottom: 2px solid var(--accent-warm);
    padding: 0.1em 0.15em;
    border-radius: 2px;
    cursor: default;
}

[data-theme="dark"] mark.saved-highlight {
    background: rgba(160, 101, 42, 0.25);
}

/* Floating highlight button */
.highlight-btn-float {
    position: absolute;
    z-index: 50;
    transform: translateX(-50%);
}

.highlight-btn-float button {
    background: var(--slate-dark);
    color: white;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}

.highlight-btn-float button:hover {
    background: var(--primary-color);
    transform: scale(1.05);
}

/* Highlight counter in reading header */
.reading-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.highlight-counter {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--slate-light);
    font-weight: 500;
}

.highlight-counter-icon {
    font-size: 1rem;
}

.highlight-counter-num {
    font-weight: 700;
    color: var(--accent-warm);
}

/* Dashboard highlights preview */
.highlights-preview-section {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.highlights-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.highlight-preview-card {
    background: var(--surface-hover);
    border-left: 3px solid var(--accent-warm);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem;
    transition: var(--transition);
}

.highlight-preview-card:hover {
    background: var(--border-color);
}

.highlight-preview-quote {
    font-style: italic;
    color: var(--slate-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.highlight-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--slate-light);
}

.highlight-preview-source {
    font-weight: 600;
}

/* Full highlights page */
.highlights-subject-group {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.subject-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.subject-group-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

.subject-icon {
    font-size: 1.5rem;
}

.highlight-count {
    font-size: 0.8rem;
    color: var(--slate-light);
    margin-left: auto;
}

/* Session sub-groups within a subject */
.highlights-session-subgroup {
    margin-top: 0.75rem;
}

.highlights-session-subgroup:first-child {
    margin-top: 0;
}

.session-subheader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 0.4rem;
}

.session-subheader-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--slate-medium);
}

.session-subheader-date {
    font-size: 0.75rem;
    color: var(--slate-light);
}

.session-subheader-level {
    font-size: 0.7rem;
    color: var(--slate-light);
    background: var(--surface-hover);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.highlights-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.highlight-card {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-warm);
    transition: opacity 0.3s, transform 0.3s;
}

.highlight-quote-mark {
    font-size: 2rem;
    font-family: Georgia, serif;
    color: var(--accent-warm);
    line-height: 1;
    flex-shrink: 0;
}

.highlight-card blockquote {
    margin: 0;
    font-style: italic;
    color: var(--slate-dark);
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1;
}

.highlight-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--slate-light);
}

.highlight-source {
    font-weight: 600;
}

.highlight-delete-btn {
    background: none;
    border: none;
    color: var(--slate-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    margin-left: auto;
}

.highlight-delete-btn:hover {
    opacity: 1;
    color: var(--accent-red);
}

.highlights-total {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--slate-light);
    font-weight: 500;
}

.empty-highlights {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-highlights .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-highlights h3 {
    color: var(--slate-dark);
    margin-bottom: 0.5rem;
}

.empty-highlights p {
    color: var(--slate-light);
    margin-bottom: 1.5rem;
}

/* ===== EXPORT DROPDOWN ===== */
.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-btn {
    cursor: pointer;
}

.export-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.export-dropdown:hover .export-menu,
.export-dropdown.open .export-menu {
    display: block;
}

.export-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--slate-dark);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.export-menu a:last-child {
    border-bottom: none;
}

.export-menu a:hover {
    background-color: var(--surface-hover);
    color: var(--primary-color);
}

/* ===== DAILY CHALLENGE STYLES ===== */
.daily-challenge-card {
    background: linear-gradient(135deg, #D4A574 0%, #A0652A 100%);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow-md);
    color: var(--slate-dark);
    position: relative;
    overflow: hidden;
}

.daily-challenge-card.completed {
    background: linear-gradient(135deg, #7BAF8A 0%, #4A7C59 100%);
}

.daily-challenge-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.challenge-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.challenge-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.challenge-info {
    flex: 1;
}

.challenge-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.challenge-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

.challenge-xp {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    background: rgba(255,255,255,0.3);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.challenge-description {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.challenge-status {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    z-index: 1;
}

.challenge-status.completed {
    color: white;
}

.challenge-action {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--slate-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.challenge-action:hover {
    gap: 0.5rem;
}

/* Journal page challenge box */
.journal-challenge-box {
    background: linear-gradient(135deg, rgba(246, 224, 94, 0.15) 0%, rgba(160, 101, 42, 0.15) 100%);
    border: 2px solid var(--accent-warm);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.journal-challenge-box.completed {
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.15) 0%, rgba(74, 124, 89, 0.15) 100%);
    border-color: var(--accent-green);
}

.challenge-box-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.challenge-box-icon {
    font-size: 1.5rem;
}

.challenge-box-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
    flex: 1;
}

.challenge-box-xp {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-warm);
    background: rgba(160, 101, 42, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
}

.journal-challenge-box.completed .challenge-box-xp {
    color: var(--accent-green);
    background: rgba(74, 124, 89, 0.15);
}

.challenge-box-description {
    font-size: 0.9rem;
    color: var(--slate-medium);
}

.challenge-box-status {
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent-green);
}

/* Challenge claim checkbox */
.challenge-claim-section {
    background: rgba(246, 224, 94, 0.1);
    border: 1px solid var(--accent-warm);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.challenge-claim-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--slate-dark);
}

.challenge-claim-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-warm);
    cursor: pointer;
}

.claim-text {
    flex: 1;
}

.claim-text strong {
    color: var(--accent-warm);
}

.claim-hint {
    margin-top: 0.5rem;
    margin-left: 2rem;
    font-size: 0.8rem;
    color: var(--slate-light);
}

/* ===== CLAUDE AI SECTION ===== */
.claude-section {
    background: linear-gradient(135deg, rgba(107, 78, 113, 0.1) 0%, rgba(74, 110, 138, 0.1) 100%);
    border: 1px solid var(--accent-purple);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 2rem;
}

.claude-header {
    margin-bottom: 1rem;
}

.claude-header h2 {
    color: var(--accent-purple);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.claude-description {
    color: var(--slate-light);
    font-size: 0.9rem;
    margin: 0;
}

.claude-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.btn-claude {
    font-family: var(--font-heading);
    font-weight: 500;
    padding: 0.6rem 1rem;
    border: 1px solid var(--accent-purple);
    border-radius: var(--border-radius-sm);
    background: var(--surface);
    color: var(--accent-purple);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

.btn-icon {
    font-size: 1.1rem;
}

.claude-response {
    background: var(--surface);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--box-shadow-md);
}

.response-header, .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--accent-purple) 0%, #4A6E8A 100%);
    color: white;
}

.response-title, .chat-title {
    font-family: var(--font-heading);
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
}

.close-btn:hover {
    opacity: 1;
}

.response-content {
    padding: 1.25rem;
    line-height: 1.7;
    color: var(--slate-dark);
}

.response-content .loading {
    color: var(--accent-purple);
    font-style: italic;
}

.response-content .error {
    color: var(--accent-red);
}

.response-content .reflection,
.response-content .suggestions {
    white-space: pre-wrap;
}

/* Challenge verification result */
.challenge-result {
    text-align: center;
    padding: 1rem;
}

.challenge-result .result-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.challenge-result .result-status {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.challenge-result.success .result-status {
    color: var(--accent-green);
}

.challenge-result.pending .result-status {
    color: var(--accent-warm);
}

.challenge-result .result-reason {
    color: var(--slate-medium);
    margin-bottom: 1rem;
}

.challenge-result .result-tip {
    background: rgba(74, 124, 89, 0.1);
    color: var(--accent-green);
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Chat interface */
.claude-chat {
    background: var(--surface);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--box-shadow-md);
}

.chat-messages {
    height: 250px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-message {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    max-width: 85%;
    line-height: 1.5;
}

.chat-message.user {
    background: rgba(139, 105, 20, 0.1);
    color: var(--slate-dark);
    align-self: flex-end;
}

.chat-message.assistant {
    background: rgba(107, 78, 113, 0.1);
    color: var(--slate-dark);
    align-self: flex-start;
}

.chat-message.loading {
    font-style: italic;
    color: var(--slate-light);
}

.chat-message.error {
    background: rgba(245, 101, 101, 0.1);
    color: var(--accent-red);
}

.plan-update-notice {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(39, 174, 96, 0.15);
    border-left: 3px solid #27ae60;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

.chat-input-area input {
    flex: 1;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.chat-input-area input:focus {
    outline: none;
    border-color: var(--accent-purple);
}

/* Saved Claude Reflection */
.saved-reflection {
    background: linear-gradient(135deg, rgba(107, 78, 113, 0.08) 0%, rgba(74, 110, 138, 0.08) 100%);
    border: 1px solid rgba(107, 78, 113, 0.3);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.saved-reflection-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(107, 78, 113, 0.2);
}

.saved-reflection-icon {
    font-size: 1.25rem;
}

.saved-reflection-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--accent-purple);
}

.saved-reflection-content {
    line-height: 1.7;
    color: var(--slate-dark);
    white-space: pre-wrap;
}

/* Selection styling */
::selection {
    background-color: rgba(139, 105, 20, 0.2);
    color: var(--slate-dark);
}

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

::-webkit-scrollbar-track {
    background: var(--surface-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-light);
}

/* ===== LEARNING ROULETTE STYLES ===== */

/* Learning Stats Banner */
.learning-stats-banner {
    background: linear-gradient(135deg, #4A6E8A 0%, #6B4E71 100%);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-around;
    color: white;
    box-shadow: var(--box-shadow-lg);
}

.learning-stats-banner .stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.learning-stats-banner .stat-icon {
    font-size: 2rem;
}

.learning-stats-banner .stat-info {
    display: flex;
    flex-direction: column;
}

.learning-stats-banner .stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
}

.learning-stats-banner .stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Roulette Section */
.roulette-section {
    text-align: center;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

/* Roulette Wheel */
.roulette-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 2rem;
}

.roulette-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #FF6B6B 0deg 45deg,
        #4ECDC4 45deg 90deg,
        #45B7D1 90deg 135deg,
        #96CEB4 135deg 180deg,
        #FFEAA7 180deg 225deg,
        #DDA0DD 225deg 270deg,
        #98D8C8 270deg 315deg,
        #F7DC6F 315deg 360deg
    );
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.2), inset 0 0 30px rgba(0,0,0,0.1);
    transition: transform 0.1s ease-out;
    border: 4px solid var(--surface);
}

.roulette-wheel.spinning {
    animation: rouletteSpin 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

@keyframes rouletteSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1800deg);
    }
}

.wheel-segment {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Position icons around the wheel center */
}

/* Position each segment icon around the wheel - radius of 100px from center */
.wheel-segment:nth-child(1) { top: 15%; left: 50%; transform: translate(-50%, -50%); }
.wheel-segment:nth-child(2) { top: 25%; right: 15%; transform: translate(50%, -50%); }
.wheel-segment:nth-child(3) { top: 50%; right: 5%; transform: translate(50%, -50%); }
.wheel-segment:nth-child(4) { bottom: 25%; right: 15%; transform: translate(50%, 50%); }
.wheel-segment:nth-child(5) { bottom: 15%; left: 50%; transform: translate(-50%, 50%); }
.wheel-segment:nth-child(6) { bottom: 25%; left: 15%; transform: translate(-50%, 50%); }
.wheel-segment:nth-child(7) { top: 50%; left: 5%; transform: translate(-50%, -50%); }
.wheel-segment:nth-child(8) { top: 25%; left: 15%; transform: translate(-50%, -50%); }

.segment-icon {
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wheel segment icons are on dark colored backgrounds — don't darken them */
.segment-icon .inline-icon,
.segment-icon .wheel-segment-icon {
    filter: brightness(0.5) contrast(1.2) !important;
    width: 22px;
    height: 22px;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--slate-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--accent-red);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

.spin-btn {
    font-size: 1.2rem;
    padding: 1rem 3rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.spin-btn:hover {
    animation: none;
}

/* Result Display */
.spin-result {
    padding: 2rem;
}

.result-reveal {
    animation: fadeInUp 0.5s ease-out;
}

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

.spin-result .result-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.spin-result h2 {
    font-size: 1.75rem;
    color: var(--slate-dark);
    margin-bottom: 0.5rem;
}

.spin-result p {
    color: var(--slate-medium);
    margin-bottom: 1.5rem;
}

.length-choice-label {
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.95rem;
}

.length-choice-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-length {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px !important;
    min-width: 180px;
    text-decoration: none;
}

.btn-length small {
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.85;
}

.btn-length-half {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--accent) !important;
}

.btn-length-half:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-length-half {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent) !important;
}

[data-theme="dark"] .btn-length-half:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Result Card (when already spun) */
.roulette-result-card {
    padding: 2rem;
    text-align: center;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-header .result-icon {
    font-size: 3rem;
}

.result-header h2 {
    font-size: 1.5rem;
    color: var(--slate-dark);
}

.result-topic {
    font-size: 1.1rem;
    color: var(--slate-medium);
    margin-bottom: 0.5rem;
}

.result-level {
    margin-bottom: 1.5rem;
}

.result-completed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: var(--accent-green);
    font-weight: 600;
}

.xp-earned {
    background: rgba(74, 124, 89, 0.15);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
}

/* Level Badge */
.level-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.level-badge.beginner {
    background: rgba(74, 124, 89, 0.15);
    color: var(--accent-green);
}

.level-badge.intermediate {
    background: rgba(74, 110, 138, 0.15);
    color: var(--primary-color);
}

.level-badge.advanced {
    background: rgba(107, 78, 113, 0.15);
    color: var(--accent-purple);
}

/* Interests Section */
.interests-section {
    margin-bottom: 2rem;
}

.interests-section h2 {
    margin-bottom: 1rem;
    color: var(--slate-dark);
}

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

.interest-card {
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}

.interest-card:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
}

.interest-card .interest-icon {
    font-size: 2rem;
}

.interest-card .interest-info h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.interest-card .times-selected {
    font-size: 0.8rem;
    color: var(--slate-light);
    margin-top: 0.25rem;
}

/* Recent Sessions */
.recent-sessions-section {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.recent-sessions-section h2 {
    margin-bottom: 1rem;
    color: var(--slate-dark);
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--primary-color);
}

.session-item.completed {
    border-left-color: var(--accent-green);
}

.session-item .session-icon {
    font-size: 1.5rem;
}

.session-item .session-info {
    flex: 1;
}

.session-item .session-info h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.session-item .session-info p {
    font-size: 0.85rem;
    color: var(--slate-light);
}

.session-item .status-completed {
    color: var(--accent-green);
    font-weight: 600;
}

a.session-item {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.session-item:hover {
    transform: translateX(4px);
    box-shadow: var(--box-shadow);
    background: var(--surface);
}

.session-item .session-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    white-space: nowrap;
}

.session-item .status-quiz {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(139, 105, 20, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.session-item .status-continue {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.session-count {
    font-weight: 400;
    color: var(--slate-light);
    font-size: 0.85em;
}

/* Learning Session Page */
.session-info-banner {
    display: flex;
    justify-content: space-around;
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.session-info-banner .info-item {
    text-align: center;
}

.session-info-banner .info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.session-info-banner .info-value {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--slate-dark);
}

.session-info-banner .xp-value {
    color: var(--accent-green);
}

.learning-content-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.learning-content-card .content-body {
    line-height: 1.8;
    color: var(--slate-dark);
}

.learning-content-card .content-body h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}

.learning-content-card .content-body ul,
.learning-content-card .content-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.learning-content-card .content-body li {
    margin-bottom: 0.5rem;
}

.completion-section {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.completion-section h2 {
    margin-bottom: 1rem;
    color: var(--slate-dark);
}

.completion-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    resize: vertical;
    min-height: 100px;
}

.completed-section {
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.1) 0%, rgba(74, 124, 89, 0.1) 100%);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--accent-green);
}

.completed-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.completed-badge .badge-icon {
    font-size: 3rem;
}

.completed-badge h3 {
    color: var(--accent-green);
    font-size: 1.25rem;
}

.completed-badge p {
    color: var(--slate-medium);
    font-size: 0.9rem;
}

.completed-badge .xp-earned {
    color: var(--accent-green);
    font-weight: 600;
}

.session-notes {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.session-notes h3 {
    margin-bottom: 0.5rem;
}

/* Manage Interests Page */
.add-interest-card {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.add-interest-card h2 {
    margin-bottom: 1rem;
}

.add-interest-form .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.add-interest-form .flex-grow {
    flex: 1;
}

.add-interest-form .icon-input {
    width: 80px;
    text-align: center;
    font-size: 1.5rem;
}

.interests-list-section h2 {
    margin-bottom: 1rem;
}

.interests-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.interest-manage-card {
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.interest-manage-card.inactive {
    opacity: 0.6;
    background: var(--surface-hover);
}

.interest-manage-card .interest-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.interest-manage-card .interest-icon {
    font-size: 2rem;
}

.interest-manage-card .interest-details h3 {
    margin-bottom: 0.25rem;
}

.interest-manage-card .interest-description {
    font-size: 0.85rem;
    color: var(--slate-light);
}

.interest-manage-card .interest-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.interest-manage-card .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interest-manage-card .stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--slate-dark);
}

.interest-manage-card .stat-label {
    font-size: 0.75rem;
    color: var(--slate-light);
    text-transform: uppercase;
}

.interest-manage-card .interest-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.status-indicator {
    font-size: 0.8rem;
    font-weight: 500;
}

.status-indicator.active {
    color: var(--accent-green);
}

.status-indicator.inactive {
    color: var(--slate-light);
}

/* Quiz Styles */
.quiz-section {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.quiz-section h2 {
    margin-bottom: 0.5rem;
}

.quiz-description {
    color: var(--slate-light);
    margin-bottom: 1rem;
}

.quiz-question {
    background: var(--surface-hover);
    padding: 1.25rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
}

.question-text {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.option-label:hover {
    border-color: var(--primary-color);
    background: rgba(139, 105, 20, 0.05);
}

.option-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.quiz-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.quiz-score {
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

.quiz-score.excellent {
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.15) 0%, rgba(74, 124, 89, 0.15) 100%);
    border: 2px solid var(--accent-green);
}

.quiz-score.good {
    background: linear-gradient(135deg, rgba(74, 110, 138, 0.15) 0%, rgba(144, 205, 244, 0.15) 100%);
    border: 2px solid var(--primary-color);
}

.quiz-score.needs-work {
    background: linear-gradient(135deg, rgba(246, 173, 85, 0.15) 0%, rgba(160, 101, 42, 0.15) 100%);
    border: 2px solid var(--accent-warm);
}

.quiz-score h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.bonus-xp {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.quiz-review {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-question {
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    border-left: 4px solid;
}

.review-question.correct {
    background: rgba(74, 124, 89, 0.1);
    border-left-color: var(--accent-green);
}

.review-question.incorrect {
    background: rgba(245, 101, 101, 0.1);
    border-left-color: var(--accent-red);
}

.your-answer {
    color: var(--slate-medium);
    font-size: 0.9rem;
}

.correct-answer {
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.9rem;
}

.explanation {
    font-style: italic;
    color: var(--slate-light);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Rating Stars */
.rating-stars {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.rating-stars .star {
    font-size: 1.5rem;
    color: var(--border-strong);
    cursor: pointer;
    transition: var(--transition);
}

.rating-stars .star:hover,
.rating-stars .star.filled {
    color: var(--accent-yellow);
}

/* Learning Session Progress Bar */
.learning-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.progress-step .step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.1rem;
    background: var(--surface-hover);
    color: var(--slate-light);
    border: 2px solid var(--border-color);
    transition: var(--transition);
}

.progress-step .step-label {
    font-size: 0.85rem;
    color: var(--slate-light);
    font-weight: 500;
}

.progress-step.active .step-number {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.progress-step.completed .step-number {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

.progress-connector {
    width: 80px;
    height: 3px;
    background: var(--border-color);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
}

/* Learning Phase Containers */
.learning-phase {
    animation: fadeIn 0.3s ease;
}

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

/* Reading Phase */
.reading-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.reading-header h2 {
    margin: 0;
    color: var(--primary-color);
}

.reading-timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.timer-icon {
    font-size: 1.2rem;
}

.timer-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--slate-dark);
}

.reading-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.reading-prompt {
    color: var(--slate-light);
    margin-bottom: 1rem;
}

/* Quiz Phase */
.quiz-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.quiz-header {
    text-align: center;
    margin-bottom: 2rem;
}

.quiz-header h2 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.quiz-intro {
    color: var(--slate-light);
}

.quiz-loading {
    text-align: center;
    padding: 3rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 1s linear infinite;
}

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

.quiz-loading p {
    color: var(--slate-light);
}

.question-number {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quiz-question.answered {
    border-left: 3px solid var(--accent-green);
}

.quiz-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Quiz Score Card */
.quiz-score-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}

.quiz-score-card.excellent {
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.15) 0%, rgba(74, 124, 89, 0.1) 100%);
    border: 2px solid var(--accent-green);
}

.quiz-score-card.good {
    background: linear-gradient(135deg, rgba(74, 110, 138, 0.15) 0%, rgba(144, 205, 244, 0.1) 100%);
    border: 2px solid var(--primary-color);
}

.quiz-score-card.needs-work {
    background: linear-gradient(135deg, rgba(246, 173, 85, 0.15) 0%, rgba(160, 101, 42, 0.1) 100%);
    border: 2px solid var(--accent-warm);
}

.score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.score-emoji {
    font-size: 2.5rem;
}

.score-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--slate-dark);
}

.score-text {
    color: var(--slate-medium);
    margin-bottom: 0.5rem;
}

.bonus-xp-earned {
    font-size: 1.25rem;
    color: var(--accent-green);
    font-weight: 600;
}

.quiz-review {
    margin-top: 1.5rem;
}

.quiz-review h3 {
    margin-bottom: 1rem;
    color: var(--slate-dark);
}

.review-q {
    margin-bottom: 0.5rem;
}

.quiz-continue {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Completion Phase */
.completion-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.completion-header {
    text-align: center;
    margin-bottom: 2rem;
}

.completion-header h2 {
    color: var(--accent-green);
    margin-bottom: 0.5rem;
}

.completion-header p {
    color: var(--slate-light);
}

.xp-summary {
    background: linear-gradient(135deg, rgba(74, 110, 138, 0.1) 0%, rgba(144, 205, 244, 0.05) 100%);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
    border: 1px solid rgba(74, 110, 138, 0.2);
}

.xp-summary h3 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.xp-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xp-line {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--slate-medium);
}

.xp-line.bonus {
    color: var(--accent-green);
}

.xp-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Review Mode for completed sessions */
.learning-content-card.review-mode {
    opacity: 0.9;
}

.learning-content-card.review-mode h2 {
    color: var(--slate-medium);
}

.session-notes-card {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
}

.session-notes-card h3 {
    margin-bottom: 0.75rem;
    color: var(--slate-dark);
}

.session-notes-card p {
    color: var(--slate-medium);
    white-space: pre-wrap;
}

.quiz-score-display {
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Responsive for learning pages */
@media (max-width: 768px) {
    .learning-stats-banner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .learning-stats-banner .stat-item {
        justify-content: center;
    }

    .roulette-container {
        width: 250px;
        height: 250px;
    }

    .session-info-banner {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .session-info-banner .info-item {
        flex: 1 1 45%;
    }

    .add-interest-form .form-row {
        flex-direction: column;
    }

    .interests-manage-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== QA FIX STYLES ===== */

/* Disabled navigation button */
.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Small delete button for interactions */
.btn-delete-small {
    background: none;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    opacity: 0.5;
    transition: var(--transition);
}

.btn-delete-small:hover {
    opacity: 1;
    background: rgba(245, 101, 101, 0.1);
}

/* Interaction header flex layout for delete button */
.interaction-header {
    display: flex;
    align-items: center;
}

/* Journal nav prev/next */
.journal-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ===== LOL WORDLE STYLES ===== */

.wordle-page {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.wordle-header h1 {
    font-size: 2rem;
    margin-bottom: 4px;
}

.wordle-subtitle {
    color: var(--slate-light);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.wordle-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* Message */
.wordle-message {
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
    animation: fadeIn 0.2s ease;
}

.wordle-message.error {
    background: var(--slate-dark);
    color: white;
}

[data-theme="dark"] .wordle-message.error {
    background: #3a3a3c;
    color: white;
}

.wordle-message.success {
    background: var(--accent-green);
    color: white;
}

/* Game Board */
.wordle-board {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin-bottom: 20px;
}

.wordle-row {
    display: flex;
    gap: 6px;
}

.wordle-row.shake {
    animation: shake 0.6s ease;
}

.wordle-tile {
    width: 58px;
    height: 58px;
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--slate-dark);
    background: var(--surface);
    transition: transform 0.3s ease;
    user-select: none;
}

.wordle-tile.filled {
    border-color: var(--slate-medium);
    animation: pop 0.1s ease;
}

.wordle-tile.flip {
    animation: flipIn 0.5s ease;
}

.wordle-tile.revealed {
    border-color: transparent;
    color: white;
}

.wordle-tile.correct {
    background: #6aaa64;
    border-color: #6aaa64;
    color: white;
}

.wordle-tile.present {
    background: #c9b458;
    border-color: #c9b458;
    color: white;
}

.wordle-tile.absent {
    background: #787c7e;
    border-color: #787c7e;
    color: white;
}

/* Dark mode tile colors */
[data-theme="dark"] .wordle-tile {
    border-color: #565758;
    color: white;
    background: var(--surface);
}

[data-theme="dark"] .wordle-tile.filled {
    border-color: #818384;
}

[data-theme="dark"] .wordle-tile.correct {
    background: #538d4e;
    border-color: #538d4e;
}

[data-theme="dark"] .wordle-tile.present {
    background: #b59f3b;
    border-color: #b59f3b;
}

[data-theme="dark"] .wordle-tile.absent {
    background: #3a3a3c;
    border-color: #3a3a3c;
}

/* Keyboard */
.wordle-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.keyboard-row {
    display: flex;
    gap: 5px;
}

.key-spacer-half {
    width: 20px;
}

.key-btn {
    min-width: 36px;
    height: 52px;
    border: none;
    border-radius: 6px;
    background: var(--surface-hover);
    color: var(--slate-dark);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    user-select: none;
}

.key-btn:hover {
    background: var(--border-strong);
}

.key-btn.key-wide {
    min-width: 58px;
    font-size: 0.75rem;
}

.key-btn.correct {
    background: #6aaa64;
    color: white;
}

.key-btn.present {
    background: #c9b458;
    color: white;
}

.key-btn.absent {
    background: #787c7e;
    color: white;
}

[data-theme="dark"] .key-btn {
    background: #818384;
    color: white;
}

[data-theme="dark"] .key-btn:hover {
    background: #999;
}

[data-theme="dark"] .key-btn.correct {
    background: #538d4e;
}

[data-theme="dark"] .key-btn.present {
    background: #b59f3b;
}

[data-theme="dark"] .key-btn.absent {
    background: #3a3a3c;
}

/* Modals */
.wordle-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.wordle-modal-content {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 28px;
    max-width: 420px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--box-shadow-lg);
}

.wordle-modal-content h2 {
    margin-bottom: 16px;
    text-align: center;
}

.wordle-modal-content h3 {
    margin: 16px 0 10px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wordle-modal-content .close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--slate-light);
}

/* Stats */
.stats-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.stat-box {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--slate-dark);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--slate-light);
    text-transform: uppercase;
}

/* Guess Distribution */
.guess-distribution {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dist-label {
    font-weight: 700;
    font-size: 0.85rem;
    width: 14px;
    text-align: right;
    color: var(--slate-dark);
}

.dist-bar-wrapper {
    flex: 1;
}

.dist-bar {
    background: #787c7e;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 2px 8px;
    min-width: 28px;
    text-align: right;
    border-radius: 3px;
}

/* Help */
.help-rules {
    text-align: left;
    margin: 12px 0;
    padding-left: 20px;
}

.help-rules li {
    margin-bottom: 6px;
    color: var(--slate-medium);
}

.help-example {
    margin: 16px 0;
    text-align: left;
}

.help-example p {
    font-size: 0.9rem;
    color: var(--slate-medium);
    margin-top: 6px;
}

.help-row {
    justify-content: flex-start;
}

.help-row .wordle-tile {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

.help-footer {
    margin-top: 16px;
    color: var(--slate-light);
    font-size: 0.85rem;
    font-style: italic;
}

/* Animations */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes flipIn {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

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

/* Responsive */
@media (max-width: 480px) {
    .wordle-tile {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .key-btn {
        min-width: 28px;
        height: 46px;
        font-size: 0.75rem;
    }

    .key-btn.key-wide {
        min-width: 46px;
        font-size: 0.65rem;
    }
}

/* ===== PORTFOLIO STYLES ===== */

.portfolio-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.portfolio-page .page-header h1 {
    margin-bottom: 4px;
}

.portfolio-subtitle {
    color: var(--slate-light);
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Portfolio Overview Stats */
.portfolio-overview {
    margin-bottom: 28px;
}

.portfolio-stats-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.portfolio-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px 28px;
    text-align: center;
    min-width: 120px;
}

.portfolio-stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--accent-primary);
}

.portfolio-stat-label {
    font-size: 0.8rem;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Briefing Section */
.briefing-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 28px;
}

.briefing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.briefing-header h2 {
    margin: 0;
}

.briefing-loading {
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.loading-detail {
    font-size: 0.85rem;
    color: var(--slate-light);
}

.briefing-content {
    line-height: 1.7;
    color: var(--slate-dark);
}

.briefing-content h2 {
    font-size: 1.3rem;
    margin: 24px 0 12px;
    color: var(--slate-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.briefing-content h3 {
    font-size: 1.1rem;
    margin: 18px 0 8px;
    color: var(--accent-primary);
}

.briefing-content ul, .briefing-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.briefing-content li {
    margin-bottom: 6px;
}

.briefing-content strong {
    color: var(--slate-dark);
}

.briefing-content p {
    margin: 8px 0;
}

.briefing-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--slate-light);
}

.briefing-error {
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 12px 16px;
    border-radius: var(--border-radius-sm);
}

/* Holdings Section */
.holdings-section {
    margin-bottom: 28px;
}

.holdings-section h2 {
    margin-bottom: 20px;
}

.holdings-table-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.holdings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.holdings-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--slate-light);
    border-bottom: 2px solid var(--border);
    background: rgba(99, 102, 241, 0.03);
}

.holdings-table tbody tr.holding-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.holdings-table tbody tr.holding-row:last-of-type {
    border-bottom: none;
}

.holdings-table tbody tr.holding-row:hover {
    background: rgba(99, 102, 241, 0.04);
}

.holdings-table td {
    padding: 8px 14px;
    vertical-align: middle;
}

.holding-ticker-cell {
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--slate-dark);
}

.holding-name-cell {
    color: var(--slate-medium);
}

.holding-layer-cell {
    color: var(--slate-light);
    font-size: 0.8rem;
}

.holding-weight-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.holding-weight-cell span {
    font-weight: 600;
    color: var(--accent-primary);
    min-width: 40px;
    text-align: right;
}

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

.weight-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent-primary), #818cf8);
    border-radius: 3px;
}

.deep-dive-row td {
    padding: 0 14px 14px;
    background: rgba(99, 102, 241, 0.02);
}

.holding-conviction {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
}

.conviction-high {
    background: rgba(74, 124, 89, 0.15);
    color: var(--accent-green);
}

.conviction-medium {
    background: rgba(160, 101, 42, 0.15);
    color: var(--accent-orange);
}

.conviction-low {
    background: rgba(160, 174, 192, 0.15);
    color: var(--slate-light);
}

.conviction-very-high {
    background: rgba(74, 124, 89, 0.25);
    color: var(--accent-green);
}

.btn-deep-dive {
    background: none;
    border: 1px solid var(--border);
    color: var(--accent-primary);
    padding: 3px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

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

.btn-deep-dive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.holding-actions-cell {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    padding-right: 18px;
}

.holding-actions-cell .btn-deep-dive {
    margin-right: 6px;
}

.btn-sell {
    background: none;
    border: 1px solid var(--border);
    color: #e74c3c;
    padding: 3px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0;
}

.holding-row:hover .btn-sell {
    opacity: 1;
}

.btn-sell:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

/* Deep Dive Content */
.deep-dive-content {
    padding: 12px 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--slate-medium);
}

.deep-dive-content h3 {
    font-size: 0.95rem;
    color: var(--slate-dark);
    margin: 12px 0 6px;
}

.deep-dive-content h4 {
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin: 10px 0 4px;
}

.deep-dive-content ul {
    padding-left: 18px;
    margin: 6px 0;
}

.deep-dive-content li {
    margin-bottom: 4px;
}

.deep-dive-content p {
    margin: 6px 0;
}

.deep-dive-content .error {
    color: var(--accent-red);
}

/* Watchlist Section */
.watchlist-section h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.watchlist-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(107, 78, 113, 0.15);
    color: var(--accent-purple);
}

.watchlist-row {
    opacity: 0.85;
}

.watchlist-row:hover {
    opacity: 1;
}

/* Verdict badges */
.verdict-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.verdict-buy,
.verdict-strong-buy {
    background: rgba(74, 124, 89, 0.15);
    color: var(--accent-green);
}

.verdict-contrarian-buy {
    background: rgba(107, 78, 113, 0.15);
    color: var(--accent-purple);
}

.verdict-hold {
    background: rgba(160, 174, 192, 0.15);
    color: var(--slate-light);
}

.verdict-speculative {
    background: rgba(160, 101, 42, 0.15);
    color: var(--accent-warm);
}

.verdict-avoid {
    background: rgba(245, 101, 101, 0.15);
    color: var(--accent-red);
}

.verdict-pre-ipo {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
    border: 1px dashed var(--accent-primary);
}

/* Add Stock Form */
.add-stock-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.stock-input {
    padding: 0.45rem 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    background: var(--surface);
    color: var(--slate-dark);
}

.stock-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.stock-ticker-input { width: 80px; text-transform: uppercase; }
.stock-company-input { flex: 1; min-width: 140px; }
.stock-layer-input { width: 120px; }
.stock-verdict-input { width: 130px; cursor: pointer; }

/* Watchlist action buttons */
.watchlist-actions-cell {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.btn-promote {
    background: none;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0;
}

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

.btn-remove {
    background: none;
    border: none;
    color: var(--slate-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0;
    transition: var(--transition);
}

.btn-remove:hover {
    color: var(--accent-red);
}

.watchlist-row:hover .btn-promote,
.watchlist-row:hover .btn-remove {
    opacity: 1;
}

/* Promote Modal */
.promote-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.promote-card {
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: var(--box-shadow-lg);
    min-width: 320px;
    max-width: 400px;
}

.promote-card h3 {
    margin-bottom: 1.25rem;
    color: var(--slate-dark);
}

.promote-card h3 span {
    color: var(--primary-color);
    font-weight: 700;
}

.promote-fields {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.promote-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--slate-medium);
    flex: 1;
}

.promote-fields input,
.promote-fields select {
    padding: 0.5rem 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--slate-dark);
}

.promote-fields input:focus,
.promote-fields select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.promote-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
    font-style: italic;
}

.promote-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.holding-value-cell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ===== LIVE PRICES & P&L ===== */

.portfolio-live-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-top: 12px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.82rem;
}

.live-status {
    color: var(--text-secondary);
}
.live-status.loading {
    color: var(--accent);
}
.live-status.updated {
    color: var(--text-secondary);
}
.live-status.error {
    color: #ef4444;
}

.btn-refresh-prices {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
}
.btn-refresh-prices:hover {
    opacity: 0.85;
}
.btn-refresh-prices:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.price-loading-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulseDot 1s ease-in-out infinite;
    vertical-align: middle;
    margin-left: 6px;
}
@keyframes pulseDot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.pnl-positive {
    color: #22c55e !important;
}
.pnl-negative {
    color: #ef4444 !important;
}

.holding-pnl-cell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.holding-pnl-cell small {
    font-weight: 500;
    opacity: 0.8;
}

[data-theme="dark"] .portfolio-live-bar {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .promote-card {
    background: var(--surface);
}

/* Portfolio Responsive */
@media (max-width: 600px) {
    .portfolio-stats-row {
        flex-direction: column;
        align-items: center;
    }

    .portfolio-stat {
        width: 100%;
        max-width: 280px;
    }

    .holdings-table-wrapper {
        overflow-x: auto;
    }

    .holding-layer-cell {
        display: none;
    }

    .holdings-table thead th:nth-child(3) {
        display: none;
    }

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


/* ===== PORTFOLIO TABS & VALUE INVESTOR DASHBOARD ===== */

/* Tab Navigation */
.portfolio-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius);
    padding: 4px;
}

.portfolio-tab {
    flex: 1;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-tab:hover {
    color: var(--slate-dark);
}

.portfolio-tab.active {
    background: var(--surface);
    color: var(--slate-dark);
    box-shadow: var(--box-shadow-sm);
}

/* Selectors */
.fundamentals-selector,
.compare-selector {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.selector-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.selector-or {
    font-size: 0.85rem;
    color: var(--slate-light);
    font-weight: 500;
}

.compare-inputs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.compare-inputs .stock-input {
    flex: 1;
    min-width: 100px;
}

/* Loading & Error */
.fund-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--slate-light);
}

.fund-loading .loading-spinner {
    margin: 0 auto 1rem;
}

.fund-error {
    background: rgba(160, 64, 42, 0.08);
    border: 1px solid var(--accent-red);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    color: var(--accent-red);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Fundamentals Header */
.fund-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

.fund-header-info h2 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    color: var(--slate-dark);
    letter-spacing: 0.5px;
}

.fund-company {
    font-size: 1.05rem;
    color: var(--slate);
    margin-bottom: 0.15rem;
}

.fund-sector {
    font-size: 0.9rem;
    color: var(--slate-light);
}

.fund-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.fund-score-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

/* Price Bar */
.fund-price-bar {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.price-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.price-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--slate-dark);
    font-family: var(--font-heading);
}

/* KPI Sections */
.kpi-section {
    margin-bottom: 1.5rem;
}

.kpi-section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.875rem 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

.kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--slate-dark);
    margin-bottom: 0.2rem;
}

.kpi-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate-light);
}

/* KPI Colors */
.kpi-green {
    border-left-color: var(--accent-green);
    background: linear-gradient(135deg, var(--green-light) 0%, var(--surface) 100%);
}

.kpi-yellow {
    border-left-color: var(--accent-yellow);
    background: linear-gradient(135deg, rgba(156,122,30,0.06) 0%, var(--surface) 100%);
}

.kpi-red {
    border-left-color: var(--accent-red);
    background: linear-gradient(135deg, rgba(160,64,42,0.06) 0%, var(--surface) 100%);
}

.kpi-gray {
    border-left-color: var(--slate-light);
    opacity: 0.7;
}

/* ===== FUNDAMENTALS GUIDE ===== */

.fund-guide {
    margin-top: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.fund-guide-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-dark);
    transition: background 0.2s;
}

.fund-guide-toggle:hover {
    background: var(--hover-bg);
}

.fund-guide-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--slate);
    border-bottom: 2px solid var(--slate);
    transform: rotate(45deg);
    transition: transform 0.25s;
}

.fund-guide.open .fund-guide-chevron {
    transform: rotate(-135deg);
}

.fund-guide-content {
    display: none;
    padding: 0.5rem 1.5rem 1.5rem;
    background: var(--surface);
}

.fund-guide.open .fund-guide-content {
    display: block;
}

.fund-guide-section {
    margin-bottom: 1.75rem;
}

.fund-guide-section:last-child {
    margin-bottom: 0;
}

.fund-guide-section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate-dark);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.fund-guide-section p {
    font-size: 0.875rem;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.fund-guide-note {
    font-style: italic;
    opacity: 0.85;
}

.fund-guide-scale {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.fund-guide-scale-item {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    border-left: 4px solid;
}

.fund-guide-scale-item.scale-green {
    border-left-color: var(--accent-green);
    background: var(--green-light);
    color: var(--slate-dark);
}

.fund-guide-scale-item.scale-yellow {
    border-left-color: var(--accent-yellow);
    background: rgba(156,122,30,0.06);
    color: var(--slate-dark);
}

.fund-guide-scale-item.scale-red {
    border-left-color: var(--accent-red);
    background: rgba(160,64,42,0.06);
    color: var(--slate-dark);
}

.fund-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.825rem;
    margin-top: 0.5rem;
}

.fund-guide-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-weight: 600;
    color: var(--slate);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.fund-guide-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--slate);
    line-height: 1.5;
    vertical-align: top;
}

.fund-guide-table td:first-child {
    white-space: nowrap;
    color: var(--slate-dark);
}

.fund-guide-table th.guide-green { color: var(--accent-green); }
.fund-guide-table th.guide-yellow { color: var(--accent-yellow); }
.fund-guide-table th.guide-red { color: var(--accent-red); }

.fund-guide-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fund-guide-tips li {
    font-size: 0.875rem;
    color: var(--slate);
    line-height: 1.6;
    padding: 0.5rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.fund-guide-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
}

@media (max-width: 768px) {
    .fund-guide-content {
        padding: 0.5rem 1rem 1rem;
    }
    .fund-guide-table {
        font-size: 0.775rem;
    }
    .fund-guide-table th.guide-green,
    .fund-guide-table th.guide-yellow,
    .fund-guide-table th.guide-red {
        font-size: 0.7rem;
    }
}

/* ===== COMPARE TAB ===== */

.cmp-scores {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cmp-score-card {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface);
}

.cmp-score-ticker {
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate-dark);
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.cmp-score-value {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--font-heading);
    line-height: 1.1;
}

.cmp-score-name {
    font-size: 0.78rem;
    color: var(--slate-light);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-score-green .cmp-score-value { color: var(--accent-green); }
.cmp-score-yellow .cmp-score-value { color: var(--accent-yellow); }
.cmp-score-red .cmp-score-value { color: var(--accent-red); }

.cmp-score-green { border-left: 4px solid var(--accent-green); }
.cmp-score-yellow { border-left: 4px solid var(--accent-yellow); }
.cmp-score-red { border-left: 4px solid var(--accent-red); }

/* Radar Chart */
.cmp-radar-container {
    max-width: 480px;
    margin: 0 auto 2rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

/* Comparison Table */
.cmp-table-wrapper {
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cmp-table th {
    padding: 0.75rem 1rem;
    text-align: right;
    font-weight: 700;
    color: var(--slate-dark);
    background: var(--surface-hover);
    border-bottom: 2px solid var(--border-color);
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.cmp-table th:first-child {
    text-align: left;
}

.cmp-table td {
    padding: 0.6rem 1rem;
    text-align: right;
    color: var(--slate);
    border-bottom: 1px solid var(--border-color);
}

.cmp-table td:first-child {
    text-align: left;
}

.cmp-metric-name {
    font-weight: 500;
    color: var(--slate);
}

.cmp-section-row td {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--slate-light);
    background: var(--surface-hover);
    padding: 0.5rem 1rem;
    text-align: left !important;
}

.cmp-winner {
    font-weight: 700;
    color: var(--accent-green) !important;
    position: relative;
}

.cmp-winner::after {
    content: ' *';
    font-size: 0.75em;
}

.cmp-score-row td {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-hover);
}

/* Rating colors in table */
.cmp-rating-green { color: var(--accent-green); }
.cmp-rating-yellow { color: var(--accent-yellow); }
.cmp-rating-red { color: var(--accent-red); }
.cmp-rating-gray { color: var(--slate-light); }

/* Holdings ticker clickable hint */
.holding-ticker-cell {
    cursor: pointer;
}

.holding-ticker-cell:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

/* ===== DARK MODE: Value Investor Dashboard ===== */
[data-theme="dark"] .portfolio-tabs {
    background: var(--surface-hover);
}

[data-theme="dark"] .portfolio-tab.active {
    background: var(--surface);
    color: var(--text-light);
}

[data-theme="dark"] .fund-header,
[data-theme="dark"] .fund-price-bar,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .cmp-score-card,
[data-theme="dark"] .cmp-radar-container {
    background: var(--surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .fund-header-info h2,
[data-theme="dark"] .price-value,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .cmp-score-ticker,
[data-theme="dark"] .cmp-table th {
    color: var(--text-light);
}

[data-theme="dark"] .kpi-green {
    background: linear-gradient(135deg, rgba(123,175,138,0.1) 0%, var(--surface) 100%);
    border-left-color: var(--accent-green);
}

[data-theme="dark"] .kpi-yellow {
    background: linear-gradient(135deg, rgba(201,168,76,0.1) 0%, var(--surface) 100%);
    border-left-color: var(--accent-yellow);
}

[data-theme="dark"] .kpi-red {
    background: linear-gradient(135deg, rgba(196,123,101,0.1) 0%, var(--surface) 100%);
    border-left-color: var(--accent-red);
}

[data-theme="dark"] .cmp-table td,
[data-theme="dark"] .cmp-table th {
    border-color: var(--border-color);
}

[data-theme="dark"] .cmp-section-row td,
[data-theme="dark"] .cmp-table th,
[data-theme="dark"] .cmp-score-row td {
    background: var(--surface-hover);
}

[data-theme="dark"] .fund-error {
    background: rgba(196,123,101,0.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

[data-theme="dark"] .fund-company { color: var(--text-muted, #999); }
[data-theme="dark"] .fund-sector { color: var(--text-muted, #999); }
[data-theme="dark"] .selector-or { color: var(--text-muted, #999); }

/* Warning style (non-fatal, amber) for skipped tickers etc. */
.fund-warning {
    background: rgba(156,122,30,0.08);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

[data-theme="dark"] .fund-warning {
    background: rgba(201,168,76,0.1);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

/* ===== RESPONSIVE: Value Investor Dashboard ===== */
@media (max-width: 768px) {
    .portfolio-tabs {
        gap: 0;
    }

    .portfolio-tab {
        font-size: 0.85rem;
        padding: 0.6rem 0.5rem;
    }

    .selector-row {
        flex-direction: column;
        align-items: stretch;
    }

    .selector-or {
        text-align: center;
    }

    .fund-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .fund-price-bar {
        justify-content: space-between;
    }

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

    .compare-inputs {
        flex-direction: column;
    }

    .compare-inputs .stock-input {
        min-width: unset;
    }

    .cmp-scores {
        flex-direction: column;
    }

    .cmp-table-wrapper {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }

    .cmp-radar-container {
        max-width: 100%;
    }
}

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

    .fund-price-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .price-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* ===== MEDITATION STYLES ===== */

.meditation-page {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.meditation-page .page-header h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--slate-dark);
}

/* Stats Banner */
.meditation-stats-banner {
    background: linear-gradient(135deg, #4A6E8A 0%, #4A7C59 100%);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2rem;
    color: white;
    box-shadow: var(--box-shadow);
}

.meditation-stats-banner .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meditation-stats-banner .stat-icon {
    font-size: 1.5rem;
}

.meditation-stats-banner .stat-info {
    display: flex;
    flex-direction: column;
}

.meditation-stats-banner .stat-number {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.meditation-stats-banner .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
    font-weight: 500;
    font-family: var(--font-sans);
}

/* Mode Tabs */
.meditation-mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius);
    padding: 4px;
}

.mode-tab {
    flex: 1;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab.active {
    background: var(--surface);
    color: var(--slate-dark);
    box-shadow: var(--box-shadow-sm);
}

/* Panel */
.meditation-panel {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

/* Duration Selector */
.duration-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s;
}

.duration-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.duration-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.duration-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Timer Ring */
.timer-circle-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 2rem auto;
}

.timer-ring {
    width: 100%;
    height: 100%;
}

.timer-ring-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.timer-ring-progress {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 1s linear;
}

.timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--slate-dark);
    letter-spacing: 2px;
}

/* Controls */
.timer-controls, .breathing-controls {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.btn-meditation {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

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

.btn-start:hover {
    background: #3D6B4C;
}

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

.btn-pause:hover {
    background: #dd6b20;
}

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

.btn-resume:hover {
    background: #6B4F0E;
}

.btn-stop {
    background: var(--surface-hover);
    color: var(--slate-dark);
    border: 2px solid var(--border-color);
}

.btn-stop:hover {
    background: var(--border-color);
}

/* Timer Options */
.timer-options {
    margin-top: 1rem;
}

.option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--slate-medium);
    cursor: pointer;
}

.option-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

/* Breathing Patterns */
.breathing-patterns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pattern-card {
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.pattern-card:hover {
    border-color: var(--primary-color);
}

.pattern-card.active {
    border-color: var(--primary-color);
    background: rgba(139, 105, 20, 0.05);
}

.pattern-card h3 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--slate-dark);
    margin-bottom: 0.25rem;
}

.pattern-card p {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.pattern-desc {
    font-size: 0.7rem;
    color: var(--slate-light);
}

/* Custom Pattern Inputs */
.custom-pattern-inputs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.custom-pattern-inputs label {
    font-size: 0.85rem;
    color: var(--slate-medium);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.custom-pattern-inputs input {
    width: 50px;
    padding: 0.3rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    text-align: center;
    background: var(--surface);
    color: var(--slate-dark);
}

/* Breathing Duration */
.breathing-duration {
    margin-bottom: 1.5rem;
}

.breathing-duration label {
    font-size: 0.9rem;
    color: var(--slate-medium);
}

.breathing-duration select {
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface);
    color: var(--slate-dark);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* Breathing Circle */
.breathing-circle-container {
    margin: 2rem auto;
    text-align: center;
}

.breathing-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 124, 89, 0.25), rgba(74, 110, 138, 0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: transform ease-in-out, background ease-in-out, box-shadow ease-in-out;
    transform: scale(1);
}

.breathing-circle.inhale {
    transform: scale(1.8);
    background: radial-gradient(circle, rgba(74, 124, 89, 0.45), rgba(74, 110, 138, 0.35));
    box-shadow: 0 0 40px rgba(74, 124, 89, 0.25);
}

.breathing-circle.exhale {
    transform: scale(1.0);
    background: radial-gradient(circle, rgba(74, 124, 89, 0.15), rgba(74, 110, 138, 0.15));
}

.breathing-circle.hold {
    box-shadow: 0 0 30px rgba(74, 124, 89, 0.3);
}

.breathing-instruction {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
}

.breathing-timer {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate-medium);
}

/* Complete Overlay */
.meditation-complete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.meditation-complete-card {
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--box-shadow-lg);
}

.complete-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.meditation-complete-card h2 {
    font-size: 1.5rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.complete-stats p {
    font-size: 1.1rem;
    color: var(--slate-medium);
    margin-bottom: 0.3rem;
}

.xp-earned {
    font-family: var(--font-heading);
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--accent-green) !important;
}

.achievement-unlock {
    font-weight: 600;
    color: var(--accent-purple);
    margin-top: 0.5rem;
}

/* Weekly Chart */
.meditation-weekly-chart {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.meditation-weekly-chart h3 {
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.week-bars {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 120px;
    gap: 0.5rem;
}

.week-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.week-bar-value {
    font-size: 0.7rem;
    color: var(--slate-light);
    margin-bottom: 4px;
    font-weight: 600;
}

.week-bar {
    width: 100%;
    max-width: 40px;
    background: var(--primary-color);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    opacity: 0.7;
}

.week-bar-label {
    font-size: 0.7rem;
    color: var(--slate-light);
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Today's Log */
.meditation-today-log {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}

.meditation-today-log h3 {
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.session-log-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.session-log-item:last-child {
    border-bottom: none;
}

.log-type {
    font-size: 1.2rem;
}

.log-detail {
    flex: 1;
    font-size: 0.9rem;
    color: var(--slate-medium);
}

.log-xp {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent-green);
}

.meditation-today-log .empty-state {
    text-align: center;
    color: var(--slate-light);
    font-size: 0.9rem;
    padding: 1rem 0;
}

/* Zen Mode - hide nav during meditation */
body.meditation-active .navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

body.meditation-active .meditation-stats-banner,
body.meditation-active .meditation-mode-tabs,
body.meditation-active .meditation-weekly-chart,
body.meditation-active .meditation-today-log {
    display: none;
}

/* Dark mode overrides */
[data-theme="dark"] .meditation-stats-banner {
    background: linear-gradient(135deg, #4C51BF 0%, #276749 100%);
}

[data-theme="dark"] .breathing-circle {
    background: radial-gradient(circle, rgba(74, 124, 89, 0.2), rgba(74, 110, 138, 0.2));
}

[data-theme="dark"] .breathing-circle.inhale {
    background: radial-gradient(circle, rgba(74, 124, 89, 0.35), rgba(74, 110, 138, 0.25));
}

[data-theme="dark"] .breathing-circle.exhale {
    background: radial-gradient(circle, rgba(74, 124, 89, 0.1), rgba(74, 110, 138, 0.1));
}

[data-theme="dark"] .meditation-complete-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .pattern-card.active {
    background: rgba(74, 110, 138, 0.1);
}

/* Responsive */
@media (max-width: 600px) {
    .meditation-stats-banner {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .meditation-stats-banner .stat-item {
        min-width: 40%;
    }

    .breathing-patterns {
        grid-template-columns: repeat(2, 1fr);
    }

    .timer-circle-container {
        width: 200px;
        height: 200px;
    }

    .timer-display {
        font-size: 2.2rem;
    }

    .duration-selector {
        gap: 0.35rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .duration-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .custom-pattern-inputs {
        gap: 0.5rem;
    }
}


/* ===== NUTRITION STYLES ===== */

/* Setup Page */
.nutrition-setup-page {
    max-width: 700px;
    margin: 0 auto;
}

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

.nutrition-setup-page .page-header h1 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.nutrition-setup-page .subtitle {
    color: var(--slate);
    font-size: 1rem;
}

.setup-form-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.nutrition-setup-form .form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.nutrition-setup-form .form-section:last-of-type {
    border-bottom: none;
}

.nutrition-setup-form .form-section h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.nutrition-setup-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.nutrition-setup-form .form-group {
    margin-bottom: 1rem;
}

.nutrition-setup-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.nutrition-setup-form input,
.nutrition-setup-form select,
.nutrition-setup-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-dark);
    box-sizing: border-box;
}

.nutrition-setup-form .hint {
    color: var(--slate);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* Macro sliders */
.macro-sliders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.macro-slider-group label {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.macro-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
}

.protein-slider { background: linear-gradient(to right, #4A6E8A, #7A9BB5); }
.carbs-slider { background: linear-gradient(to right, #C2692A, #D4A574); }
.fat-slider { background: linear-gradient(to right, #6B4E71, #9B7EA8); }

.macro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary);
    cursor: pointer;
}

.macro-total {
    text-align: center;
    font-weight: 700;
    color: var(--primary);
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
}

.macro-total.warning {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.1);
}

/* Setup result */
.setup-result {
    margin: 1.5rem 0;
}

.result-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #faf5ff 0%, #fff5f5 100%);
    border-radius: 12px;
}

.result-item {
    flex: 1;
    text-align: center;
}

.result-label {
    display: block;
    font-size: 0.8rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.result-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
}

.result-item.highlight .result-value {
    font-size: 1.6rem;
    color: #48bb78;
}

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

/* Nutrition Dashboard */
.nutrition-stats-banner {
    background: linear-gradient(135deg, #5D4037 0%, #8B6914 50%, #A0652A 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    color: white;
}

.nutrition-stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nutrition-stat {
    text-align: center;
}

.nutrition-stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}

.nutrition-stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.nutrition-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.nutrition-card h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Calorie Ring */
.calorie-ring-card {
    text-align: center;
}

.calorie-ring-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem;
}

.calorie-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.calorie-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 10;
}

.calorie-ring-progress {
    fill: none;
    stroke: #4A7C59;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

.calorie-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.calorie-ring-current {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
}

.calorie-ring-divider {
    color: var(--slate);
    margin: 0 0.2rem;
}

.calorie-ring-target {
    font-size: 0.9rem;
    color: var(--slate);
}

.calorie-remaining {
    font-size: 0.9rem;
    color: var(--slate);
    font-weight: 500;
}

/* Macro bars */
.macro-bar-group {
    margin-bottom: 0.75rem;
}

.macro-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.macro-label {
    font-weight: 600;
}

.protein-color { color: #4A6E8A; }
.carbs-color { color: #C2692A; }
.fat-color { color: #6B4E71; }

.macro-values {
    color: var(--slate);
}

.macro-bar {
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.macro-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.protein-bar { background: linear-gradient(to right, #4A6E8A, #7A9BB5); }
.carbs-bar { background: linear-gradient(to right, #C2692A, #D4A574); }
.fat-bar { background: linear-gradient(to right, #6B4E71, #9B7EA8); }

/* Quick Log */
.meal-type-pills {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.meal-pill {
    padding: 0.4rem 1rem;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: none;
    color: var(--text-dark);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.meal-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.meal-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.log-input-row {
    display: flex;
    gap: 0.5rem;
}

.log-input-row input[type="text"] {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.log-input-row input[type="date"] {
    width: auto;
    padding: 0.7rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

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

.log-btn {
    padding: 0.7rem 1.5rem;
    white-space: nowrap;
}

.log-hint {
    font-size: 0.8rem;
    color: var(--slate);
    margin-top: 0.5rem;
}

/* Meals List */
.meals-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meal-entry {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.04);
    transition: background 0.2s;
}

.meal-entry:hover {
    background: rgba(99, 102, 241, 0.08);
}

.meal-entry-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.meal-entry-info {
    flex: 1;
    min-width: 0;
}

.meal-entry-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meal-entry-macros {
    display: block;
    font-size: 0.75rem;
    color: var(--slate);
}

.meal-entry-calories {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
    white-space: nowrap;
}

.meal-delete-btn {
    background: none;
    border: none;
    color: var(--slate);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.meal-entry:hover .meal-delete-btn {
    opacity: 1;
}

.meal-delete-btn:hover {
    color: #e53e3e;
}

.empty-meals {
    text-align: center;
    color: var(--slate);
    padding: 2rem;
    font-size: 0.95rem;
}

/* Weekly Chart */
.nutrition-weekly-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 160px;
    position: relative;
    padding-bottom: 1.5rem;
}

.nutrition-chart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.nutrition-chart-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.nutrition-chart-bar {
    width: 70%;
    min-height: 2px;
    background: linear-gradient(to top, #8B6914, #D4A574);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.3s ease;
}

.nutrition-chart-bar.over-target {
    background: linear-gradient(to top, #A0402A, #C47B65);
}

.chart-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--slate);
    white-space: nowrap;
}

.nutrition-chart-label {
    font-size: 0.75rem;
    color: var(--slate);
    margin-top: 0.3rem;
}

.chart-target-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(74, 124, 89, 0.5);
    pointer-events: none;
}

.chart-target-label {
    position: absolute;
    right: -5px;
    top: -12px;
    font-size: 0.6rem;
    color: #48bb78;
    font-weight: 600;
}

.nutrition-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Weight Tracker */
.weight-tracker-card {
    margin-top: 1.5rem;
}

.weight-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.weight-tracker-header h3 {
    margin: 0;
}

.weight-range-pills {
    display: flex;
    gap: 0.25rem;
}

.weight-range-pill {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.weight-range-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.weight-range-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.weight-stats-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.weight-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.weight-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weight-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.weight-chart-container {
    margin-bottom: 1rem;
    position: relative;
}

.weight-chart-container canvas {
    width: 100%;
    display: block;
}

.weight-log-form {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.weight-log-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.weight-log-row input[type="number"],
.weight-log-row input[type="date"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.weight-log-row input[type="number"] {
    width: 160px;
}

.weight-log-row input[type="date"] {
    width: 150px;
}

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

@media (max-width: 600px) {
    .weight-log-row {
        flex-wrap: wrap;
    }
    .weight-log-row input[type="number"],
    .weight-log-row input[type="date"] {
        flex: 1;
        min-width: 120px;
    }
    .weight-range-pills {
        flex-wrap: wrap;
    }
}

/* Meal Plan Page */
.meal-plan-page {
    max-width: 800px;
    margin: 0 auto;
}

.meal-plan-page .page-header h1 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.meal-plan-page .subtitle {
    color: var(--slate);
}

.meal-plan-actions {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.plan-loading {
    text-align: center;
    padding: 3rem;
    color: var(--slate);
}

.plan-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

.plan-loading .loading-sub {
    font-size: 0.85rem;
    opacity: 0.7;
}

.plan-content {
    transition: opacity 0.3s;
}

.plan-dates {
    color: var(--slate);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 8px;
}

.plan-body,
.grocery-body {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.plan-body h2,
.grocery-body h2 {
    color: var(--primary);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

.plan-body h2:first-child {
    margin-top: 0;
}

.plan-body h3 {
    color: var(--text-dark);
    margin: 1rem 0 0.5rem;
}

.plan-body ul,
.grocery-body ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.plan-body li,
.grocery-body li {
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.plan-body p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.plan-body strong {
    color: var(--text-dark);
}

.plan-body hr {
    border: none;
    border-top: 2px solid var(--border);
    margin: 1.5rem 0;
}

.empty-plan {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--slate);
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* Notification */
.nutrition-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.nutrition-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* Button outline style */
.btn-outline {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--primary);
    border-radius: 10px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: pointer;
    background: none;
}

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

/* Dark mode */
[data-theme="dark"] .nutrition-stats-banner {
    background: linear-gradient(135deg, #c05621 0%, #d69e2e 100%);
}

[data-theme="dark"] .setup-form-card,
[data-theme="dark"] .nutrition-card,
[data-theme="dark"] .plan-body,
[data-theme="dark"] .grocery-body,
[data-theme="dark"] .empty-plan {
    background: var(--card-bg);
}

[data-theme="dark"] .result-card {
    background: linear-gradient(135deg, #2d2040 0%, #2d1f1f 100%);
}

[data-theme="dark"] .meal-entry {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .meal-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .plan-dates {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--primary-light);
    color: var(--primary-light);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .nutrition-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-stats-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .nutrition-stat {
        flex: 0 0 45%;
    }

    .nutrition-setup-form .form-row {
        grid-template-columns: 1fr;
    }

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

    .meal-plan-actions {
        flex-direction: column;
    }

    .result-card {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ===== NEWSLETTER STYLES ===== */

/* Stats Banner */
.newsletter-stats-banner {
    background: linear-gradient(135deg, #5D4037 0%, #6B4E71 50%, #8B5A2B 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    color: white;
}

.newsletter-stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.newsletter-stat {
    text-align: center;
}

.newsletter-stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}

.newsletter-stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Quick Add Card */
.newsletter-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.newsletter-card h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.quick-add-form .quick-add-top {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quick-add-form input[type="text"] {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.quick-add-form input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
}

.quick-add-form select {
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text-dark);
    cursor: pointer;
}

.quick-add-form textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-dark);
    resize: vertical;
    box-sizing: border-box;
}

.quick-add-form textarea:focus {
    border-color: var(--primary);
    outline: none;
}

/* Export Bar */
.export-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    position: sticky;
    top: 70px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.export-bar .btn-small {
    color: white;
    border-color: rgba(255,255,255,0.4);
}

.export-bar .btn-small:hover {
    background: rgba(255,255,255,0.2);
    border-color: white;
}

.export-bar .btn-primary.btn-small {
    background: white;
    color: var(--primary);
    border-color: white;
}

.export-bar .btn-primary.btn-small:hover {
    background: rgba(255,255,255,0.9);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.show-used-toggle {
    font-size: 0.8rem;
    color: var(--slate);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.show-used-toggle input {
    cursor: pointer;
}

/* Idea Card with Checkbox */
.idea-card {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.idea-card-left {
    padding-top: 0.2rem;
    flex-shrink: 0;
}

.idea-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

.idea-card-content {
    flex: 1;
    min-width: 0;
}

/* Used state */
.idea-used {
    opacity: 0.5;
}

.used-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(74, 124, 89, 0.15);
    color: #48bb78;
    margin-left: 0.5rem;
}

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

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

.column-count {
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Category Filter */
.category-filter {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: none;
    color: var(--text-dark);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

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

/* Idea Cards */
.ideas-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.idea-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.idea-card.in-issue {
    border-color: transparent;
    background: rgba(99, 102, 241, 0.04);
}

.idea-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cat-tech { background: #4A6E8A; }
.cat-life { background: #48bb78; }
.cat-recommendation { background: #C2692A; }
.cat-story { background: #6B4E71; }
.cat-question { background: #9C7A1E; }
.cat-misc { background: #a0aec0; }

.idea-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    flex: 1;
    min-width: 0;
}

.idea-notes {
    font-size: 0.8rem;
    color: var(--slate);
    margin-top: 0.3rem;
    padding-left: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.idea-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

.idea-date {
    font-size: 0.7rem;
    color: var(--slate);
}

.idea-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.idea-card:hover .idea-actions {
    opacity: 1;
}

.assign-select {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-dark);
    max-width: 100px;
    cursor: pointer;
}

.idea-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.idea-btn:hover {
    background: rgba(0,0,0,0.05);
}

.idea-btn.delete-btn:hover {
    color: #e53e3e;
}

.inline-edit {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 2px solid var(--primary);
    border-radius: 6px;
    font-size: inherit;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-dark);
    box-sizing: border-box;
}

.empty-column {
    text-align: center;
    color: var(--slate);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

.btn-small {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text-dark);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-small:hover {
    border-color: var(--primary);
    color: var(--primary);
}

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

/* Mailing List */
.mailing-list-card {
    margin-top: 1.5rem;
}

.subscriber-add-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sub-name-input {
    flex: 0 0 30%;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.sub-email-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.sub-name-input:focus,
.sub-email-input:focus {
    border-color: var(--primary);
    outline: none;
}

.subscriber-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subscriber-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.subscriber-row:hover {
    background: rgba(99, 102, 241, 0.04);
}

.subscriber-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    min-width: 120px;
}

.subscriber-email {
    flex: 1;
    font-size: 0.85rem;
    color: var(--slate);
}

.subscriber-row .delete-btn {
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    padding: 6px 10px;
    margin-left: auto;
    color: var(--slate-light);
    font-size: 1.1rem;
}

.subscriber-row:hover .delete-btn,
.subscriber-row .delete-btn:hover {
    opacity: 1;
    color: #e53e3e;
}

/* Survey Results Dashboard */
.survey-results-card {
    margin-top: 0;
}

.survey-charts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.survey-chart-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.survey-chart-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}

.survey-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.survey-bar-label {
    flex: 0 0 220px;
    font-size: 0.78rem;
    color: var(--slate);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.survey-bar-track {
    flex: 1;
    height: 18px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.survey-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.survey-bar-count {
    flex: 0 0 60px;
    font-size: 0.75rem;
    color: var(--slate-light);
    text-align: right;
}

.survey-table-wrap {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.survey-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.survey-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
}

.survey-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--slate);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.survey-table tr:hover td {
    background: var(--bg-light);
}

.survey-who {
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
}

.survey-when {
    white-space: nowrap;
    color: var(--slate-light);
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .survey-bar-label {
        flex: 0 0 120px;
        font-size: 0.72rem;
    }
    .survey-bar-count {
        flex: 0 0 50px;
    }
}

/* Language Tabs */
.lang-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

.lang-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--slate-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-tab:hover {
    color: var(--slate-medium);
}

.lang-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.lang-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    color: var(--slate-light);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
}

.lang-tab.active .lang-tab-count {
    background: rgba(139, 105, 20, 0.12);
    color: var(--primary-color);
}

.lang-content {
    display: none;
}

.lang-content.active {
    display: block;
}

.lang-tab-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.sub-lang-select {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--slate-dark);
    cursor: pointer;
}

.sub-lang-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.subscriber-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--slate-light);
    font-size: 0.9rem;
}

/* Dark mode */
[data-theme="dark"] .lang-tab {
    color: var(--slate-light);
}

[data-theme="dark"] .lang-tab.active {
    color: var(--primary-color);
}

[data-theme="dark"] .lang-tab-count {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .lang-tab.active .lang-tab-count {
    background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .sub-lang-select {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-light);
}

/* Dark mode */
[data-theme="dark"] .newsletter-stats-banner {
    background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%);
}

[data-theme="dark"] .newsletter-card {
    background: var(--card-bg);
}

[data-theme="dark"] .idea-card:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .idea-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .export-bar {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .newsletter-stats-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .newsletter-stat {
        flex: 0 0 30%;
    }

    .quick-add-form .quick-add-top {
        flex-direction: column;
    }

    .export-bar {
        flex-wrap: wrap;
    }

    .subscriber-add-form {
        flex-direction: column;
    }

    .sub-name-input {
        flex: 1;
    }
}

/* ===== NEWSLETTER EDITOR ===== */

.newsletter-editor-page {
    max-width: 900px;
    margin: 0 auto;
    scroll-padding-top: 280px;
}

/* Sticky top bar: header + mode bar + toolbar all stay pinned */
.nl-sticky-top {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--background);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .nl-sticky-top {
        top: 52px;
    }
}

/* Header */
.nl-editor-header {
    margin-bottom: 1rem;
}

.nl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--slate);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.nl-back-link:hover {
    color: var(--primary);
}

.nl-back-arrow {
    transform: rotate(180deg);
}

.nl-header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nl-title-input {
    flex: 1;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    color: var(--text-dark);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.25rem 0;
    min-width: 200px;
    transition: border-color 0.2s;
}

.nl-title-input:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.nl-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nl-status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 10px;
}

.nl-status-badge.status-planning {
    background: rgba(156, 122, 30, 0.12);
    color: #9C7A1E;
}

.nl-status-badge.status-drafting {
    background: rgba(139, 105, 20, 0.12);
    color: var(--primary);
}

.nl-status-badge.status-sent {
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
}

.nl-autosave-status {
    font-size: 0.78rem;
    color: #4A7C59;
    font-weight: 500;
    transition: color 0.2s;
}

.nl-save-btn {
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
}

/* Mode bar */
.nl-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
}

.nl-write-preview-toggle {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1.5px solid var(--border);
    overflow: hidden;
}

.nl-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nl-mode-btn:hover {
    color: var(--text-dark);
}

.nl-mode-btn.active {
    background: var(--primary);
    color: white;
}

.nl-mode-actions {
    display: flex;
    gap: 0.5rem;
}

/* Editor body */
.nl-editor-body {
    position: relative;
}

/* Toolbar */
.nl-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.nl-tool-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1;
}

.nl-tool-btn:hover {
    background: var(--surface-hover, rgba(0,0,0,0.04));
    border-color: var(--border);
}

.nl-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.25rem;
}

/* Textarea */
.nl-editor-textarea {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 300px;
    padding: 1.5rem;
    font-size: 1rem;
    font-family: 'DM Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
    line-height: 1.7;
    color: var(--text-dark);
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    resize: vertical;
    box-sizing: border-box;
    tab-size: 4;
    overflow-y: auto;
}

.nl-editor-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.nl-editor-textarea::placeholder {
    color: var(--slate);
    opacity: 0.6;
}

/* Preview pane */
.nl-preview-pane {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    min-height: 500px;
    overflow: visible;
}

.nl-preview-content {
    padding: 0;
}

.nl-preview-content iframe {
    width: 100%;
    border: none;
    min-height: 500px;
}

.nl-preview-placeholder {
    text-align: center;
    color: var(--slate);
    padding: 3rem;
    font-style: italic;
}

/* Ideas panel */
.nl-ideas-panel {
    position: fixed;
    top: 80px;
    right: 24px;
    width: 300px;
    max-height: calc(100vh - 100px);
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 20;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.nl-ideas-panel-header h3 {
    font-size: 0.9rem;
    margin: 0;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nl-ideas-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0 0.25rem;
}

.nl-ideas-close:hover {
    color: var(--text-dark);
}

.nl-ideas-panel-body {
    overflow-y: auto;
    padding: 0.75rem;
    flex: 1;
}

.nl-idea-ref {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: background 0.15s;
}

.nl-idea-ref:hover {
    background: var(--surface-hover, rgba(0,0,0,0.03));
}

.nl-idea-ref.nl-idea-used {
    opacity: 0.4;
}

.nl-idea-ref-content {
    flex: 1;
    min-width: 0;
}

.nl-idea-ref-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
}

.nl-idea-ref-notes {
    font-size: 0.75rem;
    color: var(--slate);
    display: block;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-ideas-empty {
    text-align: center;
    color: var(--slate);
    font-size: 0.85rem;
    padding: 1.5rem;
}

/* Export section */
.nl-export-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1.5px solid var(--border);
}

.nl-export-section h3 {
    font-size: 1rem;
    color: var(--primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nl-export-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nl-export-email-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nl-lang-toggle {
    display: flex;
    gap: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.nl-lang-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--slate);
    cursor: pointer;
    transition: all 0.2s;
}

.nl-lang-btn.active {
    background: var(--primary);
    color: white;
}

.nl-export-finalize {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.nl-sent-badge {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(74, 124, 89, 0.1);
    color: #4A7C59;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Issues section on main page */
.nl-issues-section {
    margin-bottom: 1.5rem;
}

.nl-issues-section h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.nl-new-issue-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nl-new-issue-form input[type="text"] {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.nl-new-issue-form input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
}

.nl-new-issue-form input[type="date"] {
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text-dark);
}

.nl-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nl-issue-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.nl-issue-card:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.nl-issue-card-info {
    flex: 1;
    min-width: 0;
}

.nl-issue-card-info h4 {
    font-size: 0.95rem;
    margin: 0 0 0.2rem;
    color: var(--text-dark);
}

.nl-issue-card-info p {
    font-size: 0.8rem;
    color: var(--slate);
    margin: 0;
}

.nl-issue-card-action {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Dark mode */
[data-theme="dark"] .nl-sticky-top {
    background: var(--background);
    border-bottom-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nl-title-input {
    color: var(--text-light, #fafaf9);
}

[data-theme="dark"] .nl-editor-textarea {
    background: var(--card-bg);
    color: var(--text-light, #fafaf9);
    border-color: var(--border);
}

[data-theme="dark"] .nl-toolbar {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nl-tool-btn {
    color: var(--text-light, #fafaf9);
}

[data-theme="dark"] .nl-preview-pane {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nl-ideas-panel {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nl-export-section {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nl-issue-card {
    border-color: var(--border);
}

[data-theme="dark"] .nl-issue-card:hover {
    border-color: var(--primary);
}

[data-theme="dark"] .nl-status-badge.status-planning {
    background: rgba(180, 145, 50, 0.18);
    color: #D4A93A;
}

[data-theme="dark"] .nl-status-badge.status-drafting {
    background: rgba(139, 105, 20, 0.18);
    color: #C9A84C;
}

[data-theme="dark"] .nl-status-badge.status-sent {
    background: rgba(74, 124, 89, 0.2);
    color: #6BBF84;
}

/* Responsive */
@media (max-width: 768px) {
    .nl-header-main {
        flex-direction: column;
        align-items: stretch;
    }

    .nl-title-input {
        font-size: 1.2rem;
    }

    .nl-toolbar {
        gap: 0.15rem;
        padding: 0.4rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nl-toolbar::-webkit-scrollbar {
        display: none;
    }

    .nl-tool-btn {
        padding: 0.3rem 0.45rem;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .nl-tool-sep {
        flex-shrink: 0;
    }

    .nl-editor-textarea {
        height: calc(100vh - 200px);
        min-height: 250px;
        padding: 1rem;
        font-size: 0.9rem;
    }

    .nl-ideas-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
    }

    .nl-export-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nl-export-email-group {
        flex-direction: column;
    }

    .nl-new-issue-form {
        flex-direction: column;
    }
}


/* ===== API USAGE DASHBOARD ===== */
.api-usage-page h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.usage-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.usage-stat-card {
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
}

.usage-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.usage-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.usage-charts-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.usage-chart-card {
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    flex: 1;
}

.usage-chart-half {
    flex: 1;
    min-width: 0;
}

.usage-chart-card h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.usage-table-card {
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.usage-table-card h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.usage-table-wrapper {
    overflow-x: auto;
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.usage-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.usage-table tr:hover {
    background: rgba(99, 102, 241, 0.04);
}

.usage-cell-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.usage-cell-endpoint {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
}

.usage-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.usage-cell-cost {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
}

.usage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.usage-badge-journal { background: rgba(139,105,20,0.1); color: #8B6914; }
.usage-badge-learning { background: rgba(74,124,89,0.1); color: #4A7C59; }
.usage-badge-portfolio { background: rgba(194,105,42,0.1); color: #C2692A; }
.usage-badge-nutrition { background: rgba(160,64,42,0.1); color: #A0402A; }
.usage-badge-newsletter { background: rgba(107,78,113,0.1); color: #6B4E71; }
.usage-badge-meditation { background: rgba(61,112,104,0.1); color: #3D7068; }

.usage-model-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.model-haiku { background: rgba(74,124,89,0.1); color: #4A7C59; }
.model-sonnet { background: rgba(139,105,20,0.1); color: #8B6914; }

.usage-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem !important;
    font-style: italic;
}

@media (max-width: 768px) {
    .usage-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .usage-charts-row {
        flex-direction: column;
    }
}


/* ======================================
   ACTIVITY TRACKER
   ====================================== */

.activity-page {
    max-width: 900px;
    margin: 0 auto;
}

.activity-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.countdown-badge {
    background: linear-gradient(135deg, #3D7068, #4A6E8A);
    color: #fff;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Stats Banner (shared with meditation style) */
.activity-stats-banner {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.activity-stats-banner .stat-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.8rem 1rem;
}

.activity-stats-banner .stat-icon {
    font-size: 1.5rem;
}

.activity-stats-banner .stat-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.activity-stats-banner .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Summary Grid */
.activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.activity-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}

.summary-icon {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.summary-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Garmin Connect Widget */
.garmin-widget {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

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

.garmin-header h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    margin: 0;
}

.btn-garmin-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-garmin-sync:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-garmin-sync.syncing {
    opacity: 0.6;
    cursor: wait;
}

.btn-garmin-sync.syncing svg {
    animation: spin 1s linear infinite;
}

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

.garmin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.garmin-stat {
    text-align: center;
    padding: 10px 6px;
    background: var(--bg-hover, rgba(0,0,0,0.03));
    border-radius: 8px;
}

.garmin-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'DM Serif Display', serif;
}

.garmin-stat-unit {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.garmin-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.garmin-synced-at {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 8px;
    opacity: 0.7;
}

.garmin-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

/* ===== GARMIN DASHBOARD PAGE ===== */
.garmin-page {
    max-width: 1100px;
    margin: 0 auto;
}

.garmin-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

.garmin-range-toggle {
    display: flex;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
}

.range-btn {
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

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

.garmin-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.garmin-empty-state h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 8px;
}

/* Today's Snapshot */
.garmin-today-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.garmin-today-card h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.garmin-today-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.garmin-metric {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-hover, rgba(0,0,0,0.03));
    border-radius: 10px;
}

.metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'DM Serif Display', serif;
}

.metric-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-top: 2px;
    margin-bottom: 4px;
}

.metric-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 6px auto 4px;
    width: 80%;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.metric-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Charts Section */
.garmin-charts-section {
    margin-bottom: 24px;
}

.garmin-charts-section h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 12px;
}

.garmin-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.garmin-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
}

.garmin-chart-card h4 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.chart-container {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    width: 100%;
}

.mini-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.mini-val {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mini-bar-wrap {
    width: 70%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.mini-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    min-height: 0;
    transition: height 0.3s ease;
}

.mini-bar.range-bar {
    position: absolute;
    border-radius: 3px;
}

.mini-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 2px;
    opacity: 0.7;
}

.no-data {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Sleep chart stacked bars */
.sleep-bar {
    display: flex;
    flex-direction: column-reverse;
    background: transparent !important;
    overflow: hidden;
}

.sleep-deep {
    background: #1a237e;
    width: 100%;
}

.sleep-rem {
    background: #5c6bc0;
    width: 100%;
}

.sleep-light {
    background: #9fa8da;
    width: 100%;
}

/* Day-by-Day Table */
.garmin-table-section {
    margin-bottom: 24px;
}

.garmin-table-section h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 12px;
}

.garmin-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
}

.garmin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.garmin-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600;
}

.garmin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    color: var(--text-primary);
}

.garmin-table tbody tr:last-child td {
    border-bottom: none;
}

.garmin-table tbody tr:hover {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}

.td-date {
    font-weight: 600;
    color: var(--text-primary) !important;
}

.td-steps.goal-met {
    color: #27ae60;
    font-weight: 600;
}

.td-hr {
    font-weight: 600;
}

.td-battery-high {
    color: #27ae60;
    font-weight: 600;
}

.td-battery-sep {
    color: var(--text-secondary);
    opacity: 0.5;
}

.td-battery-low {
    color: #e74c3c;
}

.stress-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 500;
}

.stress-badge.stress-calm {
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
}

.stress-badge.stress-low {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
}

.stress-badge.stress-medium {
    background: rgba(230, 126, 34, 0.12);
    color: #e67e22;
}

.stress-badge.stress-high {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

.garmin-back-link {
    margin-top: 16px;
}

.garmin-back-link a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
}

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

@media (max-width: 768px) {
    .garmin-today-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .garmin-charts-grid {
        grid-template-columns: 1fr;
    }
    .garmin-page .page-header {
        flex-direction: column;
    }
    .garmin-header-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Quick Actions */
.activity-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.activity-actions .btn-primary,
.activity-actions .btn-secondary {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Plan Status Card */
.activity-plan-status {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid #4A6E8A;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

.plan-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plan-status-header h3 {
    margin: 0;
    font-size: 1rem;
}

.phase-badge {
    padding: 0.25rem 0.7rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.phase-badge.phase-base,
.phase-badge-sm.phase-base { background: #4A7C59; }
.phase-badge.phase-build,
.phase-badge-sm.phase-build { background: #4A6E8A; }
.phase-badge.phase-peak,
.phase-badge-sm.phase-peak { background: #D69E2E; }
.phase-badge.phase-taper,
.phase-badge-sm.phase-taper { background: #A0402A; }

.phase-badge-sm {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}

.plan-status-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.3rem 0;
}

.plan-link {
    font-size: 0.85rem;
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 600;
}

.plan-link:hover {
    text-decoration: underline;
}

/* Recent Workouts List */
.activity-recent {
    margin-bottom: 1.5rem;
}

.activity-recent h3 {
    margin-bottom: 0.75rem;
}

.workout-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.workout-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    flex-wrap: wrap;
}

.workout-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 50px;
}

.workout-type-icon {
    font-size: 1.2rem;
}

.workout-title {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.workout-xp {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-green);
    white-space: nowrap;
}

.workout-row-detailed {
    flex-direction: column;
    align-items: stretch;
}

.workout-row-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.workout-notes {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding-left: 2.5rem;
    font-style: italic;
}

/* Volume Chart */
.activity-weekly-chart {
    margin-bottom: 1.5rem;
}

.activity-weekly-chart h3 {
    margin-bottom: 0.75rem;
}

.volume-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 180px;
    padding: 0.5rem 0;
}

.volume-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.volume-bar-values {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    min-height: 2em;
    display: flex;
    flex-direction: column;
}

.volume-km { color: #3D7068; font-weight: 600; }
.volume-gym { color: #4A6E8A; font-weight: 600; }

.volume-bar-stack {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}

.volume-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 0;
    transition: height 0.3s;
}

.volume-bar-run {
    background: linear-gradient(180deg, #3D7068, #4A7C59);
}

.volume-bar-gym {
    background: linear-gradient(180deg, #4A6E8A, #7A9BB5);
}

.volume-bar-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    text-align: center;
}

.volume-bar-label.current {
    font-weight: 700;
    color: var(--text-primary);
}

/* Type Switcher */
.type-switcher {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.type-switcher-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.type-switcher-btn:hover {
    border-color: var(--accent-green);
}

.type-switcher-btn.active {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
}

/* Workout Form */
.workout-form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.workout-form .form-group {
    margin-bottom: 1rem;
}

.workout-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.workout-form input[type="text"],
.workout-form input[type="number"],
.workout-form input[type="date"],
.workout-form textarea,
.workout-form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.workout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Exercises Section */
.exercises-section {
    margin-bottom: 1rem;
}

.exercise-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.exercise-row input {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.btn-remove-exercise {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.btn-remove-exercise:hover {
    color: #A0402A;
    background: rgba(229, 62, 62, 0.1);
}

.btn-add-exercise {
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--accent-green);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.btn-add-exercise:hover {
    background: rgba(56, 161, 105, 0.1);
}

/* Muscle Group Checkboxes */
.muscle-group-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: normal !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}

.checkbox-label:has(input:checked) {
    background: rgba(56, 161, 105, 0.1);
    border-color: var(--accent-green);
}

/* ===== Exercise Block (Per-Set Gym Form) ===== */
.exercise-block {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.exercise-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.exercise-block-header input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.btn-remove-block {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    line-height: 1;
}

.btn-remove-block:hover {
    color: #A0402A;
    background: rgba(229, 62, 62, 0.1);
}

.set-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.set-table thead th {
    text-align: left;
    padding: 0.3rem 0.4rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
}

.set-table thead th:first-child {
    width: 2.5rem;
    text-align: center;
}

.set-table thead th:last-child {
    width: 2rem;
}

.set-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.set-table tbody tr:last-child {
    border-bottom: none;
}

.set-table td {
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
}

.set-table td:first-child {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
}

.set-table td input[type="number"] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    -moz-appearance: textfield;
}

.set-table td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.set-failed-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-failed-toggle input[type="checkbox"] {
    display: none;
}

.set-failed-toggle label {
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    transition: all 0.15s;
    user-select: none;
}

.set-failed-toggle label:hover {
    border-color: #C53030;
    color: #C53030;
}

.set-failed-toggle input:checked + label {
    background: #C53030;
    border-color: #C53030;
    color: white;
}

.set-row-failed td input[type="number"] {
    color: #C53030;
    text-decoration: line-through;
    opacity: 0.7;
}

.btn-remove-set {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    opacity: 0.5;
}

.btn-remove-set:hover {
    opacity: 1;
    color: #A0402A;
}

.btn-add-set {
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    width: 100%;
    transition: all 0.15s;
}

.btn-add-set:hover {
    color: var(--accent-green);
    border-color: var(--accent-green);
    background: rgba(56, 161, 105, 0.05);
}

/* ===== Workout History Exercise Detail ===== */
.workout-row-gym {
    cursor: pointer;
}

.workout-row-gym .workout-row-main::after {
    content: '▸';
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-left: auto;
    transition: transform 0.2s;
}

.workout-row-gym.expanded .workout-row-main::after {
    transform: rotate(90deg);
}

.workout-exercises-detail {
    display: none;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.workout-row-gym.expanded .workout-exercises-detail {
    display: block;
}

.exercise-detail-block {
    margin-bottom: 0.75rem;
}

.exercise-detail-block:last-child {
    margin-bottom: 0;
}

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

.exercise-detail-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.exercise-detail-table th {
    text-align: left;
    padding: 0.2rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}

.exercise-detail-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.exercise-detail-table tr:last-child td {
    border-bottom: none;
}

.exercise-detail-table .set-failed-row td {
    color: #C53030;
    text-decoration: line-through;
}

.exercise-detail-summary {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
}

/* Dark mode overrides for exercise blocks */
[data-theme="dark"] .exercise-block {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .set-failed-toggle label {
    border-color: var(--border-color);
}

[data-theme="dark"] .set-failed-toggle label:hover {
    border-color: #FC8181;
    color: #FC8181;
}

[data-theme="dark"] .set-failed-toggle input:checked + label {
    background: #E53E3E;
    border-color: #E53E3E;
}

[data-theme="dark"] .set-row-failed td input[type="number"] {
    color: #FC8181;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .exercise-block {
        padding: 0.75rem;
    }

    .set-table thead th,
    .set-table td {
        padding: 0.25rem 0.25rem;
        font-size: 0.8rem;
    }

    .set-table td input[type="number"] {
        padding: 0.3rem 0.35rem;
        font-size: 0.8rem;
    }

    .exercise-detail-table th,
    .exercise-detail-table td {
        padding: 0.2rem 0.3rem;
    }
}

/* Training Plan Page */
.plan-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.plan-header-info h2 {
    margin: 0 0 0.2rem;
}

.plan-header-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.plan-goals {
    font-style: italic;
}

/* Phase Timeline */
.phase-timeline {
    margin-bottom: 1.5rem;
}

.phase-timeline-bar {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
}

.phase-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.phase-segment small {
    font-size: 0.6rem;
    opacity: 0.8;
}

.phase-segment.phase-current {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

/* Plan Content */
.plan-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.plan-content h1, .plan-content h2, .plan-content h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

.plan-content ul, .plan-content ol {
    padding-left: 1.5rem;
}

/* Compliance Table */
.plan-compliance {
    margin-bottom: 1.5rem;
}

.compliance-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.compliance-table th,
.compliance-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.compliance-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.compliance-pct.good { color: #4A7C59; font-weight: 600; }
.compliance-pct.ok { color: #D69E2E; font-weight: 600; }
.compliance-pct.low { color: #A0402A; font-weight: 600; }

/* No Plan State */
.no-plan-state {
    text-align: center;
    padding: 2rem;
}

.no-plan-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.no-plan-state h2 {
    margin-bottom: 0.5rem;
}

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

.generate-plan-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.generate-plan-form .form-group {
    margin-bottom: 1rem;
}

.generate-plan-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.generate-plan-form input,
.generate-plan-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.generate-plan-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.plan-actions {
    margin-bottom: 1.5rem;
}

.plan-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ===== PERSONAL COACH (Layout E) ===== */

.coach-page {
    margin: -36px -40px -80px;
}

.coach-layout-e {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top navigation bar (replaces sidebar) */
.coach-topnav-e {
    background: var(--surface);
    border-bottom: 1.5px solid var(--border-color);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.coach-topnav-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.coach-topnav-scroll::-webkit-scrollbar {
    display: none;
}

.coach-topnav-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.coach-area-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-hover);
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1.5px solid transparent;
}

.coach-area-pill:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.coach-area-pill.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.coach-pill-icon {
    font-size: 15px;
}

.coach-pill-label {
    font-size: 13px;
}

.coach-pill-badge {
    font-size: 10px;
    background: rgba(255,255,255,0.25);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.coach-area-pill:not(.active) .coach-pill-badge {
    background: var(--border-color);
    color: var(--text-muted);
}

/* Coach main panel */
.coach-main-e {
    display: flex;
    flex-direction: column;
    background: var(--background);
    min-height: 0;
    flex: 1;
}

.coach-topbar {
    padding: 16px 28px;
    border-bottom: 1.5px solid var(--border-color);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coach-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.coach-topbar-icon {
    font-size: 28px;
}

.coach-topbar-title {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-primary);
}

.coach-topbar-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

.coach-topbar-clear {
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.coach-topbar-clear:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* Topbar action buttons (goals, export, persona) */
.coach-topbar-action {
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

.coach-topbar-action:hover {
    border-color: var(--primary-color);
    background: var(--surface-hover);
}

.coach-topbar-action .inline-icon {
    width: 16px;
    height: 16px;
}

/* Goals Panel */
.coach-goals-panel {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    background: var(--surface-hover);
    max-height: 340px;
    overflow-y: auto;
}

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

.goals-panel-header h3 {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.goals-panel-close,
.prefs-panel-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.goals-panel-close:hover,
.prefs-panel-close:hover {
    color: var(--text-primary);
    background: var(--border-color);
}

.goals-list {
    margin-bottom: 12px;
}

.goals-loading,
.goals-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 0;
    font-family: var(--font-sans);
}

.goal-item {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
}

.goal-item-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.goal-status-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--primary-color);
}

.goal-completed .goal-status-icon { color: var(--accent-green); }
.goal-abandoned .goal-status-icon { color: var(--text-muted); }
.goal-completed .goal-item-title { text-decoration: line-through; opacity: 0.6; }
.goal-abandoned .goal-item-title { text-decoration: line-through; opacity: 0.4; }

.goal-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.goal-item-title {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.goal-item-date {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.goal-item-desc {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.goal-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.goal-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

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

.goal-complete-btn:hover { color: var(--accent-green); border-color: var(--accent-green); }
.goal-abandon-btn:hover { color: var(--accent-red); border-color: var(--accent-red); }
.goal-delete-btn:hover { color: var(--accent-red); border-color: var(--accent-red); }

.goal-progress-notes {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.goal-note {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    padding: 2px 0;
}

.goal-note-date {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.goals-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.goal-input {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 6px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-primary);
    color: var(--text-primary);
    outline: none;
}

.goal-input:focus {
    border-color: var(--primary-color);
}

.goal-input:first-child {
    flex: 1;
}

.goal-date-input {
    width: 140px;
}

.btn-sm {
    font-size: 12px;
    padding: 5px 12px;
}

/* Preferences Panel */
.coach-prefs-panel {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    background: var(--surface-hover);
}

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

.prefs-panel-header h3 {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prefs-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.prefs-radio-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    font-size: 13px;
}

.prefs-radio-label:hover {
    border-color: var(--primary-color);
}

.prefs-radio-label input[type="radio"] {
    accent-color: var(--primary-color);
}

.prefs-radio-label:has(input:checked) {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-primary));
}

.prefs-radio-desc {
    display: block;
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 22px;
}

/* Messages area */
.coach-messages-e {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 400px;
    max-height: calc(100vh - 240px);
}

/* Empty state */
.coach-empty-e {
    text-align: center;
    margin-top: 60px;
}

.coach-empty-icon {
    margin-bottom: 16px;
}

.coach-empty-svg {
    width: 64px;
    height: 64px;
    opacity: 0.35;
}

.coach-empty-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.coach-empty-text {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}

.coach-starters {
    margin-top: 28px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.coach-starter-btn {
    background: var(--surface);
    border: 1.5px solid var(--border-color);
    border-radius: 24px;
    padding: 8px 18px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.coach-starter-btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Message bubbles */
.coach-bubble-row {
    display: flex;
    animation: coachFadeIn 0.25s ease;
}

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

.coach-bubble-row-user {
    justify-content: flex-end;
}

.coach-bubble-row-ai {
    justify-content: flex-start;
}

.coach-ai-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    overflow: hidden;
}

.coach-avatar-svg {
    width: 22px;
    height: 22px;
}

.coach-bubble {
    max-width: 72%;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    word-wrap: break-word;
}

.coach-bubble-user {
    background: var(--sidebar-bg);
    color: #fafaf9;
    border-radius: 18px 18px 4px 18px;
    white-space: pre-wrap;
}

.coach-bubble-ai {
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 4px 18px 18px 18px;
    border: 1.5px solid var(--border-color);
}

.coach-bubble-ai p { margin: 4px 0; }
.coach-bubble-ai ul, .coach-bubble-ai ol { padding-left: 1.2rem; margin: 4px 0; }
.coach-bubble-ai strong { font-weight: 600; }

/* Thinking dots */
.coach-thinking {
    display: flex;
    gap: 6px;
    padding: 14px 18px;
    align-items: center;
}

.coach-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: coachPulse 1.4s infinite;
}

.coach-dot:nth-child(2) { animation-delay: 0.2s; }
.coach-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes coachPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* Compose area */
.coach-compose {
    padding: 16px 28px 20px;
    border-top: 1.5px solid var(--border-color);
    background: var(--surface);
}

.coach-compose-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.coach-compose-row textarea {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    border: 1.5px solid var(--border-color);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--text-primary);
    resize: none;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.coach-compose-row textarea:focus {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(28,25,23,0.06);
}

.coach-compose-send {
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius-sm);
    border: none;
    background: var(--sidebar-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.coach-compose-send:hover:not(:disabled) {
    transform: scale(1.05);
    opacity: 0.9;
}

.coach-compose-send:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.coach-compose-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

/* Coach responsive */
@media (max-width: 768px) {
    .coach-page {
        margin: -68px -16px -60px;
    }
    .coach-topnav-e {
        padding: 8px 12px;
    }
    .coach-area-pill {
        padding: 6px 12px;
        font-size: 12px;
    }
    .coach-pill-label {
        display: none;
    }
    .coach-pill-icon {
        font-size: 18px;
    }
    .coach-messages-e {
        max-height: calc(100vh - 280px);
        min-height: 250px;
        padding: 16px;
    }
    .coach-compose {
        padding: 12px 16px;
    }
}

/* ===== ACTIVITY EXPERT COACH ===== */

.activity-page:has(.coach-layout) {
    max-width: 1100px;
}

.coach-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 0;
    background: var(--surface);
    border-radius: var(--border-radius);
    border: 1.5px solid var(--border-color);
    min-height: 520px;
    overflow: hidden;
}

.coach-chat-area {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.coach-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px 0;
}

.suggestion-pill {
    background: var(--surface-hover);
    border: 1.5px solid var(--border-color);
    border-radius: 24px;
    padding: 7px 16px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.suggestion-pill:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.coach-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 320px;
    max-height: calc(100vh - 340px);
}

.coach-welcome {
    text-align: center;
    padding: 48px 24px;
}

.coach-welcome .welcome-icon {
    margin-bottom: 16px;
}

.coach-welcome .welcome-icon .inline-icon {
    width: 48px;
    height: 48px;
    opacity: 0.35;
}

.coach-welcome h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.coach-welcome p {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.6;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: coachFadeIn 0.25s ease;
}

.chat-message.user-message {
    justify-content: flex-end;
}

.chat-message.user-message .message-content {
    background: var(--sidebar-bg);
    color: #fafaf9;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    max-width: 72%;
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-message.coach-message {
    justify-content: flex-start;
}

.chat-message.coach-message .message-content {
    background: var(--background);
    color: var(--text-primary);
    border-radius: 4px 18px 18px 18px;
    border: 1.5px solid var(--border-color);
    padding: 12px 16px;
    max-width: 72%;
    font-size: 13.5px;
    line-height: 1.65;
    word-wrap: break-word;
}

.chat-message.coach-message .message-content p { margin: 4px 0; }
.chat-message.coach-message .message-content ul,
.chat-message.coach-message .message-content ol { padding-left: 1.2rem; margin: 4px 0; }
.chat-message.coach-message .message-content strong { font-weight: 600; }

.coach-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-hover);
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.coach-avatar .inline-icon {
    width: 20px;
    height: 20px;
}

.coach-input-area {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 16px 24px 20px;
    border-top: 1.5px solid var(--border-color);
    background: var(--surface);
}

.coach-input-area textarea {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    border: 1.5px solid var(--border-color);
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--text-primary);
    resize: none;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.coach-input-area textarea:focus {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(28,25,23,0.06);
}

.coach-input-area .btn-primary {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
}

/* Context sidebar */
.coach-layout > .coach-sidebar {
    border-left: 1.5px solid var(--border-color);
    background: var(--surface-hover);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coach-layout > .coach-sidebar h4 {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-stat:last-of-type {
    border-bottom: none;
}

.sidebar-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.sidebar-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.sidebar-links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1.5px solid var(--border-color);
}

.sidebar-links a {
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}

.sidebar-links a:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .coach-layout {
        grid-template-columns: 1fr;
    }
    .coach-layout > .coach-sidebar {
        border-left: none;
        border-top: 1.5px solid var(--border-color);
    }
    .coach-messages {
        max-height: calc(100dvh - 280px);
        min-height: 200px;
        padding: 16px;
    }
    .chat-message.user-message .message-content,
    .chat-message.coach-message .message-content {
        max-width: 88%;
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

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

/* Responsive */
@media (max-width: 768px) {
    .activity-summary-grid {
        grid-template-columns: 1fr;
    }

    .workout-form .form-row,
    .generate-plan-form .form-row {
        grid-template-columns: 1fr;
    }

    .exercise-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .exercise-row .exercise-name {
        grid-column: 1 / -1;
    }

    .volume-chart {
        height: 140px;
    }

    .type-switcher {
        flex-wrap: wrap;
    }
}


/* ============================== */
/*  MANDARIN LEARNING             */
/* ============================== */

.mandarin-page {
    max-width: 900px;
    margin: 0 auto;
}

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

/* Stats Banner */
.mandarin-stats-banner {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.mandarin-stats-banner .stat-item {
    flex: 1;
    text-align: center;
}

.mandarin-stats-banner .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'DM Serif Display', serif;
}

.mandarin-stats-banner .stat-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Tab Navigation */
.mandarin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}

.mandarin-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

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

.mandarin-tab.active {
    background: var(--accent);
    color: #fff;
}

/* Panels */
.mandarin-panel {
    min-height: 400px;
}

/* Session Start */
.session-start-area {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.session-info {
    margin-bottom: 24px;
    color: var(--text-secondary);
    font-size: 1rem;
}

.session-info strong {
    color: var(--text-primary);
}

.btn-mandarin {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-mandarin:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Session Progress */
.session-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.progress-bar-container {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Flashcard */
.flashcard-container {
    perspective: 1000px;
    margin-bottom: 20px;
}

.flashcard {
    position: relative;
    width: 100%;
    min-height: 320px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    min-height: 320px;
    backface-visibility: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
}

.flashcard-back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    padding-top: 40px;
}

.card-category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-new-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #e8b931;
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-english {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.4;
}

.card-english-reveal {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 12px;
}

.card-divider {
    width: 60px;
    height: 2px;
    background: var(--border);
    margin: 4px auto 16px;
}

.card-audio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-listen-prompt {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 500;
    margin-top: 12px;
}

.card-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 16px;
    opacity: 0.6;
}

/* TTS Status Warning */
.tts-status {
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
}

.tts-warning {
    font-size: 0.85rem;
    color: #856404;
}

/* Speaker Buttons */
.btn-speaker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
    padding: 0;
}

.btn-speaker:hover {
    transform: scale(1.1);
    color: var(--text-primary);
}

.btn-speaker:active {
    transform: scale(0.95);
}

.btn-speaker-lg {
    width: 96px;
    height: 96px;
    border: 2px solid var(--accent);
    background: var(--card-bg);
    border-radius: 50%;
}

.btn-speaker-lg:hover {
    background: var(--accent);
    color: #fff;
}

.btn-speaker-sm {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
}

.btn-speaker-sm span {
    font-size: 0.7rem;
}

.btn-speaker-xs {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
}

.btn-slow {
    border-radius: 16px;
    padding: 0 10px;
    width: auto;
    gap: 4px;
}

.slow-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulse-ring {
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb, 99, 102, 241), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0); }
}

/* Speed Controls */
.session-mode-toggle {
    margin-bottom: 20px;
}

.speed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.speed-btn, .speed-btn-sm {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}

.speed-btn.active, .speed-btn-sm.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.speed-controls-inline {
    display: flex;
    gap: 4px;
}

.speed-btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
}

.audio-hint {
    font-size: 0.85rem;
    color: var(--accent);
    margin-top: 8px;
    font-style: italic;
}

.card-pinyin {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
    text-align: center;
}

.card-characters {
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.card-tone {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.card-usage {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    max-width: 90%;
    margin-bottom: 16px;
}

.btn-explain {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-explain:hover {
    background: var(--accent);
    color: #fff;
}

.card-explanation {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

/* Rating Buttons */
.rating-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-rating {
    padding: 14px 28px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}

.btn-rating small {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.btn-hard {
    border-color: #e74c3c;
}

.btn-hard:hover {
    background: #e74c3c;
    color: #fff;
}

.btn-hard:hover small {
    color: rgba(255,255,255,0.7);
}

.btn-good {
    border-color: var(--accent);
}

.btn-good:hover {
    background: var(--accent);
    color: #fff;
}

.btn-good:hover small {
    color: rgba(255,255,255,0.7);
}

.btn-easy {
    border-color: #27ae60;
}

.btn-easy:hover {
    background: #27ae60;
    color: #fff;
}

.btn-easy:hover small {
    color: rgba(255,255,255,0.7);
}

/* Session Complete */
.session-complete-area {
    text-align: center;
    padding: 40px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.complete-content h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    margin-bottom: 24px;
}

.complete-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
}

.complete-stat {
    text-align: center;
}

.complete-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

.xp-award {
    margin-bottom: 24px;
}

.xp-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}

/* Tone Chart */
.tone-chart {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.tone-chart h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 16px;
}

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

.tone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 8px;
}

.tone-visual {
    width: 80px;
    flex-shrink: 0;
}

.tone-svg {
    width: 80px;
    height: 50px;
}

.tone-info {
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.tone-example {
    color: var(--text-secondary);
    font-style: italic;
}

.tone-drill-start {
    text-align: center;
    padding: 30px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.tone-drill-start p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.category-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.category-card:hover:not(.locked) {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.category-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.category-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.category-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

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

.category-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s;
}

.category-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.category-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.7rem;
    background: var(--border);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Category Preview */
.category-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-preview-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.category-preview-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

.category-preview-content h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 16px;
}

.preview-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.preview-card-item:last-child {
    border-bottom: none;
}

.preview-card-item.learned .preview-status {
    color: #27ae60;
}

.preview-status {
    width: 20px;
    color: var(--text-secondary);
}

.preview-english {
    flex: 1;
    color: var(--text-primary);
}

.preview-pinyin {
    color: var(--accent);
    font-weight: 500;
}

.preview-chars {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* Listen & Repeat Mode */
.listen-repeat-intro {
    margin-bottom: 24px;
}

.listen-repeat-intro h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.listen-repeat-intro p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-bottom: 16px;
}

.lr-steps {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.lr-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.lr-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lr-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lr-phase-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lr-phase-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
}

.lr-instruction {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.lr-mic-icon {
    opacity: 0.6;
}

.btn-lr-next {
    margin-top: 8px;
}

.lr-slow-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 2px 10px;
    border-radius: 10px;
}

.lr-reveal {
    margin-top: 8px;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: 10px;
    min-width: 200px;
}

.lr-pinyin {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.lr-english {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.lr-characters {
    font-size: 1rem;
    color: var(--text-secondary);
}

.lr-rate-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Tone Ear Training */
.tone-ear-training {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.tone-ear-training h3 {
    font-family: 'DM Serif Display', serif;
    margin-bottom: 4px;
}

.tone-ear-subtitle {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.tone-chart-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.tone-item {
    cursor: pointer;
    position: relative;
}

.tone-play-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.tone-quiz-start {
    text-align: center;
    padding: 16px;
}

.tone-quiz-card {
    text-align: center;
    padding: 20px 0;
}

.tone-quiz-progress {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.tone-quiz-instruction {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 12px;
    margin-bottom: 20px;
}

.tone-quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.tone-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.88rem;
    font-weight: 500;
}

.tone-option:hover:not(:disabled) {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.tone-option:disabled {
    cursor: default;
    opacity: 0.7;
}

.tone-option.correct {
    border-color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
    opacity: 1;
}

.tone-option.wrong {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    opacity: 1;
}

.tone-opt-svg {
    width: 60px;
    height: 30px;
}

.tone-quiz-feedback {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: 10px;
}

.tone-feedback-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.tone-feedback-text.correct {
    color: #27ae60;
}

.tone-feedback-text.wrong {
    color: #e74c3c;
}

.tone-feedback-word {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .mandarin-stats-banner {
        flex-wrap: wrap;
        gap: 12px;
    }
    .mandarin-stats-banner .stat-item {
        flex: 0 0 calc(50% - 6px);
    }
    .tone-grid {
        grid-template-columns: 1fr;
    }
    .rating-buttons, .lr-rate-buttons {
        flex-direction: column;
    }
    .btn-rating {
        flex-direction: row;
        justify-content: center;
    }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .lr-steps {
        flex-direction: column;
        align-items: center;
    }
    .mandarin-tabs {
        flex-wrap: wrap;
    }
    .tone-quiz-options {
        grid-template-columns: 1fr;
    }
}


/* ===== TRAINING CALENDAR ===== */

.tc-calendar-container {
    margin-bottom: 1.5rem;
}

.tc-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.tc-month-name {
    margin: 0;
    min-width: 200px;
    text-align: center;
    font-family: var(--font-heading);
}

.tc-nav-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 1.1rem;
}

.tc-grid {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--card-bg);
}

.tc-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.tc-header-cell {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.tc-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-color);
}

.tc-week-row:last-child {
    border-bottom: none;
}

.tc-cell {
    min-height: 85px;
    min-width: 0;
    padding: 0.4rem;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow: hidden;
}

.tc-cell:last-child {
    border-right: none;
}

.tc-cell:hover {
    background: var(--bg-secondary);
}

.tc-cell--empty {
    background: var(--bg-secondary);
    opacity: 0.4;
    cursor: default;
}

.tc-cell--today {
    background: rgba(74, 124, 89, 0.08);
    box-shadow: inset 0 0 0 2px var(--accent-green);
}

.tc-cell--selected {
    box-shadow: inset 0 0 0 2px var(--accent-blue) !important;
    background: rgba(74, 110, 138, 0.08);
}

.tc-cell--swap-selected {
    box-shadow: inset 0 0 0 2px var(--accent-yellow) !important;
    background: rgba(156, 122, 30, 0.08);
}

.tc-cell--skipped {
    opacity: 0.5;
}

.tc-cell--skipped .tc-pill {
    text-decoration: line-through;
}

.tc-cell--completed {
    background: rgba(74, 124, 89, 0.05);
}

.tc-date-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.tc-cell--today .tc-date-num {
    color: var(--accent-green);
    font-weight: 700;
}

.tc-pill {
    font-size: 0.68rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 500;
}

.tc-pill--run {
    background: rgba(74, 124, 89, 0.15);
    color: var(--accent-green);
}

.tc-pill--run.tc-pill--hard {
    background: rgba(74, 110, 138, 0.15);
    color: var(--accent-blue);
}

.tc-pill--run.tc-pill--key {
    background: rgba(156, 122, 30, 0.15);
    color: var(--accent-yellow);
}

.tc-pill--gym {
    background: rgba(128, 90, 160, 0.15);
    color: #805aa0;
}

.tc-pill--cross-training {
    background: rgba(74, 140, 140, 0.15);
    color: #4a8c8c;
}

.tc-pill--rest {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-style: italic;
}

.tc-pill--race {
    background: rgba(160, 64, 42, 0.2);
    color: var(--accent-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tc-km-badge {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
}

.tc-status-icon {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.tc-status-done {
    color: var(--accent-green);
}

.tc-status-skip {
    color: var(--accent-red);
}

/* Detail Panel */
.tc-detail-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
}

.tc-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tc-detail-header h3 {
    margin: 0;
    font-family: var(--font-heading);
}

.tc-detail-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.tc-detail-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tc-effort-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
}

.tc-effort--easy { background: rgba(74, 124, 89, 0.15); color: var(--accent-green); }
.tc-effort--moderate { background: rgba(74, 110, 138, 0.15); color: var(--accent-blue); }
.tc-effort--hard { background: rgba(160, 64, 42, 0.15); color: var(--accent-red); }
.tc-effort--race { background: rgba(160, 64, 42, 0.25); color: var(--accent-red); }
.tc-effort--rest { background: var(--bg-secondary); color: var(--text-muted); }

.tc-status-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.tc-status-badge--completed { background: rgba(74, 124, 89, 0.15); color: var(--accent-green); }
.tc-status-badge--skipped { background: rgba(160, 64, 42, 0.15); color: var(--accent-red); }

.tc-detail-desc-wrap {
    margin-bottom: 1rem;
}

.tc-detail-desc-wrap label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.tc-detail-desc-wrap small {
    color: var(--text-muted);
    font-weight: 400;
}

.tc-detail-desc {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    resize: vertical;
    cursor: text;
}

.tc-copy-btn {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem !important;
}

.tc-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Swap bar */
.tc-swap-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    background: rgba(156, 122, 30, 0.1);
    border: 1px dashed var(--accent-yellow);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
}

/* Complete form */
.tc-complete-form {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.tc-complete-form h4 {
    margin: 0 0 0.75rem 0;
    font-family: var(--font-heading);
}

.tc-feedback-row {
    margin-bottom: 0.75rem;
}

.tc-feedback-row label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.tc-feedback-row input,
.tc-feedback-row select {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
}

.tc-feedback-options {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tc-fb-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

.tc-fb-btn:hover {
    background: var(--bg-secondary);
}

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

.tc-feedback-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Loading spinner */
.tc-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-green);
    border-radius: 50%;
    animation: tc-spin 0.8s linear infinite;
    margin: 0 auto 0.5rem;
}

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

/* Dark mode overrides */
[data-theme="dark"] .tc-pill--gym {
    color: #b88fd4;
}

[data-theme="dark"] .tc-pill--cross-training {
    color: #6abfbf;
}

/* Responsive */
@media (max-width: 768px) {
    .tc-cell {
        min-height: 60px;
        padding: 0.25rem;
    }

    .tc-pill {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem;
    }

    .tc-km-badge {
        display: none;
    }

    .tc-header-cell {
        font-size: 0.65rem;
        padding: 0.35rem 0.15rem;
    }

    .tc-detail-header {
        flex-direction: column;
    }

    .tc-swap-bar {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ===== FINANCE STYLES ===== */

.finance-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.finance-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.finance-page .page-header h1 {
    font-family: var(--font-heading);
    color: var(--slate-dark);
    font-size: 1.6rem;
}

.finance-month-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.finance-month-nav button {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: var(--slate-dark);
    font-size: 0.85rem;
    transition: var(--transition);
}

.finance-month-nav button:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.finance-month-nav .month-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--slate-dark);
    min-width: 140px;
    text-align: center;
}

/* Tabs */
.finance-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.finance-tab {
    padding: 0.6rem 1.2rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate-light);
    transition: var(--transition);
}

.finance-tab:hover {
    color: var(--slate-dark);
}

.finance-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.finance-panel {
    display: none;
}

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

/* Summary Cards */
.finance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.finance-stat-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem;
    transition: var(--transition);
}

.finance-stat-card:hover {
    box-shadow: var(--box-shadow);
}

.finance-stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.finance-stat-card .stat-value {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--slate-dark);
}

.finance-stat-card .stat-value.positive {
    color: var(--accent-green);
}

.finance-stat-card .stat-value.negative {
    color: var(--accent-red);
}

/* Category Breakdown */
.finance-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.finance-chart-card,
.finance-breakdown-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem;
}

.finance-section-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 0.75rem;
}

.finance-chart-card h3,
.finance-breakdown-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.finance-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.finance-cat-row:last-child {
    border-bottom: none;
}

.finance-cat-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--slate-dark);
}

.finance-cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.finance-cat-amount {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--slate-dark);
}

/* Budget Progress */
.finance-budget-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.finance-budget-item {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.2rem;
}

.finance-budget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.finance-budget-header .budget-cat {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--slate-dark);
}

.finance-budget-header .budget-amounts {
    font-size: 0.8rem;
    color: var(--slate-light);
}

.finance-budget-header .budget-amounts strong {
    color: var(--slate-dark);
}

.finance-budget-bar {
    height: 8px;
    background: var(--surface-hover);
    border-radius: 4px;
    overflow: hidden;
}

.finance-budget-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: var(--accent-green);
}

.finance-budget-fill.warning {
    background: var(--accent-warm);
}

.finance-budget-fill.over {
    background: var(--accent-red);
}

/* Transactions Table */
.finance-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.finance-tx-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
    color: var(--slate-light);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.finance-tx-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--slate-dark);
}

.finance-tx-table tr:hover td {
    background: var(--surface-hover);
}

.finance-tx-table .tx-amount {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.finance-tx-table .tx-amount.income {
    color: var(--accent-green);
}

.finance-tx-table .tx-amount.expense {
    color: var(--accent-red);
}

.finance-tx-cat-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--surface-hover);
    color: var(--slate-medium);
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.finance-tx-cat-badge:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Import Section */
.finance-import-zone {
    background: var(--surface);
    border: 2px dashed var(--border-strong);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 1.5rem;
}

.finance-import-zone:hover {
    border-color: var(--primary-color);
    background: var(--surface-hover);
}

.finance-import-zone h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--slate-dark);
    margin-bottom: 0.5rem;
}

.finance-import-zone p {
    font-size: 0.85rem;
    color: var(--slate-light);
}

.finance-import-result {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--slate-medium);
    display: none;
}

/* Manual Entry Form */
.finance-form {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.finance-form h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.finance-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.finance-form-grid label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.finance-form-grid input,
.finance-form-grid select,
.finance-form-grid textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--slate-dark);
    background: var(--surface);
    transition: var(--transition);
}

.finance-form-grid input:focus,
.finance-form-grid select:focus,
.finance-form-grid textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.finance-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Recurring Costs */
.finance-recurring-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.finance-recurring-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
}

.finance-recurring-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.finance-recurring-info .name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--slate-dark);
}

.finance-recurring-info .meta {
    font-size: 0.75rem;
    color: var(--slate-light);
}

.finance-recurring-amount {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent-red);
}

/* Trend Chart */
.finance-trend-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.finance-trend-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--slate-dark);
    margin-bottom: 1rem;
}

/* Delete button for transactions */
.finance-tx-actions {
    display: flex;
    gap: 0.25rem;
}

.finance-tx-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--slate-light);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: var(--transition);
}

.finance-tx-actions button:hover {
    color: var(--accent-red);
    background: var(--surface-hover);
}

/* Category edit dropdown */
.finance-cat-edit {
    position: relative;
    display: inline-block;
}

.finance-cat-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-md);
    min-width: 160px;
    max-height: 250px;
    overflow-y: auto;
    padding: 0.25rem;
}

.finance-cat-dropdown.open {
    display: block;
}

.finance-cat-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: var(--slate-dark);
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--font-body);
}

.finance-cat-dropdown button:hover {
    background: var(--surface-hover);
}

/* Filter bar */
.finance-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.finance-filters select,
.finance-filters input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--slate-dark);
    background: var(--surface);
}

/* Responsive */
@media (max-width: 768px) {
    .finance-categories {
        grid-template-columns: 1fr;
    }

    .finance-form-grid {
        grid-template-columns: 1fr;
    }

    .finance-summary {
        grid-template-columns: 1fr 1fr;
    }

    .finance-tx-table {
        font-size: 0.78rem;
    }

    .finance-tx-table th:nth-child(4),
    .finance-tx-table td:nth-child(4) {
        display: none;
    }

    .finance-tx-table td:nth-child(2) {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ===== DCA / INVESTING STYLES ===== */

.dca-finance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dca-finance-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem;
    transition: var(--transition);
}

.dca-finance-card:hover {
    box-shadow: var(--box-shadow);
}

.dca-finance-card.highlight {
    border-color: var(--primary-color);
    background: var(--surface-hover);
}

.dca-finance-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--slate-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.dca-finance-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--slate-dark);
}

.dca-finance-value.positive { color: var(--accent-green); }
.dca-finance-value.negative { color: var(--accent-red); }

.dca-progress-section {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.dca-overall-bar {
    height: 10px;
    background: var(--surface-hover);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.dca-overall-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-teal));
    transition: width 0.5s ease;
}

.dca-stock-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dca-stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-hover);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.dca-stock-item:hover {
    background: var(--border-color);
}

.dca-stock-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dca-ticker {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    min-width: 50px;
}

.dca-company {
    font-size: 0.85rem;
    color: var(--slate-light);
}

.dca-stock-target {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dca-amount {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--slate-dark);
}

.dca-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate-light);
    font-size: 1rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: var(--transition);
}

.dca-remove-btn:hover {
    color: var(--accent-red);
    background: var(--surface);
}

.dca-empty {
    color: var(--slate-light);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

.dca-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--slate-dark);
    line-height: 1.5;
}

.dca-insight-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dca-insight-icon.good { color: var(--accent-green); }
.dca-insight-icon.warning { color: var(--accent-warm); }
.dca-insight-icon.danger { color: var(--accent-red); }

.dca-add-form {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.dca-form-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.dca-form-row select,
.dca-form-row input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--slate-dark);
    background: var(--surface);
    transition: var(--transition);
}

.dca-form-row select:focus,
.dca-form-row input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dca-form-row select {
    flex: 2;
}

.dca-form-row input {
    flex: 1;
    min-width: 100px;
}

@media (max-width: 768px) {
    .dca-finance-summary {
        grid-template-columns: 1fr 1fr;
    }

    .dca-form-row {
        flex-direction: column;
    }

    .dca-form-row select,
    .dca-form-row input {
        width: 100%;
    }
}

/* ===== MOBILE RESPONSIVENESS FIXES ===== */

/* iOS safe-area support */
@media (max-width: 768px) {
    .le-mobile-bar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
        height: calc(52px + env(safe-area-inset-top));
    }
    .le-page {
        padding-top: calc(68px + env(safe-area-inset-top));
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .le-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Hover-only buttons: always visible on touch devices */
@media (hover: none), (max-width: 768px) {
    .btn-sell {
        opacity: 0.7;
    }
    .holding-row .btn-sell {
        opacity: 0.7;
    }
    .btn-promote,
    .btn-remove {
        opacity: 0.7;
    }
    .watchlist-row .btn-promote,
    .watchlist-row .btn-remove {
        opacity: 0.7;
    }
    .meal-delete-btn {
        opacity: 0.7;
    }
    .meal-entry .meal-delete-btn {
        opacity: 0.7;
    }
}

/* iOS auto-zoom prevention + form touch targets */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .filter-form input,
    .filter-form select {
        padding: 0.85rem 0.875rem;
    }

    /* Inline forms stack vertically */
    .form-inline {
        flex-direction: column;
    }
    .form-inline input,
    .form-inline select,
    .form-inline button {
        width: 100%;
    }

    /* Contacts table: hide low-priority columns */
    .contacts-table .language-cell,
    .contacts-table thead th:nth-child(3) {
        display: none;
    }
    .contacts-table .contact-info-cell,
    .contacts-table thead th:nth-child(4) {
        display: none;
    }
    .contacts-table .notes-cell {
        display: none;
    }

    /* Portfolio table: hide more columns on mobile */
    .holdings-table thead th:nth-child(6),
    .holdings-table td:nth-child(6) {
        display: none;
    }
    .holdings-table thead th:nth-child(7),
    .holdings-table td:nth-child(7) {
        display: none;
    }

    /* Portfolio watchlist inputs */
    .stock-ticker-input,
    .stock-layer-input,
    .stock-verdict-input {
        width: 100%;
    }

    /* Journal page header */
    .journal-editor .page-header h1 {
        font-size: 1.3rem;
    }
    .journal-nav {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Garmin header actions */
    .garmin-header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Habits grid: single column on very small screens */
@media (max-width: 400px) {
    .habits-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-tab {
        font-size: 0.75rem;
        padding: 0.5rem 0.3rem;
    }
}

/* Training calendar: scrollable on small screens */
@media (max-width: 600px) {
    .tc-calendar-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tc-grid {
        min-width: 560px;
    }
}

/* Focus visibility for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Prevent accidental text selection on interactive elements */
.habit-card,
.stat-card,
.week-bar-col,
.volume-bar-col,
.timer-circle-container {
    -webkit-user-select: none;
    user-select: none;
}

/* ===== Finance Trips Dashboard ===== */
.finance-trips-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.finance-trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.finance-trip-card {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.finance-trip-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.finance-trip-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--slate-dark);
}

.finance-trip-dest {
    font-size: 0.75rem;
    color: var(--slate-light);
    margin-top: 0.1rem;
}

.finance-trip-status {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.finance-trip-status.status-planned {
    background: #E3F2FD;
    color: #1976D2;
}

.finance-trip-status.status-active {
    background: #FFF3E0;
    color: #F57C00;
}

.finance-trip-status.status-completed {
    background: #E8F5E9;
    color: #388E3C;
}

.finance-trip-dates {
    font-size: 0.78rem;
    color: var(--slate-dark);
}

.finance-trip-cost {
    margin-top: 0.2rem;
}

.finance-trip-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--slate-dark);
}

.finance-trip-meta {
    font-size: 0.75rem;
    color: var(--slate-light);
}

.finance-trip-budget {
    margin-top: 0.15rem;
}

.finance-trip-budget-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--slate-light);
    margin-bottom: 0.25rem;
}

.finance-trip-notes {
    font-size: 0.75rem;
    color: var(--slate-light);
    font-style: italic;
    border-left: 2px solid var(--border-color);
    padding-left: 0.5rem;
}

.finance-trip-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.finance-trip-actions button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--slate-light);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
}

.finance-trip-actions button:hover {
    background: var(--surface);
    color: var(--slate-dark);
}

.finance-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.finance-modal-content {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.finance-modal-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}