:root{
  --bg:#f7faf7; --fg:#0f172a; --muted:#475569; --brand:#10b981; --brand2:#06b6d4; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--fg);}
.container{max-width:1100px;margin:0 auto;padding:0 16px;}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));backdrop-filter:blur(8px);border-bottom:1px solid #e2e8f0;z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.brand{font-weight:800;letter-spacing:.2px}

/* Desktop nav (hidden on small) */
.nav-desktop{display:none;gap:10px;align-items:center}
.nav-desktop a{margin:0 6px;text-decoration:none;color:var(--muted)}
.nav-desktop a.btn{padding:6px 10px;border:1px solid #cbd5e1;border-radius:10px;color:var(--fg)}

/* Mobile toggle (hamburger) */
.mobile-toggle{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;padding:8px;cursor:pointer}
.mobile-toggle span{display:block;width:22px;height:2px;background:#0f172a;border-radius:2px}

/* Mobile drawer */
.nav-mobile{display:flex;flex-direction:column;padding:8px 16px;background:#fff;border-top:1px solid #e2e8f0}
.nav-mobile a{padding:10px 0;text-decoration:none;color:var(--fg);border-bottom:1px solid #f1f5f9}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile a.btn{margin-top:6px;display:inline-block;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px}

/* Hide mobile drawer by default with [hidden] attribute; JS toggles it */
.nav-mobile[hidden]{display:none}

/* Layout utility */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr;}
@media(min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr;}}

.card{background:var(--card);border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.kicker{text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:#64748b}
h1{font-size:30px;margin:8px 0 0 0;line-height:1.2}
h2{font-size:24px;margin:0}
p{line-height:1.6}
@media(min-width:640px){h1{font-size:36px} h2{font-size:28px}}

/* Pills + stats */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{font-size:12px;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.8)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:16px;text-align:center;border-radius:12px;background:white;border:1px solid #e2e8f0}
.stat .v{font-size:26px;font-weight:800}
@media(min-width:640px){.stat .v{font-size:28px}}

/* Sections */
.hero{padding:28px 0;background:radial-gradient(60% 60% at 50% -10%, rgba(16,185,129,.20), transparent 70%), radial-gradient(50% 40% at 100% 0%, rgba(6,182,212,.20), transparent 70%)}
.section{padding:40px 0}
@media(min-width:900px){.section{padding:56px 0}}
.section .title{text-align:center;margin-bottom:16px}

/* Tables & forms */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e2e8f0;padding:8px;text-align:left}
.form input,.form textarea,.form select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;background:white}
.form .row{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:800px){.form .row{grid-template-columns:1fr 1fr}}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer}
.center{text-align:center}
.badge{display:inline-flex;gap:6px;align-items:center;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.media-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.media-grid{grid-template-columns:repeat(4,1fr)}}
.media-grid img,.media-grid video{width:100%;border-radius:12px;border:1px solid #e2e8f0;background:#000}

/* Alerts + admin utilities */
.note{font-size:12px;color:#64748b}
.admin-nav{display:inline-flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.admin-nav a{padding:8px 10px;border:1px solid #cbd5e1;border-radius:10px;text-decoration:none;color:var(--fg);background:white}
.alert{padding:10px;border-radius:10px;margin:10px 0;font-size:14px}
.alert-ok{background:#ecfdf5;border:1px solid #a7f3d0}
.alert-bad{background:#fef2f2;border:1px solid #fecaca}

/* Desktop breakpoint: show desktop nav, hide mobile button */
@media(min-width:900px){
  .nav-desktop{display:flex}
  .mobile-toggle{display:none}
  .nav-mobile{display:none !important}
}