/* ═══════════════════════════════════════
  VARIABLES & RESET
═══════════════════════════════════════ */
:root {
 --navy:    #1D3557;
 --navy-mid:  #162b47;
 --navy-light: #254470;
 --navy-dark:  #112035;
 --gold:    #B38B4D;
 --gold-light: #C9A366;
 --gold-bright: #D4AE78;
 --gold-pale:  rgba(179,139,77,.12);
 --gold-pale2: rgba(179,139,77,.06);
 --teal:    #B38B4D;
 --teal-light: #C9A366;
 --teal-pale:  rgba(179,139,77,.12);
 --amber:    #c97c28;
 --amber-pale: rgba(201,124,40,.1);
 --green:    #2a7a4b;
 --green-pale: rgba(42,122,75,.1);
 --purple:   #6b4fa0;
 --cream:    #F9F5EF;
 --bg-light:  #f2ede4;
 --white:    #ffffff;
 --border:   #e3ddd3;
 --border-mid: #d0c8ba;
 --text:    #2c2c2c;
 --muted:    #6b6255;
 --radius:   12px;
 --shadow-sm:  0 2px 8px rgba(29,53,87,.07);
 --shadow-md:  0 6px 24px rgba(29,53,87,.12);
 --shadow-lg:  0 16px 48px rgba(29,53,87,.16);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--text); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; }

/* ═══════════════════════════════════════
  TIMES EDU ICON SYSTEM
═══════════════════════════════════════ */
.te-icon {
 width:1em;
 height:1em;
 display:inline-block;
 vertical-align:-.16em;
 fill:none;
 stroke:currentColor;
 stroke-width:1.75;
 stroke-linecap:round;
 stroke-linejoin:round;
 flex-shrink:0;
}
.te-icon-slot,
[data-te-icon] {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 line-height:1;
 flex-shrink:0;
}
.with-icon {
 display:inline-flex;
 align-items:center;
 gap:.45rem;
}
.icon-chip {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:2.65rem;
 height:2.65rem;
 border-radius:12px;
 background:var(--gold-pale);
 color:var(--gold);
}

