/* ---- source: main.css ---- */
/* ============================================================
   TREASURE ACADEMY, AGEVA — Professional design system
   Clean, modern, responsive • Butter + Green brand
   ============================================================ */
:root{
  /* Core palette: 60% neutral, 30% brand green, 10% gold. */
  --green:#0E5A2E;--green-bright:#0B7A37;--green-deep:#0E3B21;
  --gold:#C9A227;--gold-soft:#F8F4E4;--paper:#FFFFFF;--cream:#F6F1E3;
  --ink:#203040;--muted:#5C6B7A;--line:#E5DCC2;--danger:#B31E35;
  --d-bg:#101B28;--d-surface:#1C2A24;--d-text:#EAF0F6;--d-muted:#9AA7B8;--d-line:#2A3A4E;
  /* Seven named steps cover the eight practical roles from labels to display. */
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.0625rem;--fs-md:1.25rem;
  --fs-lg:1.5rem;--fs-xl:clamp(1.75rem,3vw,2.25rem);--fs-2xl:clamp(2.25rem,4vw,3rem);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --sh-1:0 1px 3px rgba(20,40,25,.08);--sh-2:0 4px 14px rgba(20,40,25,.10);--sh-3:0 12px 32px rgba(20,40,25,.14);
  --z-nav:40;--z-dropdown:45;--z-chat:50;--z-modal:60;--z-toast:70;
  --t-fast:150ms ease;
  --font-head:"Clash Display",sans-serif;--font-body:"General Sans",sans-serif;
  /* Compatibility aliases keep established components functional while
     resolving them to the same restrained visual system. */
  --white:var(--paper);--green-2:var(--green-deep);--mint:var(--green);--mint-soft:var(--gold-soft);
  --sun:var(--gold);--sun-soft:var(--gold-soft);--sky:var(--green);--sky-soft:var(--gold-soft);
  --coral:var(--danger);--coral-soft:var(--gold-soft);--grape:var(--green);--grape-soft:var(--gold-soft);
  --orange:var(--gold);--orange-soft:var(--gold-soft);--sh:var(--sh-2);--sh-sm:var(--sh-1);--sh-lg:var(--sh-3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden}
/* real fixed page-background photo */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--paper)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:none;background-size:24px 24px;-webkit-mask-image:none;mask-image:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;letter-spacing:-.3px}
.container{width:min(1180px,92%);margin:0 auto}
section{padding:64px 0}
::selection{background:var(--sun)}

