/* ===== Theme Variables ===== */
:root,
html[data-theme="default"] {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text: #1a1a1a;
  --text-heading: #1e3a5f;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --nav-bg: #1e3a5f;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-ring: rgba(37, 99, 235, 0.2);
  --accent-bg: #eff6ff;
  --accent-bg-hover: #dbeafe;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #2563eb;
  --match-good: #6366f1;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #cbd5e1;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #dbeafe;
  --tag-helps-text: #1e40af;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #eff6ff;
  --tip-border: #bfdbfe;
  --tip-strong: #1e40af;
  --body-bg-image: none;
  --card-radius: 6px;
  --side-bg-left: none;
  --side-bg-right: none;
}

/* ----- Dreamlight ----- */
html[data-theme="dreamlight"] {
  --bg: #f5f0ff;
  --surface: #ffffff;
  --surface-alt: #ede5ff;
  --border: #d8ccf0;
  --border-light: #ede5ff;
  --text: #2d1b4e;
  --text-heading: #4c1d95;
  --text-muted: #7c6b9e;
  --text-faint: #a99bc4;
  --nav-bg: #4c1d95;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-ring: rgba(124, 58, 237, 0.2);
  --accent-bg: #ede9fe;
  --accent-bg-hover: #ddd6fe;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #7c3aed;
  --match-good: #a78bfa;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #d8ccf0;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #ddd6fe;
  --tag-helps-text: #4c1d95;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #ede9fe;
  --tip-border: #c4b5fd;
  --tip-strong: #6d28d9;
  --body-bg-image: radial-gradient(ellipse at 20% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 60%),
                   radial-gradient(ellipse at 80% 30%, rgba(196, 181, 253, 0.1) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 20%, rgba(167,139,250,0.45) 0%, transparent 70%),
    radial-gradient(circle at 80% 60%, rgba(196,181,253,0.35) 0%, transparent 50%),
    radial-gradient(circle at 90% 85%, rgba(139,92,246,0.30) 0%, transparent 45%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 30%, rgba(196,181,253,0.40) 0%, transparent 70%),
    radial-gradient(circle at 20% 70%, rgba(167,139,250,0.30) 0%, transparent 50%),
    radial-gradient(circle at 10% 15%, rgba(221,214,254,0.35) 0%, transparent 45%);
}