/* ═══════════════════════════════════════
  NAV
═══════════════════════════════════════ */
nav {
 background:var(--navy);
 position:sticky; top:0; z-index:200;
 height:62px;
 display:flex; align-items:center; justify-content:space-between;
 padding:0 5%;
 box-shadow:0 2px 20px rgba(29,53,87,.4);
}
.logo { font-family:'Playfair Display',serif; font-size:1.45rem; font-weight:900; color:#fff; letter-spacing:-0.5px; }
.logo span { color:var(--gold-bright); }
.nav-center { display:flex; gap:0; list-style:none; }
.nav-center a {
 color:rgba(255,255,255,.65); font-size:.85rem; font-weight:500;
 padding:.45rem .9rem; border-radius:6px; transition:all .18s;
 display:block;
}
.nav-center a:hover, .nav-center a.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-center a.active { color:var(--gold-bright); background:rgba(179,139,77,.15); }
.nav-right { display:flex; gap:.6rem; align-items:center; }
.hidden { display:none !important; }
.auth-actions, .auth-user-panel { display:flex; gap:.6rem; align-items:center; }
.auth-user-chip {
 background:rgba(255,255,255,.08);
 border:1.5px solid rgba(255,255,255,.18);
 color:#fff;
 border-radius:999px;
 padding:.34rem .8rem;
 min-width:0;
 display:flex;
 flex-direction:column;
 line-height:1.1;
}
.auth-user-name {
 max-width:180px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-size:.8rem;
 font-weight:600;
}
.auth-user-role {
 font-size:.64rem;
 text-transform:uppercase;
 letter-spacing:.6px;
 color:var(--gold-bright);
 margin-top:.14rem;
}
.btn-ghost { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; padding:.38rem 1rem; border-radius:7px; font-size:.83rem; font-weight:500; transition:all .18s; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold-bright); }
.btn-primary { background:var(--gold); border:none; color:#fff; padding:.42rem 1.1rem; border-radius:7px; font-size:.83rem; font-weight:600; transition:background .18s; }
.btn-primary:hover { background:var(--gold-light); }

/* ═══════════════════════════════════════
  BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb {
 background:var(--white); border-bottom:1px solid var(--border);
 padding:.7rem 5%; display:flex; align-items:center; gap:.5rem;
 font-size:.8rem; color:var(--muted);
}
.breadcrumb a { color:var(--teal); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb-sep { color:var(--border); }

/* ═══════════════════════════════════════
  PAGE WRAPPER
═══════════════════════════════════════ */
.page { display:none; animation:pageIn .35s ease both; }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.section,
.static-body,
.lesson-wrap,
.plan-wrap,
.pricing-table-wrap {
 content-visibility:auto;
 contain-intrinsic-size: 1px 900px;
}

/* ═══════════════════════════════════════
  HOME – HERO
═══════════════════════════════════════ */
.hero {
 background:var(--navy);
 position:relative; overflow:hidden;
 padding:5rem 5% 4.5rem;
 text-align:center;
}
.hero::before {
 content:'';
 position:absolute; inset:0;
 background:radial-gradient(ellipse 90% 60% at 50% -5%, rgba(179,139,77,.22) 0%, transparent 65%);
 pointer-events:none;
}
.hero-dots {
 position:absolute; inset:0;
 background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
 background-size:30px 30px;
 pointer-events:none;
}
.hero-badge {
 display:inline-flex; align-items:center; gap:.4rem;
 background:rgba(179,139,77,.18); border:1px solid rgba(179,139,77,.4);
 color:var(--gold-bright); padding:.32rem .95rem; border-radius:100px;
 font-size:.76rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
 margin-bottom:1.5rem; position:relative;
 animation:fadeUp .5s ease both;
}
.hero h1 {
 font-family:'Playfair Display',serif;
 font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900;
 color:#fff; line-height:1.15; position:relative;
 animation:fadeUp .5s .08s ease both;
}
.hero h1 em { font-style:normal; color:var(--gold-bright); }
.hero-sub {
 margin:.75rem auto 0; max-width:520px;
 font-size:1rem; color:rgba(255,255,255,.62); line-height:1.7;
 position:relative; animation:fadeUp .5s .16s ease both;
}
.hero-stats {
 display:flex; justify-content:center; gap:3rem; flex-wrap:wrap;
 margin-top:2.5rem; position:relative;
 animation:fadeUp .5s .24s ease both;
}
.stat { text-align:center; }
.stat-n { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:#fff; }
.stat-l { font-size:.75rem; color:rgba(255,255,255,.45); margin-top:.15rem; letter-spacing:.3px; }
.hero-actions {
 display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap;
 margin-top:2.5rem; position:relative;
 animation:fadeUp .5s .32s ease both;
}
.cta-big {
 background:var(--gold); color:#fff;
 padding:.82rem 2.1rem; border-radius:9px;
 font-size:.97rem; font-weight:600;
 box-shadow:0 4px 20px rgba(179,139,77,.45);
 transition:background .18s, transform .14s; border:none;
}
.cta-big:hover { background:var(--gold-light); transform:translateY(-2px); }
.cta-ghost {
 background:rgba(255,255,255,.08); color:rgba(255,255,255,.88);
 padding:.82rem 2.1rem; border-radius:9px;
 font-size:.97rem; font-weight:500;
 border:1.5px solid rgba(255,255,255,.18);
 transition:background .18s;
}
.cta-ghost:hover { background:rgba(255,255,255,.14); }

/* ═══════════════════════════════════════
  HOME – LEVEL CARDS
═══════════════════════════════════════ */
.section { padding:4rem 5%; }
.section.bg-light { background:var(--bg-light); }
.section.bg-navy {
 background:linear-gradient(135deg,var(--navy-dark),var(--navy),var(--navy-mid));
 position:relative; overflow:hidden;
}
.section.bg-navy::before {
 content:''; position:absolute; inset:0;
 background:radial-gradient(circle at 15% 50%, rgba(179,139,77,.14) 0%,transparent 55%),
       radial-gradient(circle at 85% 50%, rgba(179,139,77,.07) 0%,transparent 55%);
}
.section-title {
 font-family:'Playfair Display',serif;
 font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:700; color:var(--navy);
}
.section-sub { color:var(--muted); margin-top:.5rem; font-size:.93rem; }
.section-head { text-align:center; margin-bottom:2.5rem; }
.section-head.white .section-title { color:#fff; }
.section-head.white .section-sub { color:rgba(255,255,255,.6); }

.level-grid {
 display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:1.2rem; max-width:900px; margin:0 auto;
}
.level-card {
 background:var(--white); border:2px solid var(--border);
 border-radius:16px; padding:1.8rem 1.2rem;
 text-align:center; cursor:pointer;
 transition:all .22s; position:relative; overflow:hidden;
}
.level-card::after {
 content:''; position:absolute; inset:0;
 background:linear-gradient(135deg,var(--navy),var(--navy-light));
 opacity:0; transition:opacity .22s;
}
.level-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.level-card:hover::after { opacity:1; }
.level-card:hover .lc-icon, .level-card:hover .lc-name, .level-card:hover .lc-sub { color:#fff !important; }
.lc-icon { font-size:2.2rem; margin-bottom:.7rem; position:relative; z-index:1; display:block; }
.lc-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--navy); position:relative; z-index:1; }
.lc-sub { font-size:.75rem; color:var(--muted); margin-top:.3rem; position:relative; z-index:1; }

/* ═══════════════════════════════════════
  HOME – FEATURE CARDS
═══════════════════════════════════════ */
.feat-grid {
 display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:1.25rem; max-width:1080px; margin:0 auto;
}
.feat-card {
 background:var(--white); border-radius:16px; padding:1.9rem;
 border:1.5px solid var(--border); position:relative; overflow:hidden;
 transition:transform .22s, box-shadow .22s;
}
.feat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feat-card.t-teal { border-top:4px solid var(--gold); }
.feat-card.t-amber { border-top:4px solid var(--amber); }
.feat-card.t-navy { border-top:4px solid var(--navy); }
.feat-card.t-green { border-top:4px solid var(--green); }
.feat-num { position:absolute; top:1.4rem; right:1.4rem; font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:900; color:rgba(29,53,87,.05); line-height:1; }
.feat-ico {
 width:48px; height:48px; border-radius:11px;
 display:flex; align-items:center; justify-content:center;
 font-size:1.35rem; margin-bottom:1rem;
}
.feat-ico .te-icon { width:1.15em; height:1.15em; }
.ico-teal { background:var(--gold-pale); color:var(--gold); }
.ico-amber { background:var(--amber-pale); color:var(--amber); }
.ico-navy { background:rgba(29,53,87,.07); color:var(--navy); }
.ico-green { background:var(--green-pale); color:var(--green); }
.feat-card h3 { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:.55rem; }
.feat-card p { font-size:.87rem; color:var(--muted); line-height:1.65; }

/* ═══════════════════════════════════════
  HOME – CTA BANNER
═══════════════════════════════════════ */
.cta-banner { text-align:center; position:relative; }
.cta-banner h2 { font-family:'Playfair Display',serif; font-size:clamp(1.7rem,3.5vw,2.8rem); font-weight:700; color:#fff; position:relative; }
.cta-banner p { color:rgba(255,255,255,.6); margin-top:.7rem; font-size:.97rem; position:relative; }
.cta-row { display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; margin-top:2rem; position:relative; }

/* ═══════════════════════════════════════
  PROGRAM HUB PAGE
═══════════════════════════════════════ */
.hub-header {
 background:var(--navy);
 padding:3rem 5% 3.5rem;
 position:relative; overflow:hidden;
}
.hub-header::before {
 content:''; position:absolute; inset:0;
 background:radial-gradient(ellipse 70% 80% at 80% 50%, rgba(179,139,77,.18) 0%,transparent 70%);
}
.hub-eyebrow { font-size:.75rem; font-weight:600; color:var(--gold-bright); letter-spacing:1px; text-transform:uppercase; margin-bottom:.6rem; position:relative; }
.hub-header h1 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; position:relative; }
.hub-header p { color:rgba(255,255,255,.58); margin-top:.65rem; font-size:.95rem; max-width:480px; line-height:1.65; position:relative; }
.hub-meta { display:flex; gap:1.5rem; margin-top:1.5rem; position:relative; flex-wrap:wrap; }
.hub-tag {
 display:flex; align-items:center; gap:.4rem;
 background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13);
 color:rgba(255,255,255,.75); padding:.32rem .85rem; border-radius:100px;
 font-size:.78rem; font-weight:500;
}

.hub-body { padding:3rem 5%; max-width:1100px; margin:0 auto; }
.hub-section-label {
 font-size:.75rem; font-weight:600; color:var(--muted);
 text-transform:uppercase; letter-spacing:1px;
 margin-bottom:1.2rem; padding-bottom:.6rem;
 border-bottom:1px solid var(--border);
}
.subject-grid {
 display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
 gap:1.1rem; margin-bottom:2.5rem;
}
.subject-card {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:14px; padding:1.5rem;
 cursor:pointer; transition:all .2s;
 display:flex; flex-direction:column; gap:.6rem;
 position:relative; overflow:hidden;
}
.subject-card::before {
 content:''; position:absolute; left:0; top:0; bottom:0;
 width:3px; border-radius:4px 0 0 4px;
 background:var(--teal); transform:scaleY(0);
 transition:transform .2s; transform-origin:bottom;
}
.subject-card:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.subject-card:hover::before { transform:scaleY(1); }
.sc-icon { font-size:1.6rem; color:var(--gold); }
.sc-icon .te-icon { width:1.05em; height:1.05em; }
.sc-name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--navy); }
.sc-meta { font-size:.77rem; color:var(--muted); }
.sc-arrow { margin-top:auto; color:var(--teal); font-size:.85rem; font-weight:600; opacity:0; transition:opacity .18s; }
.subject-card:hover .sc-arrow { opacity:1; }
.sc-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.sc-tag {
 font-size:.7rem; padding:.2rem .55rem; border-radius:100px;
 font-weight:500;
}
.sc-tag.green { background:var(--green-pale); color:#16a34a; }
.sc-tag.amber { background:var(--amber-pale); color:#d97706; }
.sc-tag.teal  { background:var(--teal-pale);  color:#7a5c28; }
.sc-tag.purple { background:rgba(139,92,246,.1); color:#7c3aed; }

/* ═══════════════════════════════════════
  SUBJECT PAGE (units list)
═══════════════════════════════════════ */
.subject-header {
 background:var(--navy); padding:3rem 5% 3.5rem;
 position:relative; overflow:hidden;
}
.subject-header::before {
 content:''; position:absolute; inset:0;
 background:radial-gradient(ellipse 60% 100% at 100% 50%, rgba(179,139,77,.18) 0%,transparent 65%);
}
.sh-inner { position:relative; max-width:700px; }
.sh-eyebrow { font-size:.74rem; font-weight:600; color:var(--teal-light); letter-spacing:.9px; text-transform:uppercase; margin-bottom:.5rem; }
.sh-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,2.9rem); font-weight:900; color:#fff; }
.sh-desc { color:rgba(255,255,255,.57); margin-top:.65rem; font-size:.93rem; line-height:1.65; }
.sh-stats { display:flex; gap:2rem; margin-top:1.6rem; flex-wrap:wrap; }
.sh-stat { }
.sh-stat-n { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:#fff; }
.sh-stat-l { font-size:.73rem; color:rgba(255,255,255,.45); letter-spacing:.3px; }

.subject-body { padding:2.5rem 5%; max-width:960px; margin:0 auto; }
.unit-list { display:flex; flex-direction:column; gap:.75rem; }
.unit-item {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:12px; overflow:hidden;
 transition:border-color .18s, box-shadow .18s;
}
.unit-item:hover { border-color:var(--teal); box-shadow:var(--shadow-sm); }
.unit-header {
 display:flex; align-items:center; gap:1rem;
 padding:1.1rem 1.4rem; cursor:pointer;
}
.unit-num {
 min-width:36px; height:36px; border-radius:9px;
 background:var(--teal-pale); color:var(--teal);
 display:flex; align-items:center; justify-content:center;
 font-family:'Playfair Display',serif; font-weight:700; font-size:.9rem;
 flex-shrink:0;
}
.unit-name { font-weight:600; color:var(--navy); font-size:.93rem; flex:1; }
.unit-sub-count { font-size:.76rem; color:var(--muted); white-space:nowrap; }
.unit-chevron { color:var(--muted); transition:transform .22s; font-size:.8rem; flex-shrink:0; }
.unit-item.open .unit-chevron { transform:rotate(180deg); color:var(--teal); }
.unit-item.open .unit-num { background:var(--teal); color:#fff; }

.unit-body { display:none; border-top:1px solid var(--border); background:var(--bg-light); }
.unit-item.open .unit-body { display:block; }
.subtopic-list { padding:.8rem; display:flex; flex-direction:column; gap:.4rem; }
.subtopic-row {
 background:var(--white); border:1px solid var(--border);
 border-radius:9px; padding:.8rem 1rem;
 display:flex; align-items:center; gap:.9rem;
 cursor:pointer; transition:all .18s;
}
.subtopic-row:hover { border-color:var(--teal); background:rgba(179,139,77,.04); }
.str-icon { font-size:1.1rem; flex-shrink:0; color:var(--gold); display:flex; }
.str-name { flex:1; font-size:.87rem; font-weight:500; color:var(--navy); }
.str-badges { display:flex; gap:.35rem; flex-wrap:wrap; }
.badge {
 font-size:.67rem; padding:.18rem .55rem; border-radius:100px;
 font-weight:600; border:1px solid;
}
.badge-fc  { background:rgba(139,92,246,.08); color:#7c3aed; border-color:rgba(139,92,246,.25); }
.badge-ct  { background:rgba(245,158,11,.08); color:#b45309; border-color:rgba(245,158,11,.25); }
.badge-ep  { background:var(--teal-pale); color:#7a5c28; border-color:rgba(179,139,77,.3); }
.badge-cs  { background:var(--green-pale); color:#16a34a; border-color:rgba(34,197,94,.3); }
.badge-mm  { background:rgba(239,68,68,.07); color:#dc2626; border-color:rgba(239,68,68,.25); }
.str-arrow { color:var(--muted); font-size:.8rem; transition:all .18s; }
.subtopic-row:hover .str-arrow { color:var(--teal); transform:translateX(3px); }

/* ═══════════════════════════════════════
  LESSON PAGE
═══════════════════════════════════════ */
.lesson-layout {
 display:grid; grid-template-columns:260px 1fr;
 min-height:calc(100vh - 62px);
}
.lesson-sidebar {
 background:var(--white); border-right:1px solid var(--border);
 padding:1.5rem 0; position:sticky; top:62px;
 height:calc(100vh - 62px); overflow-y:auto;
 scrollbar-width:thin;
}
.sidebar-heading {
 font-size:.7rem; font-weight:600; color:var(--muted);
 text-transform:uppercase; letter-spacing:.9px;
 padding:.4rem 1.4rem; margin-bottom:.4rem;
}
.sidebar-item {
 display:flex; align-items:center; gap:.7rem;
 padding:.65rem 1.4rem; font-size:.83rem;
 cursor:pointer; transition:background .15s; color:var(--text);
 border-left:3px solid transparent;
}
.sidebar-item:hover { background:var(--bg-light); }
.sidebar-item.active { background:var(--teal-pale); border-left-color:var(--teal); color:var(--teal); font-weight:600; }
.sidebar-divider { height:1px; background:var(--border); margin:.7rem 1rem; }
.si-ico { font-size:1rem; flex-shrink:0; color:var(--gold); display:flex; }

.lesson-main { padding:2.5rem; overflow-y:auto; }
.lesson-top { margin-bottom:2rem; }
.lesson-eyebrow { font-size:.74rem; color:var(--muted); font-weight:500; margin-bottom:.5rem; }
.lesson-title { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:700; color:var(--navy); }
.lesson-desc { font-size:.92rem; color:var(--muted); margin-top:.5rem; line-height:1.65; }

/* Tab bar */
.tab-bar { display:flex; gap:.3rem; border-bottom:2px solid var(--border); margin-bottom:2rem; flex-wrap:wrap; }
.tab {
 padding:.6rem 1.1rem; border-radius:8px 8px 0 0;
 font-size:.83rem; font-weight:500; color:var(--muted);
 cursor:pointer; border:none; background:transparent;
 transition:color .18s; border-bottom:2px solid transparent; margin-bottom:-2px;
 display:inline-flex; align-items:center; gap:.42rem;
}
.tab:hover { color:var(--navy); }
.tab.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:pageIn .3s ease both; }

/* ═══════════════════════════════════════
  FULL NOTES TAB
═══════════════════════════════════════ */
.lesson-full-notes {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 2.2rem;
  box-shadow:var(--shadow-sm);
  line-height:1.75;
  color:var(--text);
  font-size:.95rem;
}
.lesson-full-notes h3 {
  font-family:'Playfair Display',serif;
  color:var(--navy);
  font-size:1.4rem;
  font-weight:700;
  margin:1.8rem 0 .9rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--gold);
}
.lesson-full-notes h3:first-child { margin-top:0; }
.lesson-full-notes h4 {
  color:var(--navy);
  font-size:1.05rem;
  font-weight:600;
  margin:1.4rem 0 .6rem;
}
.lesson-full-notes p {
  margin:.9rem 0;
}
.lesson-full-notes strong { color:var(--navy); font-weight:600; }
.lesson-full-notes ul, .lesson-full-notes ol {
  margin:.8rem 0 .8rem 1.5rem;
}
.lesson-full-notes li { margin:.4rem 0; }
.lesson-full-notes code {
  background:var(--gold-pale);
  color:var(--navy-dark);
  padding:.12rem .4rem;
  border-radius:4px;
  font-family:'SF Mono','Monaco','Courier New',monospace;
  font-size:.88em;
}
.lesson-full-notes .rn-key-concept {
  background:var(--gold-pale);
  border-left:4px solid var(--gold);
  padding:1rem 1.2rem;
  margin:1.2rem 0;
  border-radius:0 8px 8px 0;
}
.lesson-full-notes .rn-key-concept strong { color:var(--gold); }
.lesson-full-notes .rn-exam-tip {
  background:#e8f4fd;
  border-left:4px solid #1976d2;
  padding:.9rem 1.2rem;
  margin:1.2rem 0;
  border-radius:0 8px 8px 0;
}
.lesson-full-notes .rn-exam-tip::before {
  content:'Exam Tip — ';
  font-weight:700;
  color:#1976d2;
}
.lesson-full-notes .rn-formula {
  background:var(--navy);
  color:#fff;
  padding:1.2rem;
  text-align:center;
  border-radius:8px;
  font-family:'Cambria Math','Times New Roman',serif;
  font-size:1.1rem;
  margin:1.2rem 0;
  letter-spacing:.3px;
}
.lesson-full-notes .rn-summary {
  background:#f1f8e9;
  border:1px solid #c5e1a5;
  padding:1rem 1.2rem;
  border-radius:8px;
  margin:1.2rem 0;
}
.lesson-full-notes .trick, .lesson-full-notes .warn {
  padding:.9rem 1.2rem;
  border-radius:8px;
  margin:1rem 0;
}
.lesson-full-notes .trick {
  background:#f3e5f5;
  border-left:4px solid #8e24aa;
}
.lesson-full-notes .warn {
  background:#fff3e0;
  border-left:4px solid #f57c00;
}
.lesson-full-notes table {
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  font-size:.88rem;
  background:#fff;
  box-shadow:var(--shadow-sm);
  border-radius:8px;
  overflow:hidden;
}
.lesson-full-notes table th {
  background:var(--navy);
  color:#fff;
  padding:.7rem .9rem;
  text-align:left;
  font-size:.85rem;
  font-weight:600;
}
.lesson-full-notes table td {
  padding:.65rem .9rem;
  border-bottom:1px solid var(--border);
}
.lesson-full-notes table tr:nth-child(even) td { background:#faf8f4; }
.lesson-full-notes table tr:last-child td { border-bottom:none; }
.lesson-full-notes .rn-markdown-table-wrap {
  overflow-x:auto;
  margin:1rem 0 1.2rem;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
}
.lesson-full-notes .rn-markdown-table {
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  min-width:360px;
}
.lesson-full-notes .rn-markdown-table td:first-child {
  font-weight:700;
  color:var(--navy);
  background:var(--gold-pale);
}
.lesson-full-notes .rn-check,
.lesson-full-notes .rn-cross {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.55rem;
  height:1.55rem;
  border-radius:999px;
  font-weight:800;
}
.lesson-full-notes .rn-check {
  background:rgba(42,122,75,.12);
  color:var(--green);
}
.lesson-full-notes .rn-cross {
  background:rgba(184,64,64,.11);
  color:#b84040;
}
.lesson-full-notes .rn-md-heading {
  margin:1.3rem 0 .45rem;
  color:var(--navy);
  font-weight:700;
}
.lesson-full-notes .rn-md-list {
  margin:.55rem 0 1.05rem 1.2rem;
}
.lesson-full-notes .rn-md-list li {
  margin:.35rem 0;
}
.fn-empty {
  text-align:center;
  padding:3rem 1rem;
  color:var(--muted);
  font-size:.95rem;
}
.fn-empty-icon { font-size:2.5rem; opacity:.4; margin-bottom:.8rem; }
body.dark .lesson-full-notes { background:#1f2937; color:#e5e7eb; border-color:#374151; }
body.dark .lesson-full-notes h3 { color:var(--gold-bright); }
body.dark .lesson-full-notes h4 { color:var(--gold-light); }
body.dark .lesson-full-notes strong { color:var(--gold-bright); }
body.dark .lesson-full-notes code { background:rgba(179,139,77,.18); color:var(--gold-bright); }
body.dark .lesson-full-notes table th { background:var(--navy-dark); }
body.dark .lesson-full-notes table tr:nth-child(even) td { background:#273444; }

/* Flashcards */
.fc-group-label {
 font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
 color:var(--muted); margin:1.5rem 0 .8rem;
 display:flex; align-items:center; gap:.6rem;
}
.fc-group-label::after { content:''; flex:1; height:1px; background:var(--border); }
.fc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; align-items:stretch; }
.fc {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:12px; padding:1.35rem 1.45rem;
 min-height:170px; cursor:pointer; position:relative;
 transition:all .22s; transform-style:preserve-3d;
 perspective:800px;
 display:flex; flex-direction:column; justify-content:flex-start;
}
.fc:hover { border-color:var(--gold); box-shadow:var(--shadow-sm); }
.fc.flipped { background:linear-gradient(135deg,var(--navy),var(--navy-light)); border-color:var(--gold); }
.fc.flipped .fc-term { display:none; }
.fc.flipped .fc-def { display:block; color:#fff; }
.fc-term { font-weight:700; font-size:1rem; color:var(--navy); line-height:1.35; max-width:100%; overflow-wrap:anywhere; }
.fc-term span { font-weight:500; font-size:.82rem; color:var(--muted); display:block; margin-top:.8rem; line-height:1.35; }
.fc-def { display:none; font-size:.9rem; line-height:1.58; }
.fc-hint {
 position:static; margin-top:auto; padding-top:1.15rem;
 font-size:.72rem; line-height:1.2; color:var(--muted);
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 opacity:.78;
}
.fc.flipped .fc-hint { color:rgba(255,255,255,.6); }
.fc-group-a .fc { border-left:3px solid var(--purple); }
.fc-group-b .fc { border-left:3px solid var(--amber); }
.fc-group-c .fc { border-left:3px solid var(--green); }

/* Comparison table */
.ct-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.ct-table th {
 background:var(--navy); color:#fff;
 padding:.75rem 1rem; text-align:left; font-weight:600; font-size:.8rem;
}
.ct-table th:first-child { border-radius:10px 0 0 0; }
.ct-table th:last-child { border-radius:0 10px 0 0; }
.ct-table td { padding:.7rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.55; }
.ct-table tr:nth-child(even) td { background:var(--bg-light); }
.ct-table tr:hover td { background:var(--teal-pale); }
.ct-table .feature-col { font-weight:600; color:var(--navy); }

/* Exam practice */
.ep-list { display:flex; flex-direction:column; gap:1.2rem; }
.ep-item {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:12px; padding:1.4rem;
}
.ep-meta { display:flex; gap:.5rem; margin-bottom:.7rem; flex-wrap:wrap; }
.ep-q { font-size:.9rem; font-weight:500; color:var(--navy); line-height:1.6; }
.ep-marks { font-size:.73rem; background:var(--teal-pale); color:var(--teal); padding:.2rem .55rem; border-radius:5px; font-weight:600; }
.ep-level { font-size:.73rem; padding:.2rem .55rem; border-radius:5px; font-weight:600; }
.ep-level.easy  { background:var(--green-pale); color:#16a34a; }
.ep-level.medium { background:var(--amber-pale); color:#b45309; }
.ep-level.hard  { background:rgba(239,68,68,.08); color:#dc2626; }
.ep-toggle {
 margin-top:.9rem; padding:.45rem .9rem; border-radius:7px;
 background:transparent; border:1.5px solid var(--border);
 font-size:.78rem; font-weight:500; color:var(--muted);
 transition:all .18s; cursor:pointer;
}
.ep-toggle:hover { border-color:var(--teal); color:var(--teal); }
.ep-answer {
 display:none; margin-top:.85rem; padding:.9rem 1rem;
 background:var(--bg-light); border-radius:9px;
 border-left:3px solid var(--teal);
 font-size:.85rem; line-height:1.65; color:var(--text);
}
.ep-answer.show { display:block; animation:pageIn .2s ease both; }

/* Memory tricks */
.mm-grid { display:flex; flex-direction:column; gap:1rem; }
.mm-card {
 background:var(--white); border-radius:12px; padding:1.3rem 1.5rem;
 border-left:4px solid;
}
.mm-card.trick { border-color:var(--amber); }
.mm-card.warn  { border-color:#ef4444; }
.mm-card h4 { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; margin-bottom:.5rem; }
.mm-card.trick h4 { color:var(--amber); }
.mm-card.warn h4 { color:#ef4444; }
.mm-card p { font-size:.88rem; line-height:1.65; color:var(--text); }
.mm-card strong { color:var(--navy); }

/* Case Study */
.cs-card {
 background:var(--white); border-radius:14px; padding:1.8rem;
 border:1.5px solid var(--border);
}
.cs-scenario {
 background:linear-gradient(135deg,var(--navy),var(--navy-light));
 color:#fff; border-radius:10px; padding:1.2rem 1.4rem;
 margin-bottom:1.5rem; font-size:.9rem; line-height:1.7;
}
.cs-scenario strong { color:var(--teal-light); }
.cs-q { margin-bottom:1.2rem; }
.cs-q-num { font-size:.72rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.6px; margin-bottom:.35rem; }
.cs-q-text { font-size:.89rem; font-weight:500; color:var(--navy); line-height:1.55; }

/* ═══════════════════════════════════════
  FOOTER
═══════════════════════════════════════ */
footer {
 background:var(--navy); color:rgba(255,255,255,.5);
 padding:3rem 5% 1.8rem;
}
.footer-grid {
 display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
 gap:2.5rem; padding-bottom:2rem;
 border-bottom:1px solid rgba(255,255,255,.07);
}
.ft-brand p { font-size:.83rem; margin-top:.65rem; line-height:1.7; }
.ft-col h4 { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.3); margin-bottom:.9rem; }
.ft-col a { display:block; font-size:.83rem; color:rgba(255,255,255,.55); margin-bottom:.5rem; transition:color .15s; }
.ft-col a:hover { color:var(--teal-light); }
.footer-bottom {
 display:flex; justify-content:space-between; align-items:center;
 padding-top:1.4rem; font-size:.76rem; flex-wrap:wrap; gap:.5rem;
}

/* ═══════════════════════════════════════
  UTILS / ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.reveal.vis { opacity:1; transform:none; }
.chip {
 display:inline-flex; align-items:center; gap:.4rem;
 background:var(--bg-light); border:1px solid var(--border);
 color:var(--text); padding:.3rem .8rem; border-radius:100px;
 font-size:.78rem; font-weight:500;
}

@media(max-width:900px) {
 .lesson-layout { grid-template-columns:1fr; }
 .lesson-sidebar { position:static; height:auto; border-right:none; border-bottom:1px solid var(--border); padding:1rem 0; }
 .footer-grid { grid-template-columns:1fr 1fr; }
 .nav-center { display:none; }
 .search-bar-wrap { display:none !important; }
 .logo {
  font-size:1.28rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100vw - 170px);
 }
 .nav-right {
  margin-left:auto;
  gap:.45rem;
  flex-wrap:nowrap;
  justify-content:flex-end;
  flex-shrink:0;
 }
 .auth-actions, .auth-user-panel { display:none !important; }
 .auth-user-chip { max-width:100%; }
 .dashboard-bar { gap:.85rem 1rem; }
 .db-cta { margin-left:0; }
 .hero { padding:4rem 5% 3.8rem; }
 .section, .hub-body, .subject-body, .stats-body, .papers-body { padding-left:4%; padding-right:4%; }
 .lesson-main { padding:1.6rem; }
 .planner-main { padding:1.25rem; }
}
@media(max-width:640px) {
 .footer-grid { grid-template-columns:1fr; gap:1.5rem; }
 nav { padding:0 4%; }
 .logo {
  font-size:1.16rem;
  max-width:calc(100vw - 156px);
 }
 .nav-right { gap:.4rem; }
 .dark-toggle,
 #search-trigger,
 .hamburger {
  width:40px;
  height:40px;
  min-width:40px;
  padding:0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
 }
 .hamburger {
  gap:4px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.18);
 }
 .dashboard-bar {
  padding:.85rem 4% 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
  align-items:stretch;
 }
 .db-divider { display:none; }
 .db-stat {
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem .85rem;
  justify-content:flex-start;
  line-height:1.45;
 }
 .db-cta {
  width:100%;
  min-height:48px;
  border-radius:10px;
  padding:.82rem 1rem;
  font-size:.86rem;
 }
 .hero-stats { gap:1.5rem; }
 .breadcrumb {
  padding:.6rem 4%;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
 }
 .hero { padding:3.3rem 4% 3.2rem; }
 .hero-sub { font-size:.93rem; max-width:none; }
 .hero-actions { gap:.7rem; }
 .cta-big, .cta-ghost {
  width:100%;
  justify-content:center;
  padding:.82rem 1.2rem;
 }
 .section, .hub-body, .subject-body, .stats-body, .papers-body, .static-body { padding-left:4%; padding-right:4%; }
 .level-grid, .feat-grid, .prog-showcase, .subject-grid, .how-steps, .values-grid, .team-grid {
  grid-template-columns:1fr !important;
 }
 .hub-cards { grid-template-columns:1fr; }
 .lesson-main { padding:1rem; }
 .lesson-desc, .fc-card, .ct-card, .ep-card, .mm-card, .cs-item { padding-left:.9rem; padding-right:.9rem; }
 .fc-grid { grid-template-columns:1fr; }
 .ct-table { display:block; overflow-x:auto; white-space:nowrap; }
 .compare-table { min-width:720px; }
 .prog-compare-wrap { margin:0 -4px; border-radius:12px; }
 .search-dropdown {
  position:fixed;
  left:4%;
  right:4%;
  top:70px;
  max-height:56vh;
 }
 .payment-layout { grid-template-columns:1fr; }
 .payment-grid { grid-template-columns:1fr; }
 .payment-actions {
  flex-direction:column;
  align-items:stretch;
 }
 .payment-actions .btn-ghost,
 .payment-actions .form-submit {
  width:100%;
  flex:0 0 auto;
  min-height:52px;
  padding:.9rem 1rem;
  white-space:normal;
  line-height:1.35;
 }
 .subscription-page-shell {
  grid-template-columns:1fr;
  padding:1.35rem 4% 2.2rem;
 }
 .subscription-page-main,
 .subscription-side-card { padding:1rem; }
 .subscription-page-title { font-size:1.7rem; }
 .subscription-page-actions {
  flex-direction:column;
  align-items:stretch;
 }
 .subscription-page-actions .form-submit,
 .subscription-page-actions .btn-ghost {
  width:100%;
  flex:0 0 auto;
  min-height:52px;
  padding:.9rem 1rem;
  white-space:normal;
  line-height:1.35;
 }
 .payment-plan-price strong { font-size:1.72rem; }
 .payment-price-row { font-size:.8rem; }
 .payment-card { padding:.8rem .85rem; }
 .payment-qr-card { padding:.8rem; }
 #toast-container {
  left:1rem;
  right:1rem;
  bottom:1rem;
 }
 .toast { max-width:none; }
}

/* ═══════════════════════════════════════
  HAMBURGER & MOBILE MENU
═══════════════════════════════════════ */
.hamburger {
 display:none; flex-direction:column; gap:5px;
 background:none; border:none; padding:.4rem; cursor:pointer;
}
.hamburger span {
 display:block; width:22px; height:2px;
 background:rgba(255,255,255,.8); border-radius:2px;
 transition:all .25s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media(max-width:900px) {
 .hamburger { display:flex; }
 .search-trigger { display:none !important; }
 .btn-ghost, .btn-primary { min-height:38px; }
}
.mobile-menu {
 display:none; position:fixed; inset:62px 0 0 0;
 background:var(--navy-dark); z-index:190;
 padding:1.5rem 5%; overflow-y:auto;
 animation:slideDown .2s ease;
}
.mobile-menu.open { display:block; }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.mobile-menu a {
 display:block; color:rgba(255,255,255,.8); font-size:1.05rem;
 font-weight:500; padding:.9rem 0;
 border-bottom:1px solid rgba(255,255,255,.07);
 transition:color .15s;
}
.mobile-menu a:hover { color:var(--gold-bright); }
.mobile-menu .mm-btns { display:flex; gap:.75rem; margin-top:1.5rem; }
.mobile-user-panel { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.mobile-user-panel .auth-user-chip { width:100%; }

/* ═══════════════════════════════════════
  SEARCH BAR IN NAV
═══════════════════════════════════════ */
.search-bar-wrap {
 flex:0 1 340px; min-width:260px; max-width:340px; margin:0 1.5rem;
 position:relative;
}
.search-bar-input {
 width:100%; height:36px;
 background:rgba(255,255,255,.09); border:1.5px solid rgba(255,255,255,.15);
 border-radius:8px; padding:0 .9rem 0 2.2rem;
 color:#fff; font-family:inherit; font-size:.83rem;
 transition:all .2s; outline:none;
}
.search-bar-input::placeholder { color:rgba(255,255,255,.38); }
.search-bar-input:focus {
 background:rgba(255,255,255,.13); border-color:var(--gold);
 box-shadow:0 0 0 3px rgba(179,139,77,.18);
}
.search-bar-icon {
 position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
 color:rgba(255,255,255,.4); font-size:.85rem; pointer-events:none;
 transition:color .2s;
}
.search-bar-input:focus + .search-bar-icon,
.search-bar-wrap:has(:focus) .search-bar-icon { color:var(--gold); }
.search-shortcut {
 position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
 background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
 color:rgba(255,255,255,.4); font-size:.65rem; padding:.1rem .35rem;
 border-radius:4px; font-family:monospace; pointer-events:none;
}

/* ═══════════════════════════════════════
  SEARCH RESULTS DROPDOWN
═══════════════════════════════════════ */
.search-dropdown {
 display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
 background:var(--white); border:1.5px solid var(--border);
 border-radius:12px; box-shadow:var(--shadow-lg);
 max-height:420px; overflow-y:auto; z-index:300;
}
.search-dropdown.show { display:block; animation:pageIn .15s ease both; }
.sd-section-label {
 font-size:.68rem; font-weight:700; text-transform:uppercase;
 letter-spacing:.8px; color:var(--muted); padding:.7rem 1rem .3rem;
}
.sd-item {
 display:flex; align-items:center; gap:.75rem;
 padding:.6rem 1rem; cursor:pointer; transition:background .12s;
 border-radius:0;
}
.sd-item:hover { background:var(--gold-pale2); }
.sd-item:hover .sd-arrow { opacity:1; }
.sd-ico { font-size:1rem; flex-shrink:0; width:24px; text-align:center; }
.sd-texts { flex:1; min-width:0; }
.sd-name { font-size:.84rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-path { font-size:.72rem; color:var(--muted); margin-top:.1rem; }
.sd-arrow { color:var(--gold); font-size:.75rem; opacity:0; transition:opacity .12s; flex-shrink:0; }
.sd-empty { padding:1.5rem; text-align:center; color:var(--muted); font-size:.88rem; }
mark { background:rgba(179,139,77,.25); color:var(--navy); border-radius:2px; padding:0 1px; }

@media(max-width:1180px) {
 .search-bar-wrap {
  display:none !important;
  position:fixed;
  left:4%;
  right:4%;
  top:74px;
  width:auto;
  max-width:none;
  min-width:0;
  margin:0;
  z-index:360;
 }
 .search-bar-wrap.mobile-search-open {
  display:block !important;
  animation:pageIn .16s ease both;
 }
 .search-bar-wrap.mobile-search-open::before {
  content:'';
  position:fixed;
  inset:62px 0 0;
  background:rgba(13,27,46,.36);
  backdrop-filter:blur(5px);
  z-index:-1;
 }
 .search-bar-wrap.mobile-search-open .search-bar-input {
  height:48px;
  border-radius:14px;
  background:#fff;
  color:var(--navy);
  border-color:rgba(179,139,77,.42);
  box-shadow:0 18px 46px rgba(13,27,46,.24);
  padding-left:2.65rem;
  padding-right:1rem;
 }
 .search-bar-wrap.mobile-search-open .search-bar-input::placeholder { color:rgba(13,27,46,.48); }
 .search-bar-wrap.mobile-search-open .search-bar-icon {
  left:1rem;
  color:var(--gold);
 }
 .search-bar-wrap.mobile-search-open .search-shortcut { display:none; }
 .search-bar-wrap.mobile-search-open .search-dropdown {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  width:100%;
  max-height:min(62vh, 520px);
  border-radius:16px;
 }
}

/* ═══════════════════════════════════════
  TOAST NOTIFICATION
═══════════════════════════════════════ */
#toast-container {
 position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
 display:flex; flex-direction:column; gap:.5rem; pointer-events:none;
}
.toast {
 display:flex; align-items:center; gap:.7rem;
 background:var(--navy); color:#fff;
 padding:.7rem 1.1rem; border-radius:10px;
 font-size:.83rem; font-weight:500;
 box-shadow:var(--shadow-lg);
 animation:toastIn .3s ease both;
 pointer-events:auto; max-width:300px;
 border-left:3px solid var(--gold);
}
.toast.success { border-left-color:var(--green); }
.toast.info  { border-left-color:var(--gold); }
.toast.warn  { border-left-color:var(--amber); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateX(20px)} }

/* ═══════════════════════════════════════
  PROGRESS BAR
═══════════════════════════════════════ */
.prog-bar {
 height:5px; background:var(--border); border-radius:100px;
 overflow:hidden; margin-top:.55rem;
}
.prog-bar-fill {
 height:100%; border-radius:100px;
 background:linear-gradient(90deg, var(--gold), var(--gold-light));
 transition:width .6s cubic-bezier(.4,0,.2,1);
}
.prog-bar-fill.green { background:linear-gradient(90deg, var(--green), #3aad68); }
.prog-label {
 display:flex; justify-content:space-between;
 font-size:.7rem; color:var(--muted); margin-top:.25rem;
}

/* Subject card progress */
.sc-progress { margin-top:.6rem; }

/* Unit progress */
.unit-progress {
 display:flex; align-items:center; gap:.6rem;
 padding:.55rem 1.4rem .55rem 0; border-top:1px solid var(--border);
 background:var(--bg-light);
}
.unit-progress-bar { flex:1; height:4px; background:var(--border); border-radius:100px; overflow:hidden; }
.unit-progress-fill { height:100%; border-radius:100px; background:var(--gold); transition:width .5s ease; }
.unit-progress-label { font-size:.7rem; color:var(--muted); flex-shrink:0; white-space:nowrap; }

/* Subtopic done state */
.subtopic-row.done { background:rgba(42,122,75,.04); }
.subtopic-row.done .str-name { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(107,98,85,.35); }
.done-check {
 width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border);
 display:flex; align-items:center; justify-content:center;
 font-size:.7rem; flex-shrink:0; transition:all .18s; cursor:pointer;
 background:var(--white);
}
.done-check:hover { border-color:var(--green); background:var(--green-pale); }
.subtopic-row.done .done-check {
 background:var(--green); border-color:var(--green); color:#fff;
}

/* ═══════════════════════════════════════
  DASHBOARD (HOME stats panel)
═══════════════════════════════════════ */
.dashboard-bar {
 background:var(--white); border-bottom:1px solid var(--border);
 padding:.6rem 5%;
 display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
 font-size:.8rem;
}
.db-stat { display:flex; align-items:center; gap:.45rem; color:var(--muted); }
.db-stat strong { color:var(--navy); font-weight:700; }
.db-stat .db-icon { font-size:.95rem; color:var(--gold-bright); display:inline-flex; }
.db-divider { width:1px; height:20px; background:var(--border); }
.db-cta {
 margin-left:auto; background:var(--gold); color:#fff;
 border:none; padding:.35rem .9rem; border-radius:6px;
 font-size:.78rem; font-weight:600; cursor:pointer;
 transition:background .18s;
}
.db-cta:hover { background:var(--gold-light); }

/* ═══════════════════════════════════════
  LESSON PAGE UPGRADES
═══════════════════════════════════════ */
.lesson-topbar {
 display:flex; align-items:center; gap:.75rem;
 padding:.9rem 1.4rem; background:var(--white);
 border-bottom:1px solid var(--border);
 flex-wrap:wrap; gap:.5rem;
}
.lesson-nav-btn {
 display:flex; align-items:center; gap:.4rem;
 background:var(--white); border:1.5px solid var(--border);
 color:var(--text); padding:.38rem .85rem; border-radius:7px;
 font-size:.78rem; font-weight:500; cursor:pointer;
 transition:all .18s;
}
.lesson-nav-btn:hover { border-color:var(--gold); color:var(--gold); }
.lesson-nav-btn:disabled { opacity:.4; cursor:not-allowed; }
.lesson-mark-btn {
 margin-left:auto; display:flex; align-items:center; gap:.4rem;
 background:var(--green-pale); border:1.5px solid var(--green);
 color:var(--green); padding:.38rem 1rem; border-radius:7px;
 font-size:.78rem; font-weight:600; cursor:pointer;
 transition:all .18s;
}
.lesson-mark-btn:hover { background:var(--green); color:#fff; }
.lesson-mark-btn.marked { background:var(--green); color:#fff; border-color:var(--green); }
.lesson-mark-btn.marked:hover { background:#1f5c38; }
.lesson-timer {
 display:flex; align-items:center; gap:.4rem;
 font-size:.78rem; color:var(--muted); padding:.38rem .7rem;
 background:var(--bg-light); border-radius:7px; font-variant-numeric:tabular-nums;
}
.timer-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Flashcard keyboard hint bar */
.fc-keyboard-hint {
 display:flex; align-items:center; gap:1rem; justify-content:center;
 margin-bottom:1rem; padding:.5rem;
 background:var(--bg-light); border-radius:8px; flex-wrap:wrap;
}
.kbd {
 display:inline-flex; align-items:center; gap:.3rem;
 font-size:.72rem; color:var(--muted);
}
.key {
 background:var(--white); border:1px solid var(--border-mid);
 border-bottom-width:2px; border-radius:4px;
 padding:.1rem .4rem; font-size:.68rem; font-family:monospace;
 color:var(--navy); box-shadow:0 1px 0 var(--border-mid);
}

/* FC nav arrows */
.fc-nav {
 display:flex; align-items:center; justify-content:center; gap:1rem;
 margin-top:1.2rem;
}
.fc-nav-btn {
 background:var(--white); border:1.5px solid var(--border);
 color:var(--muted); width:36px; height:36px; border-radius:50%;
 font-size:1rem; cursor:pointer; transition:all .18s;
 display:flex; align-items:center; justify-content:center;
}
.fc-nav-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-pale); }
.fc-nav-btn:disabled { opacity:.35; cursor:not-allowed; }
.fc-counter { font-size:.8rem; color:var(--muted); min-width:60px; text-align:center; }

/* EP filter bar */
.ep-filters {
 display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
.ep-filter-btn {
 background:var(--white); border:1.5px solid var(--border);
 color:var(--muted); padding:.3rem .8rem; border-radius:100px;
 font-size:.76rem; font-weight:500; cursor:pointer; transition:all .15s;
}
.ep-filter-btn:hover { border-color:var(--gold); color:var(--navy); }
.ep-filter-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.ep-filter-btn.easy.active  { background:var(--green); border-color:var(--green); }
.ep-filter-btn.medium.active { background:var(--amber); border-color:var(--amber); }
.ep-filter-btn.hard.active  { background:var(--red,#b84040); border-color:var(--red,#b84040); }

/* Notes area in lesson */
.notes-area {
 margin-top:1.5rem; border-top:1px solid var(--border); padding-top:1.2rem;
}
.notes-area h4 { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-bottom:.6rem; }
.notes-textarea {
 width:100%; min-height:90px; padding:.75rem;
 background:var(--bg-light); border:1.5px solid var(--border);
 border-radius:9px; font-family:inherit; font-size:.85rem; color:var(--text);
 resize:vertical; outline:none; transition:border-color .18s;
 line-height:1.6;
}
.notes-textarea:focus { border-color:var(--gold); background:var(--white); }
.notes-textarea::placeholder { color:var(--muted); }

/* Expand-all button on subject page */
.subject-toolbar {
 display:flex; align-items:center; justify-content:space-between;
 margin-bottom:1rem; flex-wrap:wrap; gap:.5rem;
}
.toolbar-btn {
 background:var(--white); border:1.5px solid var(--border);
 color:var(--muted); padding:.35rem .85rem; border-radius:7px;
 font-size:.78rem; font-weight:500; cursor:pointer; transition:all .18s;
 display:flex; align-items:center; gap:.35rem;
}
.toolbar-btn:hover { border-color:var(--gold); color:var(--navy); }
.subject-prog-summary {
 font-size:.8rem; color:var(--muted);
 display:flex; align-items:center; gap:.4rem;
}
.subject-prog-summary strong { color:var(--navy); }

/* ═══════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(10,18,32,.65);
  backdrop-filter:blur(4px); z-index:500;
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .2s ease; padding:1rem;
}
.modal-overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-card {
  background:var(--white); border-radius:20px;
  width:100%; max-width:440px;
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:slideUp .25s ease;
}
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.modal-header { background:var(--navy); padding:2rem 2rem 1.5rem; text-align:center; position:relative; }
.modal-logo { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:#fff; }
.modal-logo span { color:var(--gold-bright); }
.modal-tagline { font-size:.78rem; color:rgba(255,255,255,.5); margin-top:.3rem; }
.modal-close-btn { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.7); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem; transition:background .15s; }
.modal-close-btn:hover { background:rgba(255,255,255,.2); }
.modal-tabs { display:flex; border-bottom:1px solid var(--border); }
.modal-tab { flex:1; padding:.75rem; text-align:center; font-size:.85rem; font-weight:600; color:var(--muted); cursor:pointer; border:none; background:transparent; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .18s; }
.modal-tab.active { color:var(--navy); border-bottom-color:var(--gold); }
.modal-body { padding:1.75rem 2rem; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.form-input { width:100%; padding:.6rem .85rem; background:var(--bg-light); border:1.5px solid var(--border); border-radius:9px; font-family:inherit; font-size:.9rem; color:var(--text); outline:none; transition:border-color .18s; }
.form-input:focus { border-color:var(--gold); background:var(--white); }
.form-input.error { border-color:#b84040; }
.form-error { font-size:.72rem; color:#b84040; margin-top:.3rem; display:none; }
.form-error.show { display:block; }
.form-submit { width:100%; padding:.72rem; border-radius:10px; background:var(--gold); color:#fff; border:none; font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; transition:background .18s; margin-top:.5rem; box-shadow:0 4px 16px rgba(179,139,77,.4); }
.form-submit:hover { background:var(--gold-light); }
.form-submit[disabled] { opacity:.7; cursor:not-allowed; }
.form-divider { display:flex; align-items:center; gap:.75rem; margin:1.1rem 0; }
.form-divider::before,.form-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.form-divider span { font-size:.72rem; color:var(--muted); }
.social-btn { width:100%; padding:.6rem; border-radius:9px; background:var(--white); border:1.5px solid var(--border); font-family:inherit; font-size:.85rem; font-weight:500; color:var(--text); cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:.5rem; }
.social-btn:hover { border-color:var(--gold); background:var(--gold-pale2); }
.social-btn[disabled] { opacity:.65; cursor:not-allowed; }
.form-footer { text-align:center; font-size:.78rem; color:var(--muted); margin-top:1rem; }
.form-footer a { color:var(--gold); cursor:pointer; font-weight:500; }
.password-wrap { position:relative; }
.password-toggle { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); font-size:.85rem; }
.auth-status {
 min-height:1.25rem;
 font-size:.76rem;
 color:var(--muted);
 margin-bottom:.8rem;
 line-height:1.45;
}
.auth-status.error { color:#b84040; }
.google-signin-slot {
 min-height:44px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.auth-note {
 margin-top:.65rem;
 font-size:.75rem;
 color:var(--muted);
 text-align:center;
 line-height:1.5;
}
.payment-modal-card { max-width:620px; }
.payment-plan {
 background:linear-gradient(135deg, rgba(179,139,77,.14), rgba(13,27,46,.05));
 border:1px solid rgba(179,139,77,.28);
 border-radius:16px;
 padding:1rem 1.1rem;
 margin-bottom:1rem;
}
.payment-plan-price {
 display:flex; align-items:flex-end; gap:.55rem; flex-wrap:wrap;
 margin-top:.45rem;
}
.payment-plan-price strong {
 font-family:'Playfair Display',serif;
 font-size:2rem;
 color:var(--navy);
 line-height:1;
}
.payment-plan-price span { color:var(--muted); font-size:.9rem; }
.payment-price-breakdown {
 display:grid;
 gap:.32rem;
 margin-top:.7rem;
}
.payment-price-row {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:1rem;
 font-size:.84rem;
 color:var(--muted);
}
.payment-price-row strong {
 color:var(--navy);
 font-size:.9rem;
}
.payment-price-row.total {
 margin-top:.2rem;
 padding-top:.55rem;
 border-top:1px dashed rgba(11,31,58,.14);
 color:var(--navy);
 font-weight:700;
}
.payment-price-row.total strong {
 font-size:1rem;
 color:var(--gold-deep);
}
.payment-grid {
 display:grid;
 grid-template-columns:repeat(2, minmax(0,1fr));
 gap:.8rem;
 margin-bottom:1rem;
}
.payment-layout {
 display:grid;
 grid-template-columns:minmax(0,1fr) 240px;
 gap:1rem;
 align-items:start;
 margin-bottom:1rem;
}
.payment-card {
 border:1px solid var(--border);
 border-radius:14px;
 background:var(--bg-light);
 padding:.85rem .9rem;
}
.payment-card-label {
 display:block;
 font-size:.72rem;
 text-transform:uppercase;
 letter-spacing:.06em;
 color:var(--muted);
 margin-bottom:.35rem;
}
.payment-card strong {
 display:block;
 color:var(--navy);
 font-size:.95rem;
 line-height:1.45;
 word-break:break-word;
}
.payment-alert {
 border-radius:12px;
 padding:.75rem .85rem;
 font-size:.82rem;
 line-height:1.55;
 margin-bottom:1rem;
}
.payment-alert.info { background:rgba(13,27,46,.06); color:var(--navy); }
.payment-alert.warn { background:rgba(179,139,77,.12); color:var(--gold-deep); }
.payment-actions {
 display:flex;
 flex-wrap:wrap;
 gap:.7rem;
 margin-top:1rem;
}
.payment-actions .btn-ghost,
.payment-actions .form-submit {
 flex:1 1 220px;
}
.payment-qr-card {
 border:1px solid rgba(179,139,77,.24);
 background:#fffdf8;
 border-radius:16px;
 padding:.85rem;
 text-align:center;
}
.payment-qr-frame {
 background:#fff;
 border-radius:14px;
 border:1px solid var(--border);
 padding:.55rem;
 margin-bottom:.7rem;
 box-shadow:inset 0 0 0 1px rgba(13,27,46,.03);
}
.payment-qr-frame img {
 display:block;
 width:100%;
 height:auto;
 border-radius:10px;
}
.payment-qr-caption {
 font-size:.75rem;
 color:var(--muted);
 line-height:1.5;
}
.payment-company {
 border:1px solid var(--border);
 border-radius:14px;
 background:rgba(13,27,46,.03);
 padding:.85rem .9rem;
 margin-bottom:1rem;
}
.payment-company strong {
 display:block;
 color:var(--navy);
 margin-bottom:.3rem;
}
.payment-company p {
 margin:.15rem 0;
 font-size:.8rem;
 color:var(--muted);
 line-height:1.6;
}
.payment-status-chip {
 display:inline-flex;
 align-items:center;
 gap:.4rem;
 padding:.35rem .75rem;
 border-radius:999px;
 font-size:.74rem;
 font-weight:700;
 margin-bottom:.85rem;
}
.payment-status-chip.none { background:rgba(13,27,46,.08); color:var(--navy); }
.payment-status-chip.pending_activation { background:rgba(179,139,77,.14); color:var(--gold-deep); }
.payment-status-chip.active { background:rgba(43,122,75,.12); color:#246844; }
.payment-status-chip.expired { background:rgba(184,64,64,.12); color:#b84040; }
.subscription-copy {
 font-size:.82rem;
 color:var(--muted);
 line-height:1.65;
 margin-bottom:1rem;
}
.subscription-inline-note {
 font-size:.76rem;
 color:var(--muted);
 line-height:1.55;
 margin-top:.5rem;
}
.subscription-page-shell {
 max-width:1100px;
 margin:0 auto;
 padding:2.4rem 5% 3.5rem;
 display:grid;
 grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
 gap:1.4rem;
 align-items:start;
}
.subscription-page-main {
 background:var(--white);
 border:1px solid var(--border);
 border-radius:22px;
 box-shadow:var(--shadow-md);
 padding:1.4rem;
}
.subscription-page-side {
 display:grid;
 gap:1rem;
}
.subscription-target-badge {
 display:inline-flex;
 align-items:center;
 gap:.45rem;
 padding:.45rem .8rem;
 border-radius:999px;
 background:rgba(179,139,77,.12);
 color:var(--gold-deep);
 font-size:.76rem;
 font-weight:700;
 letter-spacing:.02em;
 margin-bottom:1rem;
}
.subscription-page-title {
 font-family:'Playfair Display',serif;
 font-size:clamp(1.85rem,4vw,2.65rem);
 line-height:1.1;
 color:var(--navy);
 margin:0 0 .75rem;
}
.subscription-page-sub {
 color:var(--muted);
 font-size:.96rem;
 line-height:1.75;
 margin-bottom:1.15rem;
}
.subscription-steps {
 display:grid;
 gap:.7rem;
 margin-top:1rem;
}
.subscription-step {
 display:flex;
 gap:.75rem;
 align-items:flex-start;
 border:1px solid var(--border);
 background:var(--bg-light);
 border-radius:14px;
 padding:.85rem .95rem;
}
.subscription-step-no {
 width:30px;
 height:30px;
 flex-shrink:0;
 border-radius:50%;
 background:var(--navy);
 color:#fff;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:.8rem;
 font-weight:700;
}
.subscription-step strong {
 display:block;
 color:var(--navy);
 margin-bottom:.15rem;
}
.subscription-step p {
 margin:0;
 color:var(--muted);
 font-size:.84rem;
 line-height:1.6;
}
.subscription-page-actions {
 display:flex;
 flex-wrap:wrap;
 gap:.8rem;
 margin-top:1.2rem;
}
.subscription-page-actions .form-submit,
.subscription-page-actions .btn-ghost {
 flex:1 1 220px;
 width:auto;
 margin-top:0;
}
.subscription-side-card {
 background:var(--white);
 border:1px solid var(--border);
 border-radius:20px;
 box-shadow:var(--shadow-md);
 padding:1.2rem;
}
.subscription-side-card h3 {
 font-family:'Playfair Display',serif;
 font-size:1.1rem;
 color:var(--navy);
 margin-bottom:.75rem;
}
.subscription-side-card p {
 font-size:.84rem;
 color:var(--muted);
 line-height:1.7;
 margin:.35rem 0 0;
}
.subscription-side-meta {
 display:grid;
 gap:.75rem;
}
.subscription-side-meta .payment-card {
 background:#fff;
}

@media(max-width:640px) {
 .payment-layout { grid-template-columns:1fr; }
 .payment-grid { grid-template-columns:1fr; }
 .payment-actions,
 .subscription-page-actions {
  flex-direction:column;
  align-items:stretch;
 }
 .payment-actions .btn-ghost,
 .payment-actions .form-submit,
 .subscription-page-actions .form-submit,
 .subscription-page-actions .btn-ghost {
  width:100%;
  flex:0 0 auto;
  min-height:52px;
  padding:.9rem 1rem;
  white-space:normal;
  line-height:1.35;
  margin-top:0;
 }
 .subscription-page-shell {
  grid-template-columns:1fr;
  padding:1.35rem 4% 2.2rem;
 }
 .subscription-page-main,
 .subscription-side-card { padding:1rem; }
 .subscription-page-title { font-size:1.7rem; }
 .payment-plan-price strong { font-size:1.72rem; }
 .payment-price-row { font-size:.8rem; }
 .payment-card { padding:.8rem .85rem; }
 .payment-qr-card { padding:.8rem; }
}

/* ═══════════════════════════════════════
   STATS DASHBOARD PAGE
═══════════════════════════════════════ */
.stats-header { background:var(--navy); padding:2.5rem 5%; position:relative; overflow:hidden; }
.stats-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 90% 50%, rgba(179,139,77,.15) 0%,transparent 65%); }
.stats-header h1 { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:#fff; position:relative; }
.stats-header p  { color:rgba(255,255,255,.55); margin-top:.4rem; font-size:.9rem; position:relative; }
.stats-eyebrow   { font-size:.72rem; font-weight:700; color:var(--gold-bright); letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; position:relative; }
.stats-body { padding:2rem 5%; max-width:1100px; margin:0 auto; }
.stats-grid-top { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
@media(max-width:900px){ .stats-grid-top{ grid-template-columns:repeat(2,1fr); } }
.stat-tile { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:1.4rem; transition:transform .18s, box-shadow .18s; }
.stat-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-tile-icon  { font-size:1.6rem; margin-bottom:.5rem; color:var(--gold); }
.stat-tile-num   { font-family:'Playfair Display',serif; font-size:2rem; font-weight:900; color:var(--navy); line-height:1; }
.stat-tile-label { font-size:.75rem; color:var(--muted); margin-top:.3rem; }
.stat-tile-trend { font-size:.72rem; margin-top:.5rem; padding:.18rem .5rem; border-radius:100px; display:inline-block; font-weight:600; }
.trend-up   { background:var(--green-pale); color:#1a5c36; }
.trend-same { background:var(--gold-pale);  color:#7a5c28; }
.stats-two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:1.5rem; margin-bottom:2rem; }
@media(max-width:900px){ .stats-two-col{ grid-template-columns:1fr; } }
.stats-card { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:1.5rem; }
.stats-card h3 { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:1.2rem; display:flex; align-items:center; gap:.5rem; }
.heatmap-months { display:flex; justify-content:space-between; font-size:.65rem; color:var(--muted); margin-bottom:.4rem; }
.heatmap-grid { display:grid; grid-template-columns:repeat(13,1fr); gap:3px; }
.heatmap-cell { aspect-ratio:1; border-radius:3px; background:var(--border); transition:transform .15s; cursor:default; }
.heatmap-cell.l1 { background:rgba(179,139,77,.2); }
.heatmap-cell.l2 { background:rgba(179,139,77,.45); }
.heatmap-cell.l3 { background:rgba(179,139,77,.7); }
.heatmap-cell.l4 { background:var(--gold); }
.heatmap-cell:hover { transform:scale(1.3); }
.subject-prog-list { display:flex; flex-direction:column; gap:.85rem; }
.spl-item { display:flex; align-items:center; gap:.9rem; }
.spl-icon { font-size:1.1rem; flex-shrink:0; width:26px; display:flex; align-items:center; justify-content:center; color:var(--gold); }
.spl-info { flex:1; min-width:0; }
.spl-name { font-size:.82rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spl-bar-wrap { height:6px; background:var(--border); border-radius:100px; margin-top:.28rem; overflow:hidden; }
.spl-bar { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transition:width .7s ease; }
.spl-pct { font-size:.72rem; color:var(--muted); flex-shrink:0; min-width:32px; text-align:right; }
.week-chart { display:flex; align-items:flex-end; gap:.5rem; height:100px; margin-top:.5rem; }
.wc-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.wc-bar { width:100%; border-radius:5px 5px 0 0; background:var(--gold); min-height:4px; transition:height .6s ease; }
.wc-bar.today { background:var(--navy); }
.wc-label { font-size:.65rem; color:var(--muted); }
.wc-val { font-size:.65rem; color:var(--muted); font-weight:600; }
.activity-feed { display:flex; flex-direction:column; gap:.6rem; max-height:280px; overflow-y:auto; }
.act-item { display:flex; align-items:center; gap:.8rem; padding:.5rem .6rem; border-radius:8px; transition:background .15s; }
.act-item:hover { background:var(--bg-light); }
.act-ico { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.act-ico.gold  { background:var(--gold-pale); }
.act-ico.green { background:var(--green-pale); }
.act-ico.navy  { background:rgba(29,53,87,.08); }
.act-texts { flex:1; }
.act-name { font-size:.82rem; font-weight:500; color:var(--navy); }
.act-time { font-size:.7rem; color:var(--muted); }
.streak-row { display:flex; gap:.5rem; justify-content:center; margin-top:.5rem; }
.streak-day { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.streak-circle { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; border:2px solid var(--border); }
.streak-circle.done  { background:var(--gold); border-color:var(--gold); }
.streak-circle.today { background:var(--navy); border-color:var(--navy); }
.streak-day-label { font-size:.6rem; color:var(--muted); }

/* ═══════════════════════════════════════
   PAST PAPERS PAGE
═══════════════════════════════════════ */
.papers-header { background:var(--navy); padding:2.5rem 5%; position:relative; overflow:hidden; }
.papers-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 70% at 80% 50%, rgba(179,139,77,.14) 0%,transparent 60%); }
.papers-header h1 { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:#fff; position:relative; }
.papers-header p  { color:rgba(255,255,255,.55); font-size:.9rem; margin-top:.4rem; position:relative; }
.papers-eyebrow   { font-size:.72rem; font-weight:700; color:var(--gold-bright); letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem; position:relative; }
.papers-body { padding:2rem 5%; max-width:1000px; margin:0 auto; }
.papers-filter-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.8rem; align-items:center; }
.pf-select { padding:.45rem .85rem; background:var(--white); border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:.82rem; color:var(--text); outline:none; cursor:pointer; transition:border-color .18s; }
.pf-select:focus { border-color:var(--gold); }
.papers-grid { display:flex; flex-direction:column; gap:1.2rem; }
.pyg-head { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--navy); padding:.5rem 0; margin-bottom:.6rem; border-bottom:2px solid var(--border); display:flex; align-items:center; gap:.5rem; }
.pyg-sessions { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; }
.paper-card { background:var(--white); border:1.5px solid var(--border); border-radius:11px; padding:1rem 1.1rem; transition:all .18s; cursor:pointer; display:flex; flex-direction:column; gap:.4rem; }
.paper-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.pc-session { font-size:.7rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.5px; }
.pc-name    { font-size:.87rem; font-weight:600; color:var(--navy); }
.pc-meta    { font-size:.72rem; color:var(--muted); }
.pc-chips   { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.2rem; }
.pc-chip    { font-size:.65rem; padding:.15rem .45rem; border-radius:100px; font-weight:600; border:1px solid; }
.pc-chip.qp { background:rgba(29,53,87,.07); color:var(--navy); border-color:rgba(29,53,87,.2); }
.pc-chip.ms { background:var(--green-pale); color:#1a5c36; border-color:rgba(42,122,75,.25); }
.pc-chip.er { background:var(--amber-pale); color:#7a4a10; border-color:rgba(201,124,40,.25); }

/* ═══════════════════════════════════════
   HUB FILTER BAR
═══════════════════════════════════════ */
.hub-filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:.9rem 0; margin-bottom:1rem; }
.hf-input { flex:1; min-width:180px; max-width:280px; padding:.42rem .8rem; background:var(--bg-light); border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:.82rem; color:var(--text); outline:none; transition:border-color .18s; }
.hf-input:focus { border-color:var(--gold); }
.hf-tag { padding:.35rem .8rem; border-radius:100px; font-size:.75rem; font-weight:500; border:1.5px solid var(--border); background:var(--white); color:var(--muted); cursor:pointer; transition:all .15s; }
.hf-tag:hover, .hf-tag.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.hf-clear { font-size:.75rem; color:var(--gold); cursor:pointer; text-decoration:underline; }
.hub-count-label { font-size:.75rem; color:var(--muted); margin-left:auto; }

/* ═══════════════════════════════════════
   HOME — HOW IT WORKS
═══════════════════════════════════════ */
.how-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; counter-reset:step; }
.how-step { position:relative; padding:1.8rem 1.5rem 1.5rem; background:var(--white); border-radius:16px; border:1.5px solid var(--border); transition:transform .2s, box-shadow .2s; counter-increment:step; }
.how-step:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.how-step::before { content:counter(step); position:absolute; top:-14px; left:1.2rem; width:28px; height:28px; border-radius:50%; background:var(--navy); color:var(--gold-bright); font-family:'Playfair Display',serif; font-size:.85rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(29,53,87,.25); }
.how-step-icon { font-size:1.8rem; margin-bottom:.75rem; display:flex; color:var(--gold); }
.how-step h4 { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.45rem; }
.how-step p  { font-size:.84rem; color:var(--muted); line-height:1.6; }

/* ═══════════════════════════════════════
   HOME — PROGRAMME COMPARISON
═══════════════════════════════════════ */
.prog-compare-wrap { overflow-x:auto; max-width:900px; margin:0 auto; border-radius:14px; border:1.5px solid var(--border); }
.prog-compare { width:100%; border-collapse:collapse; font-size:.83rem; }
.prog-compare th { background:var(--navy); color:#fff; padding:.8rem 1.1rem; text-align:left; font-size:.78rem; font-weight:600; }
.prog-compare th:first-child { border-radius:12px 0 0 0; }
.prog-compare th:last-child  { border-radius:0 12px 0 0; }
.prog-compare td { padding:.7rem 1.1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.prog-compare tr:last-child td { border-bottom:none; }
.prog-compare tr:nth-child(even) td { background:var(--bg-light); }
.prog-compare tr:hover td { background:var(--gold-pale2); }
.prog-compare .feat-name { font-weight:600; color:var(--navy); }
.prog-compare .check   { color:var(--green); font-size:1rem; }
.prog-compare .cross   { color:#b84040; font-size:1rem; }
.prog-compare .partial { color:var(--amber); font-size:.8rem; font-weight:600; }

/* ═══════════════════════════════════════
   PRINT / EXPORT
═══════════════════════════════════════ */
.print-btn { background:var(--white); border:1.5px solid var(--border); color:var(--muted); padding:.35rem .85rem; border-radius:7px; font-size:.78rem; font-weight:500; cursor:pointer; transition:all .18s; display:flex; align-items:center; gap:.35rem; }
.print-btn:hover { border-color:var(--gold); color:var(--navy); }
@media print {
  nav,.breadcrumb,.dashboard-bar,.tab-bar,.lesson-sidebar,.lesson-topbar,.notes-area,.ai-fab,.ai-panel,#toast-container { display:none !important; }
  .tab-panel { display:block !important; }
  .lesson-main { padding:0 !important; }
  .fc { break-inside:avoid; border:1px solid #ccc !important; }
}

/* ═══════════════════════════════════════
   DARK MODE
═══════════════════════════════════════ */
body.dark {
 --navy:    #1a2a42;
 --navy-mid:  #111d2e;
 --navy-light: #243552;
 --navy-dark:  #0b1220;
 --cream:    #111827;
 --bg-light:  #1c2535;
 --white:    #1f2d3d;
 --border:   #2d3e52;
 --border-mid: #374d66;
 --text:    #e2e8f0;
 --muted:    #8fa3bb;
 --shadow-sm:  0 2px 8px rgba(0,0,0,.25);
 --shadow-md:  0 6px 24px rgba(0,0,0,.35);
 --shadow-lg:  0 16px 48px rgba(0,0,0,.45);
}
body.dark .breadcrumb  { background:var(--navy-mid); }
body.dark .ct-table th  { background:var(--navy-light); }
body.dark .cs-scenario  { background:linear-gradient(135deg,var(--navy-dark),var(--navy)); }
body.dark .ep-item    { background:var(--white); }
body.dark .lesson-topbar { background:var(--white); }
body.dark .ai-panel   { background:var(--navy-mid); border-color:var(--border); }
body.dark .ai-msg.bot  { background:var(--navy-dark); }
body.dark .quiz-card   { background:var(--white); }

.dark-toggle {
 background:none; border:1.5px solid rgba(255,255,255,.25);
 color:rgba(255,255,255,.7); width:34px; height:34px;
 border-radius:8px; cursor:pointer; font-size:.95rem;
 transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.dark-toggle:hover { border-color:var(--gold); color:var(--gold-bright); }

/* ═══════════════════════════════════════
  AI STUDY ASSISTANT PANEL
═══════════════════════════════════════ */
.ai-panel {
 position:fixed; right:0; top:62px; bottom:0;
 width:360px; background:var(--white);
 border-left:1.5px solid var(--border);
 display:flex; flex-direction:column;
 z-index:150; transform:translateX(100%);
 transition:transform .3s cubic-bezier(.4,0,.2,1);
 box-shadow:var(--shadow-lg);
}
.ai-panel.open { transform:translateX(0); }
.ai-panel-head {
 display:flex; align-items:center; gap:.7rem;
 padding:1rem 1.2rem; border-bottom:1px solid var(--border);
 background:var(--navy); flex-shrink:0;
}
.ai-panel-head h3 { font-family:'Playfair Display',serif; font-size:.95rem; font-weight:700; color:#fff; flex:1; }
.ai-panel-head p { font-size:.72rem; color:rgba(255,255,255,.62); line-height:1.35; }
.ai-close { background:none; border:none; color:rgba(255,255,255,.6); font-size:1.1rem; cursor:pointer; padding:.2rem; transition:color .15s; }
.ai-close:hover { color:#fff; }
.ai-model-badge {
 font-size:.65rem; background:rgba(255,255,255,.1); color:var(--gold-bright);
 border:1px solid rgba(179,139,77,.55); padding:.18rem .55rem; border-radius:100px;
 font-weight:600; white-space:nowrap;
}
.ai-context-bar {
 padding:.5rem 1rem; background:var(--gold-pale2);
 border-bottom:1px solid var(--border);
 font-size:.72rem; color:var(--muted);
 flex-shrink:0;
}
.ai-context-bar strong { color:var(--navy); }
.ai-embed-shell {
 flex:1;
 min-height:0;
 padding:.7rem;
 background:linear-gradient(180deg, rgba(249,245,239,.85), rgba(242,236,224,.92));
}
.ai-embed-frame {
 width:100%;
 height:100%;
 border:none;
 border-radius:18px;
 background:#fff;
 box-shadow:inset 0 0 0 1px rgba(13,27,46,.04);
}
.ai-embed-note {
 padding:.65rem 1rem .85rem;
 border-top:1px solid var(--border);
 background:#fff;
 font-size:.72rem;
 color:var(--muted);
 line-height:1.55;
}
.ai-tutor-nav-btn {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:.4rem;
 white-space:nowrap;
}
.ai-tutor-nav-btn .te-icon { width:1em; height:1em; }

/* Floating AI button */
.ai-fab {
 position:fixed; right:1.5rem; bottom:5rem;
 width:52px; height:52px; border-radius:50%;
 background:linear-gradient(135deg,var(--navy),var(--navy-light));
 border:2px solid var(--gold); color:var(--gold-bright);
 font-size:1.3rem; cursor:pointer; z-index:149;
 box-shadow:0 4px 20px rgba(29,53,87,.35);
 transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.ai-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(179,139,77,.4); }
.ai-fab.panel-open { background:var(--gold); color:#fff; border-color:var(--gold); }

/* ═══════════════════════════════════════
  QUIZ MODE
═══════════════════════════════════════ */
.quiz-container { max-width:640px; margin:0 auto; padding:2rem 1rem; }
.quiz-header {
 display:flex; align-items:center; justify-content:space-between;
 margin-bottom:1.5rem; flex-wrap:wrap; gap:.5rem;
}
.quiz-progress-wrap { flex:1; max-width:300px; }
.quiz-timer {
 font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
 color:var(--navy); min-width:48px; text-align:right;
 transition:color .3s;
}
.quiz-timer.warning { color:var(--amber); }
.quiz-timer.danger { color:#b84040; animation:pulse 1s infinite; }
.quiz-card {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:16px; padding:2rem; margin-bottom:1.2rem;
 animation:pageIn .3s ease both;
}
.quiz-q-num { font-size:.72rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.7px; margin-bottom:.75rem; }
.quiz-q-text { font-size:1rem; font-weight:500; color:var(--navy); line-height:1.65; margin-bottom:1.5rem; }
.quiz-options { display:flex; flex-direction:column; gap:.6rem; }
.quiz-opt {
 display:flex; align-items:flex-start; gap:.75rem;
 padding:.85rem 1rem; border:1.5px solid var(--border);
 border-radius:10px; cursor:pointer; transition:all .18s;
 font-size:.88rem; line-height:1.55; color:var(--text);
 background:var(--cream);
}
.quiz-opt:hover:not(.disabled) { border-color:var(--gold); background:var(--gold-pale2); }
.quiz-opt.selected { border-color:var(--navy); background:rgba(29,53,87,.07); }
.quiz-opt.correct  { border-color:var(--green); background:var(--green-pale); color:#1a5c36; }
.quiz-opt.wrong   { border-color:#b84040; background:rgba(184,64,64,.07); color:#b84040; }
.quiz-opt.reveal  { border-color:var(--green); background:var(--green-pale); color:#1a5c36; }
.quiz-opt-letter {
 min-width:24px; height:24px; border-radius:6px;
 background:var(--border); color:var(--muted);
 display:flex; align-items:center; justify-content:center;
 font-size:.72rem; font-weight:700; flex-shrink:0; margin-top:.05rem;
}
.quiz-opt.correct .quiz-opt-letter { background:var(--green); color:#fff; }
.quiz-opt.wrong  .quiz-opt-letter { background:#b84040; color:#fff; }
.quiz-explanation {
 margin-top:1rem; padding:.9rem 1rem;
 background:var(--bg-light); border-radius:9px;
 border-left:3px solid var(--gold);
 font-size:.83rem; line-height:1.65; color:var(--text);
 display:none;
}
.quiz-explanation.show { display:block; animation:pageIn .2s ease both; }
.quiz-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1rem; }
.quiz-next-btn {
 background:var(--navy); color:#fff; border:none;
 padding:.55rem 1.4rem; border-radius:8px;
 font-family:inherit; font-size:.85rem; font-weight:600;
 cursor:pointer; transition:background .18s;
}
.quiz-next-btn:hover { background:var(--navy-light); }
.quiz-results {
 text-align:center; padding:2.5rem 1rem;
 animation:pageIn .4s ease both;
}
.quiz-score-circle {
 width:120px; height:120px; border-radius:50%;
 background:conic-gradient(var(--gold) var(--pct), var(--border) 0);
 display:flex; align-items:center; justify-content:center;
 margin:0 auto 1.5rem; position:relative;
}
.quiz-score-inner {
 width:90px; height:90px; border-radius:50%;
 background:var(--white); display:flex; flex-direction:column;
 align-items:center; justify-content:center;
}
.quiz-score-num { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--navy); line-height:1; }
.quiz-score-label { font-size:.65rem; color:var(--muted); margin-top:.15rem; }
.quiz-grade {
 font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700;
 margin-bottom:.5rem;
}
.quiz-restart-btn {
 background:var(--gold); color:#fff; border:none;
 padding:.65rem 1.8rem; border-radius:9px;
 font-family:inherit; font-size:.9rem; font-weight:600;
 cursor:pointer; margin-top:1.5rem; transition:background .18s;
}
.quiz-restart-btn:hover { background:var(--gold-light); }

/* ═══════════════════════════════════════
  REVISION PLANNER PAGE
═══════════════════════════════════════ */
.planner-layout {
 display:grid; grid-template-columns:300px 1fr;
 min-height:calc(100vh - 120px); gap:0;
}
.planner-sidebar {
 background:var(--white); border-right:1px solid var(--border);
 padding:1.5rem;
}
.planner-sidebar h3 {
 font-family:'Playfair Display',serif; font-size:1.1rem;
 font-weight:700; color:var(--navy); margin-bottom:1.2rem;
}
.planner-field { margin-bottom:1rem; }
.planner-field label { display:block; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:.4rem; }
.planner-input, .planner-select {
 width:100%; padding:.5rem .75rem;
 background:var(--bg-light); border:1.5px solid var(--border);
 border-radius:8px; font-family:inherit; font-size:.85rem; color:var(--text);
 outline:none; transition:border-color .18s;
}
.planner-input:focus, .planner-select:focus { border-color:var(--gold); }
.planner-subject-check {
 display:flex; align-items:center; gap:.6rem;
 padding:.45rem .6rem; border-radius:7px; cursor:pointer;
 font-size:.83rem; transition:background .15s;
}
.planner-subject-check:hover { background:var(--bg-light); }
.planner-subject-check input { accent-color:var(--gold); width:15px; height:15px; }
.planner-gen-btn {
 width:100%; background:var(--gold); color:#fff; border:none;
 padding:.65rem; border-radius:9px; font-family:inherit;
 font-size:.9rem; font-weight:600; cursor:pointer;
 margin-top:1rem; transition:background .18s;
}
.planner-gen-btn:hover { background:var(--gold-light); }
.planner-main { padding:2rem; overflow-y:auto; }
.planner-week {
 display:grid; grid-template-columns:repeat(7,1fr);
 gap:.5rem; margin-bottom:2rem;
}
.planner-day {
 background:var(--white); border:1.5px solid var(--border);
 border-radius:10px; overflow:hidden;
 min-height:160px;
}
.planner-day-head {
 background:var(--navy); color:#fff;
 padding:.4rem .6rem; font-size:.72rem; font-weight:600;
 text-align:center; letter-spacing:.4px;
}
.planner-day-head.today { background:var(--gold); }
.planner-day-body { padding:.4rem; display:flex; flex-direction:column; gap:.3rem; }
.planner-slot {
 padding:.3rem .45rem; border-radius:5px;
 font-size:.67rem; line-height:1.4; cursor:pointer;
 transition:opacity .15s;
}
.planner-slot:hover { opacity:.85; }
.planner-slot.science { background:rgba(14,120,180,.12); color:#0c6fa8; border-left:2px solid #0c6fa8; }
.planner-slot.maths  { background:rgba(107,79,160,.12); color:#5a3a90; border-left:2px solid #5a3a90; }
.planner-slot.social  { background:rgba(42,122,75,.12); color:#1a5c36; border-left:2px solid #1a5c36; }
.planner-slot.tech   { background:rgba(179,139,77,.12); color:#7a5c28; border-left:2px solid var(--gold); }
.planner-slot.language { background:rgba(184,64,64,.12); color:#923232; border-left:2px solid #b84040; }
.planner-empty { text-align:center; padding:3rem 1rem; color:var(--muted); font-size:.88rem; }
.planner-legend {
 display:flex; gap:1rem; flex-wrap:wrap;
 margin-bottom:1.5rem;
}
.legend-item { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--muted); }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ═══════════════════════════════════════
  HOME PAGE — FEATURED PROGRAMS GRID
═══════════════════════════════════════ */
.prog-showcase {
 display:grid; grid-template-columns:repeat(4,1fr);
 gap:1.2rem; max-width:1080px; margin:0 auto;
}
@media(max-width:900px) { .prog-showcase { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .prog-showcase { grid-template-columns:1fr; } }
.prog-card {
 border-radius:16px; padding:1.75rem 1.4rem;
 cursor:pointer; transition:all .22s; position:relative; overflow:hidden;
 border:2px solid transparent;
}
.prog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.prog-card.igcse { background:linear-gradient(135deg,#1D3557,#254470); }
.prog-card.alevel { background:linear-gradient(135deg,#162b47,#1D3557); }
.prog-card.ap   { background:linear-gradient(135deg,#3a1f06,#6b3a10); }
.prog-card.ib   { background:linear-gradient(135deg,#063a1f,#0e5c2e); }
.prog-card::before {
 content:''; position:absolute; top:-30px; right:-30px;
 width:100px; height:100px; border-radius:50%;
 background:rgba(255,255,255,.05);
}
.pc-icon { font-size:2.2rem; margin-bottom:.8rem; display:flex; color:var(--gold-bright); }
.pc-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:#fff; }
.pc-sub { font-size:.75rem; color:rgba(255,255,255,.55); margin-top:.25rem; }
.pc-count { font-size:.7rem; margin-top:.9rem; color:rgba(255,255,255,.4); }
.pc-arrow { position:absolute; bottom:1.2rem; right:1.2rem; color:rgba(255,255,255,.3); font-size:.85rem; transition:all .2s; }
.prog-card:hover .pc-arrow { color:var(--gold-bright); transform:translateX(3px); }

/* Animated counter */
.count-up { display:inline-block; }

/* Recently studied */
.recent-list { display:flex; flex-direction:column; gap:.6rem; max-width:700px; margin:0 auto; }
.recent-item {
 display:flex; align-items:center; gap:.9rem;
 background:var(--white); border:1.5px solid var(--border);
 border-radius:10px; padding:.75rem 1rem;
 cursor:pointer; transition:all .18s;
}
.recent-item:hover { border-color:var(--gold); transform:translateX(3px); }
.recent-ico { font-size:1.3rem; flex-shrink:0; color:var(--gold); display:flex; }
.recent-texts { flex:1; }
.recent-name { font-size:.88rem; font-weight:600; color:var(--navy); }
.recent-path { font-size:.72rem; color:var(--muted); margin-top:.1rem; }
.recent-arrow { color:var(--muted); font-size:.8rem; transition:color .15s; }
.recent-item:hover .recent-arrow { color:var(--gold); }

/* Program comparison table */
.compare-table { width:100%; border-collapse:collapse; font-size:.83rem; max-width:900px; margin:0 auto; }
.compare-table th { background:var(--navy); color:#fff; padding:.7rem 1rem; text-align:left; font-weight:600; font-size:.78rem; }
.compare-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.compare-table tr:nth-child(even) td { background:var(--bg-light); }
.compare-table .check { color:var(--green); font-size:1rem; }
.compare-table .cross { color:#b84040; font-size:1rem; }

@media(max-width:900px) {
 .planner-layout { grid-template-columns:1fr; }
 .planner-sidebar { border-right:none; border-bottom:1px solid var(--border); }
 .planner-week { grid-template-columns:repeat(3,1fr); }
 .ai-panel { width:100%; }
}
@media(max-width:640px) {
 .planner-sidebar { padding:1rem; }
 .planner-week { grid-template-columns:repeat(2,1fr); gap:.45rem; }
 .planner-day { min-height:140px; }
 .planner-day-head { font-size:.68rem; padding:.35rem .4rem; }
 .planner-slot { font-size:.62rem; padding:.28rem .35rem; }
 .planner-legend { gap:.65rem; }
 .stats-grid-top, .stat-row { grid-template-columns:1fr !important; }
 .week-chart { gap:.32rem; height:86px; }
 .activity-feed { max-height:none; }
 .pyg-sessions { grid-template-columns:1fr; }
 .recent-item { align-items:flex-start; }
}
@media(max-width:420px) {
 nav { padding:0 4%; height:58px; }
 .logo {
  font-size:1.06rem;
  max-width:calc(100vw - 142px);
 }
 .dark-toggle,
 #search-trigger,
 .hamburger {
  width:38px;
  height:38px;
  min-width:38px;
  flex-basis:38px;
 }
 .auth-user-name { max-width:120px; }
 .hero h1 { font-size:2rem; }
 .stat-n { font-size:1.6rem; }
 .section-title { font-size:1.55rem; }
 .mobile-menu { inset:58px 0 0 0; padding:1rem 4% 1.5rem; }
 .mobile-menu .mm-btns { flex-direction:column; }
 .db-stat { padding:.68rem .75rem; font-size:.79rem; }
 .lesson-main { padding:.9rem; }
 .fc-topbar, .db-topbar { flex-direction:column; align-items:flex-start; gap:.75rem; }
 .compare-table { min-width:660px; }
 .quiz-container { padding:1.4rem .8rem; }
 .quiz-options { gap:.65rem; }
}

/* ═══════════════════════════════════════
   STATIC CONTENT PAGES (About/Contact/Privacy/Terms)
═══════════════════════════════════════ */
.static-hero {
  background:var(--navy); padding:3rem 5% 3.5rem;
  position:relative; overflow:hidden;
}
.static-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 80% at 85% 50%, rgba(179,139,77,.15) 0%, transparent 65%);
}
.static-hero-inner { position:relative; max-width:680px; }
.static-eyebrow {
  font-size:.72rem; font-weight:700; color:var(--gold-bright);
  letter-spacing:1px; text-transform:uppercase; margin-bottom:.5rem;
}
.static-hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff;
}
.static-hero p { color:rgba(255,255,255,.58); margin-top:.65rem; font-size:.95rem; line-height:1.65; }

.static-body {
  max-width:820px; margin:0 auto; padding:3rem 5%;
}
.static-body h2 {
  font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
  color:var(--navy); margin:2.5rem 0 .8rem; padding-top:2rem;
  border-top:1px solid var(--border);
}
.static-body h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.static-body h3 {
  font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700;
  color:var(--navy); margin:1.5rem 0 .5rem;
}
.static-body p { font-size:.9rem; color:var(--text); line-height:1.8; margin-bottom:.9rem; }
.static-body ul { margin:.4rem 0 .9rem 1.3rem; }
.static-body ul li { font-size:.9rem; color:var(--text); line-height:1.75; margin-bottom:.25rem; }
.static-body a { color:var(--gold); text-decoration:underline; cursor:pointer; }
.static-body .highlight-box {
  background:var(--gold-pale); border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0; padding:1rem 1.2rem; margin:1.2rem 0;
  font-size:.88rem; color:var(--text); line-height:1.7;
}
.static-body .highlight-box strong { color:var(--navy); }
.static-body .last-updated {
  font-size:.75rem; color:var(--muted); margin-top:3rem; padding-top:1.2rem;
  border-top:1px solid var(--border);
}

/* Contact form */
.contact-grid {
  display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start;
}
@media(max-width:700px){ .contact-grid { grid-template-columns:1fr; } }
.contact-form-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:16px; padding:2rem;
}
.contact-form-card h3 {
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700;
  color:var(--navy); margin-bottom:1.4rem;
}
.cf-group { margin-bottom:1.1rem; }
.cf-label { display:block; font-size:.74rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.cf-input, .cf-select, .cf-textarea {
  width:100%; padding:.58rem .85rem;
  background:var(--bg-light); border:1.5px solid var(--border);
  border-radius:9px; font-family:inherit; font-size:.88rem; color:var(--text);
  outline:none; transition:border-color .18s;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color:var(--gold); background:var(--white); }
.cf-textarea { min-height:110px; resize:vertical; line-height:1.6; }
.cf-submit {
  width:100%; padding:.7rem; background:var(--gold); color:#fff; border:none;
  border-radius:10px; font-family:inherit; font-size:.92rem; font-weight:700;
  cursor:pointer; margin-top:.4rem; transition:background .18s;
  box-shadow:0 4px 16px rgba(179,139,77,.35);
}
.cf-submit:hover { background:var(--gold-light); }
.contact-info-card { display:flex; flex-direction:column; gap:1.2rem; }
.ci-item {
  display:flex; align-items:flex-start; gap:1rem;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:12px; padding:1.2rem;
  transition:border-color .18s;
}
.ci-item:hover { border-color:var(--gold); }
.ci-ico {
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.ci-ico.gold  { background:var(--gold-pale); color:var(--gold); }
.ci-ico.navy  { background:rgba(29,53,87,.08); color:var(--navy); }
.ci-ico.green { background:var(--green-pale); color:var(--green); }
.ci-label { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:.2rem; }
.ci-value { font-size:.9rem; font-weight:600; color:var(--navy); }
.ci-sub   { font-size:.75rem; color:var(--muted); margin-top:.1rem; }

/* About page - team / values cards */
.values-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem; margin:1.5rem 0;
}
.value-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:14px; padding:1.5rem;
  transition:transform .2s, box-shadow .2s;
}
.value-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.value-icon { font-size:1.8rem; margin-bottom:.7rem; display:flex; color:var(--gold); }
.value-card h4 { font-family:'Playfair Display',serif; font-size:.98rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.value-card p  { font-size:.83rem; color:var(--muted); line-height:1.6; }

.team-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1.2rem; margin:1.5rem 0;
}
.team-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:14px; padding:1.4rem 1rem; text-align:center;
  transition:transform .2s;
}
.team-card:hover { transform:translateY(-2px); }
.team-avatar {
  width:64px; height:64px; border-radius:50%; margin:0 auto .8rem;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border:2px solid var(--gold);
  color:var(--gold-bright);
}
.team-name { font-family:'Playfair Display',serif; font-size:.92rem; font-weight:700; color:var(--navy); }
.team-role { font-size:.72rem; color:var(--muted); margin-top:.2rem; }

.stat-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.5rem 0;
}
@media(max-width:600px){ .stat-row { grid-template-columns:repeat(2,1fr); } }
.stat-box {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:12px; padding:1.2rem; text-align:center;
}
.stat-box-num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:900; color:var(--navy); }
.stat-box-lbl { font-size:.72rem; color:var(--muted); margin-top:.2rem; }

/* Privacy / Terms - table of contents */
.toc {
  background:var(--bg-light); border:1.5px solid var(--border);
  border-radius:12px; padding:1.2rem 1.4rem; margin-bottom:2rem;
}
.toc h4 { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:.75rem; }
.toc ol { margin-left:1.1rem; }
.toc ol li { font-size:.85rem; color:var(--gold); margin-bottom:.3rem; cursor:pointer; }
.toc ol li:hover { text-decoration:underline; }

/* Motion polish */
@keyframes heroLightShift {
  0% { transform:translate3d(-1.5%, -1%, 0) scale(1); opacity:.78; }
  100% { transform:translate3d(1.5%, 1%, 0) scale(1.04); opacity:1; }
}
@keyframes dotDrift {
  from { background-position:0 0; }
  to { background-position:60px 90px; }
}
@keyframes badgeFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
@keyframes softCardIn {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes goldLine {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes shineSweep {
  from { transform:translateX(-120%) skewX(-18deg); }
  to { transform:translateX(140%) skewX(-18deg); }
}
@keyframes ambientFloat {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  33% { transform:translate3d(4vw,-3vh,0) scale(1.08); }
  66% { transform:translate3d(-3vw,4vh,0) scale(.96); }
}
@keyframes orbBreath {
  0%,100% { opacity:.48; transform:translate(-50%,-50%) scale(.94); }
  50% { opacity:.86; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes iconBob {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-5px) rotate(-3deg); }
}
@keyframes borderGlowPulse {
  0%,100% { box-shadow:0 0 0 rgba(179,139,77,0); }
  50% { box-shadow:0 0 28px rgba(179,139,77,.18); }
}
@keyframes subtleRise {
  from { opacity:0; transform:translateY(18px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
body.motion-ready {
  background:
    radial-gradient(circle at 15% 10%, rgba(179,139,77,.07), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(29,53,87,.05), transparent 28%),
    var(--cream);
}
.motion-aurora-layer {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.7;
}
.motion-aurora-layer span {
  position:absolute;
  width:28rem;
  height:28rem;
  border-radius:50%;
  filter:blur(44px);
  mix-blend-mode:multiply;
  animation:ambientFloat 18s ease-in-out infinite;
}
.motion-aurora-layer span:nth-child(1) {
  left:-8rem;
  top:9rem;
  background:rgba(179,139,77,.13);
}
.motion-aurora-layer span:nth-child(2) {
  right:-10rem;
  top:36vh;
  background:rgba(29,53,87,.10);
  animation-delay:-6s;
  animation-duration:22s;
}
.motion-aurora-layer span:nth-child(3) {
  left:42vw;
  bottom:-12rem;
  background:rgba(201,163,102,.12);
  animation-delay:-11s;
  animation-duration:26s;
}
body.dark .motion-aurora-layer {
  opacity:.36;
}
body.dark .motion-aurora-layer span {
  mix-blend-mode:screen;
}
.page,
.breadcrumb,
footer {
  position:relative;
  z-index:1;
}
nav {
  isolation:isolate;
}
nav::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent, var(--gold));
  background-size:200% 100%;
  animation:goldLine 7s linear infinite;
  opacity:.85;
}
.nav-center a {
  position:relative;
}
.nav-center a::after {
  content:'';
  position:absolute;
  left:.9rem;
  right:.9rem;
  bottom:.25rem;
  height:2px;
  border-radius:999px;
  background:var(--gold-bright);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.nav-center a:hover::after,
.nav-center a.active::after {
  transform:scaleX(1);
}
.hero::before,
.section.bg-navy::before,
.static-hero::before {
  animation:heroLightShift 14s ease-in-out infinite alternate;
}
.hero-dots {
  animation:dotDrift 28s linear infinite;
}
.hero::before,
.hero::after {
  z-index:0;
}
.hero::after {
  content:'';
  position:absolute;
  left:var(--hero-x, 66%);
  top:var(--hero-y, 20%);
  width:min(42vw, 440px);
  height:min(42vw, 440px);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(212,174,120,.34), rgba(179,139,77,.12) 38%, transparent 68%);
  filter:blur(10px);
  pointer-events:none;
  animation:orbBreath 8s ease-in-out infinite;
}
.hero > * {
  position:relative;
  z-index:1;
}
.hero-badge {
  animation:fadeUp .5s ease both, badgeFloat 5.2s ease-in-out .65s infinite;
}
.hero h1 em {
  background:linear-gradient(90deg, var(--gold-bright), #fff1c8, var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta-big,
.btn-primary,
.cf-submit,
.quiz-next-btn,
.checkout-btn {
  position:relative;
  overflow:hidden;
}
.cta-big::after,
.btn-primary::after,
.cf-submit::after,
.quiz-next-btn::after {
  content:'';
  position:absolute;
  top:-30%;
  bottom:-30%;
  width:42%;
  left:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform:translateX(-120%) skewX(-18deg);
  pointer-events:none;
}
.cta-big:hover::after,
.btn-primary:hover::after,
.cf-submit:hover::after,
.quiz-next-btn:hover::after {
  animation:shineSweep .65s ease;
}
.motion-card {
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    border-color .22s ease,
    box-shadow .28s ease,
    background-color .22s ease;
}
.motion-card > :not(.motion-glow) {
  position:relative;
  z-index:1;
}
.motion-glow {
  position:absolute;
  inset:-1px;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(212,174,120,.24), transparent 46%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.13) 45%, transparent 60%);
  transition:opacity .22s ease;
}
.motion-card:hover .motion-glow {
  opacity:1;
}
.motion-card:hover {
  animation:borderGlowPulse 1.8s ease-in-out infinite;
}
.motion-card:hover .te-icon {
  transform:translateY(-2px) rotate(-3deg) scale(1.07);
}
.motion-card .te-icon {
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.motion-in {
  animation:subtleRise .62s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--motion-i, 0) * 42ms);
}
.motion-ready .stat {
  transition:transform .24s ease, filter .24s ease;
}
.motion-ready .stat:hover {
  transform:translateY(-5px);
  filter:drop-shadow(0 10px 20px rgba(179,139,77,.18));
}
.motion-ready .pc-icon,
.motion-ready .feat-ico,
.motion-ready .how-step-icon,
.motion-ready .sc-icon,
.motion-ready .db-icon,
.motion-ready .stat-tile-icon,
.motion-ready .value-icon,
.motion-ready .team-avatar {
  animation:iconBob 5.8s ease-in-out infinite;
  animation-delay:calc(var(--motion-i, 0) * 120ms);
}
.motion-ready .tab.active,
.motion-ready .sidebar-item.active,
.motion-ready .planner-day-head.today {
  box-shadow:0 0 0 0 rgba(179,139,77,.28);
  animation:borderGlowPulse 2.4s ease-in-out infinite;
}
.motion-ready .ai-fab {
  animation:iconBob 4.6s ease-in-out infinite;
}
.level-card,
.feat-card,
.prog-card,
.subject-card,
.paper-card,
.recent-item,
.value-card,
.team-card,
.stats-card,
.contact-form-card,
.ci-item {
  will-change:transform;
}
.level-grid .level-card,
.feat-grid .feat-card,
.prog-showcase .prog-card,
.subject-grid .subject-card,
.values-grid .value-card,
.team-grid .team-card {
  animation:softCardIn .6s ease both;
}
.level-grid .level-card:nth-child(2),
.feat-grid .feat-card:nth-child(2),
.prog-showcase .prog-card:nth-child(2),
.subject-grid .subject-card:nth-child(2),
.values-grid .value-card:nth-child(2),
.team-grid .team-card:nth-child(2) { animation-delay:.05s; }
.level-grid .level-card:nth-child(3),
.feat-grid .feat-card:nth-child(3),
.prog-showcase .prog-card:nth-child(3),
.subject-grid .subject-card:nth-child(3),
.values-grid .value-card:nth-child(3),
.team-grid .team-card:nth-child(3) { animation-delay:.1s; }
.level-grid .level-card:nth-child(4),
.feat-grid .feat-card:nth-child(4),
.prog-showcase .prog-card:nth-child(4),
.subject-grid .subject-card:nth-child(4),
.values-grid .value-card:nth-child(4),
.team-grid .team-card:nth-child(4) { animation-delay:.15s; }
.reveal {
  transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}