/* ============================================
   Command Center - Combined Styles
   Task Manager + Habit Tracker
   ============================================ */

/* ============================================
   CSS Variables & Design System (Unified)
   ============================================ */
:root {
    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-card: #111111;
    --bg-input: #1a1a1a;
    --bg-hover: #222222;

    /* Border Colors */
    --border-color: #2a2a2a;
    --border-subtle: #1a1a1a;

    /* Text Colors */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;

    /* Accent Colors - Task Manager */
    --accent-personal: #58a6ff;
    --accent-trading: #3fb950;
    --accent-personal-dim: rgba(88, 166, 255, 0.15);
    --accent-trading-dim: rgba(63, 185, 80, 0.15);
    --accent-ai: #f59e0b;
    --accent-ai-dim: rgba(245, 158, 11, 0.15);

    /* Accent Colors - Habit Tracker */
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-yellow: #d29922;
    --accent-orange: #db6d28;
    --accent-red: #f85149;
    --accent-purple: #a371f7;
    --accent-pink: #db61a2;

    /* Priority Colors */
    --priority-high: #f85149;
    --priority-medium: #d29922;
    --priority-low: #8b949e;

    /* Status Colors (Habits) */
    --status-done: #3fb950;
    --status-not-done: #6e7681;
    --status-mvd: #d29922;
    --status-future: #30363d;
    --status-not-scheduled: #21262d;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;

    /* Transitions */
    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

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

/* Perf: tell browser that layout/style changes inside one tab can't affect others */
.app-view {
    contain: layout style;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 16px;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* Custom Scrollbar - Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* ============================================
   Loading Splash Screen
   ============================================ */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-container {
    text-align: center;
}

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

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

.loading-container p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ============================================
   Auth Screen
   ============================================ */
.auth-screen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

.auth-container {
    text-align: center;
    padding: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 360px;
}

.auth-container h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

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

.sign-in-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.sign-in-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.auth-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   Global Header
   ============================================ */
.global-header {
    height: 60px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.app-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Main Navigation Tabs */
.main-nav-tabs {
    display: flex;
    gap: 0.25rem;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 4px;
}

.main-nav-tab {
    position: relative;
    padding: 0.5rem 1.15rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    z-index: 2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.main-nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.main-nav-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.2), rgba(161, 113, 247, 0.2));
    border: 1px solid rgba(88, 166, 255, 0.3);
    box-shadow:
        0 0 12px rgba(88, 166, 255, 0.15),
        0 0 4px rgba(161, 113, 247, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.main-nav-tab .nav-icon {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

.main-nav-tab:hover .nav-icon {
    transform: scale(1.15);
}

.main-nav-tab.active .nav-icon {
    filter: brightness(1.2);
}

.main-nav-tab .nav-label {
    transition: opacity 0.2s ease;
}

/* Contextual sub-nav for Health and Family parents */
.sub-nav-bar {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 60px;
    z-index: 99;
}

.sub-nav-bar.hidden {
    display: none;
}

.sub-nav-tab {
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.02em;
}

.sub-nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.sub-nav-tab.active {
    color: #ffffff;
    background: rgba(88, 166, 255, 0.12);
    border-color: rgba(88, 166, 255, 0.25);
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.35rem;
    transition: var(--transition);
    color: var(--text-secondary);
}

.header-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-color);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.sign-out-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.sign-out-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ============================================
   Main App Layout
   ============================================ */
.main-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-content {
    flex: 1;
    overflow: hidden;
}

/* View Containers */
.view-container {
    display: none;
    height: 100%;
}

.view-container.active {
    display: flex;
}

/* ============================================
   Year Progress / Flip Clock Header
   ============================================ */
.year-progress {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.flip-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.flip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.flip-container {
    display: flex;
    gap: 0.3rem;
}

.flip-card {
    position: relative;
    background: #1e293b;
    color: #ffffff;
    font-family: 'Inter', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.4rem 0.3rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    min-width: 26px;
    text-align: center;
    overflow: hidden;
}

.flip-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.flip-card.accent {
    color: #ffffff;
    border-bottom: 2px solid var(--accent-personal);
}

.flip-card.accent-red {
    color: #ffffff;
    border-bottom: 2px solid var(--accent-trading);
}

/* ============================================
   TASKS VIEW STYLES
   ============================================ */

/* Tasks View Layout */
#tasksView {
    flex-direction: row;
}

#tasksView .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Task Boards */
.boards-container {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(260px, 0.62fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "personal-core professional-core weekly-focus"
        "personal-meta professional-meta weekly-focus";
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
}

.board-professional-core {
    grid-area: professional-core;
}

.board-personal-core {
    grid-area: personal-core;
}

.board-professional-meta {
    grid-area: professional-meta;
}

.board-personal-meta {
    grid-area: personal-meta;
}

.board-weekly-focus {
    grid-area: weekly-focus;
    display: flex;
    flex-direction: column;
}

.task-board {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: 0;
}

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

.board-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.board-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.board-title.personal,
.board-title.personal-meta {
    color: var(--accent-personal);
}

.board-title.trading,
.board-title.trading-meta {
    color: var(--accent-trading);
}

.board-title.ai,
.board-title.ai-meta {
    color: var(--accent-ai);
}

.board-title.professional,
.board-title.professional-meta {
    color: var(--accent-trading);
}

.board-title.weekly {
    color: var(--accent-blue);
}

.add-btn.professional {
    background: var(--accent-trading);
}

/* Weekly Focus board — chart panel at bottom */
.wf-chart-panel {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: auto;
}

.board-weekly-focus .wf-chart-wrap {
    flex-shrink: 0;
    margin-bottom: 0;
}

.wf-chart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.wf-chart-info .wf-score-label {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
}

.wf-chart-info .wf-score-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.2;
    margin: 0;
}

.wf-chart-info .wf-progress-bar {
    margin: 0.25rem 0 0;
}

.wf-chart-info .wf-status-msg {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.board-weekly-focus .wf-add-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.board-weekly-focus .wf-tasks-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.board-weekly-focus .wf-reset-btn {
    align-self: flex-end;
    margin-top: 0.5rem;
}

.board-weekly-focus .wf-week-range {
    margin-left: 0.5rem;
}

/* ===== 4-Pillar weekly goals (inside Weekly Focus board) ===== */
.wf-pillars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wf-pillars-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wf-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.wf-pillars-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    letter-spacing: 0.3px;
}

.wf-pillars-count {
    font-variant-numeric: tabular-nums;
}

.wf-pillars-msg {
    font-weight: 500;
    letter-spacing: 0.4px;
}

.wf-pillars-status[data-state="zero"] .wf-pillars-count,
.wf-pillars-status[data-state="zero"] .wf-pillars-msg {
    color: var(--accent-red);
}

.wf-pillars-status[data-state="done"] .wf-pillars-count,
.wf-pillars-status[data-state="done"] .wf-pillars-msg {
    color: var(--accent-green);
}

.wf-pillar-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wf-pillar-tag {
    flex-shrink: 0;
    width: 80px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    color: white;
}

.wf-pillar-tag.personal  { background: var(--accent-personal); }
.wf-pillar-tag.trading   { background: var(--accent-trading); }
.wf-pillar-tag.ai        { background: var(--accent-ai); }
.wf-pillar-tag.jobswitch { background: var(--accent-purple); }

.wf-pillar-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.wf-pillar-input:focus {
    background: var(--bg-hover);
}

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

.wf-pillar-row[data-pillar="personal"]  .wf-pillar-input:focus { border-color: var(--accent-personal); }
.wf-pillar-row[data-pillar="trading"]   .wf-pillar-input:focus { border-color: var(--accent-trading); }
.wf-pillar-row[data-pillar="ai"]        .wf-pillar-input:focus { border-color: var(--accent-ai); }
.wf-pillar-row[data-pillar="jobSwitch"] .wf-pillar-input:focus { border-color: var(--accent-purple); }

.wf-pillar-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}

.wf-pillar-btn-done:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.wf-pillar-btn-fail:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.wf-pillar-row[data-status="done"] .wf-pillar-btn-done {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

.wf-pillar-row[data-status="failed"] .wf-pillar-btn-fail {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.wf-pillar-row[data-status="done"] .wf-pillar-input {
    color: var(--accent-green);
}

.wf-pillar-row[data-status="failed"] .wf-pillar-input {
    color: rgba(248, 81, 73, 0.75);
    text-decoration: line-through;
    opacity: 0.9;
}

.wf-pillar-row[data-status="done"] .wf-pillar-tag,
.wf-pillar-row[data-status="failed"] .wf-pillar-tag {
    opacity: 0.55;
}

/* Pending state — neutral, white text by default, neither button active */
.wf-pillars-status[data-state="pending"] .wf-pillars-count,
.wf-pillars-status[data-state="pending"] .wf-pillars-msg {
    color: var(--text-muted);
}

/* ===== Weekly history matrix — 52 weeks (1 year) ===== */
.wf-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.wf-history-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wf-history-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* 52 weeks wrap into 4 rows of 13 cells for the narrow Weekly Focus board. */
.wf-history-grid {
    display: grid;
    grid-template-columns: repeat(13, minmax(12px, 1fr));
    gap: 4px;
}

.wf-history-cell {
    aspect-ratio: 1;
    min-height: 16px;
    border-radius: 3px;
    background: var(--bg-input);
    transition: var(--transition);
}

.wf-history-cell-win    { background: var(--accent-green); }
.wf-history-cell-mixed  { background: var(--accent-yellow); }
.wf-history-cell-fail   { background: var(--accent-red); }
.wf-history-cell-empty  { background: var(--bg-input); }

.wf-history-cell-current {
    outline: 1.5px solid var(--text-primary);
    outline-offset: 1px;
}

.wf-history-cell:hover {
    transform: scale(1.4);
    z-index: 2;
}

/* ===== Explicit Win/Loss mark buttons for current week ===== */
.wf-mark-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.wf-mark-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wf-mark-label {
    width: 92px;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.wf-mark-btn {
    flex: 0 1 62px;
    padding: 0.35rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.wf-mark-btn.wf-mark-win:hover,
.wf-mark-btn.wf-mark-win.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

.wf-mark-btn.wf-mark-loss:hover,
.wf-mark-btn.wf-mark-loss.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.task-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Task Form */
.task-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.task-form input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: var(--transition);
}

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

.task-form input:focus {
    outline: none;
    border-color: var(--border-color);
    background: var(--bg-hover);
}

.add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    font-weight: 300;
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.add-btn.personal {
    background: var(--accent-personal);
}

.add-btn.trading {
    background: var(--accent-trading);
}

.add-btn.ai {
    background: var(--accent-ai);
}

.add-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Task List */
.task-list {
    flex: 1;
    list-style: none;
    overflow-y: auto;
    min-height: 0;
}

.task-list::-webkit-scrollbar {
    width: 4px;
}

.task-list::-webkit-scrollbar-track {
    background: transparent;
}

.task-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* Task Item */
.task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.375rem;
    background: var(--bg-input);
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: var(--transition);
    overflow: hidden;
}

.task-item:hover {
    border-color: var(--border-color);
    border-left-color: transparent;
    background: var(--bg-hover);
}

.task-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.task-item.drag-over {
    border-color: var(--accent-personal);
    background: var(--accent-personal-dim);
}

.task-item:has(.priority-dot.high) {
    border-left-color: #dc2626;
}

.task-item:has(.priority-dot.medium) {
    border-left-color: #ca8a04;
}

.task-item:has(.priority-dot.low) {
    border-left-color: #16a34a;
}

.drag-handle {
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: grab;
    user-select: none;
}

.task-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.task-checkbox:hover {
    border-color: var(--text-secondary);
}

.task-checkbox:checked {
    background: var(--accent-personal);
    border-color: var(--accent-personal);
}

.task-checkbox:checked::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
}

.trading .task-checkbox:checked {
    background: var(--accent-trading);
    border-color: var(--accent-trading);
}

.priority-dot {
    display: none;
}

.task-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.task-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: var(--transition);
}

.task-item:hover .task-actions {
    opacity: 1;
}

.task-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.task-action-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.task-action-btn.delete:hover {
    color: var(--priority-high);
}

/* Meta Tasks Weekday Blur Effect */
body.weekday-mode.meta-blur-enabled .board-professional-meta .task-item .task-text,
body.weekday-mode.meta-blur-enabled .board-personal-meta .task-item .task-text {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    transition: filter 0.3s ease;
}

body.weekday-mode.meta-blur-enabled .board-professional-meta .task-form,
body.weekday-mode.meta-blur-enabled .board-personal-meta .task-form,
body.weekday-mode.meta-blur-enabled .board-professional-meta .board-header,
body.weekday-mode.meta-blur-enabled .board-personal-meta .board-header {
    filter: none;
}

body.weekday-mode.meta-blur-enabled .board-professional-meta .task-item .task-actions,
body.weekday-mode.meta-blur-enabled .board-personal-meta .task-item .task-actions,
body.weekday-mode.meta-blur-enabled .board-professional-meta .task-item .comment-btn.visible-comment,
body.weekday-mode.meta-blur-enabled .board-personal-meta .task-item .comment-btn.visible-comment {
    display: none !important;
}

/* World Time Sidebar */
.world-time-sidebar {
    width: 180px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 1rem;
    padding-top: 0.5rem;
    overflow-y: auto;
}

.sidebar-header {
    display: none;
}

.timezone-item {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.tz-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.15rem;
}

.tz-flag {
    display: none;
}

.tz-code {
    display: none;
}

.tz-city {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.tz-time {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    line-height: 1.15;
}

.tz-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.tz-indicator {
    float: right;
    margin-top: -1.8rem;
    font-size: 0.85rem;
}

/* Archive Panel */
.archive-panel,
.stats-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 200;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.archive-panel.open,
.stats-panel.open {
    right: 0;
}

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

.panel-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

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

.archive-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.archive-tab {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.archive-tab:hover {
    background: var(--bg-hover);
}

.archive-tab.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.archive-stats {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.archive-stats .stat {
    flex: 1;
    text-align: center;
}

.archive-stats .stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.archive-stats .stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.archive-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    list-style: none;
}

.archive-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem;
    margin-bottom: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    position: relative;
}

.archive-item .priority-dot {
    margin-top: 0.25rem;
}

.archive-item-content {
    flex: 1;
}

.archive-item-text {
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.archive-item-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.archive-item-tag {
    padding: 0.125rem 0.375rem;
    background: var(--bg-input);
    border-radius: 3px;
}

.archive-item-tag.personal {
    color: var(--accent-personal);
}

.archive-item-tag.trading {
    color: var(--accent-trading);
}

.archive-period-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.period-tab {
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.period-tab:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.period-tab.active {
    background: var(--accent-personal);
    border-color: var(--accent-personal);
    color: white;
}

.restore-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.restore-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Stats Panel */
.stats-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.stats-period {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.period-btn {
    flex: 1;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

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

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

.habit-item {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr) 40px;
    align-items: center;
    padding: 0.75rem 1rem;
    /* Reduced vertical padding */
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-card h4 {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-number.actual {
    color: var(--accent-personal);
}

.stat-number.meta {
    color: var(--priority-medium);
}

.stats-breakdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.stats-breakdown h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Time Analytics Panel */
.time-analytics-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 430px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 200;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.time-analytics-panel.open {
    right: 0;
}

.time-analytics-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.time-period-btn {
    flex: 1;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

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

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

.time-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.time-card {
    padding: 0.875rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.time-card h4 {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.time-card .time-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.time-card.personal {
    border-color: var(--accent-personal-dim);
}

.time-card.personal .time-value {
    color: var(--accent-personal);
}

.time-card.trading {
    border-color: var(--accent-trading-dim);
}

.time-card.trading .time-value {
    color: var(--accent-trading);
}

.time-breakdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.time-breakdown h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.time-row:last-child {
    border-bottom: none;
}

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

.time-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.chart-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.chart-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.chart-container {
    position: relative;
    height: 200px;
}

.task-time-list {
    max-height: 300px;
    overflow-y: auto;
}

.task-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.task-list-header h4 {
    margin-bottom: 0;
}

.sort-buttons {
    display: flex;
    gap: 0.25rem;
}

.sort-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.sort-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

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

.task-time-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
}

.task-time-item:last-child {
    border-bottom: none;
}

.task-time-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.task-time-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.task-time-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.task-time-meta .tag {
    padding: 0.125rem 0.375rem;
    background: var(--bg-input);
    border-radius: 3px;
}

.task-time-meta .tag.personal {
    color: var(--accent-personal);
}

.task-time-meta .tag.trading {
    color: var(--accent-trading);
}

.task-time-duration {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-personal);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

/* Settings Panel */
.settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.settings-panel.open {
    right: 0;
}

.settings-content {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.setting-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.setting-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #4b5563;
    border-radius: 28px;
    transition: 0.3s ease;
}

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

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

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

.setting-item-column {
    flex-direction: column;
    gap: 0.75rem;
}

.date-inputs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
}

.date-input-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.date-input-group input[type="date"] {
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-personal);
}

.firebase-usage-heading {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.firebase-usage-refresh {
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.firebase-usage-refresh:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-personal);
}

.firebase-usage-refresh:disabled {
    cursor: default;
    opacity: 0.55;
}

.firebase-usage-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.firebase-usage-cell {
    min-width: 0;
    padding: 0.65rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.firebase-usage-cell span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.firebase-usage-cell strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.firebase-usage-meter {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.firebase-usage-meter div {
    height: 100%;
    width: 0%;
    background: var(--accent-personal);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.firebase-usage-meta,
.firebase-usage-note {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.firebase-usage-note {
    color: var(--text-secondary);
}

/* Inline Editing */
.task-text-editing {
    flex: 1;
    padding: 0.25rem 0.5rem;
    background: var(--bg-hover);
    border: 1px solid var(--accent-personal);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
}

/* ========================================
   Task Boards (Fixed 3x2 Grid)
   ======================================== */
.boards-container {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(260px, 0.62fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "personal-core professional-core weekly-focus"
        "personal-meta professional-meta weekly-focus";
    gap: 1rem;
    height: 100%;
    min-height: 0;
}

/* Individual Board - Fixed Height & Internal Scroll */
.task-board {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.task-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    /* Scroll internally */
    padding-right: 0.25rem;
    margin-top: 0.5rem;
    /* Reduced margin */
}

/* Custom Scrollbar */
.task-list::-webkit-scrollbar {
    width: 6px;
}

.task-list::-webkit-scrollbar-track {
    background: transparent;
}

.task-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.task-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   New Layouts (Home & Tasks Sidebar)
   ======================================== */

/* ========================================
   Dashboard (Home View) - 3 Column Layout
   ======================================== */
.dashboard-layout {
    display: flex;
    height: calc(100vh - 60px);
    background: var(--bg-primary);
    overflow: hidden;
}

/* Left Panel - 3 stacked cards */
.dashboard-left-panel {
    width: 520px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

.dashboard-left-panel::-webkit-scrollbar {
    width: 3px;
}

.dashboard-left-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.dash-left-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Main area (Life Progress + Timer) */
.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
}

/* Right Panel - World Clock */
.dashboard-right-panel {
    width: 180px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

/* ====== Life Progress Banner ====== */
.life-progress-banner {
    flex-shrink: 0;
    margin: 0.5rem 0.6rem 0;
}

.life-progress-collapsed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.life-progress-collapsed:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
}

.lp-collapsed-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lp-collapsed-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.lp-collapsed-badge {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.12rem 0.5rem;
    border-radius: 10px;
}

.lp-collapsed-percent {
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.lp-collapsed-bar {
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #4a7a5a 0%, #4a7a5a 32.5%, #8a7a4a 32.5%, #8a7a4a 63.75%, #8a4a4a 63.75%, #8a4a4a 100%);
    border-radius: 4px;
    overflow: visible;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dark overlay to hide unfilled portion */
.lp-collapsed-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--lp-unfilled, 58%);
    background: var(--bg-tertiary);
    border-radius: 0 3px 3px 0;
    transition: width 0.6s ease;
}

/* Vertical marker at current position */
.lp-collapsed-bar-fill {
    position: absolute;
    left: 0;
    top: -3px;
    bottom: -3px;
    width: 3px;
    background: #ffffff;
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    transition: left 0.6s ease;
}

.lp-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.6rem;
    cursor: pointer;
    padding: 0.15rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.lp-toggle-btn:hover {
    opacity: 1;
}

.life-progress-expanded {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    animation: lpSlideDown 0.25s ease-out;
}

@keyframes lpSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lp-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.lp-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

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

.lp-age-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

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

.lp-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.lp-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #4a7a5a 0%, #4a7a5a 32.5%, #8a7a4a 32.5%, #8a7a4a 63.75%, #8a4a4a 63.75%, #8a4a4a 100%);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-percent {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    min-width: 65px;
    text-align: right;
}

.lp-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.lp-tile {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.lp-tile.primary {
    background: rgba(88, 166, 255, 0.06);
    border-color: rgba(88, 166, 255, 0.15);
}

.lp-tile-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    display: block;
    line-height: 1.2;
}

.lp-tile.primary .lp-tile-value {
    font-size: 1rem;
    color: var(--accent-blue);
}

.lp-tile-label {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-top: 0.1rem;
}

/* ====== Habit Progress Bar Cards (shared) ====== */
.habit-progress-list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    overflow-y: auto;
}

.habit-progress-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.habit-progress-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    width: 100px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.habit-progress-track {
    flex: 1;
    height: 10px;
    background: var(--bg-primary);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.habit-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.habit-progress-pct {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* Card header with overall rate */
.habit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.habit-card-rate {
    font-size: 1.1rem;
    font-weight: 700;
}

.habit-card-sublabel {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.habit-card-badge {
    font-size: 0.5rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.habit-card-badge.on-track {
    color: #3fb950;
    background: rgba(63, 185, 80, 0.1);
    border: 1px solid rgba(63, 185, 80, 0.2);
}

.habit-card-badge.warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.habit-card-badge.behind {
    color: #f85149;
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.2);
}

/* Grid cards (shared) */

.grid-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.grid-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.grid-card-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.grid-card-btn:hover {
    background: var(--bg-hover);
    color: var(--cyan);
    border-color: var(--cyan);
}

.grid-card-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 0.35rem;
}

.empty-state-small span {
    font-size: 1.5rem;
    opacity: 0.5;
}

.empty-state-small p {
    font-size: 0.75rem;
}

/* ====== Today's Energy Card ====== */
.energy-selection {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.energy-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.energy-btn:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.energy-btn .energy-emoji {
    font-size: 1.3rem;
    line-height: 1;
}

.energy-btn .energy-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.energy-btn[data-level="high"]:hover,
.energy-btn[data-level="high"].active {
    border-color: #22c55e;
    background: rgba(34, 197, 80, 0.1);
}

.energy-btn[data-level="medium"]:hover,
.energy-btn[data-level="medium"].active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.energy-btn[data-level="low"]:hover,
.energy-btn[data-level="low"].active {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.energy-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.energy-btn.active .energy-label {
    color: var(--text-primary);
}

/* Energy stats view (after selection) */
.energy-stats-view {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.energy-today-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

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

.energy-today-dot.high {
    background: #22c55e;
}

.energy-today-dot.medium {
    background: #f59e0b;
}

.energy-today-dot.low {
    background: #ef4444;
}

.energy-today-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.energy-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.energy-stats-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    transition: all 0.2s ease;
}

.energy-stats-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.energy-locked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.energy-locked-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.energy-locked-badge {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.energy-selected-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.energy-selected-row:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
}

.energy-selected-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.energy-chart-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.energy-chart-container {
    flex: 1;
    min-height: 50px;
    position: relative;
}

.energy-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.energy-summary {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

/* ====== Energy Stats Modal ====== */
.energy-stats-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.energy-stats-loading,
.energy-stats-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-size: 0.85rem;
}

.es-period-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem;
}

.es-period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.es-period-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.es-period-avg {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.es-bar-row {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.es-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition: width 0.4s ease;
}

.es-bar-segment span {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
}

.es-bar-segment.high {
    background: #3fb950;
}

.es-bar-segment.medium {
    background: #f59e0b;
}

.es-bar-segment.low {
    background: #f85149;
}

.es-period-meta {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: right;
}

.es-calendar-section {
    margin-top: 0.25rem;
}

.es-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
}

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

.es-cal-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.es-cal-cell.high {
    background: rgba(63, 185, 80, 0.3);
    border-color: rgba(63, 185, 80, 0.2);
}

.es-cal-cell.medium {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.2);
}

.es-cal-cell.low {
    background: rgba(248, 81, 73, 0.3);
    border-color: rgba(248, 81, 73, 0.2);
}

.es-cal-cell.empty {
    background: var(--bg-tertiary);
}

.es-cal-day {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.es-calendar-legend {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.es-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.es-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.es-legend-dot.high {
    background: #3fb950;
}

.es-legend-dot.medium {
    background: #f59e0b;
}

.es-legend-dot.low {
    background: #f85149;
}

.es-legend-dot.empty {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* Dashboard Reminder Items */
.dashboard-reminder-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent-green);
    transition: all 0.2s ease;
}

.dashboard-reminder-item.overdue {
    border-left-color: var(--accent-red);
    background: rgba(248, 81, 73, 0.06);
    opacity: 0.5;
}

.dashboard-reminder-item.next-up {
    border-left-color: var(--cyan);
    background: rgba(6, 182, 212, 0.08);
    border-left-width: 3px;
}

.dashboard-reminder-item.next-up .reminder-time {
    color: var(--cyan);
}

.dashboard-reminder-item.next-up .reminder-text {
    color: var(--text-primary);
    font-weight: 500;
}

/* Mute non-next future reminders */
.dashboard-reminder-item:not(.next-up):not(.overdue) {
    opacity: 0.6;
}

.reminder-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Consolas', monospace;
    flex-shrink: 0;
    min-width: 52px;
}

.dashboard-reminder-item.overdue .reminder-time {
    color: var(--accent-red);
}

.reminder-text {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-repeat {
    font-size: 0.6rem;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Fired / waiting-for-action state */
.dashboard-reminder-item.reminder-fired {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    opacity: 1;
    animation: reminder-pulse 2s ease-in-out infinite;
}
.dashboard-reminder-item.reminder-fired .reminder-time {
    color: #f59e0b;
}

@keyframes reminder-pulse {
    0%, 100% { background: rgba(245, 158, 11, 0.08); }
    50% { background: rgba(245, 158, 11, 0.16); }
}

/* Snoozed state */
.dashboard-reminder-item.reminder-snoozed {
    border-left-color: var(--text-muted);
    background: rgba(110, 118, 129, 0.06);
    opacity: 0.45;
}
.dashboard-reminder-item.reminder-snoozed .reminder-time {
    color: var(--text-muted);
}
.dashboard-reminder-item.reminder-snoozed .reminder-text {
    color: var(--text-secondary);
    font-style: italic;
}

/* Status badges */
.reminder-badge {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.reminder-badge.fired {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}
.reminder-badge.snoozed {
    background: rgba(110, 118, 129, 0.15);
    color: var(--text-muted);
}

.reminders-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    max-height: 160px;
}

.dashboard-task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

.dashboard-task-item.trading {
    border-left-color: var(--cyan);
}

.dashboard-task-item.personal {
    border-left-color: var(--purple);
}

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

.task-priority-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-priority-dot.high {
    background: var(--red);
}

.task-priority-dot.medium {
    background: var(--amber);
}

.dashboard-task-item .task-text {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-category-badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.task-category-badge.trading {
    background: rgba(34, 211, 238, 0.15);
    color: var(--cyan);
}

.task-category-badge.personal {
    background: rgba(168, 85, 247, 0.15);
    color: var(--purple);
}

/* Habits Mini Progress */
.habits-grid-content {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.habit-mini-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.habit-mini-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.habit-mini-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--green);
    transition: width 0.5s ease, background 0.3s ease;
}

.habit-mini-marker {
    position: absolute;
    left: 90%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--text-muted);
    opacity: 0.4;
}

.habit-mini-value {
    display: flex;
    align-items: baseline;
}

.habit-mini-value span:first-child {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.habit-mini-value .percent {
    font-size: 1rem;
    color: var(--text-muted);
}

.habit-mini-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* Clock Panel Content */
.clock-panel-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    gap: 0;
    height: 100%;
}

.timezone-item {
    padding: 0.65rem 0.15rem;
    background: transparent;
    border-radius: 0;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

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

.timezone-name {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.timezone-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    line-height: 1.15;
}

.timezone-date {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
    opacity: 0.6;
}

.timezone-icon {
    display: none;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 60px);
    }

    .dashboard-left-panel {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
        overflow-y: hidden;
        order: 1;
        max-height: 200px;
    }

    .dash-left-card {
        min-width: 250px;
        flex: 0 0 auto;
    }

    .dashboard-main {
        order: 2;
    }

    .dashboard-right-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: 3;
    }

    .deep-work-ring-container {
        width: 240px;
        height: 240px;
    }

    .timer-ring-container {
        width: 160px;
        height: 160px;
    }

    .timer-stat-side {
        display: none;
    }

    .clock-panel-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .timezone-item {
        min-width: 100px;
    }

    .life-progress-banner {
        margin: 0.4rem 0.75rem 0;
    }

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

/* Tasks View Layout (Main + Right Bar) */
.tasks-layout {
    display: flex;
    height: calc(100vh - 60px);
    /* Exact height minus header */
    width: 100%;
    overflow: hidden;
}

.tasks-main-content {
    flex: 1;
    overflow: hidden;
    /* Prevent scroll on container, rely on board scroll */
    padding: 0.5rem;
    /* Reduced padding for tighter fit */
    height: 100%;
}

/* Right Icon Sidebar */
.tasks-sidebar {
    width: 60px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
    z-index: 10;
    flex-shrink: 0;
}

.sidebar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.sidebar-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.sidebar-icon-btn.bottom {
    margin-top: auto;
}

/* Active state for sidebar icon buttons (e.g. weekly focus toggle) */
.sidebar-icon-btn.active {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent-blue);
}

/* Weekly focus toggle button — separated, more prominent */
.wf-toggle-btn {
    margin-top: 20px;
}
.wf-toggle-btn.active {
    background: rgba(88, 166, 255, 0.20);
    color: var(--accent-blue);
    box-shadow: 0 0 0 1.5px rgba(88, 166, 255, 0.45);
}

/* Weekly focus items — draggable, priority border survives hover */
.wf-item { cursor: grab !important; }
.wf-item:active { cursor: grabbing !important; }
.wf-left .task-item { cursor: grab; }

/* Keep priority border visible on hover (overrides .task-item:hover which clears it) */
.wf-item:has(.priority-dot.high):hover  { border-left-color: #dc2626 !important; }
.wf-item:has(.priority-dot.medium):hover { border-left-color: #ca8a04 !important; }
.wf-item:has(.priority-dot.low):hover   { border-left-color: #16a34a !important; }
.wf-item:has(.priority-dot.none):hover  { border-left-color: transparent !important; }

/* Comment button highlight when note exists — background since emoji ignores color */
.wf-comment-active {
    opacity: 1 !important;
    background: rgba(88, 166, 255, 0.15) !important;
    border-radius: var(--radius-sm);
}
.wf-comment-active:hover {
    background: rgba(88, 166, 255, 0.25) !important;
}

.wf-item.wf-dragging {
    opacity: 0.4;
    cursor: grabbing !important;
}
.wf-item.wf-drag-over {
    background: rgba(88, 166, 255, 0.06) !important;
    border-top: 2px solid #58a6ff;
    margin-top: -2px;
}
.wf-tasks-list.wf-drag-over-zone {
    background: rgba(88, 166, 255, 0.04);
    border: 1px dashed rgba(88, 166, 255, 0.3);
    border-radius: var(--radius-md);
}

/* ====== Weekly Focus View ====== */
.weekly-focus-view {
    height: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.wf-layout {
    display: flex;
    gap: 1rem;
    height: 100%;
    min-height: 0;
}

/* Left panel — matches .task-board exactly */
.wf-left {
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: 0;
    overflow: hidden;
}

/* Week range shown in right panel only */
.wf-week-range {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.5rem;
}

.wf-reset-btn {
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    transition: var(--transition);
}

.wf-reset-btn:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.wf-tasks-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.75rem;
}

.wf-tasks-list::-webkit-scrollbar { width: 4px; }
.wf-tasks-list::-webkit-scrollbar-track { background: transparent; }
.wf-tasks-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.wf-empty {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 2rem 0;
    text-align: center;
}

/* Matches .task-item exactly */
.wf-task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.375rem;
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.wf-task-item:hover {
    border-color: var(--border-color);
    background: var(--bg-hover);
}

.wf-task-item.wf-task-done {
    opacity: 0.5;
}

.wf-check-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

/* Matches .task-text exactly */
.wf-task-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.wf-task-done .wf-task-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.wf-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
    opacity: 0;
    transition: var(--transition);
    flex-shrink: 0;
}

.wf-task-item:hover .wf-delete-btn {
    opacity: 1;
}

.wf-delete-btn:hover {
    color: var(--accent-red);
}

/* Matches .task-form exactly */
.wf-add-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.wf-add-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.wf-add-input:focus {
    border-color: var(--border-color);
    background: var(--bg-hover);
}

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

/* Matches .add-btn exactly */
.wf-add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    font-weight: 300;
    color: white;
    background: var(--accent-personal);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.wf-add-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Right panel — chart + score */
.wf-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    gap: 0.5rem;
}

.wf-chart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.wf-score-label {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.wf-score-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.75rem;
}

.wf-stats-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 2rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.wf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.wf-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.wf-stat-done { color: var(--accent-green); }
.wf-stat-remaining { color: var(--text-secondary); }

.wf-stat-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wf-stat-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
}

/* Completed task styling */
.wf-item.wf-done .task-text {
    text-decoration: line-through;
    opacity: 0.4;
}
.wf-item.wf-done .priority-dot {
    opacity: 0.3;
}
.wf-item.wf-done .drag-handle {
    opacity: 0.25;
}

/* Progress bar */
.wf-progress-bar {
    width: 100%;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.wf-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.4s ease;
    width: 0%;
}
.wf-progress-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Status message */
.wf-status-msg {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.25rem;
    letter-spacing: 0.2px;
    min-height: 1em;
}

/* Responsive Overrides */
@media (max-width: 900px) {

    /* Dashboard responsive */
    .dashboard-layout {
        padding: 1rem;
    }

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

    .focus-card,
    .tasks-card,
    .habits-card,
    .clock-card {
        grid-column: 1;
        grid-row: auto;
    }

    .tasks-card {
        max-height: 280px;
    }

    .compact-timer {
        flex-direction: column;
        gap: 1rem;
    }

    .timer-controls {
        flex-direction: row;
    }

    .tasks-layout {
        flex-direction: column;
    }

    .tasks-sidebar {
        width: 100%;
        height: 60px;
        flex-direction: row;
        justify-content: space-around;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: 2;
    }

    .sidebar-icon-btn.bottom {
        margin-top: 0;
    }
}


/* ========================================
   Habits View Layout
   ======================================== */
.habits-layout {
    display: flex;
    height: calc(100vh - 60px);
    width: 100%;
    overflow: hidden;
}

.habits-left-sidebar {
    width: 140px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    gap: 0.75rem;
    flex-shrink: 0;
}

.week-nav-btn-v {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.week-nav-btn-v:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.week-info-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
}

.week-info-v #weekRange,
.week-info-v .habit-week-range {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: block;
}

.week-info-v .week-status {
    font-size: 0.7rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    display: block;
}

.habits-main-content {
    flex: 1;
    overflow: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.habits-tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.habits-tab-content.active {
    display: flex;
}

/* Reusing tasks-sidebar styles for habits-sidebar */
.habits-sidebar {
    width: 60px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
    z-index: 10;
    flex-shrink: 0;
}

/* Horizontal Legend in Header */
.sidebar-legend.horizontal {
    flex-direction: row;
    padding: 0;
    border: none;
    margin: 0;
    gap: 1.5rem;
    background: transparent;
}

.habits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    /* Compact spacing */
}

.sidebar-legend.horizontal .legend-item {
    padding: 0;
    background: transparent;
}

/* Habits Panels Wrapper */
.habits-panels-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    gap: 0.5rem;
    min-height: 0;
}

.habit-goal-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    min-height: 0;
}

.habit-panel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.45rem 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.habit-panel-header h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.habit-week-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.habit-week-controls #weekRange,
.habit-week-controls .habit-week-range {
    min-width: 128px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.habit-panel-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 28px;
    height: 28px;
    padding: 0 0.55rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.habit-panel-add:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Habits Container - Equal share with chart */
.habits-container {
    flex: 1 1 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Weekly Progress Chart */
.habits-chart-container {
    flex: 1 1 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    min-height: 0;
    position: relative;
}

.habits-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.habits-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 0;
    justify-content: space-evenly;
    min-height: 0;
}

.habits-empty-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 80px;
    color: var(--text-muted);
    font-size: 0.82rem;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
}

.habit-empty-add {
    height: 30px;
    padding: 0 0.7rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.habit-empty-add:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Compact Lesson Carousel */
.lessons-carousel {
    margin-top: 1rem;
    padding: 0;
}

.lesson-card {
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.lesson-header {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.lesson-explanation {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-example {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Relocated: Relaxed Habit Item Padding */
.habit-item {
    padding: 1.15rem 1rem;
}

/* Comment Modal */
.comment-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.comment-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

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

.comment-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.comment-header .close-comment {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.comment-header .close-comment:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.comment-modal textarea {
    width: 100%;
    min-height: 150px;
    padding: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 1rem;
}

.comment-modal textarea::placeholder {
    color: var(--text-muted);
}

.comment-modal textarea:focus {
    outline: none;
    border-color: var(--accent-personal);
    background: var(--bg-hover);
}

.comment-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.comment-actions button {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.save-comment {
    background: var(--accent-personal);
    border: none;
    color: white;
}

.save-comment:hover {
    opacity: 0.9;
}

.cancel-comment {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.cancel-comment:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.comment-btn.has-comments {
    color: var(--accent-personal);
}

.visible-comment {
    opacity: 1 !important;
    background: transparent;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0.25rem;
}

.visible-comment:hover {
    background: rgba(88, 166, 255, 0.15);
}

/* Priority Menu */
.priority-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.375rem;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.priority-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.priority-menu button:hover {
    background: var(--bg-hover);
}

/* ========================================
   Life Calendar
   ======================================== */

.life-calendar-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    gap: 0.75rem;
}

.life-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.lc-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.lc-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e6edf3;
    margin: 0;
}

.lc-subtitle {
    font-size: 0.8rem;
    color: #8b949e;
}

.lc-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: 4px;
    cursor: default;
    position: relative;
}

.lc-grid-wrapper {
    display: flex;
    flex-direction: row;
    padding: 8px;
}

.lc-age-labels {
    display: flex;
    flex-direction: column;
    margin-right: 4px;
    flex-shrink: 0;
}

.lc-age-label {
    font-size: 7px;
    color: #484f58;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2px;
    width: 18px;
    line-height: 1;
}

.lc-grid {
    display: grid;
    grid-template-columns: repeat(52, var(--lc-cell-w, 8px));
    grid-auto-rows: var(--lc-cell-h, 8px);
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lc-cell {
    width: var(--lc-cell-w, 8px);
    height: var(--lc-cell-h, 8px);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: opacity 0.1s;
    outline: 0.5px solid rgba(0, 0, 0, 0.3);
    outline-offset: -0.5px;
}

.lc-cell:hover {
    opacity: 0.7;
    z-index: 1;
}

/* Lived cells — 3 phase colors */
.lc-cell.lived.green { background: #4a7a5a; }
.lc-cell.lived.yellow { background: #8a7a4a; }
.lc-cell.lived.red { background: #8a4a4a; }

/* Future cells — faded phase colors */
.lc-cell.future.green { background: rgba(74, 122, 90, 0.22); }
.lc-cell.future.yellow { background: rgba(138, 122, 74, 0.22); }
.lc-cell.future.red { background: rgba(138, 74, 74, 0.22); }

/* Current week — pulsing white */
.lc-cell.current {
    background: #ffffff !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    animation: lc-pulse 2s ease-in-out infinite;
    z-index: 2;
    border-radius: 2px;
}

@keyframes lc-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); }
    50% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2); }
}

/* Milestone indicator dot */
.lc-cell.has-milestone::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fbbf24;
}

/* Tooltip */
.lc-tooltip {
    position: fixed;
    background: rgba(22, 27, 34, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    color: #e6edf3;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s;
    backdrop-filter: blur(8px);
}

.lc-tooltip.visible {
    opacity: 1;
}

.lc-tooltip .tt-week {
    font-weight: 600;
    color: #58a6ff;
}

.lc-tooltip .tt-date {
    color: #8b949e;
    margin-top: 2px;
}

.lc-tooltip .tt-age {
    color: #8b949e;
}

/* Week Detail Panel */
.week-detail-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: #161b22;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1100;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

.week-detail-panel.open {
    right: 0;
}

.week-detail-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.week-detail-panel .panel-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #e6edf3;
    margin: 0;
}

.week-detail-panel .close-btn {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
}

.week-detail-panel .close-btn:hover {
    color: #e6edf3;
}

.week-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wdp-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wdp-date-range {
    font-size: 0.85rem;
    color: #e6edf3;
    font-weight: 500;
}

.wdp-age {
    font-size: 0.8rem;
    color: #8b949e;
}

.wdp-phase {
    font-size: 0.75rem;
    color: #58a6ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wdp-section h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.6rem 0;
}

.wdp-milestone-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wdp-icon-input {
    width: 44px;
    height: 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e6edf3;
    text-align: center;
    font-size: 1.1rem;
    padding: 0;
    flex-shrink: 0;
}

.wdp-title-input {
    flex: 1;
    height: 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e6edf3;
    padding: 0 0.6rem;
    font-size: 0.85rem;
}

.wdp-note-input,
.wdp-journal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e6edf3;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

.wdp-icon-input:focus,
.wdp-title-input:focus,
.wdp-note-input:focus,
.wdp-journal-input:focus {
    outline: none;
    border-color: rgba(88, 166, 255, 0.4);
}

.wdp-save-btn {
    background: linear-gradient(135deg, #238636, #2ea043);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-end;
}

.wdp-save-btn:hover {
    background: linear-gradient(135deg, #2ea043, #3fb950);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 900px) {
    .lc-age-labels {
        display: none;
    }

    .week-detail-panel {
        width: 100%;
        right: -100%;
    }
}

/* Undo Toast */
.undo-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #323232;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.undo-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.undo-toast.hidden {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    pointer-events: none;
}

.undo-text {
    font-size: 0.9rem;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.undo-btn {
    background: transparent;
    border: none;
    color: var(--accent-personal);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.undo-btn:hover {
    background: rgba(88, 166, 255, 0.15);
}

/* Reset Section */
.reset-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.reset-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    border-radius: var(--radius-md);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Bar Fills */
.bar-container {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.bar-fill.actual {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.bar-fill.meta {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.breakdown-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-row .row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakdown-row .row-header span:first-child {
    color: var(--text-secondary);
}

.breakdown-row .row-header span:last-child {
    font-weight: 500;
}

/* ============================================
   HABITS VIEW STYLES
   ============================================ */

#habitsView {
    flex-direction: column;
}

/* Habits App Header */
#habitsView .habits-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

#habitsView .habits-header-left {
    flex: 1;
}

#habitsView .habits-header-center {
    flex: 0 0 auto;
}

#habitsView .habits-header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
}

.habits-main-tabs {
    display: flex;
    gap: var(--spacing-xs);
}

.habits-tab-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.habits-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.habits-tab-btn.active {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* Habits Tab Content */
.habits-tab-content {
    display: none;
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
}

.habits-tab-content.active {
    display: block;
}

/* Habits tab override - restore flex layout for two-panel split */
#habitsTab.habits-tab-content {
    padding: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
}

#habitsTab.habits-tab-content.active {
    display: flex;
}

/* Week Navigator */
.week-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.week-navigator-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    gap: var(--spacing-md);
    min-width: 300px;
}

.week-navigator-card:hover {
    border-color: var(--accent-blue);
}

.week-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.week-info {
    text-align: center;
    flex-grow: 1;
}

#weekRange {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.week-status {
    font-size: 0.7rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 2px;
    display: block;
}

/* Habits Layout */
.habits-layout {
    display: flex;
    align-items: stretch;
}

/* KPI Sidebar */
.kpi-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 140px;
    flex-shrink: 0;
    justify-content: space-between;
}

.kpi-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
}

.kpi-box.perfect .kpi-value {
    color: var(--accent-green);
}

.kpi-box.mvd .kpi-value {
    color: var(--accent-blue);
}

.kpi-box.bad .kpi-value {
    color: var(--accent-red);
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Day Headers */
.day-headers {
    display: grid;
    grid-template-columns: minmax(160px, 1.8fr) repeat(7, minmax(30px, 1fr));
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.habit-week-range {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.habit-name-header {
    padding: var(--spacing-md);
}

.day-header {
    padding: 0.65rem 0.25rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.day-header.today {
    color: var(--accent-blue);
}

.habits-list {
    display: flex;
    flex-direction: column;
}

/* Habit Row */
.habit-row {
    border-bottom: 1px solid var(--border-subtle);
}

.habit-row:last-child {
    border-bottom: none;
}

.habit-main {
    display: grid;
    grid-template-columns: minmax(160px, 1.8fr) repeat(7, minmax(30px, 1fr));
    align-items: center;
}

.habit-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.65rem 0.45rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.habit-name:hover {
    background: var(--bg-hover);
}

.habit-expand-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.habit-row.expanded .habit-expand-icon {
    transform: rotate(90deg);
}

.habit-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.habit-skip-badge {
    font-size: 0.52rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 6px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.habit-skip-badge.no-skip {
    color: var(--accent-red);
    background: rgba(248, 81, 73, 0.08);
    border-color: rgba(248, 81, 73, 0.2);
}

.habit-color-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.habit-schedule-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

/* Status Buttons */
.day-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
    font-weight: 600;
}

.status-btn.not-done {
    background: var(--accent-red);
    color: var(--bg-primary);
}

.status-btn.not-done::before {
    content: "✕";
}

.status-btn.not-done:hover {
    background: #ff6b6b;
}

.status-btn.done {
    background: var(--status-done);
    color: var(--bg-primary);
}

.status-btn.done::before {
    content: "✓";
}

.status-btn.mvd {
    background: #60a5fa;
    color: var(--bg-primary);
    font-size: 0.625rem;
}

.status-btn.mvd::before {
    content: "MVD";
}

.status-btn.skip {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

.status-btn.skip::before {
    content: "—";
    font-weight: 700;
}

.status-btn.not-scheduled {
    background: transparent;
    color: var(--text-muted);
    cursor: default;
    opacity: 0.3;
}

.status-btn.not-scheduled::before {
    content: "·";
    font-size: 1.5rem;
}

.status-btn.unmarked {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px dashed var(--border-subtle);
}

.status-btn.unmarked::before {
    content: "";
}

.status-btn.future {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    opacity: 0.5;
    cursor: default;
}

.status-btn.future::before {
    content: "—";
}

/* Habit Details (Expanded) */
.habit-details {
    max-height: 0;
    overflow: hidden;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
    padding: 0 var(--spacing-md);
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.habit-row.expanded .habit-details {
    max-height: 500px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.checklist-section {
    margin-bottom: 0;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-left: 2px solid transparent;
}

.checklist-item:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.checklist-item:last-of-type {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.checklist-item:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-blue);
}

.checklist-checkbox {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-muted);
}

.checklist-checkbox::before {
    content: "•";
}

.checklist-item.completed .checklist-checkbox {
    color: var(--status-done);
}

.checklist-item.completed .checklist-checkbox::before {
    content: "✓";
    font-size: 0.875rem;
    font-weight: 700;
}

.checklist-check {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.checklist-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-right: 0.75rem;
}

.checklist-item.completed .checklist-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-mvd-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--accent-yellow);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.checklist-must-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--accent-red);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.checklist-type-toggle {
    font-size: 0.55rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.checklist-type-toggle.must {
    background: rgba(248, 81, 73, 0.12);
    color: var(--accent-red);
    border-color: rgba(248, 81, 73, 0.25);
}

.checklist-type-toggle.mvd {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.checklist-type-toggle:hover {
    opacity: 0.9;
}

.habit-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--spacing-md);
}

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

.habit-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.habit-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Habit Actions */
.habit-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.habit-name:hover .habit-actions {
    opacity: 1;
}

.habit-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.habit-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.habit-action-btn.delete:hover {
    color: var(--accent-red);
}

/* Checklist Actions */
.checklist-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.checklist-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.625rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0;
}

.checklist-item:hover .checklist-action-btn {
    opacity: 1;
}

.checklist-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.checklist-action-btn.delete:hover {
    color: var(--accent-red);
}

.add-checklist-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-checklist-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Drag and Drop */
.habit-row[draggable="true"] {
    cursor: grab;
}

.habit-row.dragging {
    opacity: 0.4;
    cursor: grabbing !important;
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
}

.habit-row.drag-over-top {
    border-top: 2px solid var(--accent-blue) !important;
}

.habit-row.drag-over-bottom {
    border-bottom: 2px solid var(--accent-blue) !important;
}

.checklist-item[draggable="true"] {
    cursor: grab;
}

.checklist-item.dragging {
    opacity: 0.4;
    cursor: grabbing !important;
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
}

.checklist-item.drag-over-top {
    border-top: 2px solid var(--accent-blue) !important;
}

.checklist-item.drag-over-bottom {
    border-bottom: 2px solid var(--accent-blue) !important;
}

.inline-edit-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent-blue);
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    width: 100%;
    outline: none;
    padding: 0;
    margin: 0;
}

/* Lessons Carousel */
.lessons-carousel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: relative;
}

.carousel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.lesson-card {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    text-align: left;
}

.lesson-card .lesson-header {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-blue);
    margin: 0;
}

.lesson-card .lesson-explanation {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.lesson-card .lesson-example {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--accent-yellow);
    font-style: italic;
    margin: 0;
}

/* Reports Tab */
.reports-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    background: var(--bg-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
}

.report-tab {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.report-tab:hover {
    color: var(--text-primary);
}

.report-tab.active {
    background: var(--accent-blue);
    color: white;
}

.report-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
}

.report-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-muted);
}

.report-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.report-empty p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.report-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
}

.report-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

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

.report-card-trend {
    font-size: 0.875rem;
    margin-top: var(--spacing-sm);
}

.trend-up {
    color: var(--accent-green);
}

.trend-down {
    color: var(--accent-red);
}

.trend-neutral {
    color: var(--text-muted);
}

/* Yearly Goal Tracker */
.yearly-goal-tracker {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.goal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

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

.goal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.goal-progress-container {
    position: relative;
    height: 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-lg);
    overflow: visible;
}

.goal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-green) 100%);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.goal-progress-bar.progress-red {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.goal-progress-bar.progress-yellow {
    background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}

.goal-progress-bar.progress-green {
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-green) 100%);
}

.goal-target-line {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    background: var(--accent-yellow);
    border-radius: 2px;
    transform: translateX(-50%);
}

.goal-target-line::after {
    content: '85%';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--accent-yellow);
    white-space: nowrap;
}

.goal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

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

.goal-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.goal-stat-value.on-track {
    color: var(--accent-green);
}

.goal-stat-value.target {
    color: var(--accent-yellow);
}

.goal-stat-value.positive {
    color: var(--accent-green);
}

.goal-stat-value.gap {
    color: var(--accent-red);
}

.goal-stat-value.warning {
    color: var(--accent-yellow);
}

.goal-stat-value.danger {
    color: var(--accent-red);
}

.goal-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-motivation {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-style: italic;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
}

/* Report Sections */
.report-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
    margin-bottom: var(--spacing-xl);
}

