:root{
  --ink:#241014;
  --maroon:#5C1A28;
  --maroon-deep:#3E0F1B;
  --peach:#F7E4D4;
  --peach-soft:#FBEFE3;
  --paper:#FCFAF6;
  --graphite:#14171C;
  --graphite-soft:#1E2229;
  --cyan:#5FE0C8;
  --cyan-dim:#2D8C79;
  --line: rgba(36,16,20,0.14);
  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* whole-home living background, shared by the light sections */
.flow-bg{
  background: linear-gradient(120deg, #FBEFE3 0%, #FCFAF6 25%, #F7E4D4 50%, #EAF4F0 75%, #FBEFE3 100%);
  background-size: 300% 300%;
  animation: bgFlow 24s ease-in-out infinite;
}
@keyframes bgFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
/* fine paper-grain texture, sits over the whole page at very low opacity */
body::before{
  content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.035;mix-blend-mode:multiply;
}
@media(prefers-color-scheme:dark){body::before{mix-blend-mode:overlay;opacity:0.05;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* NAV */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(252,250,246,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:14px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:40px;width:auto;}
.brand span{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:0.01em;color:var(--maroon-deep);}
header.nav{transition:box-shadow .3s ease,background .3s ease;}
header.nav.scrolled{box-shadow:0 8px 24px -18px rgba(62,15,27,0.35);background:rgba(252,250,246,0.97);}
.brand{position:relative;flex:none;}
.brand img{transition:transform .3s ease;}
.brand:hover img{transform:rotate(-4deg) scale(1.04);}

nav.links{display:flex;gap:3px;font-size:0.84rem;color:var(--ink);flex-wrap:nowrap;}
nav.links .nav-link{
  position:relative;padding:9px 7px;opacity:0.72;font-weight:500;
  white-space:nowrap;
  transition:opacity .2s,color .2s;
}
nav.links .nav-link span{position:relative;z-index:1;}
nav.links .nav-link::after{
  content:'';position:absolute;left:4px;right:4px;bottom:4px;height:2px;
  background:var(--maroon);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.3,.8,.3,1);
}
nav.links .nav-link:hover{opacity:1;}
nav.links .nav-link:hover::after{transform:scaleX(1);}

.nav-actions{display:flex;align-items:center;gap:8px;flex:none;}
.nav-sep{width:1px;height:22px;background:var(--line);display:inline-block;}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--maroon-deep);background:rgba(92,26,40,0.06);
  transition:background .2s,color .2s,transform .2s;
}
.icon-btn svg{width:18px;height:18px;fill:currentColor;}
.icon-btn.ig-nav svg{fill:none;}
.icon-btn.wa-nav:hover{background:#25D366;color:#fff;transform:translateY(-2px);}
.icon-btn.ig-nav:hover{
  background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);color:#fff;transform:translateY(-2px);
}

.nav-cta{
  display:inline-block;
  background:var(--maroon);color:var(--peach-soft);
  padding:10px 18px;border-radius:999px;font-size:0.87rem;font-weight:600;white-space:nowrap;
  border:none;transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:0 8px 18px -10px rgba(92,26,40,0.55);
}
.nav-cta:hover{background:var(--maroon-deep);transform:translateY(-1px);}

.nav-mobile-toggle{
  display:none;width:38px;height:38px;border-radius:10px;
  background:none;border:none;position:relative;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-mobile-toggle span{
  display:block;width:20px;height:2px;background:var(--maroon-deep);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-mobile-panel{
  display:none;flex-direction:column;
  max-height:0;overflow:hidden;
  background:var(--paper);border-top:1px solid var(--line);
  transition:max-height .35s ease;
}
.nav-mobile-panel.open{max-height:520px;}
.nav-mobile-panel .nav-link{padding:14px 32px;border-bottom:1px solid var(--line);opacity:0.85;font-size:0.95rem;}
.nav-mobile-panel .nav-mobile-social{display:flex;gap:14px;padding:16px 32px;}
.nav-mobile-panel .nav-mobile-social a{
  font-size:0.85rem;font-weight:600;color:var(--maroon-deep);
  padding:8px 16px;border-radius:999px;background:rgba(92,26,40,0.07);
}

@media(max-width:1180px){
  nav.links{display:none;}
  .nav-cta{display:none;}
  .nav-mobile-toggle{display:flex;}
  .nav-mobile-panel{display:flex;}
}
@media(max-width:560px){
  .nav-sep{display:none;}
}

/* HERO */
.hero{position:relative;padding:110px 0 90px;overflow:hidden;}
.hero-cols{position:absolute;inset:0;opacity:0.05;display:flex;justify-content:center;gap:60px;pointer-events:none;}
.hero-cols div{width:34px;background:var(--maroon-deep);height:100%;}
.hero-inner{position:relative;text-align:center;max-width:780px;margin:0 auto;}
.hero h1{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.06;font-weight:600;margin:0 0 22px;color:var(--maroon-deep);position:relative;z-index:1;}
.hero-word{font-style:italic;font-weight:500;color:var(--maroon);position:relative;display:inline-block;}
.hw-highlight{
  position:absolute;left:-6px;bottom:0.08em;height:0.38em;width:0;
  background:rgba(95,224,200,0.4);z-index:-1;border-radius:2px;
  transition:width .55s cubic-bezier(.3,.8,.3,1);
}
.hw-highlight.show{width:calc(100% + 12px);}
.hw-letters{display:inline-block;}
.hw-letters .ch{display:inline-block;opacity:0;transform:translateY(8px);animation:letterIn .32s forwards;}
@keyframes letterIn{to{opacity:1;transform:translateY(0);}}
.hero-glow{position:absolute;top:30%;left:50%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(92,26,40,0.10),transparent 65%);animation:glowMove 9s ease-in-out infinite;pointer-events:none;z-index:0;}
@keyframes glowMove{0%,100%{transform:translate(-52%,-54%) scale(1);}50%{transform:translate(-48%,-46%) scale(1.15);}}
.hero p.sub{font-size:1.15rem;line-height:1.6;color:#4a3339;max-width:560px;margin:0 auto 40px;}
.hero-paths{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.path-btn{padding:16px 30px;border-radius:3px;font-weight:600;font-size:1rem;border:2px solid var(--maroon-deep);transition:all .25s;}
.path-btn.solid{background:var(--maroon-deep);color:var(--peach-soft);animation:pulseGlow 3.2s ease-out infinite;}
.path-btn.solid:hover{background:var(--maroon);animation:none;}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(92,26,40,0.35);}70%{box-shadow:0 0 0 12px rgba(92,26,40,0);}100%{box-shadow:0 0 0 0 rgba(92,26,40,0);}}
.path-btn.ghost{background:transparent;color:var(--maroon-deep);}
.path-btn.ghost:hover{background:var(--maroon-deep);color:var(--peach-soft);}

/* stat strip */
.stat-strip{display:flex;justify-content:center;gap:50px;margin-top:60px;flex-wrap:wrap;}
.stat{text-align:center;}
.stat b{display:block;font-family:var(--serif);font-size:2rem;color:var(--maroon-deep);}
.stat span{font-size:0.82rem;color:#7a5a61;}

/* floating icons in hero */
.floaters{position:absolute;inset:0;pointer-events:none;z-index:0;}
.floaters span{position:absolute;font-size:1.6rem;opacity:0.16;animation:drift 14s ease-in-out infinite;}
.floaters span:nth-child(1){left:8%;top:65%;animation-delay:0s;}
.floaters span:nth-child(2){left:18%;top:20%;animation-delay:2s;font-size:1.1rem;}
.floaters span:nth-child(3){left:85%;top:30%;animation-delay:1s;}
.floaters span:nth-child(4){left:92%;top:70%;animation-delay:3.5s;font-size:1.3rem;}
.floaters span:nth-child(5){left:50%;top:12%;animation-delay:1.8s;font-size:1rem;}
.floaters span:nth-child(6){left:6%;top:35%;animation-delay:4.2s;font-size:1.2rem;}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-22px) rotate(8deg);}
}

/* approach ticker */
.approach-band{background:var(--maroon-deep);color:var(--peach-soft);padding:22px 0;overflow:hidden;position:relative;}
.approach-band .track{display:flex;gap:48px;white-space:nowrap;animation:marquee 22s linear infinite;}
.approach-band:hover .track{animation-play-state:paused;}
.approach-band .track span{font-family:var(--serif);font-style:italic;font-size:1.05rem;opacity:0.92;display:flex;align-items:center;gap:12px;}
.approach-band .track span::after{content:'•';opacity:0.5;font-style:normal;margin-inline-start:36px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* club cards */
.clubs{padding:110px 0;position:relative;overflow:hidden;}
.clubs-head{max-width:600px;margin:0 auto 56px;text-align:center;}
.clubs-head .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;margin-bottom:10px;}
.clubs-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);color:var(--maroon-deep);margin:0 0 14px;}
.clubs-head p{color:#4a3339;line-height:1.6;}
/* club showcase — real branded photo cards */
/* flexbox + justify-content:center means an incomplete last row (7 cards → 4 + 3)
   is centered as a group instead of hanging left like a grid would leave it */
.clubs-grid{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:26px;padding:40px 6px 10px;}
.club-card{
  position:relative;border-radius:18px;overflow:hidden;background:var(--maroon-deep);
  box-shadow:0 18px 40px -20px rgba(92,26,40,0.35);cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  flex:0 1 calc(25% - 19.5px);
}
.club-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -20px rgba(92,26,40,0.45);z-index:2;}
.club-photo{position:relative;height:280px;overflow:hidden;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon));}
.club-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s ease;filter:saturate(0.92) contrast(1.04) brightness(0.97);
}
.club-card:hover .club-photo img{transform:scale(1.06);}
/* uniform maroon color-grade so seven different source photos read as one set */
.club-photo::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(160deg,rgba(92,26,40,0.35),rgba(60,16,26,0.18) 55%,rgba(38,10,16,0.32));
}
/* top + bottom scrims mask each photo's own baked-in title/logo and host our own consistent one */
.club-photo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(30,8,14,0.78) 0%,rgba(30,8,14,0.15) 26%,rgba(30,8,14,0) 55%,rgba(30,8,14,0.2) 78%,rgba(30,8,14,0.88) 100%);
}
.club-num{
  position:absolute;top:14px;left:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.4);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:0.8rem;
}
/* the same Code Cademy logo, same size, same corner, on every card — one fixed brand mark
   instead of each source photo's own inconsistent watermark */
