/* ========================================
   Body Fat Calculator - Professional Teal Theme
   ======================================== */

/* --- CSS VARIABLES --- */
:root {
    /* Background Colors */
    --bg-body: #0a0e17;
    --bg-surface: #111827;
    --bg-card: #1a2235;
    --bg-elevated: #232d42;

    /* Accent Colors - TEAL PRIMARY */
    --accent-primary: #14B8A6;
    --accent-primary-dim: rgba(20, 184, 166, 0.15);
    --accent-primary-glow: rgba(20, 184, 166, 0.4);
    --accent-secondary: #3b82f6;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Border Colors */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);

    /* Sizing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-body);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
}


/* --- MAIN CONTAINER --- */
.main-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* --- PAGE HEADER --- */
.page-title {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-desc {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 1rem;
}

/* --- UNIFIED CALCULATOR WIDGET --- */
.calculator-widget {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 950px;
    margin: 0 auto;
    overflow: hidden;
    /* Ensure relative positioning for absolute children if needed */
    position: relative;
}

/* Ensure result-hero is relative for absolute badge positioning */
.result-hero.compact-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.calculator-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    min-height: 550px;
}

.input-pane {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pane-divider {
    background: var(--border-subtle);
    width: 1px;
}

.result-pane {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- LEFT PANE STRUCTURE --- */
.input-row-full {
    width: 100%;
}

.unit-toggle-container.full-width {
    display: flex;
    width: 100%;
}

.method-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.method-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.method-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.glass-select.full-select {
    flex: 1;
    background-color: var(--bg-elevated);
}

.accuracy-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.1);
    /* Low red default */
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    cursor: help;
}

.accuracy-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
}

.accuracy-text {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ef4444;
    position: absolute;
    bottom: -16px;
    width: max-content;
    display: none;
    /* Only show on hover or keep hidden/tooltip */
}

/* --- GRID LAYOUT --- */
.vitals-grid-structured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 Columns: Col1(Age/Ft), Col2(Weight/In) */
    gap: 20px;
    align-items: start;
}

.grid-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    /* Increased spacing */
}

.grid-cell:last-child {
    margin-bottom: 0;
}

.grid-cell label,
.sub-input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.grid-cell input,
.sub-input-group input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
}

/* Height Cell Spanning */
.height-cell {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sub-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Remove old card styles from panes */
.input-pane,
.result-pane {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* --- SECTION GROUPS --- */
.section-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

/* --- UNIT TOGGLE --- */
.unit-toggle-container {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.unit-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.unit-btn.active {
    background: var(--accent-primary);
    color: #0a0e17;
    box-shadow: 0 2px 8px var(--accent-primary-glow);
}

.unit-btn:hover:not(.active) {
    color: var(--text-primary);
}

/* --- GENDER TOGGLE --- */
.gender-toggle-compact {
    display: flex;
    width: 100%;
    gap: 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.gender-seg {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: all 0.2s;
}

.gender-seg.active {
    background: var(--accent-primary);
    color: #000;
}

/* --- INPUT GROUPS --- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-group input,
.glass-select {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.input-group input:focus,
.glass-select:focus,
.grid-cell input:focus,
.sub-input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    /* 3px outer glow */
}

.glass-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.glass-select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.input-row {
    display: flex;
    gap: 12px;
}

.half-width {
    flex: 1;
}

/* --- STEPPER INPUT --- */
.stepper-input {
    display: flex;
    align-items: center;
    gap: 0;
}

.stepper-input input {
    flex: 1;
    text-align: center;
    border-radius: 0;
}

.stepper-btn {
    width: 50px;
    height: 50px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stepper-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.stepper-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.stepper-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-body);
    border-color: var(--accent-primary);
}

/* --- METHOD HINT --- */
.method-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}

/* --- MEASUREMENTS SECTION (Collapsible) --- */
.measurements-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.measurements-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.measurements-header:hover {
    background: var(--bg-elevated);
}

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

.measurements-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.measurements-chevron {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.measurements-content {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.method-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- TOOLTIP --- */
.tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--border-medium);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: help;
    position: relative;
}

.tooltip-trigger:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.unit-suffix {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- SLIDER --- */
.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.goal-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    outline: none;
    margin-top: 5px;
    /* Add margin to track to prevent overlap */
}

.goal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--accent-primary-glow);
    margin-top: -9px;
    /* Vertically center thumb on track */
}

.goal-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value {
    min-width: 45px;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* --- DEFICIT OPTIONS --- */
.deficit-selector label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.deficit-options {
    display: flex;
    gap: 8px;
}

.deficit-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deficit-btn:hover {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.deficit-btn.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary-dim);
    color: var(--accent-primary);
}

/* ============================================
   RESULTS PANEL
   ============================================ */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================
   RIGHT PANE CARDS (VISUAL RESCUE)
   ============================================ */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Reduced gap */
}

/* --- MAIN RESULT CARD (Hero + Gauge) --- */
.result-card-main {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.0) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    /* Compact padding */
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.result-hero.compact-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-top-row {
    display: flex;
    justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
    /* Align top */
    width: 100%;
}

.result-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.result-category {
    position: absolute;
    top: 0;
    right: 0;
    /* Align top-right with offset handled by padding or margin if needed, currently 0 */
    transform: translate(4px, -4px);
    /* 4px offset */
}

.result-category .category-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px;
    /* Remove top/bottom padding for line-height centering */
    line-height: 24px;
    /* Match container height */
    height: 24px;
    display: inline-block;
    /* Ensure block model applies */
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
    vertical-align: middle;
}

.result-value-large {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -2px;
}

/* --- GAUGE (Critical Fixes) --- */
.gauge-integrated {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.gauge-core {
    width: 100%;
    height: 140px;
    /* Reduced specific Height */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -15px;
    visibility: visible;
    /* Forced visibility */
}

/* Gauge SVG Styling */
.gauge-core svg {
    overflow: visible;
}

/* --- STAT PILLS (Lean/Fat) --- */
}

.gauge-stats-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 5px;
    opacity: 1;
    /* Ensure visible by default */
    min-height: 80px;
    /* Pre-allocate space */
}

.stat-pill {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    border-radius: var(--radius-md);
    padding: 16px;
    /* Increased padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.2s ease;
    min-height: 80px;
    /* Minimum height */
    justify-content: center;
}

.stat-pill:hover {
    background: rgba(255, 255, 255, 0.08);
}

.g-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.g-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- INSIGHT BOX --- */
.smart-insight-box {
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

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

.insight-content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insight-summary {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.highlight-val {
    color: #14b8a6;
    /* Teal */
    font-weight: 800;
}

.insight-bar-container {
    height: 4px;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.insight-bar-fill {
    height: 100%;
    background: #14b8a6;
    border-radius: 2px;
}

/* --- MERGED INSIGHT FOOTER --- */
.insight-footer {
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
    /* Spacing from gauge */
    padding-top: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.insight-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.insight-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insight-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.insight-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.insight-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    width: 0%;
    transition: width 0.5s ease;
}

/* --- GOAL & PROJECTION CARD --- */
.goal-projection-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    /* Compact */
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    /* Compact */
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.goal-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.slider-labels label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.target-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent-primary);
}

/* Chunky Slider */
.goal-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    /* Thinner for compact look */
    background: var(--bg-elevated);
    border-radius: 4px;
    outline: none;
}

