/* ===================================================
   TOEFL Exam Lab — Premium UI
   Reggie English · reggieenglish.com
   =================================================== */

:root{
  /* brand */
  --orange:#FF8A1F;--orange-dark:#C76B12;--orange-deep:#A85708;--orange-soft:#FFEEDB;
  --gold:#FFC83D;--gold-dark:#C99412;--gold-soft:#FFF6D9;
  --blue:#1F5DFF;--blue-dark:#1745C2;--blue-deep:#0E2B7E;--blue-soft:#EAF1FF;
  --sky:#9FD0FF;--sky-soft:#E8F4FF;
  --green:#22C55E;--green-dark:#15803D;--green-soft:#EAFBF1;
  --red:#E5484D;--red-soft:#FFF1F1;

  /* neutrals */
  --ink:#141527;--ink-2:#4B5065;--ink-3:#8B90A4;
  --bg:#FAF6EF;--bg-2:#F4EEE3;--card:#FFFFFF;
  --line:rgba(20,21,39,.08);--line-strong:rgba(20,21,39,.14);

  /* type */
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;

  /* radii */
  --r-sm:14px;--r-md:20px;--r-lg:26px;--r-xl:34px;

  /* layered shadows */
  --shadow-xs:0 1px 2px rgba(23,24,48,.05);
  --shadow-sm:0 1px 2px rgba(23,24,48,.04),0 4px 10px rgba(23,24,48,.05);
  --shadow-md:0 2px 4px rgba(23,24,48,.04),0 8px 22px rgba(23,24,48,.08);
  --shadow-lg:0 4px 8px rgba(23,24,48,.05),0 18px 44px rgba(23,24,48,.13);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.55);

  --ease:cubic-bezier(.32,.72,.29,1);
}

