/* ============================================================
   NutriDash — Styles
   ============================================================ */

:root {
    /* Base palette */
    --bg: #0f1117;
    --bg-card: #181a20;
    --bg-card-hover: #1e2028;
    --bg-input: #23252d;
    --border: #2a2d38;
    --border-light: #353846;
    --text: #e8eaed;
    --text-dim: #9aa0ab;
    --text-muted: #6b7280;

    /* Accent colors */
    --accent: #818cf8;
    --accent-glow: rgba(129, 140, 248, 0.15);
    --protein: #f472b6;
    --protein-bg: rgba(244, 114, 182, 0.12);
    --carbs: #60a5fa;
    --carbs-bg: rgba(96, 165, 250, 0.12);
    --fat: #fbbf24;
    --fat-bg: rgba(251, 191, 36, 0.12);
    --calories: #34d399;
    --calories-bg: rgba(52, 211, 153, 0.12);
    --danger: #f87171;
    --success: #34d399;

    /* Sizing */
    --nav-h: 60px;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 6px;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
    --shadow-hover: 0 4px 24px rgba(0,0,0,.35);

    /* Transitions */
    --ease: cubic-bezier(.4,0,.2,1);
}

/* Light theme */
[data-theme="light"] {
    --bg: #f4f5f7;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --bg-input: #f0f1f3;
    --border: #e2e4e9;
    --border-light: #d1d5db;
    --text: #1a1d26;
    --text-dim: #6b7280;
    --text-muted: #9ca3af;
    --accent-glow: rgba(129, 140, 248, 0.08);
    --protein-bg: rgba(244, 114, 182, 0.08);
    --carbs-bg: rgba(96, 165, 250, 0.08);
    --fat-bg: rgba(251, 191, 36, 0.08);
    --calories-bg: rgba(52, 211, 153, 0.08);
    --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --shadow-hover: 0 4px 24px rgba(0,0,0,.08);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background .3s var(--ease), color .3s var(--ease);
}

/* ---- Top Nav ---- */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    padding: 0 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    border-radius: var(--radius-sm);
    color: #fff;
}

.brand-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.nav-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
}

.nav-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.nav-tab:hover { color: var(--text); }
.nav-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(129,140,248,.3);
}

.nav-right { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.moon-icon { display: none; }
[data-theme="light"] .sun-icon { display: none; }
[data-theme="light"] .moon-icon { display: block; }

/* ---- Filter Bar ---- */
.filter-bar {
    position: sticky;
    top: 60px;
    z-index: 99;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

.filter-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
}

.filter-group input[type="date"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 8px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .2s var(--ease);
}

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

.filter-presets {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 3px;
    border-radius: var(--radius-xs);
}

.filter-preset {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.filter-preset:hover { color: var(--text); }
.filter-preset.active { background: var(--accent); color: #fff; }

.filter-apply {
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-xs);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s var(--ease);
}

.filter-apply:hover { opacity: 0.9; }

/* ---- Container ---- */
.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 28px 60px;
}

/* ---- Sections ---- */
.section { display: none; }
.section.active { display: block; animation: fadeIn .35s var(--ease); }

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

/* ---- Hero Stats ---- */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.hero-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all .25s var(--ease);
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}