.goal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    /* Smaller thumb */
    height: 18px;
    background: var(--accent-primary);
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.goal-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Projection Results Grid */
.projection-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.proj-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    border: 1px solid var(--border-subtle);
}

.proj-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.proj-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Deficit Dropdown */
.deficit-mini-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.deficit-mini-control label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mini-select {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

/* Accuracy Pill */
.accuracy-pill {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: help;
}

/* Remove old leftover classes */
/* .goal-section, .what-if-section, .target-bf-chart -- REMOVED */

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

.gradient-value {
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- FAQ SECTION --- */
.faq-section {
    margin-top: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px 60px;
}

.faq-header {
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.faq-divider {
    height: 2px;
    width: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-primary) 50%, transparent 100%);
    border-radius: 1px;
}

.faq-item {
    background: var(--bg-surface);
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--border-medium);
}

.faq-item summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--accent-primary);
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item[open] summary {
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

.faq-item p,
.faq-item ul {
    padding: 16px 20px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-item ul {
    padding-top: 0;
}

.faq-item li {
    margin-bottom: 10px;
}

/* --- TABLES --- */
.comparison-table,
.bf-ranges-table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comparison-table th,
.bf-ranges-table th {
    background: var(--accent-primary-dim);
    color: var(--accent-primary);
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
}

.comparison-table td,
.bf-ranges-table td {
    padding: 12px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
}

.comparison-table tr:last-child td,
.bf-ranges-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:hover td,
.bf-ranges-table tr:hover td {
    background: var(--bg-elevated);
}

/* ============================================
   COMPACT DASHBOARD LAYOUT
   ============================================ */

/* --- HEADER BAR (Units + Method) --- */
.header-bar {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-bar .unit-toggle-container {
    flex: 1;
}

.compact-select {
    width: auto;
    min-width: 100px;
    padding: 10px 32px 10px 12px;
    font-size: 0.85rem;
    background-position: right 10px center;
}

/* --- COMPACT GENDER TOGGLE --- */
.gender-toggle-compact {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.gender-seg {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gender-seg.active {
    background: var(--accent-primary);
    color: #0a0e17;
    box-shadow: 0 2px 8px var(--accent-primary-glow);
}

.gender-seg:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

/* --- VITALS GRID (2x2) --- */
.vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.input-group.compact label {
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.input-group.compact input {
    padding: 10px 12px;
    font-size: 0.9rem;
}

.input-row.compact {
    display: flex;
    gap: 8px;
}

.stepper-input.compact {
    height: 42px;
}

.stepper-input.compact input {
    padding: 8px;
    font-size: 0.9rem;
}

.stepper-input.compact .stepper-btn {
    width: 38px;
    height: 42px;
    font-size: 1.1rem;
}

.grid-spacer {
    display: none;
}

/* --- MEASUREMENTS SECTION COMPACT --- */
.measurements-section {
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.measurements-section .method-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 0;
}

.measurements-section .method-inputs {
    gap: 10px;
}

.measurements-section .input-group {
    gap: 4px;
}

.measurements-section .input-group label {
    font-size: 0.75rem;
}

.measurements-section .input-group input {
    padding: 10px 12px;
}

/* --- REDUCED SPACING --- */
.input-card {
    gap: 16px;
}

.section-group {
    gap: 12px;
}

.results-container {
    gap: 12px;
}

/* --- GAUGE WITH INTEGRATED STATS --- */
.gauge-with-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}

.gauge-core {
    flex: 0 0 180px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    min-width: 70px;
}

.gauge-stat-icon {
    font-size: 1rem;
}

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

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

/* --- INSIGHT/GOAL CONTAINER --- */
.insight-goal-container {
    min-height: 80px;
}

.insight-card,
.goal-results {
    margin: 0;
}

/* --- RESULT HERO COMPACT --- */
.result-hero {
    padding: 16px 0;
}

.result-value {
    font-size: 3rem;
}

.result-label {
    font-size: 0.7rem;
    margin-bottom: 4px;
}

/* --- GOAL SECTION COMPACT --- */
.goal-section {
    padding: 12px;
    margin-top: auto;
    /* Push to bottom of flex container */
}

.goal-inputs {
    margin-top: 12px;
    gap: 12px;
}

.slider-container {
    gap: 8px;
}

.deficit-options {
    gap: 6px;
}

.deficit-btn {
    padding: 8px;
    font-size: 0.8rem;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .calculator-wrapper {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .result-card {
        position: static;
    }

    .page-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {
    .main-container {
        padding: 20px 16px;
    }

    .card {
        padding: 20px;
    }

    

    

    

    

    .gender-toggle-container {
        grid-template-columns: 1fr 1fr;
    }

    .gender-btn {
        padding: 12px;
    }

    .gender-icon {
        font-size: 1.4rem;
    }

    .gender-label {
        font-size: 0.8rem;
    }

    .result-value {
        font-size: 2.5rem;
    }

    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .deficit-options {
        flex-direction: column;
    }

    .tooltip-trigger:hover::after {
        width: 180px;
        left: auto;
        right: 0;
        transform: none;
    }
}

/* Hide number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ========================================
   V4.0 PREMIUM DESIGN UPGRADE
   ======================================== */

/* Typography: Monospace for numerical data */
.result-value,
.num-cell,
.card-value,
.slider-value,
#what-if-bf-label {
    font-family: 'JetBrains Mono', monospace;
}

/* Result Hero Glow Effect */
.result-value {
    text-shadow: 0 0 30px rgba(20, 184, 166, 0.4), 0 0 60px rgba(20, 184, 166, 0.2);
}

/* ========================================
   COMPARISON TABLE
   ======================================== */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.comparison-table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table thead th:not(:first-child) {
    text-align: right;
}

.comparison-table thead th.goal-col {
    background: rgba(20, 184, 166, 0.08);
    border-radius: 0 6px 0 0;
}

.comparison-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.comparison-table tbody td:first-child {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.comparison-table tbody td.num-cell {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: #fff;
}

.comparison-table tbody td.goal-col {
    background: rgba(20, 184, 166, 0.08);
    color: #14b8a6;
    font-weight: 600;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:last-child td.goal-col {
    border-radius: 0 0 6px 0;
}

/* ========================================
   ACTION CARDS
   ======================================== */
.action-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.action-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.action-card .card-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.action-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.action-card .card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.action-card .card-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Calories card special styling */
.action-card.calories .card-value {
    color: #f97316;
}

/* Protein card special styling */
.action-card.protein .card-value {
    color: #ef4444;
}

/* Time card special styling */
.action-card.time .card-value {
    color: #22d3ee;
}

/* Maintenance Mode styling */
.action-card.maintenance {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.action-card.maintenance .card-value {
    color: #22c55e;
}

/* ========================================
   CUSTOM SLIDERS
   ======================================== */
.goal-slider,
.what-if-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #0d9488, #14b8a6, #22d3ee);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.goal-slider::-webkit-slider-thumb,
.what-if-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid #14b8a6;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.goal-slider::-webkit-slider-thumb:hover,
.what-if-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 18px rgba(20, 184, 166, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.goal-slider::-webkit-slider-thumb:active,
.what-if-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.goal-slider::-moz-range-thumb,
.what-if-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid #14b8a6;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
    cursor: grab;
}

.goal-slider::-moz-range-track,
.what-if-slider::-moz-range-track {
    background: linear-gradient(90deg, #0d9488, #14b8a6, #22d3ee);
    height: 8px;
    border-radius: 4px;
}

/* Slider value display */
.slider-value,
#what-if-bf-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ========================================
   ACCURACY BADGE - STATUS PILL
   ======================================== */
.accuracy-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.accuracy-badge[data-level="low"] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.accuracy-badge[data-level="moderate"] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.accuracy-badge[data-level="high"] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ========================================
   INSIGHT CARD - FILLED BACKGROUND
   ======================================== */
.insight-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
}

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

.insight-icon {
    font-size: 1.25rem;
}

.insight-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.insight-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   GOAL RESULTS CONTAINER
   ======================================== */
.goal-results {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
}

/* ========================================
   WHAT-IF SECTION STYLING
   ======================================== */
.what-if-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

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

.what-if-icon {
    font-size: 1.25rem;
}

.what-if-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.what-if-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.what-if-slider-row label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.what-if-slider {
    flex: 1;
}

.what-if-result {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 0.5rem;
    background: rgba(20, 184, 166, 0.05);
    border-radius: 8px;
}

.what-if-result strong {
    color: #14b8a6;
    font-family: 'JetBrains Mono', monospace;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 600px) {
    .action-cards {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .action-card {
        justify-content: center;
    }

    .comparison-table {
        font-size: 0.8rem;
    }
}
/* ========================================
   HARMONIZED INSTRUCTIONAL \u0026 FAQ STYLES
   ======================================== */

.how-it-works-final {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

.professional-header {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #10b981;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.onboarding-grid-final {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.onboarding-card-final {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.onboarding-card-final:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: #10b981;
    transform: translateY(-5px);
}

.card-step-num {
    position: absolute;
    top: -1rem;
    left: 2rem;
    background: #10b981;
    color: #050510;
    font-size: 0.875rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
}

.card-title-final {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
}

.card-body-final {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #8888aa;
    margin: 0;
}

/* FAQ SECTION */
.faq-section {
    max-width: 800px;
    margin: 4rem auto 6rem;
    padding: 0 1.5rem;
}

.faq-header {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
}

.faq-divider {
    width: 40px;
    height: 2px;
    background: #10b981;
    margin: 0 auto 2.5rem;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(16, 185, 129, 0.3);
}

.faq-item summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: #10b981;
    font-weight: 400;
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item .faq-content {
    padding: 0 1.5rem 1.5rem;
}

.faq-item p {
    margin: 0;
    color: #8888aa;
    line-height: 1.7;
    font-size: 0.9375rem;
}

.faq-item strong {
    color: #10b981;
    font-weight: 600;
}

@media (max-width: 768px) {
    .onboarding-grid-final {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        gap: 2.5rem;
    }

    .professional-header {
        font-size: 1.5rem;
    }
}

/* ================================================================
   NEW FEATURE STYLES — UPGRADE 2026
   ================================================================ */

/* ── Method Tabs ─────────────────────────────────────────────── */
.method-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.method-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.method-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.18s ease;
    min-width: 60px;
    flex: 1;
}

.method-tab:hover {
    border-color: var(--accent-primary, #14B8A6);
    background: rgba(20,184,166,0.08);
}

.method-tab.active {
    background: var(--accent-primary, #14B8A6);
    border-color: var(--accent-primary, #14B8A6);
    color: #000;
}

.tab-icon { font-size: 1rem; }
.tab-label { font-size: 0.7rem; font-weight: 700; }

.tab-acc {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 10px;
    border: 1px solid currentColor;
}
.acc-low  { color: #ef4444; }
.acc-mod  { color: #eab308; }
.acc-high { color: #22c55e; }

.method-tab.active .tab-acc { color: #000; border-color: rgba(0,0,0,0.25); }

/* ── Measurement tips ────────────────────────────────────────── */
.measure-tip-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(20,184,166,0.07);
    border: 1px solid rgba(20,184,166,0.2);
    margin-bottom: 10px;
}
.measure-tip-icon { font-size: 0.9rem; flex-shrink: 0; color: var(--accent-primary,#14B8A6); }
.measure-tip-text { font-size: 0.73rem; color: #94a3b8; line-height: 1.4; }

.input-tip {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 2px;
    padding-left: 2px;
}

/* ── 5-Stat Row ──────────────────────────────────────────────── */
.stats-5-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.stat-5-item {
    background: var(--bg-elevated, #232d42);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-5-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.stat-5-val {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #f1f5f9;
}

@media (max-width: 600px) {
    .stats-5-row { grid-template-columns: repeat(3, 1fr); }
    .stats-5-row .stat-5-item:nth-child(4),
    .stats-5-row .stat-5-item:nth-child(5) { display: flex; }
}

/* ── Category Glow Card ──────────────────────────────────────── */
@keyframes catPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cat-rgb,20,184,166),0); }
    50%       { box-shadow: 0 0 18px 4px var(--cat-color,#14B8A6); }
}

.category-glow-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    margin-top: 10px;
    animation: catPulse 2.5s ease-in-out infinite;
    transition: border-color 0.3s, background 0.3s;
}

.cat-icon { font-size: 1.75rem; line-height: 1; }
.cat-info  { display: flex; flex-direction: column; gap: 2px; }
.cat-name  { font-size: 1rem; font-weight: 800; color: #f1f5f9; }
.cat-range { font-size: 0.72rem; color: #94a3b8; }

/* ── Percentile Bar ──────────────────────────────────────────── */
.percentile-bar-card {
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--bg-card, #1a2235);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}

.pct-label-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 10px;
}
.pct-label-row strong { color: #f1f5f9; font-size: 1rem; font-family: 'JetBrains Mono', monospace; }

.pct-track {
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    position: relative;
    overflow: visible;
}
.pct-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #eab308 40%, #22c55e 70%, #14B8A6 100%);
    border-radius: 6px;
    transition: width 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.pct-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 18px;
    background: #fff;
    border-radius: 2px;
    transition: left 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.pct-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 5px;
}

/* ── Composition Chart Card ──────────────────────────────────── */
.composition-chart-card {
    margin-top: 10px;
    padding: 16px;
    background: var(--bg-surface, #111827);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.chart-card-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; font-weight: 700; }

.chart-tab-row { display: flex; gap: 4px; }
.chart-tab {
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.chart-tab.active {
    background: var(--accent-primary, #14B8A6);
    color: #000;
    border-color: var(--accent-primary, #14B8A6);
}

.chart-area { display: flex; justify-content: center; align-items: center; min-height: 200px; }
.chart-area canvas { max-width: 200px; max-height: 200px; }

/* Spectrum view */
.spectrum-view { width: 100%; padding: 10px 0; }
.spectrum-labels-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: #64748b;
    margin-bottom: 6px;
}
.spectrum-track-wrap {
    position: relative;
    height: 20px;
    border-radius: 10px;
    overflow: visible;
}
.spectrum-track {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(90deg,
        #ec4899 0%,
        #14B8A6 15%,
        #22c55e 30%,
        #f59e0b 50%,
        #f97316 70%,
        #ef4444 100%);
    opacity: 0.7;
}
.spectrum-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 28px;
    background: #fff;
    border-radius: 3px;
    border: 2px solid #0a0e17;
    transition: left 0.6s ease;
    z-index: 2;
}
.spectrum-target-marker { background: #eab308; }

.spectrum-legend {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.72rem;
    color: #94a3b8;
}
.sleg-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.sleg-current { background: #fff; }
.sleg-target  { background: #eab308; }

/* Donut legend */
.chart-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #94a3b8;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot  { width: 10px; height: 10px; border-radius: 50%; }
.fat-dot     { background: #ef4444; }
.lean-dot    { background: #14B8A6; }

/* ── Alerts Panel ────────────────────────────────────────────── */
.alerts-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.alert-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.78rem;
    line-height: 1.5;
}
.alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.alert-text { color: #94a3b8; }
.alert-text strong { color: #f1f5f9; }

.alert-info    { background: rgba(59,130,246,0.08);  border-color: rgba(59,130,246,0.25); }
.alert-success { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.25); }
.alert-warning { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.25); }
.alert-error   { background: rgba(239,68,68,0.1);    border-color: rgba(239,68,68,0.3); }

/* ── Ideal Weight Card ───────────────────────────────────────── */
.ideal-weight-card {
    margin-top: 10px;
    padding: 16px;
    background: var(--bg-surface, #111827);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
.ideal-weight-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 12px;
}
.ideal-weight-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.ideal-range-item {
    background: var(--bg-elevated, #232d42);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ideal-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ideal-val {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #f1f5f9;
}
.weekly-projections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.week-item {
    background: var(--bg-card, #1a2235);
    border-radius: 8px;
    padding: 9px;
    text-align: center;
    font-size: 0.72rem;
    color: #94a3b8;
}
.week-item span {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary, #14B8A6);
    margin-top: 2px;
}

/* ── Scenario Table ──────────────────────────────────────────── */
.scenario-card {
    margin-top: 10px;
    padding: 16px;
    background: var(--bg-surface, #111827);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
}
.scenario-card-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 12px;
}
.scenario-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.scenario-table th {
    background: rgba(20,184,166,0.1);
    color: #94a3b8;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 8px 10px;
    text-align: left;
}
.scenario-table td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #94a3b8;
}
.scenario-table tr:last-child td { border-bottom: none; }
.scenario-table tr:hover td { background: rgba(255,255,255,0.03); }
.scenario-table .bf-col {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #f1f5f9;
}
.cat-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid;
}

/* ── History Panel ───────────────────────────────────────────── */
.history-panel {
    max-width: 950px;
    margin: 28px auto 0;
    padding: 22px 24px;
    background: var(--bg-surface, #111827);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.history-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #94a3b8;
}
.history-actions { display: flex; gap: 8px; }

.history-save-btn,
.history-clear-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.15s;
}
.history-save-btn {
    background: rgba(20,184,166,0.12);
    border-color: rgba(20,184,166,0.4);
    color: #14B8A6;
}
.history-save-btn:hover { background: rgba(20,184,166,0.22); }
.history-clear-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.12);
    color: #64748b;
}
.history-clear-btn:hover { border-color: rgba(239,68,68,0.4); color: #ef4444; }

.history-empty {
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
    padding: 20px;
}

.history-list { display: flex; flex-direction: column; gap: 8px; }

.history-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card, #1a2235);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.history-entry-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.history-entry-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.history-entry-bf {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.history-entry-date { font-size: 0.72rem; color: #64748b; }
.history-entry-cat {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid;
}
.history-entry-meta { font-size: 0.65rem; color: #64748b; }

.history-del-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.history-del-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

.sparkline-container { margin-top: 16px; }

/* ── Share / Export Bar ──────────────────────────────────────── */
.share-export-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 950px;
    margin: 20px auto 0;
    padding: 16px 0;
}

.share-btn, .copy-btn, .print-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.share-btn {
    background: rgba(20,184,166,0.1);
    border-color: rgba(20,184,166,0.4);
    color: #14B8A6;
}
.share-btn:hover { background: rgba(20,184,166,0.2); }
.copy-btn {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.35);
    color: #3b82f6;
}
.copy-btn:hover { background: rgba(59,130,246,0.2); }
.print-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.12);
    color: #64748b;
}
.print-btn:hover { border-color: rgba(255,255,255,0.25); color: #94a3b8; }

/* ── Responsive updates ──────────────────────────────────────── */

/* Stack the two-pane grid vertically on tablet/mobile */
@media (max-width: 900px) {
    .calculator-inner-grid {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        min-height: unset;
    }
    .pane-divider { display: none; }
    .input-pane,
    .result-pane  { padding: 20px 18px; }

    /* Method tabs: even 5-column grid so all stay the same width */
    .method-tabs-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }
    .method-tab {
        flex: unset;
        min-width: unset;
        padding: 8px 4px;
    }
    .tab-icon  { font-size: 0.85rem; }
    .tab-label { font-size: 0.6rem; }
    .tab-acc   { font-size: 0.52rem; padding: 1px 3px; }
}

/* Small phones */
@media (max-width: 600px) {
    .input-pane,
    .result-pane { padding: 16px 14px; }
    .stats-5-row { grid-template-columns: repeat(3, 1fr); }
    .ideal-weight-row,
    .weekly-projections { grid-template-columns: repeat(2, 1fr); }
    .share-export-bar { gap: 8px; }
    .history-entry-right { display: none; }
}

/* ── Print Styles ────────────────────────────────────────────── */
@media print {
    .glass-navbar,
    .input-pane,
    .pane-divider,
    .how-it-works-final,
    .faq-section,
    .history-panel,
    .share-export-bar,
    .goal-projection-card,
    .ideal-weight-card,
    .alerts-panel,
    .scenario-card { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    .result-pane { width: 100% !important; }
    .stats-5-row .stat-5-item,
    .category-glow-card,
    .percentile-bar-card,
    .composition-chart-card {
        border-color: #ccc !important;
        background: #f9f9f9 !important;
        color: #000 !important;
    }
}

/* Toast notifications */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; padding:.75rem 1.25rem; border-radius:8px; font-size:.875rem; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,.3); max-width:320px; color:#fff; animation: toastIn 0.3s ease; }
.toast-success { background: #00b4d8; }
.toast-warn { background: #f59e0b; }
.toast-error { background: #dc2626; }
@keyframes toastIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── LIGHT MODE ───────────────────────────────────── */
[data-theme="light"] {
    --accent-primary: #0E7490;
    --bg-card: #FFFFFF;
    --bg-elevated: #DBE1EA;
    --border-subtle: rgba(0,0,0,0.08);
    --text-muted: #475569;
    --text-primary: #0F172A;
    --text-secondary: #334155;
}

[data-theme="light"] body { background-color: #F1F5F9; color: #0F172A; background-image: none; }


[data-theme="light"] input, [data-theme="light"] select { color-scheme: light; }
[data-theme="light"] .dashboard-container,
[data-theme="light"] .dashboard-wrapper { background: transparent; }
[data-theme="light"] .dashboard-panel,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .card,
[data-theme="light"] .glass-card,
[data-theme="light"] .compact-card,
[data-theme="light"] .calculator-card { background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: #0F172A; }
[data-theme="light"] .input-group label,
[data-theme="light"] .input-label { color: #334155; }
[data-theme="light"] .input-group input,
[data-theme="light"] .input-group select,
[data-theme="light"] .glass-input,
[data-theme="light"] .input-field,
[data-theme="light"] .fintech-input,
[data-theme="light"] .dashboard-input,
[data-theme="light"] .styled-input { background: #E2E8F0; border-color: rgba(0,0,0,0.15); color: #0F172A; }
[data-theme="light"] .tab-btn,
[data-theme="light"] .calc-tab-btn,
[data-theme="light"] .segment-pill,
[data-theme="light"] .input-tab-btn { background: #E2E8F0; color: #334155; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .tab-btn.active,
[data-theme="light"] .calc-tab-btn.active,
[data-theme="light"] .segment-pill.active,
[data-theme="light"] .input-tab-btn.active { background: #0E7490; color: #fff; }
[data-theme="light"] .preset-chip,
[data-theme="light"] .chip { background: #E2E8F0; color: #334155; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .preset-chip.active,
[data-theme="light"] .chip.active { background: #0E7490; color: #fff; }
[data-theme="light"] .stat-card { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .stat-label { color: #475569; }
[data-theme="light"] .stat-value { color: #0F172A; }
[data-theme="light"] .hero-result,
[data-theme="light"] .hero-result-box,
[data-theme="light"] .result-card { background: #FFFFFF; border-color: rgba(0,0,0,0.12); color: #0F172A; }
[data-theme="light"] .formula-strip,
[data-theme="light"] .formula-pill { background: #F1F5F9; border-color: rgba(0,0,0,0.08); color: #334155; }
[data-theme="light"] .alert { background: #F8FAFC; border-color: rgba(0,0,0,0.08); color: #334155; }
[data-theme="light"] .action-btn { background: #FFFFFF; border-color: rgba(0,0,0,0.15); color: #334155; }
[data-theme="light"] .action-btn:hover { background: #F1F5F9; }
[data-theme="light"] .chart-card,
[data-theme="light"] .chart-block,
[data-theme="light"] .chart-wrapper { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .scenario-card { background: #FFFFFF; border-color: rgba(0,0,0,0.12); color: #0F172A; }
[data-theme="light"] .compare-card,
[data-theme="light"] .winner-card,
[data-theme="light"] .winner-banner { background: #F8FAFC; border-color: rgba(0,0,0,0.12); color: #0F172A; }
[data-theme="light"] table,
[data-theme="light"] .data-table,
[data-theme="light"] .schedule-table,
[data-theme="light"] .amort-table { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] th { background: #F1F5F9; color: #334155; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] td { color: #0F172A; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .how-to-card,
[data-theme="light"] .how-it-works,
[data-theme="light"] .onboarding-card-final { background: #FFFFFF; border-color: rgba(0,0,0,0.08); color: #0F172A; }
[data-theme="light"] .faq-item { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .faq-question { color: #0F172A; }
[data-theme="light"] .faq-answer { color: #475569; }
[data-theme="light"] .breadcrumb,
[data-theme="light"] .calc-breadcrumb { color: #475569; background: rgba(0,0,0,0.03); }
[data-theme="light"] .breadcrumb a { color: #475569; }
[data-theme="light"] .breadcrumb a:hover { color: #0E7490; }
[data-theme="light"] .calc-btn,
[data-theme="light"] .calculate-btn { background: #0E7490; color: #fff; }
[data-theme="light"] .toggle-btn { background: #E2E8F0; color: #334155; }
[data-theme="light"] .toggle-btn.active { background: #0E7490; color: #fff; }
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-body { background: #FFFFFF; color: #0F172A; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .tooltip-label { color: #475569; }
[data-theme="light"] .glossary-card { background: #F8FAFC; border-color: rgba(0,0,0,0.08); color: #0F172A; }
[data-theme="light"] .mobile-nav,
[data-theme="light"] .mobile-sticky-footer { background: rgba(255,255,255,0.98); border-top: 1px solid rgba(0,0,0,0.12); }
[data-theme="light"] .mobile-nav .nav-link { color: #334155; }
[data-theme="light"] .back-to-top { background: rgba(0,0,0,0.06); color: #475569; }
[data-theme="light"] .sub-category-nav-wrapper,
[data-theme="light"] .sub-nav-link { background: transparent; color: #334155; }
[data-theme="light"] .sub-nav-link.active { color: #0E7490; border-color: #0E7490; }
[data-theme="light"] .custom-select-trigger,
[data-theme="light"] .glass-select,
[data-theme="light"] .styled-select { background: #E2E8F0; border-color: rgba(0,0,0,0.15); color: #0F172A; }
[data-theme="light"] .custom-select-options { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .custom-select-option { color: #0F172A; }
[data-theme="light"] .custom-select-option:hover { background: #F1F5F9; }
[data-theme="light"] .controls-panel,
[data-theme="light"] .sidebar,
[data-theme="light"] .results-column { background: transparent; }
[data-theme="light"] .section-title,
[data-theme="light"] .section-header { color: #0F172A; }
[data-theme="light"] .section-subtitle,
[data-theme="light"] .section-desc { color: #475569; }

/* ================================================================
   OUTER TAB BAR — wraps Calculator / Body Composition / Tracker
   ================================================================ */
.outer-tab-bar {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--bg-surface, #111827);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-subtle);
    max-width: 950px;
    margin: 0 auto 24px;
}

.outer-tab {
    flex: 1;
    padding: 14px 18px;
    border: none;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.outer-tab:hover:not(.active) {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #f1f5f9);
}

.outer-tab.active {
    background: var(--accent-primary, #14B8A6);
    color: #0a0e17;
    box-shadow: 0 2px 10px var(--accent-primary-glow, rgba(20,184,166,0.4));
}

/* Tab content panels */
.outer-tab-content {
    display: none;
}
.outer-tab-content.active {
    display: block;
}

/* ================================================================
   TAB 2: BODY COMPOSITION ANALYSIS
   ================================================================ */

/* No-data placeholder */
.comp-no-data {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 30px;
    background: var(--bg-surface, #111827);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    color: var(--text-secondary, #94a3b8);
    font-size: 1rem;
}
.comp-no-data strong {
    color: var(--accent-primary, #14B8A6);
}

/* Panel container */
.comp-panel {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Shared card styling for composition cards */
.comp-overview-card,
.comp-breakdown-card,
.comp-ranges-card,
.comp-ffmi-card {
    background: var(--bg-surface, #111827);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.comp-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #94a3b8);
    margin: 0 0 18px;
}

/* Overview grid: chart + stats */
.comp-overview-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: center;
}

.comp-chart-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-stats-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comp-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card, #1a2235);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-subtle);
}

.comp-stat-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.comp-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comp-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}

.comp-stat-val {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary, #f1f5f9);
}

/* Fat breakdown grid */
.comp-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.comp-break-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--bg-card, #1a2235);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

.comp-break-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}

.comp-break-val {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary, #14B8A6);
}

.comp-break-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
}

/* Category range bars */
.comp-range-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comp-range-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comp-range-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comp-range-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}

.comp-range-values {
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted, #64748b);
}

.comp-range-bar-track {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

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

.comp-range-bar-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.3);
    transition: left 0.5s ease;
    z-index: 2;
}

.comp-range-row.current-row .comp-range-name {
    color: var(--accent-primary, #14B8A6);
    font-weight: 800;
}
.comp-range-row.current-row .comp-range-bar-track {
    box-shadow: 0 0 8px var(--accent-primary-glow, rgba(20,184,166,0.4));
}

/* FFMI Card */
.comp-ffmi-grid {
    display: flex;
    gap: 24px;
    align-items: center;
}

.comp-ffmi-value {
    font-size: 2.8rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary, #f1f5f9);
    line-height: 1;
    min-width: 90px;
    text-align: center;
}

.comp-ffmi-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comp-ffmi-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

.comp-ffmi-scale {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ffmi-bar-track {
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    position: relative;
    overflow: visible;
}

.ffmi-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #14B8A6, #3b82f6, #a855f7);
    border-radius: 5px;
    transition: width 0.6s ease;
}

.ffmi-bar-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 18px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.3);
    transition: left 0.6s ease;
    z-index: 2;
}

.ffmi-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    font-family: 'JetBrains Mono', monospace;
}

/* ================================================================
   TAB 3: PROGRESS TRACKER
   ================================================================ */

.tracker-panel {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Shared card for tracker cards */
.tracker-log-card,
.tracker-chart-card,
.tracker-goal-card,
.tracker-table-card {
    background: var(--bg-surface, #111827);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Log grid */
.tracker-log-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.tracker-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tracker-input-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

.tracker-input-group input,
.tracker-input-group select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-elevated, #232d42);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #f1f5f9);
    font-size: 0.92rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.tracker-input-group input:focus,
.tracker-input-group select:focus {
    outline: none;
    border-color: var(--accent-primary, #14B8A6);
    box-shadow: 0 0 0 3px var(--accent-primary-glow, rgba(20,184,166,0.4));
}

.tracker-input-group input::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Log action buttons */
.tracker-log-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tracker-log-btn {
    padding: 11px 24px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: var(--accent-primary, #14B8A6);
    color: #0a0e17;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.tracker-log-btn:hover {
    opacity: 0.9;
    box-shadow: 0 2px 10px var(--accent-primary-glow, rgba(20,184,166,0.4));
}

.tracker-autofill-btn {
    padding: 11px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.tracker-autofill-btn:hover {
    border-color: var(--accent-primary, #14B8A6);
    color: var(--accent-primary, #14B8A6);
}

/* Trend chart */
.tracker-chart-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #64748b);
    font-size: 0.88rem;
}

/* Goal tracker */
.tracker-goal-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}

.tracker-goal-summary {
    padding: 14px 16px;
    background: var(--bg-card, #1a2235);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
}
.tracker-goal-summary p { margin: 0; }
.tracker-goal-summary strong {
    color: var(--accent-primary, #14B8A6);
    font-family: 'JetBrains Mono', monospace;
}

/* Measurement table */
.tracker-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tracker-clear-btn {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.tracker-clear-btn:hover {
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
}

.tracker-table-empty {
    text-align: center;
    padding: 30px;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.tracker-table-wrap {
    overflow-x: auto;
}

.tracker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.tracker-table th {
    background: rgba(20,184,166,0.1);
    color: var(--text-secondary, #94a3b8);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 10px 12px;
    text-align: left;
}

.tracker-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-secondary, #94a3b8);
}

.tracker-table tr:last-child td { border-bottom: none; }
.tracker-table tr:hover td { background: rgba(255,255,255,0.03); }

.tracker-table .bf-col {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}

.tracker-del-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}
.tracker-del-btn:hover {
    color: #ef4444;
    background: rgba(239,68,68,0.1);
}

/* ================================================================
   RESPONSIVE — Outer tabs, Composition, Tracker
   ================================================================ */
@media (max-width: 900px) {
    .comp-overview-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .comp-ffmi-grid {
        flex-direction: column;
        text-align: center;
    }
    .tracker-goal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .outer-tab-bar {
        flex-direction: column;
        gap: 4px;
    }
    .outer-tab {
        font-size: 0.85rem;
        padding: 12px 14px;
    }
    .comp-breakdown-grid {
        grid-template-columns: 1fr;
    }
    .tracker-log-grid {
        grid-template-columns: 1fr;
    }
    .comp-overview-card,
    .comp-breakdown-card,
    .comp-ranges-card,
    .comp-ffmi-card,
    .tracker-log-card,
    .tracker-chart-card,
    .tracker-goal-card,
    .tracker-table-card {
        padding: 18px 14px;
    }
}

/* Print — hide new tabs content */
@media print {
    .outer-tab-bar,
    #tab-composition,
    #tab-tracker { display: none !important; }
}

/* ================================================================
   LIGHT MODE — Outer tabs, Composition, Tracker
   ================================================================ */

/* Outer tab bar */
[data-theme="light"] .outer-tab-bar {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .outer-tab {
    color: #475569;
}
[data-theme="light"] .outer-tab:hover:not(.active) {
    background: #F0F4F9;
    color: #0F172A;
}
[data-theme="light"] .outer-tab.active {
    background: #0E7490;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,116,144,0.3);
}

/* Comp no-data */
[data-theme="light"] .comp-no-data {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    color: #475569;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Composition & tracker cards */
[data-theme="light"] .comp-overview-card,
[data-theme="light"] .comp-breakdown-card,
[data-theme="light"] .comp-ranges-card,
[data-theme="light"] .comp-ffmi-card,
[data-theme="light"] .tracker-log-card,
[data-theme="light"] .tracker-chart-card,
[data-theme="light"] .tracker-goal-card,
[data-theme="light"] .tracker-table-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

[data-theme="light"] .comp-card-title {
    color: #334155;
}

/* Stat items nested inside white cards — use page tint bg */
[data-theme="light"] .comp-stat-item {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .comp-stat-val { color: #0F172A; }

/* Fat breakdown items */
[data-theme="light"] .comp-break-item {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .comp-break-val { color: #0E7490; }

/* Category range bars */
[data-theme="light"] .comp-range-name { color: #0F172A; }
[data-theme="light"] .comp-range-bar-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .comp-range-bar-marker {
    background: #0F172A;
    border-color: rgba(255,255,255,0.5);
}
[data-theme="light"] .comp-range-row.current-row .comp-range-name { color: #0E7490; }
[data-theme="light"] .comp-range-row.current-row .comp-range-bar-track {
    box-shadow: 0 0 6px rgba(14,116,144,0.3);
}

/* FFMI */
[data-theme="light"] .comp-ffmi-value { color: #0F172A; }
[data-theme="light"] .comp-ffmi-label { color: #334155; }
[data-theme="light"] .ffmi-bar-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .ffmi-bar-marker {
    background: #0F172A;
    border-color: rgba(255,255,255,0.5);
}

/* Tracker inputs */
[data-theme="light"] .tracker-input-group label { color: #334155; }
[data-theme="light"] .tracker-input-group input,
[data-theme="light"] .tracker-input-group select {
    background: #E2E8F0;
    border-color: rgba(0,0,0,0.15);
    color: #0F172A;
}
[data-theme="light"] .tracker-input-group input::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] .tracker-input-group input:focus,
[data-theme="light"] .tracker-input-group select:focus {
    border-color: #0E7490;
    box-shadow: 0 0 0 3px rgba(14,116,144,0.2);
}

/* Tracker buttons */
[data-theme="light"] .tracker-log-btn {
    background: #0E7490;
    color: #fff;
}
[data-theme="light"] .tracker-log-btn:hover {
    box-shadow: 0 2px 8px rgba(14,116,144,0.3);
}
[data-theme="light"] .tracker-autofill-btn {
    border-color: rgba(0,0,0,0.15);
    color: #475569;
}
[data-theme="light"] .tracker-autofill-btn:hover {
    border-color: #0E7490;
    color: #0E7490;
}

/* Tracker chart empty state */
[data-theme="light"] .tracker-chart-empty { color: #475569; }

/* Tracker goal summary */
[data-theme="light"] .tracker-goal-summary {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
    color: #475569;
}
[data-theme="light"] .tracker-goal-summary strong { color: #0E7490; }

/* Tracker table */
[data-theme="light"] .tracker-table-empty { color: #475569; }
[data-theme="light"] .tracker-clear-btn {
    border-color: rgba(0,0,0,0.12);
    color: #475569;
}
[data-theme="light"] .tracker-clear-btn:hover {
    border-color: rgba(239,68,68,0.4);
    color: #dc2626;
}
[data-theme="light"] .tracker-table th {
    background: rgba(14,116,144,0.08);
    color: #334155;
}
[data-theme="light"] .tracker-table td {
    border-bottom-color: rgba(0,0,0,0.06);
    color: #475569;
}
[data-theme="light"] .tracker-table tr:hover td { background: #F0F4F9; }
[data-theme="light"] .tracker-table .bf-col { color: #0F172A; }
[data-theme="light"] .tracker-del-btn { color: #475569; }
[data-theme="light"] .tracker-del-btn:hover { color: #dc2626; background: rgba(239,68,68,0.08); }

/* Light mode — existing calc-specific dark hardcoded values */
[data-theme="light"] .calculator-widget {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .result-card-main {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
[data-theme="light"] .stat-pill {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .stat-pill:hover { background: #E2E8F0; }
[data-theme="light"] .g-label { color: #475569; }
[data-theme="light"] .g-value { color: #0F172A; }
[data-theme="light"] .result-value {
    color: #0F172A;
    text-shadow: none;
}
[data-theme="light"] .result-label { color: #475569; }
[data-theme="light"] .pane-divider { background: rgba(0,0,0,0.08); }
[data-theme="light"] .measurements-section {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .method-tab {
    border-color: rgba(0,0,0,0.12);
    background: #F0F4F9;
    color: #334155;
}
[data-theme="light"] .method-tab:hover {
    border-color: #0E7490;
    background: rgba(14,116,144,0.06);
}
[data-theme="light"] .method-tab.active {
    background: #0E7490;
    border-color: #0E7490;
    color: #fff;
}
[data-theme="light"] .method-tab.active .tab-acc { color: #fff; border-color: rgba(255,255,255,0.4); }
[data-theme="light"] .gender-seg { color: #334155; }
[data-theme="light"] .gender-seg.active { background: #0E7490; color: #fff; box-shadow: none; }
[data-theme="light"] .gender-toggle-compact { background: #E2E8F0; }
[data-theme="light"] .unit-toggle-container { background: #E2E8F0; }
[data-theme="light"] .unit-btn { color: #334155; }
[data-theme="light"] .unit-btn.active { background: #0E7490; color: #fff; box-shadow: none; }
[data-theme="light"] .insight-card {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .insight-title { color: #0F172A; }
[data-theme="light"] .insight-text { color: #475569; }
[data-theme="light"] .goal-results {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .what-if-section {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .what-if-title { color: #0F172A; }
[data-theme="light"] .what-if-slider-row label { color: #475569; }
[data-theme="light"] .what-if-result { background: rgba(14,116,144,0.05); color: #334155; }
[data-theme="light"] .what-if-result strong { color: #0E7490; }
[data-theme="light"] .goal-projection-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
[data-theme="light"] .card-title { color: #334155; }
[data-theme="light"] .proj-item {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .proj-label { color: #475569; }
[data-theme="light"] .proj-val { color: #0F172A; }
[data-theme="light"] .stat-5-item {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .stat-5-label { color: #475569; }
[data-theme="light"] .stat-5-val { color: #0F172A; }
[data-theme="light"] .category-glow-card {
    border-color: rgba(0,0,0,0.12);
    background: #EDF2F9;
    animation: none;
}
[data-theme="light"] .cat-name { color: #0F172A; }
[data-theme="light"] .cat-range { color: #475569; }
[data-theme="light"] .percentile-bar-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .pct-label-row { color: #475569; }
[data-theme="light"] .pct-label-row strong { color: #0F172A; }
[data-theme="light"] .pct-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .pct-marker { background: #0F172A; }
[data-theme="light"] .pct-axis-labels { color: #475569; }
[data-theme="light"] .composition-chart-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .chart-card-title { color: #334155; }
[data-theme="light"] .chart-tab {
    border-color: rgba(0,0,0,0.1);
    color: #475569;
}
[data-theme="light"] .chart-tab.active { background: #0E7490; color: #fff; border-color: #0E7490; }
[data-theme="light"] .chart-legend { color: #475569; }
[data-theme="light"] .spectrum-labels-top { color: #475569; }
[data-theme="light"] .spectrum-marker { background: #0F172A; border-color: #fff; }
[data-theme="light"] .spectrum-legend { color: #475569; }
[data-theme="light"] .sleg-current { background: #0F172A; }
[data-theme="light"] .alert-text { color: #475569; }
[data-theme="light"] .alert-text strong { color: #0F172A; }
[data-theme="light"] .alert-info { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.2); }
[data-theme="light"] .alert-success { background: #F0FDF4; border-color: rgba(34,197,94,0.25); }
[data-theme="light"] .alert-warning { background: #FFFBEB; border-color: rgba(245,158,11,0.25); }
[data-theme="light"] .alert-error { background: #FFF1F2; border-color: rgba(239,68,68,0.25); }
[data-theme="light"] .ideal-weight-card { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .ideal-weight-header { color: #334155; }
[data-theme="light"] .ideal-range-item { background: #EDF2F9; }
[data-theme="light"] .ideal-label { color: #475569; }
[data-theme="light"] .ideal-val { color: #0F172A; }
[data-theme="light"] .week-item { background: #EDF2F9; color: #475569; }
[data-theme="light"] .week-item span { color: #0E7490; }
[data-theme="light"] .scenario-table th { background: rgba(14,116,144,0.08); color: #334155; }
[data-theme="light"] .scenario-table td { border-bottom-color: rgba(0,0,0,0.06); color: #475569; }
[data-theme="light"] .scenario-table tr:hover td { background: #F0F4F9; }
[data-theme="light"] .scenario-table .bf-col { color: #0F172A; }
[data-theme="light"] .history-panel { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .history-title { color: #334155; }
[data-theme="light"] .history-save-btn { background: rgba(14,116,144,0.1); border-color: rgba(14,116,144,0.35); color: #0E7490; }
[data-theme="light"] .history-save-btn:hover { background: rgba(14,116,144,0.18); }
[data-theme="light"] .history-clear-btn { border-color: rgba(0,0,0,0.12); color: #475569; }
[data-theme="light"] .history-clear-btn:hover { border-color: rgba(239,68,68,0.4); color: #dc2626; }
[data-theme="light"] .history-empty { color: #475569; }
[data-theme="light"] .history-entry { background: #EDF2F9; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .history-entry-bf { color: #0F172A; }
[data-theme="light"] .history-entry-date { color: #475569; }
[data-theme="light"] .history-entry-meta { color: #475569; }
[data-theme="light"] .history-del-btn { color: #475569; }
[data-theme="light"] .history-del-btn:hover { color: #dc2626; background: rgba(239,68,68,0.08); }
[data-theme="light"] .share-btn { background: rgba(14,116,144,0.08); border-color: rgba(14,116,144,0.3); color: #0E7490; }
[data-theme="light"] .share-btn:hover { background: rgba(14,116,144,0.15); }
[data-theme="light"] .copy-btn { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #3b82f6; }
[data-theme="light"] .copy-btn:hover { background: rgba(59,130,246,0.15); }
[data-theme="light"] .print-btn { border-color: rgba(0,0,0,0.12); color: #475569; }
[data-theme="light"] .print-btn:hover { border-color: rgba(0,0,0,0.25); color: #334155; }
[data-theme="light"] .measure-tip-row { background: rgba(14,116,144,0.06); border-color: rgba(14,116,144,0.15); }
[data-theme="light"] .measure-tip-text { color: #475569; }
[data-theme="light"] .highlight-val { color: #0E7490; }
[data-theme="light"] .action-card {
    background: #EDF2F9;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .action-card:hover {
    background: #E2E8F0;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .action-card .card-value { color: #0F172A; }
[data-theme="light"] .action-card .card-label { color: #475569; }
[data-theme="light"] .action-card.calories .card-value { color: #c2410c; }
[data-theme="light"] .action-card.protein .card-value { color: #dc2626; }
[data-theme="light"] .action-card.time .card-value { color: #0E7490; }
[data-theme="light"] .action-card.maintenance { background: #F0FDF4; border-color: rgba(34,197,94,0.25); }
[data-theme="light"] .action-card.maintenance .card-value { color: #16a34a; }
[data-theme="light"] .action-card .card-icon { filter: none; }
[data-theme="light"] .comparison-table thead th { color: #475569; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .comparison-table thead th.goal-col { background: rgba(14,116,144,0.06); }
[data-theme="light"] .comparison-table tbody td { border-bottom-color: rgba(0,0,0,0.06); color: #334155; }
[data-theme="light"] .comparison-table tbody td:first-child { color: #475569; }
[data-theme="light"] .comparison-table tbody td.num-cell { color: #0F172A; }
[data-theme="light"] .comparison-table tbody td.goal-col { background: rgba(14,116,144,0.06); color: #0E7490; }
[data-theme="light"] .slider-value,
[data-theme="light"] #what-if-bf-label {
    color: #0E7490;
    background: rgba(14,116,144,0.08);
}
[data-theme="light"] .deficit-btn { background: #E2E8F0; border-color: rgba(0,0,0,0.08); color: #334155; }
[data-theme="light"] .deficit-btn.active { border-color: #0E7490; background: rgba(14,116,144,0.08); color: #0E7490; }
[data-theme="light"] .professional-header { color: #0E7490; }
[data-theme="light"] .card-step-num { background: #0E7490; color: #fff; }
[data-theme="light"] .card-title-final { color: #0F172A; }
[data-theme="light"] .card-body-final { color: #475569; }
[data-theme="light"] .faq-divider { background: #0E7490; }
[data-theme="light"] .faq-header { color: #0F172A; }
[data-theme="light"] .faq-item summary { color: #0F172A; }
[data-theme="light"] .faq-item summary::after { color: #0E7490; }
[data-theme="light"] .faq-item[open] summary { border-bottom-color: rgba(0,0,0,0.06); background: #F0F4F9; }
[data-theme="light"] .faq-item p { color: #475569; }
[data-theme="light"] .faq-item strong { color: #0E7490; }
[data-theme="light"] .accuracy-badge[data-level="low"] { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.2); }
[data-theme="light"] .accuracy-badge[data-level="moderate"] { background: rgba(245,158,11,0.08); color: #b45309; border-color: rgba(245,158,11,0.2); }
[data-theme="light"] .accuracy-badge[data-level="high"] { background: rgba(34,197,94,0.08); color: #16a34a; border-color: rgba(34,197,94,0.2); }
[data-theme="light"] .result-category .category-text { background: rgba(14,116,144,0.08); color: #0E7490; }
[data-theme="light"] .smart-insight-box { background: rgba(14,116,144,0.06); border-color: rgba(14,116,144,0.2); }
[data-theme="light"] .insight-summary { color: #334155; }
[data-theme="light"] .insight-bar-fill { background: #0E7490; }
[data-theme="light"] .tooltip-trigger { background: rgba(0,0,0,0.08); color: #475569; }
[data-theme="light"] .tooltip-trigger:hover::after {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.12);
    color: #334155;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="light"] .gauge-stat { background: #EDF2F9; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .gauge-stat-label { color: #475569; }
[data-theme="light"] .gauge-stat-value { color: #0F172A; }
[data-theme="light"] .insight-progress-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .scenario-card-header { color: #334155; }
[data-theme="light"] .goal-slider,
[data-theme="light"] .what-if-slider { background: linear-gradient(90deg, #0d9488, #0E7490, #0ea5e9); }
[data-theme="light"] .section-label { color: #0E7490; }
[data-theme="light"] .method-label { color: #334155; }
[data-theme="light"] .method-hint { color: #475569; }
[data-theme="light"] .input-tip { color: #64748b; }
[data-theme="light"] .card-header { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .accuracy-pill { background: #EDF2F9; border-color: rgba(0,0,0,0.08); color: #334155; }