/* Premium skin for the practice-hub HOME screens (Reading, Listening, Writing share these class names).
   Presentation only: no ids, markup or behaviour change. Uses each hub's own tokens (--acc, --bg2, --border,
   --text...) so it follows the hub accent and both body.light / body.dark themes.
   Scope: home screen (#screen-main). The exam / results screens are intentionally untouched. */

/* ── top bar + guest strip ─────────────────────────────────────────────────────────────── */
#screen-main .guest-banner{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 14%,var(--bg)),var(--bg));border-bottom:1px solid color-mix(in srgb,var(--acc) 25%,var(--border));padding:9px 22px}
#screen-main .guest-banner-btn{border-radius:99px;padding:6px 16px;box-shadow:0 8px 16px -10px color-mix(in srgb,var(--acc) 80%,transparent);transition:transform .15s}
#screen-main .guest-banner-btn:hover{transform:translateY(-1px)}

/* ── level tabs → pills ───────────────────────────────────────────────────────────────── */
#screen-main .level-tabs{gap:8px;padding:12px 22px;border-bottom:0;background:transparent}
#screen-main .level-tab{border:1.5px solid var(--border);border-radius:99px;padding:9px 18px;background:var(--bg2);color:var(--text2);transition:transform .15s,border-color .15s,background .15s}
#screen-main .level-tab:hover{transform:translateY(-1px);border-color:var(--acc);color:var(--text)}
#screen-main .level-tab.active{color:#fff;border-color:transparent;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 10px 18px -12px color-mix(in srgb,var(--acc) 80%,transparent)}

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
#screen-main .hero-strip{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto 1fr;column-gap:34px;align-items:center;margin-bottom:22px;padding:28px 32px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%);box-shadow:0 20px 40px -22px color-mix(in srgb,var(--acc) 75%,transparent)}
#screen-main .hero-strip::before,#screen-main .hero-strip::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
#screen-main .hero-strip::before{width:260px;height:260px;left:auto;right:-70px;top:-120px;background-image:none;animation:hubfloat 10s ease-in-out infinite}
#screen-main .hero-strip::after{width:150px;height:150px;right:200px;bottom:-95px;animation:hubfloat 13s ease-in-out infinite reverse}
/* Writing hub: hero is copy + a 3-cell studio panel */
#screen-main .hero-strip:has(.hero-copy){grid-template-columns:minmax(0,1fr) 330px;column-gap:20px;align-items:stretch}
#screen-main .hero-strip:has(.hero-copy) .hero-title{font-size:clamp(28px,3.8vw,44px)}
#screen-main .hero-strip:has(.hero-copy) .hero-sub{margin-top:12px}
#screen-main .studio-panel{border-radius:16px;overflow:hidden;gap:0;background:transparent;border:1px solid rgba(255,255,255,.2)}
#screen-main .studio-panel-cell{background:rgba(0,0,0,.26);border-bottom:1px solid rgba(255,255,255,.12)}
#screen-main .studio-panel-cell:last-child{border-bottom:0}
@media(max-width:860px){#screen-main .hero-strip:has(.hero-copy){grid-template-columns:1fr}}
#screen-main .hero-eyebrow{grid-column:1/-1;color:rgba(255,255,255,.78);letter-spacing:3px;margin-bottom:10px}
#screen-main .hero-title{font-size:clamp(30px,4.4vw,48px);line-height:1.02;color:#fff;letter-spacing:.5px}
#screen-main .hero-title em{color:#fff;opacity:.7}
#screen-main .hero-sub{color:rgba(255,255,255,.9);margin-top:0;max-width:none;font-size:14px}
#screen-main .hero-sub a{color:#fff!important;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#screen-main .hero-copy{color:inherit}
@media(max-width:720px){#screen-main .hero-strip{grid-template-columns:1fr;padding:22px 20px}#screen-main .hero-sub{margin-top:12px}}

/* ── stat tiles ───────────────────────────────────────────────────────────────────────── */
#screen-main .stats-row{gap:14px;margin-bottom:30px}
#screen-main .stats-row .stat-card{border-radius:18px;padding:18px 20px;border:1px solid var(--border);background:var(--bg2);box-shadow:0 14px 26px -22px rgba(0,0,0,.45);transition:transform .18s,box-shadow .18s,border-color .18s}
#screen-main .stats-row .stat-card::before{width:100%;height:3px;border-radius:18px 18px 0 0}
#screen-main .stats-row .stat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,var(--border));box-shadow:0 18px 30px -20px color-mix(in srgb,var(--acc) 60%,transparent)}
#screen-main .stat-num{color:var(--acc)}

/* ── passage / track cards ────────────────────────────────────────────────────────────── */
#screen-main .passage-grid,#screen-main .track-grid{gap:16px}
#screen-main .p-card,#screen-main .t-card{border-radius:18px;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
#screen-main .p-card:hover,#screen-main .t-card:hover{transform:translateY(-4px);box-shadow:0 18px 32px -22px color-mix(in srgb,var(--acc) 65%,transparent)}
#screen-main .p-card::after{height:3px}

/* ── empty level ──────────────────────────────────────────────────────────────────────── */
#screen-main .level-empty{margin:8px 0 30px;padding:46px 22px;border-radius:22px;border:1.5px dashed color-mix(in srgb,var(--acc) 35%,var(--border));background:color-mix(in srgb,var(--acc) 4%,transparent)}
#screen-main .level-empty-icon{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;opacity:1;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--acc) 24%,transparent),color-mix(in srgb,var(--acc) 8%,transparent));animation:hubbob 3.2s ease-in-out infinite}
#screen-main .level-empty-title{color:var(--text)}

/* ── "also practice" chips (inline-styled links at the foot of the home screen) ─────────── */
#screen-main .main-wrap a[style*="border:1px solid var(--border2"]{border-radius:99px!important;padding:8px 15px!important;color:var(--text2)!important;background:var(--bg2);font-weight:800!important;letter-spacing:.3px!important;transition:transform .15s,border-color .15s,color .15s}
#screen-main .main-wrap a[style*="border:1px solid var(--border2"]:hover{transform:translateY(-2px);border-color:var(--acc)!important;color:var(--acc)!important}

@keyframes hubfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,10px)}}
@keyframes hubbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#screen-main .hero-strip::before,#screen-main .hero-strip::after,#screen-main .level-empty-icon{animation:none}#screen-main *{transition:none!important}}

