/* ═══════════════════════════════════════
   IELTSync — global styles
   Extracted from ielts_app_v4.html prototype
   + responsive shell for mobile / iPad / desktop
   ═══════════════════════════════════════ */

:root{
  --p:#e63946;--gh:linear-gradient(135deg,#e63946,#ff8fab);
  --sp:#ff6eb4;--wr:#ffa940;--rd:#4ecb71;--ls:#7c4dff;
  --bg:#fff8f8;--bg2:#f5eded;--card:#fff;--card2:#fff0f0;
  --text:#2d1b1b;--sub:#8a6a6a;--bdr:#ffe8e8;
  --sh:0 2px 14px rgba(230,57,70,.09);--shm:0 6px 24px rgba(230,57,70,.14);
  --nav:#fff;--ft:'Nunito',sans-serif;--fb:'Nunito Sans',sans-serif;
  --topnav-h:60px;
  --bottom-nav-h:72px;
  --content-max:760px;
}
body.dark{
  --bg:#1a0f0f;--bg2:#221414;--card:#2a1818;--card2:#331e1e;
  /* Improved text contrast for dark mode */
  --text:#f8f0f0;--sub:#c4a8a8;--bdr:#4a2828;
  --sh:0 2px 14px rgba(0,0,0,.35);--shm:0 6px 24px rgba(0,0,0,.4);
  --nav:#1e1010;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--fb);transition:background .25s;min-height:100vh;}

/* ─── Layout shell ─── */
#app{min-height:100vh;display:block;}
#main{min-height:100vh;padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));}
#page-container{max-width:var(--content-max);margin:0 auto;padding-bottom:24px;animation:fadeUp .2s ease;}
@keyframes fadeUp{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── Bottom nav ─── */
/* Native (Capacitor iOS): always visible.
   Web: visible on small viewports only (hidden ≥768px). */
#bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);
  background:var(--nav);border-top:1px solid var(--bdr);
  display:flex;align-items:flex-start;padding-top:8px;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);transition:background .25s;z-index:50;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bnav-btn{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:6px 0;color:var(--sub);transition:color .2s;}
.bnav-btn svg{width:24px;height:24px;display:block;}
.bnav-btn span{font-size:11px;font-weight:800;font-family:var(--ft);}
.bnav-btn.active{color:var(--p);}
.bnav-btn.active svg path,.bnav-btn.active svg rect,.bnav-btn.active svg circle{stroke:var(--p);}
.bnav-btn.active svg path[fill]:not([fill="none"]){fill:var(--p);}

/* ─── Top nav (web only) ─── */
#web-topnav{display:none;}
.topnav-inner{max-width:1200px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:24px;}
.topnav-logo{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:6px 4px;font-family:var(--ft);color:var(--text);}
.topnav-logo-emoji{font-size:22px;}
.topnav-logo-text{font-size:17px;font-weight:900;background:var(--gh);-webkit-background-clip:text;background-clip:text;color:transparent;}
.topnav-tabs{flex:1;display:flex;align-items:center;gap:4px;}
.topnav-tab{background:none;border:none;cursor:pointer;padding:9px 14px;border-radius:12px;color:var(--text);font-size:14px;font-weight:800;font-family:var(--ft);transition:background .15s,color .15s;display:flex;align-items:center;gap:7px;}
.topnav-tab:hover{background:var(--card2);}
.topnav-tab.active{background:var(--card2);color:var(--p);}
.topnav-tab-emoji{font-size:16px;}
.topnav-theme{background:var(--card2);border:none;width:38px;height:38px;border-radius:12px;font-size:17px;cursor:pointer;color:var(--text);}

/* ─── Language toggle (中文 | EN, PTE-style) ─── */
.lang-toggle{display:inline-flex;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);border-radius:12px;overflow:hidden;height:36px;align-items:stretch;}
.lang-btn{background:transparent;border:none;color:rgba(255,255,255,.85);font-size:13px;font-weight:800;padding:0 12px;cursor:pointer;font-family:var(--ft);transition:background .15s,color .15s;line-height:1;}
.lang-btn.active{background:#fff;color:var(--p);}
.lang-btn:not(.active):hover{background:rgba(255,255,255,.12);color:#fff;}

/* Web mode: at ≥768px show top nav, hide bottom nav. */
@media (min-width:768px){
  body.mode-web #web-topnav{display:block;position:sticky;top:0;height:var(--topnav-h);background:var(--nav);border-bottom:1px solid var(--bdr);z-index:40;transition:background .25s;}
  body.mode-web #bottom-nav{display:none;}
  body.mode-web #main{padding-bottom:32px;}
  #page-container{padding:0 12px 32px;}
}

/* Native mode (Capacitor): bottom nav is the only nav, never top nav.
   Applies at every viewport size (iPhone + iPad). */
body.mode-native #web-topnav{display:none !important;}
body.mode-native #bottom-nav{display:flex !important;}
body.mode-native #main{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px)) !important;}

/* ═══════════════════════════════════════
   COMMON PRIMITIVES (from v4)
   ═══════════════════════════════════════ */

/* Hero gradient header */
.hero{background:var(--gh);padding:18px 24px 28px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:rgba(255,255,255,.09);border-radius:50%;}
.hero::after{content:'';position:absolute;bottom:-30px;left:20px;width:120px;height:120px;background:rgba(255,255,255,.06);border-radius:50%;}
.htop{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;position:relative;z-index:2;}
.hbtn{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.4);border-radius:12px;
  height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;padding:0 12px;user-select:none;color:#fff;}
.back-hero{position:absolute;top:12px;left:20px;z-index:10;}
@media (min-width:768px){
  .hero{border-radius:0 0 24px 24px;}
}

/* Content wrapper inside a page */
.cnt{padding:16px 16px 24px;background:var(--bg);transition:background .25s;}
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.st{font-family:var(--ft);font-size:17px;font-weight:900;color:var(--text);}
.sl{font-size:13px;color:var(--p);font-weight:700;font-family:var(--ft);cursor:pointer;}
.scnt{font-size:13px;color:var(--sub);font-weight:700;font-family:var(--ft);}

/* ─── HOME ─── */
.greeting{color:rgba(255,255,255,.82);font-size:14px;font-weight:600;font-family:var(--ft);margin-bottom:4px;position:relative;z-index:2;}
.greeting-b{color:#fff;font-size:27px;font-weight:900;font-family:var(--ft);line-height:1.15;margin-bottom:22px;position:relative;z-index:2;}
.stats-row{display:flex;gap:10px;margin-bottom:14px;position:relative;z-index:2;}
.sc{flex:1;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.28);border-radius:14px;padding:13px 10px;}
.sc-v{color:#fff;font-size:25px;font-weight:900;font-family:var(--ft);line-height:1;margin-bottom:5px;}
.sc-v.gold{color:#ffd166;}
.sc-l{color:rgba(255,255,255,.75);font-size:10px;font-weight:700;font-family:var(--ft);}
.daily{background:rgba(255,255,255,.20);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.32);
  border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.daily-info{flex:1;}
.daily-s{color:rgba(255,255,255,.75);font-size:11px;font-weight:700;font-family:var(--ft);margin-bottom:3px;}
.daily-t{color:#fff;font-size:15px;font-weight:900;font-family:var(--ft);margin-bottom:2px;}
.daily-sub{color:rgba(255,255,255,.75);font-size:11px;font-weight:600;font-family:var(--ft);}
.sbtn{background:var(--ls);color:#fff;border:none;border-radius:12px;padding:10px 15px;
  font-size:13px;font-weight:900;font-family:var(--ft);cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(124,77,255,.4);}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.skc{background:var(--card);border-radius:20px;padding:18px 16px 14px;box-shadow:var(--sh);cursor:pointer;position:relative;overflow:hidden;transition:background .25s,transform .1s;border:none;text-align:left;width:100%;font-family:inherit;color:inherit;}
.skc:active{transform:scale(.96);}
.skc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:0 0 20px 20px;}
.skc.sp::after{background:var(--sp);}.skc.wr::after{background:var(--wr);}
.skc.rd::after{background:var(--rd);}.skc.ls::after{background:var(--ls);}
.ski{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px;}
.skc.sp .ski{background:rgba(255,110,180,.15);}.skc.wr .ski{background:rgba(255,169,64,.15);}
.skc.rd .ski{background:rgba(78,203,113,.15);}.skc.ls .ski{background:rgba(124,77,255,.15);}
.skn{font-family:var(--ft);font-size:16px;font-weight:900;color:var(--text);margin-bottom:3px;}
.skq{font-size:12px;color:var(--sub);font-weight:600;margin-bottom:10px;}
.skt{display:flex;align-items:center;justify-content:space-between;}
.skt-t{font-size:10px;color:var(--sub);font-weight:700;font-family:var(--ft);}
.qg{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.qc{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .25s,transform .1s;border:none;width:100%;font-family:inherit;color:inherit;text-align:left;}
.qc:active{transform:scale(.96);}
.qi-emoji{font-size:28px;flex-shrink:0;}
.qn{font-family:var(--ft);font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px;}
.qs{font-size:10px;color:var(--sub);font-weight:600;}

/* ─── PRACTICE ─── */
.ptabs{display:flex;gap:10px;position:relative;z-index:2;}
.ptab{flex:1;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:all .2s;}
.ptab.on{background:#fff;border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.12);}
body.dark .ptab.on{background:#2a1818;border-color:#ff8fab;}
.ptab-i{font-size:22px;line-height:1;}
.ptab-l{font-size:12px;font-weight:800;font-family:var(--ft);color:rgba(255,255,255,.9);}
.ptab.on .ptab-l{color:var(--text);}
.tp{display:none;}.tp.on{display:block;}
/* ── Question Bank hero ── */
.qb-hero{
  background:linear-gradient(135deg,#f43f5e 0%,#fb7185 45%,#f9a8d4 100%) !important;
  border-bottom:none !important;
}
.qb-hbtn{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
.qb-title{color:#fff;font-size:28px;font-weight:900;font-family:var(--ft);margin-bottom:6px;position:relative;z-index:2;}
.qb-subtitle{color:rgba(255,255,255,.88);font-size:13px;font-weight:600;font-family:var(--ft);position:relative;z-index:2;line-height:1.55;}
.qb-stats{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  margin-top:16px;position:relative;z-index:2;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.qb-stats::-webkit-scrollbar{display:none;}
.qb-sc{
  flex:0 0 auto;min-width:72px;
  padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(12px);
  text-align:center;
}
.qb-sv{color:#fff;font-size:18px;font-weight:900;font-family:var(--ft);line-height:1;}
.qb-sl{color:rgba(255,255,255,.82);font-size:10px;font-weight:700;font-family:var(--ft);margin-top:3px;}
/* compact qrow variant for question bank */
.qb-qrow{padding:12px 14px 12px 14px !important;align-items:flex-start !important;}
.qb-qi-ic{width:38px !important;height:38px !important;font-size:18px !important;flex-shrink:0;margin-top:2px;}
.qb-topic{font-size:13px;font-weight:800;color:var(--text);font-family:var(--ft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;}
.qb-preview{font-size:12px;color:var(--sub);font-weight:600;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* dark mode — hero stays red, stat cards stay visible */
body.dark .qb-sc{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);}
.ql{display:flex;flex-direction:column;gap:10px;}
.qrow{background:var(--card);border-radius:20px;padding:15px 16px 15px 20px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--sh);position:relative;overflow:hidden;cursor:pointer;transition:background .25s,transform .1s;border:none;width:100%;text-align:left;font-family:inherit;color:inherit;}
.qrow:hover{background:var(--card2);}
.qrow:active{transform:scale(.98);}
.qrow::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;}
.sp-c .qrow::before{background:var(--sp);}.wr-c .qrow::before{background:var(--wr);}
.rd-c .qrow::before{background:var(--rd);}.ls-c .qrow::before{background:var(--ls);}
.qi-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.sp-c .qi-ic{background:rgba(255,110,180,.15);}.wr-c .qi-ic{background:rgba(255,169,64,.15);}
.rd-c .qi-ic{background:rgba(78,203,113,.15);}.ls-c .qi-ic{background:rgba(124,77,255,.15);}
.qi-inf{flex:1;min-width:0;}
.qi-n{font-family:var(--ft);font-size:15px;font-weight:900;color:var(--text);margin-bottom:3px;}
.qi-c{font-size:12px;color:var(--sub);font-weight:600;}
.qi-sc{text-align:right;flex-shrink:0;}
.qi-sl{font-size:10px;color:var(--sub);font-weight:700;font-family:var(--ft);margin-bottom:1px;}
.qi-sv{font-size:22px;font-weight:900;font-family:var(--ft);line-height:1;color:var(--p);}
.qi-sv.em{font-size:16px;color:var(--sub);}
.qi-ar{font-size:16px;color:var(--sub);margin-left:4px;}

/* ─── MOCK ─── */
.mcard{background:var(--gh);border-radius:22px;padding:22px 20px;box-shadow:var(--shm);position:relative;overflow:hidden;margin-bottom:18px;}
.mcard::after{content:'🏆';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:50px;opacity:.2;}
.mc-t{color:#fff;font-size:19px;font-weight:900;font-family:var(--ft);margin-bottom:6px;}
.mc-s{color:rgba(255,255,255,.82);font-size:12px;font-weight:600;font-family:var(--ft);margin-bottom:16px;}
.mc-chips{display:flex;gap:8px;margin-bottom:16px;}
.mc-chip{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 12px;text-align:center;}
.mc-chip span{display:block;color:#fff;font-size:15px;font-weight:900;font-family:var(--ft);line-height:1;}
.mc-chip small{color:rgba(255,255,255,.8);font-size:10px;font-weight:700;font-family:var(--ft);}
.mc-btn{background:#fff;color:var(--p);border:none;border-radius:12px;padding:11px 22px;font-size:14px;font-weight:900;font-family:var(--ft);cursor:pointer;}
.pkg-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.pkg{background:var(--card);border-radius:20px;padding:15px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .25s,transform .1s;}
.pkg:active{transform:scale(.98);}
.pkg-i{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.pkg-n{font-family:var(--ft);font-size:14px;font-weight:900;color:var(--text);margin-bottom:3px;}
.pkg-d{font-size:11px;color:var(--sub);font-weight:600;}
.pkg-tags{display:flex;gap:6px;margin-top:6px;}
.tag{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;font-family:var(--ft);}
.tag-r{background:rgba(230,57,70,.12);color:var(--p);}
.tag-g{background:rgba(78,203,113,.12);color:var(--rd);}
.tag-p{background:rgba(124,77,255,.12);color:var(--ls);}
.hist-list{display:flex;flex-direction:column;gap:10px;}
.hist{background:var(--card);border-radius:20px;padding:14px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;transition:background .25s;}
.hsc{width:50px;height:50px;border-radius:50%;background:var(--gh);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:900;font-family:var(--ft);flex-shrink:0;}
.ht{font-family:var(--ft);font-size:13px;font-weight:900;color:var(--text);margin-bottom:3px;}
.hd{font-size:11px;color:var(--sub);font-weight:600;margin-bottom:6px;}
.hcs{display:flex;gap:5px;flex-wrap:wrap;}
.hc{padding:2px 7px;border-radius:7px;font-size:10px;font-weight:700;font-family:var(--ft);}

/* ─── PROFILE ─── */
.prof-hero{background:var(--gh);padding:24px 24px 44px;position:relative;overflow:hidden;text-align:center;}
.prof-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:rgba(255,255,255,.09);border-radius:50%;}
.ava{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:36px;border:3px solid rgba(255,255,255,.55);margin:0 auto 12px;position:relative;z-index:2;}
.pn{color:#fff;font-size:21px;font-weight:900;font-family:var(--ft);margin-bottom:4px;position:relative;z-index:2;}
.pt{color:rgba(255,255,255,.82);font-size:12px;font-weight:600;font-family:var(--ft);margin-bottom:14px;position:relative;z-index:2;}
.pb{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;}
.badge{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 12px;color:#fff;font-size:11px;font-weight:700;font-family:var(--ft);}
.sf{background:var(--card);border-radius:22px;padding:16px 10px;margin:-24px 16px 0;box-shadow:0 8px 32px rgba(230,57,70,.13);display:flex;position:relative;z-index:2;transition:background .25s;}
.si{flex:1;text-align:center;}
.si+.si{border-left:1px solid var(--bdr);}
.sn2{font-family:var(--ft);font-size:22px;font-weight:900;color:var(--p);}
.sl2{font-size:11px;color:var(--sub);font-weight:700;font-family:var(--ft);margin-top:2px;}
.bcard{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sh);margin-bottom:12px;transition:background .25s;}
.brow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.brow:last-child{margin-bottom:0;}
.bl{font-size:12px;font-weight:800;width:44px;flex-shrink:0;font-family:var(--ft);}
.bbg{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.bfill{height:100%;border-radius:4px;}
.bsc{font-size:13px;font-weight:900;font-family:var(--ft);width:28px;text-align:right;}
.mg{background:var(--card);border-radius:20px;box-shadow:var(--sh);margin-bottom:12px;overflow:hidden;transition:background .25s;}
.mi{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .15s;}
.mi:last-child{border-bottom:none;}
.mi:active{background:var(--card2);}
.m-ic{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.m-txt{flex:1;}
.m-n{font-family:var(--ft);font-size:14px;font-weight:800;color:var(--text);}
.m-s{font-size:11px;color:var(--sub);font-weight:600;margin-top:2px;}
.m-badge{background:var(--p);color:#fff;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:800;font-family:var(--ft);}
.m-ar{font-size:18px;color:var(--sub);}

/* ─── DETAIL HEADER (used by writing/reading/listening detail pages) ─── */
.dheader{background:var(--gh);padding:46px 20px 24px;position:relative;}
.dheader.wr-h{background:linear-gradient(135deg,#ffa940,#ffcc70);}
.dheader.rd-h{background:linear-gradient(135deg,#4ecb71,#06d6a0);}
.dheader.ls-h{background:linear-gradient(135deg,#7c4dff,#b39ddb);}
.dtag{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:4px 12px;color:rgba(255,255,255,.95);font-size:11px;font-weight:700;font-family:var(--ft);margin-bottom:10px;}
.dtitle{color:#fff;font-size:24px;font-weight:900;font-family:var(--ft);margin-bottom:6px;line-height:1.2;}
.dsub{color:rgba(255,255,255,.8);font-size:12px;font-weight:600;font-family:var(--ft);margin-bottom:18px;}
.dmeta{display:flex;gap:8px;flex-wrap:wrap;}
.dmchip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:7px 12px;}
.dmchip span{display:block;color:#fff;font-size:14px;font-weight:900;font-family:var(--ft);line-height:1;}
.dmchip small{color:rgba(255,255,255,.75);font-size:10px;font-weight:700;font-family:var(--ft);}

/* ─── WRITING practice ─── */
.prompt-card{background:var(--card);border-radius:22px;padding:20px;box-shadow:var(--shm);margin-bottom:16px;transition:background .25s;}
.prompt-label{font-size:11px;font-weight:800;color:var(--wr);font-family:var(--ft);margin-bottom:8px;}
.prompt-text{font-size:15px;color:var(--text);font-weight:700;font-family:var(--ft);line-height:1.6;margin-bottom:12px;}
.prompt-req{background:rgba(255,169,64,.1);border-left:3px solid var(--wr);border-radius:0 10px 10px 0;padding:10px 14px;font-size:12px;color:var(--text);font-weight:600;line-height:1.5;}
.essay-box{background:var(--card);border-radius:22px;padding:18px;box-shadow:var(--sh);margin-bottom:14px;min-height:180px;transition:background .25s;}
.essay-box textarea{width:100%;min-height:220px;background:transparent;border:none;outline:none;font-size:14px;font-weight:600;color:var(--text);font-family:var(--fb);line-height:1.7;resize:vertical;}
.wc-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.wc-badge{background:rgba(255,169,64,.15);border-radius:10px;padding:5px 12px;font-size:12px;font-weight:800;color:var(--wr);font-family:var(--ft);}
.wc-req{font-size:12px;color:var(--sub);font-weight:700;font-family:var(--ft);}
.submit-btn{width:100%;padding:15px;border-radius:16px;border:none;background:linear-gradient(135deg,#ffa940,#ffcc70);
  color:#fff;font-size:16px;font-weight:900;font-family:var(--ft);cursor:pointer;box-shadow:0 6px 18px rgba(255,169,64,.4);transition:transform .1s;}
.submit-btn:active{transform:scale(.97);}
.navrow{display:flex;gap:8px;margin-bottom:14px;}
.navrow-btn{flex:1;padding:9px;border-radius:12px;font-size:12px;font-weight:900;font-family:var(--ft);cursor:pointer;transition:transform .1s;}
.navrow-btn:active{transform:scale(.97);}
.navrow-btn.outline{border:1.5px solid var(--bdr);background:var(--card2);color:var(--p);}
.navrow-btn.solid{border:none;background:linear-gradient(135deg,#ffa940,#ffcc70);color:#fff;}

/* ─── RESULT panel (4 band chips + overall) ─── */
.result-card{margin-top:14px;background:var(--card);border-radius:20px;padding:18px;box-shadow:var(--sh);transition:background .25s;}
.result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.result-title{font-size:13px;font-weight:900;color:var(--p);font-family:var(--ft);}
.result-tag{font-size:11px;color:var(--sub);font-weight:700;}
.overall-band{text-align:center;padding:16px;background:var(--gh);border-radius:16px;color:#fff;margin-bottom:14px;}
.overall-band-l{font-size:11px;font-weight:700;opacity:.9;font-family:var(--ft);letter-spacing:.5px;}
.overall-band-v{font-size:44px;font-weight:900;font-family:var(--ft);line-height:1;margin-top:4px;}
.crit-row{display:flex;gap:8px;margin-bottom:12px;}
.crit{flex:1;text-align:center;background:var(--card2);border-radius:12px;padding:10px 4px;min-width:0;}
.crit-v{font-size:20px;font-weight:900;font-family:var(--ft);line-height:1;}
.crit-l{font-size:9px;color:var(--sub);font-weight:700;font-family:var(--ft);margin-top:4px;letter-spacing:.3px;}
.feedback-box{background:var(--card2);border-radius:14px;padding:12px 14px;}
.feedback-title{font-size:11px;font-weight:800;color:var(--p);font-family:var(--ft);margin-bottom:6px;}
.feedback-body{font-size:12px;color:var(--text);font-weight:600;line-height:1.7;}

/* ─── Placeholder text ─── */
.placeholder-block{background:var(--card);border-radius:18px;padding:30px 20px;text-align:center;color:var(--sub);box-shadow:var(--sh);}
.placeholder-emoji{font-size:36px;margin-bottom:10px;}
.placeholder-text{font-size:13px;font-weight:700;font-family:var(--ft);}

/* ─── Listening audio player ─── */
.audio-card{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sh);margin-bottom:14px;display:flex;align-items:center;gap:14px;}
.audio-play-btn{width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,#7c4dff,#b39ddb);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(124,77,255,.35);flex-shrink:0;transition:transform .1s;}
.audio-play-btn:active{transform:scale(.94);}
.audio-play-btn.playing{background:linear-gradient(135deg,#e63946,#ff8fab);}
.audio-info{flex:1;min-width:0;}
.audio-title{font-family:var(--ft);font-size:14px;font-weight:900;color:var(--text);margin-bottom:2px;}
.audio-sub{font-size:11px;color:var(--sub);font-weight:700;font-family:var(--ft);margin-bottom:8px;}
.audio-progress{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;}
.audio-progress-fill{height:100%;background:linear-gradient(90deg,#7c4dff,#b39ddb);border-radius:3px;transition:width .2s linear;}

/* ─── Writing Task 1 chart card ─── */
.chart-card{background:var(--card);border-radius:18px;padding:18px;box-shadow:var(--sh);margin-bottom:14px;border:1.5px solid var(--bdr);}
.chart-card-zoomable{position:relative;}
.chart-zoom-trigger{position:absolute;top:14px;right:14px;border:1px solid var(--bdr);background:rgba(255,255,255,.94);color:var(--text);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;font-family:var(--ft);cursor:pointer;z-index:2;}
.chart-zoom-source{cursor:zoom-in;}
.chart-zoom-source details,.chart-zoom-source summary{cursor:pointer;}
.chart-table{width:100%;border-collapse:collapse;font-family:var(--ft);font-size:12px;}
.chart-table th,.chart-table td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--bdr);}
.chart-table thead th{background:var(--card2);color:var(--wr);font-weight:900;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
.chart-table tbody th{text-align:left;color:var(--text);font-weight:800;background:transparent;}
.chart-table tbody td{color:var(--text);font-weight:700;}
.chart-table tbody tr:hover td,.chart-table tbody tr:hover th{background:var(--card2);}
.chart-pie,.chart-process,.chart-map{width:100%;max-width:100%;overflow:hidden;}
.chart-pie-shell{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;}
.chart-pie-svg{width:min(100%,360px);height:auto;display:block;flex:0 1 360px;}
.chart-pie-legend{flex:1 1 220px;display:grid;gap:8px;min-width:0;}
.chart-pie-legend-item{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px;color:var(--text);font-weight:800;font-family:var(--ft);}
.chart-pie-legend-dot{width:14px;height:14px;border-radius:50%;}
.chart-pie-legend-label{line-height:1.4;}
.chart-pie-legend-value{font-weight:900;color:var(--sub);white-space:nowrap;}
.chart-pie-total{margin-top:12px;font-size:11px;color:var(--sub);font-weight:800;font-family:var(--ft);text-align:center;}
.chart-process-svg,.chart-map-svg{width:100%;height:auto;display:block;}
.chart-process-svg{background:#faf8f2;border-radius:16px;}
.chart-process-details,.chart-map-details{margin-top:12px;}
.chart-process-details summary,.chart-map-details summary{cursor:pointer;font-size:11px;font-weight:800;color:var(--sub);font-family:var(--ft);list-style:none;}
.chart-process-details ol,.chart-map-details ul{margin:10px 0 0 18px;padding:0;color:var(--text);font-size:12px;line-height:1.7;}
.chart-process-details li,.chart-map-details li{margin-bottom:6px;}
.chart-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.chart-map-panel{min-width:0;}
.chart-map-panel-title{font-size:11px;font-weight:900;color:var(--wr);font-family:var(--ft);letter-spacing:.8px;margin-bottom:6px;}
.chart-map-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px;}
.chart-map-detail-grid strong{font-family:var(--ft);}
.chart-zoom-overlay{position:fixed;inset:0;background:rgba(15,13,16,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:10000;}
.chart-zoom-overlay.show{display:flex;}
.chart-zoom-dialog{position:relative;width:min(1100px,100%);max-height:min(92vh,100%);overflow:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.chart-zoom-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:50%;background:#f4f4f5;color:#18181b;font-size:22px;line-height:1;cursor:pointer;}
.chart-zoom-body{padding-top:12px;}
.chart-zoom-body .chart-pie-svg,.chart-zoom-body .chart-process-svg,.chart-zoom-body .chart-map-svg,.chart-zoom-body img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block;margin:0 auto;}
.chart-zoom-body .chart-table{font-size:14px;}
@media (max-width:700px){
  .chart-map-grid,.chart-map-detail-grid{grid-template-columns:1fr;}
  .chart-zoom-trigger{position:static;margin:0 0 10px auto;display:inline-flex;}
  .chart-zoom-dialog{padding:16px;}
}

/* ─── Study Materials accordion ─── */
.sm-block{background:var(--card);border-radius:18px;box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;border:1.5px solid var(--bdr);}
.sm-block > .sm-summary{cursor:pointer;list-style:none;padding:14px 18px;background:linear-gradient(135deg,rgba(255,169,64,.08),rgba(255,204,112,.04));font-size:13px;font-weight:900;color:var(--wr);font-family:var(--ft);display:flex;justify-content:space-between;align-items:center;}
.sm-block > .sm-summary::before{content:'';display:none;}
.sm-block > .sm-summary::after{content:'▸';font-size:14px;color:var(--wr);transition:transform .2s;}
.sm-block[open] > .sm-summary::after{transform:rotate(90deg);}
.mock-shell{padding-top:16px;}
.mock-stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.mock-step{background:var(--card);border:1.5px solid var(--bdr);border-radius:16px;padding:10px 8px;text-align:center;box-shadow:var(--sh);}
.mock-step.done{border-color:rgba(78,203,113,.35);}
.mock-step.on{border-color:rgba(124,77,255,.35);background:linear-gradient(135deg,rgba(124,77,255,.08),rgba(179,157,219,.03));}
.mock-step-dot{width:28px;height:28px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--text);font-size:12px;font-weight:900;font-family:var(--ft);}
.mock-step.done .mock-step-dot{background:rgba(78,203,113,.18);color:var(--rd);}
.mock-step.on .mock-step-dot{background:rgba(124,77,255,.16);color:var(--ls);}
.mock-step-label{font-size:10px;font-weight:800;color:var(--sub);font-family:var(--ft);line-height:1.35;}
.mock-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.mock-info-card{padding:12px 14px;background:var(--card2);border-radius:14px;display:flex;flex-direction:column;gap:6px;}
.mock-info-card strong{font-size:12px;color:var(--text);font-family:var(--ft);}
.mock-info-card span{font-size:11px;color:var(--sub);font-weight:600;line-height:1.6;}
.mock-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px;}
.mock-hero-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fff8f8 100%);
  color:var(--text);
  border:1px solid var(--bdr);
  box-shadow:0 10px 30px rgba(230,57,70,.06);
  padding:20px 20px 18px;
}
.mock-hero-card::after{display:none;}
.mock-hero-copy{display:flex;flex-direction:column;gap:8px;min-width:0;}
.mock-hero-paper-badge{
  display:inline-flex;align-items:center;padding:6px 18px;border-radius:999px;
  background:rgba(230,57,70,.06);border:1px solid rgba(230,57,70,.14);
  color:#ff5b88;font-size:12px;font-weight:900;font-family:var(--ft);letter-spacing:.3px;
}
.mock-intro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.mock-stat-card{
  min-width:0;padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#fff7fa 0%,#fff3f6 100%);
  border:1px solid #ffd9e2;
  box-shadow:none;
}
.mock-stat-card strong{
  display:block;color:var(--text);font-size:18px;font-weight:900;font-family:var(--ft);margin-bottom:2px;
}
.mock-stat-card span{
  display:block;color:#8a7b84;font-size:11px;font-weight:700;line-height:1.4;font-family:var(--ft);
}
.mock-paper-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.mock-paper-card{
  width:100%;text-align:left;border:none;cursor:pointer;
  background:var(--card);
  border:1px solid var(--bdr);border-radius:16px;padding:14px 14px 14px 14px;
  box-shadow:var(--sh);
  transition:background 0s;
  color:inherit;font-family:inherit;
  display:flex;align-items:center;gap:14px;
}
.mock-paper-card:hover{background:#faf9f7;}
.mock-paper-card:active{opacity:.85;}
.mock-paper-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(230,57,70,.08);
  display:flex;align-items:center;justify-content:center;
}
.mock-paper-body{flex:1;min-width:0;}
.mock-paper-kicker{font-size:10px;font-weight:900;color:var(--p);font-family:var(--ft);letter-spacing:.6px;text-transform:uppercase;margin-bottom:3px;}
.mock-paper-name{font-size:15px;font-weight:900;color:var(--text);font-family:var(--ft);margin-bottom:3px;}
.mock-paper-sub{font-size:12px;color:var(--sub);font-weight:600;line-height:1.4;}
.mock-paper-arrow{font-size:18px;color:var(--sub);font-weight:400;flex-shrink:0;line-height:1;}
.mock-module-card{position:relative;overflow:hidden;border:1px solid transparent;}
.mock-module-card::after{
  content:'';position:absolute;inset:auto 0 0 0;height:4px;
  background:linear-gradient(90deg,rgba(230,57,70,.18),rgba(255,255,255,0));
}
.mock-module-meta{font-size:11px;font-weight:800;color:var(--text);font-family:var(--ft);}
.mock-module-mode{font-size:10px;font-weight:700;color:var(--sub);opacity:.84;font-family:var(--ft);}
.mock-full-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fff8f8 100%) !important;
  border:1px solid var(--bdr) !important;
  box-shadow:0 8px 24px rgba(230,57,70,.06);
}
.mock-full-card::after{display:none;}
.mock-full-note{
  margin-top:8px;font-size:10px;line-height:1.45;color:var(--text);
  font-weight:700;font-family:var(--ft);opacity:.82;
}
.mock-history-card{border:1px solid transparent;}
.mock-history-time{font-size:9px;font-weight:700;color:var(--sub);font-family:var(--ft);}
.mock-history-score{
  flex-shrink:0;padding:6px 8px;border-radius:10px;
  background:rgba(124,77,255,.1);color:var(--ls);font-size:10px;font-weight:900;font-family:var(--ft);
}
.mock-phase-header{overflow:hidden;}
.mock-phase-header::after{
  content:'';position:absolute;inset:auto -30px -50px auto;width:180px;height:180px;
  background:rgba(255,255,255,.08);border-radius:50%;
}
.mock-phase-listening{background:linear-gradient(135deg,#6f46ff,#b39ddb);}
.mock-phase-reading{background:linear-gradient(135deg,#3ebb69,#06d6a0);}
.mock-phase-writing{background:linear-gradient(135deg,#ff9a40,#ffd166);}
.mock-phase-speaking{background:linear-gradient(135deg,#ff5ea8,#ff8fab);}
.mock-phase-result{background:linear-gradient(135deg,#7c4dff,#06d6a0);}
.mock-phase-panel{
  margin-top:16px;padding:14px 14px 12px;border-radius:16px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);position:relative;z-index:2;
}
.mock-phase-panel-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;color:#fff;font-family:var(--ft);
}
.mock-phase-panel-row strong{font-size:13px;font-weight:900;}
.mock-phase-panel-row span{font-size:11px;font-weight:700;color:rgba(255,255,255,.82);}
.mock-phase-progress{
  width:100%;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.18);
}
.mock-phase-progress span{
  display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fff,rgba(255,255,255,.7));
}
.mock-result-note{
  margin:-2px 0 14px;font-size:11px;line-height:1.7;color:var(--sub);
  text-align:center;font-weight:700;padding:0 6px;
}
.mock-shell .sh{margin-bottom:8px;}
.mock-shell .st{font-size:15px;}
.mock-shell .scnt{font-size:10px;}
.mock-shell .pkg-list{gap:7px;margin-bottom:12px;}
.mock-shell .pkg{
  border-radius:14px;
  padding:10px 11px;
  gap:9px;
  box-shadow:0 5px 16px rgba(230,57,70,.05);
}
.mock-shell .pkg-i{
  width:36px;height:36px;border-radius:12px;font-size:17px;
}
.mock-shell .pkg-n{font-size:12px;margin-bottom:1px;}
.mock-shell .pkg-d{font-size:9px;line-height:1.4;}
.mock-shell .navrow-btn{
  border-radius:10px;
  font-size:10px;
  padding:7px 9px;
}
.mock-shell .submit-btn{
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
}
.mock-shell .mcard{
  border-radius:16px;
  padding:13px;
  margin-bottom:10px;
}
.mock-shell .mc-t{
  color:var(--text);
  font-size:30px;
  line-height:1.18;
  margin-bottom:2px;
}
.mock-shell .mc-s{
  color:#8a7b84;
  font-size:13px;
  line-height:1.6;
  margin-bottom:10px;
}
.mock-shell .mcard:not(.mock-hero-card):not(.mock-full-card){
  background:linear-gradient(180deg,#ffffff 0%,#fff8f8 100%);
  border:1px solid var(--bdr);
  box-shadow:0 8px 24px rgba(230,57,70,.06);
}
.mock-shell .mcard:not(.mock-hero-card):not(.mock-full-card)::after{opacity:.08;}
.mock-score-card{
  background:var(--card2);border:1px solid var(--bdr);border-radius:16px;padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:4px;
}
.mock-score-card strong{font-size:13px;font-weight:900;color:var(--text);font-family:var(--ft);}
.mock-score-card span{font-size:18px;font-weight:900;color:var(--p);font-family:var(--ft);}
.mock-score-card small{font-size:11px;font-weight:700;color:var(--sub);}
.mock-score-card{background:var(--card2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.mock-score-card strong{font-size:12px;color:var(--text);font-family:var(--ft);}
.mock-score-card span{font-size:18px;font-weight:900;color:var(--p);font-family:var(--ft);}
.mock-score-card small{font-size:11px;color:var(--sub);font-weight:700;}
@media (max-width:700px){
  .mock-stepper{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mock-intro-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
body.dark .mock-paper-card{background:var(--card);}
body.dark .mock-paper-card:hover{background:#2e1c1c;}
body.dark .mock-hero-card{
  background:linear-gradient(180deg,#2a1818 0%,#221414 100%);
  border-color:#3a2020;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
body.dark .mock-stat-card{
  background:linear-gradient(180deg,#331e1e 0%,#2a1818 100%);
  border-color:#3a2020;
}
.plus-card{background:var(--card);border-radius:22px;padding:22px 20px;box-shadow:var(--shm);}
.plus-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,57,70,.12);color:var(--p);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:900;font-family:var(--ft);margin-bottom:12px;}
.plus-title{font-size:20px;font-weight:900;color:var(--text);font-family:var(--ft);margin-bottom:14px;line-height:1.3;}
.plus-list{display:flex;flex-direction:column;gap:10px;}
.plus-item{padding:12px 14px;background:var(--card2);border-radius:14px;font-size:13px;color:var(--text);font-weight:700;line-height:1.6;}
.login-stack{display:flex;flex-direction:column;gap:10px;}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.auth-tab{padding:11px 14px;border-radius:14px;border:1.5px solid var(--bdr);background:var(--card2);color:var(--text);font-size:13px;font-weight:900;font-family:var(--ft);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.auth-tab.on{background:linear-gradient(135deg,#e63946,#ff8fab);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(230,57,70,.22);}
.login-field{display:flex;flex-direction:column;gap:5px;}
.login-label{font-size:11px;font-weight:900;color:var(--sub);font-family:var(--ft);letter-spacing:.4px;text-transform:uppercase;}
.login-input{width:100%;padding:11px 14px;border-radius:14px;border:1.5px solid var(--bdr);background:var(--card2);color:var(--text);font-size:14px;font-weight:700;font-family:var(--fb);outline:none;transition:border-color .15s,box-shadow .15s;}
.login-input:focus{border-color:var(--p);box-shadow:0 0 0 4px rgba(230,57,70,.08);}
.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.auth-link-btn{padding:0;border:none;background:none;color:var(--p);font-size:12px;font-weight:800;font-family:var(--ft);cursor:pointer;}
.auth-link-btn:hover{text-decoration:underline;}
.login-divider{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--sub);font-weight:800;font-family:var(--ft);text-transform:uppercase;letter-spacing:.6px;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--bdr);}
.auth-provider-list{display:flex;flex-direction:column;gap:10px;}
.auth-provider-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:16px;border:1.5px solid var(--bdr);background:var(--card2);color:var(--text);font-size:14px;font-weight:800;font-family:var(--ft);cursor:pointer;transition:transform .1s,border-color .15s,background .15s;}
.auth-provider-btn:active{transform:scale(.98);}
.auth-provider-btn:hover{border-color:rgba(230,57,70,.28);}
.auth-provider-icon{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff;color:#222;font-size:13px;font-weight:900;flex-shrink:0;}
body.dark .auth-provider-icon{background:#241818;color:#fff;border:1px solid rgba(255,255,255,.12);}
.login-status{padding:12px 14px;border-radius:14px;background:rgba(124,77,255,.08);color:var(--text);font-size:12px;font-weight:700;line-height:1.6;}
.login-status.ok{background:rgba(78,203,113,.12);color:var(--rd);}
.login-status.bad{background:rgba(230,57,70,.12);color:var(--p);}
.app-dialog-overlay{position:fixed;inset:0;background:rgba(12,8,8,.42);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;}
.app-dialog-card{width:min(100%,420px);max-height:88vh;overflow-y:auto;background:var(--card);border-radius:24px;padding:22px 20px;box-shadow:0 20px 50px rgba(0,0,0,.22);position:relative;}
.app-dialog-card.danger .plus-badge{background:rgba(230,57,70,.12);color:var(--p);}
.app-dialog-message{font-size:14px;color:var(--text);font-weight:600;line-height:1.8;}
.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.app-dialog-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;border-radius:50%;background:var(--card2);color:var(--text);font-size:15px;font-weight:900;font-family:var(--ft);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh);}
.app-dialog-close:active{transform:scale(.96);}
.app-toast-root,.app-toast{pointer-events:none;}
#app-toast-root{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:10001;display:flex;justify-content:center;width:min(100%,420px);padding:0 16px;}
.app-toast{opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease;max-width:100%;padding:12px 16px;border-radius:16px;background:rgba(32,20,20,.92);color:#fff;font-size:13px;font-weight:800;font-family:var(--ft);box-shadow:0 16px 34px rgba(0,0,0,.24);text-align:center;}
.app-toast.success{background:rgba(44,122,79,.96);}
.app-toast.error{background:rgba(161,41,56,.96);}
.app-toast.show{opacity:1;transform:translateY(0);}
.sm-body{padding:12px 16px 16px;}
.sm-sub{margin-top:10px;border-radius:12px;overflow:hidden;}
.sm-sub > .sm-sub-summary{cursor:pointer;list-style:none;padding:9px 12px;background:var(--card2);font-size:12px;font-weight:800;color:var(--text);font-family:var(--ft);display:flex;justify-content:space-between;align-items:center;border-radius:10px;}
.sm-sub > .sm-sub-summary::after{content:'▸';font-size:12px;color:var(--sub);transition:transform .2s;margin-left:8px;}
.sm-sub[open] > .sm-sub-summary::after{transform:rotate(90deg);}
.sm-sub-body{padding:8px 4px 6px;}

/* ─── Speaking Part 2 — Cue Card ─── */
.cue-card{background:var(--card);border-radius:18px;padding:18px 20px;box-shadow:var(--shm);border:2px solid var(--sp);margin-bottom:14px;}
.cue-card-label{font-size:10px;font-weight:900;color:var(--sp);font-family:var(--ft);letter-spacing:1px;margin-bottom:8px;}
.cue-card-topic{font-size:18px;font-weight:900;color:var(--text);font-family:var(--ft);line-height:1.3;margin-bottom:12px;}
.cue-card-bullets-l{font-size:12px;font-weight:800;color:var(--text);font-family:var(--ft);margin-bottom:6px;}
.cue-card-bullets{list-style:disc;padding-left:22px;font-size:13px;color:var(--text);font-weight:600;line-height:1.8;}
.cue-card-bullets li{margin-bottom:2px;}

@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 8px 28px rgba(230,57,70,.35);}50%{transform:scale(1.05);box-shadow:0 12px 38px rgba(230,57,70,.5);}}

/* ─── Listening form blanks ─── */
.ls-form{display:flex;flex-direction:column;gap:10px;}
.ls-blank-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--card2);border-radius:12px;border:1.5px solid transparent;transition:border-color .2s,background .2s;}
.ls-blank-row.ok{border-color:var(--rd);background:rgba(78,203,113,.08);}
.ls-blank-row.bad{border-color:var(--p);background:rgba(230,57,70,.08);}
.ls-blank-num{background:rgba(124,77,255,.18);color:var(--ls);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;font-family:var(--ft);flex-shrink:0;margin-top:1px;}
.ls-blank-text{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--text);line-height:1.6;}
.ls-blank-input{min-width:90px;max-width:200px;padding:5px 10px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--card);color:var(--text);font-size:13px;font-weight:700;font-family:var(--ft);outline:none;transition:border-color .15s;}
.ls-blank-input:focus{border-color:var(--ls);}
.ls-blank-input:disabled{opacity:.85;cursor:not-allowed;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Draggable seek bar for real audio (replaces simple fill bar) */
.audio-seek-bar{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg2);border-radius:3px;outline:none;cursor:pointer;margin-top:6px;display:block;}
.audio-seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ls);cursor:pointer;box-shadow:0 2px 6px rgba(124,77,255,.4);}
.audio-seek-bar::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--ls);cursor:pointer;}
.audio-time-label{font-size:10px;font-weight:700;color:var(--sub);font-family:var(--ft);margin-top:3px;text-align:right;}

/* ─── Visibility helpers (used to keep mobile and desktop tracks separate) ─── */
.desk-only{display:none !important;}


/* ═══════════════════════════════════════
   DESKTOP WEB LAYOUT (≥1024px, web mode only)
   ─────────────────────────────────────────
   Real desktop dashboard redesign — pages are restructured rather
   than stretched. Per-page selectors use :has() against
   #page-container to keep all changes CSS-only (no JS edits).
   Mobile / iPad / native shells below 1024px are entirely
   untouched — every rule is scoped under `body.mode-web` inside
   this media block.
   ═══════════════════════════════════════ */
@media (min-width:1024px){
  body.mode-web{ --content-max:1200px; }

  /* ── Shell ─────────────────────────────────────────────── */
  body.mode-web #app{ width:100%; max-width:none; }
  body.mode-web #main{ width:100%; max-width:none; padding-bottom:64px; }
  body.mode-web #page-container{
    max-width:var(--content-max);
    margin:0 auto;
    padding:0 40px 64px;
  }
  body.mode-web #web-topnav{ height:var(--topnav-h); box-shadow:0 1px 0 var(--bdr); }
  body.mode-web .topnav-inner{ max-width:var(--content-max); padding:0 32px; gap:12px; flex-wrap:nowrap; overflow:hidden; }
  body.mode-web #bottom-nav{ display:none !important; }

  /* ── Desktop topnav right group (search + lang + download + avatar) ── */
  body.mode-web .topnav-tabs{ flex:0 0 auto; gap:2px; flex-wrap:nowrap; }
  body.mode-web .topnav-tab{ white-space:nowrap; flex-shrink:0; padding:9px 10px; font-size:13px; }
  body.mode-web .topnav-logo{ flex:0 0 auto; white-space:nowrap; }
  body.mode-web .topnav-logo-text{ white-space:nowrap; font-size:15px; }
  /* Higher specificity (.topnav-right.desk-only) so it beats the
     generic `body.mode-web .desk-only{display:revert}` later in the file. */
  body.mode-web .topnav-right.desk-only{
    display:flex !important;
    align-items:center;
    gap:8px;
    margin-left:auto;
    flex-shrink:0;
    flex-wrap:nowrap;
    min-width:0;
  }
  body.mode-web .topnav-search{
    position:relative;
    display:flex; align-items:center;
    background:var(--card2);
    border:1px solid var(--bdr);
    border-radius:12px;
    height:38px;
    flex:1 1 auto;
    width:auto;
    min-width:140px;
    max-width:440px;
    padding:0 12px 0 36px;
    transition:border-color .15s, background .15s;
    overflow:hidden;
  }
  body.mode-web .topnav-search:focus-within{ border-color:var(--p); background:#fff; }
  body.mode-web .topnav-search-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    font-size:14px; color:var(--sub);
    pointer-events:none;
  }
  body.mode-web .topnav-search-input{
    flex:1; background:transparent; border:none; outline:none;
    font-size:13px; font-weight:600; color:var(--text);
    font-family:var(--ft);
  }
  body.mode-web .topnav-search-input::placeholder{ color:var(--sub); font-weight:600; }
  body.mode-web .topnav-search-input::-webkit-search-cancel-button{ display:none; }

  body.mode-web .topnav-lang{
    background:var(--card2); border:1px solid var(--bdr);
    color:var(--text); font-size:13px; font-weight:900; font-family:var(--ft);
    padding:0 12px; height:38px; border-radius:12px; cursor:pointer;
    transition:background .15s, border-color .15s;
    white-space:nowrap; flex-shrink:0;
  }
  body.mode-web .topnav-lang:hover{ background:#fff; border-color:var(--p); color:var(--p); }

  body.mode-web .topnav-download{
    background:#fff; border:1px solid var(--bdr);
    color:var(--text); font-size:13px; font-weight:900; font-family:var(--ft);
    padding:0 12px; height:38px; border-radius:12px; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
    white-space:nowrap; flex-shrink:0;
  }
  body.mode-web .topnav-download:hover{ background:var(--card2); border-color:var(--p); color:var(--p); }

  body.mode-web .topnav-avatar{
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,#a78bfa,#ec4899);
    color:#fff; font-size:14px; font-weight:900; font-family:var(--ft);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(167,139,250,.35);
    transition:transform .15s, box-shadow .15s;
    flex-shrink:0;
  }
  body.mode-web .topnav-avatar:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(167,139,250,.45); }

  /* The standalone ☀️ theme button is redundant when the desktop right
     group is present — hide it on desktop. */
  body.mode-web .topnav-theme{ display:none; }

  /* ── Hero banner ───────────────────────────────────────── */
  /* Bleed to viewport edges with the rounded inner card kept inside
     the content max — gives a proper website banner feel. */
  body.mode-web .hero{
    margin:24px 0 32px;
    padding:48px 56px 56px;
    border-radius:28px;
    background:var(--gh);
    box-shadow:0 24px 60px rgba(230,57,70,.15);
  }
  body.mode-web .hero::before{ width:360px; height:360px; top:-120px; right:-80px; }
  body.mode-web .hero::after{ width:220px; height:220px; bottom:-60px; left:60px; }

  body.mode-web .htop{ margin-bottom:24px; }
  body.mode-web .greeting{ font-size:16px; margin-bottom:8px; }
  body.mode-web .greeting-b{ font-size:40px; line-height:1.15; margin-bottom:32px; max-width:720px; }

  /* Stats row + Daily-rec laid out side by side on desktop. */
  body.mode-web .stats-row{ gap:16px; margin-bottom:24px; max-width:680px; }
  body.mode-web .sc{ padding:20px 18px; border-radius:18px; }
  body.mode-web .sc-v{ font-size:34px; margin-bottom:8px; }
  body.mode-web .sc-l{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; }

  body.mode-web .daily{ padding:22px 26px; border-radius:20px; gap:16px; }
  body.mode-web .daily-s{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; }
  body.mode-web .daily-t{ font-size:20px; margin-bottom:6px; }
  body.mode-web .daily-sub{ font-size:13px; max-width:520px; }
  body.mode-web .sbtn{ padding:14px 28px; font-size:14px; border-radius:14px; white-space:nowrap; transition:transform .15s, box-shadow .15s; }
  body.mode-web .sbtn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.18); }

  /* ── Content sections (skills / vocab / quick) ─────────── */
  body.mode-web .cnt{ padding:0; background:transparent; }
  body.mode-web .sh{ margin:32px 0 18px; align-items:baseline; }
  body.mode-web .st{ font-size:22px; font-weight:900; font-family:var(--ft); }
  body.mode-web .sl{ font-size:14px; font-weight:800; color:var(--p); cursor:pointer; transition:opacity .15s; }
  body.mode-web .sl:hover{ opacity:.7; }

  /* Skill cards — 4 across, taller and richer than mobile. */
  body.mode-web .sg{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-bottom:8px; }
  body.mode-web .skc{
    padding:28px 24px 24px;
    border-radius:24px;
    box-shadow:0 6px 24px rgba(230,57,70,.06);
    border:1px solid var(--bdr);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  body.mode-web .skc:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(230,57,70,.12);
    border-color:transparent;
  }
  body.mode-web .skc:active{ transform:translateY(-2px); }
  body.mode-web .skc::after{ height:5px; }
  body.mode-web .ski{ width:56px; height:56px; border-radius:18px; font-size:30px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  body.mode-web .skn{ font-size:18px; font-weight:900; margin-bottom:6px; }
  body.mode-web .skq{ font-size:13px; min-height:36px; }
  body.mode-web .skt{ margin-top:18px; padding-top:14px; border-top:1px solid var(--bdr); display:flex; justify-content:space-between; align-items:center; }
  body.mode-web .skt-t{ font-size:12px; font-weight:800; color:var(--sub); }

  /* Vocabulary banner — wider, two-column readable layout. */
  body.mode-web .cnt > button[onclick*="vocabularyHome"]{
    padding:24px 28px !important;
    border-radius:22px !important;
    gap:20px !important;
    box-shadow:0 10px 28px rgba(124,58,237,.18) !important;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  body.mode-web .cnt > button[onclick*="vocabularyHome"]:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(124,58,237,.25) !important;
  }
  body.mode-web .cnt > button[onclick*="vocabularyHome"] > div:first-child{ font-size:44px !important; }

  /* Quick actions — 4 across, polished website cards. */
  body.mode-web .qg{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  body.mode-web .qc{
    padding:22px 22px;
    border-radius:22px;
    box-shadow:0 6px 24px rgba(230,57,70,.06);
    border:1px solid var(--bdr);
    gap:16px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  body.mode-web .qc:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(230,57,70,.10);
    border-color:transparent;
  }
  body.mode-web .qc:active{ transform:translateY(-1px); }
  body.mode-web .qi-emoji{ font-size:32px; }
  body.mode-web .qn{ font-size:15px; font-weight:900; margin-bottom:4px; }
  body.mode-web .qs{ font-size:12px; color:var(--sub); }

  /* ─── Desktop visibility helpers ─── */
  body.mode-web .desk-only{ display:revert !important; }
  body.mode-web .mobi-only{ display:none !important; }

  /* ─────────────────────────────────────────────────────────
     HOME PAGE — dashboard mock-up
     - Hero: light cream/white background (NOT the heavy pink
       gradient mobile uses), 2-col layout with progress ring +
       quick cards on the right.
     - Below hero: skills row, then 2-col dashboard row
       (今日推荐 + 词汇), then recent practice list.
     ───────────────────────────────────────────────────────── */

  /* Lighter, website-style hero — keep pink only on small accents. */
  body.mode-web .home-hero{
    background:linear-gradient(135deg,#fff5f7 0%,#fff9f0 100%);
    color:var(--text);
    display:grid;
    grid-template-columns:minmax(0,1.55fr) 360px;
    column-gap:28px;
    padding:36px 40px 32px;
    margin:24px 0 28px;
    border-radius:24px;
    border:1px solid var(--bdr);
    box-shadow:0 12px 32px rgba(230,57,70,.08);
    overflow:hidden;
  }
  body.mode-web .home-hero::before,
  body.mode-web .home-hero::after{ display:none; }
  body.mode-web .home-hero .hero-main{ min-width:0; position:relative; z-index:2; }

  body.mode-web .home-hero .greeting{ color:var(--sub); font-size:14px; font-weight:700; margin-bottom:6px; }
  body.mode-web .home-hero .greeting-b{
    color:var(--text); font-size:36px; line-height:1.18;
    margin:0 0 8px; max-width:560px;
  }
  body.mode-web .home-hero .hero-desc{
    font-size:13px; line-height:1.7; color:var(--sub); font-weight:600;
    margin-bottom:18px; max-width:560px;
  }
  body.mode-web .home-hero .hero-ctas{ display:flex !important; gap:10px; margin-bottom:20px; }
  body.mode-web .home-hero .sbtn{
    background:var(--gh); color:#fff; border:none; padding:10px 22px;
    border-radius:12px; font-size:13px; font-weight:900; font-family:var(--ft);
    cursor:pointer; box-shadow:0 6px 18px rgba(230,57,70,.18);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  body.mode-web .home-hero .sbtn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(230,57,70,.22); }
  body.mode-web .home-hero .sbtn-ghost{
    background:#fff; color:var(--text); border:1px solid var(--bdr);
    box-shadow:none;
  }
  body.mode-web .home-hero .sbtn-ghost:hover{ background:var(--card2); }

  /* Stats row: 3 light cards with a third "tag" line */
  body.mode-web .home-hero .stats-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:none; margin:0; }
  body.mode-web .home-hero .sc{
    background:#fff; border:1px solid var(--bdr);
    box-shadow:0 4px 14px rgba(230,57,70,.06);
    backdrop-filter:none;
    padding:18px 18px 16px;
    border-radius:16px;
    flex:initial;
  }
  body.mode-web .home-hero .sc-v{ color:var(--text); font-size:30px; margin-bottom:4px; }
  body.mode-web .home-hero .sc-v.gold{ color:var(--text); }
  body.mode-web .home-hero .sc-l{ color:var(--sub); font-size:12px; font-weight:800; margin-bottom:6px; text-transform:none; letter-spacing:0; }
  body.mode-web .home-hero .sc-d{ color:var(--sub); font-size:11px; font-weight:700; }

  /* Right column: progress ring + 2 quick cards */
  body.mode-web .home-hero .hero-side{
    display:flex !important; flex-direction:column; gap:14px; min-width:0;
  }
  body.mode-web .home-hero .ring-card{
    background:#fff; border:1px solid var(--bdr);
    box-shadow:0 6px 20px rgba(230,57,70,.07);
    border-radius:18px; padding:18px 20px;
    display:flex; align-items:center; gap:16px;
  }
  body.mode-web .home-hero .ring{
    flex-shrink:0; width:74px; height:74px; border-radius:50%;
    background:conic-gradient(var(--ls) 0% var(--ring-pct, 38%), var(--bdr) var(--ring-pct, 38%) 100%);
    display:flex; align-items:center; justify-content:center;
  }
  body.mode-web .home-hero .ring-inner{
    width:58px; height:58px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--ft); font-weight:900; font-size:18px; color:var(--text);
  }
  body.mode-web .home-hero .ring-t{ font-size:15px; font-weight:900; color:var(--text); font-family:var(--ft); }
  body.mode-web .home-hero .ring-sub{ font-size:11px; color:var(--sub); font-weight:600; margin-top:2px; }
  body.mode-web .home-hero .ring-delta{ font-size:12px; color:var(--rd); font-weight:800; margin-top:6px; }

  body.mode-web .home-hero .hero-side-quick{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  body.mode-web .home-hero .qcard{
    text-align:left; background:#fff; border:1px solid var(--bdr);
    border-radius:18px; padding:14px 14px 12px; cursor:pointer;
    box-shadow:0 4px 14px rgba(230,57,70,.05);
    font-family:inherit; color:inherit;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  body.mode-web .home-hero .qcard:hover{
    transform:translateY(-2px); box-shadow:0 12px 26px rgba(230,57,70,.10); border-color:transparent;
  }
  body.mode-web .home-hero .qcard-i{ font-size:20px; margin-bottom:8px; }
  body.mode-web .home-hero .qcard-t{ font-size:13px; font-weight:900; color:var(--text); font-family:var(--ft); margin-bottom:2px; }
  body.mode-web .home-hero .qcard-s{ font-size:11px; color:var(--sub); font-weight:600; line-height:1.5; }

  /* Section header (.sh / .st / .sl) — desktop typography */
  body.mode-web .cnt .sh{ margin:28px 0 16px; align-items:baseline; }
  body.mode-web .cnt .st{ font-size:20px; font-weight:900; font-family:var(--ft); }
  body.mode-web .cnt .sl{ font-size:13px; font-weight:800; color:var(--p); cursor:pointer; }
  body.mode-web .cnt .sl:hover{ opacity:.7; }

  /* Two-column dashboard row: 今日推荐 (8/12) + 词汇 (4/12) */
  body.mode-web .home-dash-row{
    display:grid !important;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:20px;
    margin-top:24px;
  }
  body.mode-web .home-dash-row .panel{
    background:var(--card); border:1px solid var(--bdr);
    border-radius:22px; padding:24px 26px;
    box-shadow:0 6px 22px rgba(230,57,70,.06);
  }
  body.mode-web .home-dash-row .panel-t{
    font-size:18px; font-weight:900; color:var(--text); font-family:var(--ft); margin-bottom:6px;
  }
  body.mode-web .home-dash-row .panel-s{
    font-size:12px; color:var(--sub); font-weight:600; line-height:1.6; margin-bottom:18px;
  }
  body.mode-web .home-dash-row .rec-row{
    display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
    padding:14px 0; border-top:1px solid var(--bdr);
  }
  body.mode-web .home-dash-row .rec-row:nth-of-type(2){ border-top:1px solid var(--bdr); }
  body.mode-web .home-dash-row .rec-info{ min-width:0; }
  body.mode-web .home-dash-row .rec-n{ font-size:14px; font-weight:900; color:var(--text); font-family:var(--ft); margin-bottom:3px; }
  body.mode-web .home-dash-row .rec-d{ font-size:12px; color:var(--sub); font-weight:600; line-height:1.6; }
  body.mode-web .home-dash-row .rec-actions{ display:flex; gap:8px; flex-shrink:0; }
  body.mode-web .home-dash-row .sbtn{
    background:var(--gh); color:#fff; border:none; padding:9px 18px;
    border-radius:11px; font-size:12px; font-weight:900; font-family:var(--ft);
    cursor:pointer; box-shadow:0 4px 14px rgba(230,57,70,.18);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  body.mode-web .home-dash-row .sbtn:hover{ transform:translateY(-1px); }
  body.mode-web .home-dash-row .sbtn-ghost{
    background:#fff; color:var(--text); border:1px solid var(--bdr); box-shadow:none;
  }
  body.mode-web .home-dash-row .sbtn-ghost:hover{ background:var(--card2); }

  /* Vocabulary panel — word chips */
  body.mode-web .home-dash-row .panel-vocab{
    background:linear-gradient(170deg, var(--card) 0%, var(--card2) 100%);
  }
  body.mode-web .home-dash-row .vocab-row{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:18px;
  }
  body.mode-web .home-dash-row .vocab-chip{
    background:#fff; border:1px solid var(--bdr); border-radius:14px;
    padding:12px 12px;
  }
  body.mode-web .home-dash-row .vocab-w{ font-size:14px; font-weight:900; color:var(--text); font-family:var(--ft); margin-bottom:4px; }
  body.mode-web .home-dash-row .vocab-p{ font-size:11px; color:var(--sub); font-weight:600; font-family:'Nunito Sans',sans-serif; }
  body.mode-web .home-dash-row .vocab-cta{
    display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
    padding-top:14px; border-top:1px solid var(--bdr);
  }

  /* Recent practice list */
  body.mode-web .recent-list{ display:flex; flex-direction:column; gap:10px; }
  body.mode-web .recent-row{
    display:grid; grid-template-columns:14px 1fr auto; gap:14px; align-items:center;
    background:var(--card); border:1px solid var(--bdr);
    border-radius:14px; padding:14px 18px;
    box-shadow:0 4px 14px rgba(230,57,70,.05);
  }
  body.mode-web .recent-dot{
    width:10px; height:10px; border-radius:50%; display:inline-block;
  }
  body.mode-web .recent-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  body.mode-web .recent-t{ font-size:13px; font-weight:900; color:var(--text); font-family:var(--ft); }
  body.mode-web .recent-s{ font-size:11px; color:var(--sub); font-weight:600; }

  /* ─────────────────────────────────────────────────────────
     PRACTICE PAGE — compact header + tab dashboard
     Detected by: container has .ptabs (only the practice page
     renders a .ptabs tab bar inside its hero).
     ───────────────────────────────────────────────────────── */
  body.mode-web #page-container:has(.ptabs) .hero{
    padding:28px 40px 18px;
    margin:24px 0 28px;
    border-radius:24px;
  }
  body.mode-web #page-container:has(.ptabs) .hero > div[style*="font-size:30px"]{
    font-size:28px !important; margin-bottom:4px !important;
  }
  body.mode-web #page-container:has(.ptabs) .hero > div[style*="font-size:13px"]{
    font-size:14px !important; margin-bottom:16px !important;
  }
  body.mode-web #page-container:has(.ptabs) .ptabs{
    background:rgba(255,255,255,.18);
    border-radius:14px;
    padding:6px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }
  body.mode-web #page-container:has(.ptabs) .ptab{
    border-radius:10px; padding:10px 14px; cursor:pointer;
    transition:background .15s, color .15s;
  }
  body.mode-web #page-container:has(.ptabs) .ptab.on{ background:#fff; }
  body.mode-web #page-container:has(.ptabs) .cnt{ padding:0; background:transparent; }
  /* Task-type rows on practice: turn the single-column list into a
     2-column desktop grid for higher information density. */
  body.mode-web #page-container:has(.ptabs) .ql{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  body.mode-web #page-container:has(.ptabs) .qrow{
    border-radius:18px;
    padding:18px 20px;
    box-shadow:0 6px 22px rgba(230,57,70,.06);
    border:1px solid var(--bdr);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  body.mode-web #page-container:has(.ptabs) .qrow:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(230,57,70,.10);
    border-color:transparent;
  }

  /* ─────────────────────────────────────────────────────────
     MOCK TEST PAGE — exam dashboard
     Detected by: .mock-shell, .mock-stepper or .pkg-list.
     ───────────────────────────────────────────────────────── */
  body.mode-web #page-container:has(.mock-shell) .hero{
    padding:28px 40px 22px;
    margin:24px 0 28px;
    border-radius:24px;
  }
  body.mode-web #page-container:has(.mock-shell) .hero > div[style*="font-size:28px"],
  body.mode-web #page-container:has(.mock-shell) .hero > div[style*="font-size:30px"]{
    font-size:28px !important;
  }
  body.mode-web #page-container:has(.mock-shell) .cnt.mock-shell{ padding:0; background:transparent; }
  body.mode-web #page-container:has(.mock-shell) .mock-stepper{
    margin:0 0 22px;
    padding:14px 18px;
    background:var(--card);
    border-radius:14px;
    box-shadow:0 4px 14px rgba(230,57,70,.06);
  }
  body.mode-web #page-container:has(.mock-shell) .mock-step-dot{ width:30px; height:30px; font-size:13px; }
  body.mode-web #page-container:has(.mock-shell) .mock-step-label{ font-size:12px; }
  body.mode-web #page-container:has(.mock-shell) .mock-info-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  }
  body.mode-web #page-container:has(.mock-shell) .mock-hero-card{
    padding:22px 22px 20px;
  }
  body.mode-web #page-container:has(.mock-shell) .mock-intro-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.mode-web #page-container:has(.mock-shell) .mock-stat-card{
    border-radius:14px;
    padding:12px 14px;
  }
  body.mode-web #page-container:has(.mock-shell) .mock-paper-card:hover{
    background:#faf9f7;
  }
  /* Paper-selection grid (Paper A / B / C) — three across on desktop. */
  body.mode-web #page-container:has(.mock-shell) .pkg-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  body.mode-web #page-container:has(.mock-shell) .pkg{
    border-radius:14px;
    padding:11px 12px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  body.mode-web #page-container:has(.mock-shell) .pkg:hover{
    transform:translateY(-3px); box-shadow:0 16px 36px rgba(230,57,70,.10);
  }
  body.mode-web #page-container:has(.mock-shell) .pkg-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.mode-web #page-container:has(.mock-shell) .mock-phase-panel{
    max-width:520px;
  }

  /* ─────────────────────────────────────────────────────────
     PROFILE PAGE — 2-column account dashboard
     Detected by: .prof-hero (unique to the profile page).
     ───────────────────────────────────────────────────────── */
  body.mode-web #page-container:has(.prof-hero){
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    column-gap:32px;
    align-items:start;
    padding-top:24px;
  }
  /* Left identity sidebar: stack prof-hero + sf stats into one column. */
  body.mode-web #page-container:has(.prof-hero) > .prof-hero{
    grid-column:1; grid-row:1;
    margin:0 0 18px;
    padding:32px 28px 28px;
    border-radius:24px;
    box-shadow:0 16px 40px rgba(230,57,70,.14);
  }
  body.mode-web #page-container:has(.prof-hero) > .prof-hero .ava{
    width:84px; height:84px; font-size:42px; margin:8px auto 12px;
  }
  body.mode-web #page-container:has(.prof-hero) > .prof-hero .pn{ font-size:20px; text-align:center; }
  body.mode-web #page-container:has(.prof-hero) > .prof-hero .pt{ text-align:center; }
  body.mode-web #page-container:has(.prof-hero) > .prof-hero .pb{ justify-content:center; flex-wrap:wrap; gap:6px; }
  body.mode-web #page-container:has(.prof-hero) > .sf{
    grid-column:1; grid-row:2;
    margin:0 0 18px;
    padding:18px;
    border-radius:18px;
    background:var(--card);
    box-shadow:0 6px 22px rgba(230,57,70,.06);
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  }
  /* Right main column: account/progress cards. */
  body.mode-web #page-container:has(.prof-hero) > .cnt{
    grid-column:2; grid-row:1 / span 99;
    padding:0;
    background:transparent;
  }
  body.mode-web #page-container:has(.prof-hero) > .cnt .bcard{
    border-radius:18px;
    padding:20px 22px;
    margin-bottom:14px;
    box-shadow:0 6px 22px rgba(230,57,70,.06);
    border:1px solid var(--bdr);
  }
  body.mode-web #page-container:has(.prof-hero) > .cnt .mg{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  }
  body.mode-web #page-container:has(.prof-hero) > .cnt .mi{
    border-radius:16px; padding:16px 18px; gap:14px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  body.mode-web #page-container:has(.prof-hero) > .cnt .mi:hover{
    transform:translateY(-2px); box-shadow:0 12px 28px rgba(230,57,70,.10);
  }

  /* ─────────────────────────────────────────────────────────
     LEGAL / PRIVACY / TERMS / SUPPORT — readable article width
     Detected by: .dheader is the static-page header.
     ───────────────────────────────────────────────────────── */
  body.mode-web #page-container:has(.dheader){
    max-width:920px;
    padding:0 32px 64px;
  }
  body.mode-web #page-container:has(.dheader) .dheader{
    padding:32px 36px 28px;
    border-radius:22px;
    margin:24px 0 24px;
  }
  body.mode-web #page-container:has(.dheader) .dtitle{ font-size:30px; }
  body.mode-web #page-container:has(.dheader) .cnt{ padding:0 !important; background:transparent; }
  body.mode-web #page-container:has(.dheader) .prompt-card{
    border-radius:18px;
    padding:22px 26px;
    box-shadow:0 6px 22px rgba(230,57,70,.06);
    border:1px solid var(--bdr);
    margin-bottom:16px;
  }
}

/* ─── Full Mock Exam Options — Text Size & High Contrast ─────────────────── */

/* Large text: zoom the first child of page-container (the exam shell div) */
#page-container.exam-text-large > :first-child {
  zoom: 1.1;
}
/* Fallback for browsers where zoom behaves oddly — also boost base font */
#page-container.exam-text-large {
  font-size: 17px;
}

/* High contrast: boost text/border visibility without dark mode */
#page-container.exam-display-high-contrast {
  filter: contrast(1.3) saturate(0.95);
}
/* Extra border strength for inputs/selects inside exam */
#page-container.exam-display-high-contrast input,
#page-container.exam-display-high-contrast select,
#page-container.exam-display-high-contrast textarea {
  border-color: #374151 !important;
  outline: none;
}
#page-container.exam-display-high-contrast input:focus,
#page-container.exam-display-high-contrast select:focus,
#page-container.exam-display-high-contrast textarea:focus {
  outline: 2px solid #1f4d8f !important;
  outline-offset: 1px;
}

/* ─── Dark mode contrast improvements ─────────────────────────────────────── */

/* Hero stat cards — already on gradient bg, keep white text legible */
body.dark .sc { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); }
body.dark .sc-l { color:rgba(255,255,255,.88); }
body.dark .daily-s { color:rgba(255,255,255,.88); }
body.dark .daily-sub { color:rgba(255,255,255,.82); }
body.dark .daily-t { color:#fff; }

/* Skill cards (.skc) — cards on dark bg */
body.dark .skc { background:#2a1818; border:1px solid #4a2828; }
body.dark .skn { color:#f8f0f0; }
body.dark .skq { color:#c4a8a8; }
body.dark .skt-t { color:#c4a8a8; }

/* Quick question cards (.qc) */
body.dark .qc { background:#2a1818; border:1px solid #4a2828; }
body.dark .qn { color:#f8f0f0; }

/* Question row items (.qrow) */
body.dark .qrow { background:#2a1818; border:1px solid #4a2828; }
body.dark .qi-n { color:#f8f0f0; }
body.dark .qi-c { color:#c4a8a8; }
body.dark .qi-sl { color:#c4a8a8; }
body.dark .qi-sv { color:var(--text); }

/* Today's daily task card */
body.dark .daily { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.2); }

/* ── Topnav responsive: search shrinks first, never wraps nav labels ──────── */
@media (min-width:1024px) and (max-width:1280px){
  body.mode-web .topnav-inner{ padding:0 24px; gap:8px; }
  body.mode-web .topnav-search{ max-width:260px; min-width:120px; }
  body.mode-web .topnav-tab{ padding:9px 8px; }
}
@media (min-width:1024px) and (max-width:1100px){
  body.mode-web .topnav-search{ max-width:180px; min-width:100px; }
  body.mode-web .topnav-inner{ gap:6px; padding:0 16px; }
  body.mode-web .topnav-logo-text{ font-size:14px; }
  body.mode-web .topnav-tab{ padding:9px 6px; font-size:12px; }
  body.mode-web .topnav-download{ padding:0 8px; font-size:12px; }
}

/* Top nav — web mode */
body.dark #web-topnav { background:var(--nav); border-bottom:1px solid #3a2020; }
body.dark .topnav-tab { color:#d4b8b8; }
body.dark .topnav-tab.active { color:#fff; }
body.dark .topnav-search { background:rgba(255,255,255,.08); border-color:#4a2828; }
body.dark .topnav-search-input { color:#f0e0e0; }
body.dark .topnav-search-input::placeholder { color:#9a7878; }
body.dark .topnav-download { color:#f0e0e0; border-color:#4a2828; background:rgba(255,255,255,.08); }
body.dark .topnav-logo-text { color:#f8f0f0; }

/* Bottom nav */
body.dark #bottom-nav { background:var(--nav); border-top:1px solid #3a2020; }
body.dark .bnav-btn { color:#b09090; }
body.dark .bnav-btn.active { color:var(--p); }

/* Section headers */
body.dark .st { color:#f8f0f0; }
body.dark .sl { color:var(--p); }
body.dark .scnt { color:#c4a8a8; }

/* General mcard / prompt-card in dark */
body.dark .mcard { background:#2a1818; border:1px solid #4a2828; }

/* Settings / profile menu rows */
body.dark .mi { border-bottom-color:#3a2020; }
body.dark .m-n { color:#f8f0f0; }
body.dark .m-s { color:#c4a8a8; }
body.dark .m-ar { color:#c4a8a8; }

/* Disabled / secondary buttons */
body.dark button:disabled,
body.dark .sbtn:disabled {
  color:#9ca3af !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
  opacity:1 !important;
}
body.dark .sbtn { background:var(--p); color:#fff !important; font-weight:700; }

/* Score/band display */
body.dark .bsc { color:var(--text); }
body.dark .bl { color:inherit; }

/* Web-mode home specific desktop layout */
body.mode-web.dark .sg .skc { border:1px solid #4a2828; }
body.mode-web.dark .skt { border-top-color:#4a2828; }

/* Vocabulary and recent records */
body.dark .rec-t,
body.dark .rec-b { color:#f8f0f0; }
body.dark .rec-s { color:#c4a8a8; }

/* Home daily recommendation section */
body.dark .sh + .mcard,
body.dark .cnt .mcard { background:#2a1818; border:1px solid #4a2828; }

/* ─── Pro Comparison Table ───────────────────────────────────────────────── */
.pro-cmp-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--bdr);
  margin-bottom: 2px;
}
.pro-cmp-col {
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  font-family: var(--ft);
  letter-spacing: .2px;
}
.pro-cmp-feature-col { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: .4px; }
.pro-cmp-free-col  { color: var(--sub); }
.pro-cmp-pro-col   { color: var(--p); }

.pro-cmp-body { display: flex; flex-direction: column; }
.pro-cmp-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 6px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bdr);
  align-items: start;
}
.pro-cmp-row:last-child { border-bottom: none; }
.pro-cmp-row--highlight { background: rgba(230,57,70,.03); border-radius: 10px; padding: 11px 8px; margin: 0 -8px; }
.pro-cmp-feature {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--ft);
  line-height: 1.4;
}
.pro-cmp-free {
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  text-align: center;
  line-height: 1.5;
  white-space: pre-line;
}
.pro-cmp-pro {
  font-size: 11px;
  font-weight: 700;
  color: var(--p);
  text-align: center;
  line-height: 1.5;
  white-space: pre-line;
  background: rgba(230,57,70,.07);
  border-radius: 8px;
  padding: 4px 6px;
}

/* Mobile: stack into 2-col (feature spans full width) */
@media (max-width: 440px) {
  .pro-cmp-header, .pro-cmp-row {
    grid-template-columns: 1fr 1fr;
  }
  .pro-cmp-feature-col { display: none; }
  .pro-cmp-feature {
    grid-column: 1 / -1;
    font-size: 12px;
    padding-bottom: 4px;
  }
  .pro-cmp-row--highlight { margin: 0 -4px; padding: 11px 4px; }
}

/* ─── Web Footer ──────────────────────────────────────────────────────────── */
#web-footer {
  width: 100%;
  border-top: 1.5px solid var(--bdr);
  background: var(--card);
  padding: 48px 24px 32px;
  box-sizing: border-box;
  margin-top: 0;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}
.footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.footer-brand-logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.footer-brand-name { font-size: 17px; font-weight: 900; color: var(--text); font-family: var(--ft); }
.footer-brand-desc { font-size: 12px; color: var(--sub); font-weight: 600; line-height: 1.7; margin-bottom: 14px; }
.footer-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 12px;
  border: 1.5px solid var(--bdr);
  background: var(--card2);
  font-size: 11px;
  color: var(--sub);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  padding: 8px;
}
.footer-col-title {
  font-size: 10px;
  font-weight: 900;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 12px;
  font-family: var(--ft);
}
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: var(--fb);
  text-decoration: none;
  display: block;
  transition: color .12s;
}
.footer-link:hover { color: var(--p); }
.footer-link--pro { color: var(--p); }
.footer-bottom {
  max-width: 1100px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-copy { font-size: 11px; color: var(--sub); font-weight: 600; }
.footer-heart { font-size: 11px; color: var(--sub); font-weight: 600; }

/* Tablet: 2-col footer */
@media (max-width: 768px) and (min-width: 480px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Dark mode footer */
body.dark #web-footer { background: var(--card); }
body.dark .footer-link { color: #e8d0d0; }
body.dark .footer-link:hover { color: #ff8fab; }
body.dark .footer-link--pro { color: #ff8fab; }