.hero-calories::before { background: linear-gradient(90deg, var(--calories), #6ee7b7); }
.hero-protein::before { background: linear-gradient(90deg, var(--protein), #f9a8d4); }
.hero-carbs::before { background: linear-gradient(90deg, var(--carbs), #93c5fd); }
.hero-fat::before { background: linear-gradient(90deg, var(--fat), #fcd34d); }

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

.hero-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.hero-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.hero-calories .hero-value { color: var(--calories); }
.hero-protein .hero-value { color: var(--protein); }
.hero-carbs .hero-value { color: var(--carbs); }
.hero-fat .hero-value { color: var(--fat); }

.hero-sub {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Cards ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: all .25s var(--ease);
}

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

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

.card-header h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.card-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 4px 10px;
    border-radius: 20px;
}

.card-body { padding: 24px; }

/* ---- Calc Grid ---- */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ---- Form Elements ---- */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child { margin-bottom: 0; }

.form-group > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.input-with-unit {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .2s var(--ease);
}

.input-with-unit:focus-within { border-color: var(--accent); }

.input-with-unit input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

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

.input-with-unit .unit {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    white-space: nowrap;
}

.height-inputs {
    display: flex;
    gap: 10px;
}

.height-inputs .input-with-unit { flex: 1; }

select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color .2s var(--ease);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

select:focus { border-color: var(--accent); }

/* Toggle groups */
.toggle-group, .unit-toggle {
    display: flex;
    gap: 6px;
}

.unit-toggle { margin-bottom: 8px; }

.toggle-btn, .unit-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.toggle-btn:hover, .unit-btn:hover { border-color: var(--accent); color: var(--text); }

.toggle-btn.active, .unit-btn.active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

.unit-btn {
    flex: unset;
    padding: 6px 12px;
    font-size: 12px;
}

/* Goal buttons */
.goal-buttons {
    display: flex;
    gap: 8px;
}

.goal-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.goal-btn:hover { border-color: var(--accent); color: var(--text); }
.goal-btn.active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* Maintenance display */
.maintenance-display, .target-display {
    text-align: center;
    padding: 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.maintenance-display {
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.target-display {
    background: linear-gradient(135deg, rgba(129,140,248,.1), rgba(167,139,250,.1));
    border: 1px solid rgba(129,140,248,.2);
    margin-bottom: 0;
}

.maintenance-label, .target-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.maintenance-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
}

.target-value {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.maintenance-sub, .target-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Slider */
.slider-container { margin-top: 4px; }

.styled-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.styled-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 2px 6px rgba(129,140,248,.4);
    cursor: pointer;
    transition: transform .15s var(--ease);
}

.styled-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

.protein-range::-webkit-slider-thumb { background: var(--protein); box-shadow: 0 2px 6px rgba(244,114,182,.4); }
.carbs-range::-webkit-slider-thumb { background: var(--carbs); box-shadow: 0 2px 6px rgba(96,165,250,.4); }
.fat-range::-webkit-slider-thumb { background: var(--fat); box-shadow: 0 2px 6px rgba(251,191,36,.4); }

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.slider-value { font-weight: 600; color: var(--accent); }

.adjustment-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Preset buttons */
.preset-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.preset-btn {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.preset-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.preset-btn.active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* Macro slider groups */
.macro-slider-group {
    margin-bottom: 18px;
}

.macro-slider-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

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

.protein-dot { background: var(--protein); }
.carbs-dot { background: var(--carbs); }
.fat-dot { background: var(--fat); }

.macro-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}

.macro-pct {
    font-size: 14px;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.macro-grams {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 48px;
    text-align: right;
}

/* Total check */
.total-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    transition: all .2s var(--ease);
}

.total-check.valid { background: rgba(52,211,153,.1); color: var(--success); }
.total-check.invalid { background: rgba(248,113,113,.1); color: var(--danger); }

/* Macro donut container */
.macro-donut-container {
    display: flex;
    justify-content: center;
    padding: 8px 0 0;
}

.macro-donut-container canvas {
    max-width: 180px;
    max-height: 180px;
}

/* ---- Tracker Section ---- */
.tracker-summary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    transition: all .25s var(--ease);
}

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

.summary-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.cal-icon { background: var(--calories-bg); color: var(--calories); }
.prot-icon { background: var(--protein-bg); color: var(--protein); }
.carb-icon { background: var(--carbs-bg); color: var(--carbs); }
.fat-icon { background: var(--fat-bg); color: var(--fat); }
.days-icon { background: var(--accent-glow); color: var(--accent); }
.dist-icon { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }
.resp-icon { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.burn-icon { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.surplus-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }

.summary-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.summary-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Surplus / Deficit Card Styles ---- */
.summary-card.surplus-card {
    border-color: rgba(52, 211, 153, 0.25);
}

.summary-card.surplus-card .summary-value {
    color: var(--success);
}

.summary-card.surplus-card .surplus-icon {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.summary-card.deficit-card {
    border-color: rgba(248, 113, 113, 0.25);
}

.summary-card.deficit-card .summary-value {
    color: var(--danger);
}

.summary-card.deficit-card .surplus-icon {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

/* ---- Charts ---- */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.chart-card.full-width { grid-column: 1 / -1; }
.chart-card.half-width { /* default */ }

.chart-body {
    padding: 20px 24px 24px;
    min-height: 280px;
    position: relative;
}

.chart-controls {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 3px;
    border-radius: var(--radius-xs);
}

.chart-range {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.chart-range:hover { color: var(--text); }
.chart-range.active { background: var(--accent); color: #fff; }

/* ---- Insights ---- */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.insight-card.wide-insight { grid-column: span 2; }
.insight-card.full-insight { grid-column: 1 / -1; }

.score-ring-container {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.insight-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    padding: 0 8px;
}

.highlight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
}

.highlight-row:last-child { margin-bottom: 0; }

.highlight-row.high { background: rgba(248,113,113,.08); }
.highlight-row.low { background: rgba(96,165,250,.08); }
.highlight-row.range { background: rgba(129,140,248,.08); }
.highlight-row.avg { background: rgba(251,191,36,.08); }

.highlight-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}

.highlight-value {
    font-size: 15px;
    font-weight: 700;
}

.highlight-row.high .highlight-value { color: var(--danger); }
.highlight-row.low .highlight-value { color: var(--carbs); }
.highlight-row.range .highlight-value { color: var(--accent); }
.highlight-row.avg .highlight-value { color: var(--fat); }

/* ---- Energy Stats (Cumulative Balance) ---- */
.energy-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.energy-stat {
    text-align: center;
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.energy-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.energy-value {
    font-size: 24px;
    font-weight: 800;
}

.energy-value.surplus { color: var(--success); }
.energy-value.deficit { color: var(--danger); }
.energy-value.neutral { color: var(--text); }

/* ---- Garmin Section ---- */
.garmin-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.steps-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.hr-icon { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.sleep-icon { background: rgba(129, 140, 248, 0.12); color: #818cf8; }
.stress-icon { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.hrv-icon { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.spo2-icon { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.body-icon { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.intensity-icon { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }

/* ---- Activities ---- */
.activities-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.act-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.act-time-icon { background: rgba(129, 140, 248, 0.12); color: #818cf8; }
.act-cal-icon { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.act-dist-icon { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.act-dur-icon { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.act-hr-icon { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.act-streak-icon { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.act-types-icon { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }

.act-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.act-type-badge.type-running { background: rgba(52,211,153,0.15); color: #34d399; }
.act-type-badge.type-strength { background: rgba(248,113,113,0.15); color: #f87171; }
.act-type-badge.type-yoga { background: rgba(167,139,250,0.15); color: #a78bfa; }
.act-type-badge.type-skiing { background: rgba(56,189,248,0.15); color: #38bdf8; }
.act-type-badge.type-hiit { background: rgba(251,146,60,0.15); color: #fb923c; }
.act-type-badge.type-walking { background: rgba(251,191,36,0.15); color: #fbbf24; }
.act-type-badge.type-other { background: rgba(107,114,128,0.15); color: #6b7280; }

.act-table-wrap {
    max-height: 500px;
    overflow-y: auto;
}

.act-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.act-table th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    z-index: 1;
}

.act-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
}

.act-table tr:hover td {
    background: var(--bg-input);
}

/* ---- Utilities ---- */
.hidden { display: none !important; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .calc-grid { grid-template-columns: 1fr 1fr; }
    .calc-grid .card:nth-child(3) { grid-column: 1 / -1; }
    .tracker-summary { grid-template-columns: repeat(3, 1fr); }
    .garmin-summary { grid-template-columns: repeat(4, 1fr); }
    .activities-summary { grid-template-columns: repeat(4, 1fr); }
    .insights-grid { grid-template-columns: 1fr 1fr; }
    .insight-card.wide-insight { grid-column: span 2; }
    .insight-card.full-insight { grid-column: 1 / -1; }
    .energy-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
    .garmin-summary { grid-template-columns: repeat(3, 1fr); }
    .energy-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .calc-grid { grid-template-columns: 1fr; }
    .calc-grid .card:nth-child(3) { grid-column: unset; }
    .charts-grid { grid-template-columns: 1fr; }
    .chart-card.half-width { grid-column: unset; }
    .tracker-summary { grid-template-columns: repeat(2, 1fr); }
    .garmin-summary { grid-template-columns: repeat(2, 1fr); }
    .activities-summary { grid-template-columns: repeat(2, 1fr); }
    .insights-grid { grid-template-columns: 1fr; }
    .insight-card.wide-insight { grid-column: unset; }
    .insight-card.full-insight { grid-column: unset; }
    .filter-container { gap: 12px; }
}

@media (max-width: 600px) {
    .topnav { padding: 0 16px; }
    .container { padding: 16px 16px 40px; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-card { padding: 16px; }
    .hero-value { font-size: 28px; }
    .nav-tab { padding: 6px 14px; font-size: 12px; }
    .tracker-summary { grid-template-columns: 1fr; }
    .garmin-summary { grid-template-columns: 1fr 1fr; }
    .activities-summary { grid-template-columns: 1fr 1fr; }
    .brand-text { display: none; }
    .filter-container { padding: 0 16px; flex-direction: column; align-items: stretch; }
    .filter-presets { flex-wrap: wrap; }
    .energy-stats { grid-template-columns: 1fr 1fr; }
    .energy-value { font-size: 20px; }
}

@media (max-width: 400px) {
    .garmin-summary { grid-template-columns: 1fr; }
    .activities-summary { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: 1fr; }
    .energy-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   STRAVA TAB
   ============================================================ */

/* Hero */
.strava-hero {
    position: relative;
    overflow: hidden;
    padding: 60px 24px 48px;
    text-align: center;
}
.strava-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FC4C02 0%, #E34402 40%, #1a1a2e 100%);
    opacity: 0.9;
    z-index: 0;
}
[data-theme="light"] .strava-hero-bg {
    background: linear-gradient(135deg, #FC4C02 0%, #FF6B35 40%, #FFA366 100%);
    opacity: 0.95;
}
.strava-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}
.strava-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.strava-title {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    margin: 0 0 8px;
    line-height: 1.1;
}
.strava-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 36px;
    font-weight: 400;
}
.strava-big-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}
.strava-stat {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 20px 12px;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.strava-stat:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.18);
}
.strava-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.strava-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Section titles */
.strava-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 36px 0 16px;
    padding-left: 4px;
}

/* Map card */
.strava-map-card {
    margin-bottom: 28px;
}
.strava-map-body {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
}
.strava-map-legend {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--text-dim);
}
.strava-map-legend .leg-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* Cities */
.strava-cities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.strava-city-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    cursor: default;
    position: relative;
    overflow: hidden;
}
.strava-city-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.strava-city-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #FC4C02;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.strava-city-card:hover::before {
    opacity: 1;
}
.strava-city-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.strava-city-meta {
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    gap: 16px;
    margin-top: 8px;
}
.strava-city-types {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.strava-city-types .act-type-badge {
    font-size: 10px;
    padding: 2px 8px;
}

/* Heatmap */
.strava-heatmap-card {
    margin-bottom: 28px;
}
.strava-heatmap {
    padding: 12px 0;
}
.heatmap-scroll {
    overflow-x: auto;
}
.heatmap-table {
    border-collapse: separate;
    border-spacing: 3px;
}
.heatmap-table td, .heatmap-table th {
    padding: 0;
}
.heatmap-label {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    padding-right: 6px !important;
    width: 28px;
    line-height: 14px;
}
.heatmap-month {
    font-size: 11px;
    color: var(--text-dim);
    text-align: left;
    font-weight: 400;
    padding-bottom: 4px !important;
}
.strava-heatmap-day {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--bg-input);
    transition: background 0.15s;
}
.strava-heatmap-day.level-1 { background: rgba(252, 76, 2, 0.25); }
.strava-heatmap-day.level-2 { background: rgba(252, 76, 2, 0.5); }
.strava-heatmap-day.level-3 { background: rgba(252, 76, 2, 0.75); }
.strava-heatmap-day.level-4 { background: #FC4C02; }
.strava-heatmap-day[title] { cursor: default; }
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
}
.heatmap-legend .strava-heatmap-day {
    width: 12px;
    height: 12px;
}

/* Activity Feed */
.strava-feed {
    display: grid;
    gap: 16px;
    margin-bottom: 40px;
}
.strava-feed-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.strava-feed-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}
.strava-feed-map {
    height: 140px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-input);
    position: relative;
}
.strava-feed-map canvas {
    width: 100%;
    height: 100%;
}
.strava-feed-map .no-route {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
}
.strava-feed-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.strava-feed-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.strava-feed-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.strava-feed-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.strava-feed-stat {
    display: flex;
    flex-direction: column;
}
.strava-feed-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.strava-feed-stat-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.strava-feed-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}
.strava-feed-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.strava-feed-kudos {
    font-size: 12px;
    color: var(--text-dim);
}

/* Strava type colors */
.strava-type-Run { background: #34d399; }
.strava-type-WeightTraining { background: #f87171; }
.strava-type-Yoga { background: #a78bfa; }
.strava-type-AlpineSki { background: #38bdf8; }
.strava-type-Walk { background: #fbbf24; }
.strava-type-HIIT { background: #fb923c; }
.strava-type-Hike { background: #86efac; }
.strava-type-Swim { background: #22d3ee; }
.strava-type-Surfing { background: #2dd4bf; }
.strava-type-IceSkate { background: #c4b5fd; }
.strava-type-VirtualRun { background: #6ee7b7; }
.strava-type-Workout { background: #fca5a5; }

/* Personal Records Grid */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.pr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    transition: transform 0.15s;
}
.pr-item:hover { transform: translateY(-2px); }
.pr-icon { font-size: 24px; }
.pr-value { font-size: 18px; font-weight: 700; color: var(--accent); }
.pr-type { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.pr-date { font-size: 11px; color: var(--text-dim); opacity: 0.7; }

/* HR Zone Filter inline */
.strava-hr-filter, .act-hr-filter {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.strava-hr-filter .filter-preset, .act-hr-filter .filter-preset {
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.strava-hr-filter .filter-preset.active, .act-hr-filter .filter-preset.active {
    background: #FC4C02;
    color: #fff;
    border-color: #FC4C02;
}

/* Load More */
.strava-load-more {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: #FC4C02;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.strava-load-more:hover {
    background: var(--bg-card-hover);
    border-color: #FC4C02;
}

/* ============================================================
   HABITS TAB
   ============================================================ */
.habits-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.habit-streak-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.habit-best-icon { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.habit-week-icon { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.habit-days-icon { background: rgba(129, 140, 248, 0.12); color: #818cf8; }

.habits-week-card { margin-bottom: 20px; }

.habits-week-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.habits-nav-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.habits-nav-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.habits-week-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    min-width: 180px;
    text-align: center;
}

.habits-week-body {
    overflow-x: auto;
    padding: 12px 20px 20px;
}

.habits-week-grid {
    display: grid;
    grid-template-columns: 140px repeat(7, 1fr) 80px;
    gap: 2px;
    min-width: 700px;
}
.habits-week-grid .hw-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-align: center;
    padding: 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.habits-week-grid .hw-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    padding: 8px 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.habits-week-grid .hw-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
}
.habits-week-grid .hw-total {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
}
.hw-total.met { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.hw-total.partial { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.hw-total.empty { background: var(--bg-input); color: var(--text-muted); }

.habit-check {
    width: 28px;
    height: 28px;
    accent-color: #34d399;
    cursor: pointer;
}
.habit-input {
    width: 56px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    transition: border-color .15s;
}
.habit-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Section separator rows */
.habits-week-grid .hw-section {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 8px 4px;
    border-bottom: 1px solid var(--border);
}

/* Weekly Goals Progress */
.habit-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}
.habit-progress-row + .habit-progress-row {
    border-top: 1px solid var(--border);
}
.habit-progress-name {
    width: 140px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    flex-shrink: 0;
}
.habit-progress-bar-wrap {
    flex: 1;
    height: 24px;
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.habit-progress-bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width .3s var(--ease);
    min-width: 2px;
}
.habit-progress-bar-fill.green { background: #34d399; }
.habit-progress-bar-fill.orange { background: #fbbf24; }
.habit-progress-bar-fill.red { background: #f87171; }
.habit-progress-value {
    width: 100px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--text);
    flex-shrink: 0;
}

/* Habits heatmap */
.habits-heatmap-card { margin-top: 20px; }
.habits-heatmap { padding: 12px 0; }
.habits-heatmap-day {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--bg-input);
    transition: background 0.15s;
}
.habits-heatmap-day.level-1 { background: rgba(52, 211, 153, 0.25); }
.habits-heatmap-day.level-2 { background: rgba(52, 211, 153, 0.5); }
.habits-heatmap-day.level-3 { background: rgba(52, 211, 153, 0.75); }
.habits-heatmap-day.level-4 { background: #34d399; }

/* Data management */
.habit-data-mgmt {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 24px;
}
.habit-mgmt-btn {
    padding: 10px 24px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all .15s var(--ease);
}
.habit-mgmt-btn.export-btn {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.habit-mgmt-btn.export-btn:hover { opacity: 0.85; }
.habit-mgmt-btn.import-btn {
    background: var(--bg-input);
    color: var(--text);
}
.habit-mgmt-btn.import-btn:hover { border-color: var(--accent); }
.habit-mgmt-btn.clear-btn {
    background: transparent;
    color: #f87171;
    border-color: #f87171;
}
.habit-mgmt-btn.clear-btn:hover { background: rgba(248, 113, 113, 0.1); }

/* ============================================================
   MILESTONES TAB
   ============================================================ */
.milestones-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.ms-total-icon { background: rgba(129, 140, 248, 0.12); color: #818cf8; }
.ms-done-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.ms-prog-icon { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.ms-pct-icon { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }

.ms-month-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ms-table-wrap {
    overflow-x: auto;
}
.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ms-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    border-bottom: 2px solid var(--border);
}
.ms-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ms-table tr:last-child td { border-bottom: none; }

.ms-milestone-text {
    font-weight: 500;
    color: var(--text);
}
.ms-category {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.ms-cat-health { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.ms-cat-fitness { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.ms-cat-financial { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.ms-cat-relationship { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.ms-cat-career { background: rgba(129, 140, 248, 0.15); color: #818cf8; }
.ms-cat-other { background: var(--bg-input); color: var(--text-dim); }

.ms-status-select {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all .15s var(--ease);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
}
.ms-status-select.pending { background-color: var(--bg-input); color: var(--text-muted); }
.ms-status-select.in-progress { background-color: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: #fbbf24; }
.ms-status-select.partial { background-color: rgba(251, 146, 60, 0.15); color: #fb923c; border-color: #fb923c; }
.ms-status-select.done { background-color: rgba(52, 211, 153, 0.15); color: #34d399; border-color: #34d399; }
.ms-status-select.exceeded { background-color: rgba(96, 165, 250, 0.15); color: #60a5fa; border-color: #60a5fa; }
.ms-status-select.failed { background-color: rgba(248, 113, 113, 0.15); color: #f87171; border-color: #f87171; }
.ms-status-select.pushed { background-color: rgba(168, 85, 247, 0.15); color: #a855f7; border-color: #a855f7; }

/* Milestone name - make it stand out */
.ms-milestone-cell {
    min-width: 220px;
}
.ms-milestone-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--text);
    transition: all .15s var(--ease);
}
.ms-milestone-input:hover {
    border-color: var(--border);
    background: var(--bg-input);
}
.ms-milestone-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-input);
}

.ms-inline-input {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    transition: border-color .15s;
}
.ms-inline-input:focus { outline: none; border-color: var(--accent); }

.ms-inline-select {
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
}

.ms-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all .15s;
}
.ms-delete-btn:hover { color: #f87171; background: rgba(248,113,113,0.1); }

.ms-add-row {
    padding: 12px 0 0;
}
.ms-add-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Year overview month cards */
.ms-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.ms-year-month {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.ms-year-month-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ms-year-month-pct {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}
.ms-year-month-pct.green { background: rgba(52,211,153,0.15); color: #34d399; }
.ms-year-month-pct.orange { background: rgba(251,191,36,0.15); color: #fbbf24; }
.ms-year-month-pct.gray { background: var(--bg-card); color: var(--text-muted); }
.ms-year-item {
    font-size: 12px;
    padding: 4px 0;
    color: var(--text-dim);
    display: flex;
    gap: 6px;
    align-items: center;
}
.ms-year-item .ms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ms-dot.done { background: #34d399; }
.ms-dot.exceeded { background: #60a5fa; }
.ms-dot.in-progress { background: #fbbf24; }
.ms-dot.partial { background: #fb923c; }
.ms-dot.failed { background: #f87171; }
.ms-dot.pushed { background: #a855f7; }
.ms-dot.pending { background: var(--text-muted); }

/* Quotes banner */
.quotes-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 40px 48px 36px;
    margin-bottom: 28px;
    text-align: center;
    background: linear-gradient(135deg, rgba(129,140,248,0.12) 0%, rgba(96,165,250,0.08) 50%, rgba(52,211,153,0.1) 100%);
    border: 1px solid rgba(129,140,248,0.2);
    backdrop-filter: blur(8px);
}
.quotes-banner::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 24px;
    font-size: 140px;
    color: var(--accent);
    opacity: 0.08;
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.quotes-banner::after {
    content: '\201D';
    position: absolute;
    bottom: -60px;
    right: 24px;
    font-size: 140px;
    color: var(--accent);
    opacity: 0.08;
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.quote-text {
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--text);
    line-height: 1.7;
    letter-spacing: 0.2px;
    max-width: 700px;
    margin: 0 auto;
    transition: opacity 0.5s var(--ease);
}
.quote-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}
.quote-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    cursor: pointer;
    transition: all .25s var(--ease);
}
.quote-dot:hover { background: var(--accent); opacity: 0.6; transform: scale(1.3); }
.quote-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* Monthly summary grid */
.hab-monthly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.hab-monthly-col h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-bottom: 12px;
}
.hab-monthly-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.hab-monthly-row:last-child { border-bottom: none; }
.hab-monthly-label { color: var(--text); font-weight: 500; }
.hab-monthly-value { font-weight: 700; }
.hab-monthly-value.green { color: #34d399; }
.hab-monthly-value.orange { color: #fbbf24; }
.hab-monthly-value.red { color: #f87171; }

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

/* Section divider */
.big30-section-divider {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

/* Responsive */
@media (max-width: 900px) {
    .milestones-summary { grid-template-columns: repeat(2, 1fr); }
    .strava-big-stats { grid-template-columns: repeat(3, 1fr); }
    .strava-title { font-size: 36px; }
    .strava-feed-item { grid-template-columns: 1fr; }
    .strava-feed-map { height: 120px; }
    .habits-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .strava-big-stats { grid-template-columns: repeat(2, 1fr); }
    .strava-title { font-size: 28px; }
    .strava-stat-value { font-size: 22px; }
    .strava-hero { padding: 40px 16px 32px; }
    .strava-cities { grid-template-columns: 1fr; }
    .habits-summary { grid-template-columns: 1fr; }
    .habits-week-nav { flex-wrap: wrap; justify-content: center; }
    .habit-progress-row { flex-wrap: wrap; }
    .habit-progress-name { width: 100%; }
    .milestones-summary { grid-template-columns: 1fr; }
    .ms-year-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .strava-big-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   FINANCE TAB
   ============================================================ */

/* Month bar */
.finance-month-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 8px 0;
}
.finance-month-label {
    font-size: 20px;
    font-weight: 700;
    min-width: 180px;
    text-align: center;
}

/* Consistent vertical spacing within finance tab */
#section-finance .charts-grid { margin-bottom: 20px; }
#section-finance > .container > .card { margin-bottom: 20px; }

/* Summary cards */
.finance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.fin-income-icon { background: rgba(52,211,153,0.12); color: #34d399; }
.fin-expense-icon { background: rgba(248,113,113,0.12); color: #f87171; }
.fin-net-icon { background: rgba(129,140,248,0.12); color: #818cf8; }
.fin-avg-icon { background: rgba(251,191,36,0.12); color: #fbbf24; }

/* Table controls */
.fin-table-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fin-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.fin-select:focus, .fin-input:focus { outline: none; border-color: var(--accent); }
.fin-input {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    width: 90px;
}
.fin-input::placeholder { color: var(--text-muted); }

/* Exclude Jacksway toggle */
.fin-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    margin-left: 16px;
    white-space: nowrap;
}
.fin-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Exclude categories (multi-select next to the Jacksway toggle) */
.fin-cat-excl { position: relative; font-size: 13px; color: var(--text-dim); }
.fin-cat-excl summary { cursor: pointer; list-style: none; white-space: nowrap; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--bg-input); }
.fin-cat-excl summary::-webkit-details-marker { display: none; }
.fin-cat-excl summary::after { content: ' ▾'; font-size: 10px; }
.fin-cat-excl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 190px; max-height: 320px; overflow-y: auto; padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 2px; }
.fin-cat-excl-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--text); white-space: nowrap; }
.fin-cat-excl-item:hover { background: var(--bg-input); }
.fin-cat-excl-item input { accent-color: var(--accent); cursor: pointer; }
.fin-cat-excl-clear { margin-top: 6px; font-size: 11px; padding: 4px 10px; align-self: flex-start; }
.fin-filter-note { font-size: 12.5px; color: var(--text-dim); margin: -8px 0 14px; }
.fin-filter-note strong { color: var(--text); }
.fin-filter-note-warn { color: #fbbf24; }

/* Transaction table */
.fin-table-wrap {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}
.fin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fin-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.fin-table th {
    background: var(--bg-card);
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.fin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.fin-table tr:hover { background: var(--bg-card-hover); }
.fin-desc { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-notes { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 12px; }
.fin-credit { color: var(--success); font-weight: 600; }

/* Category badges */
.fin-cat-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Table footer */
.fin-table-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    font-weight: 500;
}

/* Budget Tracker */
.fin-budget-card { margin-bottom: 20px; }
.fin-budget-target {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}
.fin-budget-bar-wrap {
    width: 100%;
    height: 32px;
    background: var(--bg-input);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}
.fin-budget-bar {
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(90deg, #34d399, #22c55e);
    transition: width 0.6s ease, background 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    min-width: 50px;
}
.fin-budget-bar.warning { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fin-budget-bar.danger { background: linear-gradient(90deg, #f87171, #ef4444); }
.fin-budget-bar-label {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.fin-budget-details {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-dim);
}
.fin-budget-details strong { color: var(--text); }

/* Income Sources — compact stacked bar */
.fin-incsrc-bar {
    display: flex;
    height: 24px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-input);
    margin-bottom: 10px;
}
.fin-incsrc-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}
.fin-incsrc-bar-seg:hover { filter: brightness(1.15); }
.fin-incsrc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 13px;
    color: var(--text-dim);
}
.fin-incsrc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fin-incsrc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.fin-incsrc-legend-item strong { color: var(--text); margin-left: 2px; }
.fin-incsrc-empty {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    padding: 8px;
}

/* YTD Summary */
.fin-ytd-card { margin-bottom: 20px; }
.fin-ytd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.fin-ytd-item {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
}
.fin-ytd-value {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}
.fin-ytd-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fin-ytd-positive { color: var(--success); }
.fin-ytd-negative { color: var(--danger); }

/* YTD Month Table */
.fin-ytd-month-table {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.fin-ytd-month-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.fin-ytd-month-row.fin-ytd-6col {
    grid-template-columns: 80px 1fr 1fr 1fr 1fr 1fr;
}
.fin-ytd-jack-inc { color: #6366f1; }
.fin-ytd-jack-exp { color: #6366f1; opacity: 0.7; }
.fin-ytd-month-row span:not(:first-child) { text-align: right; font-weight: 600; }
.fin-ytd-month-header {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.fin-ytd-month-header span { font-weight: 700 !important; }
.fin-ytd-month-total {
    font-weight: 700;
    border-top: 2px solid var(--border);
    border-bottom: none;
}
.fin-ytd-month-name { font-weight: 600; }

/* YTD Date Range */
.fin-ytd-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}
.fin-ytd-range .fin-input {
    width: auto;
    font-size: 12px;
    padding: 4px 8px;
}

/* YTD Month-by-Month Collapsible */
.fin-ytd-month-toggle {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.fin-ytd-expand-icon {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fin-ytd-expand-icon::after {
    content: '';
    border: solid var(--text-dim);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
}
.fin-ytd-month-toggle.collapsed .fin-ytd-expand-icon::after {
    transform: rotate(-45deg);
}
.fin-ytd-month-rows {
    overflow: hidden;
    transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease);
    max-height: 2000px;
    opacity: 1;
}
.fin-ytd-month-rows.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Travel Trips */
.fin-trips-card { margin-bottom: 20px; }
.fin-trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.fin-trip-item {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 16px;
    border-left: 4px solid var(--accent);
}
.fin-trip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.fin-trip-emoji { font-size: 24px; }
.fin-trip-name {
    font-size: 16px;
    font-weight: 700;
}
.fin-trip-dates {
    font-size: 12px;
    color: var(--text-dim);
    margin-left: auto;
}
.fin-trip-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.fin-trip-stat-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.fin-trip-stat-value {
    font-size: 16px;
    font-weight: 700;
}
.fin-trip-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* AI Insights */
.fin-insights-card { margin-bottom: 20px; }
.fin-insights {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fin-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    font-size: 13px;
    line-height: 1.5;
}
.fin-insight-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.fin-insight-text { color: var(--text); }
.fin-insight-text strong { color: var(--text); font-weight: 700; }
.fin-insights-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}
.fin-insights-compact strong { font-weight: 700; }
.fin-insight-sep { color: var(--text-dim); opacity: 0.4; margin: 0 2px; }

/* Spending Heatmap */
.fin-heatmap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fin-heatmap-header {
    display: grid;
    grid-template-columns: 32px repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 2px;
}
.fin-heatmap-header span {
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
}
.fin-heatmap-row {
    display: grid;
    grid-template-columns: 32px repeat(7, 1fr);
    gap: 3px;
}
.fin-heatmap-week-label {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fin-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    min-height: 28px;
    position: relative;
    cursor: default;
    transition: transform 0.15s var(--ease);
}
.fin-heatmap-cell:hover {
    transform: scale(1.2);
    z-index: 2;
}
.fin-heatmap-cell[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    color: var(--text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    border: 1px solid var(--border);
    z-index: 10;
    pointer-events: none;
}
.fin-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
    justify-content: flex-end;
}
.fin-heatmap-legend-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

/* Smart Alerts */
.fin-alerts-card { margin-bottom: 20px; }
.fin-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fin-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.fin-alert-badge.amber {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.fin-alert-badge.red {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.fin-alert-badge.blue {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}
.fin-alert-badge.green {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

/* All-Time Trips Table */
.fin-all-trips-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fin-all-trips-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.fin-all-trips-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.fin-all-trips-table tr:last-child td { border-bottom: none; }
.fin-all-trips-table tr:hover td { background: var(--bg-input); }
.fin-all-trips-table .trip-emoji { font-size: 18px; }
.fin-all-trips-table .trip-name { font-weight: 600; }

/* Collapsible Sections */
.fin-collapsible .fin-collapse-toggle {
    cursor: pointer;
    user-select: none;
}
.fin-collapse-icon {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease);
}
.fin-collapse-icon::after {
    content: '';
    border: solid var(--text-dim);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
}
.fin-collapsible.collapsed .fin-collapse-icon::after {
    transform: rotate(-45deg);
}
.fin-collapse-body {
    overflow: hidden;
    transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease), padding 0.3s var(--ease);
}
.fin-collapsible.collapsed .fin-collapse-body {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* CSV Export Button */
.fin-export-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s var(--ease);
}
.fin-export-btn:hover { opacity: 0.85; }

/* Responsive */
@media (max-width: 768px) {
    .finance-summary { grid-template-columns: repeat(2, 1fr); }
    .fin-table-controls { gap: 6px; }
    .fin-select { font-size: 12px; padding: 5px 8px; }
    .fin-all-trips-table { font-size: 11px; }
    .fin-all-trips-table th, .fin-all-trips-table td { padding: 6px; }
}
@media (max-width: 480px) {
    .finance-summary { grid-template-columns: 1fr; }
    .finance-month-label { font-size: 16px; min-width: 140px; }
}

/* ==================== HYROX TAB ==================== */
/* ==================== HYROX TAB — race-bib design (scoped) ==================== */
#section-hyrox {
    --hyx-bg: #0f1012; --hyx-panel: #17181c; --hyx-ink: #f2f0e7; --hyx-dim: #98958a; --hyx-line: #26272d;
    --hyx-accent: #ffd215; --hyx-accent-text: #ffd215; --hyx-accent-ink: #171204;
    --hyx-good: #46d17e; --hyx-good-bg: rgba(70,209,126,.13); --hyx-miss: #ff7a55; --hyx-miss-bg: rgba(255,122,85,.12);
    --hyx-warn: #fbbf24; --hyx-row: rgba(255,255,255,.03);
    --hyx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--hyx-bg); color: var(--hyx-ink);
}
[data-theme="light"] #section-hyrox {
    --hyx-bg: #f6f5f0; --hyx-panel: #ffffff; --hyx-ink: #1a1912; --hyx-dim: #6d6a5e; --hyx-line: #e4e2d7;
    --hyx-accent: #ffd215; --hyx-accent-text: #8a6c00; --hyx-accent-ink: #171204;
    --hyx-good: #1d9e57; --hyx-good-bg: rgba(29,158,87,.12); --hyx-miss: #d1481f; --hyx-miss-bg: rgba(209,72,31,.1);
    --hyx-warn: #d97706; --hyx-row: rgba(0,0,0,.025);
}
#section-hyrox .card { background: var(--hyx-panel); border: 1px solid var(--hyx-line); border-radius: 8px; box-shadow: none; }
#section-hyrox .card:hover { box-shadow: none; }
#section-hyrox .card-header { border-bottom: 1px solid var(--hyx-line); }
#section-hyrox .card-header h2 { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--hyx-ink); }
#section-hyrox .chart-body canvas { color: var(--hyx-ink); }

/* Hero — the bib */
.hyx-hero { padding: 20px 26px 18px; margin-bottom: 20px; border-bottom: 3px solid var(--hyx-accent) !important; }
.hyx-hero-inner { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.hyx-hero-count { min-width: 195px; display: flex; flex-direction: column; }
.hyx-hero-race { order: -1; font-family: var(--hyx-mono); font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--hyx-dim); margin-bottom: 2px; }
.hyx-hero-num { font-size: 72px; font-weight: 900; line-height: 1; color: var(--hyx-ink); letter-spacing: -4px; font-variant-numeric: tabular-nums; }
.hyx-hero-cap { font-family: var(--hyx-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--hyx-dim); margin: 4px 0 10px; }
.hyx-hero-goal { font-size: 12.5px; color: var(--hyx-dim); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hyx-hero-goal strong { background: var(--hyx-accent); color: var(--hyx-accent-ink); font-family: var(--hyx-mono); font-weight: 800; font-size: 13px; padding: 2px 9px; border-radius: 3px; }
.hyx-hero-goal span { color: var(--hyx-dim); }
.hyx-hero-mid { flex: 1; min-width: 300px; }
.hyx-phasebar-wrap { position: relative; padding-top: 18px; }
.hyx-phasebar { display: flex; gap: 3px; height: 10px; }
.hyx-seg { background: var(--hyx-line); border-radius: 2px; overflow: hidden; }
.hyx-seg-fill { height: 100%; background: var(--hyx-accent); border-radius: 2px; }
.hyx-now { position: absolute; top: 15px; width: 2px; height: 16px; background: var(--hyx-ink); border-radius: 2px; transform: translateX(-1px); }
.hyx-flag { position: absolute; top: -2px; transform: translateX(-50%); font-size: 12px; }
.hyx-phasebar-labels { display: flex; gap: 3px; margin-top: 6px; }
.hyx-seg-label { font-family: var(--hyx-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--hyx-dim); text-align: center; overflow: hidden; white-space: nowrap; }
.hyx-seg-label.cur { color: var(--hyx-accent-text); font-weight: 700; }
.hyx-hero-stats { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hyx-stat { font-size: 12px; padding: 4px 11px; border-radius: 4px; background: var(--hyx-row); border: 1px solid var(--hyx-line); color: var(--hyx-dim); }
.hyx-stat b { color: var(--hyx-ink); }
.hyx-hero-weight { min-width: 155px; text-align: right; }
.hyx-w-now { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.hyx-w-now span { font-size: 13px; font-weight: 600; color: var(--hyx-dim); letter-spacing: 0; }
.hyx-w-bar { height: 6px; background: var(--hyx-line); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.hyx-w-fill { height: 100%; background: var(--hyx-good); border-radius: 3px; }
.hyx-w-scale { display: flex; justify-content: space-between; font-family: var(--hyx-mono); font-size: 10px; color: var(--hyx-dim); }
.hyx-w-sub { font-family: var(--hyx-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--hyx-dim); margin-top: 6px; }

/* Today card — yellow band */
.hyx-today-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--hyx-accent); border-radius: 7px 7px 0 0; border-bottom: none !important; }
.hyx-today-header h2 { color: var(--hyx-accent-ink) !important; font-weight: 900 !important; }
.hyx-chiprow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hyx-today-header .hyx-chip, .hyx-today-header .hyx-pill { background: rgba(23,18,4,.10); color: var(--hyx-accent-ink); }
.hyx-today-workout { font-size: 18px; font-weight: 800; margin-bottom: 10px; text-wrap: balance; }
.hyx-today-list { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--hyx-ink); }
.hyx-today-list li { position: relative; padding-left: 14px; }
.hyx-today-list li::before { content: '–'; position: absolute; left: 0; color: var(--hyx-accent-text); font-weight: 700; }
.hyx-today-logged { font-size: 13px; padding: 9px 12px; border-radius: 6px; background: var(--hyx-good-bg); color: var(--hyx-good); margin-bottom: 10px; }
.hyx-today-logged.dim { background: var(--hyx-row); color: var(--hyx-dim); }
.hyx-tomorrow { font-size: 12.5px; color: var(--hyx-dim); border-top: 1px solid var(--hyx-line); padding-top: 10px; }
.hyx-tomorrow strong { color: var(--hyx-ink); font-weight: 600; }

/* Week strip */
.hyx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.hyx-wday { background: var(--hyx-row); border: 1px solid var(--hyx-line); border-radius: 6px; padding: 10px; cursor: pointer; min-height: 84px; transition: border-color .15s; }
.hyx-wday:hover { border-color: var(--hyx-accent); }
.hyx-wday.off { opacity: .35; cursor: default; }
.hyx-wday.is-today { border-color: var(--hyx-accent); background: rgba(255,210,21,.08); box-shadow: inset 0 2px 0 var(--hyx-accent); }
.hyx-wday.is-past { opacity: .62; }
.hyx-wday.st-hit { border-left: 3px solid var(--hyx-good); }
.hyx-wday.st-miss { border-left: 3px solid var(--hyx-miss); }
.hyx-wd-top { display: flex; justify-content: space-between; align-items: baseline; }
.hyx-wd-dow { font-family: var(--hyx-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hyx-dim); }
.hyx-wd-glyph { font-size: 11px; color: var(--hyx-good); font-weight: 700; }
.hyx-wday.st-miss .hyx-wd-glyph { color: var(--hyx-miss); }
.hyx-wd-num { font-size: 12px; color: var(--hyx-dim); }
.hyx-wd-title { font-size: 12px; font-weight: 600; margin: 6px 0 4px; line-height: 1.35; color: var(--hyx-ink); }
.hyx-wd-diet { font-family: var(--hyx-mono); font-size: 10.5px; color: var(--hyx-dim); }

/* Tables */
.hyx-table-wrap { overflow-x: auto; }
.hyx-sched-wrap { max-height: 640px; overflow-y: auto; position: relative; }
.hyx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hyx-table th { position: sticky; top: 0; background: var(--hyx-panel); text-align: left; padding: 6px 10px 8px; font-family: var(--hyx-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--hyx-dim); border-bottom: 1px solid var(--hyx-line); z-index: 1; }
.hyx-table td { padding: 8px 10px; border-bottom: 1px solid var(--hyx-line); vertical-align: top; }
.hyx-table tr:last-child td { border-bottom: none; }
.hyx-target { color: var(--hyx-accent-text); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hyx-bench-title { font-family: var(--hyx-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--hyx-dim); margin: 16px 0 6px; }
.hyx-bench-title:first-child { margin-top: 0; }
.hyx-dim { color: var(--hyx-dim); font-size: 12px; }
.hyx-delta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.hyx-delta.hard { background: var(--hyx-miss-bg); color: var(--hyx-miss); }
.hyx-delta.ease { background: var(--hyx-good-bg); color: var(--hyx-good); }

/* Rules */
.hyx-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hyx-rule { display: flex; gap: 10px; align-items: flex-start; background: var(--hyx-row); border: 1px solid var(--hyx-line); border-radius: 6px; padding: 12px; }
.hyx-rule-ic { font-size: 18px; line-height: 1.2; }
.hyx-rule-name { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; color: var(--hyx-ink); }
.hyx-rule-txt { font-size: 12px; color: var(--hyx-dim); line-height: 1.45; }

.hyx-jump { background: var(--hyx-accent); color: var(--hyx-accent-ink); border: none; border-radius: 4px; padding: 5px 13px; font-family: var(--hyx-mono); font-size: 12px; font-weight: 800; cursor: pointer; }
.hyx-jump:hover { filter: brightness(.92); }

/* Schedule */
.hyx-phase-row td { background: var(--hyx-row); font-family: var(--hyx-mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--hyx-accent-text); padding: 8px 10px; cursor: pointer; user-select: none; }
.hyx-caret { display: inline-block; width: 12px; color: var(--hyx-dim); }
.hyx-date { white-space: nowrap; color: var(--hyx-dim); font-family: var(--hyx-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.hyx-workout-title { font-weight: 700; margin-bottom: 3px; color: var(--hyx-ink); }
.hyx-details { font-size: 11.5px; color: var(--hyx-dim); line-height: 1.5; }
.hyx-logged { font-size: 12px; }
.hyx-sched { table-layout: fixed; }
.hyx-c-day { width: 76px; } .hyx-c-diet { width: 104px; } .hyx-c-log { width: 30%; }
.hyx-sched td { overflow-wrap: anywhere; }
.hyx-note { color: var(--hyx-dim); font-size: 11.5px; line-height: 1.45; margin-top: 4px; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hyx-note.open { -webkit-line-clamp: unset; display: block; }
.hyx-note:hover { color: var(--hyx-ink); }
.hyx-status { font-weight: 700; color: var(--hyx-good); }
.hyx-today-row td { background: var(--hyx-row); border-top: 1px solid var(--hyx-line); border-bottom: 1px solid var(--hyx-line); }
.hyx-today-row td:first-child { box-shadow: inset 3px 0 0 var(--hyx-accent); }
.hyx-past-row { opacity: .68; }
.hyx-flash td { background: rgba(255,210,21,.14); transition: background .4s; }

/* Chips & pills */
.hyx-chip { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--hyx-row); border: 1px solid var(--hyx-line); color: var(--hyx-dim); }
.hyx-chip-td { background: rgba(96,165,250,.13); border-color: transparent; color: #60a5fa; }
.hyx-chip-tb { background: rgba(248,113,113,.13); border-color: transparent; color: #f87171; }
.hyx-chip-rd { background: var(--hyx-row); color: var(--hyx-dim); }
.hyx-chip-mt { background: var(--hyx-good-bg); border-color: transparent; color: var(--hyx-good); }
.hyx-chip-cl { background: rgba(255,210,21,.14); border-color: transparent; color: var(--hyx-accent-text); }
.hyx-chip-race { background: var(--hyx-accent); border-color: transparent; color: var(--hyx-accent-ink); }
.hyx-chip-pre { opacity: .6; }
.hyx-pill { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hyx-pill-p { background: var(--protein-bg); color: var(--protein); }
.hyx-pill-c { background: var(--carbs-bg); color: var(--carbs); }
.hyx-pill-f { background: var(--fat-bg); color: var(--fat); }
[data-theme="light"] #section-hyrox .hyx-chip-td { background: rgba(37,99,235,.1); color: #2563eb; }
[data-theme="light"] #section-hyrox .hyx-chip-tb { background: rgba(220,38,38,.1); color: #dc2626; }

@media (max-width: 1100px) {
    .hyx-c-log, .hyx-sched td:nth-child(4), .hyx-sched th:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
    .hyx-week { grid-template-columns: repeat(4, 1fr); }
    .hyx-hero-weight { text-align: left; }
}
@media (max-width: 768px) {
    .hyx-details { display: none; }
    .hyx-sched-wrap { max-height: 70vh; }
    .hyx-week { grid-template-columns: repeat(2, 1fr); }
    .hyx-hero-num { font-size: 48px; letter-spacing: -2px; }
}

.hyx-det { position: relative; padding-left: 12px; margin-bottom: 2px; }
.hyx-det::before { content: '–'; position: absolute; left: 0; color: var(--hyx-accent-text); opacity: .8; }
.hyx-det strong, .hyx-today-list strong { color: var(--hyx-accent-text); font-weight: 700; }

.hyx-fuel-summary { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; text-align: right; font-family: var(--hyx-mono); font-size: 11.5px; color: var(--hyx-dim); }
.hyx-fuel-stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hyx-fuel-stat b.good { color: var(--hyx-good); }
.hyx-fuel-stat b.over { color: var(--hyx-warn); }

/* ==================== RESEARCH TAB ==================== */
.rs-hero { padding: 24px 26px; margin-bottom: 18px; }
.rs-hero-k { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); }
.rs-hero-t { margin: 5px 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.rs-hero-s { margin: 0 0 16px; font-size: 14px; color: var(--text-dim); max-width: 56ch; }
.rs-hero-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }
.rs-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.rs-filter { background: var(--bg-input); color: var(--text-dim); border: 1px solid transparent; border-radius: 16px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.rs-filter:hover { border-color: var(--border-light); }
.rs-filter.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.rs-count { font-size: 12px; color: var(--text-muted); }

.rs-topics { display: flex; flex-direction: column; gap: 12px; }
.rs-topic { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rs-topic summary { list-style: none; cursor: pointer; padding: 15px 20px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px; }
.rs-topic summary::-webkit-details-marker { display: none; }
.rs-topic summary:hover { background: var(--bg-card-hover); }
.rs-sum-main { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.rs-cat { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent);
  background: var(--accent-glow); padding: 3px 9px; border-radius: 10px; font-weight: 700; }
.rs-title { font-size: 17px; font-weight: 700; }
.rs-chev { color: var(--text-muted); font-size: 13px; transition: transform .18s; }
.rs-topic[open] .rs-chev { transform: rotate(180deg); }
.rs-body { padding: 4px 20px 22px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.rs-body > *:first-child { margin-top: 16px; }

.rs-verdict { background: var(--accent-glow); border-left: 3px solid var(--accent);
  padding: 12px 15px; border-radius: 0 8px 8px 0; font-size: 14.5px; }
.rs-h { margin: 6px 0 -4px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--text-muted); }
.rs-p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.rs-list { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 8px; font-size: 14.3px; line-height: 1.6; }
.rs-list li::marker { color: var(--accent); }
.rs-note { background: var(--bg-input); border-radius: 9px; padding: 12px 15px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
.rs-note strong { color: var(--text); }
.rs-quote { border-left: 3px solid var(--border-light); padding: 4px 0 4px 16px; font-size: 15px;
  font-style: italic; color: var(--text-dim); line-height: 1.6; }

.rs-tw { overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 320px; }
.rs-table th { text-align: left; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; padding: 0 12px 7px 0; border-bottom: 1px solid var(--border); }
.rs-table th:last-child, .rs-table td:last-child { padding-right: 0; }
.rs-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.rs-table tr:last-child td { border-bottom: none; }
.rs-table strong { color: var(--accent); }

@media (max-width: 640px) {
  .rs-hero { padding: 18px 16px; }
  .rs-hero-t { font-size: 26px; }
  .rs-topic summary { padding: 13px 15px; }
  .rs-body { padding: 4px 15px 18px; }
  .rs-title { font-size: 15.5px; }
}

/* ---- Weekly Performance card (Big 30) ---- */
.perf-card { margin-bottom: 22px; }
.perf-hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px;
    border-radius: 16px 16px 0 0; border: 1px solid var(--border); border-bottom: none;
    background: linear-gradient(135deg, color-mix(in srgb, currentColor 14%, transparent), transparent 70%); }
.perf-score-block { display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 116px; padding: 14px 18px; border-radius: 14px;
    background: color-mix(in srgb, currentColor 16%, transparent); border: 2px solid currentColor; }
.perf-grade { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.perf-num { font-size: 15px; font-weight: 600; opacity: .8; margin-top: 4px; }
.perf-num span { font-size: 11px; opacity: .6; }
.perf-hero-meta { flex: 1; min-width: 0; }
.perf-hero-title { font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.perf-hero-range { font-size: 13px; color: var(--text-dim); margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.perf-delta { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    background: var(--border); color: var(--text-dim); }
.perf-delta.up { background: color-mix(in srgb, #22c55e 20%, transparent); color: #22c55e; }
.perf-delta.down { background: color-mix(in srgb, #ef4444 20%, transparent); color: #ef4444; }
.perf-hero-note { font-size: 12.5px; color: var(--text-dim); margin-top: 7px; }
.perf-hero-note b { color: var(--text); }
.perf-rows { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px;
    border: 1px solid var(--border); border-radius: 0 0 16px 16px; background: var(--card); }
.perf-row-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.perf-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
.perf-row-weight { font-size: 11px; color: var(--text-dim); }
.perf-row-score { margin-left: auto; font-size: 16px; font-weight: 700; }
.perf-bar { height: 8px; border-radius: 5px; background: var(--border); overflow: hidden; }
.perf-bar-fill { height: 100%; border-radius: 5px; transition: width .35s ease; }
.perf-row-detail { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }
.perf-good { color: #22c55e; } .perf-bar-fill.perf-good { background: #22c55e; }
.perf-ok   { color: #84cc16; } .perf-bar-fill.perf-ok   { background: #84cc16; }
.perf-mid  { color: #eab308; } .perf-bar-fill.perf-mid  { background: #eab308; }
.perf-low  { color: #f97316; } .perf-bar-fill.perf-low  { background: #f97316; }
.perf-bad  { color: #ef4444; } .perf-bar-fill.perf-bad  { background: #ef4444; }
.perf-none { color: var(--text-dim); } .perf-bar-fill.perf-none { background: var(--border); }
@media (max-width: 640px) {
    .perf-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
    .perf-score-block { min-width: 0; align-self: stretch; flex-direction: row; gap: 12px; }
    .perf-grade { font-size: 34px; } .perf-num { margin-top: 0; align-self: center; }
    .perf-rows { padding: 16px 18px 18px; }
}
.perf-nav { display: flex; gap: 6px; align-self: flex-start; }
.perf-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card); color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.perf-nav button:hover { color: var(--text); border-color: var(--text-dim); }
.perf-live { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
    background: color-mix(in srgb, #eab308 20%, transparent); color: #eab308; }

/* ============================================================
   BIG 30 — facelift (Sep 22 2026). Scoped to #section-big30 so the
   shared .card / .summary-card rules on other tabs are untouched.
   ============================================================ */

/* Section headers: eyebrow + title, one hairline */
#section-big30 .big30-section-divider {
    display: flex; align-items: baseline; gap: 14px;
    margin: 46px 0 18px; padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
}
#section-big30 .big30-section-divider h2 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin: 0; color: var(--text); }
#section-big30 .b30-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }

/* Quotes: the perf card is the hero now, so this becomes a quiet interstitial */
#section-big30 .quotes-banner {
    padding: 20px 26px 16px; margin: 0 0 8px; text-align: left;
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    backdrop-filter: none; border-radius: var(--radius-sm);
}
#section-big30 .quotes-banner::before, #section-big30 .quotes-banner::after { display: none; }
#section-big30 .quote-text { font-size: 15.5px; font-weight: 500; font-style: italic; color: var(--text-dim); line-height: 1.6; max-width: none; margin: 0; }
#section-big30 .quote-dots { justify-content: flex-start; margin-top: 12px; gap: 6px; }
#section-big30 .quote-dot { width: 6px; height: 6px; }
#section-big30 .quote-dot.active { width: 18px; }

/* Summary cards: styled globally in the "ALL TABS" block below */
#section-big30 .habits-summary, #section-big30 .milestones-summary { margin-bottom: 20px; }

/* Cards: consistent rhythm, lighter headers */
#section-big30 .card.full-width { margin-bottom: 20px; }
#section-big30 .card-header { padding: 16px 22px; }
#section-big30 .card-header h2 { font-size: 14px; letter-spacing: -.1px; }
#section-big30 .habits-nav-btn { padding: 5px 12px; font-size: 12.5px; border-radius: 20px; }
#section-big30 .habits-week-label { font-size: 13.5px; min-width: 160px; }

/* Weekly View grid */
#section-big30 .habits-week-body { padding: 8px 14px 18px; }
#section-big30 .habits-week-grid { gap: 0; grid-template-columns: 150px repeat(7, 1fr) 84px; }
#section-big30 .hw-header { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; letter-spacing: .8px; }
#section-big30 .hw-dow { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
#section-big30 .hw-dom { font-size: 12px; font-weight: 600; color: var(--text-dim); width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; }
#section-big30 .hw-header.hw-today .hw-dow { color: var(--accent); }
#section-big30 .hw-header.hw-today .hw-dom { background: var(--accent); color: #fff; }
#section-big30 .hw-label, #section-big30 .hw-cell, #section-big30 .hw-total-wrap { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
#section-big30 .hw-label { font-size: 13px; padding: 7px 10px; color: var(--text); }
#section-big30 .hw-cell { padding: 6px 4px; }
#section-big30 .hw-cell.hw-today { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#section-big30 .hw-cell.hw-future { opacity: .4; }
#section-big30 .hw-section { padding: 16px 10px 6px; border-bottom: none; font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-muted); }
#section-big30 .hw-section:first-of-type { padding-top: 6px; }
#section-big30 .hw-total { font-size: 12px; font-weight: 700; padding: 5px 6px; margin: 5px 4px; border-radius: 20px; align-self: center; }

/* Checkboxes: no more native white squares */
#section-big30 .habit-check {
    appearance: none; -webkit-appearance: none;
    width: 26px; height: 26px; margin: 0; border-radius: 8px;
    border: 1.5px solid var(--border-light); background: var(--bg-input);
    cursor: pointer; position: relative; transition: all .15s var(--ease);
}
#section-big30 .habit-check:hover { border-color: #34d399; transform: scale(1.06); }
#section-big30 .habit-check:checked { background: #34d399; border-color: #34d399; }
#section-big30 .habit-check:checked::after {
    content: ''; position: absolute; left: 8px; top: 3.5px; width: 6px; height: 12px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* A past day with nothing logged at all: dashed, so "not recorded" reads differently from "recorded as no" */
#section-big30 .hw-unlogged .habit-check:not(:checked) { border-style: dashed; background: transparent; }

/* Number inputs: ghost until you touch them */
#section-big30 .habit-input {
    width: 54px; padding: 6px 4px; font-size: 13px; font-weight: 600;
    background: transparent; border: 1.5px solid transparent; border-radius: 8px; color: var(--text);
    -moz-appearance: textfield;
}
#section-big30 .habit-input::-webkit-outer-spin-button, #section-big30 .habit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#section-big30 .habit-input::placeholder { color: var(--text-muted); font-weight: 400; }
#section-big30 .habit-input:hover { border-color: var(--border-light); background: var(--bg-input); }
#section-big30 .habit-input:focus { outline: none; border-color: var(--accent); background: var(--bg-input); }
#section-big30 .hw-unlogged .habit-input:placeholder-shown { border-style: dashed; border-color: color-mix(in srgb, var(--border-light) 60%, transparent); }

/* Monthly Summary: label · bar · value */
#section-big30 .hab-monthly-grid { gap: 12px 40px; }
#section-big30 .hab-monthly-col h3 { font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-muted); margin-bottom: 8px; }
#section-big30 .hab-monthly-row { display: grid; grid-template-columns: 1fr 110px 96px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
#section-big30 .hab-monthly-label { font-size: 13px; font-weight: 500; }
#section-big30 .hab-monthly-bar { height: 6px; border-radius: 4px; background: var(--bg-input); overflow: hidden; display: block; }
#section-big30 .hab-monthly-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; transition: width .35s var(--ease); }
#section-big30 .hab-monthly-fill.green { background: #34d399; }
#section-big30 .hab-monthly-fill.orange { background: #fbbf24; }
#section-big30 .hab-monthly-fill.red { background: #f87171; }
#section-big30 .hab-monthly-value { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#section-big30 .hab-monthly-value em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); margin-left: 6px; }

/* Heatmap: a touch bigger */
#section-big30 .habits-heatmap-day { width: 15px; height: 15px; border-radius: 3.5px; }

/* Milestones table + year overview */
#section-big30 .ms-table th { padding: 8px 12px; font-size: 10.5px; letter-spacing: 1.2px; color: var(--text-muted); border-bottom-width: 1px; }
#section-big30 .ms-year-month { background: var(--bg-input); border: 1px solid transparent; transition: all .2s var(--ease); }
#section-big30 .ms-year-month:hover { border-color: var(--border-light); transform: translateY(-1px); }
#section-big30 .ms-year-month-title { margin-bottom: 8px; }
#section-big30 .ms-year-bar { height: 5px; border-radius: 3px; background: var(--bg-card); overflow: hidden; margin: 0 0 12px; }
#section-big30 .ms-year-bar span { display: block; height: 100%; border-radius: 3px; }
#section-big30 .ms-year-bar .green { background: #34d399; }
#section-big30 .ms-year-bar .orange { background: #fbbf24; }
#section-big30 .ms-year-bar .gray { background: var(--border-light); }
#section-big30 .ms-year-item { padding: 5px 0; line-height: 1.35; }

/* Data management: the least important thing on the page should look like it */
#section-big30 .habit-data-mgmt { padding: 16px 22px; }
#section-big30 .habit-mgmt-btn { padding: 8px 18px; font-size: 12.5px; border-radius: 20px; }
#section-big30 .habit-mgmt-btn.export-btn { background: var(--bg-input); color: var(--text); border-color: var(--border); }
#section-big30 .habit-mgmt-btn.export-btn:hover { border-color: var(--accent); opacity: 1; }

@media (max-width: 640px) {
    #section-big30 .big30-section-divider { flex-direction: column; gap: 4px; }
    #section-big30 .hab-monthly-row { grid-template-columns: 1fr 70px 90px; gap: 8px; }
}
#section-big30 .hw-total-wrap { display: flex; align-items: center; justify-content: center; padding: 5px 4px; }
#section-big30 .hw-total { margin: 0; display: inline-block; }

/* ============================================================
   ALL TABS — facelift (Sep 22 2026). Global by design: these are the
   shared pieces (summary cards, card headers, tables, buttons, toolbars).
   HYROX keeps its race-bib design; Research was already clean.
   ============================================================ */

/* Nav: quieter active pill, hover surface */
.nav-tab { padding: 7px 18px; border-radius: 7px; }
.nav-tab:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-tab.active { box-shadow: 0 1px 6px rgba(129,140,248,.25); }
.brand-icon { border-radius: 10px; }

/* Summary cards: big number, small uppercase label, colour rail that matches the icon */
.summary-card { position: relative; overflow: hidden; padding: 20px 22px 18px; gap: 16px; }
.summary-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-light); }
.summary-icon { width: 40px; height: 40px; border-radius: 10px; }
.summary-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.summary-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; }
.summary-card:has(.cal-icon)::before, .summary-card:has(.surplus-icon)::before, .summary-card:has(.steps-icon)::before,
.summary-card:has(.act-icon)::before, .summary-card:has(.habit-streak-icon)::before, .summary-card:has(.ms-done-icon)::before,
.summary-card:has(.fin-income-icon)::before { background: #34d399; }
.summary-card:has(.prot-icon)::before { background: #f472b6; }
.summary-card:has(.carb-icon)::before, .summary-card:has(.habit-week-icon)::before, .summary-card:has(.ms-pct-icon)::before { background: #60a5fa; }
.summary-card:has(.fat-icon)::before, .summary-card:has(.stress-icon)::before, .summary-card:has(.act-streak-icon)::before,
.summary-card:has(.habit-best-icon)::before, .summary-card:has(.ms-prog-icon)::before, .summary-card:has(.fin-avg-icon)::before { background: #fbbf24; }
.summary-card:has(.days-icon)::before, .summary-card:has(.sleep-icon)::before, .summary-card:has(.act-time-icon)::before,
.summary-card:has(.habit-days-icon)::before, .summary-card:has(.ms-total-icon)::before, .summary-card:has(.fin-net-icon)::before { background: #818cf8; }
.summary-card:has(.dist-icon)::before, .summary-card:has(.intensity-icon)::before, .summary-card:has(.act-types-icon)::before { background: #2dd4bf; }
.summary-card:has(.resp-icon)::before, .summary-card:has(.spo2-icon)::before, .summary-card:has(.act-dist-icon)::before { background: #38bdf8; }
.summary-card:has(.burn-icon)::before, .summary-card:has(.body-icon)::before, .summary-card:has(.act-cal-icon)::before { background: #fb923c; }
.summary-card:has(.hr-icon)::before, .summary-card:has(.act-hr-icon)::before, .summary-card:has(.fin-expense-icon)::before { background: #f87171; }
.summary-card:has(.hrv-icon)::before, .summary-card:has(.act-dur-icon)::before { background: #a78bfa; }
.summary-card.surplus-card::before { background: var(--success); }
.summary-card.deficit-card::before { background: var(--danger); }
.summary-card.surplus-card, .summary-card.deficit-card { border-color: var(--border); }
.tracker-summary, .garmin-summary, .activities-summary, .finance-summary { gap: 16px; margin-bottom: 20px; }

/* Card headers: lighter, tighter (HYROX overrides its own h2) */
.card-header { padding: 16px 22px; }
.card-header h2 { font-size: 14px; }
.card-badge { border-radius: 20px; }
.chart-body { padding: 18px 22px 22px; }
.charts-grid { gap: 20px; }

/* Calculator hero cards: same numeric voice as the summary cards */
.hero-card { padding: 22px 20px 20px; }
.hero-label { font-size: 11px; letter-spacing: .6px; }
.hero-value { font-size: 34px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

/* Tables: one header style everywhere, hairline rows */
.act-table th, .fin-table th, .fin-all-trips-table th, .ms-table th, .heatmap-table th.heatmap-month {
    font-size: 10.5px; letter-spacing: 1.2px; color: var(--text-muted); border-bottom-width: 1px;
}
.act-table td, .fin-table td, .fin-all-trips-table td, .ms-table td { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.act-table tr:hover td, .fin-table tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.act-type-badge, .fin-cat-badge, .ms-category { font-weight: 600; letter-spacing: .2px; }

/* Buttons and controls: pills, quieter secondaries */
.habits-nav-btn, .fin-export-btn, .filter-apply, .chart-range, .filter-preset { border-radius: 20px; font-family: inherit; }
.chart-controls, .filter-presets { border-radius: 20px; padding: 3px; }
.fin-export-btn { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.fin-export-btn:hover { opacity: 1; border-color: var(--accent); }
.fin-select, .fin-input { border-radius: 8px; }
.filter-group input[type="date"] { border-radius: 8px; }

/* Nutrition insight boxes */
.energy-stat { border-radius: 12px; }
.energy-label { font-size: 10.5px; letter-spacing: 1px; }
.highlight-row { border-radius: 10px; padding: 12px 16px; }
.highlight-label { font-size: 10.5px; letter-spacing: 1px; }

/* Finance: the month bar becomes a real toolbar instead of floating text */
.finance-month-bar {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 14px; margin-bottom: 20px; gap: 12px; box-shadow: var(--shadow-card);
}
.finance-month-label { font-size: 16px; min-width: 170px; }
.fin-toggle-label { margin-left: auto; }
.fin-ytd-item { border-radius: 12px; padding: 14px 16px; }
.fin-ytd-value { font-size: 20px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.fin-ytd-label { font-size: 10.5px; letter-spacing: 1px; color: var(--text-muted); }
.fin-budget-bar-wrap { border-radius: 10px; }
.fin-collapse-icon { width: 24px; height: 24px; border-radius: 6px; }
.fin-collapse-toggle:hover .fin-collapse-icon { background: var(--bg-input); }

/* Strava: OSM tiles, darkened by filter in dark mode; Leaflet chrome matches the theme */
[data-theme="dark"] #stravaMap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.88) saturate(.25); }
#stravaMap .leaflet-control-attribution { background: color-mix(in srgb, var(--bg-card) 85%, transparent); color: var(--text-muted); font-size: 10px; }
#stravaMap .leaflet-control-attribution a { color: var(--text-dim); }
#stravaMap .leaflet-bar { border: 1px solid var(--border); box-shadow: var(--shadow-card); }
#stravaMap .leaflet-bar a { background: var(--bg-card); color: var(--text); border-bottom-color: var(--border); }
#stravaMap .leaflet-bar a:hover { background: var(--bg-input); }
.strava-section-title { font-size: 20px; letter-spacing: -.3px; margin: 32px 0 14px; padding: 0 0 12px 4px; border-bottom: 1px solid var(--border); }
.strava-city-card { border-radius: var(--radius); }
.strava-city-name { font-size: 16px; }

@media (max-width: 640px) {
    .finance-month-bar { flex-wrap: wrap; justify-content: center; }
    .fin-toggle-label { margin-left: 0; width: 100%; justify-content: center; }
}

/* Finance collapsible headers: the value beside the title had no gap ("Budget TrackerTarget: …") */
.fin-collapse-toggle h2 + .fin-budget-target { margin-left: 12px; font-size: 12.5px; color: var(--text-dim); font-weight: 500; }

/* ============================================================
   TAB IDENTITY (Sep 22 2026) — every tab except HYROX and Big 30 gets an
   accent, a hero band with its stats inside, and numbered section dividers.
   ============================================================ */
#section-tracker    { --tab-accent: #34d399; }
#section-garmin     { --tab-accent: #818cf8; }
#section-activities { --tab-accent: #2dd4bf; }
#section-strava     { --tab-accent: #FC4C02; }
#section-finance    { --tab-accent: #f59e0b; }
#section-calculator { --tab-accent: #a78bfa; }
#section-research   { --tab-accent: #60a5fa; }

/* Hero band */
.tab-hero {
    position: relative; overflow: hidden; padding: 30px 30px 26px; margin-bottom: 26px; border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--tab-accent) 28%, var(--border));
    background:
        radial-gradient(900px 340px at 6% -30%, color-mix(in srgb, var(--tab-accent) 28%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--tab-accent) 6%, var(--bg-card)), var(--bg-card));
    box-shadow: var(--shadow-card);
}
.tab-hero::after {
    content: ''; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--tab-accent) 22%, transparent), transparent 68%);
}
.tab-hero-text { position: relative; display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.tab-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--tab-accent); }
.tab-hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.05; margin: 2px 0 0; color: var(--text); }
.tab-hero p { font-size: 14px; color: var(--text-dim); margin: 6px 0 0; max-width: 64ch; line-height: 1.5; }

/* Stat strip: the old row of boxes becomes one hairline grid inside the hero */
.stat-strip {
    position: relative; display: grid; gap: 1px; margin: 0; overflow: hidden; border-radius: 14px;
    background: color-mix(in srgb, var(--tab-accent) 22%, var(--border));
    border: 1px solid color-mix(in srgb, var(--tab-accent) 22%, var(--border));
    box-shadow: none;
}
.tracker-summary.stat-strip { grid-template-columns: repeat(6, 1fr); }
.garmin-summary.stat-strip, .activities-summary.stat-strip, .finance-summary.stat-strip, .hero-stats.stat-strip { grid-template-columns: repeat(4, 1fr); }
.stat-strip .summary-card, .stat-strip .hero-card {
    background: color-mix(in srgb, var(--bg-card) 82%, transparent); border: 0; border-radius: 0; box-shadow: none;
    flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; text-align: left;
}
.stat-strip .summary-card::before { display: none; }
.stat-strip .summary-card:hover, .stat-strip .hero-card:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--tab-accent) 7%, var(--bg-card)); }
.stat-strip .summary-icon { width: 34px; height: 34px; border-radius: 9px; }
.stat-strip .summary-value { font-size: 28px; letter-spacing: -.8px; }
.stat-strip .summary-label { color: var(--text-muted); }
.stat-strip .summary-card.surplus-card { background: color-mix(in srgb, var(--success) 9%, var(--bg-card)); }
.stat-strip .summary-card.deficit-card { background: color-mix(in srgb, var(--danger) 9%, var(--bg-card)); }
.stat-strip .hero-card::before { height: 3px; }
.stat-strip .hero-label { margin-bottom: 10px; }
.stat-strip .hero-value { font-size: 32px; }

/* Section dividers: work inside a charts-grid or as plain siblings */
.tab-divider { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin: 26px 0 4px; padding: 0 2px 12px; border-bottom: 1px solid var(--border); }
.charts-grid > .tab-divider:first-child { margin-top: 0; }
.tab-divider h2 { font-size: 19px; font-weight: 700; letter-spacing: -.4px; margin: 0; color: var(--text); }
#section-finance > .container > .tab-divider { margin: 30px 0 16px; }
#section-strava .tab-divider { margin: 30px 0 16px; }

/* Chart cards inside these tabs: an accent dot ties every card to its tab */
#section-tracker .card-header h2::before, #section-garmin .card-header h2::before, #section-activities .card-header h2::before,
#section-finance .card-header h2::before, #section-strava .card-header h2::before, #section-calculator .card-header h2::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent); margin-right: 9px; vertical-align: 1px;
}
#section-tracker .chart-range.active, #section-garmin .chart-range.active, #section-activities .chart-range.active,
#section-activities .act-hr-filter .filter-preset.active, #section-strava .strava-hr-filter .filter-preset.active,
#section-finance .chart-range.active { background: var(--tab-accent); color: #fff; }
#section-calculator .card-badge { background: color-mix(in srgb, var(--tab-accent) 16%, transparent); color: var(--tab-accent); }

/* Finance: the month toolbar lives inside the hero now */
.tab-hero .finance-month-bar { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 16px; justify-content: flex-start; position: relative; }
.tab-hero .finance-month-label { font-size: 18px; letter-spacing: -.3px; }
.tab-hero .finance-month-bar .habits-nav-btn:hover { background: var(--tab-accent); border-color: var(--tab-accent); }

/* Strava: hero keeps its brand; the old section titles are dividers now */
.strava-section-title { display: none; }

/* Research: same hero language, same accent */
#section-research .rs-hero {
    border: 1px solid color-mix(in srgb, var(--tab-accent) 28%, var(--border)); border-radius: 20px;
    background: radial-gradient(900px 340px at 6% -30%, color-mix(in srgb, var(--tab-accent) 26%, transparent), transparent 62%),
                linear-gradient(180deg, color-mix(in srgb, var(--tab-accent) 6%, var(--bg-card)), var(--bg-card));
}
#section-research .rs-hero-k { color: var(--tab-accent); font-weight: 800; }
#section-research .rs-filter.active, #section-research .rs-cat { background: var(--tab-accent); color: #fff; }
#section-research .rs-cat { background: color-mix(in srgb, var(--tab-accent) 16%, transparent); color: var(--tab-accent); }

@media (max-width: 900px) {
    .tracker-summary.stat-strip { grid-template-columns: repeat(3, 1fr); }
    .garmin-summary.stat-strip, .activities-summary.stat-strip, .finance-summary.stat-strip, .hero-stats.stat-strip { grid-template-columns: repeat(2, 1fr); }
    .tab-hero { padding: 24px 20px 20px; }
    .tab-hero h1 { font-size: 28px; }
}
/* Six-up strip on Nutrition: "+25,124 kcal" was wrapping onto two lines */
.tracker-summary.stat-strip .summary-value { font-size: 24px; white-space: nowrap; }

/* ==================== RECOMP (Oct 2026 →) + HYROX archive ==================== */
#section-recomp { --tab-accent: #fb7185; }
.hyx-archive-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-light); color: var(--text-dim); font-size: 13px; }
.rc-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rc-dim { color: var(--text-muted); font-size: 12px; }
.rc-strong { font-weight: 700; color: var(--tab-accent); }
.rc-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
    background: color-mix(in srgb, var(--tab-accent) 14%, transparent); color: var(--tab-accent); }
.rc-sub { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.rc-today-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
@media (max-width: 900px) { .rc-today-grid { grid-template-columns: 1fr; } }
.rc-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text); }
.rc-logged, .rc-note { margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-xs); font-size: 12.5px; color: var(--text-dim);
    background: color-mix(in srgb, var(--tab-accent) 7%, var(--bg-card)); }
.rc-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rc-macro { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rc-macro-k { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.rc-macro-v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.rc-macro-v span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.rc-macro-left { font-size: 11.5px; color: var(--success); margin-top: 2px; }
.rc-macro-left.over { color: var(--fat); }
.rc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 900px) { .rc-week { grid-template-columns: repeat(2, 1fr); } }
.rc-day { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 108px; display: flex; flex-direction: column; gap: 4px; }
.rc-day.today { border-color: var(--tab-accent); box-shadow: 0 0 0 1px var(--tab-accent) inset; }
.rc-day.future { opacity: .7; }
.rc-day.done { background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); }
.rc-day-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.rc-day-t { font-weight: 700; font-size: 13px; }
.rc-day-tags { display: flex; gap: 4px; }
.rc-day-tags span { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--bg-input); color: var(--text-dim); }
.rc-day-f, .rc-day-s { font-size: 11.5px; color: var(--text-dim); }
.rc-day.done .rc-day-s { color: var(--success); font-weight: 700; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rc-table th { text-align: left; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rc-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rc-table tr.rc-cur td { background: color-mix(in srgb, var(--tab-accent) 9%, transparent); }
.rc-rule { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.rc-rule:last-child { border-bottom: 0; }
.rc-rule b { color: var(--text); }
.rc-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); column-gap: 28px; }
.rc-rules .rc-rule:last-child { border-bottom: 1px solid var(--border); }
.rc-fuel-summary { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); }
.rc-fuel-summary b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-fuel-summary b.good { color: #34c072; }
.rc-fuel-summary b.over { color: #fbbf24; }
[data-theme="light"] .rc-fuel-summary b.good { color: #1d9e57; }
[data-theme="light"] .rc-fuel-summary b.over { color: #d97706; }
.rc-program { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rc-sess { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rc-sess-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.rc-sess-note { background: color-mix(in srgb, var(--tab-accent) 5%, var(--bg-card)); }
.rc-sched-wrap { max-height: 520px; overflow: auto; }
.rc-sched td:nth-child(n+4) { white-space: nowrap; }
.rc-summary.stat-strip { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .rc-summary.stat-strip { grid-template-columns: repeat(2, 1fr); } }
.rc-day.rc-hyrox { opacity: .75; }
.rc-day.rc-hyrox .rc-day-t { color: var(--text-dim); }
.rc-sess-next { border-color: var(--tab-accent); box-shadow: 0 0 0 1px var(--tab-accent) inset; }
.rc-lift-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rc-lift-controls .rc-dim { font-variant-numeric: tabular-nums; margin-right: 4px; }
#section-recomp select.rc-select { width: auto; max-width: 260px; padding: 6px 30px 6px 10px; font-size: 13px; border-radius: var(--radius-xs); background-position: right 10px center; }
.rc-lift-empty { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px; }
.rc-lift-body.is-empty canvas { display: none; }
.rc-lift-body.is-empty .rc-lift-empty { display: flex; }
.rc-next { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tab-accent); }

/* ==================== BANK (Plaid, Oct 7 2026) ==================== */
#section-bank { --tab-accent: #84cc16; }
#section-bank .card-header h2::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent); margin-right: 9px; vertical-align: 1px;
}
#section-bank > .container > .tab-divider { margin: 30px 0 16px; }
.bank-summary.stat-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .bank-summary.stat-strip { grid-template-columns: repeat(2, 1fr); } }
.bk-synced { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.bk-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bk-empty { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--border-light); color: var(--text-dim); font-size: 13px; }
.bk-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.bk-group .card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-group-total { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.bk-acct { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.bk-acct:first-child { border-top: 0; padding-top: 0; }
.bk-acct-main { flex: 1; min-width: 0; }
.bk-acct-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-acct-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bk-acct-bal { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-cur { margin-left: 5px; font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--tab-accent) 16%, transparent); color: var(--tab-accent); vertical-align: 2px; }
.bk-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 28px; }
.bk-cat-top { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.bk-cat-name { font-weight: 600; color: var(--text); }
.bk-cat-n { font-size: 11px; color: var(--text-muted); }
.bk-cat-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.bk-bar { height: 6px; border-radius: 999px; background: var(--border); margin: 6px 0 4px; overflow: hidden; }
.bk-bar span { display: block; height: 100%; border-radius: 999px; background: var(--tab-accent); }
.bk-cat-sub { font-size: 11px; color: var(--text-muted); }
.bk-note { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.bk-search { width: 220px; }
.bk-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-in { color: var(--success); }
.bk-date { white-space: nowrap; color: var(--text-dim); }
.bk-tx-name { font-weight: 600; }
.bk-tx-desc { font-size: 11px; color: var(--text-muted); }
.bk-tx-acct { white-space: nowrap; color: var(--text-dim); }
.bk-pending td { opacity: .7; }
.bk-pill { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-muted); }
#section-bank .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#section-bank .card-header .fin-table-controls { flex-wrap: wrap; justify-content: flex-end; }
#section-bank .card-header .fin-select { width: auto; }
/* Net Worth (Bank tab reframed, Oct 7 2026) */
.nw-chart-wrap { position: relative; height: 280px; }
#section-bank .bk-groups + .bk-groups { margin-top: 0; }
.bk-group-total { text-align: right; }
.bk-group-native { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.bk-acct-bal { text-align: right; }
.bk-acct-conv { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.bk-inst { margin-left: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.nw-liability .bk-group-total { color: var(--danger); }
.nw-manual .bk-acct-name::after { content: 'manual'; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-muted); vertical-align: 1px; }
.nw-empty-note { margin-top: 0; }
.nw-empty-note code, #nwFootnote code { font-size: 11.5px; }
.nw-tx-hint { font-size: 12px; font-weight: 500; color: var(--text-muted); }
#section-bank .fin-collapse-toggle { cursor: pointer; }

/* ==================== CRYPTO (Oct 8 2026) — reuses the bk-* Net Worth styles ==================== */
#section-crypto { --tab-accent: #e879f9; }
#section-crypto .card-header h2::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent); margin-right: 9px; vertical-align: 1px;
}
#section-crypto > .container > .tab-divider { margin: 30px 0 16px; }
.cr-badge { display: inline-block; align-self: flex-start; width: fit-content; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.cr-badge-interim { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }
.cr-badge-live { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); }
.cr-mode-note { margin: 0 0 8px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--border-light); color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.cr-mode-note code { font-size: 11.5px; }
.cr-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); margin-bottom: 12px; }
.cr-stack span { display: block; height: 100%; }
.cr-type { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.cr-type:nth-child(2) { border-top: 0; }
.cr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cr-type-name { font-weight: 600; color: var(--text); }
.cr-type-pct { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-type-amt { min-width: 120px; text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cr-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px 16px; align-items: start; }
.cr-group-label { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tab-accent); }
.cr-platform { margin: 0; }
.cr-platform > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; }
.cr-platform > summary::-webkit-details-marker, .cr-wallet > summary::-webkit-details-marker { display: none; }
.cr-platform > summary h2 { flex: 1; }
.cr-platform:not([open]) > summary { border-bottom: 0; }
.cr-wallet { border-top: 1px solid var(--border); }
.cr-wallet:first-child { border-top: 0; }
.cr-wallet > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 13px; }
.cr-wallet > summary::before { content: '▸'; color: var(--text-muted); font-size: 11px; }
.cr-wallet[open] > summary::before { content: '▾'; }
.cr-wallet[data-empty] > summary { opacity: .55; }
.cr-wallet-name { font-weight: 600; color: var(--text); }
.cr-sum { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-cad { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.cr-asset { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 16px; border-top: 1px dashed var(--border); }
.cr-platform > .card-body > .cr-asset:first-child { border-top: 0; }
.cr-sym { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.cr-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-muted); vertical-align: 1px; }
.cr-tag-staked { color: #a855f7; border-color: color-mix(in srgb, #a855f7 45%, transparent); }
.cr-tag-stable { color: #38bdf8; border-color: color-mix(in srgb, #38bdf8 45%, transparent); }
.cr-tag-bet { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.cr-tag-nft { color: #ec4899; border-color: color-mix(in srgb, #ec4899 45%, transparent); }
.cr-warn { color: var(--danger); font-size: 12px; font-weight: 700; }
.nw-held .bk-group-total { color: var(--text-dim); }

/* ==================== ARCHIVE (Oct 8 2026) — archive.js; HYROX '26 is the first pane ==================== */
#section-archive { --tab-accent: #94a3b8; }
.ar-head { padding: 6px 0 16px; }
.ar-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin: 2px 0 0; color: var(--text); }
.ar-head p { font-size: 13.5px; color: var(--text-dim); margin: 4px 0 12px; }
.ar-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-pill { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ar-pill:hover { border-color: var(--tab-accent); }
.ar-pill.active { background: var(--tab-accent); color: #0f1012; border-color: var(--tab-accent); }
.ar-pane[hidden] { display: none; }
#section-archive > .container:first-child { padding-bottom: 0; }
#section-archive > .ar-pane > .container { padding-top: 8px; }

/* ==================== CARDS & POINTS (Oct 8 2026) — reuses the bk-* Net Worth styles ==================== */
#section-cards { --tab-accent: #38bdf8; }
#section-cards .card-header h2::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent); margin-right: 9px; vertical-align: 1px;
}
#section-cards > .container > .tab-divider { margin: 30px 0 16px; }
#section-cards .card-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.cd-prod-card + .cd-prod-card, .cd-gap { margin-top: 16px; }
.cd-table td { vertical-align: top; }
.cd-st-closed td, .cd-st-cancelled td { opacity: .55; }
.cd-status { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-muted); white-space: nowrap; }
.cd-status-open { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.cd-status-unknown { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.cd-status-cancelled { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cd-est { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px dashed var(--border-light); color: var(--text-muted); vertical-align: 1px; }
.cd-soon .bk-acct-name { color: var(--tab-accent); }
.cd-warn { color: #f59e0b; font-weight: 700; }
.cd-out { opacity: .55; }
.cd-steps { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }

/* ==================== JACKSWAY (Oct 8 2026) — reuses the bk-* Net Worth styles ==================== */
#section-jacksway { --tab-accent: #f97316; }
#section-jacksway .card-header h2::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent); margin-right: 9px; vertical-align: 1px;
}
#section-jacksway > .container > .tab-divider { margin: 30px 0 16px; }
#section-jacksway .card-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.jw-gap { margin-top: 16px; }
.nw-chart-wrap.jw-tall { height: 340px; }
.jw-neg { color: var(--danger); }
.jw-total td { font-weight: 800; border-top: 2px solid var(--border-light); }

/* Nav: 4 groups + sub-tab pills (Oct 9 2026, nav.js). Top bar always fits a phone; the pill row scrolls sideways. */
.nav-tab { white-space: nowrap; }
.brand-text { white-space: nowrap; }
.subnav { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-card) 60%, transparent); }
.subnav[hidden] { display: none; }
.subnav-pills { max-width: 1360px; margin: 0 auto; padding: 10px 28px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav-pills::-webkit-scrollbar { display: none; }
.sub-pill { flex: 0 0 auto; white-space: nowrap; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sub-pill:hover { border-color: var(--tab-accent); color: var(--text); }
.sub-pill.active { background: var(--tab-accent); color: #0f1012; border-color: var(--tab-accent); }
@media (max-width: 600px) {
    .topnav { gap: 8px; }
    .nav-tabs { gap: 2px; min-width: 0; }
    .nav-tab { padding: 6px 11px; font-size: 13px; }
    .subnav-pills { padding: 8px 16px; }
}
@media (max-width: 380px) { .nav-brand { display: none; } .nav-tab { padding: 6px 9px; } }

/* Net worth history as the centrepiece (Oct 8 2026) */
.nw-chart-wrap.nw-chart-big { height: 380px; }
.nw-bd-card { margin-top: 16px; }
.nw-ranges { display: flex; gap: 6px; }
.nw-range { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border-light); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.nw-range.active { background: var(--tab-accent); color: #0f1012; border-color: var(--tab-accent); }

/* ---- Finance: By Category + Top Merchants (Oct 15 2026) ---- */
.fin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 900px) { .fin-two-col { grid-template-columns: 1fr; } }
.fin-catb { display: flex; flex-direction: column; gap: 14px; }
.fin-catb-row { cursor: default; }
#finCatBudgets .fin-catb-row { cursor: pointer; }
.fin-catb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.fin-catb-name { font-weight: 600; color: var(--text); }
.fin-catb-caret { color: var(--text-muted); font-size: 11px; }
.fin-catb-amt { font-variant-numeric: tabular-nums; color: var(--text); }
.fin-catb-of { color: var(--text-muted); font-weight: 400; }
.fin-catb-track { height: 7px; border-radius: 4px; background: var(--bg-input); margin-top: 6px; overflow: hidden; }
.fin-catb-fill { height: 100%; border-radius: 4px; background: #34d399; transition: width .4s ease; }
.fin-catb-fill.warn { background: #f59e0b; }
.fin-catb-fill.over { background: #ef4444; }
.fin-catb-fill.merch { background: #f59e0b; }
.fin-catb-left { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fin-catb-over { color: var(--danger); }
.fin-catb-sub { margin: 6px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.fin-catb-sub div { display: flex; justify-content: space-between; padding: 2px 0; }

/* ============================================================
   MOBILE PASS (Oct 15 2026) — phones only. Desktop (>= 1024px) is untouched:
   every rule below sits inside a max-width query. Fixes horizontal overflow,
   stacks card headers, keeps menus on-screen, 2-up KPI grids, scrollable tables.
   ============================================================ */
@media (max-width: 900px) {
    /* Grid tracks were sized by min-content (tables, long rules), pushing cards past the screen */
    .charts-grid { grid-template-columns: minmax(0, 1fr); }
    .charts-grid > *, .fin-two-col > *, .bk-groups > *, .cr-platforms > *, .rc-program > * { min-width: 0; }
    .rc-rules { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
    .bk-groups { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
    .cr-platforms { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
    .bk-cats { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
}

@media (max-width: 640px) {
    /* No sideways page scroll, ever: wide content scrolls inside its own wrapper */
    html, body { overflow-x: clip; max-width: 100%; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* Top bar + sub-tab pills: comfortable tap targets, pill row swipes with a fade instead of a hard cut */
    .nav-tab { min-height: 40px; display: inline-flex; align-items: center; }
    .theme-toggle { min-width: 40px; min-height: 40px; }
    .subnav-pills { padding: 8px 16px; gap: 8px; scroll-padding-inline: 16px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent); }
    .sub-pill, .ar-pill { min-height: 40px; padding: 8px 16px; font-size: 13px; }

    /* Date filter bar (Nutrition / Garmin / Activities): compact 2x2 grid, not sticky (it ate a third of the screen) */
    .filter-bar { position: static; padding: 12px 0; }
    .filter-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; align-items: end; }
    .filter-group { flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
    .filter-group label { font-size: 11px; }
    .filter-group input[type="date"] { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; }
    .filter-presets { flex-wrap: nowrap; justify-content: space-between; }
    .filter-preset { flex: 1 1 0; min-height: 34px; padding: 6px 8px; }
    .filter-apply { min-height: 40px; }

    /* Tab hero band */
    .tab-hero { padding: 20px 16px 16px; margin-bottom: 20px; border-radius: 16px; }
    .tab-hero h1 { font-size: 26px; letter-spacing: -.8px; }
    .tab-hero p { font-size: 13.5px; }
    .tab-hero-text { margin-bottom: 16px; }
    .tab-divider { margin: 22px 0 4px; }
    .tab-divider h2 { font-size: 17px; }

    /* KPI strips: always 2-up on phones; an odd last card spans the row instead of leaving a hole */
    .section .stat-strip.stat-strip, .section .hero-stats.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stat-strip .summary-card, .stat-strip .hero-card { padding: 14px 14px 12px; gap: 8px; min-width: 0; }
    .stat-strip .summary-info { min-width: 0; max-width: 100%; }
    .stat-strip .summary-value, .tracker-summary.stat-strip .summary-value { font-size: 21px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-strip .hero-value { font-size: 24px; }
    .stat-strip .summary-icon { width: 30px; height: 30px; }
    .summary-label { font-size: 11px; letter-spacing: .4px; }

    /* Card headers: title on its own line (with the collapse chevron), subtitle/controls below, full width */
    .card-header { flex-wrap: wrap; row-gap: 10px; column-gap: 10px; padding: 14px 16px; }
    .card-header > h2 { flex: 1 1 0; min-width: 0; }
    .card-header > .fin-collapse-icon, .card-header > .fin-export-btn, .card-header > .hyx-jump { order: 1; }
    .card-header > .fin-budget-target, .card-header > .fin-ytd-range, .card-header > .fin-table-controls,
    .card-header > .rc-chiprow, .card-header > .rc-fuel-summary, .card-header > .rc-dim, .card-header > .rc-lift-controls,
    .card-header > .habits-week-nav, .card-header > .ms-month-nav, .card-header > .act-hr-filter, .card-header > .strava-hr-filter,
    .card-header > .strava-map-legend, .card-header > .nw-ranges, .card-header > .hyx-chiprow, .card-header > .hyx-fuel-summary,
    .card-header > .chart-controls {
        order: 2; flex: 1 1 100%; margin: 0 !important; min-width: 0;
    }
    .fin-collapse-toggle h2 + .fin-budget-target { margin-left: 0; }
    .card-body, .chart-body { padding-left: 16px; padding-right: 16px; }

    /* Prev / label / Next rows (Big 30 habits + milestones, Finance month) never overflow */
    .habits-week-nav, .ms-month-nav { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
    .habits-week-nav .habits-week-label, .ms-month-nav .habits-week-label,
    #section-big30 .habits-week-label { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; }
    .habits-nav-btn, #section-big30 .habits-nav-btn { min-height: 40px; padding: 6px 14px; white-space: nowrap; flex: 0 0 auto; }

    /* Shared form controls: 40px tap targets, 16px font on inputs so iOS doesn't zoom */
    .fin-select, .fin-input, .rc-select, #section-recomp select.rc-select { min-height: 40px; font-size: 16px; }
    .fin-export-btn, .nw-range, .filter-preset, .hyx-jump { min-height: 36px; }
    .act-hr-filter, .strava-hr-filter { display: flex; }
    .act-hr-filter .filter-preset, .strava-hr-filter .filter-preset { flex: 1 1 0; min-height: 36px; padding: 6px 4px; }

    /* Tables: smaller type, never break numbers or dates; the wrappers scroll sideways */
    .section th, .ar-pane th { font-size: 11px; }
    .fin-table { font-size: 12.5px; }
    .fin-table th, .fin-table td { padding: 8px 10px; }
    .fin-table td { white-space: nowrap; }
    .fin-table .fin-desc { max-width: 180px; }
    .fin-table-wrap, .ms-table-wrap, .rc-sched-wrap, .hyx-table-wrap, .rs-tw { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .rc-sched td:first-child, .rc-table td:first-child { white-space: nowrap; }
    .bk-num, .cr-sum, .bk-acct-bal, .bk-group-total { white-space: nowrap; }

    /* Small chips/labels: nothing under ~11px */
    .bk-cur, .bk-pill, .cd-status, .cd-est, .cr-tag, .rc-day-tags span, .rc-next, .rs-cat, .act-type-badge, .bk-inst, .cr-sym,
    .strava-feed-stat-lbl, .hw-dow, .hw-section, .energy-label, .highlight-label, .fin-ytd-label, .rc-hero-sub, .bk-hero-sub { font-size: 11px; }
    .nw-manual .bk-acct-name::after { font-size: 10.5px; }

    /* Recomp */
    .rc-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-fuel-summary { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
    #rcFuelChart { min-height: 0; }
    .card-body.chart-body:has(> #rcFuelChart) { height: 360px; }
    /* Weight chart taller on phones so the dots and projection are readable (Pavan, Oct 27 2026) */
    .card-body.chart-body:has(> #rcWeightChart) { height: 440px; }
    .rc-lift-controls { justify-content: flex-start; }
    #section-recomp select.rc-select { flex: 1 1 140px; max-width: none; }
    .rc-rule { font-size: 13px; }

    /* ---------- Money › Budget ---------- */
    /* Month toolbar: Prev | month | Next on one row, filters on the next */
    .tab-hero .finance-month-bar, .finance-month-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; position: relative; }
    .finance-month-label, .tab-hero .finance-month-label { flex: 1 1 0; min-width: 0; text-align: center; font-size: 16px; white-space: nowrap; }
    .finance-month-bar::before { content: ''; order: 2; flex: 0 0 100%; height: 0; margin-bottom: -8px; }
    .fin-toggle-label { order: 3; width: auto; margin: 0; flex: 1 1 auto; justify-content: flex-start; min-height: 40px; }
    .fin-toggle-label input[type="checkbox"] { width: 20px; height: 20px; }
    /* Exclude-categories menu anchors to the toolbar (full width), so it can't run off either edge */
    #section-finance .tab-hero { overflow: visible; }
    #section-finance .tab-hero::after { display: none; }
    .fin-cat-excl { order: 4; position: static; }
    .fin-cat-excl summary { min-height: 40px; display: flex; align-items: center; padding: 6px 12px; }
    .fin-cat-excl-menu { left: 0; right: 0; top: 100%; min-width: 0; max-width: calc(100vw - 32px); max-height: min(360px, 60vh);
        overflow-y: auto; overscroll-behavior: contain; z-index: 60; }
    .fin-cat-excl-item { min-height: 40px; padding: 6px 8px; white-space: normal; }
    .fin-cat-excl-item input { width: 18px; height: 18px; flex: none; }
    .fin-filter-note { margin: 0 0 12px; }

    /* All Time summary: 2-up totals, date range on its own row, month table scrolls with a sticky Month column */
    .card-header > .fin-ytd-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
    .fin-ytd-range .fin-input { min-width: 0; width: 100%; font-size: 15px; min-height: 40px; padding: 6px 8px; }
    .fin-ytd-range #finYtdReset { grid-column: 1 / -1; justify-self: start; min-height: 36px; font-size: 12px !important; padding: 6px 16px !important; }
    .fin-ytd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fin-ytd-item { padding: 12px 10px; min-width: 0; }
    .fin-ytd-item:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
    .fin-ytd-value { font-size: 17px; white-space: nowrap; }
    .fin-ytd-month-table { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 4px -16px 0; padding: 0 16px; }
    .fin-ytd-month-toggle, .fin-ytd-month-rows { min-width: 560px; }
    .fin-ytd-month-row, .fin-ytd-month-row.fin-ytd-6col { grid-template-columns: 70px repeat(5, minmax(0, 1fr)); gap: 8px; padding: 8px 30px 8px 0; font-size: 12px; }
    .fin-ytd-month-row:not(.fin-ytd-6col) { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
    .fin-ytd-month-row span { white-space: nowrap; font-variant-numeric: tabular-nums; }
    .fin-ytd-month-row > span:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); padding-left: 4px; }
    .fin-ytd-month-header { font-size: 11px; }

    /* Transactions: Export + chevron beside the title, filters as a 2-column grid underneath */
    .card-header > .fin-table-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .card-header > .fin-table-controls > * { width: 100%; min-width: 0; }
    .card-header > .fin-table-controls > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .fin-table-footer { font-size: 12.5px; padding: 10px 4px; gap: 10px; }

    .fin-catb-top { font-size: 13.5px; }
    .fin-budget-details { font-size: 13px; }
    .fin-all-trips-table td, .fin-all-trips-table th { white-space: nowrap; }
}

@media (max-width: 640px) {
    /* Big 30 */
    #section-big30 .habits-summary, #section-big30 .milestones-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #section-big30 .summary-card { padding: 14px; gap: 10px; min-width: 0; }
    #section-big30 .summary-icon { width: 34px; height: 34px; }
    #section-big30 .summary-value { font-size: 22px; }
    .perf-nav button { width: 40px; height: 40px; font-size: 18px; }

    /* Cards / Jacksway / Crypto headers: subtitle ("13 open · 20 total", "faded = projected…") goes under the title */
    .card-header > .bk-cat-n { order: 2; flex: 1 1 100%; margin: 0; }
    .card-header > .bk-cat-n + .bk-group-total { order: 1; }
    /* Activities log: dates and durations on one line (the log scrolls sideways) */
    .act-table td { white-space: nowrap; }
    /* HYROX archive: tables scroll instead of squeezing to one word per line; no text under 11px */
    #section-hyrox .hyx-table-wrap > .hyx-table { min-width: 480px; }
    #section-hyrox .hyx-wd-dow, #section-hyrox .hyx-w-sub, #section-hyrox .hyx-seg-label, #section-hyrox .hyx-bench-title,
    #section-hyrox .hyx-delta { font-size: 11px; }
    #section-big30 .hw-dow, #section-big30 .hw-section, #section-big30 .heatmap-month { font-size: 11px; }
}

@media (max-width: 380px) {
    .stat-strip .summary-value, .tracker-summary.stat-strip .summary-value { font-size: 19px; }
    .fin-ytd-value { font-size: 15.5px; }
}

/* Habit not due that day (e.g. every-3-days allergy pill, or a habit added later) — Oct 17 2026 */
.hw-na { color: var(--text-muted, #9aa0ab); font-size: 13px; opacity: .6; }

/* Project dashboard quick links (Pavan, Nov 4 2026) */
.proj-links { position: relative; }
.proj-links > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; padding: 0 12px; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-primary, inherit); white-space: nowrap; user-select: none; }
.proj-links > summary::-webkit-details-marker { display: none; }
.proj-links[open] > summary { background: var(--bg-hover, rgba(127,127,127,.12)); }
.proj-links-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; z-index: 200; }
.proj-links-menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 14px; }
.proj-links-menu a:hover { background: var(--bg-hover, rgba(127,127,127,.12)); }
@media (max-width: 600px) {
    .topnav { padding: 0 10px; }
    .nav-right { gap: 6px; }
    .proj-links > summary { width: 36px; padding: 0; justify-content: center; }
    .proj-links-label { display: none; }
    .proj-links-menu { position: fixed; left: 10px; right: 10px; top: calc(var(--nav-h) + 4px); min-width: 0; }
    .proj-links-menu a { padding: 13px 14px; font-size: 15px; }
}
@media (max-width: 420px) { .nav-brand { display: none; } }
@media (max-width: 400px) {
    #section-big30 .habits-week-nav .habits-nav-btn { padding: 6px 9px; font-size: 12px; }
    #section-big30 .habits-week-nav .habits-week-label { font-size: 12.5px; }
}
@media (max-width: 600px) {
    /* Weekly View on phones: tighter columns, habit names stay pinned while swiping days */
    #section-big30 .habits-week-grid { grid-template-columns: 108px repeat(7, 42px) 64px; }
    #section-big30 .habits-week-grid .hw-label { position: sticky; left: 0; z-index: 1; background: var(--bg-card); font-size: 13px; white-space: normal; line-height: 1.25; padding-right: 6px; overflow: hidden; }
}

/* Crypto · By Asset (Nov 6 2026) */
.cr-stack-lg { height: 14px; margin-bottom: 14px; }
.cr-fam { border-top: 1px solid var(--border); }
.cr-fam:nth-of-type(1) { border-top: 0; }
.cr-fam > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; }
.cr-fam > summary::-webkit-details-marker { display: none; }
.cr-fam > summary::after { content: '▸'; color: var(--text-muted); font-size: 11px; margin-left: 6px; }
.cr-fam[open] > summary::after { content: '▾'; }
.cr-fam-name { font-weight: 700; color: var(--text); }
.cr-fam-unit { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-fam-body { padding: 2px 0 10px 19px; }
.cr-fam-line { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--border); }
.cr-fam-l { flex: 1; min-width: 0; }
.cr-fam-asset { font-size: 13px; font-weight: 600; color: var(--text); }
.cr-fam-where { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.cr-fam-v { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
    .cr-fam > summary { flex-wrap: wrap; row-gap: 2px; }
    .cr-fam-name { flex: 1 1 60%; }
    .cr-fam-unit { order: 5; flex: 1 1 100%; padding-left: 19px; }
    .cr-fam .bk-cat-n { display: none; }
}

/* Crypto · What-if (Nov 6 2026) */
.cr-wi-inputs { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.cr-wi-in { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.cr-wi-in input { width: 112px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.cr-wi-in input:disabled { opacity: .55; }
.cr-wi-mix input { width: 120px; }
.cr-wi-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); min-height: 36px; }
.cr-wi-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-input); }
.cr-wi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.cr-wi-val { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cr-wi-dim { color: var(--text-dim); }
.cr-pos { color: var(--success, #22c55e); }
.cr-neg { color: var(--danger, #ef4444); }
.cr-wi-h3 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--text); }
@media (max-width: 600px) {
    .cr-wi-big { grid-template-columns: 1fr; }
    .cr-wi-in input { width: 96px; font-size: 16px; }
    .cr-wi-val { font-size: 19px; }
}

/* Crypto · collapsible sections (Nov 6 2026) */
#section-crypto .cr-div-toggle { cursor: pointer; user-select: none; }
#section-crypto .cr-div-toggle h2::after { content: '▾'; margin-left: 10px; font-size: 14px; color: var(--text-muted); display: inline-block; transition: transform .15s; }
#section-crypto .cr-div-toggle.cr-div-closed h2::after { transform: rotate(-90deg); }
#section-crypto .cr-div-toggle:hover h2 { opacity: .85; }
#section-crypto .cr-hide { display: none !important; }

/* Crypto · Totals tables scroll inside a short box (Pavan Nov 6 2026) */
#section-crypto .cr-scroll { max-height: 320px; overflow-y: auto; }
#section-crypto .cr-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }

/* ==================== BURLINGTON vs LONDON (cities.js, Nov 15 2026) ==================== */
#section-cities { --tab-accent: #60a5fa; }
.ct-hero { padding: 24px 26px; margin-bottom: 18px; }
.ct-headline { font-size: 18px; margin: 14px 0 10px; color: var(--text); }
.ct-toggle { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.ct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.ct-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--ct-c); border-radius: 14px; padding: 20px 22px; }
.ct-card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--text); }
.ct-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ct-c); }
.ct-sub { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--text-muted); }
.ct-big { font-size: 34px; font-weight: 800; color: var(--text); margin: 14px 0 12px; line-height: 1; }
.ct-big span { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 1.5px; }
.ct-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ct-kv b { display: block; font-size: 16px; color: var(--text); }
.ct-kv span { font-size: 11px; color: var(--text-muted); }
.ct-verdict { margin-top: 14px; font-size: 13px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.ct-verdict.ok { background: color-mix(in srgb, #16a34a 14%, transparent); }
.ct-verdict.bad { background: color-mix(in srgb, #dc2626 14%, transparent); }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ct-grid > .ct-panel { margin-bottom: 0; }
.ct-panel { padding: 20px 22px; margin-bottom: 16px; }
.ct-panel h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.ct-cap { margin: 0 0 14px; font-size: 12px; color: var(--text-muted); }
.ct-chart { position: relative; height: 280px; }
.ct-share-row, .ct-stress-row { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; align-items: center; margin-bottom: 12px; }
.ct-share-l { font-size: 12px; color: var(--text-dim); grid-row: span 2; }
.ct-stress-row .ct-share-l { grid-row: auto; }
.ct-share-bar, .ct-stress-bar { position: relative; height: 16px; background: var(--bg-input); border-radius: 4px; }
.ct-share-bar span, .ct-stress-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.ct-share-bar em, .ct-stress-bar em { position: absolute; right: 6px; top: 0; font-size: 11px; font-style: normal; line-height: 16px; color: var(--text); }
.ct-stress-bar { height: 22px; }
.ct-stress-bar em { line-height: 22px; font-weight: 700; }
.ct-stress-bar i, .ct-stress-key i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.ct-stress-key { position: relative; font-size: 11px; color: var(--text-muted); padding-left: 12px; margin-top: 4px; }
.ct-stress-key i { left: 0; top: 0; bottom: 0; }
.ct-takes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-take { border-left: 3px solid var(--ct-c); padding: 8px 12px; background: var(--bg-input); border-radius: 0 8px 8px 0; }
.ct-take-t { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.ct-take-v { font-size: 20px; font-weight: 800; color: var(--text); margin: 4px 0; }
.ct-take-s { font-size: 11px; color: var(--text-dim); }
.ct-table td:not(:first-child), .ct-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.ct-table .ct-grp td { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); padding-top: 14px; }
.ct-table .ct-tot td { font-weight: 700; border-top: 1px solid var(--border); }
.ct-table .ct-left td { font-size: 15px; }
.ct-up { color: var(--text); } .ct-dn { color: var(--text-dim); }
.ct-est { font-size: 10px; padding: 1px 5px; border-radius: 4px; border: 1px dashed var(--border-light); color: var(--text-muted); }
.ct-src li { font-size: 12px; }
@media (max-width: 600px) { .ct-takes { grid-template-columns: 1fr; } .ct-big { font-size: 28px; } }
.ct-scen { margin: 6px 0 4px; } .ct-scen-d { margin: 6px 0 10px; } .ct-neg { color: #ef4444 !important; }
.ct-price { margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-input); }
.ct-price span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
.ct-price b { display: block; font-size: 24px; font-weight: 800; color: var(--text); margin: 2px 0; }
.ct-price em { font-style: normal; font-size: 11px; color: var(--text-dim); }

/* ==================== PAVAN'S PLAN (plan.js, Nov 15 2026) ==================== */
#section-plan { --tab-accent: #f59e0b; }
.pl-togs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.pl-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pl-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.pl-stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
.pl-stat b { display: block; font-size: 28px; font-weight: 800; color: var(--text); margin: 6px 0 2px; }
.pl-stat em { font-style: normal; font-size: 12px; color: var(--text-dim); }
.pl-verdict { font-size: 15px; line-height: 1.55; color: var(--text); margin: 6px 0 0; }
.pl-verdict-card { border-left: 4px solid var(--tab-accent); }
.pl-timeline { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.pl-tl { text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--bg-input); }
.pl-tl.ev { outline: 2px solid var(--tab-accent); }
.pl-tl b { display: block; font-size: 13px; color: var(--text); }
.pl-tl span { display: block; font-size: 11px; color: var(--text-dim); min-height: 15px; margin: 3px 0; }
.pl-tl em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); }
.pl-sub { font-size: 11px; color: var(--text-muted); }
@media (max-width: 700px) { .pl-timeline { grid-template-columns: repeat(5, 1fr); } }
#section-verdict { --tab-accent: #60a5fa; }
.vd-sec h3 { font-size: 17px; margin-bottom: 10px; }
.vd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.vd-cards.one { grid-template-columns: 1fr; }
.vd-card { background: var(--bg-input); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--tab-accent); }
.vd-card b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.vd-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.vd-quote { margin: 16px 0 4px; padding: 18px 22px; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--text); border-left: 4px solid var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 8%, transparent); border-radius: 0 12px 12px 0; }
.vd-bottom { border: 1px solid color-mix(in srgb, var(--tab-accent) 40%, var(--border)); background: color-mix(in srgb, var(--tab-accent) 6%, var(--bg-card)); }
.vd-bottom .rs-p { font-size: 15px; }
.vd-card { display: flex; gap: 12px; align-items: flex-start; }
.vd-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vd-cb { flex: 1; min-width: 0; }
.vd-kick { font-size: 18px; font-weight: 800; color: var(--tab-accent); margin-bottom: 2px; }
.vd-cards.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vd-callhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vd-win { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #16a34a 16%, transparent); color: var(--text); }
.vd-gta .vd-card { border-left-color: #3b82f6; }
.vd-risk .vd-card { border-left-color: #f59e0b; }
.vd-fix { display: block; margin-top: 6px; padding: 6px 9px; border-radius: 8px; font-size: 12px; color: var(--text); background: color-mix(in srgb, #16a34a 12%, transparent); }
.vd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.vd-pill { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.vd-quote { text-align: center; font-size: 20px; }