/* ═══ SPEAKING hub home (#screen-home) ═══════════════════════════════════════════════════
   Speaking keeps its own tokens (--red is its violet accent) and its own light/dark surfaces, so only
   accent-driven pieces are restyled here; card surfaces still come from the hub. */
#screen-home .studio-head{gap:18px;align-items:stretch}
#screen-home .studio-copy{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:22px;padding:28px 32px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 88%,#fff) 0%,var(--red) 48%,color-mix(in srgb,var(--red) 50%,#000) 100%);box-shadow:0 20px 40px -22px color-mix(in srgb,var(--red) 75%,transparent)}
#screen-home .studio-copy::before{content:"";position:absolute;z-index:-1;left:auto;right:-70px;top:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.09);background-image:none;animation:hubfloat 10s ease-in-out infinite}
#screen-home .studio-copy::after{content:"";position:absolute;z-index:-1;right:200px;bottom:-95px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.09);animation:hubfloat 13s ease-in-out infinite reverse}
#screen-home .eyebrow{background:rgba(255,255,255,.18);color:#fff;border-radius:99px;padding:5px 14px;letter-spacing:2.5px}
#screen-home .page-title{color:#fff;font-size:clamp(28px,4vw,46px);line-height:1.05;letter-spacing:.5px}
#screen-home .page-sub{color:rgba(255,255,255,.9)}
#screen-home .studio-brief{border-radius:18px;overflow:hidden;gap:0}
#screen-home .brief-cell{border-bottom:1px solid var(--border,rgba(128,128,128,.25))}
#screen-home .brief-cell:last-child{border-bottom:0}
#screen-home .brief-value{color:var(--red)}
#screen-home .quota-strip{gap:14px}
#screen-home .qstrip-cell{border-radius:18px;transition:transform .18s,box-shadow .18s}
#screen-home .qstrip-cell::before{width:100%;height:3px;border-radius:18px 18px 0 0}
#screen-home .qstrip-cell:hover{transform:translateY(-3px);box-shadow:0 16px 28px -20px color-mix(in srgb,var(--red) 60%,transparent)}
#screen-home .mode-grid{gap:16px}
#screen-home .mode-card{border-radius:22px;transition:transform .18s,box-shadow .18s,border-color .18s}
#screen-home .mode-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -22px color-mix(in srgb,var(--red) 65%,transparent)}
#screen-home .foundation-banner,#screen-home .warn-box{border-radius:16px}
#screen-home a[style*="border:1px solid var(--border2"],#screen-home a[style*="border:1px solid var(--border)"]{border-radius:99px!important;padding:8px 15px!important;font-weight:800!important;transition:transform .15s,border-color .15s}
@media(max-width:820px){#screen-home .studio-copy{padding:22px 20px}}
@media(prefers-reduced-motion:reduce){#screen-home .studio-copy::before,#screen-home .studio-copy::after{animation:none}#screen-home *{transition:none!important}}

/* ═══ token bridge for hubs that do not use --acc / --bg / --bg2 / --border / --text names ═══════════════
   Stage-1 rules above are written in those names. Grammar and Vocab define their own palette, so map it here
   (scoped by body[data-hub]) instead of touching the hubs' own CSS. */
body[data-hub="grammar"].dark{--acc:var(--red);--bg:#111114;--bg2:#1a1a1a;--bg3:#202025;--border:#2a2a2a;--text:#e8e8ea;--text2:#a9a9b3}
body[data-hub="grammar"]:not(.dark){--acc:var(--red);--bg:#F7F7F9;--bg2:#fff;--bg3:#EDEDF0;--border:#E7E7EB;--text:#18181B;--text2:#61616B}
body[data-hub="vocab"]{--acc:var(--red);--bg:var(--off-white);--bg2:#fff;--bg3:#EDEDF0;--border:var(--gray-light);--text:var(--black);--text2:var(--gray)}

/* ═══ GRAMMAR hub home (#screen-main, data-hub="grammar") ═══════════════════════════════════════════ */
body[data-hub="grammar"] #screen-main .hub-hero{position:relative;overflow:hidden;isolation:isolate;margin-bottom:24px;padding:26px 30px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%);box-shadow:0 20px 40px -22px color-mix(in srgb,var(--acc) 75%,transparent)}
body[data-hub="grammar"] #screen-main .hub-hero::before{content:"";position:absolute;z-index:-1;right:-70px;top:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.09);animation:hubfloat 10s ease-in-out infinite}
body[data-hub="grammar"] #screen-main .hub-hero::after{content:"";position:absolute;z-index:-1;right:200px;bottom:-95px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.09);animation:hubfloat 13s ease-in-out infinite reverse}
.hub-hero .hh-eyebrow{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:8px}
.hub-hero .hh-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(26px,3.6vw,40px);line-height:1.08;letter-spacing:.5px;color:#fff}
.hub-hero .hh-sub{margin-top:10px;max-width:640px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.9)}
.hub-hero .hh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hub-hero .hh-chips span{padding:5px 12px;border-radius:99px;font-size:12px;font-weight:800;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
body[data-hub="grammar"] #screen-main .tab-nav{gap:8px;padding:12px 24px;border-bottom:0;background:transparent}
body[data-hub="grammar"] #screen-main .tab-btn{border:1.5px solid var(--border);border-radius:99px;padding:9px 20px;background:var(--bg2);color:var(--text2);border-bottom-width:1.5px;transition:transform .15s,border-color .15s}
body[data-hub="grammar"] #screen-main .tab-btn:hover{transform:translateY(-1px);border-color:var(--acc);color:var(--text)}
body[data-hub="grammar"] #screen-main .tab-btn.active{color:#fff;border-color:transparent;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 10px 18px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
body[data-hub="grammar"] #screen-main .content{max-width:1040px}
body[data-hub="grammar"] #screen-main .level-section{margin-bottom:30px}
body[data-hub="grammar"] #screen-main .level-header{gap:12px;margin-bottom:14px}
body[data-hub="grammar"] #screen-main .level-badge{border-radius:99px;padding:5px 15px;font-size:13px}
body[data-hub="grammar"] #screen-main .level-desc{color:var(--text2);font-size:12.5px}
body[data-hub="grammar"] #screen-main .topics-grid{gap:14px}
body[data-hub="grammar"] #screen-main .topic-card{border-radius:18px;padding:16px 18px;transition:transform .18s,box-shadow .18s,border-color .18s}
body[data-hub="grammar"] #screen-main .topic-card:not(.locked):hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 60%,var(--border));box-shadow:0 18px 30px -22px color-mix(in srgb,var(--acc) 65%,transparent)}
body[data-hub="grammar"] #screen-main .topic-card-name{font-size:14.5px}
@media(prefers-reduced-motion:reduce){body[data-hub="grammar"] #screen-main .hub-hero::before,body[data-hub="grammar"] #screen-main .hub-hero::after{animation:none}body[data-hub="grammar"] #screen-main *{transition:none!important}}

/* ═══ VOCAB hub setup screen (#screen-practice, data-hub="vocab") ═══════════════════════════════════
   One centred card: welcome banner, sessions bar, source list, filter chips, Start. */
body[data-hub="vocab"] #screen-practice.active{padding:36px 16px 60px}
body[data-hub="vocab"] .practice-card{max-width:760px;border:1px solid var(--border);border-top:0;border-radius:24px;padding:32px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
body[data-hub="vocab"] .student-welcome{position:relative;isolation:isolate;overflow:hidden;margin:-32px -32px 24px;padding:24px 32px;border-bottom:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%)}
body[data-hub="vocab"] .student-welcome::before{content:"";position:absolute;z-index:-1;right:-60px;top:-110px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.09);animation:hubfloat 10s ease-in-out infinite}
body[data-hub="vocab"] .welcome-name{color:#fff}
body[data-hub="vocab"] .welcome-batch{color:rgba(255,255,255,.82)}
body[data-hub="vocab"] .welcome-badge{border-radius:99px;padding:5px 13px;background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)}
body[data-hub="vocab"] .guest-sessions-bar,body[data-hub="vocab"] .word-sources-info,body[data-hub="vocab"] .leech-banner{border-radius:16px}
body[data-hub="vocab"] .word-sources-info{border-left-width:4px}
body[data-hub="vocab"] .gate-filter-label{color:var(--text2)}
body[data-hub="vocab"] .filter-chip{border-radius:99px;padding:7px 14px;border:1.5px solid var(--border);background:var(--bg2);color:var(--text2);transition:transform .15s,border-color .15s,background .15s}
body[data-hub="vocab"] .filter-chip:hover{transform:translateY(-1px);border-color:var(--acc);color:var(--text)}
body[data-hub="vocab"] .filter-chip.active,body[data-hub="vocab"] .filter-chip.all-active{color:#fff;border-color:transparent;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 8px 16px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
body[data-hub="vocab"] .btn-start{border-radius:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 16px 28px -16px color-mix(in srgb,var(--acc) 80%,transparent);transition:transform .15s,box-shadow .15s}
body[data-hub="vocab"] .btn-start:hover:not(:disabled){transform:translateY(-2px)}
body[data-hub="vocab"] .btn-start:disabled{background:#444;box-shadow:none}
@media(max-width:600px){body[data-hub="vocab"] .practice-card{padding:24px 18px}body[data-hub="vocab"] .student-welcome{margin:-24px -18px 20px;padding:20px 18px}}
@media(prefers-reduced-motion:reduce){body[data-hub="vocab"] .student-welcome::before{animation:none}body[data-hub="vocab"] *{transition:none!important}}

/* ═══ CAMBRIDGE PRACTICE PORTAL (practice.html, #screen-filter) ═══════════════════════════════════════
   practice.css already uses the same --acc / --bg / --bg2 / --border / --text tokens as the Reading hub, so the
   shared skin applies directly. Presentation only; the mode cards, passage lists and session screens keep working. */
#screen-filter .guest-banner{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 14%,var(--bg)),var(--bg));border-bottom:1px solid color-mix(in srgb,var(--acc) 25%,var(--border));padding:9px 22px}
#screen-filter .guest-banner-btn{border-radius:99px;padding:6px 16px}
#screen-filter .pf-hero{position:relative;overflow:hidden;isolation:isolate;min-height:0;margin-bottom:24px;padding:30px 34px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%);box-shadow:0 20px 40px -22px color-mix(in srgb,var(--acc) 75%,transparent)}
#screen-filter .pf-hero::before,#screen-filter .pf-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
#screen-filter .pf-hero::before{width:260px;height:260px;right:-70px;top:-120px;animation:hubfloat 10s ease-in-out infinite}
#screen-filter .pf-hero::after{width:150px;height:150px;right:200px;bottom:-95px;animation:hubfloat 13s ease-in-out infinite reverse}
#screen-filter .pf-hero-right{display:none}
#screen-filter .pf-eyebrow{color:rgba(255,255,255,.78);letter-spacing:3px}
#screen-filter .pf-title{font-size:clamp(30px,4.6vw,50px);line-height:1.02;color:#fff;margin-bottom:10px}
#screen-filter .pf-title br{display:none}
#screen-filter .pf-title-accent{color:#fff;opacity:.72;margin-left:.28em}
#screen-filter .pf-sub{color:rgba(255,255,255,.9);max-width:520px;font-size:15px}
#screen-filter .filter-wrap{padding-top:28px}
#screen-filter .section-toggle{padding:3px;background:var(--bg2);border:1.5px solid var(--border)}
#screen-filter .section-btn{border-radius:99px;padding:9px 22px}
#screen-filter .section-btn.active{background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 8px 16px -10px color-mix(in srgb,var(--acc) 80%,transparent)}
#screen-filter .pf-mode-cards{gap:18px}
#screen-filter .pf-card{border-radius:20px;padding:22px;background:var(--bg2);transition:transform .18s,box-shadow .18s,border-color .18s}
#screen-filter .pf-card:hover,#screen-filter .pf-card.pf-card--active{transform:translateY(-4px);box-shadow:0 20px 34px -22px color-mix(in srgb,var(--acc) 65%,transparent)}
#screen-filter .pf-card-icon{border-radius:14px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
#screen-filter .pf-card-title{color:var(--text)}
#screen-filter .pf-card-cta{border-radius:12px;padding:11px;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 12px 22px -14px color-mix(in srgb,var(--acc) 80%,transparent)}
#screen-filter .pf-card-cta:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 82%,#fff),color-mix(in srgb,var(--acc) 48%,#000))}
#screen-filter .pf-card-cta--outline{background:transparent;box-shadow:none;border:2px solid var(--acc);color:var(--acc)}
#screen-filter .pf-card-cta--outline:hover{background:var(--acc);color:#fff}
#screen-filter .pf-also-link{border-radius:99px;padding:8px 15px;background:var(--bg2);font-weight:800;color:var(--text2)}
#screen-filter .prac-resume-card{border-radius:18px}
@media(max-width:720px){#screen-filter .pf-hero{padding:22px 20px}}
@media(prefers-reduced-motion:reduce){#screen-filter .pf-hero::before,#screen-filter .pf-hero::after{animation:none}#screen-filter *{transition:none!important}}

/* ═══ RESULT screens (Reading / Listening / Writing hubs, #screen-result) ═══════════════════════════════
   The timed exam / study screen itself is deliberately NOT restyled: it is an Inspera-style replica and its
   fidelity to the real test is the point of the hubs. Only the after-the-test summary and review are polished. */
#screen-result .result-wrap{max-width:780px}
#screen-result .result-hero{position:relative;overflow:hidden;isolation:isolate;margin-bottom:34px;padding:34px 24px 30px;border-radius:24px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%);box-shadow:0 22px 44px -24px color-mix(in srgb,var(--acc) 75%,transparent)}
#screen-result .result-hero::before,#screen-result .result-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
#screen-result .result-hero::before{width:260px;height:260px;right:-70px;top:-120px}
#screen-result .result-hero::after{width:150px;height:150px;left:-40px;bottom:-80px}
#screen-result .result-eyebrow{color:rgba(255,255,255,.8)}
#screen-result .result-score-big,#screen-result .result-band-big{color:#fff}
#screen-result .result-score-big span{color:rgba(255,255,255,.72)}
#screen-result .result-band,#screen-result .result-band-sub,#screen-result .result-band-note{color:rgba(255,255,255,.9)}
#screen-result .result-band strong{color:#fff}
#screen-result .result-band-note{margin-left:auto;margin-right:auto}
#screen-result .result-band-note a,#screen-result .result-band-note span{color:#fff!important}
#screen-result .result-breakdown{gap:14px}
#screen-result .rb-card{border-radius:18px;padding:18px 20px;box-shadow:0 14px 26px -22px rgba(0,0,0,.45)}
#screen-result .rb-bar-bg,#screen-result .rb-bar{height:7px;border-radius:99px}
#screen-result .rb-bar-bg{overflow:hidden}
#screen-result .result-stats>*{border-radius:16px}
#screen-result .review-item{border-radius:16px;padding:16px 18px}
#screen-result .review-item.correct-item{border-left-width:4px}
#screen-result .review-item.wrong-item{border-left-width:4px}
#screen-result .review-explain-text{border-radius:0 12px 12px 0}
#screen-result .result-actions .btn-primary,#screen-result .result-actions .btn-outline{border-radius:12px;padding:12px 24px}
#screen-result .result-actions .btn-primary{background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));border:0;box-shadow:0 14px 24px -14px color-mix(in srgb,var(--acc) 80%,transparent)}

/* ═══ practice.html — results modal + result / test cards ════════════════════════════════════════════
   The in-page answer feedback after "Check" (green / red on the real exam layout) is left as is. */
.rmodal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rmodal-card{border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.rmodal-head{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:0;padding:34px 24px 26px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 48%,color-mix(in srgb,var(--acc) 50%,#000) 100%)}
.rmodal-head::before{content:"";position:absolute;z-index:-1;right:-60px;top:-110px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.09)}
.rmodal-head::after{content:"";position:absolute;z-index:-1;left:-40px;bottom:-80px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.09)}
.rmodal-band-kicker{color:rgba(255,255,255,.8)}
.rmodal-band-num{color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.25)}
.rmodal-band-sub{color:rgba(255,255,255,.92)}
.rmodal-close{color:#fff;background:rgba(255,255,255,.14)}
.rmodal-close:hover{background:rgba(255,255,255,.26);color:#fff}
.rmodal-body{gap:10px;padding:18px 22px}
.rmodal-row{border-radius:14px;border-left-width:4px;padding:13px 15px}
.rmodal-cta{border-radius:14px;padding:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 90%,#fff),color-mix(in srgb,var(--acc) 55%,#000));box-shadow:0 16px 28px -16px color-mix(in srgb,var(--acc) 80%,transparent)}
.rmodal-cta:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 82%,#fff),color-mix(in srgb,var(--acc) 48%,#000))}
#screen-practice .results-head{align-items:center;gap:14px;border-bottom:0;margin-bottom:18px}
#screen-practice .results-count{padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc);font-weight:800}
#screen-practice .pr-grid{gap:16px}
#screen-practice .pr-card{border-radius:18px;padding:22px;background:var(--bg2);transition:transform .18s,box-shadow .18s,border-color .18s}
#screen-practice .pr-card:hover{border-color:color-mix(in srgb,var(--acc) 60%,var(--border));transform:translateY(-4px);box-shadow:0 20px 34px -22px color-mix(in srgb,var(--acc) 65%,transparent)}
#screen-practice .pr-card::after{height:3px}
#screen-practice .pr-type-chip{border-radius:99px}
#screen-practice .pr-score-bar-bg,#screen-practice .pr-score-bar{height:5px;border-radius:99px}
#screen-practice .pr-score-bar-bg{overflow:hidden}
@media(prefers-reduced-motion:reduce){#screen-practice .pr-card{transition:none}}

/* ═══ SPEAKING result screen (#screen-result, the hub's --red is its violet accent) ═══════════════════════
   Same shape as the other result screens: an accent band hero, rounded criterion cards with a filled bar,
   soft coach + transcript panels. The recording / processing screens are untouched. */
#screen-result .result-hero:has(.res-band){border:0;border-top:0;margin-bottom:14px;padding:30px 28px;border-radius:24px;align-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 88%,#fff) 0%,var(--red) 48%,color-mix(in srgb,var(--red) 50%,#000) 100%);box-shadow:0 22px 44px -24px color-mix(in srgb,var(--red) 75%,transparent)}
#screen-result .result-hero:has(.res-band) .res-part{color:rgba(255,255,255,.85);text-transform:uppercase;font-size:12px;letter-spacing:.14em;margin-bottom:6px}
#screen-result .result-hero:has(.res-band) .res-band{color:#fff;font-size:76px}
#screen-result .result-hero:has(.res-band) .res-band-label,#screen-result .result-hero:has(.res-band) .res-meta{color:rgba(255,255,255,.88)}
#screen-result .result-hero:has(.res-band) .res-meta{padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.2)}
#screen-result .result-hero:has(.res-band) .res-meta strong{color:#fff!important}
#screen-result .criteria-grid{gap:12px;background:transparent;margin-bottom:14px}
#screen-result .crit-cell{border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px;box-shadow:0 14px 26px -22px rgba(0,0,0,.6)}
#screen-result .crit-score{font-size:36px;color:var(--red)}
#screen-result .crit-bar{height:7px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--red) 14%,var(--dark3))}
#screen-result .crit-bar-fill{border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red))}
#screen-result .practice-band-note,#screen-result .coach-box,#screen-result .transcript-box{border-radius:16px;margin-bottom:12px}
#screen-result .coach-box{padding:20px 22px;border-color:color-mix(in srgb,var(--red) 30%,var(--border))}
#screen-result .coach-lang-toggle{border-radius:99px;padding:5px 14px}
#screen-result .rec-btns{margin-top:22px;gap:10px}
#screen-result .rec-btn{border-radius:12px}
#screen-result .rec-btn.red{background:linear-gradient(150deg,var(--red),color-mix(in srgb,var(--red) 55%,#000));color:#fff;box-shadow:0 12px 22px -14px color-mix(in srgb,var(--red) 80%,transparent)}
@media(max-width:560px){#screen-result .criteria-grid{grid-template-columns:1fr}#screen-result .result-hero:has(.res-band){padding:24px 20px}#screen-result .result-hero:has(.res-band) .res-band{font-size:60px}}

/* ═══ SPEAKING hub · the inside (shell, free practice, part tests, recorder + cue card, full simulation, processing, history) ═══
   Scoped by body[data-hub="speaking"]. Presentation only: ids, markup and behaviour are unchanged. Speaking is a dark hub
   whose accent is --red (its violet); the result screen above already uses the same shapes. */
body[data-hub="speaking"] .topbar{border-bottom:0;background:linear-gradient(180deg,#121216,var(--black))}
body[data-hub="speaking"] .topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 30%,transparent) 70%,transparent)}
body[data-hub="speaking"] .quota-tag,body[data-hub="speaking"] .tb-logout,body[data-hub="speaking"] .hub-theme-btn{border-radius:99px;padding:5px 14px}
body[data-hub="speaking"] .brand-logo{border-radius:10px}
/* side nav */
body[data-hub="speaking"] .sidebar{padding:16px 10px;background:linear-gradient(180deg,#0f0f12,#0b0b0d)}
body[data-hub="speaking"] .nav-item{border-left:0;border-radius:12px;padding:10px 14px;margin-bottom:2px}
body[data-hub="speaking"] .nav-item.active{background:linear-gradient(135deg,color-mix(in srgb,var(--red) 22%,transparent),color-mix(in srgb,var(--red) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 35%,transparent)}
body[data-hub="speaking"] .nav-badge{border-radius:99px}
/* page headers */
body[data-hub="speaking"] .back-btn{padding:7px 14px;margin-bottom:16px;border:1px solid var(--border);border-radius:99px;transition:border-color .15s,color .15s}
body[data-hub="speaking"] .back-btn:hover{border-color:var(--red)}
body[data-hub="speaking"] .eyebrow{border-radius:99px;padding:5px 14px}
body[data-hub="speaking"] .page-title{font-size:clamp(32px,4.6vw,52px);letter-spacing:1.5px;line-height:1}
body[data-hub="speaking"] .page-sub{margin-bottom:18px}
body[data-hub="speaking"] .sec-hdr{border:0;gap:14px;align-items:center}
body[data-hub="speaking"] .sec-letter{width:48px;height:48px;padding:0;justify-content:center;border-radius:14px;font-size:22px;letter-spacing:0;background:linear-gradient(150deg,color-mix(in srgb,var(--red) 90%,#fff),color-mix(in srgb,var(--red) 55%,#000))}
body[data-hub="speaking"] .sec-info{border:0;background:transparent;padding:0}
body[data-hub="speaking"] .sec-info h2{font-size:20px;letter-spacing:1px}
/* recorder card (free practice + part test) */
body[data-hub="speaking"] .recorder-wrap{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:26px;padding:34px 28px 28px;background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--red) 12%,var(--dark2)),var(--dark2) 60%);box-shadow:0 30px 50px -36px rgba(0,0,0,.9)}
body[data-hub="speaking"] .recorder-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 40%,#fff))}
body[data-hub="speaking"] .rec-q-label{display:inline-block;margin-bottom:12px;padding:5px 14px;border-radius:99px;background:var(--red-dim);border:1px solid var(--red-border)}
body[data-hub="speaking"] .rec-q{font-size:clamp(19px,2.6vw,25px);line-height:1.45;max-width:720px;margin-left:auto;margin-right:auto}
body[data-hub="speaking"] .rec-q-bn{margin-bottom:26px}
body[data-hub="speaking"] .mic-btn{width:96px;height:96px;font-size:34px;margin-bottom:16px}
body[data-hub="speaking"] .mic-btn.idle{background:linear-gradient(150deg,color-mix(in srgb,var(--red) 92%,#fff),color-mix(in srgb,var(--red) 60%,#000));box-shadow:0 0 0 10px color-mix(in srgb,var(--red) 14%,transparent),0 20px 34px -14px color-mix(in srgb,var(--red) 85%,transparent);transition:transform .18s,box-shadow .18s}
body[data-hub="speaking"] .mic-btn.idle:hover{transform:scale(1.05);box-shadow:0 0 0 14px color-mix(in srgb,var(--red) 20%,transparent),0 24px 38px -14px color-mix(in srgb,var(--red) 90%,transparent)}
body[data-hub="speaking"] .rec-status{margin-bottom:14px}
body[data-hub="speaking"] .rec-timer{font-size:36px}
body[data-hub="speaking"] .rec-bar{height:6px;border-radius:99px;width:min(320px,80%);background:color-mix(in srgb,var(--red) 14%,#1c1c22);margin-bottom:24px}
body[data-hub="speaking"] .rec-bar-fill{border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red))}
body[data-hub="speaking"] .rec-btns{gap:10px}
body[data-hub="speaking"] .rec-btn{border-radius:12px;padding:12px 26px}
body[data-hub="speaking"] .rec-btn.red{background:linear-gradient(150deg,color-mix(in srgb,var(--red) 90%,#fff),color-mix(in srgb,var(--red) 55%,#000));box-shadow:0 12px 22px -14px color-mix(in srgb,var(--red) 80%,transparent)}
body[data-hub="speaking"] .rec-btn.red:disabled{background:#33333a;box-shadow:none}
body[data-hub="speaking"] .live-transcript{border-radius:14px;background:rgba(0,0,0,.28);border-color:var(--border2)}
body[data-hub="speaking"] .spk-btn{width:30px;height:30px;border-radius:50%;margin-left:8px}
/* part select */
body[data-hub="speaking"] .part-selector{gap:14px;background:transparent}
body[data-hub="speaking"] .part-card{border:2px solid var(--border);border-radius:22px;padding:24px 18px;background:linear-gradient(180deg,var(--dark2),#141418);transition:transform .18s,border-color .18s,box-shadow .18s}
body[data-hub="speaking"] .part-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--red) 55%,var(--border));background:linear-gradient(180deg,var(--dark2),#141418)}
body[data-hub="speaking"] .part-card.selected{border-color:var(--red);background:linear-gradient(180deg,color-mix(in srgb,var(--red) 14%,var(--dark2)),#141418);box-shadow:0 20px 34px -22px color-mix(in srgb,var(--red) 85%,transparent)}
body[data-hub="speaking"] .part-num{font-size:44px;background:linear-gradient(150deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-hub="speaking"] .part-name{margin:6px 0}
body[data-hub="speaking"] .part-desc{line-height:1.5;min-height:48px}
body[data-hub="speaking"] .part-quota{display:inline-block;padding:3px 12px;border-radius:99px;background:color-mix(in srgb,#4caf50 14%,transparent)}
body[data-hub="speaking"] .part-quota.zero{background:var(--red-dim)}
/* cue card (Part 2 / the part-test recorder) */
body[data-hub="speaking"] .cue-card{border:0;border-radius:24px;padding:28px 30px;overflow:hidden;background:linear-gradient(160deg,#211d14,#131110);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold) 70%,transparent),0 26px 44px -30px rgba(0,0,0,.9)}
body[data-hub="speaking"] .cue-card::before{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:color-mix(in srgb,var(--gold) 10%,transparent);pointer-events:none}
body[data-hub="speaking"] .cue-card-label{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--gold-dim)}
body[data-hub="speaking"] .cue-card-title{font-size:clamp(18px,2.4vw,23px);line-height:1.45}
body[data-hub="speaking"] .cue-bullets{gap:9px}
body[data-hub="speaking"] .cue-bullets li{font-size:14.5px;color:var(--off-white)}
body[data-hub="speaking"] .cue-bullet-dot{width:8px;height:8px;border-radius:50%;margin-top:7px}
body[data-hub="speaking"] .cue-prep{border-radius:16px;padding:12px 18px}
body[data-hub="speaking"] .cue-prep-timer{font-size:32px}
/* full simulation: the three inline-styled cells */
body[data-hub="speaking"] #screen-fullset>div[style*="grid-template-columns"]{gap:12px!important;background:transparent!important}
body[data-hub="speaking"] #screen-fullset>div[style*="grid-template-columns"]>div{border:1px solid var(--border);border-radius:18px;padding:20px 16px!important;background:linear-gradient(180deg,var(--dark2),#141418)!important}
/* notices */
body[data-hub="speaking"] .info-box,body[data-hub="speaking"] .warn-box,body[data-hub="speaking"] .hub-mock-footer{border-radius:16px;border-left-width:1px}
body[data-hub="speaking"] .info-box{border-color:rgba(214,154,67,.35)}
/* processing */
body[data-hub="speaking"] .proc-wrap{position:relative;overflow:hidden;border-radius:26px;padding:48px 28px;background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--red) 12%,var(--dark2)),var(--dark2) 60%)}
body[data-hub="speaking"] .proc-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 40%,#fff))}
body[data-hub="speaking"] .proc-steps{gap:8px;max-width:420px}
body[data-hub="speaking"] .proc-step{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid transparent}
body[data-hub="speaking"] .proc-step.active{background:var(--red-dim);border-color:var(--red-border)}
body[data-hub="speaking"] .proc-icon{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.05)}
body[data-hub="speaking"] .proc-step.done .proc-icon{background:color-mix(in srgb,#4caf50 18%,transparent)}
/* history */
body[data-hub="speaking"] .tracker{gap:12px;background:transparent;border:0}
body[data-hub="speaking"] .tracker-cell{border:1px solid var(--border);border-radius:18px;padding:18px 10px;background:linear-gradient(180deg,var(--dark2),#141418)}
body[data-hub="speaking"] .tracker-num{font-size:32px}
body[data-hub="speaking"] .history-item{border-radius:16px;padding:16px 18px;margin-bottom:10px;border-left-width:1px;transition:transform .15s,border-color .15s}
body[data-hub="speaking"] .history-item:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--red) 55%,var(--border))}
body[data-hub="speaking"] .transcript-box{border-radius:16px}
@media(max-width:640px){
  body[data-hub="speaking"] .part-selector{grid-template-columns:1fr}
  body[data-hub="speaking"] .part-desc{min-height:0}
  body[data-hub="speaking"] .recorder-wrap{padding:26px 18px 22px;border-radius:22px}
  body[data-hub="speaking"] .cue-card{padding:22px 20px}
  body[data-hub="speaking"] .tracker{grid-template-columns:1fr 1fr}
  body[data-hub="speaking"] #screen-fullset>div[style*="grid-template-columns"]{gap:8px!important}
  body[data-hub="speaking"] #screen-fullset>div[style*="grid-template-columns"]>div{padding:14px 6px!important;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){body[data-hub="speaking"] .part-card,body[data-hub="speaking"] .history-item,body[data-hub="speaking"] .mic-btn.idle{transition:none}}
@media(max-width:640px){
  body[data-hub="speaking"] .topbar{padding:0 12px;gap:8px}
  body[data-hub="speaking"] .topbar-right{gap:5px;flex-wrap:nowrap}
  body[data-hub="speaking"] .quota-tag,body[data-hub="speaking"] .hub-theme-btn,body[data-hub="speaking"] .tb-logout{padding:4px 9px;font-size:10.5px;letter-spacing:.6px}
  body[data-hub="speaking"] .brand-sub{display:none}
}