/* ==========================================================================
   Layout shells + page-specific styles
   ========================================================================== */
   /* set to url("../images/hero.webp") etc. once photography is added */

:root {
    --hero-image: url("../images/hero.png");
    --auth-image: url("../images/auth.png");
}
   .container{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.brand:hover{color:var(--text)}
.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--volt);color:var(--volt-ink);box-shadow:0 0 24px var(--volt-glow)}
.brand__mark svg{width:19px;height:19px}
.brand b{color:var(--volt);font-weight:700}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Toast-style flash (site + admin shells) */
.flash-wrap{position:fixed;z-index:120;top:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%);width:min(560px,100% - 2rem)}
.shell-auth .flash-wrap{position:static;transform:none;width:auto;margin-bottom:1.4rem}
.shell-auth .flash{box-shadow:none}

/* ---------- Site shell ---------- */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.site-nav.is-scrolled,.shell-site:not([data-page=home]) .site-nav{background:rgba(7,8,10,.78);backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav-links a,.nav-links button.nav-link{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:var(--r-pill);color:var(--muted);font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:transparent;border:0;cursor:pointer;font-family:inherit}
.nav-links a:hover,.nav-links button.nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-links a[aria-current=page]{color:var(--volt);background:rgba(198,255,61,.08)}
.nav-links a.btn{margin-left:.4rem;color:var(--b-fg);background:var(--b-bg);border:1px solid var(--b-bd);padding:.5rem 1.1rem}
.nav-links a.btn:hover{background:#d6ff6b;color:var(--b-fg)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;place-items:center}
.page{padding-top:var(--nav-h);min-height:calc(100vh - 160px)}
.shell-site[data-page=home] .page{padding-top:0}
.page-head{padding:clamp(2rem,5vw,3.5rem) 0 1.6rem;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.page-head p{margin:.6rem 0 0;max-width:56ch}
.page-body{padding-bottom:clamp(3rem,7vw,5rem)}
.site-footer{border-top:1px solid var(--line);padding:2.2rem 0;background:rgba(0,0,0,.25)}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer small{color:var(--faint)}

@media (max-width:820px){
  .nav-toggle{display:grid}
  .js .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;padding:.8rem var(--gutter) 1.2rem;background:rgba(7,8,10,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .js .site-nav[data-open=true] .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links{flex-wrap:wrap}
  .nav-links a,.nav-links button.nav-link{padding:.85rem 1rem;font-size:.95rem}
  .nav-links .btn{margin:.4rem 0 0;justify-content:center}
}

/* ---------- Home ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + 2rem) 0 4rem;
  background:
    linear-gradient(180deg,rgba(7,8,10,.15),var(--bg) 96%),
    var(--hero-image) center/cover no-repeat;}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 60% at 72% 42%,rgba(198,255,61,.14),transparent 70%),radial-gradient(40% 40% at 90% 85%,rgba(255,106,26,.16),transparent 70%)}
.hero__grid{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 70% at 70% 45%,#000,transparent 80%)}
.scene{position:absolute;inset:0;z-index:-1}
.scene canvas{width:100%;height:100%}
.scene__fallback{display:none;position:absolute;inset:0;background:
  radial-gradient(circle at 70% 45%,transparent 0 15%,rgba(198,255,61,.5) 15.4% 15.8%,transparent 16.2%),
  radial-gradient(circle at 70% 45%,transparent 0 24%,rgba(255,106,26,.35) 24.3% 24.6%,transparent 25%),
  radial-gradient(circle at 70% 45%,transparent 0 34%,rgba(255,255,255,.12) 34.3% 34.5%,transparent 35%)}
.no-webgl .scene__fallback{display:block}
.hero__copy{max-width:760px}
.hero h1{font-size:clamp(3.4rem,11vw,9rem);line-height:.88;margin:1.1rem 0 1.4rem}
.hero h1 .stroke{-webkit-text-stroke:2px var(--text);color:transparent}
.hero h1 .lime{display:inline-block}
.hero__lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:48ch;color:#c4cbd3}
.hero__cta{margin-top:2rem}
.hero__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--volt),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.section{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.section__head{max-width:640px;margin-bottom:2.6rem}
.section__head h2{margin:.9rem 0 .8rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:step}
.step{counter-increment:step;padding:2rem}
.step::before{content:"0" counter(step);display:block;font-family:var(--font-display);font-size:4.2rem;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(198,255,61,.55);margin-bottom:1rem}
.step h3{margin-bottom:.6rem}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.feature .ico{width:30px;height:30px;color:var(--volt);margin-bottom:1.1rem}
.feature h3{font-size:1.3rem;margin-bottom:.5rem}
.feature p{margin:0;font-size:.93rem}
.band{border-block:1px solid var(--line);background:linear-gradient(100deg,rgba(198,255,61,.09),rgba(255,106,26,.07) 70%,transparent),var(--bg-2)}
.band__inner{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;padding:clamp(2.6rem,6vw,4.2rem) 0}
.band h2{max-width:14ch}
@media (max-width:980px){.steps{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features{grid-template-columns:1fr}.hero h1 .stroke{-webkit-text-stroke-width:1.5px}}

/* ---------- Auth shell ---------- */
.shell-auth body,.shell-auth{background:var(--bg)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}
.auth-visual{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:2.2rem clamp(1.5rem,4vw,3.5rem);border-right:1px solid var(--line);
  background:radial-gradient(70% 55% at 60% 40%,rgba(198,255,61,.14),transparent 70%),radial-gradient(50% 40% at 20% 100%,rgba(255,106,26,.18),transparent 70%),var(--auth-image) center/cover no-repeat,#08090b}
.auth-visual__copy h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.92;margin-bottom:1rem}
.auth-visual__copy p{max-width:36ch;color:#c4cbd3}
.auth-main{display:grid;place-items:center;padding:2.5rem var(--gutter)}
.auth-card{width:min(440px,100%)}
.auth-card h1{font-size:clamp(2.4rem,5vw,3.2rem);margin:.8rem 0 .5rem}
.auth-card>p{margin-bottom:1.8rem}
.auth-card .alt{margin-top:1.5rem;font-size:.92rem;text-align:center}
.auth-card .alt a{font-weight:700}
.auth-mobile-brand{display:none;margin-bottom:2rem}
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-mobile-brand{display:inline-flex}
  .auth-main{align-items:start;padding-top:2rem;background:radial-gradient(80% 40% at 50% 0,rgba(198,255,61,.1),transparent 70%)}
}

/* ---------- Classes (member view) ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;padding:1.1rem;margin-bottom:2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.filter-bar .field{margin:0;flex:1 1 200px;min-width:0}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.3rem}
.class-card{display:flex;flex-direction:column;gap:1.1rem;padding:0;overflow:hidden}
.class-card__top{display:flex;gap:1.1rem;align-items:flex-start;padding:1.5rem 1.5rem 0}
.date-tile{flex:none;width:68px;text-align:center;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg-2);padding:.55rem 0 .6rem}
.date-tile small{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--volt);font-weight:700}
.date-tile strong{display:block;font-family:var(--font-display);font-size:2.2rem;line-height:1}
.date-tile span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.class-card h3{font-size:1.75rem;margin:.1rem 0 .35rem}
.class-card__time{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--muted)}
.class-card__time .ico{width:16px;height:16px;color:var(--volt)}
.class-card__desc{padding:0 1.5rem;margin:0;font-size:.93rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.class-card__cap{padding:0 1.5rem}
.class-card__cap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem;font-size:.85rem}
.class-card__cap-row strong{color:var(--text)}
.class-card__book{margin-top:auto;padding:1.2rem 1.5rem 1.5rem;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
.note-toggle{margin-bottom:.9rem}
.note-toggle summary{cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;gap:.5rem}
.note-toggle summary::-webkit-details-marker{display:none}
.note-toggle summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-2);border-radius:6px;color:var(--volt);line-height:1}
.note-toggle[open] summary::before{content:"–"}
.note-toggle textarea{margin-top:.7rem;min-height:72px}
.full-note{margin:0;text-align:center;font-size:.85rem;color:var(--faint)}

/* ---------- My reservations ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.group-title{display:flex;align-items:center;gap:.9rem;margin:2.2rem 0 1rem;font-size:1.5rem}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.res-list{display:grid;gap:.9rem}
.res-card{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:1.2rem 1.4rem}
.res-card h3{font-size:1.45rem;margin-bottom:.15rem}
.res-card__meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.86rem;color:var(--muted)}
.res-card__note{margin:.5rem 0 0;font-size:.88rem;color:var(--muted);border-left:2px solid var(--line-2);padding-left:.7rem}
.res-card__side{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.res-card.is-past{opacity:.72}
@media (max-width:640px){.res-card{grid-template-columns:auto 1fr}.res-card__side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}

/* ---------- Account ---------- */
.profile{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;padding:clamp(1.5rem,4vw,2.4rem)}
.profile__who{display:flex;align-items:center;gap:1.2rem}
.avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--volt),#7fd400);color:var(--volt-ink);font-family:var(--font-display);font-size:2.2rem;font-weight:700;box-shadow:0 0 36px var(--volt-glow)}
.profile h1{font-size:clamp(2rem,4.5vw,3rem)}
.profile p{margin:.2rem 0 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.1rem;margin-top:1.4rem}
.tile{display:flex;flex-direction:column;gap:.5rem;padding:1.6rem;color:var(--text)}
.tile:hover{color:var(--text)}
.tile .ico{width:28px;height:28px;color:var(--volt)}
.tile h3{font-size:1.5rem}
.tile p{margin:0;font-size:.9rem}
.tile--admin .ico{color:var(--orange)}
.section-label{margin:2.4rem 0 0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--faint)}

/* ---------- Error ---------- */
.error-block{max-width:560px;margin:0 auto;padding:clamp(3rem,10vw,6rem) 0;text-align:center}
.error-block .ico{width:54px;height:54px;color:var(--orange);margin:0 auto 1.2rem}
.error-block h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:1rem}

/* ---------- Admin shell ---------- */
.admin-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.admin-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.6rem;padding:1.5rem 1.1rem;background:linear-gradient(180deg,#0c0e12,#08090b);border-right:1px solid var(--line);z-index:90}
.admin-side .brand{padding:0 .5rem}
.admin-nav{display:flex;flex-direction:column;gap:.25rem;list-style:none;margin:0;padding:0}
.admin-nav__label{padding:0 .8rem;margin:.6rem 0 .4rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:700}
.admin-nav a{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border-radius:var(--r-sm);color:var(--muted);font-weight:600;font-size:.92rem;border:1px solid transparent}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.admin-nav a[aria-current=page]{color:var(--volt);background:rgba(198,255,61,.08);border-color:rgba(198,255,61,.22)}
.admin-side__foot{margin-top:auto;display:grid;gap:.6rem}
.admin-body{min-width:0;display:flex;flex-direction:column}
.admin-top{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--gutter);background:rgba(7,8,10,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.crumbs{min-width:0;display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.crumbs b{color:var(--text);font-weight:600}
.admin-main{padding:clamp(1.4rem,3vw,2.4rem) var(--gutter) 4rem;width:100%;max-width:1320px}
.admin-top .nav-toggle{display:none}
.admin-scrim{display:none}
@media (max-width:980px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .admin-top .nav-toggle{display:none}
  .js .admin-top .nav-toggle{display:grid}
  .js .admin-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100vh;transform:translateX(-102%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;overflow-y:auto}
  .js .admin-shell[data-open=true] .admin-side{transform:none;visibility:visible}
  .js .admin-shell[data-open=true] .admin-scrim{display:block;position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.6)}
}
.admin-title{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.8rem}
.admin-title h1{font-size:clamp(2.2rem,4vw,3.2rem)}
.admin-title p{margin:.4rem 0 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.4rem}
.stat{padding:1.4rem 1.5rem}
.stat__label{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat__label .ico{width:20px;height:20px;color:var(--volt)}
.stat__value{display:block;margin-top:.7rem;font-family:var(--font-display);font-size:clamp(2.8rem,4vw,3.8rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat--warn .stat__label .ico{color:var(--warn)} .stat--ok .stat__label .ico{color:var(--ok)}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.1rem}
.chart-box{position:relative;height:300px}
.legend{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.02)}
.legend li span{display:flex;align-items:center;gap:.7rem;font-size:.9rem}
.legend li i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.legend li strong{font-family:var(--font-display);font-size:1.5rem}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.1rem}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}}
@media (max-width:620px){.stats,.quick{grid-template-columns:1fr}}
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin-bottom:1.3rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.toolbar .field{margin:0;flex:1 1 220px;min-width:0}
.form-card{max-width:720px;padding:clamp(1.4rem,3vw,2.2rem)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.form-grid .span-2{grid-column:1/-1}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.callout{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1.1rem;margin-bottom:1.4rem;border:1px solid rgba(255,176,32,.35);border-radius:var(--r-md);background:rgba(255,176,32,.06);color:#e9d3a0;font-size:.9rem}
.callout .ico{color:var(--warn);margin-top:.15rem}
.callout p{margin:0;color:inherit}
.slot-cap{min-width:120px}
.slot-cap .meter{margin-top:.4rem}

.avatar{text-transform:uppercase}

@media (max-width:520px){.admin-top .badge{display:none}}