.report-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.habit-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#habitsView .breakdown-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0;
    border-bottom: none;
}

.breakdown-label {
    width: 140px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.breakdown-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.breakdown-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.breakdown-value {
    width: 50px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Day Breakdown */
.day-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.day-breakdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.day-breakdown-label {
    width: 40px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.day-breakdown-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.day-breakdown-bar {
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.day-breakdown-value {
    width: 50px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Weekday vs Weekend Comparison */
.ww-comparison-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.ww-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ww-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 140px;
    flex-shrink: 0;
}

.ww-icon {
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.ww-text {
    display: flex;
    flex-direction: column;
}

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

.ww-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ww-bar-container {
    flex: 1;
    height: 24px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.ww-bar {
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease-out;
}

.ww-row:first-child .ww-bar {
    background: var(--accent-blue);
}

.ww-row:nth-child(2) .ww-bar {
    background: var(--accent-purple);
}

.ww-value {
    position: absolute;
    right: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    z-index: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.ww-insight {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ww-insight strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Effort Chart */
.effort-chart-container {
    width: 100%;
}

.effort-chart {
    display: flex;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: var(--spacing-xs) 0;
}

.effort-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.effort-bar.perfect {
    background: var(--accent-green);
}

.effort-bar.mvd {
    background: var(--accent-yellow);
}

.effort-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.effort-value-large {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Journal Prompts */
.journal-prompts {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.journal-prompts h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.journal-prompts ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.journal-prompts li {
    font-size: 0.875rem;
    color: var(--text-primary);
    padding-left: var(--spacing-md);
    position: relative;
}

.journal-prompts li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

/* Lessons Page */
.lessons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.lessons-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lessons-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lessons-grid {
    display: flex;
    flex-direction: column;
}

.lesson-grid-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

.lesson-grid-card:last-child {
    border-bottom: none;
}

.lesson-grid-card:hover {
    background: var(--bg-hover);
}

.lesson-grid-card .lesson-header {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-blue);
    margin: 0;
    padding-right: 60px;
}

.lesson-grid-card .lesson-explanation {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.lesson-grid-card .lesson-example {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--accent-yellow);
    font-style: italic;
    margin: 0;
}

.lesson-grid-card .lesson-actions {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.lesson-grid-card:hover .lesson-actions {
    opacity: 1;
}

.lesson-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.lesson-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.lesson-action-btn.delete:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.lessons-empty {
    text-align: center;
    padding: calc(var(--spacing-xl) * 2);
    color: var(--text-muted);
}

.lessons-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.lessons-empty p {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
}

/* ============================================
   Modals (Shared)
   ============================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   Forms (Habits)
   ============================================ */

.habit-settings,
.habit-quick-form,
.habit-edit-form {
    padding: var(--spacing-lg);
}

.danger-zone {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--accent-red);
}

.danger-zone h4 {
    color: var(--accent-red);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.danger-zone .text-muted {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

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

.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color var(--transition-fast);
}

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

.form-group input[type="color"] {
    width: 60px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-group.horizontal {
    flex-direction: row;
    gap: var(--spacing-lg);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.radio-label input {
    accent-color: var(--accent-blue);
}

.radio-label span {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.days-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.day-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.day-checkbox:hover {
    background: var(--bg-hover);
}

.day-checkbox input {
    accent-color: var(--accent-blue);
}

.day-checkbox span {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.target-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.target-inputs input {
    width: 80px;
}

.target-inputs span {
    color: var(--text-muted);
}

.checklist-editor {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.checklist-edit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.checklist-edit-item input[type="text"] {
    flex: 1;
}

.checklist-edit-item .mvd-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.checklist-edit-item .mvd-toggle input {
    accent-color: var(--status-mvd);
}

.checklist-edit-item .delete-item-btn {
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    font-size: 1rem;
}

/* Habit Settings List */
.habit-setting-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    transition: background var(--transition-fast);
}

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

.habit-setting-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.habit-setting-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.habit-setting-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.habit-setting-schedule {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.habit-setting-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.habit-edit-btn,
.habit-delete-btn {
    padding: var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.habit-edit-btn:hover {
    background: var(--bg-tertiary);
    color: var(--accent-blue);
}

.habit-delete-btn:hover {
    background: rgba(248, 81, 73, 0.1);
    color: var(--accent-red);
}

/* Checklist Editor (in habit edit modal) */
.checklist-editor-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.checklist-editor-item .checklist-item-text {
    flex: 1;
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.checklist-editor-item .checklist-item-text:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.checklist-editor-item .mvd-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.checklist-editor-item .mvd-toggle input {
    accent-color: var(--status-mvd);
}

.checklist-editor-item .remove-checklist-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.checklist-editor-item .remove-checklist-item:hover {
    background: rgba(248, 81, 73, 0.1);
    color: var(--accent-red);
}

/* Lesson Edit Form */
.lesson-edit-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.lesson-edit-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.lesson-edit-form input[type="text"],
.lesson-edit-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.lesson-edit-form input[type="text"]:focus,
.lesson-edit-form textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.lesson-edit-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* ============================================
   Buttons (Shared)
   ============================================ */

.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.btn-primary:hover {
    background: #4a9eff;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.btn-danger {
    background: transparent;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

.btn-danger:hover {
    background: var(--accent-red);
    color: var(--bg-primary);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
}

/* Legend */
.score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    opacity: 0.8;
}

.sidebar-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: auto;
    margin-bottom: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
    width: 100%;
    opacity: 1;
}

.sidebar-legend .legend-item {
    font-size: 0.85rem;
    margin-bottom: 8px;
    width: 100%;
}

.sidebar-legend .legend-dot {
    width: 12px;
    height: 12px;
}

.mobile-legend {
    display: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-dot.green {
    background: var(--accent-green);
}

.legend-dot.blue {
    background: var(--accent-blue);
}

.legend-dot.red {
    background: var(--accent-red);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 900px) {
    .world-time-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .global-header {
        padding: 0 1rem;
    }

    .main-nav-tabs {
        gap: 0.15rem;
        padding: 3px;
        border-radius: 10px;
    }

    .main-nav-tab {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .main-nav-tab .nav-label {
        display: none;
    }

    .year-progress {
        gap: 1rem;
    }

    .flip-label {
        font-size: 0.5rem;
    }

    .flip-label .left-text {
        display: none;
    }

    .flip-card {
        font-size: 1rem;
        padding: 0.3rem 0.25rem;
        min-width: 22px;
    }

    /* Habits responsive */
    .habits-tab-content {
        padding: var(--spacing-md);
        max-width: 100%;
    }

    .habits-layout {
        flex-direction: column;
    }

    .habits-left-sidebar {
        display: none;
    }

    .kpi-sidebar {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }

    .kpi-box {
        flex: 1;
        padding: var(--spacing-md);
    }

    .day-headers,
    .habit-main {
        grid-template-columns: 100px repeat(7, 1fr);
    }

    .day-header {
        font-size: 0.625rem;
        padding: var(--spacing-sm);
    }

    .habit-name {
        padding: var(--spacing-sm);
    }

    .habit-label {
        font-size: 0.8125rem;
    }

    .status-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .status-btn.mvd {
        font-size: 0.5rem;
    }

    .habit-schedule-badge {
        display: none;
    }

    .reports-tabs {
        flex-wrap: wrap;
    }

    .report-tab {
        flex: 1 1 calc(50% - var(--spacing-xs));
    }

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

    .sidebar-legend {
        display: none;
    }

    .mobile-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
        margin-top: var(--spacing-sm);
    }

    .lessons-carousel {
        display: none !important;
    }
}

@media (max-width: 700px) {
    .boards-container {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
    }

    .board-professional-core,
    .board-personal-core,
    .board-weekly-focus,
    .board-professional-meta,
    .board-personal-meta {
        grid-area: auto;
    }

    .task-board {
        min-height: 500px;
    }

    .archive-panel,
    .stats-panel,
    .time-analytics-panel,
    .settings-panel {
        width: 100%;
        right: -100%;
    }

    .user-menu {
        display: none;
    }

    .undo-toast {
        left: 1rem;
        right: 1rem;
        transform: translateX(0) translateY(100px);
        width: auto;
    }

    .undo-toast.visible {
        transform: translateX(0) translateY(0);
    }

    .undo-toast.hidden {
        transform: translateX(0) translateY(100px);
    }

    .restore-btn {
        opacity: 1;
    }

    .modal-content {
        width: 95%;
        margin: 20px auto;
        max-height: 90vh;
    }
}

@media (max-width: 480px) {

    .day-headers,
    .habit-main {
        grid-template-columns: 80px repeat(7, 1fr);
    }

    .habit-label {
        font-size: 0.75rem;
    }

    .habit-expand-icon {
        display: none;
    }

    .status-btn {
        width: 24px;
        height: 24px;
    }

    .report-card-value {
        font-size: 1.5rem;
    }

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

    .ww-label {
        width: 100px;
        gap: var(--spacing-sm);
    }

    .ww-icon {
        width: 24px;
        height: 24px;
        font-size: 1.2rem;
    }

    .ww-name {
        font-size: 0.8rem;
    }

    .ww-detail {
        font-size: 0.65rem;
    }
}

/* Habits Reports - Compact KPI & Vertical Bar Charts */
.report-kpi-compact {
    text-align: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
}

.kpi-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.report-charts-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-chart-section {
    background: linear-gradient(145deg, rgba(30, 35, 45, 0.8), rgba(20, 25, 35, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    backdrop-filter: blur(10px);
}

.report-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.vertical-bar-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 140px;
    gap: 0.75rem;
    padding: 0 0.5rem;
}

.vertical-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 80px;
}

.vertical-bar-wrapper {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.vertical-bar {
    width: 85%;
    min-height: 6px;
    border-radius: 6px 6px 2px 2px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(var(--bar-glow), 0.4);
    position: relative;
}

.vertical-bar:hover {
    transform: scaleY(1.05);
    box-shadow: 0 0 25px rgba(var(--bar-glow), 0.6);
}

.vertical-bar.day-bar {
    background: linear-gradient(to top, #0891b2, #22d3ee) !important;
    box-shadow: none;
}

.vertical-bar.day-bar:hover {
    box-shadow: none;
    opacity: 0.9;
}

.vertical-bar-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vertical-bar-value {
    font-size: 0.7rem;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* ==================== FOCUS TIMER WIDGET ==================== */
.focus-timer-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1.5rem;
}

.timer-display {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-ring-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 6;
}

.timer-ring-progress {
    fill: none;
    stroke: #22d3ee;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s ease;
}

.timer-ring-progress.break {
    stroke: #10b981;
}

.timer-time {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Inter', monospace;
    letter-spacing: 2px;
}

.timer-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.25rem;
}

.timer-label.break {
    color: #10b981;
}

.timer-controls {
    display: flex;
    gap: 1rem;
}

.timer-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.timer-btn.start {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: white;
}

.timer-btn.pause {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.timer-btn.stop {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.timer-btn:hover {
    transform: scale(1.1);
}

.timer-btn.hidden {
    display: none;
}

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

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

.view-stats-link {
    font-size: 0.75rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.view-stats-link:hover {
    text-decoration: underline;
}

/* ==================== FOCUS VIEW ==================== */
.focus-layout {
    height: 100%;
    padding: 1rem;
}

.focus-main-content {
    max-width: 800px;
    margin: 0 auto;
}

.focus-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.focus-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.focus-tab.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.focus-tab-content.hidden {
    display: none;
}

.focus-period-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.focus-period-tab {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.focus-period-tab.active {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    border-color: transparent;
    color: white;
}

.focus-stats-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.focus-stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}

.focus-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
}

.focus-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

.focus-chart-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.focus-chart-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.focus-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 0.5rem;
}

.focus-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.focus-bar-value {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.focus-bar-wrapper {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.focus-bar {
    width: 80%;
    min-height: 4px;
    background: linear-gradient(to top, #0891b2, #22d3ee);
    border-radius: 4px 4px 0 0;
}

.focus-bar-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
}

/* Focus Settings */
.focus-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setting-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.setting-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.setting-control input[type="range"] {
    width: 150px;
    accent-color: #22d3ee;
}

.setting-value {
    font-size: 0.85rem;
    color: var(--accent-primary);
    min-width: 60px;
    text-align: right;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

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

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

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

.toggle-switch input:checked+.toggle-slider {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    border-color: transparent;
}

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

/* ==================== COMPREHENSIVE MOBILE RESPONSIVE ==================== */

/* Mobile breakpoint: 768px and below */
@media (max-width: 768px) {

    /* Header adjustments */
    .app-header {
        padding: 0.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header-left {
        order: 1;
        flex: 0 0 auto;
    }

    .header-center {
        order: 3;
        flex: 1 0 100%;
        justify-content: center;
    }

    .header-right {
        order: 2;
        flex: 0 0 auto;
    }

    .main-nav-tabs {
        width: 100%;
        justify-content: center;
        gap: 0.25rem;
    }

    .main-nav-tab {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .year-progress-container {
        display: none;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
    }

    .sign-out-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    /* Home Layout - Stack vertically */
    .home-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 100px);
    }

    .home-main {
        flex: 1;
        padding: 1rem;
    }

    .home-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem;
    }

    #timezoneList {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        flex: 1;
    }

    .timezone-item {
        flex: 0 0 calc(50% - 0.25rem);
        padding: 0.5rem;
        border-bottom: none;
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm);
    }

    .sidebar-focus-btn {
        flex: 0 0 100%;
        margin-top: 0.5rem;
    }

    /* Timer Widget - Smaller on mobile */
    .focus-timer-widget {
        gap: 1rem;
    }

    .timer-display {
        width: 160px;
        height: 160px;
    }

    .timer-time {
        font-size: 2rem;
    }

    .timer-btn {
        width: 44px;
        height: 44px;
    }

    /* Tasks Layout */
    .tasks-layout {
        flex-direction: column;
    }

    .tasks-main-content {
        padding: 0.75rem;
    }

    .tasks-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
        overflow-x: auto;
    }

    .boards-container {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        gap: 1rem;
    }

    .board-professional-core,
    .board-personal-core,
    .board-weekly-focus,
    .board-professional-meta,
    .board-personal-meta {
        grid-area: auto;
    }

    .task-board {
        min-height: auto;
    }

    .board-header {
        padding: 0.75rem;
    }

    .board-title {
        font-size: 0.9rem;
    }

    .task-item {
        padding: 0.75rem;
    }

    .task-text {
        font-size: 0.8125rem;
    }

    /* Habits Layout */
    .habits-layout {
        flex-direction: column;
    }

    .habits-left-sidebar {
        display: none;
    }

    .habits-main-content {
        padding: 0.75rem;
    }

    .habits-sidebar {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .week-nav-btn {
        width: 28px;
        height: 28px;
    }

    /* Habits Grid - Scrollable */
    .habits-grid-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .day-headers,
    .habit-main {
        min-width: 500px;
    }

    .day-cell {
        font-size: 0.65rem;
        padding: 0.25rem;
    }

    .status-btn {
        width: 28px;
        height: 28px;
    }

    /* Focus View */
    .focus-layout {
        padding: 0.75rem;
    }

    .focus-main-content {
        max-width: 100%;
    }

    .focus-tabs {
        justify-content: center;
    }

    .focus-period-tabs {
        justify-content: center;
    }

    .focus-period-tab {
        padding: 0.4rem 0.75rem;
        font-size: 0.7rem;
    }

    .focus-stats-summary {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .focus-stat-card {
        padding: 0.75rem 0.5rem;
    }

    .focus-stat-value {
        font-size: 1.2rem;
    }

    .focus-stat-label {
        font-size: 0.6rem;
    }

    .focus-chart {
        height: 120px;
    }

    /* Settings */
    .setting-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .setting-control {
        width: 100%;
    }

    .setting-control input[type="range"] {
        width: 100%;
        flex: 1;
    }

    /* Reports */
    .reports-tabs {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .report-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }

    .report-charts-row {
        gap: 0.75rem;
    }

    .vertical-bar-chart {
        height: 100px;
    }

    .vertical-bar-wrapper {
        height: 70px;
    }

    .vertical-bar-label {
        font-size: 0.55rem;
    }

    .vertical-bar-value {
        font-size: 0.6rem;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        margin: 10px auto;
        max-height: 95vh;
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }
}

/* Small phone breakpoint: 480px and below */
@media (max-width: 480px) {
    .app-header {
        padding: 0.25rem 0.5rem;
    }

    .main-nav-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }

    .timer-display {
        width: 140px;
        height: 140px;
    }

    .timer-time {
        font-size: 1.75rem;
    }

    .timer-label {
        font-size: 0.6rem;
    }

    .timer-btn {
        width: 40px;
        height: 40px;
    }

    .timer-btn svg {
        width: 18px;
        height: 18px;
    }

    .sessions-today {
        font-size: 0.75rem;
    }

    .view-stats-link {
        font-size: 0.7rem;
    }

    .timezone-item {
        flex: 0 0 100%;
    }

    .focus-stats-summary {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .focus-stat-value {
        font-size: 1rem;
    }

    .board-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .countdown-container {
        font-size: 0.65rem;
    }

    .countdown-stat .value {
        font-size: 1rem;
    }
}

/* Landscape phone orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .home-layout {
        flex-direction: row;
    }

    .home-main {
        flex: 1;
    }

    .home-sidebar {
        width: 180px;
        flex-direction: column;
        border-top: none;
        border-left: 1px solid var(--border-color);
    }

    .timer-display {
        width: 120px;
        height: 120px;
    }

    .timer-time {
        font-size: 1.5rem;
    }

    .focus-timer-widget {
        flex-direction: row;
        gap: 1.5rem;
    }

    .timer-stats {
        text-align: left;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {

    .task-item,
    .habit-row,
    .status-btn,
    .timer-btn,
    .main-nav-tab,
    .focus-tab,
    .focus-period-tab,
    .report-tab {
        min-height: 44px;
    }

    .status-btn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Disable hover effects on touch devices */
    .timer-btn:hover {
        transform: none;
    }

    .vertical-bar:hover {
        transform: none;
    }
}

/* ==================== GYM VIEW ==================== */
.gym-layout {
    display: flex;
    height: calc(100vh - 60px);
    width: 100%;
    overflow: hidden;
}

.gym-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: var(--bg-primary);
}

.gym-sidebar {
    width: 60px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Gym Empty State */
.gym-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    color: var(--text-secondary);
}

.gym-empty-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    filter: grayscale(30%);
}

.gym-empty-state h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.gym-empty-state p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.gym-empty-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.gym-empty-actions .gym-btn {
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
}

/* Workout Groups Container */
.workout-groups-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: 100%;
}

/* Workout Group */
.workout-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.workout-group:hover {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.workout-group.dragging {
    opacity: 0.5;
    border-color: #00d4ff;
}

.workout-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-bottom: 1px solid var(--border-color);
}

.workout-group-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.workout-group-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.workout-group:hover .workout-group-actions {
    opacity: 1;
}

.group-action-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.group-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.group-action-btn.add-exercise-btn:hover {
    border-color: #3fb950;
    color: #3fb950;
    background: rgba(63, 185, 80, 0.1);
}

.group-action-btn.delete-group-btn:hover {
    border-color: #f85149;
    color: #f85149;
    background: rgba(248, 81, 73, 0.1);
}

/* Workout Exercises List */
.workout-exercises-list {
    padding: 0.75rem;
    min-height: 60px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.workout-exercise {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.workout-exercise:hover {
    border-color: var(--border-color);
    background: var(--bg-hover);
    transform: translateX(2px);
}

.workout-exercise.dragging {
    opacity: 0.5;
    border-color: #00d4ff;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.exercise-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: 1.1rem;
    user-select: none;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.workout-exercise:hover .exercise-drag-handle {
    opacity: 1;
}

.exercise-drag-handle:active {
    cursor: grabbing;
}

.exercise-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.exercise-info .exercise-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.exercise-details {
    font-size: 0.85rem;
    color: #00d4ff;
    font-weight: 500;
}

.exercise-notes {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.exercise-actions {
    display: flex;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.workout-exercise:hover .exercise-actions {
    opacity: 1;
}

.exercise-action-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.exercise-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.exercise-action-btn.delete-exercise-btn:hover {
    border-color: #f85149;
    color: #f85149;
    background: rgba(248, 81, 73, 0.1);
}

/* ===== GYM MODALS ===== */
.gym-modal {
    max-width: 480px;
    width: 100%;
}

.gym-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gym-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.gym-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gym-input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.gym-input-group input {
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.gym-input-group input:focus {
    outline: none;
    border-color: var(--cyan, #00d4ff);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

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

.gym-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.gym-btn {
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.gym-btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #000;
}

.gym-btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00aadd);
    transform: translateY(-1px);
}

.gym-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.gym-btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

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

/* ===== GYM DRAG AND DROP ENHANCEMENTS ===== */
.workout-group.drag-over {
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.workout-exercise.drag-over {
    border-top: 2px solid #00d4ff;
}

.workout-exercises-list.drag-over {
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-md);
}

/* Smooth drag placeholder */
.drag-placeholder {
    height: 60px;
    background: rgba(0, 212, 255, 0.1);
    border: 2px dashed #00d4ff;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

/* Dragging state improvements */
.workout-exercise.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.workout-group.dragging {
    opacity: 0.4;
    transform: scale(0.98);
}

/* Exercise count badge */
.workout-group-title .exercise-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* Gym Responsive */
@media (max-width: 768px) {
    .gym-layout {
        flex-direction: column;
    }

    .gym-sidebar {
        width: 100%;
        height: 50px;
        flex-direction: row;
        justify-content: center;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: 2;
    }

    .exercise-actions {
        opacity: 1;
    }

    .input-row {
        grid-template-columns: 1fr;
    }
}

/* ==================== DIET VIEW - Recipe Board ==================== */
.recipe-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.recipe-column {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

/* Column Header Colors */
.recipe-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.recipe-column-header.meals-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-top: 3px solid #3b82f6;
}

.recipe-column-header.curries-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-top: 3px solid #ef4444;
}

.recipe-column-header.sides-header {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
    border-top: 3px solid #a855f7;
}

.recipe-column-header.trading-daily-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border-top: 3px solid #22c55e;
}

.recipe-column-header.trading-weekly-header {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.05));
    border-top: 3px solid #eab308;
}

.recipe-column-header.trading-quarterly-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-top: 3px solid #ef4444;
}

.recipe-column-header.trading-monthly-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-top: 3px solid #3b82f6;
}

.recipe-column-header.trading-checklist-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border-top: 3px solid #fff;
}

/* Trading Board Layout */
.trading-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.trading-col-split {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.trading-col-split .recipe-column {
    flex: 1;
    min-height: 0;
}

/* Jay Board Layout */
.jay-board {
    display: grid;
    grid-template-columns: minmax(340px, 0.82fr) minmax(420px, 1.18fr);
    gap: 1rem;
    padding: 1.25rem;
    height: calc(100vh - 108px);
    overflow: hidden;
}

.jay-lists-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

.jay-lists-panel .recipe-column {
    flex: 1;
    min-height: 0;
}

.jay-lists-panel .recipe-column-header {
    padding: 0.75rem 0.85rem;
}

.jay-lists-panel .recipe-list {
    padding: 0.45rem;
    gap: 0.3rem;
}

.jay-lists-panel .recipe-card {
    padding: 0.45rem 0.55rem;
}

.jay-growth-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.jay-growth-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    padding: 0.65rem 0.75rem 0;
}

.jay-growth-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.65rem;
}

.jay-growth-stat span,
.jay-growth-stat small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.jay-growth-stat strong {
    display: block;
    margin: 0.15rem 0;
    font-size: 1.18rem;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.jay-growth-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding: 0.55rem 0.75rem 0;
}

.jay-growth-view-btn {
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.jay-growth-view-btn.active {
    color: var(--text-primary);
    border-color: rgba(88, 166, 255, 0.45);
    background: rgba(88, 166, 255, 0.14);
}

.jay-growth-chart-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.jay-growth-chart-toolbar {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 1rem 0;
}

.jay-growth-metric-btn {
    min-width: 84px;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.jay-growth-metric-btn.active {
    color: var(--text-primary);
    border-color: rgba(88, 166, 255, 0.4);
    background: rgba(88, 166, 255, 0.12);
}

.jay-growth-chart-wrap {
    flex: 1;
    min-height: 260px;
    padding: 1rem;
}

.jay-growth-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.jay-growth-data-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(340px, 1.28fr);
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    padding: 1rem;
}

.jay-growth-data-pane {
    min-width: 0;
    min-height: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.jay-growth-add-pane {
    align-self: start;
}

.jay-growth-table-pane {
    display: flex;
    flex-direction: column;
}

.jay-growth-data-title {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.jay-growth-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.85rem;
}

.jay-growth-form input {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
}

.jay-growth-form input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.jay-growth-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.35rem 0.85rem 0.85rem;
}

.jay-growth-row {
    display: grid;
    grid-template-columns: 112px 1fr 1fr 24px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.78rem;
}

.jay-growth-row-head {
    position: sticky;
    top: -0.35rem;
    z-index: 1;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.jay-growth-row:last-child {
    border-bottom: none;
}

.jay-growth-row-date {
    color: var(--text-secondary);
    font-weight: 600;
}

.jay-growth-row-date small {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.jay-growth-row-metric {
    color: var(--text-muted);
}

.jay-growth-row-metric > span {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.jay-growth-row-metric strong {
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
}

.jay-growth-delete {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.jay-growth-delete:hover {
    color: var(--accent-red);
    background: var(--bg-input);
}

.jay-growth-empty {
    padding: 1rem 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Jay Color-coded Headers */
.recipe-column-header.jay-daily-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border-top: 3px solid #22c55e;
}

.recipe-column-header.jay-skills-header {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
    border-top: 3px solid #a855f7;
}

.recipe-column-header.jay-foods-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
    border-top: 3px solid #f97316;
}

/* Checklist Styling */
.recipe-card.checklist-completed .recipe-card-name {
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--text-muted);
}

.recipe-card.checklist-completed .recipe-card-emoji {
    opacity: 0.6;
    filter: grayscale(1);
}

.checklist-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    margin-right: 0.5rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

.checklist-checkbox::after {
    content: '';
    width: 6px;
    height: 11px;
    border: solid transparent;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.recipe-card.checklist-completed .checklist-checkbox {
    background: #16a34a;
    border-color: #16a34a;
}

.recipe-card.checklist-completed .checklist-checkbox::after {
    border-color: white;
}

/* Hover effect for checkbox to indicate interactivity */
.recipe-card.checklist-item {
    cursor: pointer;
}

.recipe-card.checklist-item:hover .checklist-checkbox {
    border-color: var(--text-muted);
}

.recipe-col-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-col-emoji {
    font-size: 1.2rem;
}

.recipe-col-title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.recipe-count {
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.recipe-add-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.recipe-add-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Recipe List (scrollable) */
.recipe-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 80px;
}

.recipe-list::-webkit-scrollbar {
    width: 4px;
}

.recipe-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* Empty State */
.recipe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    gap: 0.5rem;
    flex: 1;
}

.recipe-empty-icon {
    font-size: 1.8rem;
    opacity: 0.5;
}

/* Recipe Card */
.recipe-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.2s ease;
    position: relative;
}

.recipe-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.recipe-card:active {
    cursor: grabbing;
}

.recipe-card-emoji {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.recipe-card-name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Comment button on recipe card */
.recipe-comment-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
}

.recipe-card:hover .recipe-comment-btn {
    opacity: 1;
}

.recipe-comment-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Always show if has comments */
.recipe-comment-btn.has-comments {
    opacity: 1;
    color: var(--accent-blue);
    text-shadow: 0 0 6px rgba(88, 166, 255, 0.4);
}

/* Recipe action buttons (edit, delete) */
.recipe-actions {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.recipe-card:hover .recipe-actions {
    opacity: 1;
}

.recipe-action-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.recipe-action-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.recipe-action-btn.delete-recipe:hover {
    color: var(--accent-red);
}

/* Drag and Drop States */
.recipe-card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.recipe-list.drag-over {
    background: rgba(88, 166, 255, 0.05);
    border: 1px dashed rgba(88, 166, 255, 0.3);
    border-radius: var(--radius-md);
}

.recipe-card.drag-over-top {
    border-top: 2px solid var(--accent-blue);
}

.recipe-card.drag-over-bottom {
    border-bottom: 2px solid var(--accent-blue);
}

/* Recipe Modal */
.recipe-modal-content {
    max-width: 480px;
}

.recipe-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.recipe-input-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.recipe-input-group input[type="text"],
.recipe-input-group select {
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.recipe-input-group input[type="text"]:focus,
.recipe-input-group select:focus {
    border-color: var(--accent-blue);
}

.recipe-input-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Emoji Picker */
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.3rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    max-height: 160px;
    overflow-y: auto;
}

.emoji-picker-item {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    background: transparent;
    transition: all 0.15s ease;
}

.emoji-picker-item:hover {
    background: var(--bg-hover);
    transform: scale(1.15);
}

.emoji-picker-item.selected {
    border-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.15);
}

.recipe-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.recipe-btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

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

.recipe-btn-primary:hover {
    opacity: 0.9;
}

.recipe-btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.recipe-btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Recipe Board Responsive */
@media (max-width: 1200px) {
    .recipe-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .recipe-board {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
    }

    .recipe-column {
        max-height: 400px;
    }

    .gym-layout {
        flex-direction: column;
    }

    .gym-sidebar {
        width: 100%;
        height: 50px;
        flex-direction: row;
        justify-content: center;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: 2;
    }

    .workout-schedule {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }

    .schedule-day {
        padding: 0.5rem 0.25rem;
    }

    .day-name {
        font-size: 0.6rem;
    }

    .day-workout {
        font-size: 0.7rem;
    }
}

/* ==================== SPINNING WHEEL REWARDS ==================== */
/* ==================== SPINNING WHEEL REWARDS ==================== */
/* ============================================
   REWARDS / SPIN WHEEL - Vegas Style
   ============================================ */

/* Vegas Color Variables */
.rewards-layout {
    --vegas-gold: #ffd700;
    --vegas-red: #dc143c;
    --vegas-purple: #8b008b;
    --neon-pink: #ff1493;
    --neon-blue: #00ffff;
    --neon-green: #39ff14;
    --neon-orange: #ff6600;
}

.rewards-layout {
    height: 100%;
    display: flex;
    overflow: hidden;
    background: var(--bg-primary);
}

.rewards-main-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Rewards Sidebar - hidden, replaced by inline settings button */
.rewards-sidebar {
    display: none;
}

.rewards-settings-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.rewards-settings-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.rewards-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.75rem 0.25rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    width: 100%;
}

.rewards-tab:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--vegas-gold);
}

.rewards-tab.active {
    background: rgba(255, 215, 0, 0.15);
    color: var(--vegas-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.tab-icon {
    font-size: 1.25rem;
}

/* Main Content Area */
.rewards-tab-content {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
}

.rewards-tab-content.hidden {
    display: none;
}

.rewards-wheel-layout {
    display: flex;
    gap: 2rem;
    width: 100%;
    align-items: flex-start;
}

.rewards-wheel-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.rewards-wheel-right {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1rem;
}

.rewards-wheel-right .wheel-status-banner {
    width: 100%;
}

.rewards-wheel-right .progress-section {
    margin-bottom: 0;
}

/* ============================================
   Progress Ring Section - Clean Professional Style
   ============================================ */
.progress-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.progress-ring-container {
    position: relative;
    width: 160px;
    height: 160px;
}

.progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.progress-ring-fill {
    fill: none;
    stroke: #3fb950;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 534;
    stroke-dashoffset: 534;
    transition: stroke-dashoffset 0.8s ease-out, stroke 0.4s ease;
}

.progress-ring-fill.pulsing {
    /* Subtle pulse only when close to goal */
    animation: ring-pulse-subtle 2s ease-in-out infinite;
}

@keyframes ring-pulse-subtle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.progress-percentage {
    font-size: 2.25rem;
    font-weight: 700;
    color: #3fb950;
    line-height: 1;
    transition: color 0.4s ease;
}

.progress-percentage.goal-met {
    color: #3fb950;
}

.progress-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.progress-target {
    font-size: 0.65rem;
    color: #f59e0b;
    font-weight: 500;
}

/* ============================================
   Status Banner
   ============================================ */
.wheel-status-banner {
    width: 100%;
    max-width: 400px;
}

.status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-banner.locked {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(20, 20, 40, 0.8));
}

.status-banner.needs-progress {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(20, 20, 40, 0.8));
}

.status-banner.unlocked {
    border-color: rgba(57, 255, 20, 0.4);
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(20, 20, 40, 0.8));
    animation: unlocked-glow 2s ease-in-out infinite;
}

@keyframes unlocked-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
    }

    50% {
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.4);
    }
}

.status-banner.claimed {
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(20, 20, 40, 0.8));
}

.status-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.status-content {
    flex: 1;
}

.status-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.status-message,
.status-countdown {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-reward {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.25rem 0;
}

.goal-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.goal-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================
   Vegas Wheel Stage
   ============================================ */
.wheel-stage {
    position: relative;
    padding: 20px;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.wheel-stage.locked {
    opacity: 0.6;
    filter: grayscale(30%);
}

/* Animated Lights Border */
.wheel-lights {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
}

.wheel-lights .light {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--vegas-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--vegas-gold), 0 0 20px var(--vegas-gold);
    animation: light-blink 1s ease-in-out infinite;
}

/* Position lights around the circle */
.wheel-lights .light:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.wheel-lights .light:nth-child(2) {
    top: 3.8%;
    left: 75%;
    transform: translate(-50%, -50%);
    animation-delay: 0.08s;
}

.wheel-lights .light:nth-child(3) {
    top: 15%;
    left: 93%;
    transform: translate(-50%, -50%);
    animation-delay: 0.16s;
}

.wheel-lights .light:nth-child(4) {
    top: 33%;
    left: 100%;
    transform: translate(-50%, -50%);
    animation-delay: 0.24s;
}

.wheel-lights .light:nth-child(5) {
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    animation-delay: 0.32s;
}

.wheel-lights .light:nth-child(6) {
    top: 67%;
    left: 100%;
    transform: translate(-50%, -50%);
    animation-delay: 0.4s;
}

.wheel-lights .light:nth-child(7) {
    top: 85%;
    left: 93%;
    transform: translate(-50%, -50%);
    animation-delay: 0.48s;
}

.wheel-lights .light:nth-child(8) {
    top: 96.2%;
    left: 75%;
    transform: translate(-50%, -50%);
    animation-delay: 0.56s;
}

.wheel-lights .light:nth-child(9) {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.64s;
}

.wheel-lights .light:nth-child(10) {
    top: 96.2%;
    left: 25%;
    transform: translate(-50%, -50%);
    animation-delay: 0.72s;
}

.wheel-lights .light:nth-child(11) {
    top: 85%;
    left: 7%;
    transform: translate(-50%, -50%);
    animation-delay: 0.8s;
}

.wheel-lights .light:nth-child(12) {
    top: 67%;
    left: 0;
    transform: translate(-50%, -50%);
    animation-delay: 0.88s;
}

.wheel-lights .light:nth-child(13) {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    animation-delay: 0.96s;
}

.wheel-lights .light:nth-child(14) {
    top: 33%;
    left: 0;
    transform: translate(-50%, -50%);
    animation-delay: 1.04s;
}

.wheel-lights .light:nth-child(15) {
    top: 15%;
    left: 7%;
    transform: translate(-50%, -50%);
    animation-delay: 1.12s;
}

.wheel-lights .light:nth-child(16) {
    top: 3.8%;
    left: 25%;
    transform: translate(-50%, -50%);
    animation-delay: 1.2s;
}

/* Extra lights for more density */
.wheel-lights .light:nth-child(n+17) {
    display: none;
}

@keyframes light-blink {

    0%,
    100% {
        background: var(--vegas-gold);
        box-shadow: 0 0 10px var(--vegas-gold), 0 0 20px var(--vegas-gold);
    }

    50% {
        background: #fff8dc;
        box-shadow: 0 0 15px #fff, 0 0 30px var(--vegas-gold);
    }
}

.wheel-stage.spinning-fast .wheel-lights .light {
    animation-duration: 0.2s;
}

/* Wheel Frame */
.wheel-frame {
    position: relative;
    padding: 12px;
    background: linear-gradient(145deg, #3d3d5c, #1a1a2e);
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.3),
        0 10px 40px rgba(0, 0, 0, 0.6),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* Wheel Pointer */
.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 35px solid var(--vegas-gold);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.wheel-pointer::after {
    content: '';
    position: absolute;
    top: -35px;
    left: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 28px solid #fff8dc;
}

/* The Wheel */
.wheel {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(255, 215, 0, 0.4);
    border: 4px solid #2d2d4a;
}

.wheel.wheel-locked {
    filter: saturate(0.5);
}

/* Text Layer */
.wheel-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wheel-segment-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 30px;
    transform-origin: 0% 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Center Cap */
.wheel-center-cap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border-radius: 50%;
    border: 3px solid #fff8dc;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 2px 5px rgba(255, 255, 255, 0.5);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ============================================
   Spin Button
   ============================================ */
.spin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.spin-btn .btn-icon {
    font-size: 1.3rem;
}

.spin-btn .btn-text {
    font-family: inherit;
}

/* Locked State */
.spin-btn.locked {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #6b7280;
    box-shadow: 0 4px 0 #111827;
    cursor: not-allowed;
}

/* Unlocked State */
.spin-btn.unlocked {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #1a1a2e;
    box-shadow:
        0 4px 0 #b45309,
        0 0 30px rgba(255, 215, 0, 0.4);
    animation: btn-glow 2s ease-in-out infinite;
}

@keyframes btn-glow {

    0%,
    100% {
        box-shadow: 0 4px 0 #b45309, 0 0 20px rgba(255, 215, 0, 0.3);
    }

    50% {
        box-shadow: 0 4px 0 #b45309, 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

.spin-btn.unlocked::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.spin-btn.unlocked:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 6px 0 #b45309,
        0 0 50px rgba(255, 215, 0, 0.5);
}

.spin-btn.unlocked:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b45309;
}

/* Claimed State */
.spin-btn.claimed {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 0 #15803d;
    cursor: default;
}

/* ============================================
   Spin History
   ============================================ */
.spin-history {
    width: 100%;
    max-width: 400px;
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-top: 1rem;
}

.spin-history h3 {
    font-size: 0.9rem;
    color: var(--vegas-gold);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.history-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
}

.history-empty .empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.history-empty p {
    font-size: 0.85rem;
    margin: 0;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: background 0.2s ease;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.history-item .history-reward {
    font-weight: 600;
    font-size: 0.9rem;
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-rate {
    background: rgba(57, 255, 20, 0.15);
    color: var(--neon-green);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

/* ============================================
   Settings Tab
   ============================================ */
#rewardsSettingsTab .rewards-settings {
    width: 100%;
    max-width: 500px;
}

.rewards-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-title {
    font-size: 1.25rem;
    color: var(--vegas-gold);
    text-align: center;
    margin-bottom: 0.5rem;
}

.add-reward-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-lg);
}

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

.add-reward-form input[type="text"] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.add-reward-form input[type="text"]:focus {
    outline: none;
    border-color: var(--vegas-gold);
}

.add-reward-form input[type="text"]::placeholder {
    color: var(--text-muted);
}

.add-reward-form button {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--vegas-gold), #f59e0b);
    border: none;
    border-radius: var(--radius-md);
    color: #1a1a2e;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reward-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.color-palette {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.15);
}

.color-option.selected {
    border-color: white;
    box-shadow: 0 0 0 2px var(--vegas-gold), 0 0 15px currentColor;
    transform: scale(1.1);
}

.rewards-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.reward-item:hover {
    background: rgba(30, 30, 50, 0.8);
    border-color: rgba(255, 215, 0, 0.2);
}

.reward-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

.reward-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.reward-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Confetti Animations
   ============================================ */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: 0;
    animation: confetti-fall 3s ease-out forwards;
    z-index: 10000;
    pointer-events: none;
}

.confetti.golden {
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, #ffd700, #fff8dc) !important;
    box-shadow: 0 0 10px #ffd700;
}

/* ============================================
   Win Celebration Modal
   ============================================ */
.win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.win-overlay.visible {
    opacity: 1;
}

.win-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(145deg, #1a1a2e, #2d2d4a);
    border: 2px solid var(--vegas-gold);
    border-radius: var(--radius-lg);
    padding: 0;
    text-align: center;
    z-index: 10002;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    min-width: 320px;
}

.win-celebration.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.win-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--vegas-gold),
            var(--neon-pink),
            var(--neon-blue),
            var(--neon-green),
            var(--vegas-gold));
    background-size: 200% 100%;
    animation: sparkle-move 2s linear infinite;
}

@keyframes sparkle-move {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

.win-content {
    padding: 2rem 2.5rem;
}

.win-header {
    font-size: 0.9rem;
    color: var(--vegas-gold);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.win-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.win-reward-container {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.win-reward {
    font-size: 1.75rem;
    font-weight: 700;
}

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

.win-close {
    padding: 0.875rem 2.5rem;
    background: linear-gradient(135deg, var(--vegas-gold), #f59e0b);
    border: none;
    border-radius: 50px;
    color: #1a1a2e;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.win-close:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 600px) {
    .rewards-main-content {
        padding: 1rem 0.5rem;
    }

    .progress-ring-container {
        width: 130px;
        height: 130px;
    }

    .progress-percentage {
        font-size: 2rem;
    }

    .wheel-lights {
        width: 280px;
        height: 280px;
    }

    .wheel-lights .light {
        width: 8px;
        height: 8px;
    }

    .wheel {
        width: 230px;
        height: 230px;
    }

    .wheel-segment-text {
        font-size: 0.65rem;
        padding-right: 10px;
    }

    .wheel-center-cap {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .wheel-pointer {
        border-left-width: 15px;
        border-right-width: 15px;
        border-top-width: 28px;
    }

    .spin-btn {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .spin-history {
        margin: 0.5rem;
    }

    .status-banner {
        padding: 0.75rem 1rem;
    }

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

    .win-celebration {
        min-width: 280px;
        margin: 0 1rem;
    }

    .win-content {
        padding: 1.5rem;
    }

    .win-title {
        font-size: 1.5rem;
    }

    .win-reward {
        font-size: 1.25rem;
    }

    .rewards-wheel-layout {
        flex-direction: column;
        align-items: center;
    }

    .rewards-wheel-right {
        width: 100%;
    }

    .rewards-settings-toggle {
        top: 0.5rem;
        right: 0.5rem;
    }
}

@media (max-width: 400px) {
    .wheel-lights {
        width: 240px;
        height: 240px;
    }

    .wheel {
        width: 200px;
        height: 200px;
    }

    .wheel-frame {
        padding: 8px;
    }
}

/* ========================================
   Lessons View
   ======================================== */
.lessons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 60px);
    overflow: hidden;
    width: 100%;
}

.lessons-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lessons-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    flex-shrink: 0;
}

.lessons-card canvas {
    flex: 1;
    min-height: 0;
}

/* ========================================
   Goals View
   ======================================== */
.goals-boards-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.goals-board {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

.goals-board-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.goals-board-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin: 0;
}

.goals-year {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Board split into two halves */
.goals-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    min-height: 0;
    overflow: hidden;
}

.goals-divider {
    height: 3px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
    flex-shrink: 0;
    opacity: 0.6;
}

.goals-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.375rem;
    flex-shrink: 0;
}

.goals-section-header h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    margin: 0;
}

.goals-count,
.priorities-count {
    display: none;
}

.goals-month-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
}

/* Goal form */
.goals-form {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.375rem;
    flex-shrink: 0;
}

.goals-form input[type="text"] {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: var(--transition);
    min-width: 0;
}

.goals-form input[type="text"]::placeholder {
    color: var(--text-muted);
}

.goals-form input[type="text"]:focus {
    outline: none;
    border-color: var(--border-color);
    background: var(--bg-hover);
}

/* Color dot button */
.goals-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    padding: 0;
}

.goals-color-dot:hover {
    transform: scale(1.1);
    border-color: var(--text-secondary);
}

/* Add button */
.goals-add-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent-purple);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: var(--transition);
    padding: 0;
}

.goals-add-btn.priorities {
    background: var(--accent-blue);
}

.goals-add-btn.yearly-pro {
    background: var(--accent-purple);
}

.goals-add-btn.yearly-per {
    background: var(--accent-blue);
}

.goals-add-btn.goals-add-btn-ai {
    background: #06b6d4;
}

.goals-add-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Goals list */
.goals-list {
    flex: 1;
    list-style: none;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.goals-list::-webkit-scrollbar {
    width: 3px;
}

.goals-list::-webkit-scrollbar-track {
    background: transparent;
}

.goals-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* Goal / Priority item */
.goals-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    margin-bottom: 0.2rem;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: grab;
}

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

.goals-item:hover .goals-delete-btn {
    opacity: 1;
}

.goals-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.goals-item.drag-over {
    border: 1px dashed var(--accent-blue);
}

.goals-item.completed .goals-item-text {
    text-decoration: line-through;
    opacity: 0.45;
}

.goals-item-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
}

.goals-item-text .goals-inline-edit {
    background: var(--bg-input);
    border: 1px solid var(--accent-blue);
    color: var(--text-primary);
    font-size: 0.9375rem;
    text-align: center;
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
    line-height: 1.4;
}

.goals-item.drag-insert-before {
    border-top: 2px solid var(--accent-blue);
}

.goals-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.2rem;
    opacity: 0;
    transition: var(--transition);
    flex-shrink: 0;
    line-height: 1;
}

.goals-delete-btn:hover {
    color: var(--accent-red);
}

.goals-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

/* Drop zone highlight */
.goals-list.drag-over {
    background: rgba(88, 166, 255, 0.05);
    border-radius: var(--radius-sm);
}

/* Color picker popup */
.goals-color-picker {
    position: fixed;
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.goals-color-option {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.goals-color-option:hover {
    transform: scale(1.15);
}

.goals-color-option.selected {
    border-color: white;
    transform: scale(1.1);
}

/* Yearly goals board */
.goals-board-yearly {
    border-color: var(--accent-purple);
}

.goals-board-yearly .goals-board-header {
    border-bottom-color: var(--accent-purple);
}

.goals-yearly-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-purple);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
}

/* ========================================
   Goal Tasks Modal (Subtasks Popup)
   ======================================== */
.goal-tasks-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.goal-tasks-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.goal-tasks-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.goal-complete-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.goal-complete-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-green);
}

