/* ===== Global Theme System ===== */
/* All themes override :root CSS variables via data-theme attribute */
/* Default :root = sakura theme (prevents flash of unstyled content before JS runs) */
:root {
    --bg-start: #fef6ff; --bg-end: #f0f9ff;
    --bg-card: rgba(255, 255, 255, 0.78); --bg-card-alt: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(255, 240, 248, 0.6);
    --accent: #ff9ecb; --accent2: #a5b4fc;
    --accent-light: #ffe4f0; --accent-hover: #f08fc0;
    --green: #059669; --green-light: #d1fae5;
    --amber: #d97706; --amber-light: #fef3c7;
    --red: #dc2626; --red-light: #fee2e2;
    --text-1: #1f2937; --text-2: #6b7280; --text-3: #9ca3af;
    --border: rgba(255, 255, 255, 0.5);
    --radius: 16px; --radius-lg: 24px;
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.12);
    --header-grad: linear-gradient(120deg, #ff9ecb, #a5b4fc, #86efac);
    --card-header-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --sidebar-brand-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --sidebar-active-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --bubble-grad: radial-gradient(circle, rgba(255,158,203,0.4), rgba(165,180,252,0.25));
    --progress-grad: linear-gradient(120deg, #ff9ecb, #a5b4fc);
    --textarea-border: #fbcfe8; --textarea-bg: rgba(255,248,250,0.5);
    --textarea-focus-shadow: rgba(255,158,203,0.1);
    --hover-shadow: rgba(255,158,203,0.15);
}

[data-theme="sakura"] {
    --bg-start: #fef6ff; --bg-end: #f0f9ff;
    --bg-card: rgba(255, 255, 255, 0.78); --bg-card-alt: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(255, 240, 248, 0.6);
    --accent: #ff9ecb; --accent2: #a5b4fc;
    --accent-light: #ffe4f0; --accent-hover: #f08fc0;
    --green: #059669; --green-light: #d1fae5;
    --amber: #d97706; --amber-light: #fef3c7;
    --red: #dc2626; --red-light: #fee2e2;
    --text-1: #1f2937; --text-2: #6b7280; --text-3: #9ca3af;
    --border: rgba(255, 255, 255, 0.5);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.12);
    --header-grad: linear-gradient(120deg, #ff9ecb, #a5b4fc, #86efac);
    --card-header-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --sidebar-brand-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --sidebar-active-grad: linear-gradient(135deg, #ff9ecb, #a5b4fc);
    --bubble-grad: radial-gradient(circle, rgba(255,158,203,0.4), rgba(165,180,252,0.25));
    --progress-grad: linear-gradient(120deg, #ff9ecb, #a5b4fc);
    --textarea-border: #fbcfe8; --textarea-bg: rgba(255,248,250,0.5);
    --textarea-focus-shadow: rgba(255,158,203,0.1);
    --hover-shadow: rgba(255,158,203,0.15);
    --brand-emoji: '🌸';
}

[data-theme="ocean"] {
    --bg-start: #f0f9ff; --bg-end: #e0f2fe;
    --bg-card: rgba(255, 255, 255, 0.78); --bg-card-alt: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(224, 242, 254, 0.6);
    --accent: #38bdf8; --accent2: #818cf8;
    --accent-light: #e0f2fe; --accent-hover: #0ea5e9;
    --green: #059669; --green-light: #d1fae5;
    --amber: #d97706; --amber-light: #fef3c7;
    --red: #dc2626; --red-light: #fee2e2;
    --text-1: #1f2937; --text-2: #6b7280; --text-3: #9ca3af;
    --border: rgba(255, 255, 255, 0.5);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.12);
    --header-grad: linear-gradient(120deg, #38bdf8, #818cf8, #34d399);
    --card-header-grad: linear-gradient(135deg, #38bdf8, #818cf8);
    --sidebar-brand-grad: linear-gradient(135deg, #38bdf8, #818cf8);
    --sidebar-active-grad: linear-gradient(135deg, #38bdf8, #818cf8);
    --bubble-grad: radial-gradient(circle, rgba(56,189,248,0.4), rgba(129,140,248,0.25));
    --progress-grad: linear-gradient(120deg, #38bdf8, #818cf8);
    --textarea-border: #bae6fd; --textarea-bg: rgba(240,249,255,0.5);
    --textarea-focus-shadow: rgba(56,189,248,0.1);
    --hover-shadow: rgba(56,189,248,0.15);
    --brand-emoji: '🌊';
}

[data-theme="forest"] {
    --bg-start: #f0fdf4; --bg-end: #ecfdf5;
    --bg-card: rgba(255, 255, 255, 0.78); --bg-card-alt: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(209, 250, 229, 0.6);
    --accent: #34d399; --accent2: #a3e635;
    --accent-light: #d1fae5; --accent-hover: #10b981;
    --green: #059669; --green-light: #d1fae5;
    --amber: #d97706; --amber-light: #fef3c7;
    --red: #dc2626; --red-light: #fee2e2;
    --text-1: #1f2937; --text-2: #6b7280; --text-3: #9ca3af;
    --border: rgba(255, 255, 255, 0.5);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.12);
    --header-grad: linear-gradient(120deg, #34d399, #a3e635, #38bdf8);
    --card-header-grad: linear-gradient(135deg, #34d399, #a3e635);
    --sidebar-brand-grad: linear-gradient(135deg, #34d399, #a3e635);
    --sidebar-active-grad: linear-gradient(135deg, #34d399, #a3e635);
    --bubble-grad: radial-gradient(circle, rgba(52,211,153,0.4), rgba(163,230,53,0.25));
    --progress-grad: linear-gradient(120deg, #34d399, #a3e635);
    --textarea-border: #a7f3d0; --textarea-bg: rgba(240,253,244,0.5);
    --textarea-focus-shadow: rgba(52,211,153,0.1);
    --hover-shadow: rgba(52,211,153,0.15);
    --brand-emoji: '🌿';
}

[data-theme="sunset"] {
    --bg-start: #fff7ed; --bg-end: #fef3c7;
    --bg-card: rgba(255, 255, 255, 0.78); --bg-card-alt: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(254, 243, 199, 0.6);
    --accent: #fb923c; --accent2: #f472b6;
    --accent-light: #ffedd5; --accent-hover: #f97316;
    --green: #059669; --green-light: #d1fae5;
    --amber: #d97706; --amber-light: #fef3c7;
    --red: #dc2626; --red-light: #fee2e2;
    --text-1: #1f2937; --text-2: #6b7280; --text-3: #9ca3af;
    --border: rgba(255, 255, 255, 0.5);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.05);
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.12);
    --header-grad: linear-gradient(120deg, #fb923c, #f472b6, #c084fc);
    --card-header-grad: linear-gradient(135deg, #fb923c, #f472b6);
    --sidebar-brand-grad: linear-gradient(135deg, #fb923c, #f472b6);
    --sidebar-active-grad: linear-gradient(135deg, #fb923c, #f472b6);
    --bubble-grad: radial-gradient(circle, rgba(251,146,60,0.4), rgba(244,114,182,0.25));
    --progress-grad: linear-gradient(120deg, #fb923c, #f472b6);
    --textarea-border: #fed7aa; --textarea-bg: rgba(255,247,237,0.5);
    --textarea-focus-shadow: rgba(251,146,60,0.1);
    --hover-shadow: rgba(251,146,60,0.15);
    --brand-emoji: '🌅';
}

[data-theme="night"] {
    --bg-start: #1e1b2e; --bg-end: #1a1625;
    --bg-card: rgba(40, 35, 60, 0.85); --bg-card-alt: rgba(45, 40, 65, 0.8);
    --bg-hover: rgba(55, 48, 80, 0.6);
    --accent: #c084fc; --accent2: #818cf8;
    --accent-light: rgba(192,132,252,0.15); --accent-hover: #a855f7;
    --green: #34d399; --green-light: rgba(52,211,153,0.15);
    --amber: #fbbf24; --amber-light: rgba(251,191,36,0.15);
    --red: #f87171; --red-light: rgba(248,113,113,0.15);
    --text-1: #f1f5f9; --text-2: #94a3b8; --text-3: #64748b;
    --border: rgba(192,132,252,0.15);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.2);
    --shadow: 0 8px 24px rgba(0,0,0,0.25);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.3);
    --shadow-lg: 0 20px 35px -10px rgba(0,0,0,0.4);
    --header-grad: linear-gradient(120deg, #c084fc, #818cf8, #38bdf8);
    --card-header-grad: linear-gradient(135deg, #c084fc, #818cf8);
    --sidebar-brand-grad: linear-gradient(135deg, #c084fc, #818cf8);
    --sidebar-active-grad: linear-gradient(135deg, #c084fc, #818cf8);
    --bubble-grad: radial-gradient(circle, rgba(192,132,252,0.3), rgba(129,140,248,0.2));
    --progress-grad: linear-gradient(120deg, #c084fc, #818cf8);
    --textarea-border: rgba(192,132,252,0.3); --textarea-bg: rgba(30,27,46,0.6);
    --textarea-focus-shadow: rgba(192,132,252,0.15);
    --hover-shadow: rgba(192,132,252,0.15);
    --brand-emoji: '🌙';
}

/* ===== Theme Switcher Component ===== */
.theme-switcher {
    position: fixed; top: 20px; right: 20px; z-index: 800;
}
.theme-toggle-btn {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--bg-card); backdrop-filter: blur(14px);
    border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}
.theme-toggle-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }
.theme-panel {
    position: absolute; top: 52px; right: 0;
    background: var(--bg-card); backdrop-filter: blur(18px);
    border: 1px solid var(--border); border-radius: 18px;
    padding: 1rem; min-width: 180px;
    box-shadow: var(--shadow-lg);
    display: none;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
}
.theme-panel.show {
    display: block; opacity: 1; transform: translateY(0);
}
.theme-panel h4 {
    font-size: 0.8rem; font-weight: 700; color: var(--text-2);
    margin-bottom: 0.75rem; text-align: center; letter-spacing: 1px;
    text-transform: uppercase;
}
.theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 0.6rem 0.75rem; border-radius: 12px;
    cursor: pointer; transition: all 0.15s;
    font-size: 0.85rem; font-weight: 600; color: var(--text-1);
}
.theme-option:hover { background: var(--accent-light); }
.theme-option.active { background: var(--accent-light); color: var(--accent-hover); }
.theme-dot {
    width: 28px; height: 28px; border-radius: 10px;
    flex-shrink: 0; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.theme-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    border: 2px solid transparent; transition: border-color 0.15s;
}
.theme-option.active .theme-dot::after {
    border-color: var(--accent-hover);
}
.theme-dot-sakura { background: linear-gradient(135deg, #ff9ecb, #a5b4fc); }
.theme-dot-ocean { background: linear-gradient(135deg, #38bdf8, #818cf8); }
.theme-dot-forest { background: linear-gradient(135deg, #34d399, #a3e635); }
.theme-dot-sunset { background: linear-gradient(135deg, #fb923c, #f472b6); }
.theme-dot-night { background: linear-gradient(135deg, #c084fc, #818cf8); }

/* ===== Theme-aware shared components ===== */
.sidebar-nav .sidebar-brand {
    background: var(--sidebar-brand-grad) !important;
}
.sidebar-nav .nav-item.active {
    background: var(--sidebar-active-grad) !important;
    color: white !important;
}
/* Header title gradients */
.header-card h1, .page-title {
    background: var(--header-grad) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Card header gradients */
.card-header, .question-header {
    background: var(--card-header-grad) !important;
}
/* Run buttons */
.btn-run {
    background: var(--card-header-grad) !important;
}
/* Progress overlay titles */
.progress-card h4 {
    background: var(--progress-grad) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Step active icon */
.step-item.active .step-icon {
    background: var(--card-header-grad) !important;
}
/* Header sub-text and back links */
.header-card .sub, .page-header .sub {
    color: var(--text-2) !important;
}
/* Ensure body text changes with theme */
body {
    background: linear-gradient(145deg, var(--bg-start), var(--bg-end)) !important;
    color: var(--text-1) !important;
}
/* Glass cards */
.header-card, .question-card, .glass-box, .h-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
/* Left panel in report */
.left-panel {
    background: var(--bg-card-alt) !important;
    border-color: var(--border) !important;
}
/* Bubble backgrounds */
.bubble {
    background: var(--bubble-grad) !important;
}
/* Textarea */
.analysis-textarea {
    border-color: var(--textarea-border) !important;
    background: var(--textarea-bg) !important;
}
.analysis-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--textarea-focus-shadow) !important;
}