@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,600;6..72,700&family=Manrope:wght@500;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height:8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius:999px; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height:1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; display:block; }
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius:4px; }
.container { max-width: 1200px; margin:0 auto; padding:0 24px; }

/* ===================== Theme palettes ===================== */
/* Default = Ledger */
:root {
  --primary: #0F2A44;
  --primary-dark: #0A1E33;
  --primary-light: #E6EEF6;
  --accent: #0E7A6A;
  --accent-light: #D6F0EB;
  --bg: #F8FAF9;
  --bg-alt: #EEF2F6;
  --surface: #FFFFFF;
  --soft: #E4EAF2;
  --border: #D3DCE8;
  --ink: #0F172A;
  --ink-soft: #475569;
  --ink-faint: #94A3B8;
  --on-primary: #FFFFFF;
  --on-accent: #FFFFFF;
  --font-head: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --hero-gradient: linear-gradient(135deg, #0F2A44 0%, #1E3A5F 45%, #0E7A6A 130%);
  --hero-overlay: linear-gradient(180deg, rgba(15,42,68,0.06) 0%, rgba(15,42,68,0.52) 100%);
  --hero-text: #F8FAF9;
  --shadow-sm: 0 1px 3px rgba(15,42,68,0.08);
  --shadow-md: 0 6px 20px rgba(15,42,68,0.10);
  --shadow-lg: 0 16px 40px rgba(15,42,68,0.14);
}
html[data-theme="clarity"] {
  --primary: #7A5A3A;
  --primary-dark: #5E452D;
  --primary-light: #FAEFE6;
  --accent: #D98E5A;
  --accent-light: #FBE9D8;
  --bg: #FDFCF8;
  --bg-alt: #F7F0E8;
  --surface: #FFFFFF;
  --soft: #F0E6D8;
  --border: #E2D5C0;
  --ink: #2D1E14;
  --ink-soft: #6B5A4A;
  --ink-faint: #9A8A7A;
  --on-primary: #FFFFFF;
  --on-accent: #2D1A0E;
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --hero-gradient: linear-gradient(135deg, #2D1E14 0%, #7A5A3A 50%, #D98E5A 120%);
  --hero-overlay: linear-gradient(180deg, rgba(45,30,20,0.08) 0%, rgba(45,30,20,0.46) 100%);
  --hero-text: #FDFCF8;
  --shadow-sm: 0 1px 4px rgba(45,30,20,0.06);
  --shadow-md: 0 6px 20px rgba(45,30,20,0.09);
  --shadow-lg: 0 16px 40px rgba(45,30,20,0.13);
}
html[data-theme="noir"] {
  --primary: #EAB308;
  --primary-dark: #CA8A04;
  --primary-light: #FEF9C3;
  --accent: #EAB308;
  --accent-light: #FEF9C3;
  --bg: #0B0F1A;
  --bg-alt: #111827;
  --surface: #1F2937;
  --soft: #283548;
  --border: #334155;
  --ink: #F1F5F9;
  --ink-soft: #94A3B8;
  --ink-faint: #64748B;
  --on-primary: #0B0F1A;
  --on-accent: #0B0F1A;
  --font-head: 'Manrope', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --hero-gradient: linear-gradient(135deg, #020617 0%, #0B0F1A 45%, #1F3A4A 85%, #EAB308 135%);
  --hero-overlay: linear-gradient(180deg, rgba(2,6,23,0.20) 0%, rgba(11,15,26,0.62) 100%);
  --hero-text: #F8FAF9;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.24);
  --shadow-md: 0 6px 22px rgba(0,0,0,0.32);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.42);
}
/* Noir-specific overrides */
html[data-theme="noir"] .card { border-color: #334155; }
html[data-theme="noir"] .site-header { background: color-mix(in srgb, #0B0F1A 88%, transparent); }

/* — Top announcement — */
.announce-bar { background: var(--accent); color: var(--on-accent); font-size:0.84rem; font-weight:700; text-align:center; padding:8px 16px; letter-spacing:0.01em; }
.announce-bar a { color: var(--on-accent); text-decoration: underline; }

/* — Header — */
.site-header { position: sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:1200px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; color: var(--ink); }
.brand:hover { text-decoration:none; }
.brand-logo { height:42px; width:auto; border-radius: var(--radius); object-fit: contain; background: var(--surface); border:1px solid var(--border); padding:4px; }
.brand-name { font-family: var(--font-head); font-size:1.45rem; font-weight:800; letter-spacing:-0.02em; }
.brand-sub { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; margin-top:-2px; }
.nav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.nav-link { color: var(--ink-soft); font-weight:600; font-size:0.88rem; padding:8px 14px; border-radius: var(--radius-pill); transition: color .15s, background .15s; }
.nav-link:hover { text-decoration:none; background: var(--soft); color: var(--primary); }
.nav-link.active { color: var(--primary); background: var(--soft); }
.nav-cta { background: var(--primary); color: var(--on-primary) !important; border-radius: var(--radius-pill); padding:10px 22px; font-weight:800; letter-spacing:0.01em; box-shadow: var(--shadow-sm); transition: background .15s, transform .15s; }
.nav-cta:hover { background: var(--primary-dark); transform: translateY(-1px); text-decoration:none; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:10px 8px; border-radius:10px; }
.nav-toggle:hover { background: var(--soft); }
.nav-toggle span { display:block; width:24px; height:2.5px; border-radius:999px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle span+span { margin-top:5px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* — Hero — */
.hero { position:relative; padding: 88px 24px 86px; overflow:hidden; background: var(--hero-gradient); background-size: cover; background-position: center; }
.hero::before { content:""; position:absolute; inset:0; background: var(--hero-overlay); }
.hero::after { content:""; position:absolute; inset:0; opacity:0.06; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 26px 26px; }
.hero-content { position:relative; z-index:2; max-width: 860px; margin:0 auto; text-align:center; color: var(--hero-text); }
.hero .eyebrow { display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); color: var(--hero-text); font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; padding:6px 14px; border-radius: 999px; margin-bottom:18px; }
.hero h1 { font-family: var(--font-head); font-size: clamp(2.6rem, 6vw, 4.1rem); line-height:1.02; margin-bottom:14px; font-weight:800; letter-spacing:-0.03em; }
.hero h1 em { font-style: italic; font-weight:400; color: color-mix(in srgb, var(--hero-text) 92%, var(--accent)); }
.hero .tagline { font-family: var(--font-body); font-size:1.06rem; font-weight:700; opacity:0.96; margin-bottom:10px; letter-spacing:0.015em; }
.hero .desc { font-size:1.02rem; opacity:0.84; margin-bottom:26px; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.65; }
.hero-cta { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hero-cta a { padding:14px 28px; border-radius: var(--radius-pill); font-weight:800; font-size:0.95rem; transition: transform .15s, filter .15s, background .15s; }
.hero-cta a:hover { text-decoration:none; transform: translateY(-2px); }
.hero-cta .primary { background: var(--accent); color: var(--on-accent) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
.hero-cta .primary:hover { filter: brightness(1.06); }
.hero-cta .ghost { border:1.5px solid rgba(255,255,255,0.72); color:#fff !important; backdrop-filter: blur(4px); }
.hero-cta .ghost:hover { background: rgba(255,255,255,0.12); }

.stats-bar { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; max-width:860px; margin:32px auto 0; }
.stat-mini { background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding:16px; text-align:center; color: var(--hero-text); }
.stat-mini strong { display:block; font-size:1.7rem; font-weight:800; line-height:1; }
.stat-mini span { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; opacity:0.88; }

.notice-bar { background: var(--primary); color: var(--on-primary); overflow:hidden; border-bottom:1px solid color-mix(in srgb, var(--primary) 85%, black); }
.notice-bar-inner { display:flex; align-items:center; max-width:1200px; margin:0 auto; padding:0 24px; }
.notice-label { flex-shrink:0; font-weight:800; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.11em; padding:9px 14px 9px 0; border-right:1px solid rgba(255,255,255,0.22); margin-right:14px; }
.notice-track { overflow:hidden; flex:1; position:relative; }
.notice-items { display:flex; gap:28px; white-space:nowrap; animation: marquee 28s linear infinite; }
.notice-items a { color: var(--on-primary); font-size:0.85rem; font-weight:700; }
.notice-items a:hover { text-decoration: underline; }
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

.feature-strip { background: var(--bg-alt); border-bottom:1px solid var(--border); }
.feature-strip .container { display:flex; flex-wrap:wrap; gap:20px 28px; justify-content:center; padding:26px 24px; }
.feature-item { display:flex; align-items:center; gap:10px; color: var(--ink-soft); }
.feature-item svg { width:22px; height:22px; color: var(--primary); flex-shrink:0; }
.feature-item span { font-size:0.86rem; font-weight:700; letter-spacing:0.02em; }

.section { padding: 74px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { text-align:center; max-width:720px; margin:0 auto 42px; }
.section-head .eyebrow { display:inline-block; font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.14em; color: var(--primary); margin-bottom:10px; }
.section-head h2 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.65rem); margin-bottom:12px; font-weight:800; letter-spacing:-0.025em; line-height:1.08; }
.section-head p { color: var(--ink-soft); font-size:1.02rem; line-height:1.6; }

.card-grid { display:grid; gap:22px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; transition: box-shadow .22s, transform .22s, border-color .22s; position:relative; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 26%, var(--border)); }
.card img { width:100%; height:220px; object-fit: cover; }
.card-body { padding:20px; }
.card-body h3 { font-family: var(--font-head); font-size:1.22rem; margin-bottom:6px; font-weight:700; letter-spacing:-0.015em; line-height:1.25; }
.card-body p { font-size:0.90rem; color: var(--ink-soft); line-height:1.6; }
.card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag { display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; padding:5px 10px; border-radius: var(--radius-pill); background: var(--soft); color: var(--primary); font-weight:800; text-transform:uppercase; letter-spacing:0.06em; }
.tag.solid { background: var(--primary); color: var(--on-primary); }
.tag.featured { background: var(--accent); color: var(--on-accent); }
.price { font-family: var(--font-body); font-size:1.45rem; font-weight:800; color: var(--primary); }

.class-card { text-align:center; padding:10px; }
.class-icon { width:64px; height:64px; margin:8px auto 14px; border-radius:18px; background: var(--primary-light); color: var(--primary); display:flex; align-items:center; justify-content:center; transition: background .2s, color .2s, transform .2s; border:1px solid color-mix(in srgb, var(--primary) 10%, transparent); }
.class-icon svg { width:30px; height:30px; }
.class-card:hover .class-icon { background: var(--primary); color: var(--on-primary); transform: translateY(-2px) scale(1.02); }
.class-card .meta-line { font-size:0.78rem; color: var(--ink-faint); font-weight:700; margin-top:8px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.instructor-card img { height: 260px; object-fit: cover; }
.instructor-card .label { display:inline-block; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color: var(--primary); margin-bottom:6px; }

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.filter-bar a { padding:8px 16px; border-radius:999px; border:1px solid var(--border); background: var(--surface); font-weight:700; font-size:0.86rem; color: var(--ink-soft); transition: all .15s; }
.filter-bar a:hover { text-decoration:none; border-color: var(--primary); color: var(--primary); }
.filter-bar a.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }

.cta-band { background: var(--hero-gradient); padding:68px 24px; text-align:center; color: var(--hero-text); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: var(--hero-overlay); }
.cta-band::after { content:""; position:absolute; inset:0; opacity:0.05; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size:24px 24px; }
.cta-band .container { position:relative; z-index:1; }
.cta-band h2 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom:12px; font-weight:800; letter-spacing:-0.02em; }
.cta-band p { opacity:0.92; margin-bottom:24px; font-size:1.05rem; max-width:640px; margin-left:auto; margin-right:auto; }
.cta-band a { display:inline-block; background: var(--accent); color: var(--on-accent) !important; padding:14px 32px; border-radius: var(--radius-pill); font-weight:800; transition: transform .15s, filter .15s; }
.cta-band a:hover { text-decoration:none; transform: translateY(-2px); filter: brightness(1.05); }

.testimonial { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:24px; position:relative; overflow:hidden; }
.testimonial::before { content:"“"; position:absolute; top:-6px; right:14px; font-family: var(--font-head); font-size:70px; line-height:1; color: var(--primary-light); font-weight:700; }
.testimonial .stars { color:#eab308; margin-bottom:10px; font-size:0.95rem; letter-spacing:1px; }
.testimonial .text { font-style: italic; margin-bottom:14px; color: var(--ink); line-height:1.6; font-size:0.95rem; position:relative; z-index:1; }
.testimonial .author { font-weight:700; font-size:0.90rem; }
.testimonial .loc { font-size:0.8rem; color: var(--ink-faint); }

.faq-list { max-width:760px; margin:0 auto; }
.faq-list details { border:1px solid var(--border); border-radius: var(--radius); margin-bottom:10px; overflow:hidden; background: var(--surface); }
.faq-list summary { padding:16px 18px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; font-size:1.4rem; color: var(--primary); transition: transform .2s; flex-shrink:0; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { padding:0 18px 16px; color: var(--ink-soft); font-size:0.94rem; line-height:1.6; }
.rich p { margin-bottom:12px; }
.rich h2 { font-family: var(--font-head); font-size:1.45rem; margin:22px 0 10px; font-weight:700; }
.rich h3 { font-family: var(--font-head); font-size:1.2rem; margin:16px 0 8px; font-weight:700; }
.rich ul, .rich ol { margin:0 0 12px 20px; }
.rich li { margin-bottom:4px; }
.rich blockquote { border-left:3px solid var(--accent); padding:10px 16px; margin:14px 0; background: var(--soft); border-radius:0 var(--radius) var(--radius) 0; font-style:italic; }

.page-hero { background: var(--hero-gradient); padding:64px 24px 56px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: var(--hero-overlay); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.85rem); color: var(--hero-text); margin-bottom:8px; font-weight:800; letter-spacing:-0.02em; }
.page-hero p { color: color-mix(in srgb, var(--hero-text) 84%, transparent); max-width:640px; margin:0 auto; }
.breadcrumbs { display:flex; gap:8px; justify-content:center; font-size:0.84rem; margin-top:14px; flex-wrap:wrap; }
.breadcrumbs a { color: color-mix(in srgb, var(--hero-text) 78%, transparent); }
.breadcrumbs a:hover { color: var(--hero-text); }
.breadcrumbs span { color: color-mix(in srgb, var(--hero-text) 60%, transparent); }

.form-wrap { max-width:640px; margin:0 auto; }
.form-grid { display:grid; gap:16px; }
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
label { display:block; font-weight:700; font-size:0.82rem; margin-bottom:6px; letter-spacing:0.02em; }
input, textarea, select { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size:0.94rem; background: var(--surface); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
textarea { resize:vertical; min-height:100px; }
.btn { display:inline-block; background: var(--primary); color: var(--on-primary) !important; padding:13px 28px; border-radius: var(--radius-pill); font-weight:800; border:none; cursor:pointer; font-size:0.94rem; transition: background .15s, transform .15s; text-align:center; }
.btn:hover { background: var(--primary-dark); text-decoration:none; transform: translateY(-1px); }
.btn-outline { background: transparent; border:1.5px solid var(--border); color: var(--ink) !important; }
.btn-outline:hover { background: var(--soft); transform:none; }
.icon-lg { width:28px; height:28px; }
.success-box { background: color-mix(in srgb, #16a34a 10%, var(--bg)); border:1px solid #16a34a; border-radius: var(--radius); padding:24px; text-align:center; }
.success-box h3 { color:#16a34a; margin-bottom:8px; font-family: var(--font-head); }
.success-box p { color: var(--ink-soft); }
.consent-box { border:1px solid var(--border); border-radius: var(--radius); background: var(--soft); padding:16px; }
.consent-box label { font-size:0.88rem; font-weight:500; line-height:1.6; color: var(--ink-soft); margin:0; display:flex; gap:10px; align-items:flex-start; }
.consent-box input[type="checkbox"] { width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color: var(--primary); }

.pager { display:flex; gap:6px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.pager a, .pager span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--border); border-radius:999px; font-weight:700; font-size:0.88rem; background: var(--surface); }
.pager a:hover { background: var(--soft); text-decoration:none; }
.pager .current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.site-footer { background: #111614; color: rgba(255,255,255,0.82); padding:44px 0 0; }
.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color:#fff; }
.footer-inner { display:grid; grid-template-columns:1.9fr 1fr 1fr 1.5fr; gap:28px; padding:0 24px 36px; max-width:1200px; margin:0 auto; }
.footer-col h3 { font-family: var(--font-head); color:#fff; font-size:1rem; margin-bottom:12px; font-weight:700; }
.footer-col p { font-size:0.88rem; margin-bottom:8px; opacity:0.9; }
.footer-links { display:flex; flex-direction:column; gap:6px; }
.footer-links a { font-size:0.88rem; }
.all-link { font-weight:700; color: var(--accent) !important; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:14px 24px; text-align:center; font-size:0.8rem; max-width:1200px; margin:0 auto; opacity:0.7; }
.powered-by a{color:inherit;text-decoration:none}
.powered-by a:hover{text-decoration:underline}
.social-links { display:flex; gap:8px; margin-top:10px; }
.social-link { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,0.09); transition: background .15s; }
.social-link:hover { background: rgba(255,255,255,0.16); text-decoration:none; }
.social-link svg { width:17px; height:17px; fill: currentColor; }

.wa-float { position:fixed; bottom:20px; right:20px; width:52px; height:52px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.2); z-index:100; }
.wa-float:hover { background:#1ebe5b; text-decoration:none; }
.wa-float svg { width:26px; height:26px; }

/* ===================== Theme switcher ===================== */
.theme-btn {
  position: fixed; bottom: 88px; right: 20px; z-index: 110;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background .15s, transform .15s;
}
.theme-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
.theme-btn svg { width: 24px; height: 24px; }
.theme-panel {
  position: fixed; bottom: 152px; right: 20px; z-index: 120;
  width: 280px; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 16px;
  display: none; text-align: left;
}
.theme-panel.open { display: block; }
.theme-panel h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 4px; }
.theme-panel .theme-sub { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 12px; }
.theme-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--soft); border: 2px solid transparent; border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  font-family: var(--font-body); color: var(--ink); transition: border-color .15s, background .15s;
}
.theme-card:hover { background: color-mix(in srgb, var(--soft) 60%, var(--primary-light)); }
.theme-card.active { border-color: var(--primary); background: var(--primary-light); }
.theme-swatches { display: flex; gap: 4px; flex-shrink: 0; }
.theme-swatches .sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); }
.theme-card .t-name { font-weight: 700; font-size: 0.9rem; }
.theme-card .t-desc { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.35; }
.theme-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.72rem; color: var(--ink-faint); line-height: 1.4; }

/* ===================== Detail layout ===================== */
.detail-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; }
.team-grid { display:grid; grid-template-columns:320px 1fr; gap:28px; }

@media (max-width: 900px) {
  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { display:none; position:absolute; top:100%; left:0; right:0; background: var(--bg); border-bottom:1px solid var(--border); flex-direction:column; padding:10px; gap:0; box-shadow: var(--shadow-md); }
  .nav.open { display:flex; }
  .nav-link { width:100%; border-radius:10px; }
  .nav-toggle { display:block; }
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .form-grid.cols-2 { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .theme-panel { right: 16px; bottom: 148px; }
  .theme-btn { right: 16px; bottom: 84px; }
}