/* ============================================================
   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)}}