/* section accents */
.acc-reading{--acc:#1F5DFF;--acc-2:#4D82FF;--acc-soft:#EAF1FF}
.acc-listening{--acc:#F27B0C;--acc-2:#FF9E3D;--acc-soft:#FFEEDB}
.acc-speaking{--acc:#B07C00;--acc-2:#D9A410;--acc-soft:#FFF3CE}
.acc-writing{--acc:#1745C2;--acc-2:#3E6BE8;--acc-soft:#E8F0FF}

/* === Reset & base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--ink);
  line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}
img{display:block;max-width:100%}
ul,ol{list-style:none}
::selection{background:rgba(255,200,61,.45)}

/* Ambient backdrop */
.app{
  min-height:100vh;position:relative;
  background:
    radial-gradient(900px 520px at 8% -6%,rgba(255,200,61,.16),transparent 60%),
    radial-gradient(820px 480px at 96% -4%,rgba(31,93,255,.10),transparent 55%),
    radial-gradient(700px 700px at 50% 120%,rgba(255,138,31,.07),transparent 60%),
    var(--bg);
}
.shell{max-width:760px;margin:0 auto;padding:0 20px 128px}

/* === Topbar — floating glass === */
.topbar{
  position:sticky;top:12px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 0 26px;padding:10px 12px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow-md),var(--inner-hi);
  border-radius:22px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand__logo{
  width:42px;height:42px;border-radius:13px;object-fit:contain;background:#fff;padding:3px;
  border:1px solid var(--line);box-shadow:var(--shadow-xs);
}
.brand__name{font-weight:800;font-size:14.5px;line-height:1.1;letter-spacing:-.01em}
.brand__tag{font-size:9.5px;color:var(--ink-3);font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:2.5px}
.topbar__trial{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;
  background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F);
  color:#fff;font-weight:800;font-size:12.5px;text-decoration:none;white-space:nowrap;letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 8px rgba(255,138,31,.35),0 1px 2px rgba(199,107,18,.5);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.topbar__trial:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(255,138,31,.42)}
.topbar__trial:active{transform:translateY(0)}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-weight:800;padding:14px 24px;font-size:15px;letter-spacing:.005em;
  text-decoration:none;border:none;font-family:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--orange{
  background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 12px rgba(255,138,31,.38),0 2px 4px rgba(199,107,18,.35);
}
.btn--orange:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px rgba(255,138,31,.48)}
.btn--gold{
  background:linear-gradient(180deg,#FFD667,var(--gold) 60%,#F0B92E);color:#7A4E00;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 4px 12px rgba(255,200,61,.4);
}
.btn--blue{
  background:linear-gradient(180deg,#4D82FF,var(--blue) 55%,#1A4FE0);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 4px 12px rgba(31,93,255,.35);
}
.btn--ghost{
  background:rgba(255,255,255,.7);color:var(--ink-2);
  border:1.5px solid var(--line-strong);box-shadow:var(--shadow-xs);
}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--xl{padding:17px 30px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn--disabled{opacity:.45;box-shadow:none;cursor:not-allowed;pointer-events:none;transform:none!important}

/* === Back link === */
.back{
  display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:800;font-size:13.5px;
  padding:8px 14px;margin:2px 0 16px;border-radius:999px;background:rgba(31,93,255,.07);
  transition:background .18s,transform .18s var(--ease);
}
.back:hover{background:rgba(31,93,255,.13);transform:translateX(-2px)}
.back svg{transform:rotate(180deg)}

/* === Panels === */
.panel{
  background:linear-gradient(180deg,#FFFFFF,#FFFDF9);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;margin-bottom:16px;
  box-shadow:var(--shadow-sm),var(--inner-hi);
}
.panel--acc{background:linear-gradient(180deg,var(--acc-soft),#fff 120%);border-color:color-mix(in srgb,var(--acc) 18%,#fff)}

/* === Hero === */
.hero{padding:6px 2px 26px}
.hero__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#FFF8E0,var(--gold-soft));color:#8A5B00;
  font-weight:800;font-size:10.5px;letter-spacing:.14em;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(201,148,18,.28);box-shadow:var(--shadow-xs),var(--inner-hi);
  margin-bottom:18px;
}
.hero__badge-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 3px rgba(255,138,31,.2)}
.hero__h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,6.2vw,46px);line-height:1.06;letter-spacing:-.015em;
  margin-bottom:14px;color:var(--ink);
}
.hero__h1 .accent{
  background:linear-gradient(180deg,transparent 62%,rgba(255,200,61,.85) 62%,rgba(255,200,61,.85) 92%,transparent 92%);
  padding:0 3px;border-radius:3px;font-style:italic;
}
.hero__sub{font-size:16.5px;color:var(--ink-2);max-width:58ch;line-height:1.6}

/* === Section headers === */
.sec-head{padding:4px 2px 16px}
.sec-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sec-h2{font-family:var(--font-display);font-weight:600;font-size:30px;letter-spacing:-.01em;line-height:1.12}
.sec-desc{font-size:14.5px;color:var(--ink-2);margin-top:8px;max-width:60ch}

/* === Mock CTA — showpiece === */
.mock-cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;padding:24px 22px;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 160% at 12% -20%,rgba(159,208,255,.35),transparent 45%),
    radial-gradient(90% 130% at 105% 120%,rgba(255,200,61,.22),transparent 50%),
    linear-gradient(135deg,#2A63FF 0%,#1745C2 58%,#12327F 100%);
  color:#fff;text-align:left;width:100%;margin-bottom:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 34px rgba(23,69,194,.35),0 4px 10px rgba(14,43,126,.3);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.mock-cta::after{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.mock-cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 20px 44px rgba(23,69,194,.42)}
.mock-cta:hover::after{left:130%}
.mock-cta:active{transform:translateY(0)}
.mock-cta__icon{
  flex:0 0 56px;height:56px;border-radius:18px;font-size:27px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--inner-hi);
}
.mock-cta__title{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.mock-cta__sub{font-size:12.5px;opacity:.85;margin-top:4px;font-weight:600;letter-spacing:.02em}
.mock-cta__arrow{
  margin-left:auto;flex:0 0 42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease),background .2s;
}
.mock-cta:hover .mock-cta__arrow{transform:translateX(3px);background:rgba(255,255,255,.28)}

/* === Section grid === */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.sec-card{
  position:relative;display:flex;flex-direction:column;padding:20px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#FFFDF8);
  border:1px solid var(--line);box-shadow:var(--shadow-sm),var(--inner-hi);
  text-align:left;min-height:158px;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.sec-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));
  opacity:0;transition:opacity .2s;
}
.sec-card:hover{
  transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 35%,#fff);
  box-shadow:0 14px 30px color-mix(in srgb,var(--acc) 16%,transparent),var(--shadow-sm);
}
.sec-card:hover::before{opacity:1}
.sec-card__icon{
  width:48px;height:48px;border-radius:15px;font-size:24px;margin-bottom:13px;
  background:linear-gradient(145deg,var(--acc-soft),color-mix(in srgb,var(--acc-soft) 60%,#fff));
  border:1px solid color-mix(in srgb,var(--acc) 15%,#fff);
  color:var(--acc);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--inner-hi);
}
.sec-card__name{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.sec-card__meta{font-size:11.5px;color:var(--ink-3);font-weight:700;margin-top:3px}
.sec-card__tasks{font-size:12px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.sec-card__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--acc)}

/* status pill (replaces rotated ribbon) */
.ribbon{
  position:absolute;top:14px;right:14px;transform:none;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:var(--gold-soft);color:#8A5B00;border:1px solid rgba(201,148,18,.3);
  box-shadow:var(--shadow-xs);
}
.ribbon--ready{
  background:linear-gradient(180deg,#F0FDF4,var(--green-soft));color:var(--green-dark);
  border-color:rgba(34,197,94,.3);
}
.ribbon--ready::before{content:"● ";font-size:8px;vertical-align:1px}

/* === Nav tiles === */
.navrow{display:flex;flex-direction:column;gap:11px;margin-bottom:8px}
.navtile{
  display:flex;align-items:center;gap:15px;padding:17px 18px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff,#FFFDF8);
  border:1px solid var(--line);box-shadow:var(--shadow-sm),var(--inner-hi);
  width:100%;text-align:left;text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.navtile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.navtile__icon{
  flex:0 0 46px;height:46px;border-radius:14px;font-size:22px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--inner-hi);
  border:1px solid var(--line);
}
.navtile__title{font-size:15.5px;font-weight:800;letter-spacing:-.005em}
.navtile__sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.navtile__arrow{margin-left:auto;color:var(--blue);transition:transform .2s var(--ease)}
.navtile:hover .navtile__arrow{transform:translateX(3px)}

/* === Lessons === */
.lesson-group{margin-bottom:30px}
.lesson-group__head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.lesson-group__dot{width:11px;height:11px;border-radius:4px;background:linear-gradient(135deg,var(--acc),var(--acc-2));box-shadow:0 2px 6px color-mix(in srgb,var(--acc) 35%,transparent)}
.lesson-group__name{font-family:var(--font-display);font-weight:600;font-size:19px}
.lesson-group__count{font-size:11.5px;font-weight:800;color:var(--ink-3);margin-left:auto;letter-spacing:.04em;text-transform:uppercase}

.vgrid{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:560px){.vgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.vgrid--dense{grid-template-columns:1fr 1fr 1fr}}

.vcard{
  border-radius:var(--r-md);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  text-align:left;width:100%;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--acc,#1F5DFF) 30%,#fff)}
.vthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#E8F1FF,#FFF6D9);overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vcard:hover .vthumb img{transform:scale(1.06)}
.vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,17,34,.35));pointer-events:none}
.vthumb__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.vthumb__play span{
  width:58px;height:58px;border-radius:50%;
  background:rgba(18,19,38,.55);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s var(--ease),background .22s;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.vcard:hover .vthumb__play span{transform:scale(1.12);background:var(--orange)}
.vthumb__badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(18,19,38,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:5px 11px;border-radius:999px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);
}
.vbody{padding:13px 15px 15px}
.vbody__title{font-size:14.5px;font-weight:800;line-height:1.35;letter-spacing:-.005em}
.vbody__sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-weight:600}
.vthumb__skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#efe9dd 25%,#f7f3ea 37%,#efe9dd 63%);background-size:400% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* === Video modal === */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,11,24,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal--open{display:flex;animation:modalIn .25s var(--ease)}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal__box{width:100%;max-width:920px;background:#000;border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
.modal__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;background:#12101b}
.modal__title{color:#fff;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal__actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.modal__link{color:#9FD0FF;font-size:12px;font-weight:700;text-decoration:none;padding:7px 13px;border:1px solid rgba(159,208,255,.3);border-radius:999px;transition:background .18s}
.modal__link:hover{background:rgba(159,208,255,.12)}
.modal__close{color:#fff;font-size:19px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background .18s}
.modal__close:hover{background:rgba(255,255,255,.22)}
.modal__frame{position:relative;aspect-ratio:16/9;background:#000}
.modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* === Roadmap task rows === */
.tasklist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.taskrow{display:flex;gap:13px;align-items:flex-start;padding:14px 15px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.taskrow__num{
  flex:0 0 28px;height:28px;border-radius:50%;
  background:linear-gradient(145deg,var(--acc,#1F5DFF),var(--acc-2,#4D82FF));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  box-shadow:0 3px 8px color-mix(in srgb,var(--acc,#1F5DFF) 30%,transparent);
}
.taskrow__label{font-weight:800;font-size:14.5px}
.taskrow__desc{font-size:13px;color:var(--ink-2);margin-top:2px}
.soon{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A5B00;background:var(--gold-soft);border:1px solid rgba(201,148,18,.25);padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:2px}

/* === Footer === */
.footer{margin-top:30px;display:flex;flex-direction:column;gap:11px}
.footer__cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;padding:20px;text-decoration:none;
  background:linear-gradient(135deg,#FFA149,var(--orange) 55%,#F0780A);color:#fff;border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px rgba(255,138,31,.35);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.footer__cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 34px rgba(255,138,31,.44)}
.footer__cta-text{flex:1}
.footer__cta-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.14em;opacity:.9}
.footer__cta-title{font-family:var(--font-display);font-weight:600;font-size:19px;margin-top:4px;letter-spacing:-.01em}
.footer__cta-sub{font-size:12px;opacity:.88;margin-top:3px}
.footer__cta-arrow{flex:0 0 40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.footer__site{
  display:flex;align-items:center;gap:12px;padding:15px 17px;text-decoration:none;
  background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:var(--r-md);
  transition:box-shadow .2s,transform .2s var(--ease);
}
.footer__site:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.footer__logo{width:33px;height:33px;border-radius:9px;object-fit:contain}
.footer__site-label{font-size:10.5px;color:var(--ink-3);font-weight:700}
.footer__site-url{font-size:14px;font-weight:800;color:var(--blue)}
.footer__site>div{flex:1}

/* === Floating dock tab bar === */
.tabbar{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:95;
  display:flex;gap:4px;padding:7px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.8);border-radius:999px;
  box-shadow:0 12px 34px rgba(23,24,48,.16),var(--inner-hi);
  margin-bottom:env(safe-area-inset-bottom);
}
.tabbtn{
  display:flex;flex-direction:column;align-items:center;gap:2.5px;
  padding:8px 17px;border-radius:999px;color:var(--ink-3);
  font-size:9.5px;font-weight:800;letter-spacing:.05em;min-width:60px;
  transition:color .2s,background .2s,transform .2s var(--ease);
}
.tabbtn svg{width:21px;height:21px;stroke:currentColor}
.tabbtn:hover{color:var(--ink-2)}
.tabbtn--active{
  color:var(--blue);
  background:linear-gradient(180deg,rgba(31,93,255,.13),rgba(31,93,255,.07));
  box-shadow:inset 0 0 0 1px rgba(31,93,255,.15);
}

/* === Task cards (wtask) === */
.wtask{
  display:flex;align-items:center;gap:15px;padding:19px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff,#FFFDF8);
  border:1px solid var(--line);box-shadow:var(--shadow-sm),var(--inner-hi);
  width:100%;text-align:left;margin-bottom:11px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.wtask:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--acc,#1F5DFF) 30%,#fff)}
.wtask__icon{
  flex:0 0 50px;height:50px;border-radius:16px;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);box-shadow:var(--inner-hi);
}
.wtask__name{font-size:16px;font-weight:800;letter-spacing:-.005em}
.wtask__sub{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.wtask__meta{font-size:11px;color:var(--ink-3);font-weight:800;margin-top:6px;letter-spacing:.03em;text-transform:uppercase}
.wtask__body{flex:1;min-width:0}

/* === Playbar & timer === */
.playbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.playbar__prog{font-weight:800;font-size:14px}
.playbar__score{font-size:13px;font-weight:700;color:var(--ink-2)}
.timerchip{
  margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;
  color:var(--blue-dark);background:linear-gradient(180deg,#F2F7FF,var(--blue-soft));
  border:1px solid rgba(31,93,255,.18);padding:6px 15px;border-radius:999px;box-shadow:var(--shadow-xs),var(--inner-hi);
}
.timerchip--over{color:#B42318;background:linear-gradient(180deg,#FFF5F5,#FFECEC);border-color:rgba(229,72,77,.3);animation:tpulse 1s infinite}
@keyframes tpulse{50%{opacity:.65}}
.playbar--sticky{
  position:sticky;top:78px;z-index:50;
  background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:11px 15px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-md);margin-bottom:14px;
}

/* === Build a Sentence === */
.bas-hint{font-size:13px;font-weight:800;color:var(--ink-2);margin-bottom:14px;letter-spacing:.01em}
.bas-slots{
  display:flex;flex-wrap:wrap;gap:9px;min-height:56px;padding:14px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));border:2px dashed var(--line-strong);margin-bottom:15px;
}
.bas-slot{min-width:78px;min-height:42px;border-radius:12px;border:2px dashed rgba(20,21,39,.16);background:rgba(255,255,255,.6)}
.bas-slot--filled{
  border:none;background:linear-gradient(180deg,#4D82FF,var(--blue));color:#fff;font-weight:700;font-size:14px;
  padding:9px 14px;cursor:pointer;font-family:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 3px 8px rgba(31,93,255,.3);
  transition:transform .15s var(--ease),filter .15s;
}
.bas-slot--filled:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bas-bank{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:17px}
.bas-tile{
  padding:11px 16px;border-radius:13px;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,#fff,#FAF7F0);font-weight:700;font-size:14px;font-family:inherit;
  box-shadow:var(--shadow-sm),var(--inner-hi);cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s;
}
.bas-tile:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--shadow-md)}
.bas-tile:active{transform:translateY(0) scale(.98)}
.bas-tile--used{opacity:.22;pointer-events:none;box-shadow:none}
.bas-btns{display:flex;flex-direction:column;gap:9px}
.bas-fb{border-radius:var(--r-sm);padding:15px 17px;margin-bottom:14px;font-size:14px;box-shadow:var(--shadow-xs)}
.bas-fb--ok{background:linear-gradient(180deg,#F0FDF4,var(--green-soft));border:1px solid rgba(34,197,94,.3)}
.bas-fb--no{background:linear-gradient(180deg,#FFF7F7,var(--red-soft));border:1px solid rgba(229,72,77,.25)}
.bas-fb__head{font-weight:800;letter-spacing:-.005em}
.bas-fb--ok .bas-fb__head{color:var(--green-dark)}
.bas-fb--no .bas-fb__head{color:#B42318}
.bas-fb__ans{margin-top:6px;font-style:italic;color:var(--ink-2)}
.bas-fb__decoy{margin-top:6px;font-size:13px;color:#8A5B00}
.bas-fb__decoy--ok{color:var(--green-dark)}

/* === Result cards === */
.resultcard{
  background:linear-gradient(180deg,#fff,#FFFCF6);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px 24px;text-align:center;box-shadow:var(--shadow-lg),var(--inner-hi);margin-top:18px;margin-bottom:16px;
}
.resultcard__emoji{font-size:52px;margin-bottom:10px;filter:drop-shadow(0 6px 12px rgba(23,24,48,.18))}
.resultcard__score{font-family:var(--font-display);font-size:46px;font-weight:600;letter-spacing:-.02em}
.resultcard__bands{display:flex;gap:12px;justify-content:center;margin-top:18px}
.bandbox{
  background:linear-gradient(180deg,#F2F7FF,var(--blue-soft));border:1px solid rgba(31,93,255,.15);
  border-radius:var(--r-md);padding:14px 22px;min-width:126px;box-shadow:var(--shadow-xs),var(--inner-hi);
}
.bandbox__num{font-family:var(--font-display);font-size:27px;font-weight:600;color:var(--blue)}
.bandbox__lbl{font-size:9.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.resultcard__note{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.5}

/* === Writing prompts === */
.scenariobox{
  background:linear-gradient(160deg,#FFF4CE,#FFF9E6 70%);border:1px solid rgba(201,148,18,.25);
  border-radius:var(--r-md);padding:20px;margin-bottom:13px;box-shadow:var(--shadow-xs),var(--inner-hi);
}
.scenariobox__label{font-size:10px;font-weight:800;letter-spacing:.12em;color:#8A5B00;margin-bottom:8px}
.scenariobox p{font-size:14.5px;line-height:1.6}
.bulletlist{counter-reset:bl;margin-top:8px}
.bulletlist li{font-size:14px;font-weight:600;padding:6px 0 6px 28px;position:relative}
.bulletlist li::before{content:counter(bl) ".";counter-increment:bl;position:absolute;left:2px;font-weight:800;color:var(--orange)}
.postbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:11px;box-shadow:var(--shadow-xs)}
.postbox__name{font-size:11px;font-weight:800;color:var(--blue);margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase}
.postbox p{font-size:14px;line-height:1.6;color:var(--ink-2)}

.wtext{
  width:100%;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:16px;
  font-family:inherit;font-size:15px;line-height:1.65;resize:vertical;background:#fff;color:var(--ink);
  box-shadow:var(--shadow-xs);transition:border-color .18s,box-shadow .18s;
}
.wtext:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,93,255,.12)}
.wtext:disabled{background:var(--bg-2);color:var(--ink-2)}
.wmeta{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--ink-3);margin:9px 2px 15px;letter-spacing:.02em}
.modelbox{background:linear-gradient(180deg,#F0FDF4,var(--green-soft));border:1px solid rgba(34,197,94,.25);border-radius:var(--r-md);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-xs)}
.modelbox__label{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--green-dark);margin-bottom:9px}
.modelbox__text{font-family:inherit;font-size:14px;line-height:1.65;white-space:pre-wrap;color:var(--ink)}
.selfcheck{border-top:1px solid var(--line);padding-top:14px}
.selfcheck__title{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.check-line{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;border-radius:12px;font-size:14px;font-weight:600;transition:background .15s}
.check-line:hover{background:var(--blue-soft)}
.check-line__box{flex:0 0 21px;height:21px;border-radius:7px;border:2px solid var(--line-strong);background:#fff;position:relative;transition:background .15s,border-color .15s}
.check-line--on .check-line__box{background:linear-gradient(180deg,#4D82FF,var(--blue));border-color:var(--blue)}
.check-line--on .check-line__box::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.check-line--on{color:var(--ink-3)}

/* === Reading === */
.ctw-para{font-size:16px;line-height:2.3;color:var(--ink)}
.ctw-word{display:inline-flex;align-items:baseline;white-space:nowrap;margin:0 1px}
.ctw-given{font-weight:800;color:var(--blue-dark)}
.ctw-input{
  border:none;border-bottom:2px solid var(--blue);background:var(--blue-soft);
  font-family:inherit;font-size:15px;font-weight:700;color:var(--blue-dark);
  padding:2px 5px;border-radius:6px 6px 0 0;min-width:34px;outline:none;transition:background .15s,box-shadow .15s;
}
/* longhand background-color only — the shorthand `background` wiped the
   background-image that draws the per-letter dashes, so the letter count
   vanished the moment the student clicked into the word */
.ctw-input:focus{background-color:#DCE9FF;box-shadow:0 2px 0 var(--blue)}
.ctw-input--ok{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
.ctw-input--no{border-color:var(--red);background:var(--red-soft);color:#B42318}
.ctw-correct{font-size:12px;font-weight:800;color:var(--green-dark);margin-left:4px}

.readtext{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin-bottom:14px;box-shadow:var(--shadow-sm),var(--inner-hi)}
.readtext--daily{background:linear-gradient(180deg,#FFFAF0,#fff)}
.readtext__tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dark);background:var(--orange-soft);padding:5px 12px;border-radius:999px;margin-bottom:11px;border:1px solid rgba(199,107,18,.2)}
.readtext__title{font-family:var(--font-display);font-weight:600;font-size:21px;margin-bottom:11px;letter-spacing:-.01em}
.readtext__body{font-family:inherit;font-size:14.5px;line-height:1.7;white-space:pre-wrap;color:var(--ink)}
.readtext__prose{font-size:15px;line-height:1.75;color:var(--ink)}

.mcq-block{margin-bottom:22px}
.mcq-block:last-of-type{margin-bottom:8px}
.mcq-q{font-size:15px;font-weight:800;margin-bottom:10px;line-height:1.45;letter-spacing:-.005em}
.mcq-opts{display:flex;flex-direction:column;gap:9px}
.mcq-opt{
  display:flex;align-items:flex-start;gap:11px;text-align:left;width:100%;padding:13px 15px;
  border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:14px;line-height:1.45;color:var(--ink);
  box-shadow:var(--shadow-xs);transition:border-color .15s,background .15s,transform .15s var(--ease);
}
.mcq-opt:hover:not(:disabled){border-color:var(--blue);transform:translateX(2px)}
.mcq-opt__mark{
  flex:0 0 23px;height:23px;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--ink-3);
  transition:background .15s,color .15s;
}
.mcq-opt--sel{border-color:var(--blue);background:var(--blue-soft)}
.mcq-opt--sel .mcq-opt__mark{background:linear-gradient(180deg,#4D82FF,var(--blue));color:#fff;border-color:var(--blue)}
.mcq-opt--correct{border-color:var(--green);background:var(--green-soft)}
.mcq-opt--correct .mcq-opt__mark{background:var(--green);color:#fff;border-color:var(--green)}
.mcq-opt--wrong{border-color:var(--red);background:var(--red-soft)}
.mcq-opt--wrong .mcq-opt__mark{background:var(--red);color:#fff;border-color:var(--red)}
.mcq-opt:disabled{cursor:default}

/* === Listening & Speaking === */
.lplayer{text-align:center}
.lplay{
  display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;
  background:linear-gradient(180deg,#4D82FF,var(--blue) 55%,#1A4FE0);color:#fff;font-weight:800;font-size:16px;font-family:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px rgba(31,93,255,.35);
  transition:transform .18s var(--ease),box-shadow .18s,filter .18s;cursor:pointer;
}
.lplay:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px rgba(31,93,255,.42)}
.lplay:active{transform:translateY(1px)}
.lplay--replayed{background:linear-gradient(180deg,#A6ABBD,#8B90A4);box-shadow:var(--shadow-sm)}
.lplay__icon{font-size:14px}
.lplay__note{font-size:11px;font-weight:800;color:var(--ink-3);margin-top:9px;letter-spacing:.04em;text-transform:uppercase}

/* === TOEFL Answer Booster === */
.boostrow{border-bottom:1px solid var(--line)}
.boostrow:last-child{border-bottom:none}
.boostrow summary{
  display:flex;align-items:center;gap:10px;padding:12px 4px;cursor:pointer;list-style:none;
  font-size:14.5px;transition:background .15s;border-radius:8px;
}
.boostrow summary::-webkit-details-marker{display:none}
.boostrow summary:hover{background:var(--bg)}
.boostrow__basic{font-weight:700;color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(229,72,77,.5);text-decoration-thickness:2px}
.boostrow__arrow{color:var(--orange);font-weight:800}
.boostrow__toefl{font-weight:800;color:var(--blue-dark)}
.boostrow__ex{
  font-size:13px;color:var(--ink-2);font-style:italic;line-height:1.55;
  background:var(--gold-soft);border-radius:10px;padding:9px 13px;margin:0 4px 12px;
}
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.matchcol{display:flex;flex-direction:column;gap:8px}
.matchbtn{
  padding:12px 10px;border-radius:12px;border:1.5px solid var(--line-strong);
  background:#fff;font-weight:700;font-size:13.5px;font-family:inherit;cursor:pointer;
  transition:transform .15s var(--ease),border-color .15s,background .15s;text-align:center;
}
.matchbtn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--blue)}
.matchbtn--sel{border-color:var(--blue);background:var(--blue-soft)}
.matchbtn--done{border-color:var(--green);background:var(--green-soft);color:var(--green-dark);opacity:.75;pointer-events:none}
.matchbtn--wrong{border-color:var(--red);background:var(--red-soft);animation:mshake .3s}
@keyframes mshake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* === English Level Evaluator === */
.evskill{margin-bottom:13px}
.evskill__row{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.evskill__row b{color:var(--ink)}
.evskill__bar{height:9px;border-radius:999px;background:rgba(20,21,39,.08);overflow:hidden}
.evskill__bar span{display:block;height:100%;border-radius:999px;transition:width .6s var(--ease)}

/* === Difficulty levels (practice sections) === */
.lvlpanel{
  background:linear-gradient(180deg,#fff,#FFFDF8);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px;
  box-shadow:var(--shadow-xs),var(--inner-hi);
}
.lvlpanel__label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.lvlrow{display:flex;gap:8px;flex-wrap:wrap}
.lvlchip{
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:13px;font-family:inherit;
  background:#fff;border:1.5px solid var(--line-strong);color:var(--ink-2);cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s,background .15s;
}
.lvlchip:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.lvlchip--on{color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.lvlchip--easy.lvlchip--on{background:linear-gradient(180deg,#34D97B,var(--green) 60%,#18A34A)}
.lvlchip--medium.lvlchip--on{background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F)}
.lvlchip--hard.lvlchip--on{background:linear-gradient(180deg,#FF6B6E,var(--red) 60%,#C93A3E)}
.lvlchip--all.lvlchip--on{background:linear-gradient(180deg,#4D82FF,var(--blue) 55%,#1A4FE0)}
.lvlpanel__desc{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.lvlbadge{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2.5px 9px;border-radius:999px;vertical-align:1.5px;margin-right:4px;
}
.lvlbadge--easy{background:var(--green-soft);color:var(--green-dark);border:1px solid rgba(34,197,94,.3)}
.lvlbadge--medium{background:var(--orange-soft);color:var(--orange-dark);border:1px solid rgba(199,107,18,.3)}
.lvlbadge--hard{background:var(--red-soft);color:#B42318;border:1px solid rgba(229,72,77,.3)}

/* === Reusable audio player (practice sections) === */
.aplayer{
  background:linear-gradient(180deg,#F2F7FF,var(--blue-soft));
  border:1px solid rgba(31,93,255,.16);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--shadow-xs),var(--inner-hi);
  max-width:420px;margin:0 auto;
}
.aplayer__label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:8px;text-align:center}
.aplayer__controls{display:flex;align-items:center;justify-content:center;gap:10px}
.apbtn{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue-dark);border:1px solid rgba(31,93,255,.2);
  box-shadow:var(--shadow-xs),var(--inner-hi);cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s,background .15s;
  touch-action:manipulation;
}
.apbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.apbtn:active{transform:translateY(1px)}
.apbtn--main{
  width:54px;height:54px;
  background:linear-gradient(180deg,#4D82FF,var(--blue) 55%,#1A4FE0);color:#fff;border:none;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(31,93,255,.35);
}
.aplayer--playing .apbtn--main{background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(255,138,31,.38)}
.aplayer__scrub{display:flex;align-items:center;gap:10px;margin-top:11px}
.aplayer__time{font-size:11.5px;font-weight:800;color:var(--blue-dark);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.aplayer__bar{
  flex:1;-webkit-appearance:none;appearance:none;height:22px;background:transparent;
  cursor:pointer;touch-action:none;min-width:0;
}
.aplayer__bar::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:rgba(31,93,255,.18)}
.aplayer__bar::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;margin-top:-6px;
  background:linear-gradient(180deg,#4D82FF,var(--blue));border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(31,93,255,.4);
}
.aplayer__bar::-moz-range-track{height:7px;border-radius:999px;background:rgba(31,93,255,.18)}
.aplayer__bar::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,#4D82FF,var(--blue));border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(31,93,255,.4);
}
.aplayer__note{font-size:10.5px;font-weight:800;color:var(--ink-3);margin-top:9px;letter-spacing:.04em;text-transform:uppercase;text-align:center}

.transcript{margin-top:16px;background:linear-gradient(180deg,#F0F7FF,var(--sky-soft));border:1px solid rgba(31,93,255,.15);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-xs)}
.transcript__label{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--blue-dark);margin-bottom:9px}
.tr-line{font-size:14px;line-height:1.65;margin-bottom:7px}
.tr-line b{color:var(--blue-dark)}

.lr-stage{padding:12px 0 6px}
.lr-stage__hint{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:16px}
.lr-reveal{background:linear-gradient(160deg,#FFF4CE,#FFF9E6);border:1px solid rgba(201,148,18,.25);border-radius:var(--r-md);padding:18px;margin-bottom:15px;box-shadow:var(--shadow-xs)}
.lr-reveal__label{font-size:9.5px;font-weight:800;letter-spacing:.13em;color:#8A5B00;margin-bottom:7px}
.lr-reveal__text{font-family:var(--font-display);font-size:19px;font-weight:600;font-style:italic;line-height:1.4}
.lr-compare{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.recbtn{
  display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;
  background:linear-gradient(180deg,#FF6B6E,var(--red) 60%,#C93A3E);color:#fff;font-weight:800;font-size:16px;font-family:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 18px rgba(229,72,77,.38);cursor:pointer;
  transition:transform .18s var(--ease);
}
.recbtn:active{transform:translateY(1px)}
.recbtn--live{cursor:default;background:linear-gradient(180deg,#23243B,#141527);box-shadow:0 6px 18px rgba(20,21,39,.4)}
.recbtn__dot{width:12px;height:12px;border-radius:50%;background:#fff}
.recbtn__dot--pulse{background:var(--red);animation:recpulse 1s infinite;box-shadow:0 0 0 4px rgba(229,72,77,.25)}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}
.mic-warn{font-size:12.5px;font-weight:700;color:#8A5B00;background:var(--gold-soft);border:1px solid rgba(201,148,18,.25);border-radius:11px;padding:9px 13px;margin-top:11px;display:inline-block}

.int-q{font-family:var(--font-display);font-size:19px;font-weight:600;font-style:italic;line-height:1.45;color:var(--ink)}

/* === Mock === */
.mockhr{border:none;border-top:1.5px dashed var(--line-strong);margin:22px 0}
.mockhist{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:8px;box-shadow:var(--shadow-xs)}
.mockhist__date{font-size:13px;font-weight:700;color:var(--ink-2)}
.mockhist__bands{font-size:13px;font-weight:800;color:var(--blue)}
.reportgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.reportbox{
  background:linear-gradient(180deg,#fff,#FFFCF6);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm),var(--inner-hi);
}
.reportbox__head{font-size:12.5px;font-weight:800;color:var(--ink-2);letter-spacing:.02em}
.reportbox__band{font-family:var(--font-display);font-size:38px;font-weight:600;color:var(--blue);margin-top:5px;letter-spacing:-.02em}
.reportbox__old{font-size:10.5px;font-weight:800;color:var(--ink-3);letter-spacing:.03em}
.reportbox__detail{font-size:11.5px;color:var(--ink-3);margin-top:7px;line-height:1.45}
.reviewbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow-xs)}
.reviewbox summary{padding:15px 18px;font-weight:800;font-size:14px;cursor:pointer;list-style:none;transition:background .15s}
.reviewbox summary:hover{background:var(--bg)}
.reviewbox summary::-webkit-details-marker{display:none}
.reviewbox summary::before{content:"▸ ";color:var(--orange)}
.reviewbox[open] summary::before{content:"▾ "}
.reviewbox__row{padding:11px 18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}

/* === Responsive === */
@media(min-width:768px){
  .shell{padding:0 28px 136px}
  .grid{gap:16px}
  .sec-h2{font-size:33px}
}
@media(max-width:420px){
  .reportgrid{grid-template-columns:1fr 1fr}
  .tabbtn{padding:8px 13px;min-width:52px}
}

/* === A11y & motion === */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* view transitions */
.view{animation:rise .32s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* === Tip callout === */
.tip{
  display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,#FFF8E0,var(--gold-soft));border:1px solid rgba(201,148,18,.25);
  box-shadow:var(--shadow-xs),var(--inner-hi);
}
.tip__label{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dark);padding-top:3px;flex-shrink:0}
.tip__text{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ═══════════════════════════════════════════════════
   REFERENCE REDESIGN — mobile-app shell & home cards
   ═══════════════════════════════════════════════════ */

/* Page backdrop (outside the phone) */
body{
  background:
    radial-gradient(900px 600px at 85% 0%,rgba(159,208,255,.35),transparent 55%),
    radial-gradient(800px 600px at 0% 100%,rgba(255,200,61,.28),transparent 55%),
    linear-gradient(160deg,#EDF3FC 0%,#F7F3EC 55%,#FBEFE0 100%);
  min-height:100vh;
}
.app{background:none;min-height:auto}

/* The phone shell */
.shell{
  max-width:600px;margin:26px auto 120px;padding:22px 22px 40px;
  background:
    radial-gradient(560px 380px at 100% 0%,rgba(159,208,255,.22),transparent 60%),
    radial-gradient(560px 420px at 0% 100%,rgba(255,170,80,.16),transparent 60%),
    linear-gradient(175deg,#FDF8EF 0%,#F9EFDE 100%);
  border-radius:40px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 40px 90px rgba(23,24,48,.16),0 6px 20px rgba(23,24,48,.06),var(--inner-hi);
}
@media(max-width:640px){
  .shell{margin:10px auto 110px;padding:16px 16px 34px;border-radius:30px}
}

/* Header inside the shell — clean, no card */
.topbar{
  position:sticky;top:10px;margin:0 0 22px;padding:10px 6px;
  background:rgba(251,244,231,.85);border:none;border-radius:18px;
  box-shadow:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand__logo{width:46px;height:46px;border-radius:50%}
.brand__name{font-size:17px;font-weight:800}
.brand__tag{font-size:9.5px;color:#7B86B8;letter-spacing:.18em}
.topbar__trial{padding:12px 22px;font-size:13.5px;border-radius:999px}
.topbar__trial::after{content:" ›";font-size:14px}

/* Hero */
.hero{padding:2px 2px 24px}
.hero__badge{gap:6px;font-size:10.5px;letter-spacing:.13em;color:#8A5B00}
.hero__h1{font-weight:700;font-size:clamp(35px,7vw,44px);line-height:1.05}
.hero__h1 .accent{
  color:var(--orange);font-style:italic;background:none;padding:0 1px;
  border-bottom:5px solid rgba(255,200,61,.9);
}
.hero__sub{font-size:15.5px}

/* Mock CTA */
.mock-cta{padding:22px 20px;border-radius:24px;gap:15px}
.mock-cta__body{flex:1;min-width:0}
.mock-cta__badge{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  padding:4px 11px;border-radius:999px;margin-bottom:7px;
}
.mock-cta__icon{background:rgba(255,255,255,.92);border-radius:16px;font-size:26px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.mock-cta__title{font-size:22px}
.mock-cta__sub{font-size:12px;opacity:.92;margin-top:6px}

/* Row heading with link */
.rowhead{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 13px}
.link-more{
  display:inline-flex;align-items:center;gap:5px;color:var(--blue);
  font-size:13px;font-weight:800;transition:transform .18s var(--ease);
}
.link-more:hover{transform:translateX(2px)}

/* Section cards — reference layout */
.sec-card{padding:18px;min-height:auto;border-radius:24px}
.sec-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px}
.sec-card__top .ribbon{position:static;transform:none}
.sec-card__icon{
  width:52px;height:52px;border-radius:50%;font-size:24px;margin-bottom:0;
  background:var(--acc-soft);border:none;box-shadow:var(--inner-hi),0 3px 10px color-mix(in srgb,var(--acc) 12%,transparent);
}
.sec-card__name{font-size:18px}
.sec-card__meta{font-size:12.5px;color:var(--ink-2);font-weight:700;margin-top:4px}
.sec-card__barrow{display:flex;align-items:center;gap:9px;margin-top:13px}
.sec-card__bar{flex:1;height:7px;border-radius:999px;background:rgba(20,21,39,.08);overflow:hidden}
.sec-card__fill{display:block;height:100%;border-radius:999px;transition:width .5s var(--ease)}
.acc-reading   .sec-card__fill{background:linear-gradient(90deg,#1F5DFF,#4D82FF)}
.acc-listening .sec-card__fill{background:linear-gradient(90deg,#F27B0C,#FF9E3D)}
.acc-speaking  .sec-card__fill{background:linear-gradient(90deg,#E9B10E,#FFC83D)}
.acc-writing   .sec-card__fill{background:linear-gradient(90deg,#1745C2,#3E6BE8)}
.sec-card__pct{font-size:11.5px;font-weight:800;color:var(--ink-3);min-width:32px;text-align:right}
.sec-card__foot{padding-top:13px;color:var(--blue);font-size:13.5px}
.acc-listening .sec-card__foot,.acc-speaking .sec-card__foot{color:var(--blue)}

/* Nav tiles */
.navtile{border-radius:22px;padding:18px}
.navtile__icon{border-radius:16px}

/* Footer CTA — trophy + white arrow circle */
.footer__cta{border-radius:26px;padding:22px 20px;gap:15px}
.footer__cta-trophy{
  flex:0 0 56px;height:56px;border-radius:18px;font-size:30px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--inner-hi);
}
.footer__cta-arrow{background:#fff;border:none;box-shadow:0 4px 12px rgba(160,80,0,.3)}
.footer__site{border-radius:20px;padding:16px 18px}
.footer__globe{
  flex:0 0 46px;height:46px;border-radius:50%;font-size:22px;
  background:var(--blue-soft);display:flex;align-items:center;justify-content:center;
}

/* Bottom nav — white iOS pill, orange active w/ indicator */
.tabbar{
  bottom:18px;padding:10px 12px;gap:6px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,1);
  box-shadow:0 18px 44px rgba(23,24,48,.18),0 2px 8px rgba(23,24,48,.06);
}
.tabbtn{position:relative;color:#7B86B8;font-size:10.5px;font-weight:800;padding:9px 19px;min-width:64px;gap:3px}
.tabbtn:hover{color:#5A6494}
.tabbtn--active{color:var(--orange);background:none;box-shadow:none}
.tabbtn--active svg{stroke:var(--orange)}
.tabbtn--active::after{
  content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:999px;background:var(--orange);
}

/* === Complete-the-Words: one dash per missing letter === */
.ctw-input--slots{
  --cell:1ch;           /* dash width = one monospace character */
  --gap:.55ch;          /* space between dashes */
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:16.5px;font-weight:700;
  letter-spacing:var(--gap);
  width:calc(var(--n) * (var(--cell) + var(--gap)) + 2px);
  min-width:0;
  padding:2px 0 4px;
  border:none;border-radius:0;
  background-color:transparent;
  background-image:repeating-linear-gradient(
    90deg,
    currentColor 0,
    currentColor var(--cell),
    transparent var(--cell),
    transparent calc(var(--cell) + var(--gap))
  );
  background-size:calc(100% - 2px) 2.5px;
  background-position:1px 100%;
  background-repeat:no-repeat;
  color:var(--blue-dark);
  caret-color:var(--blue);
  box-shadow:none;
}
.ctw-input--slots{appearance:none;-webkit-appearance:none}
.ctw-input--slots:focus,
.ctw-input--slots:focus-visible{
  outline:none!important;
  /* soft tint (not a solid rectangle) so the active word is visible
     while the letter-count dashes stay on screen during typing */
  background-color:rgba(31,93,255,.08);
  border-radius:6px 6px 0 0;
  box-shadow:none;
}
.ctw-input--slots.ctw-input--ok{color:var(--green-dark);background-color:transparent}
.ctw-input--slots.ctw-input--no{color:#D92D20;background-color:transparent}
.ctw-input--slots:disabled{opacity:1}

/* === 3D icon tiles === */
.i3d{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.sec-card__icon--img,.navtile__icon--img,.mock-cta__icon--img,
.footer__cta-trophy--img,.footer__globe--img{
  background:none!important;border:none!important;padding:0!important;
  overflow:hidden;box-shadow:0 5px 14px rgba(23,24,48,.14);
}
.sec-card__icon--img{width:54px;height:54px;border-radius:17px}
.navtile__icon--img{border-radius:15px}
.mock-cta__icon--img{border-radius:17px;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.footer__cta-trophy--img{border-radius:17px}
.footer__globe--img{border-radius:15px}

/* Reading hub 3D icons */
.wtask__icon--img{background:none!important;border:none!important;padding:0!important;overflow:hidden;border-radius:16px;box-shadow:0 5px 14px rgba(23,24,48,.14)}
.h2icon{display:inline-block;width:38px;height:38px;object-fit:cover;border-radius:11px;vertical-align:-7px;margin-right:4px;box-shadow:0 3px 8px rgba(23,24,48,.14)}

/* === AI Coach feedback === */
.fbk{background:linear-gradient(180deg,#fff,#FFFCF4);border:1.5px solid rgba(201,148,18,.35);border-radius:var(--r-lg);padding:20px;margin:14px 0;box-shadow:var(--shadow-md),var(--inner-hi);text-align:left;animation:rise .3s var(--ease)}
.fbk__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.fbk__coach{font-weight:800;font-size:15px;color:var(--ink)}
.fbk__band{background:linear-gradient(180deg,#4D82FF,var(--blue));color:#fff;border-radius:14px;padding:8px 16px;text-align:center;box-shadow:0 4px 10px rgba(31,93,255,.3)}
.fbk__band span{font-family:var(--font-display);font-size:22px;font-weight:600;display:block;line-height:1}
.fbk__band small{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.fbk__summary{font-size:14.5px;line-height:1.6;font-weight:600;margin-bottom:14px}
.fbk__sec{margin-bottom:12px}
.fbk__label{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px}
.fbk-li{font-size:13.5px;line-height:1.55;padding:6px 0 6px 22px;position:relative;color:var(--ink-2)}
.fbk-li--plus::before{content:"✓";position:absolute;left:2px;color:var(--green-dark);font-weight:800}
.fbk-li--fix::before{content:"→";position:absolute;left:0;color:var(--orange-dark);font-weight:800}
.fbk__tip{background:var(--gold-soft);border:1px solid rgba(201,148,18,.3);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;font-weight:700;line-height:1.5;margin-bottom:10px}
.fbk__tip .fbk__label{color:#8A5B00;margin-bottom:4px}
.fbk__next{font-size:13px;font-weight:700;color:var(--blue-dark);border-top:1px solid var(--line);padding-top:10px}
.fbk--loading{text-align:center}
.fbk__dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.fbk__dots span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:fbkb 1s infinite}
.fbk__dots span:nth-child(2){animation-delay:.15s}
.fbk__dots span:nth-child(3){animation-delay:.3s}
@keyframes fbkb{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
.matchchip{display:inline-block;background:var(--blue-soft);border:1px solid rgba(31,93,255,.2);color:var(--blue-dark);font-size:13.5px;font-weight:700;border-radius:999px;padding:8px 16px;margin-bottom:14px}

/* ═══════════════════════════════════════════════════
   SELF-GUIDED COURSE — dashboard, lessons, step bar
   ═══════════════════════════════════════════════════ */

/* Dashboard header + pace chip */
.cdash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:4px 2px 0}
.cpace{font-size:11px;font-weight:800;letter-spacing:.03em;padding:7px 13px;border-radius:999px;white-space:nowrap}
.cpace--ok{background:var(--green-soft);color:var(--green-dark);border:1px solid rgba(34,197,94,.3)}
.cpace--warn{background:var(--gold-soft);color:#8A5B00;border:1px solid rgba(201,148,18,.3)}

/* Course progress bar */
.cprog{margin-bottom:20px}
.cprog__bar{height:11px;border-radius:999px;background:rgba(20,21,39,.08);overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,21,39,.06)}
.cprog__bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .6s var(--ease)}
.cprog__lbl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--ink-3);margin-top:7px}

/* Week accordions + items */
.cweek summary{font-size:15px}
.cweek__count{float:right;font-size:11.5px;color:var(--ink-3);font-weight:800;margin-left:auto}
.cweek__items{padding:6px 12px 14px}
.cweek__items .wtask{margin-bottom:8px;padding:14px 15px}
.citem--done{opacity:.72}
.citem--done .wtask__icon{color:var(--green-dark)}
.citem--locked{opacity:.5;pointer-events:none;box-shadow:none;transform:none!important}
.citem--next{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,31,.15),var(--shadow-sm)}

/* Lesson steps */
.cstep{padding:16px 0;border-bottom:1px dashed var(--line-strong)}
.cstep:last-child{border-bottom:none;padding-bottom:4px}
.cstep:first-child{padding-top:2px}
.cstep__row{display:flex;gap:14px;align-items:flex-start}
.cstep__num{
  flex:0 0 30px;height:30px;border-radius:50%;font-size:13px;font-weight:800;
  background:linear-gradient(145deg,var(--blue),#4D82FF);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(31,93,255,.28);
}
.cstep--done .cstep__num{background:linear-gradient(145deg,var(--green),#4ADE80);box-shadow:0 3px 8px rgba(34,197,94,.28)}
.cstep--locked .cstep__num{background:var(--bg-2);color:var(--ink-3);box-shadow:none}
.cstep--locked{opacity:.55}
.cstep__body{flex:1;min-width:0}
.cstep__kind{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cstep__title{font-size:15px;font-weight:800;margin-top:2px;letter-spacing:-.005em}
.cstep--done .cstep__title{color:var(--ink-2)}
.cstep__note{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.cstep__text{
  font-size:13.5px;line-height:1.65;color:var(--ink);margin-top:10px;
  background:linear-gradient(160deg,#FFF8E6,#FFFDF6);border:1px solid rgba(201,148,18,.22);
  border-radius:var(--r-sm);padding:14px 16px;
}

/* Suggested path highlight */
.wtask--sug{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14),var(--shadow-sm)}

/* Course step bar — fixed above the tab bar, survives re-renders */
#courseBar{display:none}
#courseBar.cbar--on{
  display:flex;align-items:center;gap:10px;
  position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:96;
  width:min(560px,calc(100vw - 24px));
  background:linear-gradient(135deg,#23243B,#141527);color:#fff;
  border-radius:18px;padding:10px 10px 10px 16px;
  box-shadow:0 14px 36px rgba(20,21,39,.4),0 1px 0 rgba(255,255,255,.08) inset;
  animation:rise .3s var(--ease);
}
.cbar__back{
  flex:0 0 34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.cbar__back:hover{background:rgba(255,255,255,.22)}
.cbar__title{flex:1;min-width:0;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar__wait{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap;padding-right:6px}
.cbar__done{
  flex-shrink:0;border-radius:999px;padding:10px 16px;font-size:12.5px;font-weight:800;font-family:inherit;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;
  transition:background .18s,transform .18s var(--ease);
}
.cbar__done:hover{background:rgba(255,255,255,.24)}
.cbar__done--ok{
  background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F);border:none;
  box-shadow:0 4px 12px rgba(255,138,31,.45);animation:cbarPulse 1.6s infinite;
}
@keyframes cbarPulse{50%{box-shadow:0 4px 20px rgba(255,138,31,.75)}}
@media(max-width:480px){
  #courseBar.cbar--on{bottom:78px;padding-left:12px}
  .cbar__title{font-size:11.5px}
}

/* Combined dashboard */
.dhead{padding:6px 2px 18px}
.dchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.dchip{
  font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.75);border:1px solid var(--line-strong);color:var(--ink-2);
}
.dchip--hot{background:var(--orange-soft);color:var(--orange-dark);border-color:rgba(199,107,18,.3)}
.dcourse-row{display:flex;gap:9px;margin:-12px 0 22px}
/* 5 tabs need slightly tighter buttons on phones */
.tabbtn{padding:9px 13px;min-width:56px}
@media(max-width:400px){.tabbtn{padding:8px 9px;min-width:48px;font-size:9.5px}}

/* 3D art inside result cards */
.resultcard__emoji .i3d{width:76px;height:76px;border-radius:20px;margin:0 auto;box-shadow:0 8px 20px rgba(23,24,48,.18)}

/* Status-pill icons (sliced from the dashboard sheet) */
.dchip{display:inline-flex;align-items:center;gap:7px}
.dchip img{width:21px;height:21px;object-fit:contain}
@media(max-width:420px){.dchip img{width:19px;height:19px}}

/* Gold player variant — the student's own recordings (Speaking) */
.aplayer--gold{background:linear-gradient(180deg,#FFF8E0,var(--gold-soft));border-color:rgba(201,148,18,.32)}
.aplayer--gold .aplayer__label{color:#8A5B00}
.aplayer--gold .apbtn{color:#8A5B00;border-color:rgba(201,148,18,.4)}
.aplayer--gold .apbtn--main{
  background:linear-gradient(180deg,#FFD667,var(--gold) 60%,#F0B92E);color:#7A4E00;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 6px 16px rgba(255,200,61,.5);
}
.aplayer--gold.aplayer--playing .apbtn--main{background:linear-gradient(180deg,#FFA149,var(--orange) 55%,#F5810F);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(255,138,31,.38)}
.aplayer--gold .aplayer__time{color:#8A5B00}
.aplayer--gold .aplayer__bar::-webkit-slider-runnable-track{background:rgba(201,148,18,.28)}
.aplayer--gold .aplayer__bar::-webkit-slider-thumb{background:linear-gradient(180deg,#FFD667,var(--gold));border-color:#fff;box-shadow:0 2px 6px rgba(201,148,18,.55)}
.aplayer--gold .aplayer__bar::-moz-range-track{background:rgba(201,148,18,.28)}
.aplayer--gold .aplayer__bar::-moz-range-thumb{background:linear-gradient(180deg,#FFD667,var(--gold));border-color:#fff;box-shadow:0 2px 6px rgba(201,148,18,.55)}
.aplayer--gold .aplayer__note{color:#A8842B}

/* ═══════════════════════════════════════════════════
   DESKTOP LAYOUT — everything below 1000px (phones,
   tablets) keeps its exact current dimensions.
   ═══════════════════════════════════════════════════ */
@media(min-width:1000px){
  /* widen the app shell from phone-width to web-app width */
  .shell{max-width:980px;padding:26px 48px 130px;border-radius:36px}

  /* section cards: 2 across → 4 across */
  .grid{grid-template-columns:repeat(4,1fr);gap:16px}

  /* stacked tile rows become a 2-column grid */
  .navrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .navrow .navtile{height:100%}

  /* video galleries: 3 across */
  .vgrid{grid-template-columns:repeat(3,1fr)}

  /* score boxes: 4 across */
  .reportgrid{grid-template-columns:repeat(4,1fr)}

  /* course week plans: lesson tiles in 2 columns */
  .cweek__items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cweek__items .wtask{margin-bottom:0;height:100%}

  /* keep long reading comfortable at full width */
  .readtext__prose,.readtext__body,.ctw-para{max-width:78ch}
  .sec-desc,.hero__sub{max-width:66ch}

  .tabbar{bottom:24px}
}
@media(min-width:1400px){
  .shell{max-width:1120px}
}


/* Listen & Repeat word-by-word verdict */
.lr-diff{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:2px 0 14px}
.lrw{display:inline-flex;flex-direction:column;align-items:center;font-size:13.5px;font-weight:700;padding:6px 11px;border-radius:11px;line-height:1.2}
.lrw--ok{background:var(--green-soft);color:var(--green-dark);border:1px solid rgba(34,197,94,.28)}
.lrw--no{background:var(--red-soft);color:#B42318;border:1px solid rgba(229,72,77,.3)}
.lrw--no small{font-size:9.5px;font-weight:800;opacity:.8;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}


/* Pronunciation verdicts */
.matchchip--pron{background:var(--gold-soft);border-color:rgba(201,148,18,.3);color:#7A5A00;margin-left:6px}
.lrw--warn{background:var(--gold-soft);color:#8A5B00;border:1px solid rgba(201,148,18,.35)}
.lrw--warn small{font-size:9.5px;font-weight:800;opacity:.85;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}