/* ----- Enchanted Garden ----- */
html[data-theme="enchanted-garden"] {
  --bg: #f0faf4;
  --surface: #ffffff;
  --surface-alt: #dcfce7;
  --border: #bbf7d0;
  --border-light: #dcfce7;
  --text: #14532d;
  --text-heading: #166534;
  --text-muted: #4d7c62;
  --text-faint: #86b89a;
  --nav-bg: #166534;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #16a34a;
  --accent-hover: #15803d;
  --accent-ring: rgba(22, 163, 74, 0.2);
  --accent-bg: #dcfce7;
  --accent-bg-hover: #bbf7d0;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #16a34a;
  --match-good: #a855f7;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #a7f3d0;
  --tag-nodegree-bg: #fce7f3;
  --tag-nodegree-text: #9d174d;
  --tag-helps-bg: #d1fae5;
  --tag-helps-text: #065f46;
  --tag-telework-bg: #cffafe;
  --tag-telework-text: #155e75;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #dcfce7;
  --tip-border: #86efac;
  --tip-strong: #15803d;
  --body-bg-image: radial-gradient(ellipse at 10% 80%, rgba(134, 239, 172, 0.1) 0%, transparent 50%),
                   radial-gradient(ellipse at 90% 20%, rgba(252, 231, 243, 0.12) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 80%, rgba(134,239,172,0.20) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(252,231,243,0.15) 0%, transparent 40%),
    linear-gradient(to top, rgba(22,163,74,0.06) 0%, transparent 40%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 40%, rgba(134,239,172,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(252,231,243,0.12) 0%, transparent 40%),
    linear-gradient(to top, rgba(22,163,74,0.06) 0%, transparent 40%);
}

/* ----- Cherry Blossom ----- */
html[data-theme="cherry-blossom"] {
  --bg: #fdf2f8;
  --surface: #ffffff;
  --surface-alt: #fce7f3;
  --border: #f9a8d4;
  --border-light: #fce7f3;
  --text: #4a1942;
  --text-heading: #9d174d;
  --text-muted: #9e5a85;
  --text-faint: #c48bac;
  --nav-bg: #9d174d;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #db2777;
  --accent-hover: #be185d;
  --accent-ring: rgba(219, 39, 119, 0.2);
  --accent-bg: #fce7f3;
  --accent-bg-hover: #fbcfe8;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #db2777;
  --match-good: #a855f7;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #f9a8d4;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #fce7f3;
  --tag-helps-text: #9d174d;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #fce7f3;
  --tip-border: #f9a8d4;
  --tip-strong: #be185d;
  --body-bg-image: radial-gradient(ellipse at 30% 20%, rgba(249, 168, 212, 0.1) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 70%, rgba(251, 207, 232, 0.1) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 15%, rgba(249,168,212,0.20) 0%, transparent 50%),
    radial-gradient(circle at 85% 60%, rgba(251,207,232,0.18) 0%, transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(249,168,212,0.12) 0%, transparent 35%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 25%, rgba(251,207,232,0.18) 0%, transparent 50%),
    radial-gradient(circle at 15% 70%, rgba(249,168,212,0.14) 0%, transparent 40%),
    radial-gradient(circle at 10% 10%, rgba(251,207,232,0.10) 0%, transparent 35%);
}

/* ----- Coral Reef ----- */
html[data-theme="coral-reef"] {
  --bg: #fef7f0;
  --surface: #ffffff;
  --surface-alt: #fed7aa;
  --border: #fdba74;
  --border-light: #ffedd5;
  --text: #431407;
  --text-heading: #9a3412;
  --text-muted: #8b5c3a;
  --text-faint: #c49b79;
  --nav-bg: #9a3412;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #ea580c;
  --accent-hover: #c2410c;
  --accent-ring: rgba(234, 88, 12, 0.2);
  --accent-bg: #ffedd5;
  --accent-bg-hover: #fed7aa;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #ea580c;
  --match-good: #0891b2;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #fdba74;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #ffedd5;
  --tag-helps-text: #9a3412;
  --tag-telework-bg: #cffafe;
  --tag-telework-text: #155e75;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #ffedd5;
  --tip-border: #fdba74;
  --tip-strong: #c2410c;
  --body-bg-image: radial-gradient(ellipse at 80% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 20% 30%, rgba(253, 186, 116, 0.1) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 70%, rgba(253,186,116,0.22) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(14,165,233,0.12) 0%, transparent 45%),
    linear-gradient(to top, rgba(234,88,12,0.05) 0%, transparent 35%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 50%, rgba(14,165,233,0.15) 0%, transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(253,186,116,0.18) 0%, transparent 45%),
    linear-gradient(to top, rgba(234,88,12,0.05) 0%, transparent 35%);
}

/* ----- Golden Hour ----- */
html[data-theme="golden-hour"] {
  --bg: #fffbeb;
  --surface: #ffffff;
  --surface-alt: #fef3c7;
  --border: #fcd34d;
  --border-light: #fef9c3;
  --text: #451a03;
  --text-heading: #92400e;
  --text-muted: #78590a;
  --text-faint: #a18549;
  --nav-bg: #92400e;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-ring: rgba(217, 119, 6, 0.2);
  --accent-bg: #fef3c7;
  --accent-bg-hover: #fde68a;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fff7ed;
  --warning-border: #fb923c;
  --warning-text: #9a3412;
  --warning-text-dark: #7c2d12;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #d97706;
  --match-good: #b45309;
  --match-fallback: #9ca3af;
  --match-watch: #ea580c;
  --input-border: #fcd34d;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #fef3c7;
  --tag-helps-text: #92400e;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #ffedd5;
  --tag-lake-text: #9a3412;
  --tip-bg: #fef3c7;
  --tip-border: #fcd34d;
  --tip-strong: #b45309;
  --body-bg-image: linear-gradient(135deg, rgba(253, 224, 71, 0.06) 0%, rgba(251, 146, 60, 0.06) 100%);
  --side-bg-left:
    linear-gradient(to top right, rgba(251,146,60,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 20%, rgba(253,224,71,0.18) 0%, transparent 50%),
    linear-gradient(to top, rgba(217,119,6,0.06) 0%, transparent 30%);
  --side-bg-right:
    linear-gradient(to top left, rgba(253,224,71,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 40%, rgba(251,146,60,0.12) 0%, transparent 50%),
    linear-gradient(to top, rgba(217,119,6,0.06) 0%, transparent 30%);
}

/* ----- Ocean Breeze ----- */
html[data-theme="ocean-breeze"] {
  --bg: #f0f9ff;
  --surface: #ffffff;
  --surface-alt: #e0f2fe;
  --border: #bae6fd;
  --border-light: #e0f2fe;
  --text: #0c4a6e;
  --text-heading: #075985;
  --text-muted: #4b7a96;
  --text-faint: #7ba9c2;
  --nav-bg: #075985;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --accent-ring: rgba(2, 132, 199, 0.2);
  --accent-bg: #e0f2fe;
  --accent-bg-hover: #bae6fd;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #0284c7;
  --match-good: #6366f1;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #bae6fd;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #e0f2fe;
  --tag-helps-text: #075985;
  --tag-telework-bg: #cffafe;
  --tag-telework-text: #155e75;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #e0f2fe;
  --tip-border: #7dd3fc;
  --tip-strong: #0369a1;
  --body-bg-image: radial-gradient(ellipse at 50% 100%, rgba(125, 211, 252, 0.08) 0%, transparent 60%);
  --side-bg-left:
    linear-gradient(to top, rgba(2,132,199,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 80%, rgba(125,211,252,0.20) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(186,230,253,0.15) 0%, transparent 40%);
  --side-bg-right:
    linear-gradient(to top, rgba(2,132,199,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 0% 60%, rgba(125,211,252,0.18) 0%, transparent 50%),
    radial-gradient(circle at 15% 30%, rgba(186,230,253,0.12) 0%, transparent 40%);
}

/* ----- Lavender Mist ----- */
html[data-theme="lavender-mist"] {
  --bg: #faf5ff;
  --surface: #ffffff;
  --surface-alt: #f3e8ff;
  --border: #e9d5ff;
  --border-light: #f3e8ff;
  --text: #3b0764;
  --text-heading: #6b21a8;
  --text-muted: #7e5a9e;
  --text-faint: #b399cc;
  --nav-bg: #6b21a8;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #9333ea;
  --accent-hover: #7e22ce;
  --accent-ring: rgba(147, 51, 234, 0.2);
  --accent-bg: #f3e8ff;
  --accent-bg-hover: #e9d5ff;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #9333ea;
  --match-good: #c084fc;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #e9d5ff;
  --tag-nodegree-bg: #fce7f3;
  --tag-nodegree-text: #9d174d;
  --tag-helps-bg: #f3e8ff;
  --tag-helps-text: #6b21a8;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #f3e8ff;
  --tip-border: #d8b4fe;
  --tip-strong: #7e22ce;
  --body-bg-image: radial-gradient(ellipse at 60% 40%, rgba(216, 180, 254, 0.08) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 30%, rgba(216,180,254,0.20) 0%, transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(192,132,252,0.12) 0%, transparent 40%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 50%, rgba(216,180,254,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 20%, rgba(192,132,252,0.10) 0%, transparent 40%);
}

/* ----- Cozy Hearth ----- */
html[data-theme="cozy-hearth"] {
  --bg: #faf6f1;
  --surface: #fffdf9;
  --surface-alt: #f5ebe0;
  --border: #ddd0c0;
  --border-light: #f5ebe0;
  --text: #3e2c1c;
  --text-heading: #6b4423;
  --text-muted: #8b7355;
  --text-faint: #b5a08a;
  --nav-bg: #6b4423;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-text-secondary: rgba(255,255,255,0.85);
  --nav-border: rgba(255,255,255,0.3);
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-ring: rgba(180, 83, 9, 0.2);
  --accent-bg: #fef3c7;
  --accent-bg-hover: #fde68a;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --warning-bg: #fef3c7;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --warning-text-dark: #78350f;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-bg-hover: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;
  --match-best: #059669;
  --match-strong: #b45309;
  --match-good: #6366f1;
  --match-fallback: #9ca3af;
  --match-watch: #d97706;
  --input-border: #ddd0c0;
  --tag-nodegree-bg: #ede9fe;
  --tag-nodegree-text: #5b21b6;
  --tag-helps-bg: #fef3c7;
  --tag-helps-text: #92400e;
  --tag-telework-bg: #d1fae5;
  --tag-telework-text: #065f46;
  --tag-lake-bg: #fef9c3;
  --tag-lake-text: #713f12;
  --tip-bg: #fef3c7;
  --tip-border: #fcd34d;
  --tip-strong: #92400e;
  --body-bg-image: none;
  --side-bg-left:
    radial-gradient(ellipse at 100% 50%, rgba(180,83,9,0.10) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(221,200,170,0.12) 0%, transparent 40%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 40%, rgba(180,83,9,0.08) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(221,200,170,0.10) 0%, transparent 40%);
}

/* ----- Starlit Night (dark) ----- */
html[data-theme="starlit-night"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-alt: #283548;
  --border: #334155;
  --border-light: #283548;
  --text: #e2e8f0;
  --text-heading: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --nav-bg: #020617;
  --nav-text: #f1f5f9;
  --nav-text-muted: rgba(241,245,249,0.6);
  --nav-text-secondary: rgba(241,245,249,0.8);
  --nav-border: rgba(241,245,249,0.2);
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-ring: rgba(129, 140, 248, 0.3);
  --accent-bg: #1e1b4b;
  --accent-bg-hover: #312e81;
  --success: #34d399;
  --success-hover: #10b981;
  --success-bg: #064e3b;
  --success-text: #6ee7b7;
  --success-border: #065f46;
  --warning-bg: #451a03;
  --warning-border: #d97706;
  --warning-text: #fbbf24;
  --warning-text-dark: #fcd34d;
  --danger: #f87171;
  --danger-bg: #450a0a;
  --danger-bg-hover: #7f1d1d;
  --danger-text: #fca5a5;
  --danger-border: #991b1b;
  --match-best: #34d399;
  --match-strong: #818cf8;
  --match-good: #a78bfa;
  --match-fallback: #64748b;
  --match-watch: #fbbf24;
  --input-border: #475569;
  --tag-nodegree-bg: #2e1065;
  --tag-nodegree-text: #c4b5fd;
  --tag-helps-bg: #1e1b4b;
  --tag-helps-text: #a5b4fc;
  --tag-telework-bg: #064e3b;
  --tag-telework-text: #6ee7b7;
  --tag-lake-bg: #422006;
  --tag-lake-text: #fde68a;
  --tip-bg: #1e1b4b;
  --tip-border: #3730a3;
  --tip-strong: #a5b4fc;
  --body-bg-image: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
  --side-bg-left:
    radial-gradient(circle at 90% 15%, rgba(129,140,248,0.12) 0%, transparent 30%),
    radial-gradient(circle at 75% 50%, rgba(167,139,250,0.08) 0%, transparent 25%),
    radial-gradient(circle at 95% 80%, rgba(99,102,241,0.06) 0%, transparent 20%),
    radial-gradient(circle at 60% 35%, rgba(196,181,253,0.04) 0%, transparent 15%);
  --side-bg-right:
    radial-gradient(circle at 10% 25%, rgba(129,140,248,0.10) 0%, transparent 30%),
    radial-gradient(circle at 25% 65%, rgba(167,139,250,0.06) 0%, transparent 25%),
    radial-gradient(circle at 5% 85%, rgba(99,102,241,0.08) 0%, transparent 20%),
    radial-gradient(circle at 40% 45%, rgba(196,181,253,0.04) 0%, transparent 15%);
}

/* ----- Luna's Moonlight (dark) ----- */
html[data-theme="lunas-moonlight"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-alt: #1c2333;
  --border: #30363d;
  --border-light: #1c2333;
  --text: #c9d1d9;
  --text-heading: #e6edf3;
  --text-muted: #8b949e;
  --text-faint: #6e7681;
  --nav-bg: #010409;
  --nav-text: #e6edf3;
  --nav-text-muted: rgba(230,237,243,0.6);
  --nav-text-secondary: rgba(230,237,243,0.8);
  --nav-border: rgba(230,237,243,0.2);
  --accent: #79c0ff;
  --accent-hover: #58a6ff;
  --accent-ring: rgba(121, 192, 255, 0.2);
  --accent-bg: #0d2240;
  --accent-bg-hover: #163356;
  --success: #3fb950;
  --success-hover: #2ea043;
  --success-bg: #0d2818;
  --success-text: #56d364;
  --success-border: #238636;
  --warning-bg: #2d1b00;
  --warning-border: #bb8009;
  --warning-text: #e3b341;
  --warning-text-dark: #d29922;
  --danger: #f85149;
  --danger-bg: #3d0e0e;
  --danger-bg-hover: #5a1a1a;
  --danger-text: #ff7b72;
  --danger-border: #da3633;
  --match-best: #3fb950;
  --match-strong: #79c0ff;
  --match-good: #d2a8ff;
  --match-fallback: #6e7681;
  --match-watch: #e3b341;
  --input-border: #30363d;
  --tag-nodegree-bg: #271046;
  --tag-nodegree-text: #d2a8ff;
  --tag-helps-bg: #0d2240;
  --tag-helps-text: #79c0ff;
  --tag-telework-bg: #0d2818;
  --tag-telework-text: #56d364;
  --tag-lake-bg: #2d1b00;
  --tag-lake-text: #e3b341;
  --tip-bg: #0d2240;
  --tip-border: #1f6feb;
  --tip-strong: #58a6ff;
  --body-bg-image: radial-gradient(ellipse at 50% 0%, rgba(121, 192, 255, 0.03) 0%, transparent 60%);
  --side-bg-left:
    radial-gradient(ellipse at 100% 10%, rgba(121,192,255,0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 50%, rgba(56,211,159,0.06) 0%, transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(121,192,255,0.05) 0%, transparent 25%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 20%, rgba(121,192,255,0.08) 0%, transparent 45%),
    radial-gradient(circle at 20% 60%, rgba(56,211,159,0.05) 0%, transparent 30%),
    radial-gradient(circle at 10% 85%, rgba(121,192,255,0.06) 0%, transparent 25%);
}

/* ----- Squirtle Village (cottagecore/storybook) ----- */
html[data-theme="squirtle-village"] {
  --bg: #faf8f2;
  --surface: #fffef9;
  --surface-alt: #f3edd8;
  --border: #e0d5b8;
  --border-light: #f3edd8;
  --text: #3d3424;
  --text-heading: #5c4a2e;
  --text-muted: #7d6f55;
  --text-faint: #a89d84;
  --nav-bg: #5c6b4a;
  --nav-text: #faf8f2;
  --nav-text-muted: rgba(250,248,242,0.65);
  --nav-text-secondary: rgba(250,248,242,0.85);
  --nav-border: rgba(250,248,242,0.3);
  --accent: #7b8c5e;
  --accent-hover: #66774c;
  --accent-ring: rgba(123, 140, 94, 0.2);
  --accent-bg: #eef2e4;
  --accent-bg-hover: #dde6cd;
  --success: #6a9a5b;
  --success-hover: #558a46;
  --success-bg: #edf5e8;
  --success-text: #3d5e30;
  --success-border: #b6d4a8;
  --warning-bg: #fef6e6;
  --warning-border: #deb866;
  --warning-text: #7a5c1f;
  --warning-text-dark: #5e4518;
  --danger: #c45c4a;
  --danger-bg: #fdf0ee;
  --danger-bg-hover: #fce0dc;
  --danger-text: #8b3a2e;
  --danger-border: #e8b4ac;
  --match-best: #6a9a5b;
  --match-strong: #7b8c5e;
  --match-good: #b07d4f;
  --match-fallback: #a89d84;
  --match-watch: #deb866;
  --input-border: #e0d5b8;
  --tag-nodegree-bg: #f0e8f5;
  --tag-nodegree-text: #6b4e82;
  --tag-helps-bg: #eef2e4;
  --tag-helps-text: #4a6038;
  --tag-telework-bg: #e6f0e4;
  --tag-telework-text: #3d5e30;
  --tag-lake-bg: #fef6e6;
  --tag-lake-text: #7a5c1f;
  --tip-bg: #eef2e4;
  --tip-border: #c4d4a8;
  --tip-strong: #4a6038;
  --body-bg-image: none;
  --side-bg-left:
    radial-gradient(ellipse at 100% 85%, rgba(123,140,94,0.18) 0%, transparent 50%),
    radial-gradient(circle at 85% 40%, rgba(222,184,102,0.12) 0%, transparent 40%),
    linear-gradient(to top, rgba(92,107,74,0.08) 0%, transparent 35%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 75%, rgba(123,140,94,0.16) 0%, transparent 50%),
    radial-gradient(circle at 15% 30%, rgba(222,184,102,0.10) 0%, transparent 40%),
    linear-gradient(to top, rgba(92,107,74,0.08) 0%, transparent 35%);
}

/* ----- Studio Ghibli ----- */
html[data-theme="studio-ghibli"] {
  --bg: #f2f6ee;
  --surface: #fafcf7;
  --surface-alt: #e4edda;
  --border: #c8d8b8;
  --border-light: #e4edda;
  --text: #2c3524;
  --text-heading: #3e5030;
  --text-muted: #5e7050;
  --text-faint: #8a9e7c;
  --nav-bg: #4a6040;
  --nav-text: #f5f8f0;
  --nav-text-muted: rgba(245,248,240,0.65);
  --nav-text-secondary: rgba(245,248,240,0.85);
  --nav-border: rgba(245,248,240,0.3);
  --accent: #5a8a50;
  --accent-hover: #4a7440;
  --accent-ring: rgba(90, 138, 80, 0.2);
  --accent-bg: #e4edda;
  --accent-bg-hover: #d0dfc0;
  --success: #4e8a3e;
  --success-hover: #3e7a30;
  --success-bg: #e8f5e0;
  --success-text: #2e5a22;
  --success-border: #a0d490;
  --warning-bg: #fef8e8;
  --warning-border: #d4aa40;
  --warning-text: #6a5020;
  --warning-text-dark: #504018;
  --danger: #c06040;
  --danger-bg: #fdf2ee;
  --danger-bg-hover: #fce4dc;
  --danger-text: #7a3828;
  --danger-border: #e0b0a0;
  --match-best: #4e8a3e;
  --match-strong: #5a8a50;
  --match-good: #8a7050;
  --match-fallback: #8a9e7c;
  --match-watch: #d4aa40;
  --input-border: #c8d8b8;
  --tag-nodegree-bg: #e8e0f0;
  --tag-nodegree-text: #5a4070;
  --tag-helps-bg: #e4edda;
  --tag-helps-text: #3e5030;
  --tag-telework-bg: #dcecd4;
  --tag-telework-text: #2e5a22;
  --tag-lake-bg: #fef8e8;
  --tag-lake-text: #6a5020;
  --tip-bg: #e4edda;
  --tip-border: #a8c898;
  --tip-strong: #3e5030;
  --body-bg-image: none;
  --side-bg-left:
    radial-gradient(ellipse at 100% 90%, rgba(90,138,80,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(168,200,152,0.12) 0%, transparent 40%),
    radial-gradient(circle at 95% 60%, rgba(212,170,64,0.08) 0%, transparent 30%),
    linear-gradient(to top, rgba(74,96,64,0.10) 0%, transparent 40%);
  --side-bg-right:
    radial-gradient(ellipse at 0% 85%, rgba(90,138,80,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 25%, rgba(168,200,152,0.10) 0%, transparent 40%),
    radial-gradient(circle at 5% 55%, rgba(212,170,64,0.06) 0%, transparent 30%),
    linear-gradient(to top, rgba(74,96,64,0.10) 0%, transparent 40%);
}

/* ===== Theme Background Images ===== */
:root { --theme-bg: none; --glass-bg: transparent; --glass-border: transparent; }
html[data-theme="default"] { --theme-bg: none; --glass-bg: transparent; --glass-border: transparent; }
html[data-theme="squirtle-village"] { --theme-bg: url("/assets/themes/squirtle-village-f15be42e.jpg"); --glass-bg: rgba(255,255,255,0.88); --glass-border: rgba(255,255,255,0.5); }
html[data-theme="dreamlight"] { --theme-bg: url("/assets/themes/dreamlight-623691a7.jpg"); --glass-bg: rgba(245,240,255,0.88); --glass-border: rgba(216,204,240,0.5); }
html[data-theme="enchanted-garden"] { --theme-bg: url("/assets/themes/enchanted-garden-8c25e0a1.jpg"); --glass-bg: rgba(240,250,244,0.88); --glass-border: rgba(187,247,208,0.5); }
html[data-theme="cherry-blossom"] { --theme-bg: url("/assets/themes/cherry-blossom-1f1006e7.jpg"); --glass-bg: rgba(255,245,248,0.88); --glass-border: rgba(251,207,232,0.5); }
html[data-theme="studio-ghibli"] { --theme-bg: url("/assets/themes/studio-ghibli-85f70584.jpg"); --glass-bg: rgba(240,249,245,0.88); --glass-border: rgba(187,247,208,0.5); }
html[data-theme="golden-hour"] { --theme-bg: url("/assets/themes/golden-hour-9e762c29.jpg"); --glass-bg: rgba(255,251,235,0.88); --glass-border: rgba(253,230,138,0.5); }
html[data-theme="ocean-breeze"] { --theme-bg: url("/assets/themes/ocean-breeze-f626365f.jpg"); --glass-bg: rgba(240,249,255,0.88); --glass-border: rgba(186,230,253,0.5); }
html[data-theme="lavender-mist"] { --theme-bg: url("/assets/themes/lavender-mist-975de466.jpg"); --glass-bg: rgba(250,245,255,0.88); --glass-border: rgba(216,180,254,0.5); }
html[data-theme="cozy-hearth"] { --theme-bg: url("/assets/themes/cozy-hearth-2423240b.jpg"); --glass-bg: rgba(255,247,237,0.88); --glass-border: rgba(253,186,116,0.5); }
html[data-theme="starlit-night"] { --theme-bg: url("/assets/themes/starlit-night-ab70f205.jpg"); --glass-bg: rgba(15,23,42,0.90); --glass-border: rgba(51,65,85,0.5); }
html[data-theme="lunas-moonlight"] { --theme-bg: url("/assets/themes/lunas-moonlight-2e7a6ead.jpg"); --glass-bg: rgba(15,15,35,0.90); --glass-border: rgba(49,46,89,0.5); }

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

body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--theme-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}
.side-panel { display: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Nav ===== */
.nav-bar {
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 0 20px;
}
.nav-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}
.nav-brand {
  color: var(--nav-text);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.nav-links a { color: var(--nav-text-secondary); text-decoration: none; }
.nav-links a:hover { color: var(--nav-text); }
.nav-user { color: var(--nav-text-muted); }
.nav-logout {
  background: none;
  border: 1px solid var(--nav-border);
  color: var(--nav-text-secondary);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.nav-logout:hover { border-color: var(--nav-text); color: var(--nav-text); }

/* ===== Theme Picker ===== */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-picker label {
  font-size: 11px;
  color: var(--nav-text-muted);
  white-space: nowrap;
}
.theme-picker select {
  background: transparent;
  border: 1px solid var(--nav-border);
  color: var(--nav-text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  max-width: 140px;
}
.theme-picker select option {
  background: var(--surface);
  color: var(--text);
}

/* ===== Masquerade Banner ===== */
.masquerade-banner {
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
  padding: 6px 20px;
  font-size: 13px;
  color: var(--warning-text);
  text-align: center;
}
.masquerade-back {
  background: none;
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}
.masquerade-back:hover { opacity: 0.8; }

/* ===== Container ===== */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  min-height: calc(100vh - 48px);
}

/* ===== Flash ===== */
.flash {
  padding: 10px 16px;
  border-radius: var(--card-radius);
  margin-bottom: 16px;
  font-size: 13px;
}
.flash-notice { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.flash-alert { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }

/* ===== Progress Bar ===== */
.progress-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 12px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.progress-top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
}
.progress-bar .track {
  flex: 1 1 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: var(--success);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.progress-bar .count { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.progress-msg { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* ===== Milestone Banner ===== */
.milestone-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: milestone-fade-in 0.3s ease;
}
.milestone-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: milestone-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.milestone-pct {
  font-size: 48px;
  font-weight: 800;
  color: var(--success);
  line-height: 1;
  margin-bottom: 12px;
}
.milestone-msg {
  font-size: 18px;
  color: var(--text-heading);
  line-height: 1.5;
  margin-bottom: 20px;
}
.milestone-dismiss {
  background: var(--success);
  color: white;
  border: none;
  border-radius: var(--card-radius);
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.milestone-dismiss:hover { background: var(--success-hover); }
@keyframes milestone-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes milestone-pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ===== Character Icons ===== */
.squirtle-icon {
  display: inline-block;
  width: 24px;
  height: 26px;
  vertical-align: middle;
  margin-left: 2px;
  image-rendering: pixelated;
}
.luna-icon {
  display: inline-block;
  width: 20px;
  height: 26px;
  vertical-align: middle;
  margin-left: 2px;
  image-rendering: pixelated;
}
.milestone-msg .squirtle-icon {
  width: 36px;
  height: 39px;
}
.milestone-msg .luna-icon {
  width: 30px;
  height: 39px;
}

/* ===== Encouragement Toast ===== */
.encouragement-toast {
  position: fixed;
  top: 60px;
  right: 20px;
  background: var(--surface);
  border: 2px solid var(--success-border);
  border-left: 5px solid var(--success);
  border-radius: 10px;
  padding: 20px 48px 20px 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  z-index: 900;
  max-width: 400px;
  animation: toast-slide-in 0.4s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.encouragement-msg {
  font-size: 17px;
  color: var(--success-text);
  font-weight: 600;
  line-height: 1.5;
}
.encouragement-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.encouragement-dismiss:hover { color: var(--text-muted); }
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.toggle-completed {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
}
.toggle-completed:hover { background: var(--border); }

/* ===== Urgent Banner ===== */
.urgent-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--card-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.urgent-banner h3 { margin: 0 0 8px 0; color: var(--warning-text); font-size: 15px; }
.urgent-banner ul { margin: 0; padding-left: 20px; }
.urgent-banner li { margin-bottom: 4px; }
.deadline-link { color: inherit; text-decoration: none; }
.deadline-link:hover { color: var(--warning-text); text-decoration: underline; }

/* ===== Tips ===== */
.tip {
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  border-radius: var(--card-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
}
.tip strong { color: var(--tip-strong); }

/* ===== Section ===== */
.section { margin-bottom: 28px; }
.section h2 {
  font-size: 17px;
  color: var(--text-heading);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.region-icon {
  width: 32px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== Legend ===== */
.legend { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ===== Job Card ===== */
.job {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px;
  margin-bottom: 12px;
  transition: opacity 0.3s ease;
}
.job.completed { opacity: 0.4; }
.job.completed .job-title { text-decoration: line-through; }
.job.skipped { opacity: 0.35; }
.job.skipped .job-title { text-decoration: line-through; color: var(--text-faint); }
.job.skipped .job-employer { color: var(--text-faint); }
body.hide-done .job.completed,
body.hide-done .job.skipped { display: none; }

.job.active-apply {
  box-shadow: 0 0 0 2px var(--accent);
  background: var(--accent-bg);
  animation: highlight-pulse 0.6s ease;
}
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 4px var(--accent-ring); }
  50% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 2px var(--accent); }
}

.job.best-match { border-left: 4px solid var(--match-best); }
.job.strong-match { border-left: 4px solid var(--match-strong); }
.job.good-match { border-left: 4px solid var(--match-good); }
.job.fallback { border-left: 4px solid var(--match-fallback); }
.job.watch-item { border-left: 4px solid var(--match-watch); }

.job-header { display: flex; align-items: flex-start; gap: 10px; }
.job-checkbox-form { display: contents; }
.job-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--success);
}
.job-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 4px 0;
}
.new-badge {
  display: inline-block;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
.job-employer { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; margin-left: 30px; }
.job-details { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 13px; margin-left: 30px; }
.job-details .tag { background: var(--surface-alt); padding: 2px 8px; border-radius: 4px; }
.job-details .salary { background: var(--success-bg); color: var(--success-text); font-weight: 600; }
.job-details .deadline { background: var(--warning-bg); color: var(--warning-text); }
.job-details .deadline-open { background: var(--success-bg); color: var(--success-text); }
.job-details .deadline-unknown { background: var(--surface-alt); color: var(--text-muted); font-style: italic; }
.job-details .deadline-urgent { background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }
.job-details .no-degree { background: var(--tag-nodegree-bg); color: var(--tag-nodegree-text); }
.job-details .helps-tag { background: var(--tag-helps-bg); color: var(--tag-helps-text); font-weight: 600; }
.job-details .telework-tag { background: var(--tag-telework-bg); color: var(--tag-telework-text); }
.job-details .lake-tag { background: var(--tag-lake-bg); color: var(--tag-lake-text); }
.fit-note { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; margin-left: 30px; }
.apply-link {
  display: inline-block;
  background: var(--accent);
  color: white !important;
  text-decoration: none !important;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 30px;
}
.apply-link:hover { background: var(--accent-hover); }
.apply-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; margin-left: 30px; }
.skip-action { margin-left: 30px; margin-top: 6px; }
.skip-link {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.skip-link:hover { color: var(--text-muted); text-decoration: underline; }

/* ===== Watch Note ===== */
.watch-note {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--card-radius);
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--warning-text-dark);
}
.watch-note strong { color: var(--warning-text); }

/* ===== Login ===== */
.login-card {
  max-width: 360px;
  margin: 60px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
}
.login-card h1 {
  font-size: 22px;
  color: var(--text-heading);
  margin-bottom: 24px;
  text-align: center;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.btn-primary {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }

/* ===== Admin ===== */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px;
}
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--text-heading); }
.stat-card .sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.admin-table th {
  background: var(--surface-alt);
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.admin-row-disabled { opacity: 0.4; }
.admin-table tr.admin-row-disabled td:first-child strong { text-decoration: line-through; }

.btn-small {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
}
.btn-edit { background: var(--accent-bg); color: var(--accent); }
.btn-edit:hover { background: var(--accent-bg-hover); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg-hover); }
.btn-add { background: var(--accent); color: white !important; padding: 8px 16px; font-size: 13px; }
.btn-add:hover { background: var(--accent-hover); }
.user-status-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.applied-tag { background: var(--success-bg); color: var(--success-text); }
.skipped-tag { background: var(--danger-bg); color: var(--danger-text); }

/* ===== Admin Form ===== */
.admin-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  max-width: 640px;
}
.admin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.admin-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
  background: var(--surface);
  color: var(--text);
}
.admin-form .checkbox-group {
  display: flex;
  gap: 20px;
  align-items: center;
}
.admin-form .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

/* ===== Search ===== */
.search-bar {
  margin-bottom: 16px;
}
.search-bar input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--card-radius);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}
.search-bar input::placeholder { color: var(--text-faint); }
.section.search-hidden { display: none; }

/* ===== Footer ===== */
.footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}