.club-logo{
  position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,0.92);box-shadow:0 4px 10px rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px;
}
.club-logo img{position:static;width:100%;height:100%;object-fit:contain;filter:none;}
.club-title-on-photo{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;margin:0;
  font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:0.2px;
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
}
.club-body{background:#fff;padding:18px 18px 20px;}
.club-body p{font-size:0.85rem;color:#5a4148;line-height:1.5;margin:0 0 12px;}
.club-quote{
  font-family:var(--serif);font-style:italic;font-size:0.82rem;color:var(--maroon);
  border-top:1px dashed var(--line);padding-top:10px;line-height:1.4;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s;
}
.club-card:hover .club-quote{opacity:1;max-height:80px;}
.club-view-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:0.8rem;font-weight:700;
  color:var(--maroon-deep);border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s;
}
.club-card:hover .club-view-link{color:var(--maroon);border-color:var(--maroon);}

@media(max-width:1080px){
  .club-card{flex-basis:calc(33.333% - 17.4px);}
}
@media(max-width:760px){
  .clubs-grid{gap:18px;}
  .club-card{flex-basis:calc(50% - 9px);}
  .club-photo{height:230px;}
}
@media(max-width:460px){
  .clubs-grid{padding:30px 2px 10px;}
  .club-card{flex-basis:100%;}
  .club-quote{max-height:none;opacity:1;}
}

/* club library */
.library{padding:0 0 110px;}
.library-panel{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:40px;box-shadow:0 24px 50px -20px rgba(92,26,40,0.18);}
.library-panel .lib-head{margin-bottom:26px;}
.library-panel .lib-head .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1rem;margin-bottom:6px;}
.library-panel .lib-head h3{font-family:var(--serif);font-size:1.5rem;color:var(--maroon-deep);margin:0 0 8px;}
.library-panel .lib-head p{font-size:0.88rem;color:#6b4f56;line-height:1.55;margin:0;max-width:560px;}
.lib-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}
@media(max-width:640px){.lib-form{grid-template-columns:1fr;}}
.lib-form label{font-size:0.78rem;font-weight:600;color:var(--maroon-deep);display:block;margin-bottom:6px;}
.lib-form input, .lib-form select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:5px;font-family:var(--sans);font-size:0.92rem;background:var(--paper);color:var(--ink);
}
.lib-form input:focus, .lib-form select:focus{outline:2px solid var(--maroon);outline-offset:1px;}
.lib-form .full{grid-column:1 / -1;}
.lib-submit{
  grid-column:1/-1;background:var(--maroon-deep);color:var(--peach-soft);border:none;padding:13px 22px;border-radius:5px;font-weight:600;font-size:0.95rem;
  transition:background .2s, transform .2s;
}
.lib-submit:hover{background:var(--maroon);transform:translateY(-1px);}
.lib-note{grid-column:1/-1;font-size:0.76rem;color:#8a6b73;margin-top:-4px;}

.lib-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.lib-tab{padding:7px 14px;border-radius:20px;border:1px solid var(--line);font-size:0.82rem;background:var(--paper);color:var(--maroon-deep);cursor:pointer;transition:all .2s;}
.lib-tab.active{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}

/* level ladder — Beginner → Intermediate → Advanced, gated by exam */
.level-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px;}
.level-tab{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:20px;border:1px solid var(--line);
  background:#fff;color:#6b4f56;font-size:0.84rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.level-tab .lv-dot{width:8px;height:8px;border-radius:50%;background:#c9b8bc;flex:none;}
.level-tab.active{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}
.level-tab.active .lv-dot{background:#fff;}
.level-tab.passed .lv-dot{background:#2e7d32;}
.level-tab.active.passed .lv-dot{background:#9be8a4;}
.level-tab.locked{cursor:not-allowed;color:#b9a2a8;opacity:0.7;}
.level-tab.locked .lv-dot{background:transparent;}

.exam-box{
  margin-top:20px;border:1px dashed var(--maroon-deep);border-radius:10px;padding:20px 22px;background:#fdf5ef;
}
.exam-box h4{font-family:var(--serif);font-size:1.05rem;color:var(--maroon-deep);margin:0 0 14px;}
.exam-box p{font-size:0.88rem;color:#6b4f56;margin:0 0 14px;}
.exam-q{margin-bottom:18px;}
.exam-q p{font-weight:600;color:var(--maroon-deep);margin:0 0 8px;font-size:0.9rem;}
.exam-opt{display:block;font-size:0.86rem;color:#5a4148;padding:7px 0;cursor:pointer;}
.exam-opt input{margin-inline-end:8px;}
.teacher-exam-admin{margin-top:26px;border-top:1px solid var(--line);padding-top:22px;}
.teacher-exam-admin h4{font-family:var(--serif);font-size:1rem;color:var(--maroon-deep);margin:0 0 12px;}
.exam-q-row{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:8px;background:var(--paper);font-size:0.85rem;color:#5a4148;}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;min-height:70px;}
.lib-empty{grid-column:1/-1;text-align:center;padding:30px 10px;color:#a4838a;font-size:0.9rem;}
.lib-card{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--paper);position:relative;transition:transform .25s, box-shadow .25s;}
.lib-card:hover{transform:translateY(-4px);box-shadow:0 14px 26px -12px rgba(92,26,40,0.22);}
.lib-card .ftype{font-size:1.5rem;margin-bottom:10px;display:block;}
.lib-card h5{margin:0 0 4px;font-size:0.92rem;color:var(--maroon-deep);font-family:var(--serif);}
.lib-card .meta{font-size:0.72rem;color:#8a6b73;}
.lib-card .rm{position:absolute;top:8px;right:8px;background:none;border:none;color:#c79aa1;font-size:1rem;line-height:1;padding:2px;}
.lib-card .rm:hover{color:var(--maroon);}
.lib-card .lib-download{display:inline-block;margin-top:10px;font-size:0.8rem;font-weight:600;color:var(--maroon-deep);border-bottom:1.5px solid currentColor;}

/* accounts, auth modal, progress */
.auth-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-bottom:24px;}
.auth-bar span{font-size:0.9rem;color:var(--maroon-deep);font-weight:600;}
.auth-actions{display:flex;gap:8px;}
.role-badge{display:inline-block;font-size:0.7rem;font-weight:700;padding:2px 9px;border-radius:20px;margin-inline-start:6px;
  background:rgba(92,26,40,0.1);color:var(--maroon-deep);}

/* ===== full-page sign-in / sign-up screen ===== */
.auth-page{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:1fr 1fr;background:#fff;}
.auth-page[hidden]{display:none;}
.auth-brand{
  position:relative;background:linear-gradient(150deg,var(--maroon-deep),var(--maroon) 70%);
  color:var(--peach-soft);display:flex;flex-direction:column;justify-content:space-between;padding:48px;overflow:hidden;
}
.auth-brand::before{content:'';position:absolute;inset:0;opacity:0.12;
  background-image:radial-gradient(circle at 20% 20%,#fff 0,transparent 40%),radial-gradient(circle at 80% 70%,#fff 0,transparent 35%);}
.auth-brand-top{position:relative;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:1.2rem;}
.auth-brand-top img,.auth-brand-top .mark{width:34px;height:34px;border-radius:8px;}
.auth-brand-quote{position:relative;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.5;max-width:420px;}
.auth-brand-foot{position:relative;font-size:0.8rem;opacity:0.75;}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px;position:relative;overflow-y:auto;}
.auth-panel-inner{width:100%;max-width:380px;}
.auth-back-link{position:absolute;top:20px;left:24px;font-size:0.85rem;color:#8a6b73;display:inline-flex;align-items:center;gap:6px;}
html[dir="rtl"] .auth-back-link{left:auto;right:24px;}
.auth-panel-head{margin-bottom:26px;}
.auth-panel-head h2{font-family:var(--serif);font-size:1.7rem;color:var(--maroon-deep);margin:0 0 6px;}
.auth-panel-head p{font-size:0.88rem;color:#6b4f56;margin:0;}
@media(max-width:820px){
  .auth-page{grid-template-columns:1fr;}
  .auth-brand{display:none;}
}
.auth-tabs{display:flex;gap:8px;margin-bottom:22px;}
.auth-tab{flex:1;padding:9px;border-radius:20px;border:1px solid var(--line);background:var(--paper);color:var(--maroon-deep);font-weight:600;font-size:0.88rem;cursor:pointer;transition:all .2s;}
.auth-tab.active{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}
.auth-form[hidden]{display:none;}
.auth-form label{display:block;font-size:0.78rem;font-weight:600;color:var(--maroon-deep);margin-bottom:14px;}
.auth-form label input,.auth-form label select{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;
  font-family:var(--sans);font-size:0.92rem;background:var(--paper);color:var(--ink);
}
.auth-form label input:focus,.auth-form label select:focus{outline:2px solid var(--maroon);outline-offset:1px;}
.auth-form .lib-submit{width:100%;margin-top:4px;}
.auth-error{color:#B4213D;font-size:0.8rem;margin:10px 0 0;min-height:1em;}

.progress-panel{margin-top:26px;border-top:1px solid var(--line);padding-top:22px;}
.progress-panel h4{font-family:var(--serif);font-size:1.05rem;color:var(--maroon-deep);margin:0 0 14px;}
.progress-item{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:var(--paper);}
.progress-item b{color:var(--maroon-deep);font-size:0.85rem;}
.progress-item span{font-size:0.72rem;color:#8a6b73;margin-inline-start:8px;}
.progress-item p{margin:6px 0 0;font-size:0.85rem;color:#5a4148;}

/* ===== student / teacher dashboard (full page after sign in) ===== */
.dashboard-page{position:fixed;inset:0;z-index:280;background:var(--paper);overflow-y:auto;}
.dashboard-page[hidden]{display:none;}
.dash-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;gap:14px;flex-wrap:wrap;}
.dash-top-left{display:flex;align-items:center;gap:12px;}
.dash-avatar{width:38px;height:38px;border-radius:50%;background:var(--maroon-deep);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:0.95rem;flex:none;}
.dash-who b{display:block;font-size:0.92rem;color:var(--maroon-deep);}
.dash-who span{font-size:0.76rem;color:#8a6b73;}
.dash-top-actions{display:flex;align-items:center;gap:10px;}
.dash-link-btn{font-size:0.84rem;color:var(--maroon-deep);font-weight:600;border-bottom:1px solid transparent;}
.dash-link-btn:hover{border-color:var(--maroon-deep);}
.dash-body{display:grid;grid-template-columns:220px 1fr;gap:0;max-width:1180px;margin:0 auto;}
.dash-sidebar{padding:26px 14px;border-right:1px solid var(--line);}
html[dir="rtl"] .dash-sidebar{border-right:none;border-left:1px solid var(--line);}
.dash-tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;border-radius:8px;
  font-size:0.88rem;color:#6b4f56;background:none;border:none;cursor:pointer;margin-bottom:4px;transition:background .2s,color .2s;}
html[dir="rtl"] .dash-tab{text-align:right;}
.dash-tab:hover{background:rgba(92,26,40,0.06);}
.dash-tab.active{background:var(--maroon-deep);color:#fff;}
.dash-main{padding:30px 26px 70px;min-width:0;}
.dash-view[hidden]{display:none;}
.dash-view h3{font-family:var(--serif);font-size:1.4rem;color:var(--maroon-deep);margin:0 0 6px;}
.dash-view>p.dash-sub{font-size:0.88rem;color:#6b4f56;margin:0 0 24px;}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:30px;}
.dash-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;}
.dash-stat b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--maroon-deep);}
.dash-stat span{font-size:0.78rem;color:#8a6b73;}
.notif-item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--maroon-deep);border-radius:8px;
  padding:14px 16px;margin-bottom:12px;}
html[dir="rtl"] .notif-item{border-left:none;border-right:3px solid var(--maroon-deep);}
.notif-item b{display:block;color:var(--maroon-deep);font-size:0.92rem;margin-bottom:4px;}
.notif-item p{margin:0 0 6px;font-size:0.86rem;color:#5a4148;line-height:1.5;}
.notif-item span{font-size:0.72rem;color:#a4838a;}
.student-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:10px;flex-wrap:wrap;}
.student-row b{color:var(--maroon-deep);font-size:0.9rem;}
.student-row span{font-size:0.78rem;color:#8a6b73;}
.profile-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;max-width:460px;}
@media(max-width:760px){
  .dash-body{grid-template-columns:1fr;}
  .dash-sidebar{display:flex;overflow-x:auto;gap:4px;border-right:none;border-bottom:1px solid var(--line);padding:14px;}
  html[dir="rtl"] .dash-sidebar{border-left:none;}
  .dash-tab{white-space:nowrap;margin-bottom:0;}
}

  max-width:1136px;margin:0 auto;background:linear-gradient(120deg,#3E0F1B,#5C1A28 60%,#7a2c3c);
  border-radius:10px;padding:50px 60px;display:flex;align-items:center;justify-content:space-between;gap:30px;
  color:#F6E9E3;flex-wrap:wrap;position:relative;overflow:hidden;
}

/* collaboration */
.collab{padding:110px 0;background:var(--graphite);color:#EDEFF2;position:relative;overflow:hidden;}
.collab-head{max-width:620px;margin:0 auto 60px;text-align:center;}
.collab-head .kicker{font-family:var(--serif);font-style:italic;color:var(--cyan);font-size:1.1rem;margin-bottom:10px;}
.collab-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 16px;}
.collab-head p{opacity:0.7;line-height:1.6;}
.collab-flow{display:flex;align-items:center;justify-content:center;position:relative;max-width:880px;margin:0 auto 56px;flex-wrap:wrap;gap:0;}
.collab-flow::before{content:'';position:absolute;top:22px;left:5%;right:5%;height:2px;background:rgba(255,255,255,0.12);}
.collab-flow .dot{position:absolute;top:19px;width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:travel 6s ease-in-out infinite;box-shadow:0 0 12px var(--cyan);}
@keyframes travel{
  0%{left:5%;}
  25%{left:27.5%;}
  50%{left:50%;}
  75%{left:72.5%;}
  100%{left:5%;}
}
.collab-node{flex:1;min-width:130px;text-align:center;position:relative;z-index:2;}
.collab-node .mark{width:44px;height:44px;border-radius:50%;background:var(--graphite-soft);border:2px solid rgba(95,224,200,0.4);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--cyan);font-size:0.95rem;}
.collab-node span{font-size:0.85rem;opacity:0.8;}
@media(max-width:700px){.collab-flow{flex-direction:column;gap:26px;}.collab-flow::before,.collab-flow .dot{display:none;}}
.collab-cta{text-align:center;}
.collab-cta .btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.dm-btn{padding:16px 32px;border-radius:3px;font-weight:600;font-size:1rem;border:2px solid var(--cyan);color:var(--cyan);transition:all .25s;display:inline-block;}
.dm-btn.solid{background:var(--cyan);color:var(--graphite);border-color:var(--cyan);}
.dm-btn:hover{background:var(--cyan);color:var(--graphite);}
.collab-audience{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px;}
.collab-audience span{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);padding:6px 14px;border-radius:20px;font-size:0.82rem;opacity:0.85;}

/* count-up reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}

/* SPLIT */
.split{position:relative;display:flex;min-height:640px;overflow:hidden;}
@media(max-width:900px){.split{flex-direction:column;min-height:auto;}}
.split-side{position:relative;flex:1;padding:70px 50px;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:900px){.split-side{padding:60px 30px;}}
.side-it{background:var(--graphite);color:#EDEFF2;}
.side-lang{background:var(--peach);color:var(--ink);}
.split-side .eyebrow{font-family:var(--serif);font-style:italic;font-size:1.05rem;opacity:0.7;margin-bottom:6px;}
.split-side h2{font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);font-weight:600;margin:0 0 20px;max-width:420px;}
.side-it h2{color:#fff;}
.side-lang h2{color:var(--maroon-deep);}
.split-side p.desc{max-width:420px;line-height:1.6;margin:0 0 30px;opacity:0.85;}
.dept-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.dept-chip{padding:9px 16px;border-radius:3px;font-size:0.9rem;font-weight:500;}
.side-it .dept-chip{background:rgba(95,224,200,0.1);border:1px solid rgba(95,224,200,0.35);color:var(--cyan);}
.side-lang .dept-chip{background:rgba(92,26,40,0.07);border:1px solid rgba(92,26,40,0.3);color:var(--maroon-deep);}
/* coordinated IT department accents */
.dept-chip.c-prog{background:rgba(95,224,200,0.1);border:1px solid rgba(95,224,200,0.4);color:#5FE0C8;}
.dept-chip.c-net{background:rgba(227,179,77,0.1);border:1px solid rgba(227,179,77,0.4);color:#E3B34D;}
.dept-chip.c-office{background:rgba(159,183,224,0.1);border:1px solid rgba(159,183,224,0.4);color:#9FB7E0;}
.dept-chip.c-iot{background:rgba(227,139,107,0.1);border:1px solid rgba(227,139,107,0.4);color:#E38B6B;}
.dept-chip.new{position:relative;}
.dept-chip.new::after{content:'NEW';font-size:0.6rem;font-weight:700;position:absolute;top:-9px;inset-inline-end:-8px;background:var(--maroon);color:#fff;padding:2px 6px;border-radius:2px;letter-spacing:0.03em;}
.side-it .dept-chip.new::after{background:var(--cyan-dim);}
.explore-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.98rem;padding-bottom:2px;border-bottom:2px solid currentColor;width:fit-content;}
.side-it .explore-link{color:var(--cyan);}
.side-lang .explore-link{color:var(--maroon);}
@media(min-width:901px){
  .split-side.side-it{clip-path:polygon(0 0,100% 0,94% 100%,0 100%);margin-right:-6%;padding-right:9%;}
  .split-side.side-lang{padding-left:9%;}
}

/* METHOD */
.method{padding:110px 0;}
.method .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;text-align:center;margin-bottom:10px;}
.method h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.6rem);text-align:center;color:var(--maroon-deep);margin:0 0 64px;}
.method-track{display:flex;justify-content:space-between;position:relative;max-width:860px;margin:0 auto;}
.method-track::before{content:'';position:absolute;top:16px;left:6%;right:6%;height:2px;background:var(--line);}
.method-step{position:relative;text-align:center;flex:1;}
.method-step .node{width:34px;height:34px;border-radius:3px;background:var(--paper);border:2px solid var(--maroon-deep);margin:0 auto 22px;position:relative;z-index:2;transform:rotate(45deg);}
.method-step h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 8px;color:var(--maroon-deep);}
.method-step p{font-size:0.9rem;color:#5a4148;line-height:1.5;max-width:160px;margin:0 auto;}
@media(max-width:700px){.method-track{flex-direction:column;gap:36px;}.method-track::before{display:none;}}

/* VIDEO SHOWCASE */
.video-section{padding:110px 0;background:var(--graphite-soft);color:#EDEFF2;}
.video-head{max-width:600px;margin:0 auto 60px;text-align:center;}
.video-head .kicker{font-family:var(--serif);font-style:italic;color:var(--cyan);font-size:1.1rem;margin-bottom:10px;}
.video-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);margin:0 0 16px;}
.video-head p{opacity:0.7;line-height:1.6;}

.video-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;}
@media(max-width:800px){.video-grid{grid-template-columns:1fr;}}

.video-feature{position:relative;border-radius:8px;overflow:hidden;background:#0B1A18;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;}
.vf-scene{position:absolute;inset:0;}
.vf-scene svg{width:100%;height:100%;}
.vf-overlay{position:relative;z-index:2;padding:26px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.75));}
.vf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,0.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;transition:transform .25s;}
.video-feature:hover .vf-play{transform:translate(-50%,-50%) scale(1.08);}
.vf-play svg{width:26px;height:26px;fill:#fff;margin-left:3px;}
.vf-overlay .cat{font-size:0.75rem;color:var(--cyan);margin-bottom:6px;font-weight:600;}
.vf-overlay h3{font-family:var(--serif);font-size:1.4rem;margin:0 0 6px;}
.vf-overlay .meta{font-size:0.8rem;opacity:0.65;}

.video-list{display:flex;flex-direction:column;gap:16px;}
.vitem{display:flex;gap:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:6px;padding:12px;transition:background .2s;cursor:pointer;}
.vitem:hover{background:rgba(255,255,255,0.06);}
.vthumb{position:relative;width:120px;min-width:120px;height:76px;border-radius:4px;overflow:hidden;}
.vthumb svg{width:100%;height:100%;}
.vthumb .dur{position:absolute;bottom:5px;right:5px;background:rgba(0,0,0,0.7);color:#fff;font-size:0.68rem;padding:1px 5px;border-radius:2px;}
.vthumb .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--cyan);}
.vitem-info h4{margin:0 0 5px;font-size:0.95rem;font-weight:600;}
.vitem-info .meta{font-size:0.76rem;opacity:0.55;}

/* automation strip */
.auto-strip{padding:90px 0;background:var(--paper);}
.auto-strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:800px){.auto-strip .wrap{grid-template-columns:1fr;}}
.auto-copy .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;margin-bottom:10px;}
.auto-copy h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.5rem);color:var(--maroon-deep);margin:0 0 16px;}
.auto-copy p{color:#4a3339;line-height:1.65;max-width:420px;margin-bottom:24px;}
.auto-copy .explore-link{color:var(--maroon);}
.auto-diagram{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;}
.auto-node{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px;font-size:0.85rem;font-weight:600;color:var(--maroon-deep);text-align:center;min-width:100px;}
.auto-arrow{color:var(--maroon);font-size:1.3rem;padding:0 10px;}

/* JOURNEY */
.journey{padding:100px 0;background:var(--maroon-deep);color:#F6E9E3;}
.journey .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start;}
@media(max-width:800px){.journey .wrap{grid-template-columns:1fr;gap:40px;}}
.journey-head .kicker{font-family:var(--serif);font-style:italic;color:var(--peach);font-size:1.1rem;margin-bottom:10px;}
.journey-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);margin:0 0 20px;}
.journey-head p{opacity:0.75;line-height:1.6;max-width:360px;}
.journey-steps{display:flex;flex-direction:column;}
.jstep{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.12);}
.jstep:last-child{border-bottom:none;}
.jstep .num{font-family:var(--serif);font-size:1.1rem;color:var(--peach);min-width:34px;}
.jstep h4{margin:0 0 4px;font-size:1.05rem;font-weight:600;}
.jstep p{margin:0;font-size:0.9rem;opacity:0.65;line-height:1.5;}


/* FOOTER */
footer{background:var(--graphite);color:#c8ccd2;padding:70px 0 30px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;}}
.foot-brand img{height:36px;margin-bottom:14px;}
.foot-brand p{font-family:var(--serif);font-style:italic;color:#8fa3a0;font-size:0.95rem;}
footer h5{color:#fff;font-size:0.9rem;margin:0 0 16px;font-weight:600;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
footer a{font-size:0.88rem;opacity:0.75;transition:opacity .2s;}
footer a:hover{opacity:1;color:var(--cyan);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;font-size:0.82rem;opacity:0.55;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

.wa-float{position:fixed;bottom:26px;right:26px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -6px rgba(0,0,0,0.35);transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}html{scroll-behavior:auto;}}

/* ===== LANGUAGE SWITCHER + RTL ===== */
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1.5px solid var(--line);
  color:var(--maroon-deep);
  padding:7px 12px;border-radius:999px;
  font-size:0.8rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.lang-btn:hover{background:var(--maroon-deep);border-color:var(--maroon-deep);color:var(--peach-soft);}
.lang-btn:active{transform:scale(0.96);}
.lang-btn .globe{font-size:1rem;line-height:1;}
.lang-btn .lang-code{letter-spacing:0.02em;}
@media(max-width:1180px){
  .lang-btn{padding:7px 11px;font-size:0.8rem;}
}
@media(max-width:560px){
  .nav-cta{display:none;}
}

/* Arabic typography */
html[lang="ar"] body{font-family:'Tajawal','Cairo',var(--sans);}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] .brand span,
html[lang="ar"] .stat b,
html[lang="ar"] .hero-word{font-family:'Cairo','Tajawal',var(--serif);font-style:normal;}
html[lang="ar"] .hero h1{line-height:1.35;}
html[lang="ar"] .hero-word{line-height:1.5;}
html[lang="ar"] .foot-brand p{font-style:normal;}

/* RTL layout fixes */
html[dir="rtl"] .wa-float{right:auto;left:26px;}
html[dir="rtl"] .lib-form label,
html[dir="rtl"] .lib-card .rm{text-align:right;}
html[dir="rtl"] .lib-card .rm{right:auto;left:10px;}
html[dir="rtl"] .approach-band .track{animation-direction:reverse;}
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea{text-align:right;direction:rtl;}
html[dir="rtl"] .auto-arrow{transform:scaleX(-1);}
html[dir="rtl"] .hw-letters{direction:rtl;}
html[dir="rtl"] .club-num{left:auto;right:14px;}
html[dir="rtl"] .club-logo{right:auto;left:12px;}
html[dir="rtl"] .club-title-on-photo{text-align:right;}
html[dir="rtl"] .club-body p,
html[dir="rtl"] .club-quote{text-align:right;}


/* ===== ANIMATED HERO BACKGROUND (looping scene, no player chrome) ===== */
.hero{min-height:92vh;display:flex;align-items:center;padding:120px 0 90px;}
.hero-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.scene-svg{
  position:absolute;inset:0;width:100%;height:100%;
  animation:sceneBreathe 26s ease-in-out infinite alternate;
  transform-origin:55% 60%;
}
@keyframes sceneBreathe{0%{transform:scale(1.02);}100%{transform:scale(1.12);}}
.scene-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 58% 48% at 50% 42%, rgba(252,250,246,0.92) 0%, rgba(252,250,246,0.72) 45%, rgba(252,250,246,0.10) 78%),
    linear-gradient(180deg, rgba(252,250,246,0.55) 0%, rgba(252,250,246,0) 30%, rgba(252,250,246,0.35) 100%);
}
.scene-grain{
  position:absolute;inset:0;opacity:0.16;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(92,26,40,0.5) 0.5px, transparent 0.6px);
  background-size:4px 4px;
  animation:grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift{0%{background-position:0 0;}33%{background-position:2px 1px;}66%{background-position:1px 2px;}100%{background-position:0 0;}}
.hero-inner{position:relative;z-index:2;}
.hero-cols{z-index:1;}
.floaters{z-index:1;}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.72);border:1px solid var(--line);
  padding:7px 15px;border-radius:999px;font-size:0.8rem;font-weight:600;
  color:var(--maroon-deep);margin-bottom:22px;backdrop-filter:blur(6px);
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#2D8C79;animation:dotPulse 1.9s ease-out infinite;}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(45,140,121,.5);}70%{box-shadow:0 0 0 10px rgba(45,140,121,0);}100%{box-shadow:0 0 0 0 rgba(45,140,121,0);}}

/* chat bubbles drifting over the scene */
.chat-bubbles{position:absolute;inset:0;}
.cb{
  position:absolute;background:rgba(255,255,255,0.85);color:var(--maroon-deep);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:0.85rem;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 22px -14px rgba(62,15,27,0.6);
  animation:cbFloat 9s ease-in-out infinite;opacity:0;
}
@keyframes cbFloat{
  0%{opacity:0;transform:translateY(16px) scale(.92);}
  12%{opacity:1;transform:translateY(0) scale(1);}
  62%{opacity:1;transform:translateY(-14px) scale(1);}
  80%,100%{opacity:0;transform:translateY(-26px) scale(.96);}
}
.cb1{left:7%;top:30%;animation-delay:.4s;}
.cb2{right:9%;top:24%;animation-delay:2.6s;}
.cb3{left:14%;bottom:24%;animation-delay:4.4s;}
.cb4{right:13%;bottom:28%;animation-delay:6s;}
.cb5{left:47%;top:13%;animation-delay:7.4s;}
@media(max-width:900px){.cb3,.cb4,.cb5{display:none;}.cb1{left:3%;top:22%;}.cb2{right:3%;top:18%;}}

/* scene motion */
.scene-svg .blob{animation:blobFloat 14s ease-in-out infinite;}
.scene-svg .bl2{animation-duration:18s;animation-delay:1.5s;}
.scene-svg .bl3{animation-duration:11s;animation-delay:3s;}
@keyframes blobFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(26px,-30px);}}
.scene-svg .sun-wrap{transform-origin:1235px 165px;animation:sunPulse 7s ease-in-out infinite;}
@keyframes sunPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.scene-svg .rays{transform-origin:1235px 165px;animation:raySpin 46s linear infinite;}
@keyframes raySpin{to{transform:rotate(360deg);}}
.scene-svg .cloud{animation:cloudDrift 34s linear infinite;}
.scene-svg .c2{animation-duration:46s;animation-delay:-8s;}
.scene-svg .c3{animation-duration:58s;animation-delay:-20s;}
@keyframes cloudDrift{0%{transform:translateX(-260px);}100%{transform:translateX(1700px);}}
.scene-svg .plane{animation:planeFly 22s linear infinite;offset-rotate:0deg;}
@keyframes planeFly{
  0%{transform:translate(-220px,330px) rotate(-6deg);opacity:0;}
  8%{opacity:.9;}
  50%{transform:translate(720px,230px) rotate(4deg);}
  92%{opacity:.9;}
  100%{transform:translate(1680px,300px) rotate(-3deg);opacity:0;}
}
.scene-svg .riser{animation:riseUp 13s ease-in infinite;opacity:0;}
.scene-svg .r2{animation-delay:2.1s;}
.scene-svg .r3{animation-delay:4.3s;}
.scene-svg .r4{animation-delay:6.2s;}
.scene-svg .r5{animation-delay:8.4s;}
.scene-svg .r6{animation-delay:10.5s;}
@keyframes riseUp{
  0%{opacity:0;transform:translateY(0) rotate(-6deg);}
  12%{opacity:.85;}
  70%{opacity:.5;}
  100%{opacity:0;transform:translateY(-560px) rotate(10deg);}
}
.scene-svg .hill-a{animation:hillSway 16s ease-in-out infinite;}
.scene-svg .hill-b{animation:hillSway 21s ease-in-out infinite reverse;}
@keyframes hillSway{0%,100%{transform:translateX(0);}50%{transform:translateX(-18px);}}
.scene-svg .tree{transform-box:fill-box;transform-origin:bottom center;animation:treeSway 5.5s ease-in-out infinite;}
.scene-svg .t2{animation-duration:6.6s;animation-delay:.8s;}
.scene-svg .t3{animation-duration:4.8s;animation-delay:1.6s;}
@keyframes treeSway{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
.scene-svg .kid .body{animation:kidBob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center;}
.scene-svg .kB .body{animation-duration:4.1s;animation-delay:.5s;}
@keyframes kidBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.scene-svg .eye{animation:blink 5s infinite;transform-box:fill-box;transform-origin:center;}
.scene-svg .eye.d1{animation-delay:1.7s;}
@keyframes blink{0%,94%,100%{transform:scaleY(1);}97%{transform:scaleY(0.08);}}
.scene-svg .wave{transform-box:fill-box;transform-origin:bottom center;animation:waveHand 2.6s ease-in-out infinite;}
@keyframes waveHand{0%,100%{transform:rotate(8deg);}50%{transform:rotate(-24deg);}}
.scene-svg .code-line{stroke-dasharray:70;stroke-dashoffset:70;animation:codeDraw 3.4s ease-in-out infinite;}
.scene-svg .code-line.l2{animation-delay:.7s;}
@keyframes codeDraw{0%{stroke-dashoffset:70;}45%,72%{stroke-dashoffset:0;}100%{stroke-dashoffset:70;}}
.scene-svg .book{transform-box:fill-box;transform-origin:center;animation:bookTilt 6s ease-in-out infinite;}
@keyframes bookTilt{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

html[dir="rtl"] .scene-svg{transform-origin:45% 60%;}

@media(max-width:900px){
  .hero{min-height:88vh;padding:90px 0 70px;}
  .scene-scrim{background:
    radial-gradient(ellipse 80% 46% at 50% 40%, rgba(252,250,246,0.94) 0%, rgba(252,250,246,0.78) 50%, rgba(252,250,246,0.18) 82%),
    linear-gradient(180deg, rgba(252,250,246,0.6) 0%, rgba(252,250,246,0) 32%, rgba(252,250,246,0.4) 100%);}
}

/* ===================== v3 additions: how-it-works, live sessions, polish ===================== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--maroon),#E3B34D);z-index:300;pointer-events:none;}

/* how it works */
.how{padding:100px 0 90px;}
.how-head{text-align:center;max-width:680px;margin:0 auto 50px;}
.how-head .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;margin-bottom:10px;}
.how-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);color:var(--maroon-deep);margin:0 0 14px;line-height:1.1;}
.how-head p{color:#6b4f56;margin:0;line-height:1.6;}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.how-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 22px 26px;position:relative;transition:transform .3s, box-shadow .3s;overflow:hidden;}
.how-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--maroon),#E3B34D);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.how-card:hover{transform:translateY(-6px);box-shadow:0 22px 38px -20px rgba(92,26,40,.35);}
.how-card:hover::after{transform:scaleX(1);}
.how-card .hn{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--maroon);opacity:.16;line-height:1;position:absolute;top:14px;right:18px;}
.how-card .hi{width:46px;height:46px;border-radius:12px;background:var(--maroon-deep);color:var(--peach-soft);display:grid;place-items:center;margin-bottom:18px;}
.how-card .hi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.how-card h4{font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);margin:0 0 8px;}
.how-card p{margin:0;font-size:.88rem;line-height:1.55;color:#6b4f56;}
@media(max-width:1000px){.how-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr;}.how{padding:70px 0 60px;}}