.goal-tasks-header h3 {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.goal-tasks-header h3.completed-title {
    text-decoration: line-through;
    opacity: 0.45;
}

.close-goal-tasks {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1.75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.close-goal-tasks:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.goal-tasks-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
    min-height: 200px;
}

.goal-tasks-list::-webkit-scrollbar { width: 4px; }
.goal-tasks-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.goal-subtask-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.25rem;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.goal-subtask-item:hover { background: var(--bg-hover); }
.goal-subtask-item:hover .goal-subtask-delete { opacity: 1; }

.goal-subtask-checkbox {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent-green);
}

.goal-subtask-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.goal-subtask-item.completed .goal-subtask-text {
    text-decoration: line-through;
    opacity: 0.45;
}

.goal-subtask-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0 0.2rem;
}

.goal-subtask-delete:hover { color: var(--accent-red); }

.goal-subtask-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.25rem;
    margin-top: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0.25rem;
}

.goal-subtask-header:first-child { margin-top: 0; }
.goal-subtask-header:hover .goal-subtask-delete { opacity: 1; }

.goal-subtask-header-text {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.goal-subtask-inline-edit {
    background: var(--bg-input);
    border: 1px solid var(--accent-blue);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
}

.goal-tasks-actions {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.goal-task-form {
    display: flex;
    gap: 0.5rem;
}

.goal-task-form input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

.goal-task-form input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.goal-task-add-btn,
.goal-task-header-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.goal-task-add-btn {
    background: var(--accent-purple);
    color: white;
}

.goal-task-header-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.goal-task-add-btn:hover,
.goal-task-header-btn:hover { opacity: 0.85; }

.goal-tasks-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 2rem 0;
}

.goals-item .goal-has-subtasks {
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Responsive - tablet */
@media (max-width: 1024px) {
    .goals-boards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive - mobile */
@media (max-width: 700px) {
    .goals-boards-container {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .goals-board {
        min-height: 400px;
    }
}

/* ============================================
   FINANCE VIEW — Notion-style tables
   ============================================ */

.finance-main {
    padding: 1.5rem;
    height: calc(100vh - 60px);
    overflow-y: auto;
    position: relative;
}

/* Gear FAB bottom-right */
.fin-gear-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #111;
    border: 1px solid #333;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.fin-gear-fab:hover { background: #1a1a1a; color: #fff; border-color: #555; transform: rotate(45deg); }

/* Finance Dashboard Tabs */
.fin-dash-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}
.fin-dash-tab {
    background: none;
    border: 1px solid transparent;
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.fin-dash-tab:hover { color: #999; background: #111; }
.fin-dash-tab.active {
    color: #fff;
    background: #1a1a1a;
    border-color: #333;
}

/* Dashboard Toggles */
.fin-dash-toggles {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.fin-dash-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
}
.fin-dash-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
.fin-dash-gear {
    position: absolute;
    right: 0;
    background: none;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    color: #555;
    font-size: 1rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
}
.fin-dash-gear:hover { color: #fff; border-color: #333; }
.fin-dash-toggle-group {
    display: flex;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}
.fin-dash-toggle {
    background: none;
    border: none;
    color: #555;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fin-dash-toggle:hover { color: #999; }
.fin-dash-toggle.active {
    color: #fff;
    background: #1a1a1a;
}

.fin-hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fin-hub-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fin-section-toggle .fin-dash-toggle {
    min-width: 132px;
}

.fin-mini-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.fin-mini-kpis div {
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 8px 10px;
    background: #080808;
}

.fin-mini-kpis span {
    display: block;
    color: #666;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 5px;
}

.fin-mini-kpis strong {
    display: block;
    color: #e6edf3;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.95rem;
}

.fin-salary-card .fin-dash-flow {
    justify-content: flex-start;
    gap: 10px;
}

.fin-salary-card .fin-dash-flow-row {
    grid-template-columns: 125px 1fr 92px;
}

.fin-salary-card .fin-dash-flow-label {
    text-align: left;
}

.fin-salary-deduction-box {
    margin-top: 4px;
}

.fin-salary-deduction-box .fin-dash-flow-row {
    grid-template-columns: 125px 1fr 92px;
}

.fin-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fin-data-panel {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
}

.fin-data-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #e6edf3;
    font-size: 0.85rem;
    font-weight: 700;
}

.fin-data-panel-head .fin-add-row-btn,
.fin-data-panel-head .fin-mortgage-save-btn {
    margin: 0;
    width: auto;
    padding: 5px 12px;
    font-size: 0.78rem;
}

.fin-salary-data-grid {
    align-items: start;
}

.fin-salary-data-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fin-data-section {
    border: 1px solid #151515;
    border-radius: 8px;
    overflow: hidden;
    background: #070707;
}

.fin-data-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #151515;
    color: #8b949e;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.fin-data-section-head .fin-add-row-btn {
    margin: 0;
    width: auto;
    padding: 4px 10px;
    font-size: 0.74rem;
    text-transform: none;
    letter-spacing: 0;
}

.fin-mortgage-data-panel {
    min-height: calc(100vh - 135px);
}

.fin-data-mortgage-grid {
    padding-top: 4px;
}

/* Finance Dashboard */
.fin-dash-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    max-width: 1000px;
}

.fin-dash-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 20px;
}

.fin-dash-overview {
    display: flex;
    width: 50%;
    min-width: 480px;
    max-width: 600px;
}
.fin-dash-overview-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.fin-dash-overview-dual .fin-dash-fullflow {
    min-height: calc(100vh - 190px);
    padding-top: 14px;
}
.fin-dash-overview-dual .fin-dash-flow {
    justify-content: space-evenly;
}
.fin-dash-overview-dual .fin-dash-flow-label { font-size: 0.92rem; }
.fin-dash-overview-dual .fin-dash-flow-val { font-size: 0.95rem; }
.fin-dash-overview-dual .fin-dash-flow-row.bold .fin-dash-flow-label { font-size: 1rem; }
.fin-dash-overview-dual .fin-dash-flow-row.bold .fin-dash-flow-val { font-size: 1.05rem; }
.fin-dash-overview-dual .fin-salary-card .fin-dash-flow {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
}
.fin-dash-overview-dual .fin-salary-card .fin-dash-flow-row {
    grid-template-columns: 125px 1fr 92px;
}
.fin-dash-overview-dual .fin-salary-card .fin-dash-flow-label {
    text-align: left;
}
.fin-dash-overview-dual .fin-salary-card .fin-dash-savings-rate {
    margin-top: auto;
}
.fin-dash-proj-split {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.fin-dash-proj-col-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #888;
    margin-bottom: 6px;
    text-align: center;
}
.fin-dash-proj-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 3px 0;
}
.fin-dash-proj-label {
    color: #666;
}
.fin-dash-proj-stat span:last-child {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
}
.fin-dash-overview-triple {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.fin-dash-overview-triple .fin-dash-fullflow {
    min-height: calc(100vh - 210px);
}
.fin-dash-nw-hero-inline {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 4px 0;
}
.fin-dash-nw-hero-inline.positive { color: #4ade80; }
.fin-dash-nw-hero-inline.negative { color: #ef4444; }
.fin-dash-fullflow {
    width: 100%;
    min-height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
    padding: 18px 28px;
}

/* Expense Grid */
.fin-dash-exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1000px;
}
.fin-dash-exp-kpis {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1a1a1a;
}
.fin-dash-exp-kpi { flex: 1; text-align: center; }
.fin-dash-exp-kpi-val {
    display: block;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.fin-dash-exp-kpi-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #555;
}

/* Flow Breakdown */
.fin-dash-flow { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: space-evenly; }
.fin-dash-flow-row {
    display: grid;
    grid-template-columns: 160px 1fr 100px;
    align-items: center;
    gap: 12px;
}
.fin-dash-flow-row.bold .fin-dash-flow-label { color: #fff; font-weight: 600; font-size: 0.95rem; }
.fin-dash-flow-row.bold .fin-dash-flow-val { font-weight: 700; font-size: 1rem; }
.fin-dash-flow-label { font-size: 0.88rem; color: #888; text-align: right; white-space: nowrap; }
.fin-dash-flow-bar-track {
    height: 16px;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
}
.fin-dash-flow-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 3px;
}
.fin-dash-flow-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.fin-dash-flow-divider {
    border-top: 1px solid #222;
    margin: 6px 0;
}
.fin-dash-flow-divider-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
    margin: 8px 0 2px;
    padding-left: 2px;
}
.fin-dash-flow-box {
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 2px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.015);
}

.fin-dash-card-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #555;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Cash Flow Card */
.fin-dash-cf-rows { display: flex; flex-direction: column; gap: 8px; }
.fin-dash-cf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.fin-dash-cf-label { font-size: 0.9rem; color: #888; }
.fin-dash-cf-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc;
}
.fin-dash-cf-val.income { color: #4ade80; }
.fin-dash-cf-val.expense { color: #f87171; }
.fin-dash-cf-val.positive { color: #4ade80; }
.fin-dash-cf-val.negative { color: #ef4444; }
.fin-dash-cf-divider { border-top: 1px dashed #222; margin: 6px 0; }
.fin-dash-cf-row.total .fin-dash-cf-label,
.fin-dash-cf-row.surplus .fin-dash-cf-label { color: #fff; font-weight: 600; }
.fin-dash-cf-row.total .fin-dash-cf-val { font-size: 1.05rem; }
.fin-dash-cf-row.surplus .fin-dash-cf-val { font-size: 1.2rem; font-weight: 700; }

.fin-dash-savings-rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #1a1a1a;
    font-size: 0.95rem;
    color: #666;
}
.fin-dash-savings-rate strong {
    font-size: 1.5rem;
    font-family: 'SF Mono', 'Consolas', monospace;
}
.fin-dash-savings-rate .positive { color: #4ade80; }
.fin-dash-savings-rate .negative { color: #ef4444; }

/* Expense Breakdown Bars */
.fin-dash-bars { display: flex; flex-direction: column; gap: 6px; }
.fin-dash-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 65px 32px;
    align-items: center;
    gap: 8px;
}
.fin-dash-bar-label { font-size: 0.78rem; color: #888; text-align: right; white-space: nowrap; }
.fin-dash-bar-track {
    height: 14px;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
}
.fin-dash-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 4px;
}
.fin-dash-bar-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.78rem;
    color: #ccc;
    text-align: right;
}
.fin-dash-bar-pct { font-size: 0.68rem; color: #555; text-align: right; }

.fin-dash-bars-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #1a1a1a;
    font-size: 0.85rem;
    color: #666;
}
.fin-dash-bars-total strong {
    color: #fff;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Net Worth Layout */
.fin-dash-nw-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 900px;
}
.fin-dash-nw-chart-card { text-align: center; }
.fin-dash-nw-chart-wrap { display: flex; justify-content: center; margin: 16px 0; }
.fin-dash-nw-kpi-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #1a1a1a;
}
.fin-dash-nw-kpi { text-align: center; }
.fin-dash-nw-kpi-val {
    display: block;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #ccc;
    margin-bottom: 2px;
}
.fin-dash-nw-kpi-val.asset { color: #4ade80; }
.fin-dash-nw-kpi-val.liability { color: #f87171; }
.fin-dash-nw-kpi-val.positive { color: #4ade80; }
.fin-dash-nw-kpi-val.negative { color: #ef4444; }
.fin-dash-nw-kpi-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #555;
}

/* Net Worth List */
.fin-dash-nw-list-card { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.fin-dash-nw-list-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a1a1a;
}
.fin-dash-nw-list-title.asset { color: #4ade80; }
.fin-dash-nw-list-title.liability { color: #ef4444; }
.fin-dash-nw-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.fin-dash-nw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fin-dash-nw-list-name { font-size: 0.85rem; color: #888; flex: 1; }
.fin-dash-nw-list-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
}
.fin-dash-nw-list-total {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #1a1a1a;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
}
.fin-dash-nw-empty { font-size: 0.8rem; color: #333; font-style: italic; }

/* Legacy Net Worth (keep for compat) */
.fin-dash-networth { grid-column: 1 / -1; }
.fin-dash-nw-hero {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
    text-align: center;
    margin-bottom: 12px;
}
.fin-dash-nw-hero.positive { color: #4ade80; }
.fin-dash-nw-hero.negative { color: #ef4444; }

.fin-dash-nw-stacked-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    gap: 2px;
}
.fin-dash-nw-seg { border-radius: 3px; min-width: 4px; }

.fin-dash-nw-summary {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1a1a1a;
}
.fin-dash-nw-summary-item { text-align: center; }
.fin-dash-nw-summary-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #555;
    margin-bottom: 4px;
}
.fin-dash-nw-summary-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ccc;
}
.fin-dash-nw-summary-val.asset { color: #4ade80; }
.fin-dash-nw-summary-val.liability { color: #f87171; }
.fin-dash-nw-summary-val.positive { color: #4ade80; }
.fin-dash-nw-summary-val.negative { color: #ef4444; }

.fin-dash-nw-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.fin-dash-nw-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a1a1a;
}
.fin-dash-nw-section-title.asset { color: #4ade80; }
.fin-dash-nw-section-title.liability { color: #ef4444; }

.fin-dash-nw-cat-row { margin-bottom: 10px; }
.fin-dash-nw-cat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.fin-dash-nw-cat-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}
.fin-dash-nw-cat-val {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
    margin-left: auto;
}
.fin-dash-nw-cat-val.liability { color: #f87171; }
.fin-dash-nw-cat-pct { font-size: 0.7rem; color: #555; width: 30px; text-align: right; }
.fin-dash-nw-cat-items {
    padding-left: 12px;
}
.fin-dash-nw-item {
    display: block;
    font-size: 0.75rem;
    color: #555;
    padding: 1px 0;
}
.fin-dash-nw-empty { font-size: 0.8rem; color: #333; font-style: italic; }

/* Settings page */
.finance-settings-page {
    height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.fin-settings-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fin-back-btn {
    background: none;
    border: 1px solid #222;
    color: #888;
    font-size: 0.95rem;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.fin-back-btn:hover { background: #111; color: #fff; border-color: #444; }

.fin-manage-btn {
    margin-left: auto;
    background: none;
    border: 1px solid #222;
    color: #666;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.fin-manage-btn:hover { background: #111; color: #ccc; border-color: #444; }

/* Top-level tabs */
.fin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #222;
    margin-bottom: 0;
}

.fin-tab {
    background: none;
    border: none;
    color: #555;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 12px 24px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.fin-tab:hover { color: #ccc; }
.fin-tab.active { color: #fff; border-bottom-color: #58a6ff; }

/* Sub-tabs */
.fin-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #1a1a1a;
    padding-top: 0.5rem;
}

.fin-subtab {
    background: none;
    border: none;
    color: #444;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.fin-subtab:hover { color: #aaa; }
.fin-subtab.active { color: #ddd; border-bottom-color: #666; }

.fin-tab-content { padding-top: 0; }
.fin-subtab-content { padding-top: 0; }

/* ===== Notion-style table ===== */
.fin-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.fin-table thead th {
    text-align: left;
    color: #555;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 12px;
    border-bottom: 1px solid #222;
    white-space: nowrap;
    user-select: none;
}

.fin-th-check { width: 36px; }
.fin-th-name { width: 30%; }
.fin-th-amount { width: 18%; }
.fin-th-freq { width: 18%; }
.fin-th-date { width: 14%; }
.fin-th-category { width: 18%; }
.fin-th-actions { width: 36px; }

.fin-table tbody tr {
    border-bottom: 1px solid #111;
    transition: background 0.1s;
}
.fin-table tbody tr:hover { background: #0a0a0a; }

.fin-table td {
    padding: 6px 12px;
    vertical-align: middle;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline editable cells */
.fin-cell-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fin-cell-emoji {
    font-size: 1.15rem;
    cursor: pointer;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.fin-cell-emoji:hover { opacity: 0.7; }

.fin-cell-text {
    background: none;
    border: none;
    color: #ddd;
    font-size: 0.9375rem;
    font-weight: 500;
    width: 100%;
    padding: 4px 0;
    outline: none;
    font-family: inherit;
}
.fin-cell-text:focus { color: #fff; border-bottom: 1px solid #333; }
.fin-cell-text::placeholder { color: #333; }

.fin-cell-amount {
    background: none;
    border: none;
    color: #ddd;
    font-size: 0.9375rem;
    font-weight: 600;
    width: 100%;
    padding: 4px 0;
    outline: none;
    font-family: inherit;
    white-space: nowrap;
}
.fin-cell-amount:focus { color: #fff; border-bottom: 1px solid #333; }
.fin-cell-amount::placeholder { color: #333; }

.fin-cell-due {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.875rem;
    width: 100px;
    padding: 4px 0;
    outline: none;
    font-family: inherit;
}
.fin-cell-due:focus { color: #fff; border-bottom: 1px solid #444; }
.fin-cell-due::placeholder { color: #444; }

/* Expandable Income Breakdown */
.fin-expand-icon {
    cursor: pointer; color: #555; font-size: 0.65rem; margin-right: 6px;
    display: inline-block; transition: color 0.15s; user-select: none;
}
.fin-expand-icon:hover { color: #fff; }
.fin-expandable { cursor: default; }
.fin-breakdown-row td { padding: 0 !important; border-top: none !important; }
.fin-breakdown-content {
    background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px;
    margin: 4px 8px 12px 32px; padding: 16px 20px;
}
.fin-breakdown-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fin-breakdown-table { width: 100%; border-collapse: collapse; }
.fin-breakdown-table thead th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px;
    color: #555; font-weight: 600; text-align: left; padding-bottom: 10px;
}
.fin-breakdown-table td {
    padding: 5px 0; font-size: 0.85rem; color: #999; border: none !important;
}
.fin-bd-val { text-align: right; font-family: 'SF Mono', 'Consolas', monospace; color: #ccc; }
.fin-bd-deduct .fin-bd-val { color: #ef4444; }
.fin-bd-net td { border-top: 1px solid #222 !important; padding-top: 8px !important; color: #fff; font-weight: 600; }
.fin-bd-net .fin-bd-val { color: #4ade80; font-weight: 600; }
.fin-bd-super .fin-bd-val { color: #60a5fa; }
.fin-bd-total td { border-top: 1px solid #222 !important; padding-top: 8px !important; color: #fff; font-weight: 600; }
.fin-bd-total .fin-bd-val { color: #fbbf24; font-weight: 700; }
.fin-breakdown-stat {
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed #1a1a1a;
    font-size: 0.8rem; color: #666; text-align: center;
}
.fin-breakdown-stat strong { color: #fff; }

/* Mortgage Settings */
.fin-mortgage-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
    max-width: 960px; margin-top: 16px;
}
.fin-mortgage-section {
    background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px;
    padding: 20px;
}
.fin-mortgage-heading {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
    color: #555; font-weight: 600; margin-bottom: 16px;
}
.fin-mortgage-field {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
}
.fin-mortgage-field:last-child { margin-bottom: 0; }
.fin-mortgage-field label {
    font-size: 0.8rem; color: #777; font-weight: 500;
}
.fin-mortgage-input {
    background: transparent; border: 1px solid #222; border-radius: 6px;
    padding: 8px 12px; color: #fff; font-size: 0.95rem; font-family: 'SF Mono', 'Consolas', monospace;
    transition: border-color 0.15s;
}
.fin-mortgage-input:focus { border-color: #444; outline: none; }
.fin-mortgage-input::placeholder { color: #333; }
.fin-mortgage-save-btn {
    margin-top: 20px; padding: 10px 24px; background: #1a1a1a; border: 1px solid #333;
    border-radius: 8px; color: #4ade80; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.fin-mortgage-save-btn:hover { background: #222; border-color: #4ade80; }

/* Shared tag style for both category and frequency */
.fin-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    color: #fff;
}
.fin-tag:hover { opacity: 0.8; }

/* Category colours — white text, colored backgrounds */
.fin-cat-subscriptions { background: #4338ca; }
.fin-cat-utilities { background: #166534; }
.fin-cat-insurance { background: #7e22ce; }
.fin-cat-loans { background: #b91c1c; }
.fin-cat-rent { background: #a16207; }
.fin-cat-phone-internet { background: #0e7490; }
.fin-cat-transport { background: #c2410c; }
.fin-cat-childcare { background: #be185d; }
.fin-cat-groceries { background: #047857; }
.fin-cat-dining-out { background: #a16207; }
.fin-cat-entertainment { background: #6d28d9; }
.fin-cat-shopping { background: #9f1239; }
.fin-cat-health { background: #0f766e; }
.fin-cat-salary { background: #15803d; }
.fin-cat-freelance { background: #1d4ed8; }
.fin-cat-investment { background: #92400e; }
.fin-cat-rental { background: #9a3412; }
.fin-cat-other { background: #374151; }

/* Portfolio category colours */
.fin-cat-property { background: #92400e; }
.fin-cat-stocks { background: #1d4ed8; }
.fin-cat-crypto { background: #7e22ce; }
.fin-cat-superannuation { background: #0e7490; }
.fin-cat-savings { background: #15803d; }

/* Frequency colours — white text, colored backgrounds */
.fin-freq-weekly { background: #b91c1c; }
.fin-freq-fortnightly { background: #c2410c; }
.fin-freq-monthly { background: #4338ca; }
.fin-freq-quarterly { background: #0f766e; }
.fin-freq-half-yearly { background: #a16207; }
.fin-freq-yearly { background: #15803d; }

/* Row checkbox for selection & move */
.fin-cell-check {
    width: 16px;
    height: 16px;
    accent-color: #58a6ff;
    cursor: pointer;
    margin: 0;
}

.fin-table tbody tr.fin-selected {
    background: #0d1b2a;
}

/* Move bar — fixed bottom strip when items selected */
.fin-move-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    border-top: 1px solid #333;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
}

.fin-move-bar-text {
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 500;
}

.fin-move-bar-count {
    color: #58a6ff;
    font-weight: 700;
}

.fin-move-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.fin-move-btn:hover { background: #222; border-color: #58a6ff; color: #fff; }

.fin-move-cancel {
    background: none;
    border: 1px solid #333;
    color: #888;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: auto;
}
.fin-move-cancel:hover { color: #fff; border-color: #555; }

/* Delete button in row */
.fin-row-delete {
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
    border-radius: 3px;
    transition: color 0.15s;
    line-height: 1;
}
.fin-table tbody tr:hover .fin-row-delete { color: #666; }
.fin-row-delete:hover { color: #f85149 !important; }

/* Checkbox selection */
.fin-cell-check {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #58a6ff;
    opacity: 0.3;
    transition: opacity 0.15s;
}
.fin-table tbody tr:hover .fin-cell-check,
.fin-cell-check:checked { opacity: 1; }
.fin-table tbody tr.fin-selected { background: rgba(88, 166, 255, 0.08); }

/* Move bar */
.fin-move-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #161b22;
    border-top: 1px solid #30363d;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    animation: finMoveBarSlideUp 0.2s ease;
}
@keyframes finMoveBarSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.fin-move-bar-text {
    color: #c9d1d9;
    font-size: 0.85rem;
    margin-right: 6px;
    white-space: nowrap;
}
.fin-move-bar-count {
    color: #58a6ff;
    font-weight: 600;
}
.fin-move-bar-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.fin-move-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fin-move-btn:hover { background: #30363d; color: #58a6ff; border-color: #58a6ff; }
.fin-move-cancel {
    background: none;
    border: 1px solid #30363d;
    color: #8b949e;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s;
}
.fin-move-cancel:hover { color: #f85149; border-color: #f85149; }

/* Add row button */
.fin-add-row-btn {
    background: none;
    border: none;
    color: #444;
    font-size: 0.9rem;
    padding: 8px 12px;
    cursor: pointer;
    transition: color 0.15s;
    text-align: left;
}
.fin-add-row-btn:hover { color: #58a6ff; }

/* Emoji picker dropdown */
.fin-emoji-picker {
    position: fixed;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    z-index: 1000;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.fin-emoji-picker button {
    background: none;
    border: none;
    font-size: 1rem;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}
.fin-emoji-picker button:hover { background: #222; }

/* Tag dropdown overlay (shared for category and frequency) */
.fin-tag-dropdown {
    position: fixed;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px;
    z-index: 1000;
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.fin-tag-dropdown-row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.fin-tag-dropdown-item {
    flex: 1;
    background: none;
    border: none;
    text-align: left;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background 0.1s;
}
.fin-tag-dropdown-item:hover { background: #1a1a1a; }
.fin-tag-dropdown-del {
    background: none;
    border: none;
    color: #444;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.fin-tag-dropdown-del:hover { color: #f85149; }
.fin-tag-dropdown-add {
    border-top: 1px solid #222;
    padding: 4px;
    margin-top: 2px;
}
.fin-tag-dropdown-input {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #ddd;
    font-size: 0.8rem;
    padding: 5px 8px;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
}
.fin-tag-dropdown-input:focus { border-color: #58a6ff; }
.fin-tag-dropdown-input::placeholder { color: #444; }

/* Manage Tags Panel */
.fin-tags-panel {
    position: fixed;
    top: 60px;
    right: 0;
    width: 320px;
    height: calc(100vh - 60px);
    background: #0a0a0a;
    border-left: 1px solid #222;
    padding: 1rem;
    overflow-y: auto;
    z-index: 500;
    box-shadow: -4px 0 16px rgba(0,0,0,0.4);
}
.fin-tags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.fin-tags-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.fin-tags-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.1rem;
    cursor: pointer;
}
.fin-tags-close:hover { color: #fff; }

.fin-tags-section {
    margin-bottom: 1.25rem;
}
.fin-tags-section label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.5rem;
}
.fin-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.5rem;
}
.fin-tag-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
}
.fin-tag-pill .fin-tag-x {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
    line-height: 1;
}
.fin-tag-pill .fin-tag-x:hover { opacity: 1; }
.fin-tag-add-row {
    display: flex;
    gap: 4px;
}
.fin-tag-add-row input {
    background: #111;
    border: 1px solid #333;
    color: #ddd;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    width: 140px;
}
.fin-tag-add-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #58a6ff;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.fin-tag-add-btn:hover { background: #222; border-color: #58a6ff; }

/* Finance responsive */
@media (max-width: 768px) {
    .jay-board {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 140px);
        overflow-y: auto;
        padding: 0.75rem;
    }

    .jay-lists-panel {
        height: auto;
    }

    .jay-lists-panel .recipe-column {
        min-height: 220px;
    }

    .jay-growth-data-panel {
        grid-template-columns: 1fr;
    }

    .jay-growth-form {
        grid-template-columns: 1fr;
    }

    .jay-growth-form #saveJayGrowth {
        grid-column: 1 / -1;
    }

    .jay-growth-row {
        grid-template-columns: 1fr 1fr;
    }

    .jay-growth-delete {
        justify-self: end;
    }

    .finance-settings-page { padding: 0.75rem; }
    .fin-table { width: 100%; }
    .fin-th-date, .fin-th-category { display: none; }
    .fin-table td:nth-child(4),
    .fin-table td:nth-child(5) { display: none; }
    .fin-tags-panel { width: 100%; }
}

@media (max-width: 1100px) {
    .habits-panels-wrapper {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .habit-goal-panel {
        min-height: 560px;
    }
}

@media (max-width: 760px) {
    .habit-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .habit-week-controls {
        width: 100%;
        justify-content: space-between;
    }

    .habit-week-controls .habit-week-range {
        flex: 1;
        min-width: 0;
    }

    #habitsTab .day-headers,
    #habitsTab .habit-main {
        min-width: 0 !important;
        grid-template-columns: minmax(64px, 1.25fr) repeat(7, minmax(22px, 1fr)) !important;
    }

    #habitsTab .day-header {
        font-size: 0.55rem;
        padding: 0.45rem 0;
    }

    #habitsTab .habit-label {
        font-size: 0.74rem;
    }

    #habitsTab .habit-skip-badge {
        display: none;
    }

    #habitsTab .habit-name {
        padding: 0.55rem 0.25rem;
    }

    #habitsTab .day-cell {
        padding: 0.18rem;
    }

    #habitsTab .status-btn {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        font-size: 0.65rem;
    }

    #habitsTab .status-btn.mvd {
        font-size: 0.42rem;
    }
}

/* ============================================
   READONLY MODE OVERRIDES
   ============================================ */

/* Hide all edit controls in readonly mode */
body.readonly .goals-form,
body.readonly .goals-delete-btn,
body.readonly .task-actions,
body.readonly .task-checkbox,
body.readonly .goals-add-btn,
body.readonly .habit-actions,
body.readonly .habit-skip-btn,
body.readonly .habit-panel-add,
body.readonly .habit-empty-add,
body.readonly #signOutBtn,
body.readonly .comment-btn,
body.readonly .drag-handle,
body.readonly .goal-task-form,
body.readonly .close-goal-tasks,
body.readonly .goal-complete-toggle,
body.readonly .goal-subtask-delete,
body.readonly .board-form,
body.readonly .task-form,
body.readonly .settings-panel,
body.readonly .archive-toggle,
body.readonly .stats-toggle,
body.readonly .settings-toggle,
body.readonly .spin-btn,
body.readonly .reward-form,
body.readonly .reward-delete,
body.readonly .energy-select-btn,
body.readonly .gym-add-btn,
body.readonly .gym-btn,
body.readonly .recipe-add-btn,
body.readonly .jay-add-btn,
body.readonly .recipe-delete-btn,
body.readonly .recipe-edit-btn,
body.readonly .trading-delete-btn,
body.readonly .trading-edit-btn,
body.readonly .goal-color-btn,
body.readonly .wdp-form,
body.readonly .wdp-save-btn,
body.readonly .lc-detail-actions,
body.readonly .meta-blur-toggle,
body.readonly .undo-toast,
body.readonly .fin-gear-fab,
body.readonly .fin-add-row-btn,
body.readonly .fin-row-delete,
body.readonly .fin-manage-btn,
body.readonly .fin-cell-check,
body.readonly .fin-move-bar,
body.readonly .jay-growth-add-pane,
body.readonly .jay-growth-form,
body.readonly .jay-growth-delete { display: none !important; }

body.readonly .jay-growth-data-panel {
    grid-template-columns: 1fr;
}

/* Disable pointer events on interactive items */
body.readonly .goals-item,
body.readonly .task-item { cursor: default; }

body.readonly .goals-item[draggable] { pointer-events: auto; }
body.readonly .goals-item { -webkit-user-drag: none; }

/* Readonly indicator badge */
.readonly-badge {
    position: fixed;
    top: 12px;
    right: 16px;
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    border: 1px solid rgba(88, 166, 255, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 9999;
    pointer-events: none;
}