/* ---------- Buttons / chips / cards ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-head);font-weight:700;
  padding:13px 26px;border-radius:var(--r-md);border:1px solid transparent;
  box-shadow:var(--sh-2);cursor:pointer;font-size:var(--fs-sm);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-sun{background:var(--sun);color:#203040} .btn-coral{background:var(--coral);color:#FFFFFF}
.btn-sky{background:var(--sky);color:#FFFFFF} .btn-mint{background:var(--mint);color:#FFFFFF}
.btn-grape{background:var(--grape);color:#FFFFFF} .btn-white{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-sm{padding:9px 18px;font-size:var(--fs-sm)}
.btn-block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:var(--fs-xs);
  padding:6px 14px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);font-weight:700;color:var(--muted)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:26px}
.sec-head{text-align:center;max-width:660px;margin:0 auto 40px}
.sec-tag{display:inline-block;font-family:var(--font-head);background:var(--mint-soft);color:var(--mint);
  border-radius:var(--r-pill);padding:6px 18px;font-size:var(--fs-xs);margin-bottom:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.sec-head h2{font-size:var(--fs-2xl);margin-bottom:10px}
.sec-head h2 .hl{color:var(--mint)}
.sec-head p{color:var(--muted);font-weight:500}

/* ---------- Topbar / Nav (side-by-side, no dropdown) ---------- */
.topbar{background:#0E3B21;color:#FFFFFF;font-size:var(--fs-xs);font-weight:600}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;gap:10px;flex-wrap:wrap}
.topbar a:hover{color:var(--sun)}
.topbar .portal-link{background:var(--sun);color:#203040;padding:3px 14px;border-radius:var(--r-pill);font-family:var(--font-head);font-size:var(--fs-xs)}
.navbar{position:sticky;top:0;z-index:var(--z-dropdown);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
.navbar .container{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);line-height:1.15}
.logo .mark{width:46px;height:46px;flex:0 0 46px}
.logo small{font-family:var(--font-body);font-weight:600}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{font-weight:600;padding:9px 13px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink)}
.nav-links a:hover{background:#EAF0F6;color:var(--mint)}
.nav-links .btn{margin-left:6px}
.nav-cta-row{display:flex;gap:10px;align-items:center}

/* ---------- Hero ---------- */
.hero{position:relative;padding:60px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 18px;font-family:var(--font-head);font-size:var(--fs-xs);box-shadow:var(--sh-1);margin-bottom:18px;font-weight:700}
.hero-badge .dot{width:10px;height:10px;border-radius:var(--r-pill);background:var(--mint);animation:none}
@keyframes blink{50%{opacity:.35}}
.hero h1{font-size:var(--fs-2xl);margin-bottom:16px}
.hero h1 .w-sun{color:#C9A227}
.hero h1 .w-coral{color:var(--coral)} .hero h1 .w-sky{color:var(--sky)}
.hero p.lead{font-size:var(--fs-base);color:var(--muted);margin-bottom:26px;max-width:520px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-mini{display:flex;gap:26px;flex-wrap:wrap}
.hero-mini div strong{font-family:var(--font-head);font-size:var(--fs-md);display:block}
.hero-mini div span{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.hero-art{position:relative}
.blob-frame{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);border:1px solid var(--line)}
.blob-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.float-badge{position:absolute;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:9px 15px;font-family:var(--font-head);font-size:var(--fs-xs);display:flex;gap:8px;align-items:center;animation:none;font-weight:700}
.float-badge.b1{top:5%;left:-14px} .float-badge.b2{bottom:12%;right:-10px;animation-delay:1.2s} .float-badge.b3{bottom:-6px;left:10%;animation-delay:2s}

.cloud{position:absolute;background:rgba(255,255,255,.7);border-radius:var(--r-pill);filter:blur(2px)}
.cloud.c1{width:110px;height:30px;top:8%;right:6%} .cloud.c2{width:70px;height:22px;top:22%;left:2%}

/* ---------- Stats band ---------- */
.stats-band{background:var(--green-deep);color:#FFFFFF;padding:36px 0}
.stats-band .container{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat b{font-family:var(--font-head);font-size:var(--fs-xl);display:block;color:var(--sun)}
.stat span{font-weight:600;font-size:var(--fs-sm);opacity:.92}

/* ---------- Programs ---------- */
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prog{border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--sh-1);padding:30px 26px;position:relative;overflow:hidden;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);background:var(--paper)}
.prog:hover{transform:translateY(-6px);box-shadow:var(--sh-1)}
.prog::before{content:"";position:absolute;top:0;left:0;right:0;height:5px}
.prog.p1::before{background:var(--sun)} .prog.p2::before{background:var(--coral)} .prog.p3::before{background:var(--mint)}
.prog .emoji{font-size:var(--fs-2xl);display:block;margin-bottom:8px}
.prog h3{font-size:var(--fs-md);margin-bottom:4px}
.prog .ages{display:inline-block;font-size:var(--fs-xs);font-weight:700;background:var(--cream);border-radius:var(--r-pill);padding:3px 12px;margin-bottom:12px;color:var(--muted)}
.prog ul{list-style:none;margin:12px 0 20px;font-size:var(--fs-sm);color:#2A3A4E}
.prog ul li{padding:6px 0 6px 26px;position:relative}
.prog ul li::before{content:"✓";position:absolute;left:4px;color:var(--mint);font-weight:800}

/* ---------- Features / Why us ---------- */
#why{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:var(--cream);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.feat:hover{transform:translateY(-4px)}
.feat .ic{width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);margin-bottom:14px}
.feat h3{font-size:var(--fs-base);margin-bottom:6px} .feat p{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about-img{position:relative}
.about-img img{border-radius:var(--r-md);box-shadow:var(--sh-1)}
.about-img .sticker{position:absolute;bottom:-16px;right:10px;background:var(--sun);color:#203040;border-radius:var(--r-md);
  box-shadow:var(--sh-1);padding:10px 18px;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:700}
.check-list{list-style:none;margin:20px 0 26px;font-weight:600}
.check-list li{padding:8px 0 8px 34px;position:relative}
.check-list li::before{content:"✓";position:absolute;left:0;top:7px;width:24px;height:24px;background:var(--mint-soft);color:var(--mint);
  border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:800}
.quote-card{background:var(--paper);border-left:4px solid var(--sun);border-radius:var(--r-sm);padding:18px 22px;margin-top:22px;box-shadow:var(--sh-1)}
.quote-card b{display:block;margin-top:8px;font-family:var(--font-head)}

/* ---------- Gallery ---------- */
#gallery{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);background:var(--paper);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.gal:hover{transform:translateY(-4px)}
.gal img{height:170px;width:100%;object-fit:cover}
.gal .cap{padding:10px 14px;font-family:var(--font-head);font-size:var(--fs-sm);text-align:center;font-weight:700}
.gal.art{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:226px;font-size:var(--fs-2xl);gap:6px}
.gal.art span{font-size:var(--fs-xs);font-family:var(--font-head)}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.news-card:hover{transform:translateY(-4px)}
.news-card .date{background:#0E3B21;color:#FFFFFF;font-family:var(--font-head);font-size:var(--fs-xs);padding:9px 18px;font-weight:700}
.news-card .body{padding:20px}
.news-card h3{font-size:var(--fs-base);margin-bottom:8px} .news-card p{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Testimonials ---------- */
#testimonials{background:var(--paper)}
.testi-wrap{max-width:720px;margin:0 auto;text-align:center;position:relative}
.testi-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:36px;min-height:200px}
.testi-card .stars{color:var(--orange);font-size:var(--fs-md);letter-spacing:3px;margin-bottom:10px}
.testi-card p{font-size:var(--fs-base)}
.testi-card b{display:block;margin-top:14px;font-family:var(--font-head)}
.testi-dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.testi-dots button{width:12px;height:12px;border-radius:var(--r-pill);border:none;background:#E5DCC2;cursor:pointer;padding:0}
.testi-dots button.on{background:var(--mint);transform:scale(1.25)}

/* ---------- Admissions ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:22px;text-align:center}
.step .num{width:42px;height:42px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:var(--fs-base);margin:0 auto 12px;font-weight:800}
.step h3{font-size:var(--fs-sm);margin-bottom:6px} .step p{font-size:var(--fs-sm);color:var(--muted)}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:34px;max-width:780px;margin:0 auto}
.form-card h3{font-size:var(--fs-md);margin-bottom:4px} .form-card>p{color:var(--muted);margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:var(--fs-sm)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:var(--fs-sm);padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);outline:none;width:100%;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--paper);border-color:var(--mint);box-shadow:var(--sh-1)}

/* ---------- Contact / footer ---------- */
#contact{background:#0E3B21;color:#FFFFFF}
#contact .sec-head p{color:#E5DCC2}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.contact-info{display:flex;flex-direction:column;gap:14px}
.c-item{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:16px 18px}
.c-item .ic{font-size:var(--fs-lg)}
.c-item b{font-family:var(--font-head);display:block}
.contact-form{background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:28px}
footer.site-footer{background:#101B28}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:#203040;color:#FFFFFF;
  font-weight:600;padding:14px 26px;border-radius:var(--r-md);box-shadow:var(--sh-1);
  z-index:var(--z-modal);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);font-size:var(--fs-sm);max-width:90%;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================
   PORTAL (dashboards)
   ============================================================ */
.portal-body{background:var(--cream)}
.portal-body::before,.portal-body::after{display:none}
.portal-layout{display:flex;min-height:100vh}
.sidebar{width:258px;flex:0 0 258px;background:var(--green-deep);color:#FFFFFF;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo{display:flex;gap:10px;align-items:center;padding:20px;font-family:var(--font-head);font-size:var(--fs-sm);border-bottom:1px solid rgba(255,255,255,.12);font-weight:800}
.side-logo .mark{width:38px;height:38px;flex:0 0 38px}
.side-user{margin:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:12px 14px;display:flex;gap:11px;align-items:center}
.avatar{width:42px;height:42px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);
  font-size:var(--fs-sm);flex:0 0 42px;color:#203040;font-weight:800}
.side-user b{display:block;font-size:var(--fs-sm);line-height:1.25} .side-user span{font-size:var(--fs-xs);opacity:.75}
.side-nav{flex:1;overflow-y:auto;padding:6px 14px;display:flex;flex-direction:column;gap:4px}
.side-nav button{display:flex;gap:11px;align-items:center;width:100%;background:transparent;border:none;color:#E5DCC2;
  font-family:var(--font-head);font-size:var(--fs-sm);font-weight:600;padding:11px 13px;border-radius:var(--r-md);cursor:pointer;text-align:left;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.side-nav button:hover{background:rgba(255,255,255,.09);color:#FFFFFF} .side-nav button.on{background:var(--sun);color:#203040}
.side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:9px}
.main{flex:1;min-width:0;padding:26px clamp(16px,3vw,34px) 60px}
.p-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.p-topbar h1{font-size:var(--fs-xl)} .p-topbar p{color:var(--muted)}
.pill-date{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 18px;font-weight:600;font-size:var(--fs-sm);box-shadow:var(--sh-1)}
.p-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.p-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.p-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:18px;display:flex;gap:14px;align-items:center}
.p-stat .ic{width:50px;height:50px;flex:0 0 50px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg)}
.p-stat b{font-family:var(--font-head);font-size:var(--fs-lg);display:block;line-height:1}
.p-stat span{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:24px;margin-bottom:20px}
.panel h2{font-size:var(--fs-md);margin-bottom:4px} .panel .sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:16px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.toolbar input,.toolbar select{font-family:var(--font-body);font-size:var(--fs-sm);padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);outline:none;color:var(--ink)}
.toolbar .spacer{flex:1}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{background:#0E3B21;color:#FFFFFF;font-family:var(--font-head);font-weight:700;text-align:left;padding:12px;font-size:var(--fs-xs);white-space:nowrap}
.tbl th:first-child{border-radius:var(--r-md)} .tbl th:last-child{border-radius:var(--r-sm)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--cream)}
.tbl .row-actions{display:flex;gap:7px;flex-wrap:wrap}
.icon-btn{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:6px 11px;cursor:pointer;font-size:var(--fs-xs);font-weight:600;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.icon-btn:hover{border-color:var(--mint);color:var(--mint)}
.icon-btn.del{background:var(--coral-soft);border-color:#E5DCC2;color:#B31E35} .icon-btn.ok{background:var(--mint-soft);border-color:#E5DCC2;color:#0E5A2E}
.badge{display:inline-block;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
.b-green{background:var(--mint-soft);color:#0E5A2E} .b-sun{background:var(--sun-soft);color:#C9A227} .b-sky{background:var(--sky-soft);color:#5C6B7A}
.b-coral{background:var(--coral-soft);color:#B31E35} .b-grape{background:var(--grape-soft);color:#5C6B7A} .b-grey{background:var(--cream);color:var(--muted)}
.duty-banner{border:1px solid var(--line);border-left:5px solid var(--sun);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:18px 22px;margin-bottom:22px;
  display:flex;gap:16px;align-items:center;background:var(--paper)}
.duty-banner.onduty{border-left-color:var(--mint);background:var(--paper);animation:none}
.duty-banner .big{font-size:var(--fs-xl)}

.notice{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;margin-bottom:10px;font-size:var(--fs-sm)}
.notice .dot{width:10px;height:10px;border-radius:var(--r-pill);background:var(--coral);flex:0 0 10px;margin-top:6px}
.notice.read{opacity:.65} .notice.read .dot{background:var(--mint)}
.score-input{width:70px;padding:8px 6px;text-align:center;font-weight:700;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-family:var(--font-body);color:var(--ink)}
.att-btns{display:flex;gap:6px;flex-wrap:wrap}
.att-btns button{border:1px solid var(--line);border-radius:var(--r-md);padding:7px 13px;font-weight:700;cursor:pointer;background:var(--paper);font-size:var(--fs-xs)}
.att-btns button.p.on{background:var(--mint);color:#FFFFFF;border-color:var(--mint)} .att-btns button.a.on{background:var(--coral);color:#FFFFFF;border-color:var(--coral)} .att-btns button.l.on{background:var(--sun);border-color:var(--sun);color:#203040}
.modal-bg{position:fixed;inset:0;background:rgba(20,30,45,.55);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.modal-bg.show{display:flex}
.modal{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:30px;width:min(560px,100%);max-height:90vh;overflow-y:auto}
.modal h2{margin-bottom:14px}
.report-head{text-align:center;border-bottom:2px dashed var(--line);padding-bottom:16px;margin-bottom:18px}
.report-head h2{font-size:var(--fs-lg)} .report-head p{color:var(--muted);font-size:var(--fs-sm)}
.bar-row{display:grid;grid-template-columns:110px 1fr 46px;gap:10px;align-items:center;margin-bottom:9px;font-weight:700;font-size:var(--fs-xs)}
.bar{height:16px;border-radius:var(--r-pill);background:var(--cream);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px;position:relative;overflow:hidden}
.login-card{width:min(480px,100%);background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:36px;position:relative;z-index:var(--z-nav);border:1px solid var(--line)}
.login-card .logo{justify-content:center;margin-bottom:6px}
.login-card h1{font-size:var(--fs-lg);text-align:center} .login-card>p{text-align:center;color:var(--muted);margin-bottom:20px}
.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.role-tabs button{border:1px solid var(--line);border-radius:var(--r-md);background:var(--cream);padding:11px 6px;font-family:var(--font-head);
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink)}
.role-tabs button .e{font-size:var(--fs-md)}
.role-tabs button.on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.demo-box{background:var(--cream);border:1px dashed var(--line);border-radius:var(--r-md);padding:13px 16px;margin-top:18px;font-size:var(--fs-xs)}
.demo-box b{font-family:var(--font-head)}
.demo-box button{margin:4px 6px 0 0}
.demo-box code{background:var(--paper);padding:1px 8px;border-radius:var(--r-sm);border:1px solid var(--line)}
.empty{text-align:center;padding:34px 10px;color:var(--muted)}
.view-section{display:none} .view-section.on{display:block;animation:none}


/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr} .hero-art{max-width:560px;margin:0 auto;width:100%}
  .float-badge.b1{left:6px} .float-badge.b2{right:6px}
  .prog-grid,.feat-grid,.news-grid{grid-template-columns:1fr 1fr}
  .p-grid4{grid-template-columns:1fr 1fr} .p-grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr} .gal-grid{grid-template-columns:1fr 1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:var(--z-chat);transform:translateX(-105%);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
  body.side-open .sidebar{transform:none}
  .side-toggle{display:inline-flex !important}
}
@media(max-width:680px){
  section{padding:44px 0}
  .topbar{font-size:var(--fs-xs)}
  .logo{font-size:var(--fs-sm)} .logo .mark{width:38px;height:38px;flex-basis:38px}
  .navbar .container{gap:8px}
  .nav-links{margin-left:0;width:100%;order:3;justify-content:center;background:var(--cream);border-radius:var(--r-md);padding:6px}
  .nav-links a{font-size:var(--fs-xs);padding:7px 10px}
  .nav-links .btn{padding:7px 14px;font-size:var(--fs-xs)}
  .nav-cta-row{margin-left:auto}
  .prog-grid,.feat-grid,.news-grid,.form-grid,.contact-grid,.about-grid{grid-template-columns:1fr}
  .stats-band .container{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr} .gal-grid{grid-template-columns:1fr 1fr}
  .p-grid4{grid-template-columns:1fr}
  .main{padding:18px 14px 50px}
  .side-toggle{display:inline-flex !important}
  .modal{padding:22px}
  table.tbl{display:block;overflow-x:auto}
  .hero{padding:36px 0 50px}
  .float-badge{font-size:var(--fs-xs);padding:7px 11px}
}
.side-toggle{display:none;background:var(--sun);color:#203040}
.menu-veil{position:fixed;inset:0;background:rgba(20,30,45,.45);z-index:var(--z-dropdown);display:none}
body.side-open .menu-veil{display:block}
@media print{
  .sidebar,.p-topbar .actions,.no-print,.menu-veil,#toast,.chat-fab,.chat-panel,.clock-widget{display:none !important}
  .main{padding:0} .panel{box-shadow:none}
  body{background:var(--paper)} body::before,body::after{display:none}
}

/* ---- modern SVG icon system ---- */
.ic{display:flex;align-items:center;justify-content:center}
.ic svg{display:block}
.side-nav button{display:flex;align-items:center;gap:10px;text-align:left}
.side-nav button svg{flex:0 0 auto;opacity:.92}
.side-nav button .badge{margin-left:auto}
.btn svg{vertical-align:-3px}
.side-toggle svg{display:block}
.badge svg{vertical-align:-2px}
.big{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.big svg{display:block}
.icon-btn svg{display:inline-block;vertical-align:-2px}
.row-actions .icon-btn{padding:6px 8px}
/* ---- pupil management cards ---- */
.pupil-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:6px}
.p-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.p-card:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.p-card-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.p-card-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-bottom:6px}
.p-card-meta span{display:inline-flex;align-items:center;gap:4px}
.att-bar{height:7px;border-radius:var(--r-pill);background:var(--cream);margin:10px 0 8px;overflow:hidden}
.att-bar i{display:block;height:100%;border-radius:var(--r-pill)}
.p-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* ---- aurora blurred-lights background (portals) ---- */
body.portal-body{background:#EAF0F6}
.portal-layout{position:relative;z-index:var(--z-nav)}
body.portal-body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--paper);
  filter:blur(50px)}

/* hide floating widgets on login page + whenever a popup/lightbox is open */
body:has(.auth-wrap) #chatFab,body:has(.auth-wrap) #clockWidget,
body:has(.modal-bg.show) #chatFab,body:has(.modal-bg.show) #clockWidget,
body:has(#lightbox) #chatFab,body:has(#lightbox) #clockWidget,body:has(#lightbox) #contactFabs{display:none!important}
/* theme transition */
body{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}

/* ---- source: extra.css ---- */
/* ============================================================
   TREASURE ACADEMY — professional extras: dark mode, footer,
   chatbot, clock, sliders, auth, galleries, animations
   ============================================================ */

/* ---------- DARK / NIGHT MODE ---------- */
[data-theme="dark"]{
  --cream:#101B28; --white:#101B28; --ink:#EAF0F6; --muted:#9AA7B8;
  --line:#2A3A4E;
  --sun-soft:#1C2A24; --coral-soft:#1C2A24; --sky-soft:#203040;
  --mint-soft:#0E3B21; --grape-soft:#203040; --orange-soft:#1C2A24;
  --sh:0 14px 34px rgba(0,0,0,.4); --sh-sm:0 4px 14px rgba(0,0,0,.35); --sh-lg:0 24px 60px rgba(0,0,0,.5);
}
[data-theme="dark"] body::after{background:var(--paper)}
[data-theme="dark"] .navbar{background:rgba(24,36,52,.96)}
[data-theme="dark"] .nav-links a{color:var(--ink)}
[data-theme="dark"] .nav-links a:hover{background:#2A3A4E;color:var(--sun)}
[data-theme="dark"] #why,[data-theme="dark"] #gallery{background:var(--white)}
[data-theme="dark"] .feat{background:#203040}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,
[data-theme="dark"] .toolbar input,[data-theme="dark"] .toolbar select,[data-theme="dark"] .score-input{background:#101B28;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .tbl td{border-color:#2A3A4E}
[data-theme="dark"] .tbl tr:hover td{background:#203040}
[data-theme="dark"] .tbl th{background:#101B28}
[data-theme="dark"] .prog ul,[data-theme="dark"] .prog ul li{color:#E5DCC2}
[data-theme="dark"] .prog .ages{background:#2A3A4E;color:#E5DCC2}
[data-theme="dark"] .hero-badge,[data-theme="dark"] .float-badge{background:rgba(24,36,52,.96)}
[data-theme="dark"] .chip{background:#203040;color:#E5DCC2}
[data-theme="dark"] .demo-box{background:#203040;border-color:#2A3A4E}
[data-theme="dark"] .demo-box code{background:#101B28}
[data-theme="dark"] .icon-btn{background:#203040;color:var(--ink)}
[data-theme="dark"] .role-tabs button{background:#203040;color:var(--ink)}
[data-theme="dark"] .role-tabs button.on{background:var(--sun);color:#203040;border-color:var(--sun)}
[data-theme="dark"] .bar{background:#2A3A4E}
[data-theme="dark"] .att-btns button{background:#203040;color:var(--ink)}
[data-theme="dark"] .page-hero{background:var(--d-surface)}
[data-theme="dark"] .btn-white{background:#203040;color:var(--ink)}
[data-theme="dark"] .pill-btn{background:#203040;color:var(--ink)}
[data-theme="dark"] #testimonials{background:var(--d-surface)}
[data-theme="dark"] .testi-dots button{background:#2A3A4E}
[data-theme="dark"] .portal-body{background:#101B28}
[data-theme="dark"] .notice{background:#203040}
[data-theme="dark"] .duty-banner{background:#101B28}
[data-theme="dark"] .duty-banner.onduty{background:var(--d-surface)}
[data-theme="dark"] .contact-form{background:#101B28;color:var(--ink)}
[data-theme="dark"] .modal{background:#101B28;color:var(--ink)}

/* theme toggle */
.theme-btn{width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--cream);
  font-size:var(--fs-base);cursor:pointer;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);flex:0 0 42px;display:flex;align-items:center;justify-content:center}
.theme-btn:hover{transform:rotate(25deg)}
[data-theme="dark"] .theme-btn{background:#2A3A4E}

/* ---------- Page hero ---------- */
.page-hero{padding:56px 0 42px;text-align:center;background:var(--paper);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:var(--fs-2xl);margin:10px 0 8px}
.page-hero p{color:var(--muted);max-width:620px;margin:0 auto}

/* ---------- Sliders ---------- */
.slider{position:relative;overflow:hidden;border-radius:var(--r-md);touch-action:pan-y;cursor:grab}
.slider-track{display:flex;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.slider.static .slider-track{transform:none !important}
.slide{min-width:100%;padding:4px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-nav);width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);font-size:var(--fs-md);cursor:pointer;box-shadow:var(--sh-1);color:var(--ink)}
.slider-arrow:hover{background:var(--ink);color:#FFFFFF}
.slider-arrow.prev{left:10px}.slider-arrow.next{right:10px}
.slider.static .slider-arrow,.slider.static .slider-dots{display:none}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.slider-dots button{width:11px;height:11px;border-radius:var(--r-pill);border:none;background:#E5DCC2;cursor:pointer;padding:0}
.slider-dots button.on{background:var(--mint);transform:scale(1.3)}
.promo-card{border-radius:var(--r-md);box-shadow:var(--sh-1);padding:40px;color:var(--ink);position:relative;overflow:hidden;border:1px solid var(--line)}
.promo-card h3{font-size:var(--fs-xl);margin:10px 0}
.promo-card p{max-width:640px;margin-bottom:20px;color:#2A3A4E}
[data-theme="dark"] .promo-card p{color:#E5DCC2}
.promo-card .big-emoji{position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:var(--fs-2xl);opacity:.85;pointer-events:none}
.promo-sun{background:var(--paper)}
.promo-sky{background:var(--paper)}
.promo-mint{background:var(--paper)}
.promo-coral{background:var(--paper)}
.promo-grape{background:var(--paper)}
.ne-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.ne-card:hover{transform:translateY(-4px)}
.ne-card .thumb{height:170px;object-fit:cover;width:100%;background:#EAF0F6}
.ne-card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ne-card h3{font-size:var(--fs-base)}
.ne-card p{font-size:var(--fs-sm);color:var(--muted);flex:1}
.ne-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.ne-wide{flex-direction:row !important;cursor:pointer;max-width:860px;margin:0 auto}
.ne-wide .thumb{width:300px;min-height:230px;height:auto}
.ne-wide .body{justify-content:center;padding:26px !important}
.ne-wide h3{font-size:var(--fs-md)}
@media(max-width:680px){.ne-wide{flex-direction:column !important}.ne-wide .thumb{width:100%;height:180px;min-height:0}}
/* Owner review (25 Sept 2026): the homepage news cards are the classic
   linked story cards - image, badge, meta, title, blurb - side by side in
   a responsive grid, and promotions return to their coloured cards. */
.ne-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.ne-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ne-grid{grid-template-columns:1fr}}
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.promo-grid .promo-card{padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.promo-grid .promo-card h3{font-size:var(--fs-md);margin:6px 0}
.promo-grid .promo-card p{font-size:var(--fs-sm);margin:0 0 12px}
.promo-grid .promo-card .btn{align-self:flex-start}
@media(max-width:900px){.promo-grid{grid-template-columns:1fr}}

/* ---------- Reveal animation ---------- */
.clip,.clip-up{opacity:0;transform:translateY(28px);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.clip.revealed,.clip-up.revealed{opacity:1;transform:none}

/* ---------- Filters ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.pill-btn{font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--ink)}
.pill-btn.on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.filter-bar select{font-family:var(--font-body);padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink)}

/* ---------- YouTube-style video rail (real site uploads) ---------- */
.yt-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,320px);gap:18px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory}
.yt-card{scroll-snap-align:start;cursor:pointer}
.yt-thumb{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.yt-thumb img,.yt-thumb video{width:100%;height:160px;object-fit:cover;display:block;background:#101B28}
.yt-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yt-thumb .play span{width:56px;height:56px;border-radius:var(--r-pill);background:rgba(229,72,93,.95);color:#FFFFFF;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center;padding-left:4px}
.yt-thumb .dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);color:#FFFFFF;font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:var(--r-sm)}
.yt-meta{display:flex;gap:10px;margin-top:10px}
.yt-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);background:var(--mint-soft)}
.yt-meta b{font-size:var(--fs-sm);display:block;line-height:1.35}
.yt-meta small{color:var(--muted)}

/* ---------- Masonry gallery ---------- */
.masonry{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,290px);gap:18px;overflow-x:auto;padding:6px 4px 16px;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:thin}
.masonry .m-item{scroll-snap-align:start;break-inside:avoid;margin-bottom:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;background:var(--paper);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);position:relative;border:1px solid var(--line)}
.masonry .m-item:hover{transform:scale(1.02)}
.masonry img{width:100%;height:170px;object-fit:cover;display:block}
.masonry .m-cap{padding:10px 14px;font-size:var(--fs-xs);font-weight:600}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 14px}
.rail-head h2{margin:0;scroll-margin-top:90px}
.rail-btns{display:flex;gap:8px}
.rail-btns button{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card,#FFFFFF);color:var(--ink);font-size:var(--fs-md);line-height:1;cursor:pointer;box-shadow:var(--sh-1);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.rail-btns button:hover{transform:scale(1.08)}
.swipe-hint{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin:-4px 0 6px}
.m-dl{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:var(--r-md);border:none;background:rgba(16,59,38,.85);color:#FFFFFF;font-size:var(--fs-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-dl:hover{background:var(--mint)}

/* ---------- News list + pagination ---------- */
.ne-list{display:flex;flex-direction:column;gap:12px}
.ne-row{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:13px;cursor:pointer;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);align-items:center}
.ne-row:hover{transform:translateX(5px)}
.ne-row img{width:110px;height:84px;flex:0 0 110px;object-fit:cover;border-radius:var(--r-md)}
.ne-row .txt{flex:1;min-width:0}
.ne-row h3{font-size:var(--fs-sm);margin-bottom:2px}
.ne-row p{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.pager-btn{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-1);cursor:pointer;font-size:var(--fs-sm);color:var(--ink)}
.pager-btn:hover{border-color:var(--mint);color:var(--mint)}
.pager-btn .arrow{font-size:var(--fs-md);display:inline-block}
.pager-btn.next .arrow{animation:none}
.pager-btn.prev .arrow{animation:none}


.pager-info{font-size:var(--fs-sm);color:var(--muted);font-weight:600}

/* ---------- Story page ---------- */
.story-hero{border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;margin-bottom:24px}
.story-hero img{width:100%;max-height:420px;object-fit:cover;display:block}
.story-body{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:30px}
.story-body p{white-space:pre-line}
.story-body p{margin-bottom:14px;white-space:pre-line}
.video-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--r-md);overflow:hidden;margin-bottom:20px;background:#101B28}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Footer (professional) ---------- */
.site-footer{background:#101B28;color:#9AA7B8;padding:46px 0 0;font-size:var(--fs-sm)}
.foot-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px}
.foot-brand .logo{color:#FFFFFF;margin-bottom:12px}
.foot-brand p{font-size:var(--fs-sm)}
.foot-col h4{color:#FFFFFF;font-size:var(--fs-sm);margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;font-size:var(--fs-sm)}
.foot-col a:hover{color:var(--sun)}
.foot-quick-row{display:flex;gap:8px;flex-wrap:wrap}
.foot-quick-row a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:7px 15px !important;font-size:var(--fs-xs);font-weight:600}
.foot-quick-row a:hover{background:var(--sun);color:#203040 !important;border-color:var(--sun)}
.foot-contact p{padding:4px 0;font-size:var(--fs-sm)}
/* 3D layered social buttons */
.social-3d{display:flex;gap:12px;flex-wrap:wrap}
.social-3d a{width:44px;height:44px;border-radius:var(--r-md);background:#0E3B21;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);
  transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--sh-1)}
.social-3d a:hover{transform:translate(-2px,-4px);background:var(--sun);
  box-shadow:var(--sh-2)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0}
.foot-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-xs)}
@media(max-width:860px){.foot-main{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-main{grid-template-columns:1fr}}

/* ---------- Chatbot (professional) ---------- */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:var(--z-chat);width:58px;height:58px;border-radius:var(--r-pill);border:none;
  background:var(--green-deep);font-size:var(--fs-lg);cursor:grab;box-shadow:var(--sh-3);display:flex;align-items:center;justify-content:center;user-select:none;touch-action:none;color:#FFFFFF}
.chat-fab:active{cursor:grabbing}
.chat-fab .ping{position:absolute;top:0;right:0;width:16px;height:16px;border-radius:var(--r-pill);background:var(--coral);border:2.5px solid #FFFFFF;animation:blink 1.3s infinite}
.chat-panel{position:fixed;right:22px;bottom:92px;z-index:var(--z-modal);width:min(360px,calc(100vw - 32px));height:min(520px,68vh);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);display:none;flex-direction:column;overflow:hidden}
.chat-panel.open{display:flex;animation:none}
.chat-head{background:var(--green-deep);color:#FFFFFF;padding:14px 16px;display:flex;gap:11px;align-items:center}
.chat-head .bot{width:40px;height:40px;border-radius:var(--r-pill);background:var(--sun);display:flex;align-items:center;justify-content:center;font-size:var(--fs-md)}
.chat-head b{font-family:var(--font-head);display:block;font-size:var(--fs-sm)}
.chat-head small{opacity:.85;font-size:var(--fs-xs)}
.chat-head .x{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#FFFFFF;border-radius:var(--r-sm);width:30px;height:30px;cursor:pointer;font-weight:700}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.chat-msg{max-width:86%;padding:10px 14px;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5;animation:none}
.chat-msg.bot{background:var(--paper);border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start;box-shadow:var(--sh-1)}
.chat-msg.me{background:var(--mint);color:#FFFFFF;border-top-right-radius:4px;align-self:flex-end}
.typing-dots{display:inline-flex;gap:5px;padding:4px 2px}
.typing-dots i{width:8px;height:8px;border-radius:var(--r-pill);background:#9AA7B8;animation:tbounce 1.1s infinite}
.typing-dots i:nth-child(2){animation-delay:.18s}.typing-dots i:nth-child(3){animation-delay:.36s}
@keyframes tbounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-6px);opacity:1}}
.chat-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 14px 10px;background:var(--cream)}
.chat-chips button{font-size:var(--fs-xs);font-weight:600;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);padding:5px 12px;cursor:pointer;color:var(--ink)}
.chat-chips button:hover{border-color:var(--mint);color:var(--mint)}
.chat-input{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:var(--paper)}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;font-family:var(--font-body);font-size:var(--fs-sm);outline:none;min-width:0;color:var(--ink)}
.chat-input input:focus{border-color:var(--mint)}
.chat-input button{border:none;border-radius:var(--r-md);background:var(--mint);color:#FFFFFF;padding:0 16px;font-size:var(--fs-base);cursor:pointer}
[data-theme="dark"] .chat-panel{background:#101B28}
[data-theme="dark"] .chat-msgs,[data-theme="dark"] .chat-chips{background:#101B28}
[data-theme="dark"] .chat-msg.bot{background:#2A3A4E;border-color:#2A3A4E;color:var(--ink)}
[data-theme="dark"] .chat-input{background:#101B28}
[data-theme="dark"] .chat-input input{background:#101B28;border-color:#2A3A4E;color:var(--ink)}

/* ---------- Analog clock widget ---------- */
.clock-widget{position:fixed;left:22px;bottom:22px;z-index:var(--z-chat);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:14px;width:188px;text-align:center;cursor:grab;user-select:none;touch-action:none}
.clock-widget canvas{display:block;margin:0 auto}
.clock-time{font-family:var(--font-head);font-size:var(--fs-md);margin-top:4px;font-weight:800}
.clock-status{margin-top:8px;font-size:var(--fs-xs);font-weight:600;background:var(--cream);border-radius:var(--r-md);padding:7px 9px;line-height:1.35}
.clock-widget.min .clock-body{display:none}
.clock-toggle{position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:var(--r-pill);border:none;background:var(--coral);color:#FFFFFF;cursor:pointer;font-weight:800;box-shadow:var(--sh-1)}
[data-theme="dark"] .clock-widget{background:#101B28}
[data-theme="dark"] .clock-status{background:#101B28;color:var(--ink)}
@media(max-width:680px){.clock-widget{width:152px;padding:10px}.clock-status{font-size:var(--fs-xs)}}

/* ---------- Auth: glass, flip, typing labels, glow, shake ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 18px 60px;position:relative;
  background:var(--green-deep)}
.auth-layout{display:flex;gap:26px;align-items:flex-start;z-index:var(--z-nav);width:min(880px,100%);justify-content:center}
.flip-scene{width:min(520px,100%);perspective:1600px;flex:0 1 520px}
.flip-inner{position:relative;width:100%;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);transform-style:preserve-3d}
.flip-scene.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{position:absolute;inset:0;transform:rotateY(180deg)}
.glass{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:32px 30px}
[data-theme="dark"] .glass{background:rgba(24,36,52,.94)}
.auth-side{width:300px;flex:0 0 300px;display:flex;flex-direction:column;gap:16px}
.side-card{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px}
[data-theme="dark"] .side-card{background:rgba(24,36,52,.94)}
.side-card h3{font-size:var(--fs-sm);margin-bottom:6px}
.side-card p{font-size:var(--fs-xs);color:var(--muted);margin-bottom:10px}
.side-card .gen-out{background:#101B28;color:var(--sun);font-family:var(--font-body);font-size:var(--fs-sm);border-radius:var(--r-md);padding:10px 12px;margin-top:10px;word-break:break-all;display:none}
@media(max-width:920px){.auth-layout{flex-direction:column;align-items:center}.auth-side{width:min(520px,100%);flex:none}}
.auth-logo{text-align:center;margin-bottom:8px}
.auth-logo .mark{width:66px;height:66px}
.auth-logo h1{font-size:var(--fs-lg);margin-top:6px}
.auth-logo p{color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.glow-focus{animation:none}

.shake{animation:none}

.float-field{position:relative;margin-bottom:16px}
.float-field input,.float-field select{width:100%;font-family:var(--font-body);font-size:var(--fs-sm);padding:22px 15px 8px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);outline:none;color:var(--ink)}
[data-theme="dark"] .float-field input,[data-theme="dark"] .float-field select{background:#101B28;border-color:#2A3A4E}
.float-field label{position:absolute;left:15px;top:15px;color:var(--muted);font-size:var(--fs-sm);pointer-events:none;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap;overflow:hidden;max-width:calc(100% - 50px);text-overflow:ellipsis}
.float-field label .caret{display:inline-block;width:2px;height:1em;background:var(--mint);vertical-align:-2px;animation:none;margin-left:1px}
.float-field input:focus+label,.float-field input:not(:placeholder-shown)+label,
.float-field select:focus+label,.float-field select.filled+label{top:6px;font-size:var(--fs-xs);color:var(--mint);font-weight:700;letter-spacing:.4px}
.float-field input:focus{border-color:var(--mint);box-shadow:var(--sh-1);background:var(--paper)}
[data-theme="dark"] .float-field input:focus{background:#101B28}
.float-field .eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:var(--fs-base);cursor:pointer}
.remember-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);font-weight:600;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.remember-row label{display:flex;gap:8px;align-items:center;cursor:pointer}
.remember-row input{width:17px;height:17px;accent-color:var(--mint)}
.link-btn{background:none;border:none;color:var(--sky);font-weight:600;cursor:pointer;font-size:var(--fs-xs);font-family:var(--font-body)}
.link-btn:hover{text-decoration:underline}
.treasure-box{border:1px dashed #9AA7B8;border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px;background:var(--cream);
  display:flex;gap:11px;align-items:center;font-weight:600;font-size:var(--fs-sm);cursor:pointer}
[data-theme="dark"] .treasure-box{background:#101B28}
.treasure-box.passed{border-style:solid;background:var(--mint-soft);cursor:default;border-color:#0B7A37}
.treasure-box .box{width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.staff-toggle{display:flex;background:var(--cream);border-radius:var(--r-pill);padding:4px;margin-bottom:18px}
[data-theme="dark"] .staff-toggle{background:#101B28}
.staff-toggle button{flex:1;border:none;background:transparent;font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);padding:9px;border-radius:var(--r-pill);cursor:pointer;color:var(--muted)}
.staff-toggle button.on{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
[data-theme="dark"] .staff-toggle button.on{background:#2A3A4E;color:#FFFFFF}

/* OTP + loading */
.otp-row{display:flex;gap:10px;justify-content:center;margin:16px 0}
.otp-row input{width:50px;height:58px;text-align:center;font-family:var(--font-head);font-size:var(--fs-lg);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);outline:none;color:var(--ink)}
.otp-row input:focus{border-color:var(--mint);box-shadow:var(--sh-1)}
[data-theme="dark"] .otp-row input{background:#101B28}
.loading-bar{height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--cream);margin-top:14px}
.loading-bar i{display:block;height:100%;width:0;background:var(--green-deep);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}

/* wizard */
.wizard-steps{display:flex;gap:6px;margin-bottom:8px}
.wizard-steps .ws{flex:1;text-align:center;font-family:var(--font-head);font-weight:700;font-size:var(--fs-xs);padding:8px 4px;border-radius:var(--r-md);background:var(--cream);color:var(--muted)}
.wizard-steps .ws.on{background:var(--sun);color:#203040}
.wizard-steps .ws.done{background:var(--mint-soft);color:var(--mint)}
.wizard-progress{height:10px;border-radius:var(--r-pill);background:var(--cream);overflow:hidden;margin-bottom:18px}
.wizard-progress i{display:block;height:100%;width:0;background:var(--green-deep);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.wizard-nav{display:flex;gap:10px;margin-top:16px}
.pay-card{border:1px solid var(--line);border-radius:var(--r-md);padding:15px;margin-bottom:11px;cursor:pointer;background:var(--white);display:flex;gap:12px;align-items:flex-start}
.pay-card.sel{background:var(--sun-soft);border-color:var(--sun)}
.pay-card .radio{width:20px;height:20px;border:2px solid var(--line);border-radius:var(--r-pill);flex:0 0 20px;margin-top:2px}
.pay-card.sel .radio{border-color:var(--mint);background:var(--mint);box-shadow:var(--sh-1)}
.pay-card small{color:var(--muted)}

/* discount banner + countdown */
.discount-banner{background:var(--green-deep);color:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:24px 26px;margin-bottom:28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.discount-banner .off{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:800;color:var(--sun);line-height:1}
.discount-banner b{font-family:var(--font-head)}
.discount-banner p{font-size:var(--fs-sm);opacity:.9}
.countdown{display:flex;gap:8px;margin-left:auto}
.countdown div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);min-width:62px;text-align:center;padding:8px 6px}
.countdown b{font-family:var(--font-head);font-size:var(--fs-md);display:block;color:var(--sun)}
.countdown span{font-size:var(--fs-xs);opacity:.85;font-weight:600}
.discount-banner.light{background:var(--paper);color:var(--ink);border:1px solid var(--sun)}
.discount-banner.light .off{color:#C9A227}
.discount-banner.light .countdown div{background:var(--paper);border-color:var(--line)}
.discount-banner.light .countdown b{color:var(--mint)}
.discount-banner.light p{opacity:1;color:var(--muted)}

/* ---------- Contact page ---------- */
.wa-card{display:flex;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:15px 17px;margin-bottom:13px}
.wa-logo{width:50px;height:50px;flex:0 0 50px;border-radius:var(--r-pill);background:#0B7A37;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);position:relative;color:#FFFFFF}
.status-dot{position:absolute;bottom:0;right:0;width:16px;height:16px;border-radius:var(--r-pill);border:3px solid #FFFFFF}
.status-dot.on{background:#0B7A37;animation:none}
.status-dot.off{background:#9AA7B8}

.wa-card b{font-family:var(--font-head);display:block;font-size:var(--fs-sm)}
.wa-card small{color:var(--muted)}
.wa-card .btn{margin-left:auto}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;background:none;border:none;font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);padding:15px 18px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;color:var(--ink)}
.faq-q .plus{font-size:var(--fs-base);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);flex:0 0 26px;width:26px;height:26px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;background:var(--cream);color:var(--ink)}
.faq-item.open .faq-q .plus{transform:rotate(45deg);background:var(--mint);color:#FFFFFF}
.faq-a{max-height:0;overflow:hidden;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.faq-a div{padding:0 18px 16px;font-size:var(--fs-sm);color:var(--muted)}

/* ---------- About page ---------- */
.timeline{position:relative;margin:30px 0;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:var(--r-sm);background:var(--sun)}
.tl-item{position:relative;margin-bottom:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:17px 20px}
.tl-item::before{content:"";position:absolute;left:-28px;top:22px;width:12px;height:12px;border-radius:var(--r-pill);background:var(--mint);box-shadow:var(--sh-1)}
.tl-item b.yr{font-family:var(--font-head);color:var(--mint)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
@media(max-width:680px){.mv-grid{grid-template-columns:1fr}}
.mv-card{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:26px;background:var(--paper)}
.mv-card h3{margin-bottom:8px}
.mv-card p{color:var(--muted);font-size:var(--fs-sm)}

/* small screens */
@media(max-width:680px){
  .slider-arrow{display:none}
  .promo-card{padding:28px 22px}
  .promo-card .big-emoji{display:none}
  .discount-banner{padding:20px}
  .countdown{margin-left:0;width:100%;justify-content:center}
  .countdown div{flex:1}
  .glass{padding:26px 20px}
  .chat-panel{height:min(500px,66vh)}
}

/* Founder card (about) */
.founder-card{display:flex;align-items:center;gap:14px;max-width:560px;margin:26px auto 0;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--sun);border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-1)}
.f-avatar{width:52px;height:52px;border-radius:var(--r-pill);background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);flex:none}
/* Bank line (join section) */
.bank-line{font-size:var(--fs-xs);color:var(--green);font-weight:600;margin-top:6px}
/* Dark-mode gradient background */
html[data-theme="dark"] body::before{background:var(--paper)}
html[data-theme="dark"] body::after{background-image:none}
html[data-theme="dark"] .founder-card{background:#101B28}

/* Explore bar (secondary links) */
.explore-bar{background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.explore-bar .container{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.explore-bar a{font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:6px 13px;border-radius:var(--r-pill)}
.explore-bar a:hover{background:var(--sun-soft);color:var(--ink)}
.explore-bar a.on{background:var(--green);color:#FFFFFF}
/* Split + gallery grids */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g-grid img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--sh-1);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.g-grid img:hover{transform:scale(1.03)}
@media(max-width:820px){.g-grid{grid-template-columns:repeat(2,1fr)}.g-grid img{height:150px}}
.g-card{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);background:var(--paper)}
.g-card img{width:100%;height:210px;object-fit:cover;display:block}
.g-cap{padding:10px 12px;font-weight:700;font-size:var(--fs-sm);display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Video + principal */
.video-shell{background:#0E3B21;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);min-height:240px;display:flex}
.soon-box{margin:auto;color:#C9A227;font-weight:700;text-align:center;padding:40px 20px;font-size:var(--fs-base);line-height:1.7}
.principal-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-1);position:relative}
.principal-card p{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin:12px 0}
.p-avatar{width:60px;height:60px;border-radius:var(--r-pill);background:var(--green-deep);color:#C9A227;font-family:var(--font-head);font-weight:800;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center}
/* Staff + shop + bday cards */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.staff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.staff-grid{grid-template-columns:1fr}}
.staff-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sun);border-radius:var(--r-md);padding:20px;text-align:center;box-shadow:var(--sh-1)}
.s-avatar{width:64px;height:64px;border-radius:var(--r-pill);background:var(--green-deep);color:#FFFFFF;font-family:var(--font-head);font-weight:800;font-size:var(--fs-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shop-grid{grid-template-columns:1fr}}
.shop-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-1);text-align:center}
.shop-ico{font-size:var(--fs-2xl)}
.price-tag{display:inline-block;background:var(--sun-soft);color:#B31E35;font-weight:800;font-size:var(--fs-xs);border-radius:var(--r-pill);padding:5px 14px;margin-top:8px}
.bday-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.bday-grid{grid-template-columns:1fr}}
.bday-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-1);display:flex;gap:14px;align-items:center}
.bday-today{border:2px solid var(--sun);background:var(--gold-soft)}
/* Quiz */
.quiz-q{background:var(--sun-soft);border-radius:var(--r-md);padding:14px 16px;margin:12px 0}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media(max-width:560px){.quiz-opts{grid-template-columns:1fr}}
.quiz-opt{display:flex;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;font-weight:600;font-size:var(--fs-sm);cursor:pointer}
.quiz-opt:hover{border-color:var(--green)}
/* Map */
.map-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);border:1px solid var(--line)}
.map-frame iframe{width:100%;height:340px;border:0;display:block}
/* Chips + req list */
.chip{display:inline-block;background:var(--mint-soft);color:var(--green);font-weight:700;font-size:var(--fs-xs);border-radius:var(--r-pill);padding:6px 14px;margin:3px}
.req-list{list-style:none;padding:0;margin:14px 0}
.req-list li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin-bottom:8px;font-weight:600;font-size:var(--fs-sm)}
/* Dark companions */
html[data-theme="dark"] .explore-bar{background:rgba(14,20,17,.85)}
html[data-theme="dark"] .principal-card,html[data-theme="dark"] .g-card,html[data-theme="dark"] .staff-card,html[data-theme="dark"] .shop-card,html[data-theme="dark"] .bday-card,html[data-theme="dark"] .req-list li{background:#101B28}
html[data-theme="dark"] .bday-today{background:#1C2A24;border-color:var(--sun)}
html[data-theme="dark"] .quiz-opt{background:#101B28}
html[data-theme="dark"] .price-tag{background:#1C2A24;color:var(--sun)}

/* ---- school shop (Amazon-style) ---- */
.class-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:9px 16px;font-weight:700;font-size:var(--fs-sm);cursor:pointer;min-height:44px}
.chip.on{background:#0E3B21;color:#FFFFFF;border-color:#0E3B21}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.prod{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-1)}
.prod-ico{width:52px;height:52px;border-radius:var(--r-md);background:var(--sun-soft);color:#B31E35;display:flex;align-items:center;justify-content:center}
.prod-ico svg{display:block}
.prod b{font-size:var(--fs-sm)}
.prod .price{font-size:var(--fs-md);font-weight:800;color:#0E3B21}
.prod .cls{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.qty-row{display:flex;align-items:center;gap:10px;margin-top:auto}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.qty button{width:38px;height:38px;font-size:var(--fs-md);font-weight:800;background:var(--cream);border:0;cursor:pointer}
.qty b{min-width:34px;text-align:center}
.cart-bar{position:sticky;bottom:14px;z-index:var(--z-dropdown);background:#0E3B21;color:#FFFFFF;border-radius:var(--r-lg);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-3);margin-top:18px;flex-wrap:wrap}
.cart-bar .tot{font-size:var(--fs-md);font-weight:800}
.cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ref-big{font-size:var(--fs-lg);font-weight:800;letter-spacing:1px;background:var(--cream);border:2px dashed var(--green);border-radius:var(--r-md);padding:12px;text-align:center;margin:12px 0}
/* ---- class pages ---- */
.class-hero-img{width:100%;max-height:300px;object-fit:cover;border-radius:var(--r-lg);margin-bottom:18px}
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
.act-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;font-weight:700;display:flex;gap:10px;align-items:center;box-shadow:var(--sh-1)}
.act-card svg{flex:none;color:#0B7A37}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
a.class-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);text-decoration:none;color:inherit;display:block}
a.class-card:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
a.class-card h3{margin:0 0 6px}

/* auth: tall register form scrolls (back face takes layout when flipped) */
.flip-scene.flipped .flip-front{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.flip-scene.flipped .flip-back{position:relative}
@media(max-height:760px){.auth-wrap{align-items:flex-start}}

/* Graduation gallery (alumni.html): square photographs keep their full
   frame - a fixed 170px strip would crop heads and feet in group shots.
   Two columns on phones so each photo stays big enough to read. */
.grad-gal .gal img{height:auto;aspect-ratio:1/1;object-fit:cover}
.grad-gal .gal{cursor:pointer}
@media(max-width:680px){.grad-gal{grid-template-columns:repeat(2,1fr)}}

/* ---- source: corporate.css ---- */
/* ============================================================
   CORPORATE THEME — Treasure Academy
   Clash Display + General Sans, restrained professional components.
   Loaded last: everything here overrides main.css / extra.css.
   ============================================================ */
:root{
  --font-head:"Clash Display",sans-serif;--font-body:"General Sans",sans-serif;
  --green:#0E5A2E;--green-bright:#0B7A37;--green-deep:#0E3B21;--green-2:var(--green-deep);
  --gold:#C9A227;--gold-soft:#F8F4E4;--paper:#FFFFFF;--cream:#F6F1E3;
  --ink:#203040;--muted:#5C6B7A;--line:#E5DCC2;--danger:#B31E35;
  --white:var(--paper);--sh:var(--sh-2);--sh-sm:var(--sh-1);--sh-lg:var(--sh-3);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--font-head);letter-spacing:-.01em;line-height:1.15}
h1 em{color:var(--gold);font-style:italic}
h3,h4{font-family:var(--font-body)}
.logo>span{font-family:var(--font-head);font-size:var(--fs-base);line-height:1.25}
.stat b,.step .num,.yr{font-family:var(--font-head)}

/* ---------- Topbar + Navbar ---------- */
.topbar{background:var(--green-2);color:#E5DCC2;font-size:var(--fs-xs)}
.topbar a{color:var(--sun)}
.tb-contact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-sep{opacity:.5}
.tb-right{display:flex;align-items:center;gap:14px}
.portal-link{font-weight:700;color:var(--sun)!important;text-decoration:underline;text-underline-offset:3px}
.navbar{position:sticky;top:0;z-index:var(--z-dropdown);background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-links a{font-weight:600;font-size:var(--fs-sm);color:var(--ink);padding:9px 11px;border-radius:var(--r-sm)}
.nav-links a:hover{color:var(--green);background:var(--mint-soft)}
.theme-btn{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.explore-bar a{border-radius:var(--r-sm)}

/* ---------- Hero ---------- */
.hero{padding:60px 0 66px}
.cloud,.float-badge,.blob-frame::before,.blob-frame::after{display:none}
.blob-frame{border-radius:var(--r-md);box-shadow:var(--sh-1)}
.hero-badge{background:transparent;color:var(--green);border:1px solid var(--green);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px}
.hero-badge .dot{display:none}
.hero h1{font-size:var(--fs-2xl);margin:16px 0 12px}
.w-sun,.w-coral,.w-sky{color:inherit}
.lead{font-size:var(--fs-base);color:var(--muted)}
.hero-figure{margin:0}
.hero-figure img{width:100%;border-radius:var(--r-md);box-shadow:var(--sh-1);display:block}
.hero-figure figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:10px;font-weight:600}
.hero-mini{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.hero-mini strong{font-family:var(--font-head);font-size:var(--fs-lg);color:var(--ink)}
.hero-mini span{font-size:var(--fs-xs);color:var(--muted);font-weight:600}

/* ---------- Buttons ---------- */
.btn{border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;padding:12px 24px}
.btn-sm{padding:8px 15px;font-size:var(--fs-sm)}
.btn svg{vertical-align:-4px}
button[data-view]{border-radius:var(--r-sm);font-weight:600}

/* ---------- Eyebrow tags, chips, badges ---------- */
.sec-tag{background:none!important;border:0!important;color:var(--gold);font-size:var(--fs-xs);font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:0}
.sec-head{text-align:center}
.sec-head p{color:var(--muted)}
.chip{background:var(--white);border:1px solid var(--line);color:var(--green)}
.badge{font-size:var(--fs-xs);letter-spacing:.08em;font-weight:800}
.sticker{background:var(--green-2);color:#FFFFFF;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-sm);padding:9px 15px;box-shadow:var(--sh-1)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--green-deep);padding:60px 0;border:0}
.page-hero h1{color:#FFFFFF;font-size:var(--fs-2xl)}
.page-hero p{color:#E5DCC2}
.page-hero .sec-tag{color:var(--sun)}

/* ---------- Cards: white, hairline, sharp ---------- */
.prog.p1,.prog.p2,.prog.p3,.mv-card,.quiz-q{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.prog.p1,.prog.p2,.prog.p3,.feat,.step{border-top:3px solid var(--green)}
.prog .emoji,.feat .ic,.big-emoji{display:none}
.prog-grid{counter-reset:pn}
.prog h3::before{counter-increment:pn;content:"0" counter(pn);display:block;font-family:var(--font-head);font-size:var(--fs-sm);letter-spacing:.12em;color:var(--gold);margin-bottom:6px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.step .num{background:var(--green)!important;color:#FFFFFF;font-size:var(--fs-md)}
.feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.gal .cap{background:rgba(12,51,32,.93);font-size:var(--fs-sm);font-weight:600}
.testi-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.testi-card .stars{color:var(--gold);letter-spacing:.25em}
.quote-card{border-left:4px solid var(--gold);border-radius:var(--r-md)}
.tl-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.tl-item .yr{color:var(--green)}
.panel,.modal,.auth-card,.glass-card{border-radius:var(--r-md)}
.staff-card,.shop-card,.principal-card,.g-card,.bday-card,.founder-card,.req-list li,.video-shell,.map-frame{border-radius:var(--r-md)}
.shop-ico{font-family:var(--font-head);font-size:var(--fs-lg);color:var(--gold)}
.price-tag{background:var(--white);border:1px solid var(--line);color:var(--green)}
.quiz-opt{border-radius:var(--r-sm)}
/* m-dl shows the single SVG arrow only (double-arrow removed 2026-09-16) */

/* ---------- Stats band ---------- */
.stats-band{background:var(--green-2);border-radius:0}
.stat b{font-size:var(--fs-xl);color:#FFFFFF}
.stat span{color:#E5DCC2;font-size:var(--fs-sm);font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{background:var(--green-deep);border-radius:var(--r-md);color:#FFFFFF;padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--sh-1)}
.cta-band h2{color:#FFFFFF;font-size:var(--fs-xl)}
.cta-band p{color:#E5DCC2;margin-top:6px;max-width:560px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:#101B28}
.foot-col h4{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin-bottom:12px}
.foot-col a,.foot-col p{color:#E5DCC2}
.foot-quick-row a:hover{color:#FFFFFF}
.social-3d a{width:37px;height:37px;border:1px solid #203040;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:#E5DCC2;margin-right:8px;transform:none!important;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.social-3d a:hover{background:var(--green);color:#FFFFFF}
.foot-bottom{border-top:1px solid #1C2A24;color:#9AA7B8;font-size:var(--fs-xs)}

/* ---------- Chatbot ---------- */
.chat-launch{background:var(--green);border-radius:var(--r-pill);width:56px;height:56px;box-shadow:var(--sh-1)}
.chat-panel,.chat-box{border-radius:var(--r-md)}
.chat-head{background:var(--green-2);color:#FFFFFF}
.chat-avatar{background:var(--sun);color:#0E3B21;font-weight:800}

/* ---------- Portal tables + forms ---------- */
.tbl th{background:#0E3B21;color:#FFFFFF;font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;padding:12px}
.tbl{border-radius:var(--r-md);overflow:hidden}
.field input,.field select,.field textarea,.toolbar input,.toolbar select{border-radius:var(--r-sm)}
.duty-banner{border-radius:var(--r-md)}

/* ---------- Dark mode companions ---------- */
[data-theme="dark"]{--green:#0B7A37;--green-2:#0E3B21;--gold:#C9A227;--line:#2A3A4E}
[data-theme="dark"] .navbar{background:rgba(18,26,24,.97)}
[data-theme="dark"] .nav-links a{color:var(--ink)}
[data-theme="dark"] .nav-links a:hover{background:#1C2A24;color:var(--sun)}
[data-theme="dark"] .theme-btn{background:#1C2A24}
[data-theme="dark"] .lead,[data-theme="dark"] .sec-head p{color:#9AA7B8}
[data-theme="dark"] .hero-figure figcaption{color:#9AA7B8}
[data-theme="dark"] .step .num{background:var(--green)!important}
[data-theme="dark"] .sticker{background:var(--sun);color:#0E3B21}
[data-theme="dark"] .tbl th{background:#101B28}

/* Real school logo */
.mark-img{width:48px;height:48px;object-fit:contain;border-radius:var(--r-md);background:var(--paper);flex:none;box-shadow:var(--sh-1)}
.auth-logo .mark-img{width:74px;height:74px;border-radius:var(--r-md)}

/* restored homepage icons (professional SVG, no emoji) */
.feat .ic{display:flex;align-items:center;justify-content:center;color:var(--navy,#2A3A4E)}
.feat .ic svg{width:26px;height:26px}
.prog .emoji{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--r-lg);background:rgba(255,255,255,.88);color:var(--navy,#2A3A4E);margin-bottom:12px}
.prog .emoji svg{width:34px;height:34px}

/* wired gallery links */
.gal a,.g-grid a{display:block;color:inherit;text-decoration:none}

/* footer contact icons */
.foot-contact p{display:flex;gap:9px;align-items:flex-start;margin:7px 0}
.foot-contact .fi{flex:0 0 auto;color:var(--gold,#C9A227);display:inline-flex;margin-top:2px}

/* ============ PRO DESIGN PASS (2026-09-15) ============ */
::selection{background:#0E3B21;color:#FFFFFF}
:focus-visible{outline:2px solid #C9A227;outline-offset:2px}
/* sticky blurred nav */
.navbar{position:sticky;top:0;z-index:var(--z-chat);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
/* buttons: depth + lift */
.btn{border-radius:var(--r-md);font-weight:700;letter-spacing:.01em;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--sh-1)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:none;box-shadow:var(--sh-1)}
/* section labels */
.sec-tag{letter-spacing:.14em;font-size:var(--fs-xs);font-weight:800}
/* marketing cards: uniform + hover */
.feat,.prog,.mv-card,.g-card,.gal,.wa-card,.yt-card,.m-item,.faq-item,.testi-card,.promo-card,.ne-card,.principal-card,.founder-card,.quote-card{border-radius:var(--r-lg)}
.g-card,.gal,.yt-card,.m-item{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.g-card:hover,.gal:hover,.yt-card:hover,.m-item:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.ne-row{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.ne-row:hover{background:rgba(201,162,39,.07)}
.faq-item{border:1px solid var(--line)}
.sticker{transform:none;border-radius:var(--r-pill);font-weight:800}
/* hero polish */
.hero-figure img{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.hero-figure figcaption{font-size:var(--fs-xs);opacity:.85}
/* footer polish */
.foot-col h4{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
.foot-quick-row a{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.foot-quick-row a:hover{color:#C9A227}
/* clock widget: corporate theme */
.clock-widget{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.clock-status{background:var(--mint-soft);color:#0E3B21;font-weight:700}
.clock-status b{letter-spacing:.06em}
.clock-toggle{background:#0E3B21}
[data-theme="dark"] .clock-status{background:#101B28;color:#C9A227}
/* chat widget: refinements */
.chat-fab{box-shadow:var(--sh-3)}
.chat-input button{display:flex;align-items:center;justify-content:center}
.chat-chips button:hover{border-color:#0E3B21;color:#0E3B21}

/* ============ SUBPAGE CORPORATE PASS ============ */
.page-hero{background:var(--green-deep);color:#FFFFFF;border-bottom:none;padding:48px 0 38px}
.page-hero h1{color:#FFFFFF}
.page-hero p{color:#E5DCC2}
.page-hero .sec-tag{background:rgba(255,255,255,.12);color:#C9A227}
.float-field{position:relative}
.float-field .eye{font-size:var(--fs-xs);font-weight:800;color:var(--mint);background:none;border:none;cursor:pointer;padding:4px 6px;white-space:nowrap}
.float-field input{padding-right:70px}
.side-toggle::after{content:"\2630";font-size:var(--fs-sm);font-weight:800}
#waList{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.wa-card{padding:11px 13px;margin-bottom:0;gap:11px}
.wa-logo{width:42px;height:42px;flex:0 0 42px}
.status-dot{width:13px;height:13px;border-width:2.5px}
.wa-card b{font-size:var(--fs-sm)}
.map-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.map-frame iframe{width:100%;height:230px;border:0;display:block}

/* ============ BEAUTY PASS: nav + buttons + icons (2026-09-15) ============ */
/* ---- header: logo left, links + theme pinned right in one row ---- */
.navbar .container{flex-wrap:nowrap}
.nav-links{flex:1 1 auto;justify-content:flex-end;margin-left:auto}
.nav-cta-row{margin-left:4px;flex:none}
.logo{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.logo:hover{transform:translateY(-1px)}
.mark-img{border:1.5px solid #E5DCC2;box-shadow:var(--sh-2)}
.topbar{border-bottom:2px solid #C9A227}
/* ---- nav links: pill + gold underline sweep ---- */
.nav-links a{position:relative;padding:10px 14px;border-radius:var(--r-md);font-weight:700;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}
.nav-links a:not(.btn):hover{background:var(--mint-soft);color:#0E5A2E}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:var(--r-sm);background:#C9A227;transform:scaleX(0);transform-origin:left;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.nav-links .btn{margin-left:10px}
/* ---- theme button: gold-ringed circle ---- */
.theme-btn{width:42px;height:42px;border-radius:var(--r-pill);border:1.5px solid #C9A227;background:var(--paper);color:#C9A227;box-shadow:var(--sh-2);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.theme-btn:hover{transform:rotate(20deg) scale(1.06);box-shadow:var(--sh-2)}
[data-theme="dark"] .theme-btn{background:var(--d-surface);color:#C9A227;border-color:#C9A227}
/* ---- buttons: rich gradients ---- */
.btn-mint{background:var(--green-deep)}
.btn-sun{background:var(--gold);color:#203040}
.btn-coral{background:var(--danger)}
.btn-sky{background:var(--green)}
.btn-grape{background:var(--green)}
.btn-white{border:1.5px solid var(--line)}
/* ---- icons ---- */
.feat .ic{color:#0E3B21;border-radius:var(--r-md);box-shadow:var(--sh-1)}
.prog .emoji{color:#0E3B21;box-shadow:var(--sh-2)}
.step .num{box-shadow:var(--sh-1);font-weight:800}
.stars{color:#C9A227;letter-spacing:3px}
.badge{letter-spacing:.04em}
.chip{box-shadow:var(--sh-1)}
.icon-btn{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.icon-btn:hover{transform:translateY(-1px)}
.yt-thumb .play{background:rgba(12,27,20,.72);border:1.5px solid rgba(255,255,255,.75);backdrop-filter:blur(2px)}
.slider-arrow{width:42px;height:42px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);color:#0E3B21;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.slider-arrow:hover{transform:scale(1.1)}
.slider-dots button,.testi-dots button{width:9px;height:9px;border-radius:var(--r-pill);border:none;background:#E5DCC2;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);padding:0;cursor:pointer}
.slider-dots button.on,.testi-dots button.on{width:26px;background:#C9A227}
.pager-btn .arrow{display:inline-block;animation:none}
.pager-btn.next .arrow{animation-name:nudgeR}


/* ---- inputs + tables ---- */
.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus,.chat-input input:focus{border-color:#0B7A37;box-shadow:var(--sh-1)}
.tbl tbody tr{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.tbl tbody tr:hover{background:#EAF0F6}
[data-theme="dark"] .tbl tbody tr:hover{background:#101B28}
/* ---- scrollbars ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#E5DCC2;border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#0E5A2E;background-clip:content-box}
/* ---- small screens: one row, links glide sideways ---- */
@media(max-width:760px){
  .logo>span small{display:none}
  .nav-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:9px 10px;font-size:var(--fs-sm)}
  .theme-btn{width:38px;height:38px;flex-basis:38px}
}

/* ============ HEADER MENU PASS (2026-09-15) ============ */
.navbar{box-shadow:var(--sh-2)}
.nav-links{flex-wrap:nowrap}
.theme-btn svg{display:block;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.theme-btn:hover{transform:scale(1.08)}
.theme-btn:hover svg{transform:rotate(30deg)}
/* ============ MOBILE NAV: two rows, everything visible, no hamburger (2026-09-16) ============ */
@media(max-width:880px){
  .burger{display:none!important}
  .navbar .container{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .navbar .logo{flex:1 1 0;min-width:0}
  .nav-cta-row{flex:1 1 0;margin-left:0;justify-content:flex-end}
  .nav-links{order:5;flex:1 1 100%;display:flex!important;flex-wrap:wrap;gap:8px;position:static;background:none;border:0;box-shadow:none;padding:0;overflow:visible}
  .nav-links a{flex:1 1 28%;display:flex;align-items:center;justify-content:center;min-height:46px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 6px;font-size:var(--fs-sm);font-weight:700;text-align:center}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin:0;flex:1 1 44%;min-height:46px}
  [data-theme="dark"] .nav-links a{background:#1C2A24;border-color:#2A3A4E;color:#EAF0F6}
  .brand-name>span{font-size:var(--fs-xs);letter-spacing:.08em}
  .brand-name small{font-size:var(--fs-xs);letter-spacing:.2em}
}

/* ---- easy-mode: big touch targets, tap-to-call ---- */
.tb-contact a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tb-contact svg{vertical-align:-2px;margin-right:2px}
@media(max-width:880px){
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
}
@media(max-width:560px){
  .topbar [data-school-email]{display:none}
  .topbar .tb-sep{display:none}
}

/* chat button icon */
.chat-fab svg{display:block;pointer-events:none}

/* ---- aurora blurred-lights background (login + register) ---- */
.auth-wrap{background:var(--green-deep);overflow:hidden}
.auth-wrap::before{content:"";position:absolute;inset:-60px;z-index:0;pointer-events:none;
  background:var(--paper);
  filter:blur(60px);animation:none}
.auth-wrap>*{position:relative;z-index:var(--z-nav)}

@media (prefers-reduced-motion:reduce){.auth-wrap::before{animation:none}}
/* ---- faint light-glow on public pages ---- */
body:not(.portal-body)::before{content:"";position:fixed;top:0;left:0;right:0;height:520px;z-index:0;pointer-events:none;
  background:var(--paper)}

/* ============ HEADER: logo | centered school name | theme, links row (2026-09-16) ============ */
.navbar .logo{flex:1 1 0;min-width:0}
.brand-name{flex:0 1 auto;text-align:center;line-height:1.25;min-width:0}
.brand-name>span{font-family:var(--font-head);font-weight:800;font-size:var(--fs-lg);letter-spacing:.08em;word-spacing:.1em;text-transform:uppercase;color:#0E3B21;white-space:nowrap}
.brand-name small{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#5C6B7A;margin-top:2px;white-space:nowrap}
.nav-cta-row{flex:1 1 0;justify-content:flex-end;margin-left:0}
.nav-links{order:5;flex:1 1 100%;justify-content:center;margin-left:0}
[data-theme="dark"] .brand-name>span{color:var(--ink)}
[data-theme="dark"] .brand-name small{color:#9AA7B8}
@media(max-width:560px){
  .brand-name>span{font-size:var(--fs-xs);letter-spacing:.04em;white-space:normal}
  .brand-name small{display:none}
}

/* ============ DARK MODE CONTRAST PASS (2026-09-16): no faint text ============ */
[data-theme="dark"] .panel,[data-theme="dark"] .prod,[data-theme="dark"] .p-card,
[data-theme="dark"] a.class-card,[data-theme="dark"] .act-card,
[data-theme="dark"] .ne-row,[data-theme="dark"] .ne-card,
[data-theme="dark"] .masonry .m-item,[data-theme="dark"] .testi-card,
[data-theme="dark"] .step,[data-theme="dark"] .gal,[data-theme="dark"] .wa-card,
[data-theme="dark"] .prog-card
{background:#101B28;border-color:#2A3A4E;color:#EAF0F6}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#101B28;border-color:#2A3A4E;color:#EAF0F6}
[data-theme="dark"] .prod .price{color:#C9A227}
[data-theme="dark"] .prod .cls,[data-theme="dark"] .p-card-meta{color:#9AA7B8}
[data-theme="dark"] .prod-ico{background:#1C2A24;color:#C9A227}
[data-theme="dark"] .act-card svg{color:#0B7A37}
[data-theme="dark"] .ref-big{background:#101B28;border-color:#0B7A37;color:#EAF0F6}
[data-theme="dark"] .qty button{background:#2A3A4E;color:#EAF0F6}
[data-theme="dark"] .qty b{color:#EAF0F6}
[data-theme="dark"] .att-bar{background:#2A3A4E}
[data-theme="dark"] .hl,[data-theme="dark"] .hero h1 em{color:#0B7A37}
[data-theme="dark"] .hero h1 .w-sun{color:#C9A227}
[data-theme="dark"] .slider-arrow{background:#2A3A4E;color:#FFFFFF;border-color:#2A3A4E}
[data-theme="dark"] .pager-btn{background:#203040;color:#EAF0F6;border-color:#2A3A4E}
[data-theme="dark"] .pager-info{color:#9AA7B8}
[data-theme="dark"] .empty,[data-theme="dark"] .sub{color:#9AA7B8}
[data-theme="dark"] .yt-meta small,[data-theme="dark"] .ne-meta span{color:#9AA7B8}
[data-theme="dark"] .m-dl{background:rgba(231,185,75,.92);color:#203040}
[data-theme="dark"] .testi-card b{color:#C9A227}
[data-theme="dark"] .gal .cap,[data-theme="dark"] .cap{color:#EAF0F6}
[data-theme="dark"] .topbar{background:#0E3B21}
[data-theme="dark"] .portal-link{color:#FFFFFF}
[data-theme="dark"] .page-hero h1{color:#FFFFFF}
[data-theme="dark"] .chip.on{background:#C9A227;border-color:#C9A227;color:#203040}

/* ============ BATCH 2026-09-16: rails, likes/comments, dark sky ============ */
/* footer: compact height */
.site-footer{padding:26px 0 0}
.foot-main{gap:20px;margin-bottom:16px}
.foot-col h4{margin-bottom:8px}
.foot-brand p{margin:8px 0 0}
.foot-bottom{padding:10px 0}
.foot-contact .foot-map{display:inline;padding:0;color:#E5DCC2;text-decoration:underline dotted}
.foot-contact .foot-map:hover{color:#FFFFFF}
/* stories rail: 2 visible, swipe sideways */
.ne-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;scrollbar-width:thin;cursor:grab}
.ne-row{flex:0 0 clamp(290px,46%,440px);flex-direction:column;align-items:stretch;scroll-snap-align:start;gap:12px}
.ne-row:hover{transform:translateY(-3px)}
.ne-row img{width:100%;height:160px;flex:none;object-fit:cover}
.ne-row .txt{min-width:0}
.ne-row h3{font-size:var(--fs-base);margin-bottom:4px}
.ne-row p{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ne-row>b:last-child{display:none}
/* gallery label tags (NEWS / EVENT on story covers) */
.m-item .m-tag{position:absolute;top:10px;left:10px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill);color:#FFFFFF;box-shadow:var(--sh-1)}
.m-tag.b-sky{background:#5C6B7A}.m-tag.b-coral{background:#B31E35}
/* video cards: unmistakable */
.yt-card.is-video .play{transform:scale(1.3)}
.yt-card.is-video{outline:2px solid var(--coral);outline-offset:-2px}
/* video modal player */
#videoModal .modal{max-width:720px;background:#101B28;color:#FFFFFF}
#videoModal h3{margin-bottom:12px;font-size:var(--fs-base)}
#videoModal video{width:100%;border-radius:var(--r-md);background:#101B28;max-height:62vh}
#videoModal iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-md);background:#101B28}
/* story page: photo thumbs, likes, comments */
.story-thumbs{display:flex;gap:10px;margin:-8px 0 24px;overflow-x:auto;padding-bottom:6px}
.story-thumbs img{width:96px;height:72px;object-fit:cover;border-radius:var(--r-md);cursor:pointer;border:2px solid transparent;flex:none}
.story-thumbs img.on{border-color:var(--mint)}
.like-row{display:flex;align-items:center;gap:18px;margin:20px 0 6px;flex-wrap:wrap}
.like-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;color:var(--muted);font-weight:800;padding:6px 10px}
.like-btn svg{width:30px;height:30px}
.like-btn .lc{font-size:var(--fs-sm)}
.like-btn.on{color:var(--mint)}
.like-btn:not(.on):hover{color:var(--ink)}
.cmt-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-top:22px}
.cmt{border-top:1px solid var(--line);padding:12px 0}
.cmt:first-child{border-top:none}
.cmt p{margin:4px 0 0}
.cmt small{color:var(--muted)}
#cmtSort{font-family:inherit;font-size:var(--fs-sm);padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
/* chatbot typing caret */
.tcaret{display:inline-block;width:2px;height:1em;background:var(--mint);vertical-align:-2px;animation:none;margin-left:1px}
/* popups: blurred background + stronger glass */
.modal-bg{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.glass{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7)}
[data-theme="dark"] .glass{background:rgba(24,36,52,.9)}
/* auth logo: always centered */
.auth-logo{display:flex;flex-direction:column;align-items:center;text-align:center}
/* dark mode: global readability */
[data-theme="dark"] body{background:var(--d-surface);color:#EAF0F6}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#EAF0F6}
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] td,[data-theme="dark"] th,[data-theme="dark"] label,[data-theme="dark"] .field,[data-theme="dark"] .ne-meta span,[data-theme="dark"] .txt h3,[data-theme="dark"] .body h3,[data-theme="dark"] .faq-q{color:#EAF0F6}
[data-theme="dark"] .body p,[data-theme="dark"] .txt p,[data-theme="dark"] .sec-head p,[data-theme="dark"] small,[data-theme="dark"] .faq-a,[data-theme="dark"] .story-body p,[data-theme="dark"] .cmt p{color:#9AA7B8}
[data-theme="dark"] .btn-white{background:#2A3A4E;color:var(--ink);border-color:#2A3A4E}
[data-theme="dark"] .story-body,[data-theme="dark"] .cmt-box{background:#101B28;border-color:#2A3A4E}
[data-theme="dark"] .cmt{border-color:#2A3A4E}
[data-theme="dark"] .like-btn:not(.on){color:#9AA7B8}
[data-theme="dark"] .pager-info,[data-theme="dark"] .swipe-hint{color:#9AA7B8}
[data-theme="dark"] .ne-row,[data-theme="dark"] .yt-card,[data-theme="dark"] .news-card{background:#101B28;border-color:#2A3A4E}
[data-theme="dark"] .rail-btns button{background:#2A3A4E;color:#EAF0F6;border-color:#2A3A4E}
[data-theme="dark"] #cmtSort{background:#101B28;color:var(--ink);border-color:#2A3A4E}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#101B28;color:var(--ink);border-color:#2A3A4E}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#9AA7B8}

/* ============ SHOP BATCH: stock, orders, printable slips ============ */
.stock{font-size:var(--fs-xs);font-weight:800;color:#0B7A37}
.stock.out{color:#B31E35}
.backorder{font-size:var(--fs-xs);color:#C9A227;font-weight:600}
.slip{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;color:#203040}
.slip-head{text-align:center;margin-bottom:6px}
.slip-head b{display:block;font-size:var(--fs-base)}
.slip h3{text-align:center;letter-spacing:.2em;font-size:var(--fs-sm);margin:8px 0}
.slip-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-top:10px}
.slip-tbl td,.slip-tbl th{border-bottom:1px dashed #EAF0F6;padding:6px 4px;text-align:left}
.slip-tbl.items th{background:var(--cream)}
.slip-tbl.items td:nth-child(n+2),.slip-tbl.items th:nth-child(n+2){text-align:right}
.slip-total{text-align:right;font-weight:800;font-size:var(--fs-base);margin-top:10px}
.slip-note{font-size:var(--fs-xs);background:var(--cream);border-radius:var(--r-sm);padding:8px 10px;margin-top:10px}
#printSlip{display:none}
@media print{
  body.printing>*:not(#printSlip){display:none!important}
  body.printing #printSlip{display:block!important;position:static}
  #printSlip .slip{border:none;padding:0;background:var(--paper)!important;color:#203040!important}
  #printSlip .slip-tbl.items th{background:#EAF0F6!important}
  #printSlip .slip-note{background:var(--paper)!important;color:var(--ink)!important}
  #printSlip .slip-total,#printSlip .slip-head b,#printSlip h3{color:#203040!important}
  .modal-bg,.chat-fab,.chat-panel,.clock-widget,#toast,.topbar,.navbar,.page-hero,footer{display:none!important}
}
[data-theme="dark"] .slip{background:#101B28;color:#EAF0F6;border-color:#2A3A4E}
[data-theme="dark"] .slip-tbl.items th{background:#101B28}
[data-theme="dark"] .slip-note{background:#101B28}
[data-theme="dark"] .slip-tbl td,[data-theme="dark"] .slip-tbl th{border-color:#2A3A4E}

/* ============ APPROVED BATCH: tags, lightbox, banners, timetable ============ */
.tag-new{background:#B31E35;color:#FFFFFF;font-size:var(--fs-xs);font-weight:800;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.08em;margin-left:8px;animation:none;white-space:nowrap}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(8,14,22,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}
.lb-box{position:relative;max-width:min(920px,100%);width:100%;text-align:center}
.lb-img{max-width:100%;max-height:74vh;border-radius:var(--r-md);box-shadow:var(--sh-3)}
.lb-cap{color:#EAF0F6;font-weight:700;margin-top:10px}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.lb-count{color:#9AA7B8;font-weight:800}
.lb-btns{display:flex;gap:8px}
.lb-x{position:absolute;top:-8px;right:-4px;width:42px;height:42px;border-radius:var(--r-pill);border:none;background:#B31E35;color:#FFFFFF;font-size:var(--fs-lg);cursor:pointer;line-height:1}
.lb-arrow{position:absolute;top:38%;width:46px;height:46px;border-radius:var(--r-pill);border:none;background:rgba(255,255,255,.14);color:#FFFFFF;font-size:var(--fs-lg);cursor:pointer;line-height:1}
.lb-prev{left:-4px}.lb-next{right:-4px}
.lb-arrow:hover{background:rgba(255,255,255,.28)}
@media(max-width:560px){.lb-arrow{top:auto;bottom:52px}}
/* emergency banner */
.emg-banner{position:sticky;top:0;z-index:var(--z-modal);background:#B31E35;color:#FFFFFF;text-align:center;font-weight:800;padding:10px 14px;font-size:var(--fs-sm);display:flex;gap:10px;align-items:center;justify-content:center}
.emg-dot{width:10px;height:10px;border-radius:var(--r-pill);background:var(--paper);animation:none;flex:none}
/* birthday banner */
.bday-banner{background:var(--green-deep);color:#FFFFFF;border-radius:var(--r-lg);padding:16px 20px;margin:18px 0;box-shadow:var(--sh-3)}
.bday-banner b{font-size:var(--fs-base)}
.bday-soon{margin-top:8px;font-size:var(--fs-sm);color:#EAF0F6;font-weight:600}
/* timetable */
table.tbl.tt th{background:#0E3B21;color:#FFFFFF}
table.tbl.tt td:first-child{font-weight:800;background:var(--cream)}
[data-theme="dark"] table.tbl.tt td:first-child{background:#101B28}
.tt-input{width:100%;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:var(--fs-xs)}
[data-theme="dark"] .tt-input{background:#101B28;border-color:#2A3A4E;color:var(--ink)}
/* status tracker */
.track-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-top:12px;box-shadow:var(--sh-1)}
[data-theme="dark"] .track-card{background:#101B28;border-color:#2A3A4E}

/* ============ BEAUTIFICATION: brand butter+green, nav, buttons, cards ============ */
:root{--brand:#0B7A37;--brand-dark:#0E5A2E;--brand-deep:#0E3B21;--butter:#E5DCC2;--butter-deep:#C9A227;--butter-soft:#F8F4E4}
/* nav links: butter underline style, not pills */
.nav-links a:not(.btn){position:relative;border-radius:0;padding:9px 4px;margin:0 9px}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:3px;border-radius:var(--r-sm);background:var(--green-deep);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links a:not(.btn):hover{background:none;color:var(--brand)}
.nav-links a:not(.btn):hover::after{right:0}
.nav-links a:not(.btn).on{color:var(--brand)}
.nav-links a:not(.btn).on::after{right:0}
@media(max-width:860px){.nav-links a:not(.btn){margin:0 4px;padding:7px 4px}}
/* nav CTA button */
.nav-links .btn{border-radius:var(--r-md);border-color:transparent;background:var(--green-deep);color:#FFFFFF;box-shadow:var(--sh-2)}
.nav-links .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:#FFFFFF}
/* buttons: gradients + lift */
.btn{border-radius:var(--r-md);font-weight:700;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.btn-mint{background:var(--green-deep);border-color:transparent;color:#FFFFFF;box-shadow:var(--sh-2)}
.btn-mint:hover{transform:translateY(-2px);filter:brightness(1.07);color:#FFFFFF}
.btn-sun{background:var(--gold);border-color:transparent;color:#203040;box-shadow:var(--sh-2)}
.btn-sun:hover{transform:translateY(-2px);color:#203040}
.btn-coral{background:var(--danger);border-color:transparent;box-shadow:var(--sh-2)}
.btn-coral:hover{transform:translateY(-2px);color:#FFFFFF}
.btn-sky{background:var(--green);border-color:transparent;box-shadow:var(--sh-2)}
.btn-sky:hover{transform:translateY(-2px);color:#FFFFFF}
.btn-grape{background:var(--green);border-color:transparent}
.btn-grape:hover{transform:translateY(-2px);color:#FFFFFF}
.btn-white{border:2px solid var(--line)}
.btn-white:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-sm{border-radius:var(--r-md)}
/* chips: rounded squares, green active */
.chip,.pill-btn{border-radius:var(--r-md);border:1.5px solid var(--line);font-weight:700}
.chip:hover,.pill-btn:hover{border-color:var(--brand);color:var(--brand)}
.chip.on,.pill-btn.on{background:var(--green-deep);border-color:transparent;color:#FFFFFF;box-shadow:var(--sh-2)}
.icon-btn{border-radius:var(--r-md);border:1.5px solid var(--line)}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
/* program cards with art */
.prog{padding:0 0 28px}
.prog-art{width:100%;height:180px;object-fit:contain;background:var(--paper);display:block;border-bottom:1px solid var(--line)}
.prog:hover .prog-art{transform:scale(1.03)}
.prog-art{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.prog h3{margin:16px 26px 4px}
.prog .ages{margin:0 26px}
.prog ul{margin:12px 26px 20px}
.prog .btn{margin:0 26px}
.prog.p1::before{background:var(--butter-deep)}
.prog.p2::before{background:var(--brand)}
.prog.p3::before{background:var(--green-deep)}
/* why icons */
.why-ic{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto 10px;background:var(--paper);border-radius:var(--r-lg);padding:6px;box-shadow:var(--sh-2);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.feat:hover .why-ic{transform:scale(1.1) rotate(2deg)}
.feat{border-top:4px solid transparent}
.feat:hover{border-top-color:var(--butter-deep)}
/* steps: butter medallions */
.step .num{background:var(--gold);color:var(--brand-deep)!important;box-shadow:var(--sh-2);font-weight:800}
/* section tags: brand green */
.sec-tag{background:var(--green-deep);color:#FFFFFF;border:none;box-shadow:var(--sh-2)}
/* shop banner */
.shop-banner{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:20px;display:block}
/* login side art */
.auth-art{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-1);display:block;background:var(--paper)}

/* ============ BATCH: loader, shop photos, contact fabs, teachers, spotlight ============ */
#siteLoader{position:fixed;inset:0;z-index:var(--z-toast);background:var(--paper);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
#siteLoader.done{opacity:0;pointer-events:none}
#siteLoader img{width:84px;height:84px;object-fit:contain;animation:none}
#siteLoader .spin{width:38px;height:38px;border-radius:var(--r-pill);border:4px solid var(--butter-soft,#F8F4E4);border-top-color:var(--brand,#0B7A37);animation:lspin .8s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}

/* shop real photos */
.prod-img{width:100%;height:132px;object-fit:cover;border-radius:var(--r-md);display:block}
.cart-thumb{width:44px;height:44px;object-fit:cover;border-radius:var(--r-md);flex:none}

/* teachers strip */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.team-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 12px;text-align:center;box-shadow:var(--sh-1)}
[data-theme="dark"] .team-card{background:#101B28;border-color:#2A3A4E}
.team-card img{width:84px;height:84px;border-radius:var(--r-pill);object-fit:cover;border:3px solid var(--butter-deep,#C9A227);margin-bottom:8px}
/* spotlight */
.spot-card{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
[data-theme="dark"] .spot-card{background:#101B28;border-color:#2A3A4E}
.spot-card img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block}
.spot-card .spot-txt{padding:24px}
@media(max-width:680px){.spot-card{grid-template-columns:1fr}}

/* ============ OFFICIAL FLAT STYLE (per headmistress) ============ */
.btn:hover{transform:none}
.btn-mint{background:#0B7A37;border:2px solid #C9A227;color:#FFFFFF;box-shadow:var(--sh-1)}
.btn-mint:hover{background:#0E5A2E;filter:none;color:#FFFFFF}
.btn-sun{background:#E5DCC2;border:2px solid #0E5A2E;color:#203040;box-shadow:none}
.btn-sun:hover{background:#C9A227;color:#203040}
.btn-coral{background:#B31E35;border-color:#B31E35;box-shadow:none}
.btn-coral:hover{background:#B31E35;color:#FFFFFF}
.btn-sky{background:#5C6B7A;border-color:#5C6B7A;box-shadow:none}
.btn-sky:hover{background:#5C6B7A;color:#FFFFFF}
.btn-grape{background:#5C6B7A;border-color:#5C6B7A}
.btn-grape:hover{background:#5C6B7A;color:#FFFFFF}
.btn-white{border:2px solid #0B7A37}
.btn-white:hover{border-color:#0E5A2E;color:#0E5A2E}
.chip.on,.pill-btn.on{background:#0B7A37;box-shadow:none}
.nav-links .btn{background:#0B7A37;border:2px solid #C9A227;box-shadow:none}
.nav-links .btn:hover{box-shadow:none}
/* motto ribbon under navbar */
.motto-ribbon{background:var(--green-deep);color:#E5DCC2;text-align:center;font-family:var(--font-head);font-weight:700;letter-spacing:.14em;font-size:var(--fs-xs);padding:7px 12px;text-transform:uppercase}
/* homepage countdown bar */
.count-bar{display:flex;gap:12px;align-items:center;background:#0B7A37;color:#FFFFFF;border:2px solid #C9A227;border-radius:var(--r-md);padding:10px 16px;margin:16px 0;font-weight:600}
.count-bar:hover{color:#FFFFFF}
.count-num{background:#E5DCC2;color:#0E3B21;font-weight:800;border-radius:var(--r-md);min-width:44px;text-align:center;padding:4px 8px;font-size:var(--fs-base)}
/* birthday wish bubbles */
.wish-bubble{background:#0B7A37;color:#FFFFFF;border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh-1)}
.wish-bubble b.who{font-size:var(--fs-base)}
.wish-bubble .when{font-size:var(--fs-xs);opacity:.85;font-weight:700}

/* ============ FIXES: loader logo, topbtn, steps row, gal 3-col, testi rail, anchors ============ */
#siteLoader img{width:84px;height:84px;object-fit:contain;background:var(--paper);border-radius:var(--r-lg);padding:10px;box-shadow:var(--sh-3);border:3px solid var(--butter-deep,#C9A227);animation:none}
/* back to top + hide widgets at footer */
body.at-bottom #chatFab,body.at-bottom #clockWidget{display:none!important}
#topBtn{position:fixed;right:16px;bottom:16px;z-index:var(--z-modal);width:52px;height:52px;border-radius:var(--r-pill);border:2px solid #C9A227;background:#0B7A37;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
#topBtn.show{opacity:1;pointer-events:auto}
/* steps: side-by-side with arrows */
.steps{display:flex;gap:36px;overflow-x:auto;padding:12px 4px 20px;margin-bottom:30px;scroll-snap-type:x mandatory}
.step{flex:0 0 235px;scroll-snap-align:start;position:relative}
.step:not(:last-child)::after{content:"→";position:absolute;right:-31px;top:44px;font-size:var(--fs-lg);font-weight:800;color:#0B7A37}
/* homepage gallery: 3 side by side */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:680px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
/* testimonials: swipe rail */
.testi-rail{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.testi-rail .testi-card{flex:0 0 min(340px,85vw);scroll-snap-align:start;margin:0}
.testi-rail .stars{color:#C9A227;font-size:var(--fs-sm);letter-spacing:2px;margin-bottom:8px}
/* stop content hiding under sticky navbar */
html{scroll-padding-top:150px}
section[id],div[id]{scroll-margin-top:130px}
/* batch7: ticker + birthday bell + stars of week + slots */
.ticker{background:#0E3B21;color:#E5DCC2;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(247,233,103,.35)}
.ticker-inner{display:inline-flex;min-width:max-content;gap:0;animation:tick 28s linear infinite;padding:7px 0;font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;will-change:transform}
.ticker-inner span{padding:0 46px}
.ticker-inner>.tick-content{display:inline-flex;align-items:center;padding:0}
/* batch25: round logout button sitting right beside the day/night switch */
.nav-logout{width:42px;height:42px;border-radius:var(--r-pill);border:1.5px solid #E5DCC2;background:var(--paper);color:#B31E35;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:var(--sh-2);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);flex:none}
.nav-logout:hover{background:var(--danger);color:#FFFFFF;transform:scale(1.1) rotate(-6deg);box-shadow:var(--sh-2)}
[data-theme="dark"] .nav-logout{background:var(--paper);color:#B31E35;border-color:#B31E35}
@keyframes tick{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.bday-bell{margin:18px auto 0;max-width:860px;background:var(--paper);border:2px solid #C9A227;border-radius:var(--r-lg);padding:14px 18px;text-align:center;color:#1C2A24;box-shadow:var(--sh-2)}
.bday-bell a{color:#0E5A2E;font-weight:800}
.stars-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.star-card{background:var(--paper);border:3px solid #C9A227;border-radius:var(--r-lg);padding:22px;text-align:center;box-shadow:var(--sh-3);position:relative}
.star-card::before{content:"STAR OF THE WEEK";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#C9A227;color:#FFFFFF;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;padding:3px 14px;border-radius:var(--r-lg);white-space:nowrap}
.star-card .avatar-big{width:74px;height:74px;border-radius:var(--r-pill);margin:6px auto 10px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:800;color:#FFFFFF;background:var(--green-deep);border:3px solid #FFFFFF;box-shadow:var(--sh-2)}
.star-card h3{margin:4px 0 2px;color:#0E3B21}
.star-card .wk{display:inline-block;margin-top:8px;background:#0E5A2E;color:#E5DCC2;font-size:var(--fs-xs);font-weight:700;padding:4px 12px;border-radius:var(--r-lg)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0}
.slot{border:2px solid var(--line,#EAF0F6);border-radius:var(--r-md);padding:12px;text-align:center;background:var(--paper)}
.slot b{display:block;font-size:var(--fs-base)}
.slot small{color:var(--muted,#5C6B7A)}
.slot.taken{opacity:.55;background:var(--cream);border-style:dashed}
.slot.picked{border-color:#0E5A2E;background:#EAF0F6;box-shadow:var(--sh-1)}
.hw-row{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line,#EAF0F6);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
.hw-row .avatar{flex:none}
@media(max-width:640px){.ticker-inner{animation-duration:18s}}
.quick-strip{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;font-weight:700}
.quick-strip a{color:var(--green,#0E5A2E);text-decoration:underline;text-underline-offset:3px}
.quick-strip span{color:var(--muted,#9AA7B8)}

/* ============ CONTRAST FIX PASS (2026-09-16): every text readable, day + night ============ */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
/* avatars: white initials on deepened brand colors */
.avatar{color:#FFFFFF!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* badges in dark: light text on deep tints */
[data-theme="dark"] .b-green{background:#0E3B21;color:#0B7A37}
[data-theme="dark"] .b-sun{background:#1C2A24;color:#C9A227}
[data-theme="dark"] .b-sky{background:#203040;color:#9AA7B8}
[data-theme="dark"] .b-coral{background:#1C2A24;color:#B31E35}
[data-theme="dark"] .b-grape{background:#203040;color:#9AA7B8}
[data-theme="dark"] .b-grey{background:#2A3A4E;color:#E5DCC2}
/* light cards → dark cards */
[data-theme="dark"] .p-stat,[data-theme="dark"] .pill-date,
[data-theme="dark"] .quote-card,[data-theme="dark"] .tl-item,
[data-theme="dark"] .form-card,[data-theme="dark"] .mv-card,
[data-theme="dark"] .hw-row,[data-theme="dark"] .slot,
[data-theme="dark"] .login-card,[data-theme="dark"] .auth-card,
[data-theme="dark"] .chat-chips button
{background:#101B28;border-color:#2A3A4E;color:#EAF0F6}
[data-theme="dark"] .login-card>p,[data-theme="dark"] .form-card>p{color:#9AA7B8}
[data-theme="dark"] .slot.taken{background:#101B28}
[data-theme="dark"] .slot.picked{background:#0E3B21;border-color:#0B7A37}
[data-theme="dark"] .promo-sun{background:var(--d-surface)}
[data-theme="dark"] .promo-sky{background:var(--d-surface)}
[data-theme="dark"] .promo-mint{background:var(--d-surface)}
[data-theme="dark"] .promo-coral{background:var(--d-surface)}
[data-theme="dark"] .promo-grape{background:var(--d-surface)}
/* gold features keep warm identity in dark */
[data-theme="dark"] .star-card{background:var(--d-surface);border-color:#C9A227}
[data-theme="dark"] .star-card h3{color:#E5DCC2}
[data-theme="dark"] .star-card .sub{color:#E5DCC2}
[data-theme="dark"] .bday-bell{background:var(--paper);border-color:#C9A227;color:#E5DCC2}
[data-theme="dark"] .bday-bell a{color:#0B7A37}
/* small status texts in dark */
[data-theme="dark"] .icon-btn.ok{background:#0E3B21;border-color:#0E5A2E;color:#0B7A37}
[data-theme="dark"] .icon-btn.del{background:#1C2A24;border-color:#B31E35;color:#B31E35}
[data-theme="dark"] .stock{color:#0B7A37}
[data-theme="dark"] .stock.out{color:#B31E35}
[data-theme="dark"] .backorder{color:#C9A227}
[data-theme="dark"] .check-list li::before{background:#0E3B21;color:#0B7A37}
[data-theme="dark"] .like-btn.on{color:#0B7A37}
[data-theme="dark"] .step:not(:last-child)::after{color:#0B7A37}
[data-theme="dark"] .float-field .eye{color:#0B7A37}
/* day-mode nits */
.foot-bottom{color:#9AA7B8}
.backorder{color:#B31E35}

/* ============ DESIGNED BACKGROUNDS (2026-09-16): institutional, butter + green ============ */
body{background:var(--paper)}
body:not(.portal-body)::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--paper)}
[data-theme="dark"] body{background:var(--d-surface);color:#EAF0F6}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:none;background-size:22px 22px;-webkit-mask-image:none;mask-image:none}
[data-theme="dark"] .hero::before{background-image:none}
.hero>*{position:relative}
.page-hero{position:relative;overflow:hidden;border-bottom:3px solid #C9A227}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--paper)}
.page-hero .container{position:relative;z-index:var(--z-nav)}
.stats-band{position:relative;overflow:hidden;background:var(--green-deep)}
.stats-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--paper)}
.stats-band .container{position:relative}
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:var(--r-pill);background:var(--paper);pointer-events:none}
.cta-band::after{content:"";position:absolute;right:30px;bottom:-90px;width:200px;height:200px;border-radius:var(--r-pill);border:26px solid rgba(247,233,103,.10);pointer-events:none}
.cta-band>*{position:relative}
.site-footer{border-top:3px solid #C9A227}
.side-logo,.side-user,.side-nav,.side-foot{position:relative}
.sidebar::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--paper)}

/* ============ PRINT: report cards + slips always print clean ============ */
@media print{
  body{background:var(--paper)!important;color:#203040!important}
  .panel,.modal,.track-card,.slip,.tl-item,.quote-card,.mv-card,.form-card,.login-card{background:var(--paper)!important;color:#203040!important;border-color:#E5DCC2!important;box-shadow:none!important}
  h1,h2,h3,h4,p,li,td,th,label,small,span,b,div{color:#203040!important}
  .tbl th{background:var(--paper)!important;color:#203040!important;border:1px solid #9AA7B8!important}
  .tbl td{border-color:#9AA7B8!important}
  .btn,.toolbar,.no-print,.sidebar,.p-topbar,.side-toggle,.menu-veil,#toast,.topbar,.navbar,.page-hero,footer,.site-footer,.chat-fab,.chat-panel,.clock-widget,#topBtn,#newsTicker,.ticker,.motto-ribbon,#emgBanner,.emg-banner{display:none!important}
  .main,.view-section{padding:0!important;margin:0!important}
}
/* page banners for new sections */
.page-banner{width:100%;height:230px;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:20px;display:block}
@media(max-width:640px){.page-banner{height:150px}}
/* portals: chatbot yes, clock no (would cover the sidebar footer) */
.portal-body #clockWidget{display:none!important}
/* ---------- Nav polish (batch 11): space, active state, mobile two-row ---------- */
.nav-links{gap:6px}
.nav-links a{position:relative;padding:10px 15px;letter-spacing:.01em;border-radius:var(--r-sm);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links a:not(.btn):hover{color:var(--green);background:var(--mint-soft)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;border-radius:var(--r-sm);background:var(--green);transform:scaleX(0);transform-origin:left;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.nav-links a.on{color:var(--green);background:#EAF0F6;font-weight:800}
.nav-links a.on::after{transform:scaleX(1)}
.nav-links .nav-cta{margin-left:10px}
@media(max-width:680px){
  .nav-links{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%;order:3;margin-left:0;background:var(--cream);border-radius:var(--r-md);padding:8px}
  .nav-links a{font-size:var(--fs-sm);padding:10px 8px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links a.on{background:#0B7A37;color:#FFFFFF;border-color:#0B7A37}
  .nav-links .nav-cta{margin-left:0;grid-column:1/-1}
}
/* ---------- Footer visit col + slim footer ---------- */
.foot-visit p{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px}
/* ---------- Birthday countdown bar ---------- */
#bdayCount .count-bar{background:var(--paper);color:#0E3B21;border-color:#C9A227}
#bdayCount .count-bar:hover{color:#0E3B21}
#bdayCount .count-num{background:#0B7A37;color:#FFFFFF}
/* ---------- Site search (batch 12) ---------- */
.search-veil{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(8,20,14,.55);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.search-veil.open{display:flex}
.search-box{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-3);width:min(520px,100%);padding:16px;border-top:5px solid #0B7A37}
.search-row{display:flex;gap:8px}
.search-row input{flex:1;font:inherit;font-size:var(--fs-sm);padding:11px 14px;border:2px solid #0B7A37;border-radius:var(--r-md);background:var(--paper);color:#203040}
.search-row input:focus{outline:none;border-color:#C9A227}
#searchX{border:none;background:var(--cream);color:#203040;font-size:var(--fs-md);line-height:1;width:44px;border-radius:var(--r-md);cursor:pointer;font-weight:800}
.search-res{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.search-res a{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);font-weight:700;color:#0E3B21}
.search-res a:hover{background:#0B7A37;color:#FFFFFF;border-color:#0B7A37}
/* ---------- Idle logout warning (batch 13) ---------- */
.idle-veil{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(8,20,14,.6);display:flex;align-items:center;justify-content:center;padding:18px}
.idle-box{background:var(--paper);border-radius:var(--r-lg);border-top:6px solid #C9A227;box-shadow:var(--sh-3);padding:26px 30px;text-align:center;max-width:380px}
.idle-box h2{margin-bottom:8px}
.idle-box p{color:var(--muted);margin-bottom:16px}
.idle-box #idleCount{color:#B31E35;font-size:var(--fs-md)}
/* ---------- Batch 14: brand, nav pills, footer, rails, lists ---------- */
.brand-name>span{font-size:var(--fs-xl);letter-spacing:.06em}
.nav-links a:not(.btn){border:2px solid transparent;border-radius:var(--r-pill)}
.nav-links a:not(.btn)::after{display:none}
.nav-links a.on{background:var(--green);color:#FFFFFF;border-color:var(--green);font-weight:800}
.nav-links a.on:hover{background:var(--green);color:#FFFFFF}
.foot-center{text-align:center}
.foot-contact-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.foot-contact-row .foot-line{display:inline-flex;gap:8px;align-items:center}
.foot-hours{margin:0}
/* swipe rails: programs, difference, stars */
.prog-grid,.feat-grid{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.prog-grid .prog,.feat-grid .feat{flex:0 0 min(300px,82vw);scroll-snap-align:start}
/* compact steps, same family size as star cards */
.steps{gap:14px}
.step{flex:0 0 196px;padding:16px 14px}
.step:not(:last-child)::after{right:-14px;top:38px;font-size:var(--fs-base)}
.step h3{font-size:var(--fs-sm)}
.step p{font-size:var(--fs-xs)}
/* stars side-by-side swipe */
#starsZone.stars-week,#totZone.stars-week{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
#starsZone .star-card,#totZone .star-card{flex:0 0 min(340px,88vw);scroll-snap-align:start;margin:0}
/* team rail (about, creche->p6 sorted) */
.team-grid{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.team-grid .team-card{flex:0 0 168px;scroll-snap-align:start}
/* news list: vertical compact rows */
.ne-list{flex-direction:column;overflow:visible;scroll-snap-type:none;cursor:default}
.ne-row{flex:none;flex-direction:row;align-items:center;gap:12px;padding:10px}
.ne-row:hover{transform:translateX(4px)}
.ne-row img{width:96px;height:74px;flex:0 0 96px;border-radius:var(--r-md)}
.ne-row h3{font-size:var(--fs-sm);margin:2px 0}
.ne-row p{font-size:var(--fs-xs);margin:0}
.ne-row .ne-meta{font-size:var(--fs-xs)}
.swipe-hint{text-align:center;color:var(--muted);font-weight:700;font-size:var(--fs-sm);margin:10px 0 0}
/* search autocomplete */
.search-sug{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.search-sug:empty{display:none}
.search-sug button{border:1px solid var(--line);background:var(--cream);border-radius:var(--r-pill);padding:6px 12px;font:inherit;font-size:var(--fs-xs);font-weight:700;color:#0E3B21;cursor:pointer}
.search-sug button:hover{background:#0B7A37;color:#FFFFFF;border-color:#0B7A37}
/* dark-mode: decorative layers never cover content; solid navbar */
body:not(.portal-body)::before{z-index:-1}
[data-theme="dark"] .navbar{background:#101B28}
[data-theme="dark"] .ne-row,[data-theme="dark"] .testi-card,[data-theme="dark"] .step,[data-theme="dark"] .feat,[data-theme="dark"] .prog{background:#101B28;border-color:#2A3A4E}
/* Batch 14: instant tap feedback everywhere */
.btn:active,.icon-btn:active,.pill-btn:active,.chip:active,a:active,button:active{transform:scale(.96);filter:brightness(.94)}
.nav-links a:not(.btn):active,.portal-card:active,.prog:active,.feat:active{transform:scale(.97)}

/* ---------- Batch 15: treasure-tag nav (not a pill) ---------- */
.nav-links a:not(.btn){border:1px solid #E5DCC2;border-bottom:3px solid #C9A227;border-radius:var(--r-md);
  background:var(--paper);color:#0E3B21;font-weight:800;padding:9px 15px 8px;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.nav-links a:not(.btn):hover{background:var(--paper);color:#0E5A2E;transform:translateY(-1px)}
.nav-links a:not(.btn)::after{display:none!important}
.nav-links a.on{background:var(--gold);color:#0E3B21!important;border-color:#B31E35;border-bottom-color:#0E3B21}
.nav-links a.on::before{content:"◆";display:inline-block;margin-right:7px;color:#0E5A2E;font-size:var(--fs-xs);vertical-align:2px}
/* treasure button: gold ingot for the big calls-to-action */
.btn-treasure{background:var(--gold);color:#0E3B21;border:1px solid #B31E35;border-bottom-width:3px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);filter:drop-shadow(0 6px 14px rgba(154,107,18,.35))}
.btn-treasure:hover{filter:drop-shadow(0 10px 20px rgba(154,107,18,.45)) brightness(1.05);transform:translateY(-2px)}

/* ---------- Batch 15: chat UI ---------- */
.chat-panel{border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;background:var(--white)}
.chat-head{background:var(--green-deep);color:#FFFFFF;padding:12px 14px;display:flex;gap:10px;align-items:center}
.chat-head .bot{background:var(--gold);color:#0E3B21;font-weight:800;border-radius:var(--r-md);width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.chat-msg{max-width:88%;padding:9px 12px;margin:8px 10px;font-size:var(--fs-sm);line-height:1.55}
.chat-msg.bot{background:var(--gold-soft);border:1px solid #E5DCC2;border-left:3px solid #C9A227;border-radius:var(--r-sm);color:var(--ink)}
.chat-msg.me{background:var(--green-deep);color:#FFFFFF;border-radius:var(--r-md);margin-left:auto}
.chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px}
.chat-chips button{border:1.5px solid #C9A227;color:#0E5A2E;background:var(--gold-soft);border-radius:var(--r-md);font-weight:700;font-size:var(--fs-xs);padding:6px 10px;cursor:pointer}
.chat-chips button:hover{background:#0E3B21;color:#C9A227;border-color:#0E3B21}
.chat-input{border-top:1px solid var(--line);background:var(--white)}
.chat-fab{background:var(--green-deep);border:2px solid #C9A227}

/* ---------- Batch 15: week strip + fee progress ---------- */
.week-strip{display:flex;gap:14px;align-items:center;background:var(--green-deep);color:#FFFFFF;border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-1);flex-wrap:wrap;border:1px solid #C9A227}
.week-strip .sec-tag{background:rgba(245,194,66,.16);color:#C9A227;white-space:nowrap}
.week-items{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.week-item{background:rgba(255,255,255,.08);border:1px solid rgba(245,194,66,.4);border-radius:var(--r-md);padding:8px 12px;color:#FFFFFF;display:flex;gap:8px;align-items:center;font-size:var(--fs-sm)}
.week-item:hover{background:rgba(245,194,66,.18)}
.week-item b{color:#C9A227;white-space:nowrap}
.week-note{width:100%;margin:2px 0 0;font-size:var(--fs-sm);color:#E5DCC2}
.week-none{opacity:.85;font-size:var(--fs-sm)}
.fee-progress{background:#EAF0F6;border-radius:var(--r-pill);height:14px;overflow:hidden;margin-top:8px}
.fee-progress i{display:block;height:100%;background:var(--green-deep);border-radius:var(--r-pill);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}

/* ---------- Batch 15: night-mode colour rules ---------- */
[data-theme="dark"]{--cream:#101B28;--white:#101B28;--ink:#EAF0F6;--muted:#9AA7B8;--line:#2A3A4E;
  --green:#0B7A37;--green-2:#0E3B21;--gold:#C9A227;--gold-soft:#1C2A24;--navy:#EAF0F6;
  --sun:#C9A227;--sun-soft:#1C2A24;--mint:#0B7A37;--mint-soft:#0E3B21;--sky:#9AA7B8;--sky-soft:#203040;
  --coral:#B31E35;--coral-soft:#1C2A24;--grape:#9AA7B8;--grape-soft:#203040}
[data-theme="dark"] body{background:var(--cream);color:var(--ink)}
[data-theme="dark"] body::before{background:var(--d-surface)}
[data-theme="dark"] .card,[data-theme="dark"] .hero-badge,[data-theme="dark"] .prog,[data-theme="dark"] .quote-card,
[data-theme="dark"] .gal,[data-theme="dark"] .news-card,[data-theme="dark"] .form-card,[data-theme="dark"] .contact-form,
[data-theme="dark"] .pill-date,[data-theme="dark"] .p-stat,[data-theme="dark"] .panel,[data-theme="dark"] .icon-btn,
[data-theme="dark"] .modal,[data-theme="dark"] .login-card,[data-theme="dark"] .p-card,[data-theme="dark"] .ne-card,
[data-theme="dark"] .pill-btn,[data-theme="dark"] .m-item,[data-theme="dark"] .pager-btn,[data-theme="dark"] .story-body,
[data-theme="dark"] .wa-card,[data-theme="dark"] .faq-item,[data-theme="dark"] .clock-widget,[data-theme="dark"] .hw-row,
[data-theme="dark"] .wish-bubble,[data-theme="dark"] .track-card,[data-theme="dark"] .principal-card,[data-theme="dark"] .spot-card,
[data-theme="dark"] .count-bar,[data-theme="dark"] .team-card,[data-theme="dark"] .mv-card,[data-theme="dark"] .star-card,
[data-theme="dark"] .yt-card,[data-theme="dark"] .demo-box,[data-theme="dark"] .side-card,[data-theme="dark"] .empty-state,
[data-theme="dark"] .filter-bar select,[data-theme="dark"] .filter-bar input,[data-theme="dark"] .chip,[data-theme="dark"] .badge,
[data-theme="dark"] .att-btns button,[data-theme="dark"] .float-field input,[data-theme="dark"] .treasure-box .box,
[data-theme="dark"] .staff-toggle button.on,[data-theme="dark"] .discount-banner.light .countdown div,
[data-theme="dark"] .search-box,[data-theme="dark"] .search-sug button,[data-theme="dark"] .slider-arrow
  {background:#101B28!important;border-color:#2A3A4E!important;color:#EAF0F6!important}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,
[data-theme="dark"] .toolbar input,[data-theme="dark"] .toolbar select,[data-theme="dark"] .chat-input input
  {background:#101B28!important;border-color:#2A3A4E!important;color:#EAF0F6!important}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder,[data-theme="dark"] .chat-input input::placeholder{color:#5C6B7A}
[data-theme="dark"] .btn-white{background:#203040!important;color:#EAF0F6!important;border-color:#2A3A4E!important}
[data-theme="dark"] .tbl td{border-color:#2A3A4E!important}
[data-theme="dark"] .notice{background:#203040!important;border-color:#2A3A4E!important;color:#EAF0F6}
[data-theme="dark"] .chat-panel{background:#101B28!important}
[data-theme="dark"] .chat-msg.bot{background:#203040!important;border-color:#2A3A4E!important;color:#EAF0F6!important}
[data-theme="dark"] .chat-chips button{background:#203040!important;color:#C9A227!important}
[data-theme="dark"] .chat-input{background:#101B28!important}
[data-theme="dark"] .nav-links a:not(.btn){background:var(--paper);color:#EAF0F6!important;border-color:#2A3A4E;border-bottom-color:#C9A227}
[data-theme="dark"] .nav-links a.on{background:var(--gold);color:#0E3B21!important}
[data-theme="dark"] .week-item{background:rgba(255,255,255,.06)}
[data-theme="dark"] .fee-progress{background:#101B28}
[data-theme="dark"] .sec-tag{background:#0E3B21;color:#0B7A37}
[data-theme="dark"] .prog .emoji{background:#203040;color:#C9A227}
[data-theme="dark"] a{color:#9AA7B8}
[data-theme="dark"] .btn-treasure{color:#0E3B21}

/* ---------- Batch 16: tap reliability ---------- */
#sideNav button,.side-nav button{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sideNav svg{pointer-events:none}
.btn,.icon-btn,.chip,.pill-btn{touch-action:manipulation}
.side-nav{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ---------- Batch 17: today row ---------- */
.tt-today td{background:rgba(27,77,62,.09)!important;font-weight:600}
.tt-today td:first-child{border-left:4px solid var(--sun,#C9A227)}
/* ---------- Batch 16: search polish ---------- */
.search-res a small{display:block;font-size:var(--fs-xs);color:var(--muted,#5C6B7A);font-weight:400}
.search-res a.sel{background:rgba(27,77,62,.1);outline:2px solid var(--green,#0E5A2E);border-radius:var(--r-sm)}
.search-res mark{background:var(--butter,#E5DCC2);color:inherit;border-radius:var(--r-sm);padding:0 2px}
.link-btn{background:none;border:0;color:var(--green,#0E5A2E);cursor:pointer;text-decoration:underline;font:inherit;padding:0}

/* ---- batch19: footer titles centered, even spacing (bodies keep their places) ---- */
.foot-brand .logo{display:block;text-align:center;margin-bottom:10px}
.foot-col h4{text-align:center;margin-bottom:10px}
.foot-main{gap:32px;margin-bottom:20px;align-items:start}
.foot-brand p{margin:0;line-height:1.6}
.foot-col p{margin:6px 0;line-height:1.6}
.foot-contact-row{margin-bottom:8px}
.foot-visit p{margin:0 0 10px}
.foot-bottom{padding:12px 0}
@media(max-width:860px){.foot-main{gap:24px;margin-bottom:18px}}
@media(max-width:560px){.foot-main{gap:20px;margin-bottom:16px}}
/* ---- batch19: news redesign ---- */
#newsFeatured{margin:4px 0 6px}
.news-featured{display:grid;grid-template-columns:1.05fr 1fr;background:var(--white);border:2px solid var(--green);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--sh-3);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.news-featured:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.news-featured>img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.nf-noimg{background:var(--green-deep);min-height:260px}
.nf-txt{padding:26px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.nf-txt h2{margin:2px 0;font-size:var(--fs-lg);line-height:1.25}
.nf-txt p{margin:0;color:var(--muted);line-height:1.6}
.nf-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.news-sec-head{display:flex;align-items:center;gap:12px;margin:28px 0 14px}
.news-sec-head h2{margin:0;font-size:var(--fs-md);white-space:nowrap}
.news-sec-head .rule{flex:1;height:3px;border-radius:var(--r-sm);background:var(--green-deep)}
.news-sec-head .count{background:var(--sun);color:#203040;font-size:var(--fs-xs);font-weight:800;padding:3px 12px;border-radius:var(--r-lg)}
.news-sec-head .count:empty{display:none}
.rail-head h2{border-left:5px solid var(--green);padding-left:10px}
.yt-card.is-video{outline:none;border:2px solid var(--green);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.yt-card.is-video .yt-thumb{border-radius:0}
.yt-thumb .play span{background:var(--sun);color:var(--green);border:2px solid #FFFFFF;box-shadow:var(--sh-2)}
.yt-thumb .dur{background:var(--green)}
.yt-card.vid-soon{border:2px dashed var(--green);background:var(--gold-soft)}
.soon-thumb{background:var(--green-deep);aspect-ratio:16/9;display:block}
[data-theme="dark"] .news-featured{background:#101B28;border-color:#0B7A37}
[data-theme="dark"] .yt-card.vid-soon{background:#101B28}
@media(max-width:700px){.news-featured{grid-template-columns:1fr}.news-featured>img,.nf-noimg{min-height:200px}.nf-txt{padding:20px}}

/* ---- batch20: portal top nav, same look as landing ---- */
.portal-layout{display:block;min-height:100vh}
.nav-links button[data-view]{background:none;border:none;font:inherit;font-weight:700;font-size:var(--fs-sm);color:var(--ink);padding:10px 14px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;position:relative;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links button[data-view]:hover{background:var(--mint-soft);color:#0E5A2E}
.nav-links button[data-view]::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:var(--r-sm);background:#C9A227;transform:scaleX(0);transform-origin:left;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.nav-links button[data-view]:hover::after{transform:scaleX(1)}
.nav-links button[data-view].on{background:var(--sun);color:#203040}
.nav-links button[data-view].on::after{transform:scaleX(1)}
.nav-links button[data-view] .badge{margin-left:6px}
.portal-user{display:inline-flex;gap:8px;align-items:center;font-weight:700}
.portal-user .avatar{width:26px;height:26px;font-size:var(--fs-xs)}
.portal-user small{font-weight:400;opacity:.8}
.topbar button.portal-link{border:none;cursor:pointer;font:inherit}
.tb-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
[data-theme="dark"] .nav-links button[data-view]{color:var(--ink)}
[data-theme="dark"] .nav-links button[data-view]:hover{background:#1C2A24;color:var(--sun)}
[data-theme="dark"] .nav-links button[data-view].on{background:var(--sun);color:#203040}

/* ---- batch22: paid admission form replica ---- */
.adm-replica{background:var(--paper);color:#101B28;border:3px double #0E5A2E;border-radius:var(--r-sm);padding:26px 26px 20px;max-width:820px;margin:0 auto;font-family:var(--font-body)}
.adm-head{display:flex;gap:16px;align-items:center;border-bottom:3px solid #0E5A2E;padding-bottom:12px;margin-bottom:12px}
.adm-crest{width:74px;height:74px;flex:0 0 74px;border:2px solid #0E5A2E;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-weight:800;color:#0E5A2E;text-align:center;font-size:var(--fs-xs);line-height:1.25;padding:6px}
.adm-title{text-align:center;flex:1}
.adm-title h2{margin:0;letter-spacing:1px;font-size:var(--fs-md)}
.adm-title p{margin:2px 0;font-size:var(--fs-xs)}
.adm-formname{text-align:center;background:#0E5A2E;color:#FFFFFF;font-weight:800;letter-spacing:1px;padding:8px;border-radius:var(--r-sm);margin:12px 0}
.adm-pass{width:120px;height:140px;border:2px solid #203040;float:right;margin:0 0 10px 12px;display:flex;align-items:center;justify-content:center;color:#5C6B7A;font-size:var(--fs-xs);overflow:hidden}
.adm-pass img{width:100%;height:100%;object-fit:cover}
.adm-instr{font-size:var(--fs-xs);background:#EAF0F6;border:1px solid #E5DCC2;padding:8px 10px;border-radius:var(--r-sm);margin-bottom:12px}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;font-size:var(--fs-sm)}
.adm-grid .full{grid-column:1/-1}
.adm-f{border-bottom:1px dotted #5C6B7A;padding:2px 0;min-height:1.3em}
.adm-f b{font-size:var(--fs-xs);color:#203040}
.adm-sec{font-weight:800;text-align:center;letter-spacing:1px;margin:16px 0 8px;text-decoration:underline}
.adm-sig{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;font-size:var(--fs-sm)}
.adm-stamp{display:inline-block;border:3px solid #0B7A37;color:#0B7A37;font-weight:800;letter-spacing:2px;padding:4px 18px;transform:rotate(-6deg);border-radius:var(--r-sm);margin-top:10px}
.adm-stamp.unpaid{border-color:#B31E35;color:#B31E35}
/* ============ BATCH 25 (2026-09-20): glass login + portal nav tiles + logout by theme ============ */
/* ---- true glassmorphism: login & registration card + birthday side card ---- */
.auth-card,.side-card{background:rgba(255,255,255,.58)!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.65)!important;box-shadow:var(--sh-3)}
[data-theme="dark"] .auth-card,[data-theme="dark"] .side-card{background:rgba(8,17,12,.62)!important;border-color:rgba(255,255,255,.14)!important}
/* ---- portal nav: four buttons side by side, framed tiles (not pills) ---- */
.navbar .container{flex-wrap:wrap}
.nav-cta-row{margin-left:auto}
#sideNav{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px;overflow:visible}
#sideNav button[data-view]{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 6px;border-radius:var(--r-md);border:1.5px solid #E5DCC2;background:var(--paper);color:#0E3B21;font-weight:800;font-size:var(--fs-sm);box-shadow:var(--sh-1);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sideNav button[data-view]::after{left:0;right:0;bottom:0;height:3px;border-radius:var(--r-sm)}
#sideNav button[data-view]:hover{transform:translateY(-2px);border-color:#0B7A37;background:var(--paper);color:#0E5A2E;box-shadow:var(--sh-2)}
#sideNav button[data-view].on{background:var(--green-deep);border-color:#0E5A2E;color:#FFFFFF;box-shadow:var(--sh-2)}
#sideNav button[data-view].on::after{transform:scaleX(1)}
[data-theme="dark"] #sideNav button[data-view]{background:var(--paper);border-color:#203040;color:#EAF0F6}
[data-theme="dark"] #sideNav button[data-view]:hover{border-color:#0B7A37;background:#1C2A24;color:#FFFFFF}
[data-theme="dark"] #sideNav button[data-view].on{background:var(--paper);border-color:#0B7A37;color:#FFFFFF}
@media(max-width:760px){#sideNav{gap:6px}#sideNav button[data-view]{padding:10px 4px;font-size:var(--fs-xs);border-radius:var(--r-md)}}
/* ============ BATCH 27 (2026-09-20): STRICT COLOR SYSTEM — every surface from tokens ============
   THE RULE (day & night use the SAME tokens; night only remaps them):
   • Brand greens : --brand #0B7A37 • --brand-dark #0E5A2E • --brand-deep #0E3B21 • --green
   • Butter/gold  : --butter-soft #F8F4E4 • --butter #E5DCC2 • --butter-deep #C9A227 • --gold #C9A227
   • Accents      : --sun --sun-soft --coral --coral-soft --sky --sky-soft --mint --mint-soft --grape --grape-soft
   • Surfaces     : --white --cream --line --ink --muted  (auto-remapped at [data-theme="dark"])
   No component may hardcode a light background — use the tokens so night mode always follows. */
/* ---- day polish ---- */
::placeholder{color:var(--muted);opacity:1}
:focus-visible{outline:3px solid rgba(201,162,39,.5);outline-offset:2px}
::selection{background:#C9A227;color:#FFFFFF}
.mv-card,.team-card,.star-card{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.mv-card:hover,.team-card:hover,.star-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.empty{border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--white)}
/* ---- night completion (same tokens, remapped) ---- */
[data-theme="dark"] ::placeholder{color:#9AA7B8}
[data-theme="dark"] ::selection{background:#C9A227;color:#101B28}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A4E;border:2px solid transparent;background-clip:content-box}
[data-theme="dark"] .empty{background:#101B28}
/* ---- receipt: clean print sheet (PAID stamp + details only) ---- */
@media print{
  body[data-page="receipt"]{background:var(--paper)!important}
  body[data-page="receipt"] #siteLoader,body[data-page="receipt"] .topbar,body[data-page="receipt"] .navbar,
  body[data-page="receipt"] .page-hero,body[data-page="receipt"] #siteFooter,body[data-page="receipt"] #toast,
  body[data-page="receipt"] .no-print{display:none!important}
  body[data-page="receipt"] .track-card,body[data-page="receipt"] .panel{box-shadow:none!important;border:1px solid #E5DCC2}
}
/* ============ BATCH 29 (2026-09-20): motion kindness + heading ornament ============ */
/* ---- reduced motion: everything goes still; ticker becomes swipeable ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:150ms;scroll-behavior:auto!important}
  .ticker-inner{animation:none}
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ---- section headings: butter-to-green ribbon accent (strict palette) ---- */
.sec-head h2{position:relative;padding-left:16px}
.sec-head h2::before{content:"";position:absolute;left:0;top:54%;transform:translateY(-50%);width:6px;height:.72em;border-radius:var(--r-sm);background:var(--green-deep)}
[data-theme="dark"] .sec-head h2::before{background:var(--gold)}
/* ============ BATCH 30 (2026-09-20): button system, login edge, topBtn ring, hc night, text size ============ */
/* ---- one button language: same radius family, same focus, same press ---- */
.btn{border-radius:var(--r-md)}
.btn:focus-visible{outline:3px solid rgba(201,162,39,.55);outline-offset:2px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-mint,.nav-links .btn{background:var(--green-deep);border:2px solid var(--butter-deep,#C9A227);color:#FFFFFF;box-shadow:var(--sh-2)}
.btn-mint:hover,.nav-links .btn:hover{background:var(--green-deep);box-shadow:var(--sh-2)}
.btn-white{background:var(--white);border:1.5px solid var(--gold,#C9A227);color:#0E3B21}
[data-theme="dark"] .btn-white,[data-theme="dark-hc"] .btn-white{background:#2A3A4E;color:var(--ink);border-color:#2A3A4E}
/* ---- landing Login/Register: same right edge as the nav links row ---- */
@media(min-width:761px){
  .navbar .container{align-items:center}
  .nav-links .btn{margin-left:14px;margin-right:2px}
  .nav-cta-row{margin-left:10px}
}
/* ---- mobile: login button spans the row edge-to-edge with the menu grid ---- */
@media(max-width:760px){
  .nav-links .btn{width:100%;margin:0;border-radius:var(--r-md)}
  .nav-links .btn::after{display:none}
}
/* ---- back-to-top: gold progress ring fills as you read ---- */
#topBtn{position:relative;background:var(--green-deep)}
#topBtn::before{display:none}
/* ---- high-contrast night: deeper blacks, brighter ink, bolder lines ---- */
[data-theme="dark-hc"]{--cream:#101B28;--white:#101B28;--ink:#FFFFFF;--muted:#9AA7B8;--line:#2A3A4E}
[data-theme="dark-hc"] body{background:#101B28}
[data-theme="dark-hc"] .navbar{background:rgba(8,13,20,.98)}
[data-theme="dark-hc"] .panel,[data-theme="dark-hc"] .track-card,[data-theme="dark-hc"] .notice{background:#101B28!important;border-color:#2A3A4E!important}
[data-theme="dark-hc"] ::placeholder{color:#9AA7B8!important}
[data-theme="dark-hc"] .theme-btn{background:#101B28;color:#E5DCC2;border-color:#E5DCC2}
/* ---- text size preset: S / A / L ---- */
#textSizeBtns{display:inline-flex;gap:6px;align-items:center}
#textSizeBtns button{background:var(--white);border:1.5px solid var(--line);color:var(--ink);border-radius:var(--r-sm);font-weight:800;cursor:pointer;padding:2px 9px;line-height:1.4}
#textSizeBtns button.on{background:var(--gold,#C9A227);border-color:var(--gold,#C9A227);color:#203040}
html[data-fontsize="s"]{font-size:var(--fs-sm)}
html[data-fontsize="l"]{font-size:var(--fs-base)}
/* ============ BATCH 31 (2026-09-20): greeting strip + new pages polish ============ */
.greet-strip{display:flex;gap:8px 22px;justify-content:center;align-items:baseline;flex-wrap:wrap;margin-top:24px;font-family:var(--font-head);text-align:center}
.greet-strip .greet{font-weight:800;font-size:var(--fs-base);color:var(--mint,#0B7A37);letter-spacing:.02em}
.greet-strip .greet-en{color:#0E3B21}
[data-theme="dark"] .greet-strip .greet{color:#0B7A37}
[data-theme="dark"] .greet-strip .greet-en{color:#EAF0F6}
.lyric-card{max-width:680px;margin:0 auto 16px;padding:22px 24px}
.lyric-card p{white-space:pre-line;line-height:1.9}
.fee-tbl td:first-child,.fee-tbl th:first-child{text-align:left;font-weight:800}
/* ============ BATCH 32 (2026-09-20): word of the week + absent notify ============ */
.wow-card{max-width:680px;margin:20px auto 0;padding:20px 22px;background:var(--sun-soft);border:1.5px solid var(--gold,#C9A227);border-radius:var(--r-lg);text-align:center;box-shadow:var(--sh-1)}
.wow-card .sec-tag{display:inline-block;margin-bottom:6px}
.wow-word{font-family:var(--font-head);font-weight:800;font-size:var(--fs-xl);color:#0E3B21;letter-spacing:.02em}
.wow-mean,.wow-ex{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink)}
[data-theme="dark"] .wow-word{color:#C9A227}
#regAbsent .notice{margin-bottom:8px}
#regAbsent h3{font-family:var(--font-head)}
/* ============ BATCH 33 (2026-09-20): resumption chip + testimonial spotlight ============ */
#resumeChip:empty{display:none}
.resume-chip{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--white);border:1.5px solid var(--gold,#C9A227);border-radius:var(--r-pill);padding:9px 18px;font-weight:700;font-size:var(--fs-sm);color:var(--ink);box-shadow:var(--sh-1)}
.rc-dot{width:9px;height:9px;border-radius:var(--r-pill);background:var(--coral,#B31E35);flex:none}
[data-theme="dark"] .resume-chip{background:#101B28;border-color:#C9A227;color:#EAF0F6}
#tmSpot:empty{display:none}
.tm-spot{max-width:680px;margin:22px auto 0;padding:24px 26px;background:var(--mint-soft);border-radius:var(--r-lg);text-align:center;position:relative;box-shadow:var(--sh-1)}
.tms-quote{font-family:var(--font-head);font-size:var(--fs-2xl);line-height:.6;color:var(--gold,#C9A227);margin-bottom:6px}
.tm-spot p{font-size:var(--fs-base);line-height:1.7;color:var(--ink);margin:0 0 10px;font-style:italic}
.tms-stars{color:#C9A227;letter-spacing:3px;margin-bottom:6px}
[data-theme="dark"] .tms-stars{color:#C9A227}
.tms-who b{font-family:var(--font-head)}
.tms-who small{color:var(--muted)}
.tms-link{display:inline-block;margin-top:8px;font-weight:800;color:var(--green,#0E5A2E);text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] .tms-link{color:#0B7A37}
/* ============ BATCH 34 (2026-09-20): portal sidebar navigation (all items, never a hamburger) ============ */
@media(min-width:1100px){
  .portal-layout{display:grid;grid-template-columns:266px minmax(0,1fr);grid-template-areas:"side top" "side main";align-items:start}
  .portal-layout>.topbar{grid-area:top;position:sticky;top:0;z-index:var(--z-nav)}
  .portal-layout>main.main{grid-area:main;min-width:0}
  .portal-layout>.navbar{grid-area:side;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--green-deep);border-right:2px solid var(--gold,#C9A227)}
  .portal-layout>.navbar .container{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:18px 14px}
  .portal-layout>.navbar .logo{align-self:center}
  .portal-layout>.navbar .brand-name{text-align:center}
  .portal-layout>.navbar .brand-name>span{color:#FFFFFF}
  .portal-layout>.navbar .brand-name small{color:#E5DCC2}
  #sideNav{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;margin:4px 0;overflow:visible}
  #sideNav button[data-view]{justify-content:flex-start;width:100%;padding:11px 12px;border:0;border-radius:var(--r-md);background:transparent;color:#EAF0F6;font-weight:700;font-size:var(--fs-sm);box-shadow:none;text-align:left}
  #sideNav button[data-view]::after{display:none}
  #sideNav button[data-view]:hover{background:rgba(255,255,255,.10);color:#FFFFFF;transform:none;box-shadow:none}
  #sideNav button[data-view].on{background:var(--paper);color:var(--green-deep);box-shadow:var(--sh-1)}
  .portal-layout .nav-cta-row{display:flex;gap:8px;justify-content:center;margin-left:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
  .portal-layout .theme-btn{background:rgba(255,255,255,.08);border-color:rgba(247,233,103,.5);color:#E5DCC2}
  .portal-layout .nav-logout{background:rgba(229,72,93,.16);border-color:#B31E35;color:#B31E35}
  .portal-layout .nav-logout:hover{background:#B31E35;color:#FFFFFF;transform:none}
}
@media(max-width:1099px){
  .portal-layout{display:flex;flex-direction:column}
  #sideNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} /* links stay visible — no hamburger, ever */
}
/* Portal-only sidebar collapse. Public pages use the flat header below. */
@media(min-width:1100px){
  #sideCollapse{align-self:center;background:rgba(255,255,255,.08);border:1px solid rgba(247,233,103,.4);color:#E5DCC2;width:34px;height:34px;border-radius:var(--r-pill);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
  #sideCollapse:hover{background:rgba(247,233,103,.18)}
  #sideCollapse.flip{transform:rotate(180deg)}
  body.side-slim .portal-layout{grid-template-columns:76px minmax(0,1fr)}
  body.side-slim .portal-layout>.navbar .brand-name{display:none}
  body.side-slim .portal-layout>.navbar .logo .mark-img{width:44px;height:44px}
  body.side-slim #sideNav button[data-view]{justify-content:center;font-size:0;gap:0;padding:12px 0}
  body.side-slim #sideNav button[data-view] svg{margin:0}
  body.side-slim #sideNav button[data-view] .badge{display:none}
}
/* ============ BATCH 37 (2026-09-20): quick actions, reading mode, tour ============ */
/* ---- admin rail quick actions ---- */
.qa-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:2px 0 8px}
.qa-btn{border:1.5px solid rgba(247,233,103,.45);background:rgba(255,255,255,.08);color:#E5DCC2;font:inherit;font-weight:800;font-size:var(--fs-xs);padding:8px 2px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;text-align:center}
.qa-btn:hover{background:rgba(247,233,103,.16)}
.qa-mint{border-color:rgba(123,216,159,.5);color:#0B7A37}
.qa-sky{border-color:rgba(122,180,255,.45);color:#EAF0F6}
body.side-slim .qa-strip{grid-template-columns:1fr}
body.side-slim .qa-btn{font-size:0;padding:8px 0}
/* ---- reading mode (story page) ---- */
#readBtn{position:fixed;right:16px;bottom:18px;z-index:var(--z-dropdown);width:44px;height:44px;border-radius:var(--r-pill);border:1.5px solid var(--gold,#C9A227);background:var(--white);color:#0E3B21;font-size:var(--fs-base);cursor:pointer;box-shadow:var(--sh-2)}
#readBtn.on{background:#0B7A37;color:#FFFFFF;border-color:#C9A227}
[data-theme="dark"] #readBtn{background:#101B28;color:#C9A227}
body.reading{display:block}
body.reading .topbar,body.reading .navbar,body.reading #siteFooter,body.reading .page-hero,body.reading #resumeChip,body.reading #tmSpot,body.reading .motto-ribbon,body.reading #dvToast{display:none!important}
body.reading .container{max-width:720px}
body.reading section{padding:26px 0}
body.reading .story-body p{font-size:var(--fs-base);line-height:2}
/* ---- teacher first-login tour ---- */
#tourOv{position:fixed;inset:0;background:rgba(3,10,6,.55);z-index:var(--z-modal)}
#tourCard{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);width:min(430px,92vw);background:var(--white);border:1.5px solid var(--gold,#C9A227);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:18px 20px;z-index:var(--z-modal)}
#tourCard small{color:var(--muted);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-xs)}
#tourCard b{display:block;font-family:var(--font-head);font-size:var(--fs-base);margin:4px 0 6px;color:var(--ink)}
#tourCard p{margin:0 0 12px;font-size:var(--fs-sm);color:var(--ink);line-height:1.6}
#tourCard .tr-actions{display:flex;gap:8px;justify-content:flex-end}
.tour-hl{outline:3px solid #E5DCC2!important;outline-offset:2px;border-radius:var(--r-md)}
[data-theme="dark"] #tourCard{background:#101B28}
/* ============ BATCH 40 (2026-09-20): staff grid + teacher profiles + former staff ============ */
.staff-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.staff-grid3 .team-card{margin:0}
.staff-click{cursor:pointer;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.staff-click:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
@media(max-width:900px){.staff-grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.staff-grid3{grid-template-columns:1fr}}
[data-theme="dark"] .staff-click:hover{box-shadow:var(--sh-2)}
/* ============ BATCH 41 (2026-09-21): accreditation strip, staff collage, coc ============ */
.foot-partners{border-top:1px solid var(--mint-border,#E5DCC2);padding:12px 0 10px}
.acc-cap{text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.acc-logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.acc-logos img{height:50px;width:auto;max-width:150px;object-fit:contain;background:var(--paper);border-radius:var(--r-md);padding:5px 9px;border:1px solid var(--mint-border,#E5DCC2)}
.acc-note{text-align:center;font-size:var(--fs-xs);color:var(--muted);margin:8px 0 0}
.staff-collage{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:4px 0 16px}
.sc-dot{display:inline-flex;width:46px;height:46px;border-radius:var(--r-pill);background:var(--green-deep);color:#FFFFFF;font-weight:800;font-size:var(--fs-xs);align-items:center;justify-content:center;border:2px solid var(--mint-border,#E5DCC2)}
[data-theme="dark"] .acc-logos img{border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .sc-dot{border-color:rgba(255,255,255,.15)}
/* ============ BATCH 43 (2026-09-21): Treasure Typography + Treasure FX + brand motif ============ */
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:optional}
:root{
  --font-head:"Clash Display",sans-serif;
  --font-body:"General Sans",sans-serif;
  --font-mono:var(--font-body);
  --font-hand:var(--font-body);
    --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 2 L26 14 L14 26 L2 14 Z' fill='none' stroke='%23C9A227' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='%230E9A46'/%3E%3C/svg%3E");
}
.sec-tag{background-image:var(--motif);background-repeat:no-repeat;background-position:96% center;background-size:13px 13px;padding-right:30px}
.btn{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:var(--r-pill);background:rgba(255,255,255,.5);transform:scale(0);animation:none;pointer-events:none}

.seg{position:relative;display:flex;gap:2px;border:1.5px solid var(--mint-border,#E5DCC2);border-radius:var(--r-md);padding:4px;background:var(--white);width:max-content;max-width:100%;overflow-x:auto;margin:8px auto 20px}
.seg-tab{border:0;background:transparent;padding:9px 16px;border-radius:var(--r-md);font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;position:relative;z-index:var(--z-nav);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.seg-tab.on{color:#0B7A37}
.seg-ink{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:var(--r-md);background:var(--mint-soft);transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);z-index:0}
[data-seg-pane]{display:none}
[data-seg-pane].show{display:block;animation:none}

.tilt{transform-style:preserve-3d;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);will-change:transform}
.stag-pre{opacity:0;transform:translateY(14px)}
.stag-in{opacity:1;transform:none;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.spy-bar{position:sticky;top:8px;z-index:var(--z-dropdown);display:flex;gap:4px;justify-content:center;background:var(--white);border:1.5px solid var(--mint-border,#E5DCC2);border-radius:var(--r-md);padding:6px;margin:16px 0 4px;overflow-x:auto;box-shadow:var(--sh-2)}
.spy-bar a{white-space:nowrap;padding:8px 14px;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-sm);color:var(--muted);text-decoration:none;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.spy-bar a:hover{color:#0B7A37}
.spy-bar a.on{color:#0B7A37;background:var(--mint-soft)}
.acc-logos a{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);display:inline-block}
.acc-logos a:hover{transform:translateY(-3px)}
[data-theme="dark"] .spy-bar{box-shadow:var(--sh-2)}
@media (prefers-reduced-motion: reduce){
  .tilt,.acc-logos a,.seg-ink{transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
  .grad-pane.show{animation:none}
  .stag-pre{opacity:1;transform:none}
}
/* ============ BATCH 44 (2026-09-21): launch polish + compare tables ============ */
.page-hero h1{font-size:var(--fs-2xl);letter-spacing:-.03em;line-height:1.06}
.page-hero p{max-width:660px}
h1,h2{letter-spacing:-.02em}
.cmp-wrap{overflow-x:auto;border:1.5px solid var(--mint-border,#E5DCC2);border-radius:var(--r-md);background:var(--white)}
.cmp-wrap .tbl td,.cmp-wrap .tbl th{white-space:nowrap}

/* ============ BATCH 46: faithful code-of-conduct paper ============ */
.coc-paper ol.coc-list{font-size:var(--fs-sm);line-height:1.5}
.coc-paper ol.coc-list li::marker{font-weight:800;color:#0B7A37}
/* ============ BATCH 47 (2026-09-22): trio type system — Gidole body, Sabon/Garamond headings, Northwell/Kristi signature accents ============ */
.sig{font-family:var(--font-mono);font-style:italic;font-size:var(--fs-base);color:#0B7A37;font-weight:400;letter-spacing:.02em}

/* ============ BATCH 48 (2026-09-22): ITF type system + studio-grade polish ============ */
.sec-tag{font-family:var(--font-mono);letter-spacing:.16em}
h1,h2,h3{text-wrap:balance}
.sec-head{max-width:70ch}
body{line-height:1.55}
#siteLoader img{image-rendering:auto}


/* ==========================================================================
   Landing + navigation polish — owner review, 24 September 2026.
   One uniform box for every navigation item (Menu included), a smaller
   search / night-switch, a bigger crest, the stats travelling with the
   hero image as one group, shorter program cards, taller Difference
   cards, and the news date filter dressed like its sibling filter.
   ========================================================================== */
.nav-links a.nl{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:106px;height:44px;padding:0 12px;border-radius:var(--r-md);box-sizing:border-box}
.nav-links a.nl svg{width:16px;height:16px;flex:none}
.nav-links a.nl span{font-size:var(--fs-sm);line-height:1}
.nav-links a.nl-cta{background:var(--mint-soft);color:#0E5A2E;font-weight:800}
.nav-links a.nl-cta::after{display:none}
.nav-links a.nl-cta:hover{background:#EAF0F6}
.nav-links .nav-burger{min-width:106px;height:44px;border-radius:var(--r-md)}
.theme-btn{width:34px;height:34px}
.theme-btn svg{width:15px;height:15px}
.mark-img{width:60px;height:60px}
.hero-art{display:flex;flex-direction:column;gap:16px}
.hero-art .stats-band{margin:0;border-radius:var(--r-lg);padding:24px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px;box-shadow:var(--sh-3)}
/* This compact band has direct .stat children, not the older .container;
   suppress the legacy paper veil so its white/gold figures retain contrast. */
.hero-art .stats-band::before{display:none}
.hero-art .stat{position:relative;text-align:center}
.step .num.num-date{width:auto;min-width:44px;padding:0 12px;font-size:var(--fs-sm);border-radius:var(--r-pill)}
.prog-grid .prog{padding:0 0 16px}
.prog-grid .prog h3{margin:12px 16px 4px}
.prog-grid .prog .ages{margin:0 16px}
.prog-grid .prog ul{margin:10px 16px 12px}
.prog-grid .prog .btn{margin:0 16px}
.feat-grid .feat{padding:30px 26px;min-height:300px;display:flex;flex-direction:column}
.vid-grid .gal{display:flex;flex-direction:column}
.vid-grid .video-shell{flex:1;display:flex;flex-direction:column;justify-content:center}
.vid-grid .video-shell iframe{width:100%}
.filter-bar input[type="date"]{font-family:var(--font-body);padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink)}
@media (max-width:640px){
  .hero-art .stats-band{grid-template-columns:repeat(2,1fr);padding:18px}
  .nav-links a.nl,.nav-links .nav-burger{min-width:0;height:40px;padding:0 10px}
}

/* ==========================================================================
   UI/UX SIMPLIFICATION — flat public system (28 September 2026)
   ========================================================================== */

/* Type roles: one repeatable scale, Clash Display + General Sans only. */
body{font-family:var(--font-body);font-size:var(--fs-base);background:var(--cream);color:var(--ink)}
h1{font-size:var(--fs-2xl)}
h2,.sec-head h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p,li,input,select,textarea,button{font-size:var(--fs-base)}
small,.sub,figcaption,.ne-meta,.foot-bottom{font-size:var(--fs-sm)}
.sec-tag,.badge,.chip,.tag-new{font-size:var(--fs-xs)}
body:not(.portal-body)::before,body:not(.portal-body)::after{display:none}
body:not(.portal-body) section{padding:var(--s7) 0}

/* Flat header: a single layout plane, fixed 44px actions and explicit gaps. */
body:not(.portal-body) .navbar{
  position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-1);backdrop-filter:blur(10px);
}
body:not(.portal-body) .navbar .nav-row{
  width:min(1180px,94%);min-height:72px;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);padding:10px 0;
}
.flat-brand{display:flex;align-items:center;gap:10px;min-width:218px;color:var(--ink);text-decoration:none}
.flat-brand .logo-badge{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line);box-shadow:none;object-fit:cover}
.flat-brand span{display:flex;flex-direction:column;line-height:1.15}
.flat-brand strong{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:600}
.flat-brand small{color:var(--muted);font-size:var(--fs-xs);margin-top:3px}
.site-nav{display:flex;align-items:center;justify-content:center;min-width:0;flex:1}
#mainNav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.5vw,22px)}
.nav-link{position:relative;color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap;padding:10px 0;border-radius:0}
.nav-link:hover,.nav-link.on{color:var(--green)}
.nav-link.on::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--gold)}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none;margin:0}
.icon-action,.theme-btn{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;padding:0;
  border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink);
  box-shadow:none;cursor:pointer;
}
.icon-action:hover,.theme-btn:hover{background:var(--cream);color:var(--green);transform:none;box-shadow:none}
.nav-actions .nav-apply{min-height:44px;padding:10px 18px}

/* Three button roles. Legacy class names resolve to these roles without
   changing form behaviour or portal event handlers. */
body:not(.portal-body) .btn{border-radius:var(--r-md);box-shadow:none;background-image:none!important;font-family:var(--font-body);font-weight:700;transform:none}
body:not(.portal-body) .btn:hover{transform:none;filter:none;box-shadow:none}
body:not(.portal-body) .btn-primary,
body:not(.portal-body) .btn-mint,
body:not(.portal-body) .btn-treasure,
body:not(.portal-body) .btn-sun,
body:not(.portal-body) .btn-coral{background:var(--green);border-color:var(--green);color:#FFFFFF}
body:not(.portal-body) .btn-primary:hover,
body:not(.portal-body) .btn-mint:hover,
body:not(.portal-body) .btn-treasure:hover,
body:not(.portal-body) .btn-sun:hover,
body:not(.portal-body) .btn-coral:hover{background:var(--green-bright);border-color:var(--green-bright)}
body:not(.portal-body) .btn-secondary,
body:not(.portal-body) .btn-white,
body:not(.portal-body) .btn-sky,
body:not(.portal-body) .btn-grape{background:transparent;border:1.5px solid var(--green);color:var(--green)}
body:not(.portal-body) .btn-secondary:hover,
body:not(.portal-body) .btn-white:hover,
body:not(.portal-body) .btn-sky:hover,
body:not(.portal-body) .btn-grape:hover{background:var(--gold-soft)}
body:not(.portal-body) .btn-ghost{background:transparent;border-color:transparent;color:var(--green);padding-inline:4px}

/* Two badge roles: neutral by default, gold for new/time-sensitive labels. */
body:not(.portal-body) .badge,body:not(.portal-body) .chip,
body:not(.portal-body) .b-sky,body:not(.portal-body) .b-mint,body:not(.portal-body) .b-grape{
  background:var(--cream)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
}
body:not(.portal-body) .b-sun,body:not(.portal-body) .b-coral,
body:not(.portal-body) .tag-new,body:not(.portal-body) .badge-accent{
  background:var(--gold-soft)!important;color:var(--green-deep)!important;border:1px solid var(--gold)!important;
}
.sec-tag{background:none!important;color:var(--green);padding:0;border:0}

/* One card language: one border, four radii total, three shadow tokens. */
body:not(.portal-body) .prog,body:not(.portal-body) .feat,body:not(.portal-body) .step,
body:not(.portal-body) .mv-card,body:not(.portal-body) .panel,body:not(.portal-body) .ne-card,
body:not(.portal-body) .gal,body:not(.portal-body) .testi-card,body:not(.portal-body) .principal-card,
body:not(.portal-body) .promo-card,body:not(.portal-body) .star-card,body:not(.portal-body) .track-card{
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);background:var(--paper);
}
body:not(.portal-body) .prog:hover,body:not(.portal-body) .feat:hover,
body:not(.portal-body) .ne-card:hover,body:not(.portal-body) .testi-card:hover{
  transform:none;box-shadow:var(--sh-2);
}
.page-hero,.cta-band{background:var(--green-deep);background-image:none;border-radius:0;box-shadow:none}
.page-hero h1,.cta-band h2{color:#FFFFFF}
.site-footer{background:var(--green-deep);background-image:none}

/* Calm homepage rhythm: eight content sections, alternating flat surfaces. */
body[data-page="home"] .hero,body[data-page="home"] #programs,
body[data-page="home"] #news,body[data-page="home"] #testimonials{background:var(--paper)}
body[data-page="home"] #aboutPrev,body[data-page="home"] #why,
body[data-page="home"] #gallery,body[data-page="home"] #finalCta{background:var(--cream)}
body[data-page="home"] .hero{padding:var(--s6) 0}
body[data-page="home"] .hero-badge{border:0;padding:0;color:var(--green);background:none;font-size:var(--fs-xs)}
.hero-admission-strip{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line);display:grid;gap:8px}
.hero-admission-strip>strong{font-size:var(--fs-sm);color:var(--green)}
.hero-admission-strip ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:var(--fs-sm)}
.hero-admission-strip li{font-size:inherit}
.hero-admission-strip li b{color:var(--green)}
.bank-line{font-size:var(--fs-xs);color:var(--muted)}
.about-copy .principal-card{margin-top:var(--s3);padding:var(--s3);border-left:3px solid var(--gold)}
.about-copy .principal-card p{font-size:var(--fs-base)}
.feat-grid{grid-template-columns:repeat(3,1fr)}
.feat-grid .feat{min-height:0;padding:var(--s3)}
.feature-icon{width:42px;height:42px;padding:9px;margin-bottom:var(--s2);color:var(--green);background:var(--gold-soft);border-radius:var(--r-md)}
body[data-page="home"] .gal-grid{grid-template-columns:repeat(4,1fr)}
body[data-page="home"] .testi-rail{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);overflow:visible}
body[data-page="home"] .testi-card{min-width:0}
.final-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s5);background:var(--green-deep);color:#FFFFFF;border-radius:var(--r-md)}
.final-cta h2{color:#FFFFFF}.final-cta p{color:#E5DCC2;max-width:620px;margin-top:8px}
.final-cta .cta-btns{flex:none}.final-cta .btn-secondary{color:#FFFFFF!important;border-color:#FFFFFF!important}.final-cta .btn-secondary:hover{background:rgba(255,255,255,.1)!important}
.count-bar{border-radius:var(--r-md);box-shadow:none;border:1px solid var(--line);background:var(--gold-soft)}

/* Z-index scale and motion budget. */
.navbar{z-index:var(--z-nav)}
.search-veil,.menu-veil,.dropdown{z-index:var(--z-dropdown)}
.chat-fab,.chat-launch,.chat-panel,.clock-widget{z-index:var(--z-chat)}
.modal,.lightbox{z-index:var(--z-modal)}
#toast{z-index:var(--z-toast)}
.theme-btn:hover,.theme-btn:hover svg,.btn:hover,.btn:active{transform:none}
.ticker-inner{animation-duration:34s}
#newsGrid.ne-track .ne-card{transition-duration:150ms}
.fx-ripple{display:none!important}
#readBtn .ico{margin:0;vertical-align:middle}

/* Dark mode remaps tokens instead of leaving white islands behind. */
[data-theme="dark"],[data-theme="dark-hc"]{
  --paper:var(--d-surface);--white:var(--d-surface);--cream:var(--d-bg);
  --ink:var(--d-text);--muted:var(--d-muted);--line:var(--d-line);
  --gold-soft:#1C2A24;
}
[data-theme="dark"] body,[data-theme="dark-hc"] body{background:var(--d-bg);color:var(--d-text)}
[data-theme="dark"] body:not(.portal-body) .navbar,
[data-theme="dark-hc"] body:not(.portal-body) .navbar{background:rgba(16,27,40,.97);border-color:var(--d-line)}
[data-theme="dark"] .flat-brand,[data-theme="dark"] .nav-link,[data-theme="dark"] .icon-action,
[data-theme="dark-hc"] .flat-brand,[data-theme="dark-hc"] .nav-link,[data-theme="dark-hc"] .icon-action{color:var(--d-text)}
[data-theme="dark"] .flat-brand small,[data-theme="dark-hc"] .flat-brand small{color:var(--d-muted)}
[data-theme="dark"] .icon-action:hover,[data-theme="dark-hc"] .icon-action:hover{background:var(--d-surface)}
[data-theme="dark"] body:not(.portal-body) .btn-secondary,[data-theme="dark"] body:not(.portal-body) .btn-white,
[data-theme="dark"] body:not(.portal-body) .btn-sky,[data-theme="dark"] body:not(.portal-body) .btn-grape,
[data-theme="dark-hc"] body:not(.portal-body) .btn-secondary,[data-theme="dark-hc"] body:not(.portal-body) .btn-white,
[data-theme="dark-hc"] body:not(.portal-body) .btn-sky,[data-theme="dark-hc"] body:not(.portal-body) .btn-grape{color:#0B7A37;border-color:#0B7A37;background:transparent!important}

@media print{:root{--paper:#FFFFFF;--cream:#FFFFFF;--ink:#203040;--muted:#5C6B7A;--line:#EAF0F6}}

@media(max-width:1100px){
  body:not(.portal-body) .navbar .nav-row{flex-wrap:wrap}
  .flat-brand{min-width:0;flex:1}
  .site-nav{order:3;flex:1 0 100%;overflow-x:auto;justify-content:flex-start;border-top:1px solid var(--line);padding-top:8px}
  #mainNav{width:max-content;justify-content:flex-start;gap:20px;margin:auto}
}
@media(max-width:700px){
  body:not(.portal-body) section{padding:var(--s6) 0}
  .topbar .container{gap:8px;font-size:var(--fs-xs)}.tb-contact{gap:6px}.tb-contact [data-school-email]{display:none}
  .flat-brand strong{max-width:150px}.nav-actions{gap:8px}.nav-actions .nav-apply{padding-inline:12px}
  #mainNav{margin:0}.site-nav{scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}
  .hero-admission-strip ol{display:grid;grid-template-columns:1fr 1fr}
  .feat-grid,body[data-page="home"] .gal-grid,body[data-page="home"] .testi-rail{grid-template-columns:1fr}
  .final-cta{padding:var(--s4);align-items:flex-start;flex-direction:column}
}

/* ================================================================
   PHASE 2 — resilient navigation and information architecture
   ================================================================ */
.icon-action{text-decoration:none}
.foot-main{grid-template-columns:1.25fr repeat(4,minmax(0,1fr))}
.foot-brand .logo{color:#FFFFFF}
.foot-quick-grid{display:grid;gap:7px}
.foot-quick-grid a{color:#E5DCC2;text-decoration:none;font-size:var(--fs-sm)}
.foot-quick-grid a:hover{color:#FFFFFF}
.foot-bottom-row,.foot-legal{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.static-site-footer{padding:var(--s6) 0 0}
.static-footer-grid{display:grid;grid-template-columns:1.25fr 1.4fr 1fr 1.2fr;gap:var(--s5);align-items:start}
.static-footer-grid h3{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.static-footer-brand{display:inline-block;color:#FFFFFF;font-family:var(--font-head);font-size:var(--fs-md);font-weight:600;margin-bottom:10px}
.static-footer-about p,.static-footer-contact p,.static-footer-contact a{color:#E5DCC2;font-size:var(--fs-sm)}
.static-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.static-footer-links a{color:#E5DCC2;text-decoration:none;font-size:var(--fs-sm)}
.static-footer-links a:hover,.static-footer-contact a:hover{color:#FFFFFF}
.static-footer-bottom{border-top:1px solid #1C2A24;color:#9AA7B8;margin-top:var(--s5);padding:14px 0;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:var(--fs-xs)}
.ia-section{margin-top:var(--s5)}
.ia-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ia-link{display:flex;align-items:flex-start;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);color:var(--ink);text-decoration:none;box-shadow:var(--sh-1)}
.ia-link:hover{border-color:var(--green);box-shadow:var(--sh-2)}
.ia-link svg{width:22px;height:22px;flex:none;color:var(--green)}
.ia-link span{display:block}
.ia-link small{display:block;color:var(--muted);margin-top:3px}
.fee-static-contact{background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s4)}
.fee-static-contact p{margin:4px 0;color:var(--ink)}
.fee-static-contact a{font-weight:700}
.section-intro{margin-bottom:14px}
.class-level{margin-top:var(--s5)}
.class-level:first-of-type{margin-top:0}
.class-card p{color:var(--muted);font-size:var(--fs-sm)}
.class-card .class-link{color:var(--green);font-weight:800;font-size:var(--fs-sm)}
.svg-check{width:18px;height:18px;display:inline-block;vertical-align:middle}
@media(max-width:960px){.foot-main,.static-footer-grid{grid-template-columns:1fr 1fr}.ia-links{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.foot-main,.static-footer-grid,.ia-links{grid-template-columns:1fr}.static-footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}.static-footer-bottom{justify-content:center;text-align:center}}
[data-theme="dark"] .ia-link{background:var(--paper);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .fee-static-contact{background:var(--paper);border-color:var(--gold)}

.card-sun{background:var(--gold-soft)}
.card-sky{background:var(--sky-soft)}
.card-mint{background:var(--mint-soft)}
.page-hero-link{margin-top:14px}
.text-link{color:var(--green);font-weight:700}

/* PHASE 2 INLINE-STYLE MIGRATION */
.u51-001{margin-top:34px}
.u51-002{margin:0 auto 22px}
.u51-003{font-size:var(--fs-md)}
.u51-004{color:var(--muted);font-weight:600}
.u51-005{margin-bottom:22px}
.u51-006{text-align:center;margin:12px 0 0}
.u51-007{max-width:420px;margin:10px auto 0}
.u51-008{width:100%;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--white);color:var(--ink)}
.u51-009{display:none;position:fixed;inset:0;background:rgba(3,10,6,.55);z-index:var(--z-modal)}
.u51-010{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,92vw);max-height:86vh;overflow-y:auto;background:var(--white);border:1px solid var(--gold);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:22px;z-index:var(--z-alert)}
.u51-011{max-width:860px;margin:0 auto}
.u51-012{width:100%;border-radius:var(--r-md);display:block}
.u51-013{margin:10px 0 0;font-size:var(--fs-sm)}
.u51-014{margin-top:26px;text-align:center}
.u51-015{margin-top:0}
.u51-016{margin:0 0 14px}
.u51-017{margin-left:8px}
.u51-018{max-width:680px;margin:0 auto 14px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.u51-019{flex:1;min-width:180px;margin:0}
.u51-020{width:180px;margin:0}
.u51-021{max-width:640px;margin:26px auto 8px}
.u51-022{display:flex;gap:8px;align-items:center}
.u51-023{width:auto}
.u51-024{margin-top:10px}
.u51-025{margin-bottom:0}
.u51-026{text-align:center;margin:26px 0 8px}
.u51-027{text-align:center}
.u51-028{font-size:var(--fs-xl);font-weight:800;color:#0E5A2E}
.u51-029{margin:2px 0 0}
.u51-030{margin-top:22px}
.u51-031{display:inline-flex;width:84px;height:84px;border-radius:var(--r-pill);background:var(--green-deep);color:#FFFFFF;font-weight:800;font-size:var(--fs-xl);align-items:center;justify-content:center;margin-bottom:8px}
.u51-032{font-size:var(--fs-sm);margin:4px 0}
.u51-033{margin:0}
.u51-034{margin:3px 0 0;font-weight:800;color:#0B7A37}
.u51-035{margin:8px 0 0;font-size:var(--fs-sm)}
.u51-036{margin-top:6px}
.u51-038{aspect-ratio:16/9}
.u51-039{color:var(--muted)}
.u51-040{max-width:520px;margin:0 auto}
.u51-041{margin:0 0 6px;font-size:var(--fs-base)}
.u51-042{background:var(--mint-soft);color:#0B7A37}
.u51-043{display:inline-flex;width:84px;height:84px;border-radius:var(--r-pill);background:var(--gold);color:#FFFFFF;font-weight:800;font-size:var(--fs-xl);align-items:center;justify-content:center;margin-bottom:8px}
.u51-044{width:96px;height:96px;border-radius:var(--r-pill);object-fit:cover;display:block;margin:0 auto}
.u51-045{display:flex;width:96px;height:96px;border-radius:var(--r-pill);background:var(--green-deep);color:#FFFFFF;font-weight:800;font-size:var(--fs-xl);align-items:center;justify-content:center;margin:0 auto}
.u51-046{margin:6px 0;font-size:var(--fs-sm)}
.u51-047{background:var(--sun-soft);color:var(--green-deep)}
.u51-048{margin:10px 0 4px}
.u51-049{text-align:center;margin-top:12px}
.u51-050{width:100%;max-width:420px;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.u51-051{margin:12px 0 4px}
.u51-052{margin:14px 0 6px;font-weight:800}
.u51-053{margin:0;padding-left:22px}
.u51-054{margin:6px 0;font-size:var(--fs-sm)}
.u51-055{color:var(--muted);font-size:var(--fs-xs)}
.u51-056{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.u51-057{margin:12px 0 0;font-size:var(--fs-sm);border-left:3px solid var(--green);padding-left:10px}
.u51-058{text-align:center;margin-top:14px}
.u51-059{color:var(--muted);font-size:var(--fs-xs)}
.u51-060{display:flex;justify-content:flex-end;margin-top:10px}
.u51-061{display:none;margin-top:10px}
.u51-062{background:var(--sun)}
.u51-063{flex:1}
.u51-064{margin-top:8px}
.u51-065{text-align:center;margin-top:14px;font-size:var(--fs-sm);color:var(--muted)}
.u51-066{text-align:center;margin-top:8px;font-weight:600;font-size:var(--fs-sm)}
.u51-067{font-size:var(--fs-sm)}
.u51-068{display:none}
.u51-069{display:flex;gap:8px;align-items:stretch}
.u51-070{display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);font-weight:800}
.u51-071{flex:1;min-width:0}
.u51-072{font-size:var(--fs-sm)}
.u51-073{visibility:hidden}
.u51-074{max-width:480px}
.u51-075{background:var(--mint)}
.u51-076{color:var(--muted);font-size:var(--fs-sm)}
.u51-077{font-size:var(--fs-sm);margin:6px 0 4px;color:var(--muted)}
.u51-078{gap:14px;margin-bottom:10px}
.u51-079{display:flex;align-items:center;gap:6px}
.u51-080{text-align:center;font-weight:600;margin:14px 0 0}
.u51-081{color:var(--danger)}
.u51-082{display:flex;gap:8px;margin-bottom:12px}
.u51-083{font-size:var(--fs-xs);color:var(--muted)}
.u51-084{display:flex;gap:10px;margin-top:12px}
.u51-085{text-align:center;font-weight:600}
.u51-086{text-align:left}
.u51-087{margin-bottom:14px}
.u51-088{flex:1;min-width:200px}
.u51-089{font-weight:800}
.u51-090{text-align:center;margin-top:26px}
.u51-091{width:40px;height:40px;flex-basis:40px}
.u51-092{color:var(--green-deep)}
.u51-093{min-width:70px;text-align:right}
.u51-094{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.u51-095{font-size:var(--fs-xl);color:#0E3B21}
.u51-096{display:flex;gap:10px}
.u51-097{margin-top:12px}
.u51-098{display:flex;gap:10px;margin-top:14px}
.u51-099{text-align:center;color:var(--green)}
.u51-100{background:var(--sky)}
.u51-101{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.u51-102{margin:18px 0;border-left:6px solid var(--gold)}
.u51-103{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.u51-104{margin:18px 0}
.u51-105{display:flex;gap:8px;flex-wrap:wrap}
.u51-106{margin-top:26px}
.u51-107{margin-top:14px}
.u51-108{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.u51-109{background:var(--coral)}
.u51-110{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u51-111{color:var(--muted);font-size:var(--fs-sm)}
.u51-112{margin-top:6px;font-size:var(--fs-sm)}
.u51-113{margin:0 0 18px}
.u51-114{text-align:right}
.u51-115{overflow-x:auto}
.u51-116{font-weight:600;color:var(--muted)}
.u51-117{margin-top:16px}
.u51-118{font-weight:700}
.u51-119{padding-top:26px;padding-bottom:0}
.u51-120{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.u51-121{margin:0;max-width:none}
.u51-122{background:var(--mint-soft)}
.u51-123{margin-bottom:6px}
.u51-124{margin-bottom:8px}
.u51-125{margin:4px 0}
.u51-126{padding-top:0}
.u51-127{margin-top:14px;text-align:center}
.u51-128{padding-top:10px}
.u51-129{max-width:800px}
.u51-130{max-width:680px}
.u51-131{margin:10px 0}
.u51-132{margin:0 0 8px}
.u51-133{margin:0 0 8px;background:var(--mint-soft);border-radius:var(--r-sm);padding:8px}
.u51-134{width:100%}
.u51-135{width:100%;min-width:560px}
.u51-136{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.u51-137{text-align:center;margin:20px 0 8px}
.u51-138{text-align:right;font-weight:800;color:#0B7A37}
.u51-139{padding:12px 14px}
.u51-140{color:#0B7A37}
.u51-141{margin:4px 0 0;font-size:var(--fs-sm)}

/* ================================================================
   HEADER & IDENTITY REBUILD — flat topbar + navbar, no overlap layers
   ================================================================ */
body:not(.portal-body) .topbar{
  position:sticky;top:0;z-index:calc(var(--z-nav) + 1);height:44px;min-height:44px;max-height:44px;
  overflow:hidden;background:var(--green-deep);color:#E5DCC2;border-bottom:2px solid var(--gold);
  transform:translateY(0);opacity:1;transition:transform 180ms ease,opacity 120ms ease;will-change:transform;
}
body:not(.portal-body) .topbar-row{
  position:relative;width:min(1180px,94%);height:42px;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;
}
.topbar a{color:var(--gold);text-decoration:none}.topbar a:hover{color:#E5DCC2}
.tb-contact,.tb-right,.tb-admissions{display:flex;align-items:center}
.tb-contact{gap:9px;min-width:0;white-space:nowrap}.tb-admissions{gap:6px}.tb-admissions b{color:var(--gold)}
.tb-email{overflow:hidden;text-overflow:ellipsis}.tb-sep{color:var(--gold)}
.tb-motto{margin:0;color:var(--gold);font-family:var(--font-head);font-size:var(--fs-sm);font-style:italic;text-align:center;white-space:nowrap}
.tb-motto::before,.tb-motto::after{content:"";display:inline-block;width:8px;height:8px;margin:0 8px;background:var(--gold);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);font-style:normal}
.tb-right{justify-content:flex-end;gap:12px;white-space:nowrap}
.topbar .portal-link{
  height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;
  color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:700;
}
.topbar .portal-link:hover{background:transparent;color:#E5DCC2;border-color:#E5DCC2}

body:not(.portal-body) .navbar{
  position:sticky;top:44px;z-index:var(--z-nav);transform:translateY(0);
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:var(--sh-1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform 180ms ease;
}
body:not(.portal-body) .navbar .nav-row{
  width:min(1180px,94%);min-height:76px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:12px;padding:10px 0;
}
.flat-brand{min-width:226px;display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.brand-logo-shell{
  width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;padding:3px;
  border:2px solid var(--gold);border-radius:var(--r-pill);background:var(--green-deep);
}
.flat-brand .logo-badge{width:38px;height:38px;border:0;border-radius:var(--r-pill);object-fit:cover;box-shadow:none}
.brand-copy{display:flex;min-width:0;flex-direction:column;line-height:1.08}
.flat-brand .brand-copy strong{
  color:var(--green);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.05em;white-space:nowrap;
}
.flat-brand .brand-copy small{margin-top:5px;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.flat-brand .brand-copy small i{color:var(--gold);font-style:normal;font-weight:800}.flat-brand .brand-copy small b{color:var(--muted)}
body:not(.portal-body) .site-nav{display:flex;align-items:center;justify-content:center;min-width:0;flex:1;order:initial;border:0;padding:0;overflow:visible}
body:not(.portal-body) #mainNav{width:auto;display:flex;align-items:center;justify-content:center;gap:4px;margin:0}
.nav-link{
  position:relative;min-height:40px;display:inline-flex;align-items:center;padding:7px 10px;
  border-radius:var(--r-pill);color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap;
}
.nav-link:hover{color:var(--green);background:var(--gold-soft)}
.nav-link.on,.nav-link[aria-current="page"]{color:var(--green);background:transparent}
.nav-link.on::after,.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:1px;width:22px;height:3px;
  border-radius:var(--r-pill);background:var(--gold);transform:translateX(-50%);
}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;margin:0}
.icon-action,.theme-btn,.menu-toggle{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;padding:0;
  border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink);
  box-shadow:none;cursor:pointer;text-decoration:none;
}
.icon-action:hover,.theme-btn:hover,.menu-toggle:hover{background:var(--gold-soft);color:var(--green);transform:none;box-shadow:none}
.nav-actions .nav-apply,.drawer-apply{
  min-height:44px;padding:10px 19px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#D9B44A,var(--gold));color:var(--green-deep);
  font-family:var(--font-body);font-weight:800;box-shadow:none;
}
.nav-actions .nav-apply:hover,.drawer-apply:hover{background:linear-gradient(135deg,#D9B44A,var(--gold));color:var(--green-deep);transform:translateY(-1px)}
.sticky-portal svg,.menu-toggle span{pointer-events:none}
.menu-toggle{display:none;position:relative}
.menu-toggle span{position:absolute;width:20px;height:2px;border-radius:var(--r-pill);background:currentColor;transition:transform 180ms ease,opacity 120ms ease}
.menu-toggle span:nth-child(1){transform:translateY(-6px)}.menu-toggle span:nth-child(3){transform:translateY(6px)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.drawer-actions{display:none}.nav-veil{display:none}

/* The topbar's layout space stays reserved; only visual transforms move, so
   the sticky navbar reaches the viewport top without a content jump. */
body.topbar-collapsed:not(.portal-body) .topbar{max-height:0;transform:translateY(-100%);opacity:0}
body.topbar-collapsed:not(.portal-body) .navbar{transform:translateY(-44px)}

[data-theme="dark"] body:not(.portal-body) .topbar,[data-theme="dark-hc"] body:not(.portal-body) .topbar{background:var(--green-deep)}
[data-theme="dark"] body:not(.portal-body) .navbar,[data-theme="dark-hc"] body:not(.portal-body) .navbar{background:var(--d-surface);border-color:var(--d-line)}
[data-theme="dark"] .flat-brand .brand-copy strong,[data-theme="dark-hc"] .flat-brand .brand-copy strong{color:var(--d-text)}
[data-theme="dark"] .nav-link,[data-theme="dark"] .icon-action,[data-theme="dark"] .theme-btn,[data-theme="dark"] .menu-toggle,
[data-theme="dark-hc"] .nav-link,[data-theme="dark-hc"] .icon-action,[data-theme="dark-hc"] .theme-btn,[data-theme="dark-hc"] .menu-toggle{color:var(--d-text)}
[data-theme="dark"] .nav-link:hover,[data-theme="dark-hc"] .nav-link:hover{color:var(--gold);background:var(--gold-soft)}

.topbar a:focus-visible,.navbar a:focus-visible,.navbar button:focus-visible,.site-nav a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}

@media(min-width:960px) and (max-width:1120px){
  body:not(.portal-body) .topbar-row{gap:8px}
  .tb-contact,.tb-right{gap:6px;font-size:var(--fs-xs)}.tb-motto{font-size:var(--fs-xs)}.topbar .portal-link{padding-inline:8px}
  body:not(.portal-body) .navbar .nav-row{gap:8px}
  .flat-brand{min-width:180px;gap:8px}.brand-logo-shell{width:44px;height:44px;flex-basis:44px}.flat-brand .logo-badge{width:34px;height:34px}
  .flat-brand .brand-copy strong{font-size:var(--fs-xs)}.flat-brand .brand-copy small{display:none}
  body:not(.portal-body) #mainNav{gap:2px}.nav-link{min-height:36px;padding:6px 5px;font-size:var(--fs-xs)}
  .nav-actions{gap:4px}.icon-action,.theme-btn{width:40px;height:40px;flex-basis:40px}.nav-actions .nav-apply{min-height:40px;padding:8px 11px;font-size:var(--fs-xs)}
}
@media(max-width:959px){
  html.js{overflow-x:clip}
  body:not(.portal-body) .topbar-row{grid-template-columns:1fr auto;gap:10px}
  .tb-motto,.tb-email,.tb-location,.tb-contact .tb-sep{display:none}
  .tb-contact{overflow:hidden}.tb-admissions{font-size:var(--fs-xs)}
  .topbar .portal-link{padding-inline:10px}
  body:not(.portal-body) .navbar .nav-row{min-height:70px;gap:8px}
  .flat-brand{min-width:0;flex:1}.brand-copy{overflow:hidden}.flat-brand .brand-copy small{display:none}
  .flat-brand .brand-copy strong{font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis}
  .nav-actions{gap:6px}
  .menu-toggle{display:none!important}
  html.js .desktop-apply,html.js .sticky-portal{display:none}
  body:not(.portal-body) .navbar .nav-row{min-height:0;padding-block:9px;flex-wrap:wrap}
  body:not(.portal-body) .site-nav,
  html.js body:not(.portal-body) .site-nav,
  html:not(.js) body:not(.portal-body) .site-nav{
    position:static;order:3;flex:1 0 100%;width:100%;height:auto;display:flex;
    align-items:center;justify-content:flex-start;padding:8px 0 0;overflow-x:auto;overflow-y:hidden;
    background:transparent;border:0;border-top:1px solid var(--line);transform:none;
    visibility:visible;pointer-events:auto;scrollbar-width:none;
  }
  body:not(.portal-body) .site-nav::-webkit-scrollbar{display:none}
  body:not(.portal-body) .site-nav #mainNav,
  html.js body:not(.portal-body) .site-nav #mainNav,
  html:not(.js) body:not(.portal-body) #mainNav{
    width:max-content;display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;
  }
  html.js .site-nav .nav-link{
    width:auto;min-height:40px;justify-content:center;padding:7px 10px;border-radius:var(--r-pill);
    color:var(--ink);font-size:var(--fs-sm);
  }
  html.js .site-nav .nav-link:hover{color:var(--green);background:var(--gold-soft)}
  html.js .site-nav .nav-link.on,html.js .site-nav .nav-link[aria-current="page"]{color:var(--green);background:transparent}
  html.js .site-nav .nav-link.on::after,html.js .site-nav .nav-link[aria-current="page"]::after{
    left:50%;top:auto;bottom:1px;width:22px;height:3px;border-radius:var(--r-pill);transform:translateX(-50%);
  }
  .drawer-actions,.nav-veil{display:none!important}
}
@media(max-width:520px){
  body:not(.portal-body) .navbar .nav-row{width:min(96%,1180px)}
  .brand-logo-shell{width:44px;height:44px;flex-basis:44px}.flat-brand .logo-badge{width:34px;height:34px}
  .flat-brand .brand-copy strong{max-width:106px;font-size:var(--fs-xs);letter-spacing:.035em}
  .tb-admissions span{font-size:var(--fs-xs)}.topbar .portal-link{font-size:var(--fs-xs);padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
  body:not(.portal-body) .topbar,body:not(.portal-body) .navbar,.menu-toggle span,html.js body:not(.portal-body) .site-nav{transition:none!important}
}

/* Mobile Chromium treats overflow-x:hidden on body as a scroll container,
   which defeats sticky headers. Clip prevents horizontal paint overflow without
   capturing vertical scroll, so the flat header remains reachable. */
@supports(overflow:clip){body:not(.portal-body){overflow-x:clip}}

/* Batch 53 accessibility contrast and semantic-heading companion rules. */
.hero h1 em{color:var(--green)}
.hero-figure figcaption{color:var(--ink);opacity:1}
.gal .cap{color:var(--paper)}
.count-bar,.count-bar:hover{color:var(--green-deep)}
.foot-col h2{margin:0 0 12px;color:var(--sun);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;line-height:1.3;text-transform:uppercase}
[data-theme="dark"] .hero h1 em,[data-theme="dark-hc"] .hero h1 em{color:var(--gold)}
.site-footer .foot-brand p,.site-footer .acc-cap,.site-footer .acc-note{color:var(--cream)}
.site-footer a.btn.btn-white,.site-footer a.btn.btn-white:hover{color:var(--cream)!important;background:transparent;border-color:var(--cream)}

/* Current public-form validation. */
.field-error{color:#9f1d20;font-weight:700;margin:.35rem 0 0;font-size:.9rem}
[aria-invalid="true"]{border-color:#b42318!important;box-shadow:0 0 0 3px rgba(180,35,24,.14)!important}
.prog-stage-image{display:block;width:100%;height:150px;object-fit:contain;margin:0 auto 14px;border-radius:14px;background:rgba(255,255,255,.6)}

/* ---- source: motion.css ---- */
/* Treasure Academy motion policy: calm, useful and accessible.
   Only reveal opacity/position, the news carousel, counters, the chatbot's
   gentle attention cue and the announcement marquee may move. */
:root{--t-fast:150ms ease;--t-reveal:200ms ease}

/* Content is visible by default. The synchronous theme bootstrap adds .js
   before CSS paints, allowing reveals only when JavaScript can complete them. */
.clip,.clip-up{
  opacity:1;
  transform:none;
  transition:opacity var(--t-reveal),transform var(--t-reveal);
}
.js .clip,.js .clip-up{opacity:0;transform:translateY(12px)}
.js .clip.revealed,.js .clip-up.revealed{opacity:1;transform:none}

/* Hover feedback changes colour, never the target's position or size. */
a,button,.btn,.icon-action{
  transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover,.btn:active,.theme-btn:hover,.icon-action:hover,
.card:hover,.prog:hover,.step:hover,.testi-card:hover,.track-card:hover,.yt-card:hover{
  transform:none;
}

/* Keyboard access remains immediate and clearly visible. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold,#C9A227);
  outline-offset:3px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:var(--z-toast,70);
  background:var(--green,#0E5A2E);color:#FFFFFF;padding:10px 16px;
  border-radius:var(--r-sm);font-weight:700;text-decoration:none;
}
.skip-link:focus{top:0}
#siteLoader{transition:opacity var(--t-reveal),visibility var(--t-reveal)}
#siteLoader.done{visibility:hidden}

img[width][height]{max-width:100%;height:auto}
.hero-figure img,.prog img,.card img,.testi-card img,.team-card img{height:auto}
.ico{display:inline-block;vertical-align:-.18em;margin-right:.4em;flex:none;color:var(--green,#0E5A2E)}

@media(max-width:760px){.clock-widget{display:none!important}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .clip,.clip-up{opacity:1!important;transform:none!important}
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ticker-inner{animation:none!important}
}

/* ---- source: ux.css ---- */
/* Treasure Academy visitor-experience layer — 22 October 2026.
   A small final layer for consistent wayfinding, mobile actions and calm motion. */
:root{
  --ux-max:1180px;
  --ux-green:#0E5A2E;
  --ux-green-deep:#0A3B20;
  --ux-gold:#C9A227;
  --ux-ink:#172536;
  --ux-muted:#566575;
  --ux-line:#E4E8E1;
  --ux-soft:#F4F7F2;
  --ux-warm:#FBF8ED;
  --ux-shadow:0 16px 40px rgba(14,59,33,.09);
}
html{scroll-padding-top:92px}
body{background:#fff;color:var(--ux-ink)}
body>main,body>#main,body>section#main{position:relative;z-index:1}
p,li,dd{color:var(--ux-muted)}
section{padding-block:clamp(42px,5vw,68px)}
[id]{scroll-margin-top:104px}

/* One recognisable light header for generated, archive and detail pages. */
.lite-nav{position:sticky;top:0;z-index:48;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ux-line);box-shadow:0 4px 18px rgba(23,37,54,.05);backdrop-filter:blur(12px)}
.lite-nav .container{min-height:72px;display:flex;align-items:center;gap:18px}
.lite-brand{display:flex;align-items:center;gap:10px;min-width:218px;text-decoration:none;color:var(--ux-ink)}
.lite-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.lite-brand span{display:flex;flex-direction:column;line-height:1.15}
.lite-brand strong{font-family:var(--font-head);font-size:.9rem;letter-spacing:.07em}
.lite-brand small{margin-top:4px;color:var(--ux-muted);font-size:.72rem}
.lite-links{display:flex;align-items:center;justify-content:center;gap:2px;flex:1}
.lite-links a{min-height:42px;display:inline-flex;align-items:center;padding:8px 10px;border-radius:9px;color:var(--ux-ink);font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap}
.lite-links a:hover,.lite-links a[aria-current="page"]{background:var(--ux-soft);color:var(--ux-green)}
.lite-actions{display:flex;align-items:center;gap:8px}
.lite-search{min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--ux-line);border-radius:10px;font-weight:750;text-decoration:none;color:var(--ux-ink)}
.lite-apply{min-height:42px;padding:9px 15px!important}

/* Full header: retain the school identity and remove mobile horizontal hunting. */
.browse-action{width:auto!important;padding-inline:11px!important;gap:6px}
.browse-action span{font-size:.82rem;font-weight:750}
.nav-link[aria-current="page"],.nav-link.on{color:var(--ux-green)!important;background:var(--ux-soft)}

/* Location + early actions on every interior page. */
.route-bar{position:relative;z-index:3;background:#fff;border-bottom:1px solid var(--ux-line)}
.route-bar .container{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:10px}
.breadcrumbs{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ux-muted);font-size:.82rem}
.breadcrumbs a{color:var(--ux-green);font-weight:750;text-decoration:none}
.breadcrumbs [aria-current="page"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch;color:var(--ux-ink);font-weight:700}
.breadcrumbs .sep{color:#9AA7A0}
.route-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}
.route-actions a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border-radius:10px;border:1px solid var(--ux-line);font-size:.84rem;font-weight:750;text-decoration:none;color:var(--ux-ink)}
.route-actions a:first-child{background:var(--ux-green);border-color:var(--ux-green);color:#fff}
.route-actions a:hover{box-shadow:0 5px 16px rgba(14,59,33,.10)}

/* Strong page identity without a tall decorative intro. */
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,5vw,62px) 0!important;background:linear-gradient(120deg,var(--ux-green-deep),#0D6031)!important}
.page-hero::after{content:"";position:absolute;z-index:-1;inset:-40% -10% auto 48%;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.24),transparent 64%)}
.page-hero .container{max-width:var(--ux-max)}
.page-hero h1{max-width:19ch;margin:.35rem 0 .65rem;color:#fff;font-size:clamp(2rem,5vw,3.35rem);text-wrap:balance}
.page-hero p{max-width:68ch;margin:0;color:#E9F0E8;font-size:clamp(1rem,2vw,1.14rem);line-height:1.65}
.page-hero .sec-tag{color:#F3D66D!important}

/* Homepage routing and clear answer to “where am I / what can I do?” */
.hero{padding-block:clamp(42px,6vw,74px)}
.hero h1{font-size:clamp(2.25rem,5.2vw,4.15rem);line-height:1.04;max-width:13ch;text-wrap:balance}
.hero .lead{max-width:60ch!important;line-height:1.65}
.hero-ctas .btn{min-height:48px}
.home-finder{margin:22px 0 18px;padding:17px;background:#fff;border:1px solid var(--ux-line);border-radius:16px;box-shadow:var(--ux-shadow)}
.home-finder label{display:block;margin-bottom:8px;font-size:.88rem;font-weight:800;color:var(--ux-ink)}
.home-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.home-search-row input{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid #BFCAC0;border-radius:11px;background:#fff;color:var(--ux-ink);font:inherit}
.home-search-row button{min-height:48px;padding-inline:18px;border:0;border-radius:11px;background:var(--ux-green);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.home-task-links{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.home-task-links span{color:var(--ux-muted);font-size:.78rem;font-weight:700}
.home-task-links a{padding:5px 9px;border-radius:999px;background:var(--ux-soft);color:var(--ux-green);font-size:.78rem;font-weight:750;text-decoration:none}
.hero-admission-strip{margin-top:14px!important}
.hero-admission-strip ol{gap:5px!important}

/* Cards, forms and page hierarchy. */
.track-card,.mv-card,.prog,.panel,.faq-item,.archive-card,.lead-story,.utility-content>article{
  border-color:var(--ux-line)!important;box-shadow:0 8px 28px rgba(23,37,54,.055)!important
}
.track-card,.mv-card,.panel{padding:clamp(20px,3vw,30px)}
.track-card h2:first-child,.track-card h3:first-child,.mv-card h2:first-child,.mv-card h3:first-child,.panel h2:first-child{margin-top:0}
.utility-content{max-width:1040px!important}
.utility-content>p:first-child{margin-bottom:16px}
.utility-content>h2:first-of-type{font-size:clamp(1.45rem,3vw,2rem)}
.btn{min-height:44px}
input,select,textarea{min-height:44px;font-size:16px}
textarea{min-height:130px}
label{font-weight:750}
.form-help,.safe-action-note{font-size:.86rem;line-height:1.5;color:var(--ux-muted)}
.field-error{margin-top:6px;color:#9F1527;font-size:.86rem;font-weight:700}

/* Clear, scannable reading rhythm across every page family. */
main p,main li{line-height:1.65}
.page-hero p,.lead,.sub,.sec-head>p,.panel>p,.mv-card>p,.track-card>p,.utility-content>p,.utility-content>ul{max-width:72ch}
.panel>p,.mv-card>p,.track-card>p{margin-bottom:.75rem}
.panel>ul,.utility-content>ul{padding-left:1.25rem}
.panel li+li,.utility-content li+li{margin-top:.45rem}
.clear-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0;counter-reset:step;list-style:none}
.clear-steps li{position:relative;min-height:68px;padding:12px 12px 12px 44px;border-radius:11px;background:var(--ux-soft);color:var(--ux-ink);font-weight:700}
.clear-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:11px;top:11px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--ux-green);color:#fff;font-size:.78rem}
.page-outline-wrap{padding-top:18px}
.page-outline{border:1px solid var(--ux-line);border-radius:13px;background:var(--ux-soft)}
.page-outline summary{min-height:44px;display:flex;align-items:center;padding:9px 14px;color:var(--ux-ink);font-weight:800;cursor:pointer;list-style:none}
.page-outline summary::-webkit-details-marker{display:none}
.page-outline summary::after{content:"+";margin-left:auto;color:var(--ux-green);font-size:1.2rem}
.page-outline[open] summary::after{content:"−"}
.page-outline nav{display:flex;gap:7px;flex-wrap:wrap;padding:0 12px 12px}
.page-outline a{padding:7px 10px;border:1px solid var(--ux-line);border-radius:999px;background:#fff;color:var(--ux-green);font-size:.8rem;font-weight:750;text-decoration:none}

/* Voluntary website-problem report. No automatic form-value collection. */
.problem-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:20px;align-items:start}
.problem-card,.privacy-card{padding:clamp(20px,3vw,30px);border:1px solid var(--ux-line);border-radius:16px;background:#fff;box-shadow:var(--ux-shadow)}
.problem-card .field{margin-bottom:16px}.problem-card textarea{width:100%}.problem-card select{width:100%}
.check-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start}
.check-row input[type="checkbox"]{width:22px!important;height:22px!important;min-height:22px!important;margin:1px 0 0;padding:0}
input,select,textarea,button{scroll-margin-bottom:92px}
.problem-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.problem-preview{margin-top:16px;padding:14px;border-radius:12px;background:var(--ux-soft);font-size:.84rem;overflow-wrap:anywhere}
.problem-preview[hidden]{display:none}
.safe-list{padding-left:1.2rem}.safe-list li+li{margin-top:.5rem}

/* Explore/sitemap hub. */
.explore-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:22px;align-items:stretch;margin-bottom:28px}
.explore-intro .track-card{margin:0}
.audience-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 30px}
.audience-switch a{display:block;padding:16px;border:1px solid var(--ux-line);border-radius:14px;background:#fff;text-decoration:none}
.audience-switch b{display:block;color:var(--ux-ink)}
.audience-switch small{display:block;margin-top:4px;color:var(--ux-muted)}
.site-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.site-map-group{padding:clamp(20px,3vw,28px);border:1px solid var(--ux-line);border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(23,37,54,.05)}
.site-map-group h2{margin:0 0 6px;font-size:1.35rem}
.site-map-group>p{margin:0 0 16px;font-size:.92rem}
.site-map-links{display:grid;gap:8px}
.site-map-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px 12px;border-radius:10px;background:var(--ux-soft);text-decoration:none;color:var(--ux-ink)}
.site-map-links a:hover{background:var(--ux-warm)}
.site-map-links small{color:var(--ux-muted);font-weight:600}
.site-map-links span:last-child{color:var(--ux-green);font-weight:800}

/* Private, local smart search. */
.smart-search-shell{max-width:920px;margin:0 auto}
.smart-search-card{margin-top:-30px;position:relative;z-index:4;padding:clamp(18px,3vw,28px);border:1px solid var(--ux-line);border-radius:18px;background:#fff;box-shadow:var(--ux-shadow)}
.smart-search-card label{display:block;margin-bottom:8px}
.smart-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.smart-search-row input{width:100%;min-height:54px;padding:12px 15px;border:1.5px solid #AEBCAE;border-radius:12px;background:#fff;color:var(--ux-ink);font:inherit}
.smart-search-row button{min-height:54px;padding:10px 20px;border:0;border-radius:12px;background:var(--ux-green);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.search-note{margin:9px 0 0;font-size:.82rem;color:var(--ux-muted)}
.search-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.search-chips button{min-height:36px;padding:6px 11px;border:1px solid var(--ux-line);border-radius:999px;background:var(--ux-soft);color:var(--ux-green);font:inherit;font-size:.82rem;font-weight:750;cursor:pointer}
.search-summary{margin:24px 0 10px;font-weight:750;color:var(--ux-muted)}
.answer-card{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;margin:0 0 18px;padding:20px;border:1px solid #BFD8C7;border-left:4px solid var(--ux-green);border-radius:14px;background:#F5FAF6}
.answer-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--ux-green);color:#fff;font-weight:900}
.answer-card h2{margin:0 0 5px;font-size:1.18rem}
.answer-card p{margin:0}
.answer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.answer-actions a{padding:8px 11px;border-radius:9px;background:#fff;border:1px solid #BFD8C7;color:var(--ux-green);font-size:.85rem;font-weight:750;text-decoration:none}
.search-result-list{display:grid;gap:10px}
.search-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:17px;border:1px solid var(--ux-line);border-radius:13px;background:#fff;text-decoration:none;color:var(--ux-ink)}
.search-result:hover{border-color:#9AB5A0;box-shadow:0 8px 24px rgba(23,37,54,.06)}
.search-result h2{margin:0 0 4px;font-size:1.04rem}
.search-result p{margin:0;font-size:.9rem;line-height:1.55}
.search-result .result-meta{display:block;margin-top:8px;color:var(--ux-green);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.search-result .arrow{align-self:center;color:var(--ux-green);font-size:1.35rem}
.search-empty{padding:24px;border:1px dashed #AEBCAE;border-radius:14px;text-align:center;background:var(--ux-soft)}
mark{background:#FFF0A8;color:inherit;border-radius:3px;padding-inline:1px}

/* Consistent, useful footer. */
.universal-footer{position:relative;z-index:2;background:#101B28;color:#EAF0F6;padding:48px 0 0}
.universal-footer p,.universal-footer small{color:#B9C5D1}
.uf-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;gap:30px}
.uf-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff;text-decoration:none}
.uf-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.uf-brand b{font-family:var(--font-head);letter-spacing:.04em}
.uf-col h2{margin:0 0 12px;color:#F3D66D;font-family:var(--font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.uf-links{display:grid;gap:7px}
.uf-links a,.uf-contact a{color:#EAF0F6;text-decoration:none;font-size:.9rem}
.uf-links a:hover,.uf-contact a:hover{color:#F3D66D}
.uf-contact p{font-size:.9rem;line-height:1.65}
.uf-bottom{margin-top:34px;padding:15px 0;border-top:1px solid #2A3A4E;color:#9EACB9;font-size:.76rem}
.uf-bottom .container{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}

/* Always-visible, familiar mobile navigation — no hidden hamburger. */
.mobile-dock{display:none}
@media(max-width:959px){
  body{padding-bottom:74px}
  html{scroll-padding-bottom:82px}
  .topbar{display:none!important}
  body:not(.portal-body) .navbar{top:0}
  body:not(.portal-body) .navbar .nav-row{min-height:62px!important;padding-block:7px!important;flex-wrap:nowrap!important}
  body:not(.portal-body) .site-nav{display:none!important}
  .navbar .sticky-portal,.navbar .theme-btn,.navbar .browse-action,.navbar #searchBtn{display:none!important}
  .navbar .desktop-apply{display:inline-flex!important;min-height:42px;padding:8px 12px!important}
  .lite-nav .container{min-height:62px;gap:9px}
  .lite-brand{min-width:0;flex:1}.lite-brand small{display:none}.lite-brand strong{font-size:.78rem}
  .lite-links,.lite-search{display:none}.lite-apply{display:inline-flex}
  .mobile-dock{position:fixed;z-index:58;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid #D8DED8;background:rgba(255,255,255,.97);box-shadow:0 -8px 26px rgba(23,37,54,.09);backdrop-filter:blur(12px)}
  .mobile-dock a{min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px;color:#4A5968;text-decoration:none;font-size:.65rem;font-weight:750}
  .mobile-dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-dock a[aria-current="page"]{background:var(--ux-soft);color:var(--ux-green)}
  .route-bar .container{align-items:flex-start;flex-direction:column;gap:8px;padding-block:10px}
  .route-actions{width:100%;justify-content:flex-start}.route-actions a{flex:1;min-width:0;padding-inline:9px}
  .breadcrumbs [aria-current="page"]{max-width:48vw}
  .page-hero{padding-block:34px!important}
  .page-hero h1{font-size:clamp(1.9rem,8vw,2.7rem)}
  section{padding-block:40px}
  .uf-grid{grid-template-columns:1fr 1fr}.uf-about,.uf-contact{grid-column:1/-1}
  #topBtn{display:none!important}
}
@media(max-width:680px){
  .container{width:min(92%,1180px)}
  .hero{padding-block:34px}.hero-grid{gap:26px}.hero h1{font-size:clamp(2.1rem,11vw,3.15rem)}
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-ctas .btn{padding-inline:10px;white-space:normal;text-align:center}
  .home-finder{padding:14px}.home-search-row,.smart-search-row{grid-template-columns:1fr}.home-search-row button,.smart-search-row button{width:100%}
  .hero-admission-strip ol{grid-template-columns:1fr 1fr!important}
  .explore-intro,.site-map-grid,.problem-layout{grid-template-columns:1fr}.audience-switch{grid-template-columns:1fr}
  .clear-steps{grid-template-columns:1fr}
  .page-outline-wrap{padding-top:12px}.page-outline nav{display:grid;grid-template-columns:1fr 1fr}.page-outline a{text-align:center}
  .smart-search-card{margin-top:-18px}
  .search-result{padding:14px}
  .uf-grid{grid-template-columns:1fr}.uf-about,.uf-contact{grid-column:auto}.uf-bottom .container{display:grid}
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.media-grid img{height:120px!important}
  body[data-page="home"] .gal-grid .gal:nth-child(n+3){display:none}
  .mv-grid,.prog-grid,.feat-grid,.contact-grid{grid-template-columns:minmax(0,1fr)!important}
  .mv-grid>*,.prog-grid>*,.feat-grid>*,.contact-grid>*{min-width:0!important;width:100%!important;max-width:100%!important}
  .wa-card{min-width:0;flex-wrap:wrap}.wa-card>div{min-width:0;overflow-wrap:anywhere}
  .btn{white-space:normal;text-align:center}
  .cta-band,.final-cta{padding:25px!important}
}
@media(max-width:390px){
  .flat-brand .brand-copy strong{max-width:94px!important}.desktop-apply{font-size:.76rem!important}
  .mobile-dock a{font-size:.6rem}.mobile-dock svg{width:19px;height:19px}
  .route-actions a{font-size:.77rem}
  .home-task-links span{width:100%}
  .media-grid{grid-template-columns:1fr!important}
}

/* Content never waits for JavaScript or scrolling; motion is decorative only. */
.js .clip,.js .clip-up{opacity:1!important;transform:none!important}
/* Calm polish: motion communicates hierarchy and never blocks reading. */
@keyframes ux-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js .page-hero h1,.js .page-hero p{animation:ux-rise .32s ease both}.js .page-hero p{animation-delay:.06s}
@media(hover:hover){
  .site-map-links a,.search-result,.audience-switch a{transition:border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
  .site-map-links a:hover,.audience-switch a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,37,54,.07)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.js .page-hero h1,.js .page-hero p{animation:none!important}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
@media(prefers-contrast:more){
  :root{--ux-line:#657468}.route-actions a,.lite-search,.site-map-group,.search-result,.smart-search-card{border-width:2px}
}
[data-theme="dark"] .lite-nav,[data-theme="dark"] .route-bar,[data-theme="dark"] .smart-search-card,[data-theme="dark"] .site-map-group,[data-theme="dark"] .search-result,[data-theme="dark"] .home-finder,[data-theme="dark"] .page-outline,[data-theme="dark"] .problem-card,[data-theme="dark"] .privacy-card{background:#16241D;border-color:#30453A;color:#EAF0F6}
[data-theme="dark"] .lite-brand,[data-theme="dark"] .lite-links a,[data-theme="dark"] .lite-search,[data-theme="dark"] .route-actions a,[data-theme="dark"] .search-result,[data-theme="dark"] .page-outline summary{color:#EAF0F6}
[data-theme="dark"] .page-outline a{background:#20362A;border-color:#30453A;color:#F3D66D}
[data-theme="dark"] .problem-preview{background:#20362A}
[data-theme="dark"] .mobile-dock{background:rgba(16,27,40,.97);border-color:#2A3A4E}
[data-theme="dark"] .mobile-dock a{color:#C8D1DB}[data-theme="dark"] .mobile-dock a[aria-current="page"]{background:#20362A;color:#F3D66D}