/* public live-sessions section */
.sessions{padding:100px 0;background:var(--maroon-deep);color:var(--peach-soft);position:relative;overflow:hidden;}
.sessions::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-180px;background:radial-gradient(circle,rgba(227,179,77,.22),transparent 65%);pointer-events:none;}
.sessions-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;}
.sessions .kicker{font-family:var(--serif);font-style:italic;color:#F3B9A0;font-size:1.1rem;margin-bottom:10px;}
.sessions h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.9rem);color:#fff;margin:0 0 16px;line-height:1.1;}
.sessions .sess-lead{opacity:.85;line-height:1.65;margin:0 0 24px;max-width:520px;}
.sess-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;}
.sess-points li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.5;}
.sess-points li::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;background:#E3B34D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E0F1B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/12px no-repeat;}
.sess-cta{display:flex;gap:12px;flex-wrap:wrap;}
.sess-cta .cta-solid{background:var(--peach-soft);color:var(--maroon-deep);border:none;padding:14px 26px;border-radius:6px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;transition:transform .2s, background .2s;}
.sess-cta .cta-solid:hover{background:#fff;transform:translateY(-2px);}
.sess-cta .cta-ghost{background:transparent;color:var(--peach-soft);border:1.5px solid rgba(247,228,212,.45);padding:13px 24px;border-radius:6px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;transition:all .2s;}
.sess-cta .cta-ghost:hover{border-color:var(--peach-soft);background:rgba(247,228,212,.08);}
.sess-mock{background:#fff;color:var(--ink);border-radius:22px;padding:22px 22px 24px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6);transform:rotate(1.6deg);transition:transform .5s ease;}
.sess-mock:hover{transform:rotate(0deg) translateY(-4px);}
.sess-mock-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
.sess-mock-head b{font-family:var(--serif);font-size:1.1rem;color:var(--maroon-deep);}
.sess-mock-head span{font-size:.7rem;background:rgba(92,26,40,.08);color:var(--maroon);padding:4px 10px;border-radius:20px;font-weight:600;}
.sess-mock-sub{font-size:.78rem;color:#8a6b73;margin:0 0 8px;}
.mock-slot{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;margin-top:10px;background:#fff;}
.mock-slot .md{flex:none;width:54px;text-align:center;background:var(--maroon-deep);color:var(--peach-soft);border-radius:10px;padding:7px 2px;}
.mock-slot .md b{display:block;font-family:var(--serif);font-size:1rem;line-height:1.1;}
.mock-slot .md span{font-size:.64rem;opacity:.85;}
.mock-slot .mi{flex:1;min-width:0;}
.mock-slot .mi b{font-size:.9rem;color:var(--maroon-deep);display:block;}
.mock-slot .mi span{font-size:.76rem;color:#8a6b73;}
.sess-mock-head span.live{background:#e6f4ea;color:#1e6b34;}
.sess-mock-head span.live::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#1e8e4a;margin-inline-end:6px;vertical-align:middle;}
button.mb{border:0;cursor:pointer;font-family:inherit;}
.mock-slot .mb{flex:none;font-size:.78rem;font-weight:600;padding:8px 14px;border-radius:8px;background:var(--maroon-deep);color:var(--peach-soft);}
.mock-slot.booked .mb{background:#e6f4ea;color:#1e6b34;}
@media(max-width:900px){.sessions-grid{grid-template-columns:1fr;gap:40px;}.sess-mock{transform:none;}.sessions{padding:70px 0;}}

/* dashboard: live sessions */
.tz-note{font-size:.78rem;color:#8a6b73;margin:-12px 0 18px;}
.tz-note b{color:var(--maroon-deep);font-weight:600;}
.sess-notice{min-height:1.2em;margin:0 0 10px;font-size:.86rem;}
.sess-notice.ok{color:#1e6b34;}
.sess-h{font-family:var(--serif);font-size:1.05rem;color:var(--maroon-deep);margin:26px 0 12px;}
.sess-list{display:grid;gap:12px;}
.sess-card{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;flex-wrap:wrap;transition:box-shadow .25s,transform .25s;}
.sess-card:hover{box-shadow:0 14px 26px -16px rgba(92,26,40,.3);transform:translateY(-2px);}
.sess-date{flex:none;width:62px;text-align:center;background:var(--maroon-deep);color:var(--peach-soft);border-radius:10px;padding:8px 4px;}
.sess-date b{display:block;font-family:var(--serif);font-size:1.4rem;line-height:1;}
.sess-date span{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.sess-info{flex:1;min-width:200px;}
.sess-info h5{margin:0 0 3px;font-family:var(--serif);font-size:1rem;color:var(--maroon-deep);}
.sess-info .meta{font-size:.78rem;color:#8a6b73;}
.sess-rel{color:var(--maroon);font-weight:600;}
/* booking: day strip, time slots, confirmation, plan banner */
.day-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.day-chip{flex:none;scroll-snap-align:start;width:68px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 4px;text-align:center;cursor:pointer;font:inherit;color:var(--maroon-deep);transition:all .2s;}
.day-chip small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#8a6b73;}
.day-chip b{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.2;}
.day-chip i{display:block;font-style:normal;font-size:.66rem;color:var(--maroon);font-weight:600;}
.day-chip:hover:not(:disabled){border-color:var(--maroon);}
.day-chip.on{background:var(--maroon-deep);border-color:var(--maroon-deep);color:var(--peach-soft);}
.day-chip.on small,.day-chip.on i{color:var(--peach-soft);}
.day-chip.empty{opacity:.45;cursor:default;}
.slot-time{flex:none;min-width:86px;text-align:center;border-inline-end:1px solid var(--line);padding-inline-end:14px;}
.slot-time b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--maroon-deep);white-space:nowrap;}
.slot-time span{font-size:.72rem;color:#8a6b73;}
.sess-confirm{width:100%;flex-basis:100%;background:#fdf6ee;border:1px solid #f1dcc4;border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sess-confirm p{margin:0 0 4px;flex-basis:100%;font-size:.88rem;color:#4a343a;}
.sess-confirm small{color:#8a6b73;}
.sess-plan{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff7ec;border:1px solid #f1dcc4;border-radius:14px;padding:14px 18px;margin-bottom:8px;}
.sess-plan>span{font-size:1.6rem;}
.sess-plan>div{flex:1;min-width:200px;}
.sess-plan b{color:var(--maroon-deep);}
.sess-plan p{margin:2px 0 0;font-size:.84rem;color:#6a5057;}
.sess-plan.wait{background:#eef5fc;border-color:#cfe0f2;}
.sess-note{display:block;margin-top:6px;font-size:.76rem;color:#a35a00;}
.sess-btn.wait{cursor:default;opacity:.75;font-weight:500;}
.sess-card.live{border-color:#1e8e4a;box-shadow:0 0 0 3px rgba(30,142,74,.12);}
.live-dot{display:inline-block;vertical-align:middle;font-family:var(--sans,inherit);font-size:.68rem;font-weight:700;color:#fff;background:#1e8e4a;border-radius:20px;padding:3px 9px;margin-inline-start:6px;animation:recPulse 1.4s ease-in-out infinite;}
@media(max-width:560px){.slot-time{min-width:70px;padding-inline-end:10px;}.slot .sess-actions{width:auto;}.sess-confirm .sess-btn{flex:1;text-align:center;}}
.seat-bar{height:6px;background:#f0e3e5;border-radius:6px;overflow:hidden;margin-top:9px;max-width:220px;}
.seat-bar i{display:block;height:100%;background:var(--maroon);border-radius:6px;}
.sess-people{font-size:.76rem;color:#6b4f56;margin-top:6px;}
.sess-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sess-btn{display:inline-block;background:var(--maroon-deep);color:var(--peach-soft);border:1px solid var(--maroon-deep);padding:9px 16px;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;text-decoration:none;line-height:1.2;}
.sess-btn:hover{background:var(--maroon);}
.sess-btn.ghost{background:transparent;color:var(--maroon-deep);}
.sess-btn.ghost:hover{background:rgba(92,26,40,.07);}
.sess-btn:disabled{opacity:.5;cursor:wait;}
.sess-badge{font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:20px;background:#f0e3e5;color:var(--maroon);}
.sess-badge.ok{background:#e6f4ea;color:#1e6b34;}
.next-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon));color:var(--peach-soft);border-radius:14px;padding:22px 24px;margin-bottom:26px;}
.next-card .kick{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;}
.next-card h4{font-family:var(--serif);font-size:1.3rem;margin:4px 0;color:#fff;}
.next-card p{margin:0;font-size:.86rem;opacity:.88;}
.next-card .sess-btn{background:var(--peach-soft);color:var(--maroon-deep);border-color:var(--peach-soft);}
.next-card .sess-btn:hover{background:#fff;}
@media(max-width:560px){.sess-card{padding:14px;}.sess-actions{width:100%;}}

/* the `hidden` attribute must always win (teacher-only forms/tabs were showing for students) */
[hidden]{display:none !important;}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.3rem);}
@media(max-width:560px){.nav-actions .icon-btn{display:none;}.nav-actions{gap:6px;}}

/* ===================== v4: video-led hero, Watch & Learn, UX polish ===================== */
/* hero becomes two columns: copy on the start side, a phone playing real lessons on the other */
.hero-inner{max-width:1200px;width:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;text-align:start;}
.hero-copy{position:relative;z-index:2;}
.hero p.sub{margin:0 0 34px;max-width:520px;}
.hero-paths{justify-content:flex-start;}
.stat-strip{justify-content:flex-start;margin-top:44px;gap:38px;}
.stat{text-align:start;}
.scene-svg .kids{display:none;}
.chat-bubbles{display:none;}
.hero-badge{margin-bottom:22px;}

.hero-phone{position:relative;justify-self:center;width:min(310px,78vw);z-index:2;}
.phone{position:relative;aspect-ratio:9/16;border-radius:40px;background:#1b0a10;padding:9px;cursor:pointer;
  box-shadow:0 60px 90px -34px rgba(62,15,27,.6),0 0 0 1.5px rgba(255,255,255,.55) inset,0 0 0 6px rgba(92,26,40,.08);
  transform:rotate(3.2deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.phone:hover{transform:rotate(0deg) translateY(-6px);}
.phone::before{content:'';position:absolute;top:17px;left:50%;width:74px;height:20px;border-radius:14px;background:#0c0508;transform:translateX(-50%);z-index:4;}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:32px;display:block;background:#12070b;}
.phone-ui{position:absolute;inset:9px;border-radius:32px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 22%,transparent 62%,rgba(20,5,10,.78) 100%);}
.phone-sound{pointer-events:auto;position:absolute;top:44px;right:14px;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;transition:background .2s,transform .2s;}
.phone-sound:hover{background:rgba(255,255,255,.35);transform:scale(1.08);}
.phone-sound svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.phone-sound .ic-on{display:none;}
.phone-sound.on .ic-on{display:block;}
.phone-sound.on .ic-off{display:none;}
.phone-cap{position:absolute;left:18px;right:18px;bottom:20px;color:#fff;}
.phone-cap span{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:600;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.phone-dots{display:flex;gap:6px;pointer-events:auto;}
.phone-dots i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.35);cursor:pointer;position:relative;overflow:hidden;}
.phone-dots i.on{background:#fff;}
.hp-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--maroon-deep);
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 30px -16px rgba(62,15,27,.45);animation:chipFloat 6s ease-in-out infinite;white-space:nowrap;}
.hp-chip .dot{width:9px;height:9px;border-radius:50%;background:#2D8C79;animation:dotPulse 1.9s ease-out infinite;}
.hp-chip svg{width:16px;height:16px;fill:#E3B34D;}
.hp-chip.c1{left:-64px;top:14%;}
.hp-chip.c2{right:-46px;top:46%;animation-delay:-2s;}
.hp-chip.c3{left:-40px;bottom:18%;animation-delay:-4s;font-family:var(--serif);font-style:italic;font-size:1rem;}
@keyframes chipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hp-more{display:flex;justify-content:center;gap:8px;margin-top:26px;font-weight:600;font-size:.92rem;color:var(--maroon-deep);}
.hp-more span{transition:transform .25s;}
.hp-more:hover span{transform:translateX(5px);}
[dir="rtl"] .hp-more span{transform:scaleX(-1);}
[dir="rtl"] .hp-more:hover span{transform:scaleX(-1) translateX(5px);}
@media(max-width:980px){
  .hero{padding:104px 0 60px;}
  .hero-inner{grid-template-columns:1fr;gap:54px;text-align:center;}
  .hero p.sub{margin:0 auto 30px;}
  .hero-paths,.stat-strip{justify-content:center;}
  .stat{text-align:center;}
  .hp-chip.c1{left:-26px;}.hp-chip.c2{right:-20px;}.hp-chip.c3{left:-14px;}
}
@media(max-width:480px){.hp-chip{font-size:.74rem;padding:8px 12px;}.hp-chip.c1{left:-10px;}.hp-chip.c2{right:-6px;}.hp-chip.c3{left:-4px;}}

/* Watch & Learn */
.watch{padding:100px 0 110px;background:linear-gradient(180deg,#FFF9F3 0%,#F8E9DB 100%);position:relative;}
.watch-head{text-align:center;max-width:680px;margin:0 auto 50px;}
.watch-head .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;margin-bottom:10px;}
.watch-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);color:var(--maroon-deep);margin:0 0 14px;line-height:1.1;}
.watch-head p{color:#6b4f56;margin:0;line-height:1.6;}
.watch-grid{display:grid;grid-template-columns:330px 1fr;gap:44px;align-items:start;}
.watch-player{position:sticky;top:96px;}
.wp-frame{position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#12070b;box-shadow:0 40px 70px -34px rgba(62,15,27,.55);}
.wp-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.wp-meta{padding:20px 4px 0;}
.wp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.wp-chip{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:20px;background:var(--maroon-deep);color:var(--peach-soft);}
.wp-chip.alt{background:rgba(92,26,40,.09);color:var(--maroon);}
.wp-meta h3{font-family:var(--serif);font-size:1.55rem;color:var(--maroon-deep);margin:0 0 8px;}
.wp-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.82rem;color:#8a6b73;}
.wp-hint svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.wp-words{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.wp-words button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.88rem;font-family:inherit;color:var(--maroon-deep);cursor:pointer;transition:all .2s;}
.wp-words button:hover{background:var(--maroon-deep);color:var(--peach-soft);border-color:var(--maroon-deep);transform:translateY(-2px);}
.wp-words button.speaking{background:var(--maroon);color:#fff;}
.wp-nav{display:flex;gap:10px;}
.watch-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.lesson-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:0;text-align:start;cursor:pointer;font-family:inherit;display:block;
  transition:transform .3s,box-shadow .3s;position:relative;}
.lesson-card:hover{transform:translateY(-6px);box-shadow:0 26px 40px -22px rgba(62,15,27,.4);}
.lc-thumb{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#12070b;}
.lc-thumb img,.lc-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lc-thumb video{opacity:0;transition:opacity .35s;}
.lesson-card.previewing .lc-thumb video{opacity:1;}
.lc-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,5,10,.55));pointer-events:none;}
.lc-play{position:absolute;left:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--maroon-deep);transition:transform .25s;}
.lc-play svg{width:16px;height:16px;fill:currentColor;margin-left:2px;}
.lesson-card:hover .lc-play{transform:scale(1.12);}
.lc-dur{position:absolute;right:10px;bottom:16px;z-index:2;font-size:.7rem;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:20px;}
.lc-body{display:block;padding:13px 15px 15px;}
.lc-body b{display:block;font-family:var(--serif);font-size:1rem;color:var(--maroon-deep);margin-bottom:2px;}
.lc-body span{font-size:.76rem;color:#8a6b73;}
.lc-now{position:absolute;top:10px;left:10px;z-index:3;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#E3B34D;color:var(--maroon-deep);padding:4px 10px;border-radius:20px;display:none;}
.lesson-card.active{box-shadow:0 0 0 3px var(--maroon),0 26px 40px -22px rgba(62,15,27,.4);}
.lesson-card.active .lc-now{display:block;}
@media(max-width:1000px){
  .watch{padding:70px 0 80px;}
  .watch-grid{grid-template-columns:1fr;gap:34px;}
  .watch-player{position:static;max-width:340px;margin:0 auto;width:100%;}
}
@media(max-width:600px){.watch-list{grid-template-columns:repeat(2,1fr);gap:12px;}}

/* section heading flourish */
.how-head h2::after,.watch-head h2::after,.clubs-head h2::after{content:'';display:block;width:92px;height:10px;margin:16px auto 0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 10' fill='none' stroke='%23E3B34D' stroke-width='3' stroke-linecap='round'><path d='M3 5c6-6 11-6 17 0s11 6 17 0 11-6 17 0 11 6 17 0 11-6 15 0'/></svg>") center/contain no-repeat;}

/* nav: current section */
.nav-link.active{color:var(--maroon-deep);background:rgba(92,26,40,0.08);}

/* mobile: a CTA bar that is always one tap away */
.mobile-cta{display:none;}
@media(max-width:700px){
  .mobile-cta{display:flex;gap:10px;position:fixed;left:12px;right:84px;bottom:14px;z-index:90;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .mobile-cta.show{transform:none;}
  .mobile-cta .mc-solid{flex:1;text-align:center;background:var(--maroon-deep);color:var(--peach-soft);border-radius:999px;padding:14px 12px;font-weight:600;font-size:.9rem;box-shadow:0 16px 30px -12px rgba(62,15,27,.6);}
  .mobile-cta .mc-ghost{background:#fff;color:var(--maroon-deep);border:1px solid var(--line);border-radius:999px;padding:14px 18px;font-weight:600;font-size:.9rem;font-family:inherit;cursor:pointer;box-shadow:0 16px 30px -12px rgba(62,15,27,.3);}
}
.hero h1{font-size:clamp(2.3rem,4.5vw,3.9rem);}
.hp-chip.c3{direction:ltr;unicode-bidi:isolate;}

/* brand clean-up: the old teal "tech" accent becomes maroon + gold everywhere */
.collab{background:linear-gradient(180deg,#FFF9F3,#F8E9DB);color:var(--ink);}
.collab-head .kicker{color:var(--maroon);}
.collab-head h2{color:var(--maroon-deep);}
.collab-head p{opacity:1;color:#6b4f56;}
.collab-flow::before{background:rgba(92,26,40,.16);}
.collab-flow .dot{background:#E3B34D;box-shadow:0 0 12px #E3B34D;}
.collab-node .mark{background:var(--maroon-deep);border-color:#E3B34D;color:var(--peach-soft);}
.collab-node span{opacity:1;color:#5a4148;font-weight:500;}
.collab-audience span{background:#fff;border-color:var(--line);color:var(--maroon-deep);opacity:1;font-weight:500;}
.dm-btn{border-color:var(--maroon-deep);color:var(--maroon-deep);border-radius:6px;}
.dm-btn.solid{background:var(--maroon-deep);color:var(--peach-soft);border-color:var(--maroon-deep);}
.dm-btn:hover{background:var(--maroon);color:#fff;border-color:var(--maroon);}
footer{background:#26080F;}
footer a:hover{color:#E3B34D;}
.foot-brand p{color:#cfae9f;}
.library-panel>.kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.05rem;margin-bottom:8px;}
.library-panel>h3{font-family:var(--serif);font-size:1.7rem;color:var(--maroon-deep);margin:0 0 12px;}
.collab{padding:100px 0 110px;}

/* ===================== v5: image-led "how it works" cards ===================== */
.how-card{padding:0;}
.how-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#2b0d14;}
.how-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease;}
.how-card:hover .how-img img{transform:scale(1.08);}
.how-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,8,14,.38) 0%,transparent 42%,rgba(30,8,14,.55) 100%);pointer-events:none;}
.how-num{position:absolute;top:10px;right:16px;z-index:2;font-family:var(--serif);font-size:2.5rem;font-weight:600;color:#fff;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.45);}
.how-text{padding:20px 22px 24px;}
.how-chip{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--maroon-deep);font-size:.78rem;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.how-chip b{font-family:var(--serif);font-size:1.05rem;}
.how-chip.lv em{display:block;width:18px;height:6px;border-radius:4px;background:rgba(92,26,40,.22);}
.how-chip.lv em.on{background:var(--maroon);}
.how-chip.pass{background:#e6f4ea;color:#1e6b34;}
.how-chip.pass svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.zoom-bar{position:absolute;left:12px;top:12px;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:8px;background:rgba(20,10,14,.74);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.14em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.zoom-bar .rec{display:block;width:8px;height:8px;border-radius:50%;background:#ff4d4f;animation:dotPulse 1.6s ease-out infinite;}
.zoom-ctrl{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;display:flex;gap:10px;padding:7px 12px;border-radius:999px;background:rgba(20,10,14,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.zoom-ctrl i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;}
.zoom-ctrl i.end{background:#e5484d;}
.zoom-ctrl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.zoom-ctrl i.end svg path{fill:currentColor;stroke:none;}
.lesson-card .lc-thumb video.lc-main{opacity:1;}
@media(max-width:560px){.how-text{padding:18px 18px 22px;}}

/* ===================== v6: level test, services & plans, checkout, homework, messages ===================== */
.lib-form textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem;background:#fff;resize:vertical;}
.lib-form textarea:focus{outline:2px solid var(--maroon);outline-offset:1px;}
.cta-solid,.cta-ghost{display:inline-block;text-decoration:none;text-align:center;}

/* free level test */
.ptest{padding:96px 0;background:var(--maroon-deep);color:var(--peach-soft);position:relative;overflow:hidden;}
.ptest::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 10%,rgba(201,162,75,.18),transparent 70%);pointer-events:none;}
.ptest-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;}
@media(max-width:860px){.ptest-grid{grid-template-columns:1fr;gap:36px;}.ptest{padding:72px 0;}}
.ptest .kicker{font-family:var(--serif);font-style:italic;color:#F3B9A0;font-size:1.1rem;margin-bottom:10px;}
.ptest h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;margin:0 0 16px;color:#fff;}
.ptest-copy p{opacity:.88;line-height:1.65;margin:0 0 18px;}
.ptest-points{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.ptest-points li{padding-inline-start:28px;position:relative;font-size:.95rem;opacity:.92;}
.ptest-points li::before{content:'';position:absolute;inset-inline-start:0;top:.35em;width:14px;height:8px;border-left:2px solid #C9A24B;border-bottom:2px solid #C9A24B;transform:rotate(-45deg);}
.ptest-card{background:#fff;color:var(--ink);border-radius:18px;padding:34px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);min-height:340px;display:flex;}
.pt-pane{width:100%;display:flex;flex-direction:column;justify-content:center;}
.pt-pane[hidden]{display:none;}
.pt-badge{align-self:flex-start;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--maroon-deep);color:var(--peach-soft);font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:16px;}
.pt-badge.ok{background:#1e6b34;font-size:1.15rem;}
.ptest-card h3{font-family:var(--serif);font-size:1.5rem;color:var(--maroon-deep);margin:0 0 8px;}
.ptest-card p{color:#6b4f56;line-height:1.6;margin:0 0 20px;font-size:.95rem;}
.ptest-card .cta-solid{background:var(--maroon-deep);color:var(--peach-soft);border:none;padding:14px 26px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;align-self:flex-start;transition:background .2s,transform .2s;}
.ptest-card .cta-solid:hover{background:var(--maroon);transform:translateY(-2px);}
.ptest-card .cta-ghost{background:transparent;color:var(--maroon-deep);border:1.5px solid var(--line);padding:13px 22px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;}
.ptest-card .cta-ghost:hover{background:rgba(92,26,40,.06);}
.pt-cta{display:flex;gap:10px;flex-wrap:wrap;}
.pt-top{display:flex;align-items:center;gap:14px;font-size:.8rem;color:#8a6b73;font-weight:600;margin-bottom:22px;}
.pt-bar{flex:1;height:6px;background:#f0e3e5;border-radius:6px;overflow:hidden;}
.pt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--maroon),#C9A24B);border-radius:6px;transition:width .35s;}
.pt-q p{font-family:var(--serif);font-size:1.35rem;color:var(--maroon-deep);margin:0 0 18px;line-height:1.35;}
.pt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.pt-opts{grid-template-columns:1fr;}}
.pt-opts button{padding:14px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:all .2s;text-align:center;}
.pt-opts button:hover{border-color:var(--maroon);background:rgba(92,26,40,.05);transform:translateY(-2px);}

/* services & plans */
.plans{padding:100px 0 110px;}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:76px;}
@media(max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.svc:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(92,26,40,.4);}
.svc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#2b0d14;}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease;}
.svc:hover .svc-img img{transform:scale(1.07);}
.svc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,8,14,.3),transparent 45%,rgba(30,8,14,.45));}
.svc-n{position:absolute;top:8px;inset-inline-end:14px;z-index:2;font-family:var(--serif);font-size:2.1rem;font-weight:600;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.svc-text{padding:18px 20px 22px;}
.svc-text h4{font-family:var(--serif);font-size:1.12rem;color:var(--maroon-deep);margin:0 0 6px;}
.svc-text p{margin:0;font-size:.9rem;color:#6b4f56;line-height:1.55;}
.plans-head{text-align:center;margin-bottom:30px;}
.plans-head h3{font-family:var(--serif);font-size:1.9rem;color:var(--maroon-deep);margin:0 0 6px;}
.plans-head p{margin:0;color:#6b4f56;}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;margin-bottom:34px;}
@media(max-width:1000px){.price-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.price-grid{grid-template-columns:1fr;}}
.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 22px 24px;display:flex;flex-direction:column;text-align:center;transition:transform .3s,box-shadow .3s;}
.price-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(92,26,40,.4);}
.price-card.best{border:2px solid #C9A24B;box-shadow:0 20px 44px -26px rgba(201,162,75,.7);}
.pc-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#C9A24B;color:#2b0d14;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;}
.pc-name{font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);margin-bottom:12px;}
.pc-price{display:flex;align-items:baseline;justify-content:center;gap:6px;}
.pc-price b{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--maroon);font-weight:600;}
.pc-price span{font-weight:700;color:#8a6b73;font-size:.9rem;}
.pc-sub{margin:10px 0 0;font-size:.86rem;color:#6b4f56;line-height:1.5;flex:1;}
.pc-save{display:inline-block;align-self:center;margin:12px 0 0;background:#e6f4ea;color:#1e6b34;font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:999px;}
.pc-btn{margin-top:20px;padding:12px 18px;border-radius:10px;border:1.5px solid var(--maroon-deep);background:transparent;color:var(--maroon-deep);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .2s;}
.pc-btn:hover{background:var(--maroon-deep);color:var(--peach-soft);}
.pc-btn.solid{background:var(--maroon-deep);color:var(--peach-soft);}
.pc-btn.solid:hover{background:var(--maroon);}
.pc-btn.gold{background:#C9A24B;border-color:#C9A24B;color:#2b0d14;}
.pc-btn.gold:hover{background:#dbb65c;color:#2b0d14;}
.immersion{display:grid;grid-template-columns:1.4fr 1fr;gap:0;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon));color:var(--peach-soft);border-radius:22px;overflow:hidden;margin-bottom:34px;position:relative;}
.immersion::before{content:'';position:absolute;inset:0;background:radial-gradient(500px 260px at 100% 0,rgba(201,162,75,.28),transparent 70%);pointer-events:none;}
@media(max-width:820px){.immersion{grid-template-columns:1fr;}}
.im-main{padding:40px 40px 36px;position:relative;}
.im-kick{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#C9A24B;font-weight:700;margin-bottom:10px;}
.im-main h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;margin:0 0 18px;line-height:1.1;}
.im-list{list-style:none;padding:0;margin:0;display:grid;gap:11px;}
.im-list li{padding-inline-start:30px;position:relative;font-size:.96rem;opacity:.94;}
.im-list li::before{content:'';position:absolute;inset-inline-start:2px;top:.3em;width:13px;height:7px;border-left:2.5px solid #C9A24B;border-bottom:2.5px solid #C9A24B;transform:rotate(-45deg);}
.im-buy{padding:40px 34px;background:rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;}
.im-len{margin-bottom:16px;}
.im-len span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;}
.im-len b{font-family:var(--serif);font-size:1.4rem;color:#fff;}
.immersion .pc-price b{color:#fff;font-size:3.6rem;}
.immersion .pc-price span{color:#F3B9A0;}
.im-per{font-size:.84rem;opacity:.8;margin-top:6px;}
.immersion .pc-btn{width:100%;margin-top:22px;}
.pay-strip{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;justify-content:center;background:#fff;border:1px dashed rgba(92,26,40,.3);border-radius:16px;padding:18px 24px;}
.ps-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--maroon-deep);font-size:.9rem;}
.ps-title svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ps-methods{display:flex;gap:10px;flex-wrap:wrap;}
.ps-pill{display:flex;flex-direction:column;padding:8px 16px;border-radius:10px;background:var(--peach-soft);border:1px solid rgba(92,26,40,.15);line-height:1.2;}
.ps-pill b{color:var(--maroon-deep);font-size:.95rem;}
.ps-pill i{font-style:normal;font-size:.72rem;color:#8a6b73;}
.ps-pill{flex-direction:row !important;align-items:center;gap:10px;}
.ps-pill>span:last-child{display:flex;flex-direction:column;}
.pm-ico{flex:none;width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;}
.pm-ico svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pm-ico circle{fill:#fff;stroke:none;}
.pm-ico.inst{background:linear-gradient(135deg,#f3a6b9,#b98cf0);}
.pm-ico.visa{width:52px;background:#fff;border:1px solid #d9dbe8;box-shadow:0 1px 2px rgba(26,31,113,.08);}
.pm-ico.visa svg{width:46px;height:16px;stroke:none;}
.pm-ico.visa path{stroke:#F7B600;}
.co-opt .pm-ico{margin-top:-2px;}
.pay-strip p{margin:0;font-size:.8rem;color:#6b4f56;flex:1;min-width:220px;}

/* modals */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(20,8,12,.62);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;backdrop-filter:blur(3px);}
.modal-overlay[hidden]{display:none;}
.modal-box{position:relative;width:100%;max-width:460px;background:#fff;border-radius:18px;padding:30px 28px 26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);max-height:92vh;overflow-y:auto;}
.modal-box.wide{max-width:720px;}
.modal-x{position:absolute;top:10px;inset-inline-end:12px;width:34px;height:34px;border:none;background:transparent;font-size:1.7rem;line-height:1;color:#8a6b73;cursor:pointer;border-radius:50%;}
.modal-x:hover{background:rgba(92,26,40,.08);}
.modal-box h3{font-family:var(--serif);font-size:1.5rem;color:var(--maroon-deep);margin:0 0 16px;}
.co-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--peach-soft);border-radius:12px;padding:16px 18px;margin-bottom:18px;}
.co-summary b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--maroon-deep);}
.co-summary span{font-size:.8rem;color:#6b4f56;}
.co-price{text-align:end;white-space:nowrap;}
.co-price b{display:inline;font-size:1.9rem;color:var(--maroon);}
.co-price span{font-weight:700;margin-inline-start:4px;}
.co-label{font-size:.82rem;font-weight:700;color:var(--maroon-deep);margin:0 0 10px;}
.co-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s;}
.co-opt:has(input:checked){border-color:var(--maroon);background:rgba(92,26,40,.04);}
.co-opt input{margin-top:4px;accent-color:var(--maroon);}
.co-opt b{display:block;color:var(--maroon-deep);font-size:.95rem;}
.co-opt i{font-style:normal;font-size:.78rem;color:#6b4f56;line-height:1.4;}
.modal-box .lib-submit{width:100%;margin-top:6px;text-align:center;display:block;text-decoration:none;}
.co-note{font-size:.76rem;color:#8a6b73;margin:12px 0 0;line-height:1.5;text-align:center;}
.co-done{width:60px;height:60px;border-radius:50%;background:#e6f4ea;color:#1e6b34;display:grid;place-items:center;margin:0 auto 14px;}
.co-done svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
#coStep2{text-align:center;}
#coStep2 p{color:#6b4f56;line-height:1.6;margin:0 0 18px;font-size:.92rem;}
.co-actions{display:grid;gap:10px;}
.co-actions .sess-btn{text-align:center;padding:12px;}

/* parent report */
.report-sheet{padding:6px 4px 4px;}
.rp-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #C9A24B;padding-bottom:12px;margin-bottom:16px;}
.rp-brand{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8a6b73;font-weight:700;}
.rp-head h3{margin:2px 0 0;}
.rp-date{font-size:.8rem;color:#6b4f56;margin-inline-end:34px;}
.rp-student{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:16px;}
.rp-student b{font-family:var(--serif);font-size:1.35rem;color:var(--maroon);}
.rp-student span{color:#6b4f56;font-size:.9rem;}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:520px){.rp-grid{grid-template-columns:1fr;}}
.rp-grid>div{background:var(--peach-soft);border-radius:12px;padding:12px 14px;}
.rp-grid span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#8a6b73;font-weight:700;}
.rp-grid b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);margin-top:2px;}
.rp-grid i{font-style:normal;font-size:.78rem;color:#6b4f56;}
.report-sheet h4{font-family:var(--serif);color:var(--maroon-deep);margin:16px 0 6px;font-size:1rem;}
.report-sheet ul{margin:0;padding-inline-start:20px;font-size:.88rem;color:#4a343a;line-height:1.7;}
.rp-foot{margin:20px 0 0;font-size:.78rem;color:#8a6b73;text-align:center;}
.rp-actions{margin-top:20px;}
@media print{
  body.printing-report > *:not(#reportModal){display:none !important;}
  body.printing-report #reportModal{position:static;background:none;padding:0;display:block;}
  body.printing-report .modal-box{box-shadow:none;max-width:none;max-height:none;overflow:visible;padding:0;}
  body.printing-report .modal-x, body.printing-report .rp-actions{display:none !important;}
}

/* dashboard additions */
.tab-badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e5484d;color:#fff;font-style:normal;font-size:.7rem;font-weight:700;display:inline-grid;place-items:center;}
.plan-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1.5px dashed rgba(92,26,40,.35);border-radius:14px;padding:18px 22px;margin-bottom:22px;}
.plan-banner.ok{border-style:solid;border-color:#bfe0c8;background:#f3fbf5;}
.plan-banner .kick{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8a6b73;font-weight:700;}
.plan-banner h4{font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);margin:3px 0;}
.plan-banner p{margin:0;font-size:.84rem;color:#6b4f56;}
.hw-card{align-items:flex-start;}
.hw-text{font-size:.85rem;color:#4a343a;margin:6px 0;white-space:pre-wrap;line-height:1.5;}
.hw-subs,.hw-card>.hw-sub{width:100%;flex-basis:100%;}
.hw-sub{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;width:100%;}
.hw-sub textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem;}
.hw-sub-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
.hw-answer{margin:0 0 10px;font-size:.88rem;color:#4a343a;white-space:pre-wrap;background:#faf6f1;border-radius:8px;padding:10px 12px;}
.hw-fb{margin:0 0 4px;font-size:.86rem;color:#1e6b34;}
.hw-grade{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.hw-grade input[type=number]{width:120px;}
.hw-grade input{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.85rem;}
.hw-grade input[type=text]{flex:1;min-width:160px;}
/* homework attachments */
.hw-att{margin:10px 0 4px;}
.hw-att-list{display:flex;flex-wrap:wrap;gap:6px;}
.hw-att-list:not(:empty){margin-bottom:8px;}
.hw-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:#faf6f1;border:1px solid var(--line);border-radius:20px;padding:5px 6px 5px 12px;font-size:.8rem;}
.hw-chip.new{border-style:dashed;border-color:var(--maroon);}
.hw-chip b{font-weight:600;color:var(--maroon-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.hw-chip small{color:#8a6b73;}
.hw-chip button{border:0;background:rgba(92,26,40,.08);color:var(--maroon-deep);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;}
.hw-att-btns{display:flex;flex-wrap:wrap;gap:8px;}
.hw-att-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--maroon-deep);border-radius:22px;padding:8px 14px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;}
.hw-att-btn:hover{background:rgba(92,26,40,.05);border-color:var(--maroon);}
.hw-att-btn.rec{background:#c0392b;border-color:#c0392b;color:#fff;animation:recPulse 1.2s ease-in-out infinite;}
@keyframes recPulse{50%{box-shadow:0 0 0 6px rgba(192,57,43,.18);}}
.hw-att-hint{display:block;margin-top:6px;color:#8a6b73;font-size:.74rem;}
.hw-files{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0;}
.hw-file img{display:block;width:150px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.hw-file video{display:block;width:280px;max-width:100%;border-radius:10px;background:#000;}
.hw-file.video{flex-basis:280px;max-width:100%;}
.hw-file audio{display:block;width:280px;max-width:100%;}
.hw-file-doc{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:var(--maroon-deep);font-size:.84rem;max-width:100%;}
.hw-file-doc b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.hw-file-doc small{color:#8a6b73;}
.hw-when{display:block;color:#8a6b73;font-size:.76rem;margin:0 0 6px;}
.hw-when b{color:#c0392b;}
.hw-status{display:inline-block;vertical-align:middle;font-family:var(--sans,inherit);font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;margin-inline-start:6px;}
.hw-status.todo{background:#fff1e0;color:#a35a00;}
.hw-status.sent{background:#e8f1fb;color:#1f5f9e;}
.hw-status.done{background:#e6f4ea;color:#1e6b34;}
.hw-card.st-0{border-inline-start:4px solid #f0a040;}
.hw-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.hw-summary span{flex:1;min-width:90px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.8rem;color:#6a5057;}
.hw-summary b{display:block;font-size:1.4rem;font-family:var(--serif);}
.hw-summary .todo b{color:#a35a00;}.hw-summary .sent b{color:#1f5f9e;}.hw-summary .done b{color:#1e6b34;}
.hw-fb{margin:6px 0 4px;font-size:.86rem;color:#1e6b34;background:#f1f9f3;border-radius:8px;padding:10px 12px;}
@media(max-width:560px){.hw-file img{width:calc(50vw - 40px);height:auto;aspect-ratio:4/3;}.hw-chip b,.hw-file-doc b{max-width:140px;}}
.cert-card{align-items:center;}
.cert-ico{flex:none;width:46px;height:46px;border-radius:50%;background:#fbf1d6;color:#9a7416;display:grid;place-items:center;}
.cert-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pl-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;align-items:center;margin-bottom:10px;}
.pl-row b{font-size:.84rem;color:var(--maroon-deep);}
@media(max-width:700px){.pl-row{grid-template-columns:1fr;}}
.sess-people.att{display:grid;gap:6px;}
.att-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#faf6f1;border-radius:8px;padding:6px 10px;}
.att-btns{display:flex;gap:6px;}
.att-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 10px;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;color:#6b4f56;}
.att-btn[data-v="present"].on{background:#e6f4ea;border-color:#9fd0ac;color:#1e6b34;}
.att-btn[data-v="absent"].on{background:#fde8e8;border-color:#f0a9a9;color:#a42020;}
.att-btn:disabled{opacity:.5;}
.student-row .sess-btn{padding:6px 12px;font-size:.74rem;}

/* v6: keep the nav on one line now that there is a Plans link */
@media(max-width:1500px){.nav-actions .icon-btn,.nav-actions .nav-sep{display:none;}}
@media(max-width:1400px){nav.links .nav-link{padding-inline:7px;}.nav-actions .nav-cta{padding-inline:16px;}}
header.nav .nav-inner{max-width:1480px;}
@media(max-width:1260px){.nav-actions a.nav-cta{display:none;}}
/* upgraded library: actions, badges, search, drag & drop, upload progress */
.lib-card .lib-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.lib-card .lib-read.lib-guide{background:#F6EEE8;color:var(--maroon-deep);margin-inline-start:6px;}
.lib-card .lib-read{margin-top:10px;font-size:0.8rem;font-weight:600;color:#fff;background:var(--maroon-deep);border:none;border-radius:6px;padding:6px 12px;}
.lib-card .lib-read:hover{background:var(--maroon);}
.lib-card .lib-read.lib-guide:hover{background:#EEDFD5;}
.lib-card .lib-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.lib-card .badge-new,.lib-card .badge-read{font-size:0.64rem;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:10px;}
.lib-card .badge-new{background:var(--cyan);color:var(--graphite);}
.lib-card .badge-read{background:#e3f2e5;color:#2e7d32;}
.lib-card.is-read{border-color:rgba(46,125,50,0.35);}
.lib-card .size{opacity:.8;}
.lib-search-wrap{margin:0 0 16px;}
.lib-search{width:100%;max-width:380px;padding:10px 14px;border:1px solid var(--line);border-radius:22px;font:inherit;font-size:0.88rem;background:#fff;color:var(--ink);}
.lib-search:focus{outline:2px solid var(--maroon);outline-offset:1px;}
.dropzone{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  border:2px dashed rgba(92,26,40,0.3);border-radius:10px;padding:22px 14px;background:var(--peach-soft);cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;margin-bottom:0 !important;}
.dropzone:hover,.dropzone.drag{border-color:var(--maroon);background:var(--peach);}
.dropzone.drag{transform:scale(1.01);}
.dropzone.has-file{border-style:solid;border-color:var(--cyan-dim);background:#EAF4F0;}
.dropzone .dz-icon{font-size:1.8rem;}
.dropzone .dz-text{font-size:0.9rem;font-weight:600;color:var(--maroon-deep);word-break:break-word;}
.dropzone .dz-hint{font-size:0.72rem;font-weight:400;color:#8a6b73;}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.upload-status{display:flex;flex-direction:column;gap:6px;}
.upload-status[hidden]{display:none;}
.up-bar{height:6px;border-radius:4px;background:rgba(92,26,40,0.1);overflow:hidden;}
.up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--maroon),var(--cyan-dim));transition:width .3s;}
.up-bar.busy i{width:40% !important;animation:upSlide 1.1s ease-in-out infinite;}
@keyframes upSlide{0%{transform:translateX(-100%);}100%{transform:translateX(260%);}}
.upload-status span{font-size:0.8rem;color:#6b4f56;}
.upload-status.ok span{color:#2e7d32;}
.upload-status.err span{color:#B4213D;}
.lib-submit:disabled{opacity:.6;cursor:wait;transform:none;}

/* reading hub: streak + leaderboard */
.reading-hub{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1.3fr);gap:16px;margin-bottom:30px;}
.reading-hub[hidden],.streak-card[hidden]{display:none;}
.reading-hub.solo{grid-template-columns:1fr;}
@media(max-width:760px){.reading-hub{grid-template-columns:1fr;}}
.streak-card{background:linear-gradient(135deg,var(--maroon-deep),var(--maroon) 70%,#7a2c3c);color:#F6E9E3;border-radius:12px;padding:20px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;}
.streak-flame{font-size:2.4rem;line-height:1;}
.streak-card.cold .streak-flame{filter:grayscale(1);opacity:.6;}
.streak-card.hot .streak-flame{animation:flame 1.6s ease-in-out infinite;}
@keyframes flame{0%,100%{transform:scale(1) rotate(-3deg);}50%{transform:scale(1.12) rotate(3deg);}}
@media(prefers-reduced-motion:reduce){.streak-card.hot .streak-flame{animation:none;}}
.streak-card b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;}
.streak-card span{font-size:0.8rem;opacity:.85;}
.streak-week{grid-column:1/-1;display:flex;gap:6px;margin-top:10px;}
.streak-week i{flex:1;height:26px;border-radius:6px;background:rgba(255,255,255,0.12);font-style:normal;font-size:0.62rem;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;color:rgba(255,255,255,0.6);}
.streak-week i.on{background:var(--cyan);color:var(--graphite);font-weight:700;}
.leader-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.leader-card h4{font-family:var(--serif);font-size:1.02rem;color:var(--maroon-deep);margin:0 0 10px;}
.leader-list{list-style:none;margin:0;padding:0;}
.leader-list li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:0.86rem;}
.leader-list li:last-child{border-bottom:none;}
.leader-list .rank{width:24px;text-align:center;font-weight:700;color:#a4838a;}
.leader-list li:nth-child(1) .rank,.leader-list li:nth-child(2) .rank,.leader-list li:nth-child(3) .rank{font-size:1.05rem;}
.leader-list .nm{flex:1;color:var(--maroon-deep);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leader-list .nm small{font-weight:400;color:#a4838a;margin-inline-start:6px;}
.leader-list .ct{font-size:0.78rem;color:#6b4f56;}
.leader-list li.me{background:rgba(95,224,200,0.12);border-radius:6px;padding-inline:6px;}
.leader-list .empty{color:#a4838a;font-size:0.84rem;border:none;}

/* in-site book reader */
.reader{position:fixed;inset:0;z-index:400;background:rgba(20,23,28,0.92);display:flex;flex-direction:column;}
.reader[hidden]{display:none;}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;color:#fff;}
.reader-bar b{font-family:var(--serif);font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reader-actions{display:flex;gap:8px;flex:none;}
.reader-btn{color:#fff;background:rgba(255,255,255,0.12);border:none;border-radius:6px;padding:7px 12px;font-size:0.82rem;font-weight:600;}
.reader-btn:hover{background:rgba(255,255,255,0.22);}
.reader-body{flex:1;min-height:0;padding:0 18px 18px;display:flex;align-items:center;justify-content:center;}
.reader-body iframe{width:100%;height:100%;border:none;border-radius:8px;background:#fff;}
.reader-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;}
.reader-body video,.reader-body audio{max-width:100%;max-height:100%;}
.reader-lock{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 18px 12px;padding:10px 16px;border-radius:10px;background:#FFF7E6;color:#5a3d0a;font-size:.88rem;text-align:center;}
.reader-lock[hidden]{display:none;}
.reader-btn.solid{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}
.reader-locked{font-size:1.1rem;}
.book.locked .book-cover{filter:saturate(.75);}
.bc-lock{position:absolute;top:58px;inset-inline-start:22px;font-size:.66rem;font-weight:700;background:rgba(255,255,255,.92);color:var(--maroon-deep);border-radius:8px;padding:4px 6px;text-align:center;}
.lib-guard{font-size:.74rem;}
.lib-guard .warn{color:#a35a00;font-weight:600;}
.pc-terms{font-size:.78rem;font-weight:600;color:var(--maroon);margin:-2px 0 8px;}
.immersion .pc-terms{color:inherit;opacity:.85;}
.credit-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:8px;max-width:240px;}
.credit-bar i{display:block;height:100%;background:#fff;border-radius:6px;}
.sess-plan.ok{background:#eef8f1;border-color:#cfe8d6;}
button.dash-stat{font:inherit;text-align:start;cursor:pointer;color:inherit;width:100%;}
.dash-stat.warn b{color:#a35a00;}
.dash-stat small{font-size:.6em;}
.follow-up{grid-column:1/-1;background:#fff7ec;border:1px solid #f1dcc4;border-radius:12px;padding:12px 16px;font-size:.85rem;}
.follow-up ul{margin:6px 0 0;padding-inline-start:18px;display:grid;gap:4px;}
.ps-table{display:grid;gap:8px;}
.ps-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px;align-items:center;}
.ps-row input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;}
.ps-head{font-size:.74rem;color:#8a6b73;}
@media(max-width:560px){.ps-row{grid-template-columns:1fr 1fr 1fr;}.ps-row b{grid-column:1/-1;}}
.treq{background:#fff7ec;border:1px solid #f1dcc4;border-radius:14px;padding:14px 16px;margin:0 0 16px;display:grid;gap:10px;}
.treq-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border-radius:10px;padding:10px 12px;}
.treq-row>span{flex:1;min-width:180px;}
.treq-row small{display:block;color:var(--muted);font-size:.76rem;}
.levels-home{padding:80px 0;}
.lv-ladder{display:grid;grid-template-columns:repeat(9,1fr);gap:12px;}
.lv-stage{background:#fff;border:1px solid var(--soft-line);border-radius:18px;padding:18px 16px;box-shadow:var(--shadow-sm);position:relative;transition:transform .25s,box-shadow .25s;}
.lv-stage:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.lv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.lv-ico{width:40px;height:40px;border-radius:12px;background:var(--peach-soft);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.lv-cefr{font-size:.72rem;font-weight:800;color:#fff;background:var(--maroon-deep);border-radius:20px;padding:4px 10px;}
.lv-stage b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--maroon-deep);}
.lv-stage small{font-size:.76rem;color:var(--muted);}
.lv-nums{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.lv-nums span{min-width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;background:rgba(92,26,40,.07);color:var(--maroon-deep);}
@media(max-width:1100px){.lv-ladder{grid-template-columns:repeat(5,1fr);}}
.lv-ladder .lv-stage{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 8px;}
.lv-ladder .lv-stage b{font-size:1rem;white-space:nowrap;}
.path-levels{display:flex;flex-wrap:wrap;gap:8px;}
@media(max-width:560px){.lv-ladder{grid-template-columns:repeat(3,1fr);gap:10px;}.levels-home{padding:56px 0;}}
.protect-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff7ec;border:1px solid #f1dcc4;border-radius:14px;padding:14px 18px;margin:0 0 16px;}
.protect-box>span{font-size:1.5rem;}
.protect-box p{flex:1;min-width:220px;margin:0;font-size:.86rem;color:#5a4148;}
.reader-body .reader-msg{color:#fff;text-align:center;font-size:0.95rem;line-height:1.6;}

/* live toasts */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px);}
.toast{pointer-events:auto;background:var(--graphite);color:#fff;border-radius:10px;padding:12px 16px;font-size:0.86rem;line-height:1.45;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.45);border-inline-start:4px solid var(--cyan);width:100%;
  animation:toastIn .35s ease-out;}
.toast.err{border-inline-start-color:#ff6b81;}
.toast b{display:block;margin-bottom:2px;}
.toast.out{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;}
@keyframes toastIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
/* ===== auth page v2 ===== */
.auth-brand{background:radial-gradient(circle at 20% 15%,rgba(95,224,200,0.16),transparent 40%),linear-gradient(150deg,#2b0a13,#5C1A28 60%,#8A2E43) !important;}
.auth-brand-mid{position:relative;max-width:440px;}
.auth-points{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:14px;}
.auth-points li{display:flex;align-items:center;gap:12px;font-size:0.95rem;color:rgba(255,255,255,0.88);}
.auth-points span{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none;}
.auth-float{position:absolute;background:rgba(255,255,255,0.96);color:var(--maroon-deep);border-radius:14px;padding:10px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,0.5);
  display:flex;align-items:center;gap:10px;font-size:0.8rem;animation:afFloat 6s ease-in-out infinite;}
.auth-float b{font-family:var(--serif);font-size:1.05rem;}
.af1{right:-40px;top:-90px;}
.af2{right:10px;bottom:-110px;animation-delay:-3s;}
html[dir="rtl"] .af1{right:auto;left:-40px;}
html[dir="rtl"] .af2{right:auto;left:10px;}
@keyframes afFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media(prefers-reduced-motion:reduce){.auth-float{animation:none;}}
@media(max-width:1100px){.auth-float{display:none;}}
.auth-back-link{border:none !important;background:none !important;padding:6px 0 !important;cursor:pointer;}
.auth-back-link:hover{color:var(--maroon-deep);}
.auth-tabs{background:#F4EFEB;padding:4px;border-radius:14px;gap:4px;}
.auth-tab{border:none !important;border-radius:11px !important;background:transparent !important;color:var(--muted) !important;}
.auth-tab.active{background:#fff !important;color:var(--maroon-deep) !important;box-shadow:var(--shadow-sm);}
.field-label{font-size:0.78rem;font-weight:600;color:var(--maroon-deep);margin-bottom:8px;}
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;}
.role-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:14px;border:1.5px solid var(--soft-line);background:#FBF9F7;
  text-align:start;font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;}
.role-opt span{font-size:1.5rem;margin-bottom:4px;}
.role-opt b{color:var(--maroon-deep);font-size:0.92rem;}
.role-opt small{color:var(--muted);font-size:0.74rem;}
.role-opt:hover{transform:translateY(-2px);}
.role-opt.active{border-color:var(--maroon);background:var(--peach-soft);box-shadow:0 0 0 3px rgba(92,26,40,0.08);}

/* =====================================================================
   v2 design system — dashboard, chat, parents, certificates, admin
   ===================================================================== */
:root{
  --surface:#FFFFFF;
  --canvas:#F6F2EE;
  --muted:#7C6268;
  --soft-line:rgba(62,15,27,0.08);
  --gold:#C9A227;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(36,16,20,0.05),0 2px 8px -2px rgba(36,16,20,0.06);
  --shadow-md:0 2px 4px rgba(36,16,20,0.04),0 14px 34px -14px rgba(62,15,27,0.22);
  --grad-brand:linear-gradient(135deg,#3E0F1B 0%,#5C1A28 55%,#8A2E43 100%);
}

/* ---- shell ---- */
.dashboard-page{background:var(--canvas);}
.dash-top{background:rgba(255,255,255,0.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--soft-line);padding:12px 28px;}
.dash-avatar{width:42px;height:42px;background:var(--grad-brand);box-shadow:0 6px 16px -6px rgba(92,26,40,0.55);font-size:1rem;}
.dash-who b{font-size:0.95rem;}
.dash-link-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--soft-line);background:#fff;transition:background .2s,border-color .2s,transform .2s;}
.dash-link-btn:hover{background:var(--peach-soft);border-color:rgba(92,26,40,0.25);transform:translateY(-1px);}
#dashSignOutBtn{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}
#dashSignOutBtn:hover{background:var(--maroon);}
.dash-body{grid-template-columns:248px 1fr;max-width:1320px;gap:0;}
.dash-sidebar{position:sticky;top:67px;align-self:start;height:calc(100vh - 67px);overflow-y:auto;padding:22px 14px;
  border-right:1px solid var(--soft-line);background:transparent;}
.dash-tab{gap:12px;padding:11px 14px;border-radius:12px;font-weight:500;color:#5a4148;position:relative;}
.dash-tab .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
.dash-tab span{flex:1;}
.dash-tab:hover{background:rgba(92,26,40,0.06);color:var(--maroon-deep);}
.dash-tab.active{background:var(--grad-brand);color:#fff;box-shadow:0 10px 22px -12px rgba(92,26,40,0.7);}
.dash-tab.active .ic{opacity:1;}
.tab-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#E5484D;color:#fff;font-size:0.68rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;}
.tab-badge[hidden]{display:none;}
.dash-tab.active .tab-badge{background:#fff;color:var(--maroon-deep);}
.dash-main{padding:34px 34px 80px;}
.dash-view{animation:viewIn .35s ease-out;}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.dash-view h3{font-size:1.75rem;letter-spacing:-0.01em;}
.dash-view>p.dash-sub{font-size:0.92rem;color:var(--muted);}
@media(max-width:760px){
  .dash-top{padding:10px 16px;position:relative;}
  .dash-body{grid-template-columns:1fr;}
  .dash-sidebar{display:flex;flex-direction:row;gap:4px;overflow-x:auto;border-right:none;}
  html[dir="rtl"] .dash-sidebar{border-left:none;}
  .dash-tab{white-space:nowrap;margin-bottom:0;width:auto;}
  .dash-view[data-view="overview"]>h3{font-size:1.45rem;padding:22px 20px 4px;}
  .dash-view[data-view="overview"]>p.dash-sub{padding:0 20px 22px;}
  .dash-sidebar{position:sticky;top:0;height:auto;z-index:3;background:rgba(246,242,238,0.95);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--soft-line);padding:10px 12px;scrollbar-width:none;}
  .dash-sidebar::-webkit-scrollbar{display:none;}
  .dash-tab{padding:9px 12px;}
  .dash-tab span{flex:none;}
  .dash-main{padding:22px 16px 70px;}
  .dash-view h3{font-size:1.4rem;}
}

/* ---- overview ---- */
.dash-view[data-view="overview"]>h3{background:linear-gradient(135deg,#3E0F1B 0%,#5C1A28 55%,#8A2E43 100%);color:#fff;margin:0;padding:30px 30px 6px;border-radius:var(--radius) var(--radius) 0 0;
  font-size:1.9rem;position:relative;overflow:hidden;}
.dash-view[data-view="overview"]>p.dash-sub{background:var(--grad-brand);color:rgba(255,255,255,0.82);margin:0 0 26px;padding:0 30px 30px;
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-md);position:relative;}
.dash-view[data-view="overview"]>h3,.dash-view[data-view="overview"]>p.dash-sub{
  background:linear-gradient(90deg,#3E0F1B 0%,#5C1A28 55%,#8A2E43 100%) !important;}
html[dir="rtl"] .dash-view[data-view="overview"]>h3,html[dir="rtl"] .dash-view[data-view="overview"]>p.dash-sub{
  background:linear-gradient(270deg,#3E0F1B 0%,#5C1A28 55%,#8A2E43 100%) !important;}
.dash-stats{gap:16px;}
.dash-stat{border:1px solid var(--soft-line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;}
.dash-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.dash-stat::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad-brand);}
html[dir="rtl"] .dash-stat::before{inset:0 0 0 auto;}
.dash-stat b{font-size:2rem;}
.notif-item{border-radius:12px;border-color:var(--soft-line);box-shadow:var(--shadow-sm);}
.leader-card,.lib-card,.profile-card,.student-row,.progress-item,.exam-box{border-color:var(--soft-line);box-shadow:var(--shadow-sm);}
.leader-card,.profile-card,.exam-box{border-radius:var(--radius);}
.streak-card{border-radius:var(--radius);box-shadow:var(--shadow-md);}
.lib-card{border-radius:14px;background:#fff;}
.lib-form{background:#fff;border:1px solid var(--soft-line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);}
.lib-form input,.lib-form select,.auth-form label input,.auth-form label select{border-radius:10px !important;}
.lib-submit{border-radius:10px;}

.link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px dashed rgba(45,140,121,0.55);
  border-radius:var(--radius);padding:18px 22px;margin-bottom:26px;}
.link-card[hidden]{display:none;}
.link-card b{display:block;color:var(--maroon-deep);margin-bottom:3px;}
.link-card span{font-size:0.84rem;color:var(--muted);}
.link-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.35rem;font-weight:700;letter-spacing:.28em;padding:10px 16px;
  border-radius:12px;border:none;background:#EAF4F0;color:#1d6b5b;cursor:copy;}
.link-code:hover{background:#d8eee6;}

/* buttons */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;font-weight:600;
  font-size:0.86rem;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;}
.btn-primary{background:var(--maroon-deep);color:#fff;box-shadow:0 8px 18px -10px rgba(62,15,27,0.7);}
.btn-primary:hover{background:var(--maroon);transform:translateY(-1px);}
.btn-ghost{background:#fff;color:var(--maroon-deep);border-color:var(--soft-line);}
.btn-ghost:hover{background:var(--peach-soft);}

/* avatars */
.av{--h:340;width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:0.78rem;
  color:hsl(var(--h) 45% 28%);background:hsl(var(--h) 55% 90%);letter-spacing:.02em;}
.av.sm{width:30px;height:30px;font-size:0.7rem;}
.av.lg{width:52px;height:52px;font-size:1rem;}

/* empty states */
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:44px 20px;background:#fff;
  border:1px dashed rgba(92,26,40,0.2);border-radius:var(--radius);}
.empty-state div{font-size:2.4rem;}
.empty-state b{color:var(--maroon-deep);font-family:var(--serif);font-size:1.1rem;}
.empty-state span{font-size:0.86rem;color:var(--muted);max-width:420px;line-height:1.55;}

/* ---- parents ---- */
.link-form{background:#fff;border:1px solid var(--soft-line);border-radius:var(--radius);padding:20px 22px;margin-bottom:24px;box-shadow:var(--shadow-sm);}
.link-form label{display:block;font-size:0.8rem;font-weight:600;color:var(--maroon-deep);margin-bottom:8px;}
.link-form-row{display:flex;gap:10px;flex-wrap:wrap;}
.link-form-row input{flex:1;min-width:180px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:1.1rem;
  letter-spacing:.25em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.link-form .lib-note{margin:10px 0 0;}
.children-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:28px;}
.child-card{background:#fff;border:1px solid var(--soft-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .25s,box-shadow .25s;}
.child-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.child-card header{display:flex;align-items:center;gap:14px;padding:20px 22px;background:linear-gradient(135deg,var(--peach-soft),#EAF4F0);}
.child-card header b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);}
.child-card header span{font-size:0.8rem;color:var(--muted);}
.child-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--soft-line);}
.child-stats div{padding:14px 10px;text-align:center;}
.child-stats div+div{border-inline-start:1px solid var(--soft-line);}
.child-stats b{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--maroon-deep);}
.child-stats span{font-size:0.7rem;color:var(--muted);}
.child-facts{list-style:none;margin:0;padding:14px 22px;display:flex;flex-direction:column;gap:10px;}
.child-facts li{display:flex;gap:10px;font-size:0.84rem;color:#4b353b;line-height:1.45;}
.child-facts i{font-style:normal;}
.child-facts small{color:#a4838a;margin-inline-start:4px;}
.child-card footer{display:flex;gap:10px;flex-wrap:wrap;padding:0 22px 20px;background:none;color:inherit;margin:0;border:none;}

/* ---- chat ---- */
.chat{display:grid;grid-template-columns:300px 1fr;height:min(72vh,680px);min-height:440px;background:#fff;border:1px solid var(--soft-line);
  border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;}
.chat.solo{grid-template-columns:1fr;}
.chat.solo .chat-list,.chat.solo .chat-back{display:none;}
.chat-list{border-inline-end:1px solid var(--soft-line);display:flex;flex-direction:column;min-height:0;background:#FBF9F7;}
.chat-search{margin:14px;padding:10px 14px;border-radius:10px;border:1px solid var(--soft-line);font:inherit;font-size:0.86rem;background:#fff;}
.chat-inbox{overflow-y:auto;flex:1;padding:0 8px 10px;}
.inbox-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:none;background:none;border-radius:12px;text-align:start;
  cursor:pointer;transition:background .15s;}
.inbox-row:hover{background:rgba(92,26,40,0.05);}
.inbox-row.active{background:#fff;box-shadow:var(--shadow-sm);}
.ib-main{flex:1;min-width:0;}
.ib-main b{display:block;font-size:0.88rem;color:var(--maroon-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ib-main span{display:block;font-size:0.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inbox-row.unread .ib-main span{color:var(--ink);font-weight:600;}
.ib-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.ib-side small{font-size:0.68rem;color:#a4838a;}
.ib-side i{font-style:normal;background:#E5484D;color:#fff;font-size:0.66rem;font-weight:700;border-radius:9px;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;}
.chat-pane{display:flex;flex-direction:column;min-height:0;min-width:0;}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--soft-line);}
.chat-head .av{width:40px;height:40px;}
.chat-who b{display:block;color:var(--maroon-deep);font-size:0.95rem;}
.chat-who span{font-size:0.76rem;color:var(--muted);}
.chat-back{display:none;border:none;background:none;font-size:1.2rem;color:var(--maroon-deep);padding:4px 8px;}
html[dir="rtl"] .chat-back{transform:scaleX(-1);}
.chat-msgs{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(circle at 20% 0%,rgba(247,228,212,0.45),transparent 50%),radial-gradient(circle at 90% 100%,rgba(234,244,240,0.7),transparent 45%);}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:2rem;color:var(--muted);text-align:center;}
.chat-empty span{font-size:0.88rem;}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:78%;}
.msg.mine{align-self:flex-end;flex-direction:row-reverse;}
.bubble{background:#fff;border:1px solid var(--soft-line);border-radius:16px 16px 16px 4px;padding:9px 13px;box-shadow:var(--shadow-sm);min-width:0;}
html[dir="rtl"] .bubble{border-radius:16px 16px 4px 16px;}
.msg.mine .bubble{background:var(--grad-brand);color:#fff;border:none;border-radius:16px 16px 4px 16px;}
html[dir="rtl"] .msg.mine .bubble{border-radius:16px 16px 16px 4px;}
.msg.private .bubble{background:#FFF7E6;border-color:#F2D99B;}
.msg.mine.private .bubble{background:linear-gradient(135deg,#6b4a12,#8a6418);}
.bubble b{display:block;font-size:0.74rem;color:var(--maroon);margin-bottom:2px;}
.bubble b em{font-style:normal;font-weight:500;color:#a4838a;margin-inline-start:4px;}
.bubble p{margin:0;font-size:0.9rem;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;}
.bubble small{display:block;font-size:0.66rem;opacity:.65;margin-top:4px;text-align:end;}
.chat-compose{border-top:1px solid var(--soft-line);padding:12px 14px;background:#fff;}
.chat-compose[hidden]{display:none;}
.chat-private{display:flex !important;align-items:center;gap:8px;font-size:0.76rem;color:#8a6418;margin-bottom:8px;cursor:pointer;}
.chat-private[hidden]{display:none !important;}
.chat-row{display:flex;gap:10px;align-items:flex-end;}
.chat-row textarea{flex:1;resize:none;border:1px solid var(--soft-line);border-radius:14px;padding:11px 14px;font:inherit;font-size:0.92rem;
  max-height:140px;background:#FBF9F7;}
.chat-row textarea:focus{outline:2px solid var(--maroon);outline-offset:0;background:#fff;}
.chat-send{width:44px;height:44px;border-radius:50%;border:none;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 8px 16px -8px rgba(62,15,27,0.7);transition:transform .2s;}
.chat-send:hover{transform:scale(1.06);}
.chat-send svg{width:20px;height:20px;fill:#fff;}
html[dir="rtl"] .chat-send svg{transform:scaleX(-1);}
@media(max-width:760px){
  .chat{grid-template-columns:1fr;height:calc(100vh - 210px);}
  .chat .chat-pane{display:none;}
  .chat.open .chat-pane{display:flex;}
  .chat.open .chat-list{display:none;}
  .chat-back{display:block;}
  .msg{max-width:90%;}
}

/* ---- admin ---- */
.users-tools{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px;}
.users-tools .lib-search{max-width:320px;}
.users-filter{display:flex;gap:6px;flex-wrap:wrap;}
.users-table{background:#fff;border:1px solid var(--soft-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.user-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--soft-line);flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-row:hover{background:#FBF9F7;}
.ur-main{flex:1;min-width:180px;}
.ur-main b{display:block;font-size:0.9rem;color:var(--maroon-deep);}
.ur-main b em{font-style:normal;font-weight:400;color:#a4838a;}
.ur-main span{font-size:0.78rem;color:var(--muted);}
.role-pill{font-size:0.7rem;font-weight:700;padding:4px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.04em;}
.role-student{background:#EAF4F0;color:#1d6b5b;}
.role-parent{background:#EEF0FF;color:#3b46a3;}
.role-teacher{background:var(--peach);color:var(--maroon-deep);}
.role-admin{background:var(--maroon-deep);color:#fff;}
.ur-pass{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:.9rem;}
.ur-pass:hover{border-color:var(--maroon);}
.auth-wa{display:block;text-align:center;text-decoration:none;}
.ur-role{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:0.82rem;background:#fff;}
.auth-hint{font-size:0.76rem;color:var(--muted);margin:-6px 0 14px;}

/* ===== student learning path ===== */
.path{display:flex;align-items:stretch;gap:0;margin:6px 0 30px;}
#learnPath{display:block;}
.path-now{display:flex;gap:16px;align-items:center;background:#fff;border:1.5px solid var(--maroon);border-radius:18px;padding:18px 20px;box-shadow:0 0 0 4px rgba(92,26,40,0.06),var(--shadow-sm);margin-bottom:16px;}
.path-now>div{flex:1;min-width:0;}
.path-now small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#1d6b5b;}
.path-now b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--maroon-deep);margin:2px 0 8px;}
.path-now em{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:6px;}
.path-now .ps-bar{display:block;margin-top:0;max-width:420px;}
.path-now .ps-badge{background:var(--grad-brand);}
.path-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stage{background:#fff;border:1px solid var(--soft-line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);}
.stage.here{border-color:var(--maroon);}
.stage.done{background:#f3faf4;border-color:#cfe8d6;}
.stage.locked{background:#F4F0EC;}
.stage-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.stage-head>span{width:34px;height:34px;border-radius:10px;background:var(--peach-soft);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none;}
.stage.done .stage-head>span{background:#2e7d32;color:#fff;font-weight:800;}
.stage-head b{display:block;color:var(--maroon-deep);font-size:.92rem;}
.stage-head small{font-size:.72rem;color:var(--muted);}
.stage-levels{display:flex;flex-wrap:wrap;gap:6px;}
.lv-chip{min-width:46px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--soft-line);background:#fff;font:inherit;font-weight:700;font-size:.85rem;color:var(--maroon-deep);cursor:pointer;transition:all .2s;}
.lv-chip:hover{border-color:var(--maroon);}
.lv-chip.passed{background:#e6f4ea;border-color:#cfe8d6;color:#1e6b34;}
.lv-chip.working{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(92,26,40,.12);}
.lv-chip.active{background:var(--maroon-deep);border-color:var(--maroon-deep);color:#fff;}
.lv-chip.locked{color:#b9a2a8;cursor:not-allowed;background:transparent;}
.lt-stage{display:flex;flex-direction:column;gap:4px;}
.lt-stage small{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.lt-stage>div{display:flex;gap:6px;flex-wrap:wrap;}
.level-tabs .level-tab{padding:7px 12px;}
@media(max-width:860px){.path-stages{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.stage{padding:12px 10px;}.stage-head>span{display:none;}.lv-chip{min-width:38px;padding:7px 6px;font-size:.8rem;}}
.path-link{flex:0 0 26px;align-self:center;height:3px;background:repeating-linear-gradient(90deg,rgba(92,26,40,0.25) 0 6px,transparent 6px 11px);}
.path-step{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;text-align:start;padding:18px 18px 16px;
  background:#fff;border:1.5px solid var(--soft-line);border-radius:18px;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;
  transition:transform .25s,box-shadow .25s,border-color .25s;font:inherit;color:inherit;}
.path-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.path-step.active{border-color:var(--maroon);box-shadow:0 0 0 4px rgba(92,26,40,0.08),var(--shadow-md);}
.path-step.locked{background:#F4F0EC;cursor:not-allowed;}
.path-step.locked:hover{transform:none;box-shadow:var(--shadow-sm);}
.path-step.locked .ps-body,.path-step.locked .ps-meta{opacity:.6;}
.ps-badge{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:var(--peach-soft);}
.path-step.passed .ps-badge{background:#2e7d32;color:#fff;font-weight:800;font-size:1.2rem;}
.path-step.working .ps-badge{background:var(--grad-brand);box-shadow:0 8px 18px -8px rgba(92,26,40,0.7);animation:psPulse 2.4s ease-in-out infinite;}
@keyframes psPulse{0%,100%{box-shadow:0 0 0 0 rgba(92,26,40,0.35);}50%{box-shadow:0 0 0 8px rgba(92,26,40,0);}}
@media(prefers-reduced-motion:reduce){.path-step.working .ps-badge{animation:none;}}
.ps-body small{display:block;font-size:0.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);}
.path-step.working .ps-body small{color:#1d6b5b;}
.ps-body b{font-family:var(--serif);font-size:1.15rem;color:var(--maroon-deep);margin-inline-end:6px;}
.ps-body em{font-style:normal;font-size:0.78rem;color:var(--muted);}
.ps-bar{grid-column:1/-1;height:6px;border-radius:4px;background:rgba(92,26,40,0.08);overflow:hidden;margin-top:10px;}
.ps-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--maroon),var(--cyan-dim));transition:width .6s cubic-bezier(.2,.8,.2,1);}
.path-step.passed .ps-bar i{background:#2e7d32;}
.ps-meta{grid-column:1/-1;font-size:0.76rem;color:var(--muted);}
.path-step.passed .ps-meta{color:#2e7d32;font-weight:600;}
@media(max-width:860px){
  .path{flex-direction:column;}
  .path-link{flex:0 0 18px;width:3px;height:auto;align-self:flex-start;margin-inline-start:41px;
    background:repeating-linear-gradient(180deg,rgba(92,26,40,0.25) 0 6px,transparent 6px 11px);}
}

.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px;}
.shelf-head h4{font-family:var(--serif);font-size:1.3rem;color:var(--maroon-deep);margin:0 0 4px;}
.shelf-head span{font-size:0.84rem;color:var(--muted);}

/* book covers */
.lib-grid.shelf{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 18px;}
.book{--h:340;display:flex;flex-direction:column;gap:10px;}
.book-cover{position:relative;aspect-ratio:3/4;border:none;border-radius:6px 14px 14px 6px;padding:18px 14px 16px 22px;cursor:pointer;text-align:start;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;font:inherit;
  background:linear-gradient(150deg,hsl(var(--h) 45% 42%),hsl(calc(var(--h) + 30) 50% 26%));color:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,0.12),0 18px 30px -18px hsl(var(--h) 60% 20% / .8),inset -6px 0 12px -8px rgba(0,0,0,0.4);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;}
html[dir="rtl"] .book-cover{border-radius:14px 6px 6px 14px;padding:18px 22px 16px 14px;}
.book-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0.18),transparent 40%);pointer-events:none;}
.book-cover:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 2px 3px rgba(0,0,0,0.12),0 26px 40px -18px hsl(var(--h) 60% 20% / .9);}
.bc-spine{position:absolute;inset:0 auto 0 0;width:10px;background:rgba(0,0,0,0.22);box-shadow:1px 0 0 rgba(255,255,255,0.15);}
html[dir="rtl"] .bc-spine{inset:0 0 0 auto;}
.bc-icon{font-size:1.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25));}
.bc-title{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,0.25);}
.bc-done,.bc-new{position:absolute;top:10px;right:10px;font-size:0.68rem;font-weight:800;border-radius:12px;padding:3px 8px;}
html[dir="rtl"] .bc-done,html[dir="rtl"] .bc-new{right:auto;left:10px;}
.bc-done{background:#fff;color:#2e7d32;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;font-size:0.85rem;}
.bc-new{background:var(--cyan);color:var(--graphite);letter-spacing:.06em;}
.book.is-read .book-cover{filter:saturate(.75);}
.book-actions{display:flex;gap:8px;}
.book-read{flex:1;padding:9px 10px;border-radius:10px;border:none;background:var(--maroon-deep);color:#fff;font-weight:600;font-size:0.84rem;transition:background .2s;}
.book-read:hover{background:var(--maroon);}
.book.is-read .book-read{background:#fff;color:var(--maroon-deep);border:1px solid var(--soft-line);}
.book-dl{width:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--soft-line);background:#fff;color:var(--maroon-deep);font-size:0.9rem;}
.book-dl:hover{background:var(--peach-soft);}

.locked-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:46px 20px;background:#fff;border:1px dashed rgba(92,26,40,0.25);
  border-radius:var(--radius);}
.locked-card div{font-size:2.4rem;}
.locked-card b{font-family:var(--serif);font-size:1.2rem;color:var(--maroon-deep);}
.locked-card span{color:var(--muted);font-size:0.9rem;max-width:420px;line-height:1.55;}

/* exam call to action */
.exam-cta{display:flex;align-items:center;gap:18px;margin-top:30px;padding:22px 24px;border-radius:18px;color:#fff;background:var(--grad-brand);
  box-shadow:0 24px 44px -26px rgba(62,15,27,0.85);flex-wrap:wrap;position:relative;overflow:hidden;}
.exam-cta::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-110px;background:rgba(95,224,200,0.18);}
html[dir="rtl"] .exam-cta::after{right:auto;left:-70px;}
.exam-cta.passed{background:linear-gradient(135deg,#1d5e45,#2e7d32);}
.exam-cta-icon{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex:none;}
.exam-cta-text{flex:1;min-width:220px;position:relative;z-index:1;}
.exam-cta-text b{display:block;font-family:var(--serif);font-size:1.2rem;margin-bottom:3px;}
.exam-cta-text p{margin:0;font-size:0.88rem;opacity:.85;line-height:1.5;}
.exam-cta .btn-primary{background:#fff;color:var(--maroon-deep);position:relative;z-index:1;padding:12px 20px;}
.exam-cta.passed .btn-primary{color:#1d5e45;}
.exam-cta .btn-primary:hover{background:var(--peach-soft);}

/* step-by-step exam */
.quiz{margin-top:24px;background:#fff;border:1px solid var(--soft-line);border-radius:20px;box-shadow:var(--shadow-md);padding:26px 28px 24px;}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.quiz-top h4{font-family:var(--serif);font-size:1.2rem;color:var(--maroon-deep);margin:0;}
.quiz-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--soft-line);background:#fff;color:var(--muted);}
.quiz-progress{height:8px;border-radius:6px;background:rgba(92,26,40,0.08);overflow:hidden;}
.quiz-progress i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--maroon),var(--cyan));transition:width .4s ease;}
.quiz-count{display:block;font-size:0.76rem;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:10px 0 18px;}
.quiz .exam-q{animation:viewIn .3s ease-out;margin:0;}
.quiz .exam-q>p{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.4;color:var(--maroon-deep);margin:0 0 18px;}
.exam-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.exam-opts{grid-template-columns:1fr;}.quiz{padding:20px 18px;}}
.quiz .exam-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--soft-line);border-radius:14px;cursor:pointer;
  font-size:0.95rem;color:var(--ink);background:#FBF9F7;transition:border-color .15s,background .15s,transform .15s;}
.quiz .exam-opt:hover{border-color:rgba(92,26,40,0.35);background:#fff;}
.quiz .exam-opt input{position:absolute;opacity:0;pointer-events:none;}
.eo-key{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8rem;
  background:#fff;border:1px solid var(--soft-line);color:var(--maroon);}
.quiz .exam-opt:has(input:checked){border-color:var(--maroon);background:var(--peach-soft);transform:scale(1.01);}
.quiz .exam-opt:has(input:checked) .eo-key{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep);}
.quiz .exam-opt:has(input:focus-visible){outline:2px solid var(--maroon);outline-offset:2px;}
.quiz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;}
.quiz-nav .btn-primary{margin-inline-start:auto;}
.quiz-nav button:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.quiz-result{text-align:center;padding:16px 0 6px;animation:viewIn .4s ease-out;}
.qr-ring{--p:0;width:130px;height:130px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--ring) calc(var(--p) * 1%),rgba(92,26,40,0.08) 0);}
.quiz-result.win{--ring:#2e7d32;}
.quiz-result.try{--ring:#C9A227;}
.qr-ring b{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:1.9rem;color:var(--maroon-deep);}
.quiz-result h4{font-family:var(--serif);font-size:1.5rem;color:var(--maroon-deep);margin:0 0 6px;}
.quiz-result p{color:var(--muted);max-width:460px;margin:0 auto 18px;line-height:1.6;}
.qr-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:600;overflow:hidden;}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:confettiFall 2.6s cubic-bezier(.25,.6,.4,1) forwards;}
@keyframes confettiFall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9;}}

/* overview: next step */
.next-step{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--soft-line);border-radius:18px;
  padding:20px 22px;margin-bottom:22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.next-step::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--cyan),var(--cyan-dim));}
html[dir="rtl"] .next-step::before{inset:0 0 0 auto;}
.ns-icon{width:54px;height:54px;border-radius:16px;background:#EAF4F0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex:none;}
.ns-text{flex:1;min-width:200px;}
.ns-text small{display:block;font-size:0.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1d6b5b;}
.ns-text b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--maroon-deep);margin:2px 0;}
.ns-text span{font-size:0.86rem;color:var(--muted);}


/* ===== merge additions ===== */
.auth-forgot{background:none;border:none;color:var(--maroon);font-size:0.82rem;font-weight:600;padding:8px 0 0;cursor:pointer;display:block;}
.auth-forgot:hover{text-decoration:underline;}
.auth-note{font-size:0.86rem;color:#6b4f56;line-height:1.55;margin:0 0 14px;}
.auth-consent{display:flex !important;align-items:flex-start;gap:8px;font-weight:500 !important;font-size:0.8rem !important;color:#6b4f56 !important;}
.auth-consent input{width:auto !important;margin:2px 0 0 !important;}
.auth-consent a{color:var(--maroon);text-decoration:underline;}
.co-consent{margin:6px 0 4px;}
.csv-import{background:#FBF9F7;border:1px dashed rgba(92,26,40,0.25);border-radius:14px;padding:14px 16px;margin:16px 0;}
.csv-import b{display:block;color:var(--maroon-deep);font-size:0.9rem;margin-bottom:2px;}
.csv-import span{font-size:0.78rem;color:var(--muted);line-height:1.5;}
.csv-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
.csv-pick{cursor:pointer;}
.csv-sample{font-size:0.8rem;color:var(--maroon);text-decoration:underline;}
.exam-q-row button{background:none;border:none;color:#c79aa1;font-size:0.9rem;cursor:pointer;flex:none;}
.exam-q-row button:hover{color:#B4213D;}
.child-certs{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 14px;}
.child-certs button{font-size:0.74rem;border:1px solid #e3cf8f;background:#FFF7E6;color:#7a5a12;border-radius:12px;padding:5px 10px;cursor:pointer;}
.foot-bottom a{color:inherit;text-decoration:underline;opacity:.85;}

/* ===== certificate designer ===== */
.cd-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end;background:#fff;border:1px solid var(--soft-line);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.cd-tools label{display:block;font-size:0.78rem;font-weight:600;color:var(--maroon-deep);margin-bottom:6px;}
.cd-tools select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;}
.cd-tools input[type=color]{width:56px;height:40px;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff;cursor:pointer;}
.cd-pick{display:inline-flex !important;cursor:pointer;margin:0 !important;}
.cd-hint{display:block;font-size:0.7rem;color:var(--muted);margin-top:6px;}
.cd-help{font-size:0.86rem;color:#6b4f56;margin:0 0 10px;}
.cd-stage{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);background:#eee;user-select:none;touch-action:none;}
.cd-stage canvas{display:block;width:100%;height:auto;}
.cd-pin{position:absolute;width:18px;height:18px;padding:0;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #fff;
  background:var(--maroon-deep);cursor:grab;box-shadow:0 0 0 2px rgba(62,15,27,0.35),0 6px 14px -4px rgba(0,0,0,0.45);}
.cd-pin span{position:absolute;left:50%;bottom:calc(100% + 26px);transform:translateX(-50%);padding:3px 10px;border-radius:12px;background:var(--maroon-deep);
  color:#fff;font-size:0.72rem;font-weight:700;white-space:nowrap;opacity:.92;pointer-events:none;}
.cd-pin span::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:22px;background:var(--maroon-deep);transform:translateX(-50%);opacity:.6;}
.cd-pin.small,.cd-pin.small span,.cd-pin.small span::after{background:#6b4f56;}
.cd-pin.dragging{cursor:grabbing;background:var(--cyan-dim);}
.cd-pin:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.cd-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;}
.cd-actions .lib-submit{width:auto;padding:12px 26px;margin:0;}
.cd-msg{font-size:0.84rem;}

/* ===== Instagram ===== */
.wp-insta{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:0.84rem;font-weight:600;color:#C13584;text-decoration:none;}
.wp-insta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;}
.wp-insta:hover{text-decoration:underline;}
.ig-card{margin-top:28px;background:#fff;border:1px solid var(--soft-line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);}
.ig-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.ig-head b{display:block;color:var(--maroon-deep);font-size:1rem;}
.ig-head span{font-size:0.84rem;color:var(--muted);}
.ig-logo{width:46px;height:46px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.ig-logo svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;}
.ig-status{font-size:0.86rem;padding:10px 14px;border-radius:10px;background:#F4F0EC;color:#5a4148;margin-bottom:14px;}
.ig-status.ok{background:#EAF4F0;color:#1d6b5b;}
.ig-status.wait{background:#FFF7E6;color:#7a5a12;}
.ig-status.bad{background:#FDECEE;color:#B4213D;}
.ig-form label{display:block;font-size:0.78rem;font-weight:600;color:var(--maroon-deep);margin-bottom:6px;}
.ig-row{display:flex;gap:10px;flex-wrap:wrap;}
.ig-row input{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;}
.ig-row .lib-submit{width:auto;margin:0;padding:0 22px;}
.ig-form a{color:var(--maroon);}
/* ===== adaptive placement test ===== */
.pt-lvl{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--maroon-deep);background:#F7E4D4;border-radius:10px;padding:3px 8px;}
.pt-opts button.right{border-color:#2e7d32;background:#e8f5e9;color:#1b5e20;}
.pt-opts button.wrong{border-color:#B4213D;background:#fdecee;color:#8e1a30;}
.pt-opts button:disabled{cursor:default;transform:none;}
.pt-result{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.pt-result .pt-badge{margin:0;flex:none;}
.pt-kick{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a6b73;}
.pt-result h3{margin:2px 0 !important;}
.pt-score{font-size:.82rem;color:#8a6b73;}
.pt-scale{display:flex;gap:6px;margin:4px 0 14px;}
.pt-wq{font-weight:600;color:#2b1d21;margin:10px 0;}
#ptText{width:100%;box-sizing:border-box;border:1.5px solid rgba(92,26,40,.18);border-radius:14px;padding:12px;font-family:inherit;font-size:.95rem;resize:vertical;}
#ptText:focus{outline:none;border-color:var(--maroon);}
.pt-werr{min-height:1.2em;margin:6px 0;font-size:.85rem;color:var(--maroon);}
.pt-wfb{background:#FBEFE3;border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:.9rem;}
.pt-wfb p{margin:4px 0 0;}.pt-wfb em{font-style:normal;color:#1e6b34;font-weight:600;}
.pt-wait{display:flex;gap:6px;padding:12px 0;}.pt-wait i{width:9px;height:9px;border-radius:50%;background:var(--maroon);opacity:.3;animation:cocoDot 1s infinite;}
.pt-wait i:nth-child(2){animation-delay:.15s}.pt-wait i:nth-child(3){animation-delay:.3s}
.pt-scale i{flex:1;text-align:center;font-style:normal;font-size:.72rem;font-weight:700;padding:6px 0;border-radius:8px;background:#f4ecee;color:#a4838a;}
.pt-scale i.on{background:var(--maroon-deep);color:#fff;}
.pt-review{margin:0 0 16px;font-size:.86rem;}
.pt-review summary{cursor:pointer;font-weight:700;color:var(--maroon-deep);}
.pt-review ol{margin:10px 0 0;padding-inline-start:20px;max-height:200px;overflow:auto;display:grid;gap:8px;}
.pt-review li span{display:block;color:var(--ink);}
.pt-review li s{color:#B4213D;margin-inline-end:10px;}
.pt-review li b{color:#2e7d32;}
.ptest-card a.cta-ghost{display:inline-flex;align-items:center;text-decoration:none;}

/* ===== Coco, the robot English buddy ===== */
.coco-launcher{position:fixed;z-index:290;inset-inline-end:22px;bottom:22px;width:68px;height:68px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 30% 25%,#fff7ef,#F3C9A8);box-shadow:0 14px 30px -10px rgba(62,15,27,.55),0 0 0 4px rgba(255,255,255,.7);animation:cocoBob 3.2s ease-in-out infinite;}
.coco-launcher.hide{display:none;}
.coco-mini{width:56px;height:56px;margin:6px;}
.coco-hint{position:absolute;bottom:76px;inset-inline-end:0;white-space:nowrap;background:#fff;color:var(--maroon-deep);font:600 .8rem/1.2 inherit;padding:8px 12px;border-radius:14px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.35);animation:cocoHint 9s ease-in-out infinite;pointer-events:none;}
@keyframes cocoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cocoHint{0%,62%,100%{opacity:0;transform:translateY(6px)}68%,92%{opacity:1;transform:none}}
body:has(#dashboardPage:not([hidden])) .coco-hint{display:none;}
@media(max-width:760px){.coco-launcher{bottom:84px;inset-inline-end:14px;width:58px;height:58px}.coco-mini{width:48px;height:48px;margin:5px}}

.coco{position:fixed;z-index:420;inset-inline-end:22px;bottom:22px;width:min(410px,calc(100vw - 24px));height:min(640px,calc(100vh - 44px));display:flex;flex-direction:column;
  background:#fffaf5;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(30,8,14,.55),0 0 0 1px rgba(92,26,40,.08);animation:cocoIn .35s cubic-bezier(.2,.9,.3,1.2);}
.coco[hidden]{display:none;}
@keyframes cocoIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:560px){.coco{inset:0;width:100%;height:100%;border-radius:0}}
.coco-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;background:linear-gradient(135deg,#3E0F1B,#5C1A28 60%,#8A2E43);color:#fff;position:relative;}
.coco-head::after{content:'';position:absolute;inset:auto 0 -1px 0;height:18px;background:#fffaf5;border-radius:18px 18px 0 0;}
.coco-bot{position:relative;width:78px;height:78px;flex:none;animation:cocoBob 3.2s ease-in-out infinite;}
.coco-bot svg{width:78px;height:78px;position:relative;z-index:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));}
.coco-ring{position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 0 0 rgba(88,225,212,.6);}
.coco-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.coco-id b{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em;}
.coco-id>span{font-size:.74rem;opacity:.85;}
.coco-id em{font-style:normal;font-weight:700;color:#F3C9A8;}
.coco-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.coco-meta i{font-style:normal;font-size:.72rem;background:rgba(255,255,255,.14);padding:3px 8px;border-radius:12px;}
.coco-meta button{font:inherit;font-size:.72rem;color:#fff;background:rgba(255,255,255,.14);border:0;padding:3px 8px;border-radius:12px;cursor:pointer;}
.coco-meta button i{background:none;padding:0;}
.coco-actions{display:flex;flex-direction:column;gap:6px;align-self:flex-start;}
.coco-actions button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:.95rem;}
.coco-actions button:hover{background:rgba(255,255,255,.28);}
.coco-tabs{display:flex;gap:6px;padding:4px 14px 10px;}
.coco-tabs button{flex:1;border:1.5px solid rgba(92,26,40,.12);background:#fff;border-radius:14px;padding:9px 6px;font:600 .82rem inherit;color:var(--maroon-deep);cursor:pointer;transition:all .2s;}
.coco-tabs button.on{background:var(--maroon-deep);border-color:var(--maroon-deep);color:#fff;box-shadow:0 8px 16px -10px rgba(62,15,27,.8);}
.coco-log{flex:1;overflow-y:auto;padding:6px 14px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;}
.cmsg{max-width:88%;padding:11px 14px;border-radius:18px;font-size:.92rem;line-height:1.5;animation:cocoMsg .3s ease;}
@keyframes cocoMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cmsg p{margin:0;}
.cmsg.bot{align-self:flex-start;background:#fff;border:1px solid rgba(92,26,40,.1);border-end-start-radius:6px;color:#2b1d21;box-shadow:0 6px 16px -14px rgba(0,0,0,.4);}
.cmsg.me{align-self:flex-end;background:linear-gradient(135deg,#5C1A28,#8A2E43);color:#fff;border-end-end-radius:6px;}
.cmsg.err{background:#fff4e5;border-color:#f1dcc4;}
.cmsg.scene{align-self:center;background:#F3E7DD;color:var(--maroon-deep);font-weight:700;font-size:.8rem;padding:6px 14px;}
.cmsg.scene span{margin-inline-end:6px;}
.cmsg.typing{display:flex;gap:5px;padding:14px 16px;}
.cmsg.typing span{width:8px;height:8px;border-radius:50%;background:#c9a7b0;animation:cocoDot 1s infinite;}
.cmsg.typing span:nth-child(2){animation-delay:.15s}.cmsg.typing span:nth-child(3){animation-delay:.3s}
@keyframes cocoDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.cmsg-tools{display:flex;gap:6px;margin-top:6px;}
.cmsg-tools button{border:0;background:#F6EEE8;color:var(--maroon-deep);font:600 .72rem inherit;padding:4px 9px;border-radius:10px;cursor:pointer;}
.cmsg-ar{margin-top:6px !important;font-size:.85rem;color:#6a5057;direction:rtl;text-align:right;}
.ccorr{margin-top:10px;background:#FFF8E8;border:1px solid #F2D99B;border-radius:14px;padding:10px 12px;display:grid;gap:3px;}
.ccorr b{font-size:.76rem;color:#8a6418;}
.ccorr s{color:#B4213D;font-size:.85rem;}
.ccorr em{font-style:normal;color:#1e6b34;font-weight:700;}
.ccorr small{color:#6a5057;font-size:.78rem;text-align:right;}
.cwords{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.cwords button{border:1.5px dashed #b98cf0;background:#f7f1ff;color:#4b2a7a;border-radius:12px;padding:5px 10px;font:600 .78rem inherit;cursor:pointer;}
.cwords button small{font-weight:400;opacity:.8;}
.cwords button.saved{border-style:solid;background:#e6f4ea;border-color:#9fd5ae;color:#1e6b34;}
.cmsg-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cbtn{border:0;border-radius:14px;padding:10px 14px;background:var(--maroon-deep);color:#fff;font:700 .82rem inherit;cursor:pointer;}
.cbtn.ghost{background:#F6EEE8;color:var(--maroon-deep);}
.cbtn.big{flex:1;min-width:120px;font-size:.95rem;}
.coco-rec.on,.coco-mic.on{background:#c0392b !important;color:#fff;animation:recPulse 1.2s ease-in-out infinite;}
.cscenes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.cscenes button{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(92,26,40,.12);background:#fffaf5;border-radius:14px;padding:10px;font:600 .82rem inherit;color:var(--maroon-deep);cursor:pointer;text-align:start;transition:transform .2s,border-color .2s;}
.cscenes button:hover{transform:translateY(-2px);border-color:var(--maroon);}
.cscenes span{font-size:1.4rem;}
.cmsg.say{max-width:100%;width:100%;text-align:center;}
.cmsg.say>small{color:#8a6b73;}
.ctarget{font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--maroon-deep);margin:8px 0 2px !important;}
.ctarget span{transition:color .3s,background .3s;border-radius:6px;padding:0 2px;}
.ctarget span.ok{color:#1e6b34;background:#e6f4ea;}
.ctarget span.miss{color:#B4213D;background:#fdecee;}
.cscore{margin-top:12px;display:grid;gap:4px;}
.cscore b{font-size:1.2rem;color:#d49b00;letter-spacing:.06em;}
.cscore small{color:#8a6b73;}
.cscore em{font-style:normal;font-weight:600;color:var(--maroon-deep);}
.coco-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 14px;border-top:1px solid rgba(92,26,40,.08);background:#fff;}
.coco.say-mode .coco-form{display:none;}
.coco.lesson-active .coco-form{display:none;}
.ccmds{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;}
.ccmds button{display:flex;align-items:center;gap:7px;text-align:start;border:1.5px solid rgba(92,26,40,.12);background:#fffaf5;border-radius:14px;padding:10px;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--maroon-deep);cursor:pointer;transition:border-color .2s,transform .2s;}
.ccmds button:hover{border-color:var(--maroon);transform:translateY(-1px);}
.ccmds button span{font-size:1.15rem;}
.cform{display:grid;gap:8px;margin-top:6px;}
.cform>b{color:var(--maroon-deep);}
.cform label{display:grid;gap:4px;font-size:.76rem;font-weight:700;color:#6a5057;}
.cform input,.cform select,.cform textarea{width:100%;box-sizing:border-box;border:1.5px solid rgba(92,26,40,.15);border-radius:12px;padding:9px 10px;font-family:inherit;font-size:.86rem;background:#fff;color:#2b1d21;}
.cdone-form .cform{opacity:.55;pointer-events:none;}
.cform [dir="ltr"]{direction:ltr;text-align:left;}
.cform [dir="rtl"]{direction:rtl;text-align:right;}
.cres{border:1px solid rgba(92,26,40,.1);border-radius:14px;padding:8px 10px;margin-top:7px;background:#fff;}
.cres summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:.84rem;color:var(--maroon-deep);}
.cres summary small{font-weight:600;color:#6a5057;white-space:nowrap;}
.cres ul{margin:8px 0;padding:0;list-style:none;display:grid;gap:4px;font-size:.84rem;}
.cres li.miss{color:#9a7b83;}
.creport{white-space:pre-wrap;font-family:inherit;font-size:.8rem;line-height:1.6;background:#fffaf5;border:1px dashed rgba(92,26,40,.2);border-radius:12px;padding:10px;margin:8px 0 0;}
.cchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.cchips button{border:1.5px solid rgba(92,26,40,.14);background:#fff;border-radius:999px;padding:7px 12px;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--maroon-deep);cursor:pointer;}
.cchips button:hover{border-color:var(--maroon);}
.cassist{line-height:1.65;overflow-wrap:anywhere;}
.cacts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;}
.cacts li{display:flex;gap:7px;align-items:center;background:#f1f9f3;border:1px solid #cfe8d6;color:#1e6b34;border-radius:12px;padding:7px 10px;font-size:.8rem;font-weight:600;}
.ctopics small{font-weight:500;color:#9a6b00;}
@media(max-width:420px){.ccmds{grid-template-columns:1fr}}
.cbook-menu{display:grid;grid-template-columns:1fr 1fr;}
.cbook-menu .cbtn{text-align:start;}
.copts button.meh{background:#FFF8E8;border-color:#F2D99B;color:#8a6100;}
.cdone small{font-size:.8rem;color:#6a5057;}
.csearch{width:100%;box-sizing:border-box;margin-top:10px;border:1.5px solid rgba(92,26,40,.18);border-radius:14px;padding:10px 12px;font-family:inherit;font-size:.88rem;background:#fff;color:#2b1d21;}
.csearch:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 3px rgba(92,26,40,.12);}
.ctopics small{font-weight:500;color:#9a7b83;}
.cnone{margin:6px 2px 0;font-size:.84rem;color:#6a5057;}
.ctopics{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
.ctopics button{text-align:start;border:1.5px solid rgba(92,26,40,.12);background:#fffaf5;border-radius:14px;padding:10px 12px;font:600 .84rem inherit;color:var(--maroon-deep);cursor:pointer;transition:transform .2s,border-color .2s;}
.ctopics button:hover{transform:translateX(3px);border-color:var(--maroon);}
html[dir="rtl"] .ctopics button:hover{transform:translateX(-3px);}
.ctopics button.done{background:#f1f9f3;border-color:#cfe8d6;color:#1e6b34;}
.cmsg.board{max-width:100%;width:100%;padding:0;background:none;border:0;box-shadow:none;}
.cboard{position:relative;background:linear-gradient(160deg,#1f4a42,#163832);color:#f4f1e8;border-radius:18px;padding:14px 16px 16px;border:6px solid #8a5a3b;box-shadow:inset 0 0 40px rgba(0,0,0,.35),0 12px 24px -16px rgba(0,0,0,.6);}
.cb-top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#bfe7dc;}
.cb-top i{display:flex;gap:5px;}
.cb-top i b{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);}
.cb-top i b.done{background:#7ff3e6;}
.cb-top i b.now{background:#ffd76a;}
.cboard h4{font-family:var(--serif);font-size:1.15rem;color:#ffd76a;margin:8px 0 6px;}
.cb-explain{margin:0;line-height:1.6;font-size:.92rem;}
.cboard .cmsg-tools button{background:rgba(255,255,255,.12);color:#fff;}
.cboard .cmsg-ar{color:#d9efe9;}
.cb-rule{margin:12px 0 6px;border:2px dashed rgba(255,215,106,.7);border-radius:12px;padding:10px 12px;font:700 1rem/1.5 ui-monospace,Menlo,Consolas,monospace;color:#fff;text-align:center;background:rgba(0,0,0,.15);}
.cb-ex{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px;}
.cb-ex li{display:flex;gap:8px;align-items:flex-start;}
.cb-ex button{flex:none;border:0;background:rgba(255,255,255,.14);border-radius:8px;width:28px;height:28px;cursor:pointer;}
.cb-ex b{display:block;font-weight:600;}
.cb-ex small{color:#bfe7dc;font-size:.78rem;}
.cquiz{margin-top:10px;background:#fff;border:1px solid rgba(92,26,40,.1);border-radius:16px;padding:12px 14px;}
.cquiz>b{font-size:.76rem;color:var(--maroon);}
.cquiz>p{margin:4px 0 8px;font-weight:600;color:#2b1d21;}
.copts{display:grid;gap:7px;}
.copts button{text-align:left;border:1.5px solid rgba(92,26,40,.15);background:#fffaf5;border-radius:12px;padding:10px 12px;font:600 .88rem inherit;color:#2b1d21;cursor:pointer;}
.copts button:hover:not(:disabled){border-color:var(--maroon);}
.copts button.right{background:#e6f4ea;border-color:#2e7d32;color:#1b5e20;}
.copts button.wrong{background:#fdecee;border-color:#B4213D;color:#8e1a30;}
.copts button:disabled{cursor:default;}
.cwhy{margin-top:10px;display:grid;gap:8px;}
.cwhy p{margin:0;font-size:.86rem;}
.cwhy span{display:block;color:#6a5057;margin-top:3px;}
.cdone{text-align:center;display:grid;gap:4px;justify-items:center;}
.cdone>span{font-size:2.2rem;animation:cocoBob 1.6s ease-in-out infinite;}
.cdone b{font-family:var(--serif);font-size:1.25rem;color:var(--maroon-deep);}
.cdone bdi{font-size:.85rem;color:#6a5057;}
.cdone em{font-style:normal;color:#d49b00;font-weight:800;letter-spacing:.06em;}
.cdone p{margin:6px 0 0;font-size:.86rem;}
.coco-tabs button span{white-space:nowrap;}
@media(max-width:420px){.coco-tabs{gap:4px;padding:4px 10px 10px}.coco-tabs button{font-size:.74rem;padding:8px 2px}}
.coco-form textarea{flex:1;resize:none;border:1.5px solid rgba(92,26,40,.15);border-radius:16px;padding:11px 14px;font:inherit;font-size:.92rem;max-height:110px;background:#fffaf5;}
.coco-form textarea:focus{outline:none;border-color:var(--maroon);}
.coco-mic,.coco-send{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font-size:1.05rem;flex:none;}
.coco-mic{background:#F6EEE8;}
.coco-send{background:var(--maroon-deep);color:#fff;}
/* the face: moods and states */
.coco-bot .c-arc,.coco-bot .c-flat,.coco-bot .c-open,.coco-mini .c-arc,.coco-mini .c-flat,.coco-mini .c-open{display:none;}
.coco-mini .c-eye,.coco-bot .c-eye{animation:cocoBlink 4.2s infinite;transform-origin:center;transform-box:fill-box;}
@keyframes cocoBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.c-bulb{animation:cocoBulb 2.4s ease-in-out infinite;}
@keyframes cocoBulb{0%,100%{fill:#58e1d4}50%{fill:#F3C9A8}}
.coco-bot[data-mood="proud"] .c-eye{display:none}.coco-bot[data-mood="proud"] .c-arc{display:inline}
.coco-bot[data-mood="thinking"] .c-eye{transform:translate(3px,-4px) scale(.8);animation:none}
.coco-bot[data-mood="thinking"] .c-smile{display:none}.coco-bot[data-mood="thinking"] .c-flat{display:inline}
.coco-bot[data-mood="curious"] .c-eye:first-child{transform:scale(1.2);animation:none}
.coco-bot[data-mood="curious"] .c-smile{display:none}.coco-bot[data-mood="curious"] .c-open{display:inline;transform:scale(.6);transform-origin:center;transform-box:fill-box}
.coco-heart,.coco-think,.coco-sparks{position:absolute;z-index:2;opacity:0;pointer-events:none;transition:opacity .3s;}
.coco-heart{top:-4px;inset-inline-end:-4px;font-size:1.1rem;}
.coco-think{top:-8px;inset-inline-start:-2px;font:900 1.4rem/1 serif;color:#F3C9A8;}
.coco-sparks{top:-6px;inset-inline-start:24px;font-size:1.3rem;}
.coco-bot[data-mood="encouraging"] .coco-heart{opacity:1;animation:cocoBob 1.6s infinite}
.coco-bot[data-mood="thinking"] .coco-think,.coco-bot.busy .coco-think{opacity:1;animation:cocoDot 1s infinite}
.coco-bot.spark .coco-sparks{opacity:1;animation:cocoSpark .9s ease-out}
@keyframes cocoSpark{from{transform:scale(.4) rotate(-20deg)}to{transform:scale(1.4) rotate(15deg);opacity:0}}
.coco-bot.talking .c-smile,.coco-bot.talking .c-flat{display:none}
.coco-bot.talking .c-open{display:inline;animation:cocoTalk .22s ease-in-out infinite alternate;transform-origin:center;transform-box:fill-box}
@keyframes cocoTalk{from{transform:scaleY(.25)}to{transform:scaleY(1.1)}}
.coco-bot.listening .coco-ring{animation:cocoListen 1.2s ease-out infinite}
.coco-bot.listening .c-ear{fill:#58e1d4}
@keyframes cocoListen{0%{box-shadow:0 0 0 0 rgba(88,225,212,.7)}100%{box-shadow:0 0 0 22px rgba(88,225,212,0)}}
@media(prefers-reduced-motion:reduce){.coco-launcher,.coco-bot,.coco-hint,.c-bulb,.c-eye{animation:none !important}}

/* ===== accreditation ===== */
.accredit{padding:70px 0;background:#fff;}
.accredit-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;}
.accredit-cert{display:block;border-radius:16px;overflow:hidden;box-shadow:0 26px 50px -28px rgba(62,15,27,.55);border:1px solid var(--soft-line);transition:transform .3s;}
.accredit-cert:hover{transform:translateY(-4px) rotate(-.4deg);}
.accredit-cert img{width:100%;height:auto;}
.accredit-copy .kicker{font-family:var(--serif);font-style:italic;color:var(--maroon);font-size:1.1rem;margin-bottom:8px;}
.accredit-copy h2{font-family:var(--serif);color:var(--maroon-deep);font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 10px;}
.accredit-copy p{color:#5a464b;margin:0 0 18px;}
.accredit-facts{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.accredit-facts li{background:var(--peach-soft);border-radius:14px;padding:10px 12px;}
.accredit-facts small{display:block;font-size:.72rem;color:#8a6f75;}
.accredit-facts b{color:var(--maroon-deep);font-size:.95rem;white-space:nowrap;}
@media(max-width:820px){.accredit{padding:46px 0}.accredit-grid{grid-template-columns:1fr;gap:24px}.accredit-facts{grid-template-columns:1fr 1fr 1fr}.accredit-facts b{font-size:.82rem}}

.footer-indep{display:block;margin-top:6px;font-size:.74rem;opacity:.75;}

.lv-upbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--soft-line);border-radius:16px;padding:12px 16px;margin:0 0 14px;}
.lv-upbar b{display:block;font-family:var(--serif);color:var(--maroon-deep);font-size:1.05rem;}
.lv-upbar span{font-size:.8rem;color:var(--muted);}
.lv-upbar .lib-submit{width:auto;margin:0;padding:10px 18px;}

/* home: a level's books */
.lv-ladder button.lv-stage{font:inherit;cursor:pointer;width:100%;}
.lv-ladder .lv-stage.on{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(92,26,40,.14),var(--shadow-md);transform:translateY(-4px);}
.lvb-hint{font-size:.85rem;color:var(--maroon);margin-top:6px;}
.lv-books{margin-top:22px;background:#fff;border:1px solid var(--soft-line);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm);}
.lvb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.lvb-head b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--maroon-deep);}
.lvb-head span{font-size:.82rem;color:var(--muted);}
.lvb-head .lib-submit,.lvb-foot .lib-submit{width:auto;margin:0;padding:10px 18px;text-decoration:none;display:inline-block;}
.lvb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.lvb-book{display:flex;flex-direction:column;gap:6px;border-radius:16px;padding:14px;color:#fff;background:linear-gradient(150deg,hsl(var(--h,340) 45% 38%),hsl(calc(var(--h,340) + 30) 50% 26%));min-height:150px;}
.lvb-cover{font-size:1.5rem;}
.lvb-book b{font-family:var(--serif);font-size:1rem;line-height:1.3;}
.lvb-book small{opacity:.85;font-size:.76rem;}
.lvb-read{margin-top:auto;border:0;border-radius:10px;padding:8px 10px;background:#fff;color:var(--maroon-deep);font-weight:700;cursor:pointer;font-family:inherit;}
.lvb-lock{margin-top:auto;font-size:.78rem;background:rgba(255,255,255,.18);border-radius:10px;padding:7px 10px;}
.lvb-empty{color:var(--muted);margin:6px 0;}
.lvb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--soft-line);}
.lvb-foot span{flex:1;min-width:200px;color:#5a464b;font-size:.9rem;}
.lvb-load{display:flex;gap:6px;justify-content:center;padding:20px;}.lvb-load span{width:9px;height:9px;border-radius:50%;background:var(--maroon);opacity:.35;animation:cocoDot 1s infinite;}
.lvb-load span:nth-child(2){animation-delay:.15s}.lvb-load span:nth-child(3){animation-delay:.3s}

/* bank transfer */
.pm-ico.bank svg{width:22px;height:22px;fill:none;stroke:var(--maroon-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bank-box{margin-top:12px;background:var(--peach-soft);border:1px solid var(--soft-line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;text-align:start;width:100%;box-sizing:border-box;}
.bank-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bank-row span{min-width:110px;font-size:.8rem;color:#6a5057;}
.bank-row b{color:var(--maroon-deep);}
.bank-iban{font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em;}
.bank-row .sess-btn{padding:5px 12px;font-size:.78rem;}
.bank-note{margin:2px 0;font-size:.85rem;color:#5a464b;}
.bank-ok{margin:2px 0;color:#1e6b34;font-weight:600;font-size:.9rem;}
.bank-up{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bank-up input{flex:1;min-width:180px;font-size:.85rem;}
.bank-up .lib-submit{width:auto;margin:0;padding:9px 16px;}
.bank-msg{margin:0;font-size:.82rem;color:var(--maroon);}
.link-btn{border:0;background:none;color:var(--maroon);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;}

/* site search */
.search-nav svg{width:19px;height:19px;}
.nav-actions .icon-btn.search-nav{display:inline-flex;} /* the search stays on every screen size */
.ss-overlay{position:fixed;inset:0;z-index:400;background:rgba(20,8,12,.55);display:flex;justify-content:center;align-items:flex-start;padding:70px 14px 20px;}
.ss-box{width:100%;max-width:640px;background:#fff;border-radius:20px;box-shadow:0 30px 60px -20px rgba(20,8,12,.6);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 100px);}
.ss-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--soft-line);}
.ss-bar svg{width:20px;height:20px;color:var(--maroon);flex:none;}
.ss-bar input{flex:1;border:0;outline:none;font-family:inherit;font-size:1.05rem;padding:6px 0;background:transparent;color:#2b1d21;min-width:0;}
.ss-bar input::-webkit-search-cancel-button{display:none;}
.ss-x{border:0;background:#F6EEE8;color:var(--maroon-deep);border-radius:10px;width:34px;height:34px;cursor:pointer;flex:none;}
.ss-results{overflow-y:auto;padding:8px 10px 14px;}
.ss-group>b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 8px 4px;}
.ss-hit{display:flex;gap:12px;align-items:center;width:100%;text-align:start;border:0;background:none;padding:9px 10px;border-radius:12px;cursor:pointer;font-family:inherit;color:#2b1d21;}
.ss-hit:hover,.ss-hit:focus{background:var(--peach-soft);outline:none;}
.ss-hit>span:first-child{font-size:1.2rem;width:28px;text-align:center;flex:none;}
.ss-hit bdi{font-weight:600;}
.ss-hit small{display:block;font-size:.76rem;color:var(--muted);}
.ss-tip{color:var(--muted);margin:14px 10px;font-size:.92rem;}

/* new worlds: Tech Lab and French club */
.more-at{padding:70px 0;background:#fff;}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px;}
.more-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:26px;text-decoration:none;overflow:hidden;min-height:260px;transition:transform .3s,box-shadow .3s;}
.more-card:hover{transform:translateY(-6px);}
.more-card.tech{color:#fff;background:radial-gradient(500px 260px at 90% 0,#3b2a7a,transparent 60%),radial-gradient(400px 260px at 0 100%,#0f5b56,transparent 60%),#140d26;box-shadow:0 30px 50px -30px rgba(20,13,38,.8);}
.more-card.fr{color:#3E0F1B;background:linear-gradient(180deg,#fbf6ee,#f3e3cc);border:1px solid rgba(62,15,27,.1);box-shadow:0 30px 50px -34px rgba(62,15,27,.5);}
.more-card.fr::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(90deg,#5C1A28 0 30px,#fff6e8 30px 60px);}
.more-em{font-size:2.6rem;}
.more-tag{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8;}
.more-card b{font-family:var(--serif);font-size:1.6rem;line-height:1.2;}
.more-p{opacity:.85;font-size:.95rem;max-width:440px;}
.more-go{margin-top:auto;font-weight:700;}
.more-card.tech .more-go{color:#21d4b4;}
.more-card.fr .more-go{color:#c8243c;}
.nav-new span::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#21d4b4;margin-inline-start:5px;vertical-align:super;}
@media(max-width:760px){.more-grid{grid-template-columns:1fr}.more-at{padding:46px 0}}

/* ===== lighter on phones ===== */
/* the paper-grain layer covers the whole page; on phones it makes every scroll repaint everything */
@media (hover:none), (max-width:820px){
  body::before, .scene-grain{display:none;}
  /* same colours, but the big section backgrounds stand still (moving them repaints the whole section every frame) */
  .flow-bg{animation:none;}
}
/* looping animations rest while their section is off screen (app.js adds .offscreen) */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after{animation-play-state:paused !important;}
/* ===== one academy, three worlds ===== */
.more-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.more-grid.three{grid-template-columns:1fr}}
.more-card.en{color:#fff;background:radial-gradient(420px 240px at 100% 0,#9b2c45,transparent 60%),radial-gradient(380px 240px at 0 100%,#2D8C79,transparent 60%),var(--maroon-deep);box-shadow:0 30px 50px -30px rgba(62,15,27,.8)}
.more-card.en .more-go{color:var(--cyan)}
.more-card.en .more-tag{color:#ffd9df}
/* ===== English games ===== */
.en-games{padding:70px 0}
.eg{background:#fff;border:1px solid var(--line);border-radius:30px;padding:26px;box-shadow:0 30px 60px -44px rgba(62,15,27,.55)}
.eg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.eg-top .kicker{margin-bottom:4px}
.eg-top h2{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0;color:var(--maroon-deep)}
.eg-top p{margin:4px 0 0;color:#6d5a5e}
.eg-stars{font-weight:800;background:#fff6d6;border:1.5px solid #f0c44a;border-radius:999px;padding:8px 16px;white-space:nowrap}
.eg-stars small{color:#7a6a5c;font-weight:700}
.eg-stars.lvlup{animation:egLvl 1s}
@keyframes egLvl{30%{transform:scale(1.25) rotate(-4deg)}60%{transform:scale(.95)}}
.eg-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
@media(max-width:900px){.eg-tabs{grid-template-columns:repeat(3,1fr)}}
.eg-tabs button{border:1.5px solid var(--line);background:var(--paper);border-radius:18px;padding:12px 6px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:center;transition:transform .15s,box-shadow .15s}
.eg-tabs button:hover{transform:translateY(-3px);box-shadow:0 14px 24px -18px rgba(62,15,27,.6)}
.eg-tabs .ic{display:block;font-size:1.7rem;line-height:1.2}
.eg-tabs b{display:block;font-size:.9rem;line-height:1.25}
.eg-tabs small{display:inline-block;margin-top:5px;background:#fff;border-radius:999px;padding:1px 9px;font-size:.72rem;color:#7a6a5c;font-weight:700}
.eg-tabs button.on{border-color:var(--maroon);background:var(--maroon);color:#fff}
.eg-tabs button.on small{color:var(--maroon)}
.eg-stage{background:linear-gradient(180deg,var(--peach-soft),#fff);border-radius:22px;padding:22px;min-height:280px}
.eg-stage h3{margin:0 0 4px;font-size:1.25rem;color:var(--maroon-deep)}
.eg-stage .hint{margin:0 0 14px;color:#6d5a5e;font-size:.92rem}
.eg-big{font-size:5rem;text-align:center;line-height:1.1;margin:6px 0 10px;animation:egPop .4s}
@keyframes egPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.eg-opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.eg-opts.col{flex-direction:column;align-items:stretch}
.eg-opts button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:11px 16px;font:600 1rem var(--sans);cursor:pointer;color:var(--ink);text-align:start;transition:transform .12s}
html[lang=ar] .eg-opts button.en-txt{direction:ltr;text-align:left}
.eg-opts button:hover{border-color:var(--maroon);transform:translateY(-1px)}
.eg-opts button.ok{background:#dcfbe9;border-color:#2fbf71}
.eg-opts button.no{background:#ffe3e8;border-color:#ff6f8a}
.eg-sent{font:600 1.25rem var(--sans);text-align:center;direction:ltr;background:#fff;border-radius:16px;padding:14px;margin-bottom:12px}
.eg-sent u{text-decoration:none;border-bottom:3px dashed var(--maroon);padding:0 10px;color:var(--maroon)}
.eg-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;direction:ltr;margin:10px 0}
.eg-tile{width:48px;height:52px;border-radius:12px;border:0;background:var(--maroon);color:#fff;font:800 1.35rem var(--sans);cursor:pointer;box-shadow:0 5px 0 var(--maroon-deep);transition:transform .1s}
.eg-tile:active{transform:translateY(3px);box-shadow:0 2px 0 var(--maroon-deep)}
.eg-tile:disabled{opacity:.25;cursor:default}
.eg-slots{display:flex;gap:6px;justify-content:center;direction:ltr;flex-wrap:wrap;min-height:56px}
.eg-slots span{width:44px;height:52px;border-radius:12px;border:2px dashed rgba(92,26,40,.3);display:grid;place-items:center;font:800 1.35rem var(--sans);color:var(--maroon-deep);background:#fff}
.eg-slots.good span{border:2px solid #2fbf71;background:#effcf4}
.eg-slots.bad span{border:2px solid #ff6f8a;background:#fff3f5;animation:egShake .4s}
@keyframes egShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.eg-input{display:flex;gap:8px;max-width:420px;margin:10px auto}
.eg-input input{flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;font:600 1.1rem var(--sans);direction:ltr;text-align:center}
.eg-btn{border:0;border-radius:14px;padding:11px 18px;font:700 .95rem var(--sans);cursor:pointer;background:var(--maroon);color:#fff}
.eg-btn.ghost{background:#fff;color:var(--maroon-deep);border:1.5px solid var(--line)}
.eg-btn.listen{font-size:1.6rem;padding:14px 22px;border-radius:999px;display:block;margin:6px auto;animation:egPulse 2s infinite}
@keyframes egPulse{0%{box-shadow:0 0 0 0 rgba(92,26,40,.35)}100%{box-shadow:0 0 0 18px transparent}}
.eg-msg{min-height:1.4em;font-weight:700;margin:12px 0 0;text-align:center}
.eg-foot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.eg-diff{display:flex;gap:6px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.eg-diff button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:5px 12px;cursor:pointer;font:700 .88rem var(--sans)}
.eg-diff button.on{background:var(--maroon-deep);color:#fff;border-color:var(--maroon-deep)}
.eg-phrase{font:700 1.6rem var(--serif);text-align:center;color:var(--maroon-deep);margin:4px 0;direction:ltr}
.eg-ex{text-align:center;color:#6d5a5e;font-style:italic;direction:ltr;margin:0 0 12px}
@media(max-width:520px){.eg{padding:16px;border-radius:22px}.eg-stage{padding:16px}.eg-tabs b{font-size:.8rem}.eg-tile{width:40px;height:46px;font-size:1.15rem}.eg-slots span{width:38px;height:46px}.eg-big{font-size:4rem}}
@media(prefers-reduced-motion:reduce){.eg-big,.eg-btn.listen,.eg-slots.bad span{animation:none}}
/* small phones: keep the header inside the screen */
@media(max-width:420px){
  .nav-inner{gap:8px}
  .brand{gap:8px}
  .brand img{height:32px}
  .brand span{font-size:1.02rem}
  .nav-actions{gap:5px}
  .lang-btn{padding:6px 9px}
  .lang-btn .globe{display:none}
}
/* ===== lighter page =====
   - the full-screen paper grain was re-blended on every scroll frame: removed
   - the moving section gradients repainted large areas non-stop: now still
   - sections below the fold are not rendered until they come near the screen */
body::before{display:none!important}
.flow-bg{animation:none!important;background-size:100% 100%!important}
main>section,body>section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px}