*{box-sizing:border-box}
:root{
  --bg:#f6f8fc;
  --bg2:#eef4fb;
  --panel:#ffffff;
  --text:#1f2a44;
  --muted:#65718a;
  --line:#dfe8f5;
  --primary:#607fe8;
  --primary-dark:#3f63cf;
  --primary-soft:#eef3ff;
  --lavender:#8b7bd8;
  --lavender-soft:#f4f1ff;
  --mint:#6fb8a8;
  --coral:#d88970;
  --shadow:0 14px 36px rgba(54,82,134,.08);
}

/*
 * Cross-document navigation enhancement
 *
 * Every route remains a real HTML document. Browsers that support the
 * cross-document View Transitions API keep the shared navbar in place while
 * the new document is painted; older browsers simply ignore this block and
 * use the existing navigation lifecycle.
 */
@view-transition{
  navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:180ms;
  animation-timing-function:var(--ease-ui,cubic-bezier(.23,1,.32,1));
}

::view-transition-old(site-nav),
::view-transition-new(site-nav){
  animation:none;
}

/* Keep the fixed shell's footprint stable while navbar.html is fetched. */
#navbar:empty{
  position:fixed;
  inset:0 0 auto;
  z-index:4000;
  min-height:66px;
  background:#fff;
  border-bottom:1px solid rgba(226,234,245,.9);
  box-shadow:0 6px 20px rgba(39,73,124,.06);
}

#navbar{
  position:relative;
  z-index:4000;
  isolation:isolate;
  view-transition-name:site-nav;
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(site-nav),
  ::view-transition-old(site-nav),
  ::view-transition-new(site-nav){
    animation-duration:1ms !important;
  }
}

/* Listen and Respond · compact set/module navigator */
.listening-list-grid.is-response-grouped{
  display:block;
}

.lr-set-list{
  display:grid;
  gap:16px;
}

.lr-set{
  overflow:hidden;
  border:1px solid #e1e2ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 12px rgba(40,42,77,.045);
}

.lr-set-review-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px 0;
  color:#68748e;
  font-size:12px;
  font-weight:800;
}

.lr-set-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  background:#fbfbff;
  border-bottom:1px solid #eeeef5;
}

.lr-set-title{
  min-width:0;
  margin:0;
  color:var(--library-ink,#17233d);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.01em;
}

.lr-set-summary,
.lr-module-score{
  color:#7a8195;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.lr-module-list{
  display:flex;
  flex-direction:column;
}

.lr-module-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:12px 18px;
}

.lr-module-row.no-module-label{
  grid-template-columns:minmax(0,1fr) auto;
}

.lr-module-row + .lr-module-row{
  border-top:1px solid #f0f0f6;
}

.lr-module-title{
  color:#59627a;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}

.lr-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.lr-item{
  display:inline-flex;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid #d8dbe6;
  border-radius:10px;
  background:#fff;
  color:#384057;
  font-size:11px;
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform 160ms var(--ease-ui,cubic-bezier(.23,1,.32,1)), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms var(--ease-ui,cubic-bezier(.23,1,.32,1));
}

.lr-item:hover{
  transform:translateY(-2px);
  border-color:#c2c5d5;
  box-shadow:0 6px 14px rgba(40,42,77,.10);
}

.lr-item.completed{
  border-color:#8b8bd9;
  background:#eeeeff;
  color:#5f5fc2;
}

.lr-item.correct{
  border-color:#16a34a;
  background:#16a34a;
  color:#fff;
}

.lr-item.wrong{
  border-color:#dc2626;
  background:#dc2626;
  color:#fff;
}

@media (max-width:700px){
  .lr-set-header{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    padding:14px 15px;
  }

  .lr-set-review-row{
    padding-left:15px;
    padding-right:15px;
  }

  .lr-module-row{
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    padding:11px 15px;
  }

  .lr-module-row.no-module-label{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .lr-module-score{
    font-size:11px;
  }

  .lr-grid{
    gap:7px;
  }

  .lr-item{
    flex-basis:40px;
    width:40px;
    height:40px;
  }
}

html,body{margin:0;padding:0;overflow-x:hidden}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{
  text-decoration:none;
  color:inherit;
}

/* ===== Navbar ===== */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:4000;
  background:#fff;
  border-bottom:1px solid rgba(226,234,245,.9);
  box-shadow:0 6px 20px rgba(39,73,124,.06);
}

.nav-inner{
  max-width:1180px;
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-width:0;
  flex-wrap:nowrap;
}

.logo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.05;
  min-width:max-content;
  flex:0 0 auto;
}

.logo-main{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next Rounded","Arial Rounded MT Bold",-apple-system,sans-serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--text);
}

.logo-sub{
  margin-top:3px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  flex-wrap:nowrap;
  scrollbar-width:none;
}

.nav-links::-webkit-scrollbar{
  display:none;
}

.auth-nav{display:flex;align-items:center;gap:8px;min-width:max-content;flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
.auth-nav button{border:0;border-radius:999px;padding:8px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.auth-account{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.auth-avatar{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--primary-dark);font-size:12px}
.auth-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-login,.auth-account{background:var(--primary-soft);color:var(--primary-dark)}
.auth-signup{background:var(--primary);color:#fff}
.auth-profile{background:var(--lavender-soft);color:#6856c5}
.auth-logout{background:#edf1f7;color:var(--muted)}
.auth-loading{font-size:12px;color:var(--muted)}
.auth-unavailable{font-size:12px;color:var(--muted);white-space:nowrap}
.auth-retry{background:var(--primary-soft);color:var(--primary-dark)}
.auth-retry:disabled{opacity:.65;cursor:wait}
.auth-modal{display:none;position:fixed;inset:0;z-index:5000;align-items:center;justify-content:center;padding:20px}
.auth-modal.open{display:flex}.auth-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(4px)}
body.auth-practice-locked{overflow:hidden}
body.auth-practice-locked > :not(#authModal):not(#navbar){pointer-events:none;user-select:none;filter:blur(2px)}
body.auth-practice-locked > #navbar{pointer-events:none;user-select:none}
body.auth-practice-locked > #navbar .nav-inner{filter:blur(2px)}
body.auth-practice-locked .auth-close,body.auth-practice-locked [data-auth-close]{display:none}
body.auth-practice-unavailable{overflow:hidden}
body.auth-practice-unavailable > :not(#authModal):not(#navbar):not(#authPracticeUnavailable){pointer-events:none;user-select:none;filter:blur(2px)}
body.auth-practice-unavailable > #navbar .nav-links{pointer-events:none;user-select:none}
#authPracticeUnavailable{
  position:fixed;
  inset:0;
  z-index:3500;
  display:grid;
  place-items:center;
  padding:calc(var(--hang-nav-height, 66px) + 24px) 20px 24px;
  background:rgba(246,248,252,.82);
  pointer-events:auto;
  user-select:auto;
}
#authPracticeUnavailable .auth-practice-unavailable-dialog{
  width:min(460px,100%);
  max-height:100%;
  overflow:auto;
  transform:none;
  transition:none;
}
#authPracticeUnavailable .auth-practice-unavailable-retry{margin-top:4px}
.auth-dialog{position:relative;width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 25px 70px rgba(15,23,42,.25)}
.auth-dialog [hidden]{display:none !important}
.auth-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:var(--muted);font-size:26px;cursor:pointer}
.auth-kicker{color:var(--primary-dark);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase}.auth-dialog h2{font-size:30px;margin:8px 0}.auth-intro{margin:0 0 20px;color:var(--muted);line-height:1.6}
.auth-dialog label{display:block;font-size:13px;font-weight:800;margin:13px 0;color:var(--text)}.auth-dialog input{display:block;width:100%;margin-top:7px;border:1px solid #cbd5e1;border-radius:12px;padding:12px 13px;font:inherit;outline:none}.auth-dialog input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.auth-dialog input:disabled{background:#f7f9fd;color:var(--muted)}
.auth-submit{width:100%;margin-top:8px;border:0;border-radius:12px;padding:13px;background:var(--primary);color:#fff;font:inherit;font-weight:900;cursor:pointer}.auth-submit:disabled{opacity:.65;cursor:wait}
.auth-message{min-height:22px;margin-top:12px;font-size:13px;text-align:center;color:var(--muted)}.auth-message.success{color:#15803d}.auth-message.error{color:#b91c1c}
.auth-switches{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px}.auth-switches button{border:0;background:transparent;color:var(--primary-dark);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.auth-notice{position:fixed;left:50%;top:82px;z-index:6000;max-width:min(560px,calc(100vw - 28px));transform:translate(-50%,-14px);opacity:0;border:1px solid #bbf7d0;border-radius:16px;padding:13px 16px;background:#f0fdf4;color:#166534;font-size:14px;font-weight:800;line-height:1.5;box-shadow:0 16px 40px rgba(15,23,42,.14);transition:.22s ease}.auth-notice.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}.auth-notice.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  /* Keep every primary destination in the viewport. The desktop shell stays
     one line, while narrow layouts use a compact account row followed by a
     wrapping destination row instead of requiring horizontal dragging. */
  .nav-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "logo auth"
      "links links";
    align-items:center;
    column-gap:9px;
    row-gap:6px;
    overflow:visible;
  }
  .nav-inner::-webkit-scrollbar{display:none}
  .logo{grid-area:logo}
  .nav-links{
    grid-area:links;
    width:100%;
    flex:0 0 auto;
    min-width:0;
    overflow:visible;
    flex-wrap:wrap;
    gap:6px;
    padding:1px 0 3px;
  }
  .auth-nav{
    grid-area:auth;
    justify-content:flex-end;
    margin-left:0;
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
  }
  .auth-account{max-width:min(132px,40vw)}
  .auth-unavailable{font-size:11px}
  .auth-nav .auth-retry{padding:7px 10px;font-size:12px}
  .auth-dialog{padding:24px 20px}
}

/* Tablet widths keep the same no-drag destination contract as phones. At
   761–900px the desktop one-line row cannot expose every destination and
   account control simultaneously, so use the same measured two-row grid. */
@media (min-width:761px) and (max-width:900px){
  .nav-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "logo auth"
      "links links";
    align-items:center;
    column-gap:9px;
    row-gap:6px;
    overflow:visible;
  }
  .nav-inner::-webkit-scrollbar{display:none}
  .logo{grid-area:logo}
  .nav-links{
    grid-area:links;
    width:100%;
    flex:0 0 auto;
    min-width:0;
    overflow:visible;
    flex-wrap:wrap;
    gap:6px;
    padding:1px 0 3px;
  }
  .auth-nav{
    grid-area:auth;
    justify-content:flex-end;
    margin-left:0;
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
  }
  .auth-account{max-width:min(190px,28vw)}
}

.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  color:var(--muted);
  transition:.2s;
}

.nav-links a:hover{
  background:var(--primary-soft);
  color:var(--primary-dark);
}

.nav-links a.active{
  background:var(--primary-soft);
  color:var(--primary-dark);
}

.mock-shell{
  max-width:1240px;
  margin:0 auto;
  padding:96px 20px 70px;
}

.mock-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:34px 38px;
  margin-bottom:22px;
}

.mock-hero h1{
  margin:8px 0 10px;
  font-size:clamp(34px,5vw,56px);
  line-height:1;
}

.mock-hero p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.mock-hero-link,
.mock-start,
.mock-reset,
.mock-primary,
.mock-secondary,
.mock-viewer-top button,
.mock-viewer-bottom button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  font:inherit;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
}

.mock-hero-link{
  min-width:max-content;
  padding:12px 16px;
  background:var(--primary-soft);
  color:var(--primary-dark);
}

.mock-table-card{
  padding:28px;
  overflow:hidden;
}

.mock-table-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.mock-table-top h2{
  margin:4px 0 0;
  font-size:28px;
}

.mock-table-top p{
  max-width:680px;
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.65;
}

.mock-reset{
  padding:10px 14px;
  background:#edf1f7;
  color:var(--muted);
}

.mock-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
}

.mock-table{
  width:100%;
  border-collapse:collapse;
  min-width:920px;
  background:#fff;
}

.mock-table th,
.mock-table td{
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:15px 14px;
  text-align:center;
  vertical-align:middle;
}

.mock-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fbff;
  color:var(--text);
  font-size:15px;
}

.mock-table tr:last-child td{
  border-bottom:0;
}

.mock-table th:last-child,
.mock-table td:last-child{
  border-right:0;
}

.mock-table td:nth-child(2){
  text-align:left;
  min-width:190px;
}

.mock-table td:nth-child(2) strong{
  display:block;
  font-size:17px;
}

.mock-table td:nth-child(2) span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.mock-start{
  min-width:88px;
  padding:10px 13px;
  background:#b7bec8;
  color:#fff;
}

.mock-start:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,99,235,.16);
}

.mock-start.done{
  background:#dbeafe;
  color:#1d4ed8;
}

.mock-start.full{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
}

.mock-start.disabled{
  background:#eef2f7;
  color:#94a3b8;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

.mock-set-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));
  gap:18px;
}

.mock-set-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:220px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(96,127,232,.14), transparent 32%),
    linear-gradient(135deg,#fff 0%,#fbfcff 62%,#f6f3ff 100%);
  box-shadow:0 16px 38px rgba(54,82,134,.075);
  overflow:hidden;
}

.mock-set-card::after{
  content:"";
  position:absolute;
  inset:14px;
  pointer-events:none;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.72);
}

.mock-set-main,
.mock-mode-panel{
  position:relative;
  z-index:1;
}

.mock-set-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  column-gap:18px;
  min-width:0;
  padding:8px 4px 8px 8px;
}

.mock-set-kicker{
  width:max-content;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mock-set-main h3{
  margin:0;
  color:var(--text);
  font-size:clamp(24px,2.2vw,34px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.mock-set-main p{
  margin:10px 0 18px;
  color:var(--muted);
  font-weight:750;
  line-height:1.6;
}

.mock-set-progress{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  color:var(--muted);
}

.mock-mode-panel{
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr);
  gap:12px;
  padding:12px;
  border:1px solid rgba(223,232,245,.9);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
}

.mock-full-start,
.mock-section-start{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  border:1px solid transparent;
  text-decoration:none;
  font:inherit;
  font-weight:950;
  transition:transform 140ms cubic-bezier(.23,1,.32,1), box-shadow 180ms cubic-bezier(.23,1,.32,1), border-color 180ms ease, background 180ms ease;
}

.mock-full-start:active,
.mock-section-start:active,
.mock-reset:active,
.mock-hero-link:active{
  transform:scale(.98);
}

.mock-full-start{
  min-height:70px;
  flex-direction:column;
  gap:2px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--lavender));
  color:#fff;
  box-shadow:0 14px 26px rgba(96,127,232,.24);
}

.mock-full-start small{
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:850;
}

.mock-section-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.mock-section-cell{
  display:grid;
  grid-template-rows:minmax(70px,1fr) auto;
  gap:6px;
  min-width:0;
}

.mock-section-report-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  padding:2px 4px;
  border-radius:10px;
  color:var(--primary-dark);
  font-size:12px;
  font-weight:850;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
}

.mock-section-report-link:hover{
  text-decoration:underline;
}

.mock-section-report-link:focus-visible{
  outline:3px solid rgba(96,127,232,.42);
  outline-offset:2px;
}

.mock-section-start{
  min-height:70px;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border-color:#e0e8f5;
  border-radius:16px;
  background:#fff;
  color:var(--text);
}

.mock-section-start:hover,
.mock-full-start:hover{
  transform:translateY(-1px);
}

.mock-section-start:hover{
  border-color:#cdd9ff;
  background:var(--primary-soft);
  box-shadow:0 10px 22px rgba(54,82,134,.09);
}

.mock-section-start.done{
  border-color:#cdd9ff;
  background:linear-gradient(180deg,#f7f9ff,#eef3ff);
  color:var(--primary-dark);
}

.mock-section-title{
  color:inherit;
  font-size:17px;
  line-height:1.15;
}

.mock-section-subtitle{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  line-height:1.2;
}

.mock-section-start.done .mock-section-subtitle{
  color:var(--primary-dark);
}

.mock-progress-dots{
  display:inline-flex;
  gap:5px;
  margin-right:8px;
  vertical-align:middle;
}

.mock-dot{
  width:18px;
  height:18px;
  border-radius:6px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
}

.mock-dot.done{
  background:#dbeafe;
  border-color:#93c5fd;
}

.mock-progress-text{
  color:var(--muted);
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:980px){
  .mock-set-main{
    grid-template-columns:1fr;
  }

  .mock-set-progress{
    justify-content:flex-start;
  }

  .mock-mode-panel{
    grid-template-columns:1fr;
  }
}

.mock-practice-shell{
  max-width:1180px;
  margin:0 auto;
  padding:96px 20px 70px;
}

.mock-practice-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  padding:28px 32px;
  margin-bottom:16px;
}

.mock-practice-head h1{
  margin:8px 0;
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
}

.mock-practice-head p{
  margin:0;
  color:var(--muted);
}

.mock-practice-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.mock-primary,
.mock-secondary{
  padding:12px 16px;
}

.mock-primary{
  background:var(--primary);
  color:#fff;
}

.mock-secondary{
  background:var(--lavender-soft);
  color:#6856c5;
}

.mock-section-tabs{
  position:sticky;
  top:74px;
  z-index:20;
  display:flex;
  gap:10px;
  overflow:auto;
  padding:10px 0 16px;
  background:var(--bg);
}

.mock-section-tabs a{
  min-width:max-content;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-weight:900;
  text-decoration:none;
}

.mock-section-tabs a.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.mock-section-tabs a.done:not(.active){
  background:#eff6ff;
  color:#1d4ed8;
}

.mock-audio,
.mock-writing,
.mock-viewer{
  padding:22px;
  margin-bottom:16px;
}

.mock-audio h2,
.mock-writing h2{
  margin:5px 0 14px;
}

.mock-audio label{
  display:block;
  color:var(--muted);
  font-weight:900;
  margin:12px 0;
}

.mock-audio audio{
  display:block;
  width:100%;
  margin-top:8px;
}

.mock-writing textarea{
  width:100%;
  min-height:240px;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid #cbd5e1;
  border-radius:14px;
  padding:14px;
  font:inherit;
  line-height:1.65;
}

.mock-note{
  color:var(--muted);
  line-height:1.65;
}

.mock-viewer-top,
.mock-viewer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.mock-viewer-bottom{
  margin:18px 0 0;
}

.mock-viewer-top button,
.mock-viewer-bottom button{
  padding:10px 14px;
  background:#edf1f7;
  color:var(--text);
}

.mock-viewer-top button:disabled,
.mock-viewer-bottom button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.mock-viewer img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

@media(max-width:760px){
  .mock-hero,
  .mock-practice-head{
    align-items:flex-start;
    flex-direction:column;
    padding:24px 20px;
  }

  .mock-table-card,
  .mock-audio,
  .mock-writing,
  .mock-viewer{
    padding:16px;
  }

  .mock-table-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .mock-set-grid{
    grid-template-columns:1fr;
  }

  .mock-set-card{
    min-height:0;
    padding:16px;
    border-radius:22px;
  }

  .mock-mode-panel{
    border-radius:18px;
  }

  .mock-section-start{
    min-height:58px;
  }

  .mock-section-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mock-section-tabs{
    top:112px;
  }
}

.page-shell{
  max-width:1180px;
  margin:0 auto;
  padding:calc(var(--hang-nav-height, 66px) + 30px) 20px 60px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

/* ===== Home ===== */

.home-shell{
  max-width:1220px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:18px;
  align-items:start;
}

.home-dashboard{
  display:contents;
}

.home-welcome{
  grid-column:1;
}

.home-welcome{
  padding:30px 34px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-kicker,.panel-label{
  color:var(--lavender);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.home-welcome h1{
  margin:9px 0 12px;
  font-size:44px;
  line-height:1.12;
}

.home-welcome p{
  margin:0;
  max-width:620px;
  color:var(--muted);
  font-size:19px;
  line-height:1.8;
}

.home-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.home-primary-action,.home-secondary-action,.home-refresh{
  border:0;
  border-radius:12px;
  min-height:42px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.home-primary-action{
  color:#fff;
  background:var(--primary);
  box-shadow:0 12px 24px rgba(96,127,232,.24);
}

.home-secondary-action,.home-refresh{
  color:var(--primary-dark);
  background:var(--primary-soft);
}

.home-secondary-action.wide{
  width:100%;
}

.home-week,.home-records,.home-note{
  padding:24px;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.panel-head h2,.home-note h2{
  margin:5px 0 0;
  font-size:22px;
  line-height:1.25;
}

.week-total{
  min-width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-dark);
  background:var(--primary-soft);
  font-size:24px;
  font-weight:900;
}

.week-bars{
  display:grid;
  gap:14px;
}

.week-row{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 22px;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.week-row b{
  color:var(--text);
  text-align:right;
}

.week-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#edf2fa;
}

.week-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--primary);
}

.home-module-grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.module-tile{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:110px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(54,82,134,.05);
  transition:.18s ease;
}

.module-tile:hover{
  transform:translateY(-2px);
  border-color:#cddaf4;
  box-shadow:0 14px 28px rgba(54,82,134,.09);
}

.module-mark{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-dark);
  background:var(--primary-soft);
  font-weight:900;
}

.module-listening .module-mark{color:#417f74;background:#eef8f6}
.module-speaking .module-mark{color:#6856c5;background:var(--lavender-soft)}
.module-writing .module-mark{color:#b86850;background:#fff1ec}

.module-tile strong{
  display:block;
  margin-bottom:5px;
  color:var(--text);
  font-size:18px;
}

.module-tile small{
  display:block;
  color:var(--muted);
  line-height:1.45;
}

.home-lower-grid{
  display:contents;
}

.home-week{
  grid-column:2;
}

.home-records{
  grid-column:1;
}

.home-note{
  grid-column:2;
}

.record-list{
  display:grid;
  gap:10px;
}

.record-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  transition:.18s ease;
}

.record-row:hover{
  border-color:#cbd8f2;
  background:#fbfdff;
}

.record-section{
  width:42px;
  height:42px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-weight:900;
}

.record-section.listening{background:#eef8f6;color:#417f74}
.record-section.speaking{background:var(--lavender-soft);color:#6856c5}
.record-section.writing{background:#fff1ec;color:#b86850}

.record-main{
  min-width:0;
}

.record-main strong,.record-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.record-main strong{
  font-size:15px;
  margin-bottom:4px;
}

.record-main small{
  color:var(--muted);
  font-size:13px;
}

.record-score{
  color:var(--primary-dark);
  background:var(--primary-soft);
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
  font-weight:900;
}

.record-empty{
  padding:22px;
  border:1px dashed #cdd8ea;
  border-radius:14px;
  color:var(--muted);
  background:#fbfdff;
  line-height:1.7;
}

.home-note{
  align-self:stretch;
  background:linear-gradient(180deg,#fff,var(--lavender-soft));
}

.home-note p{
  margin:12px 0 22px;
  color:var(--muted);
  line-height:1.75;
}

/* ===== Home footer follow ===== */

.footer-follow{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:16px;
  padding:24px;
  text-align:center;
}

.footer-follow-main{
  max-width:260px;
}

.footer-follow-title{
  font-size:18px;
  font-weight:800;
  margin:6px 0 8px;
  color:var(--text);
}

.footer-follow-text{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:14px;
}

.footer-follow-qr{
  width:100%;
  display:flex;
  justify-content:center;
}

.footer-follow-qr img{
  width:min(172px, 100%);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(54,82,134,.10);
}

/* ===== Common ===== */

.top-link{
  color:var(--primary-dark);
  font-weight:700;
  display:inline-block;
  margin-bottom:12px;
}

.page-title h1{
  font-size:34px;
  margin:0 0 10px;
}

.page-subtitle{
  color:var(--muted);
}

/* ===== Card grid for section pages ===== */

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.card-grid .card{
  display:block;
  padding:24px;
  transition:.2s;
}

.card-grid .card:hover{
  transform:translateY(-2px);
}

.card-grid h3{
  margin:0 0 10px;
  font-size:20px;
}

.card-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

/* ===== Scene cards ===== */

.scene-card{
  margin-bottom:14px;
  overflow:hidden;
}

.scene-card-direct{
  margin-top:8px;
}

.scene-header{
  width:100%;
  border:none;
  padding:18px 20px;
  background:#f7faff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.scene-name{
  font-size:20px;
  font-weight:700;
  text-align:left;
  line-height:1.4;
}

.scene-arrow{
  color:#9bb3d6;
  font-size:18px;
}

.scene-content{
  display:none;
  padding:18px;
  border-top:1px solid var(--line);
}

.scene-content.open{
  display:block;
}

.lr-instruction-panel{
  padding:14px 18px 16px;
  margin-bottom:16px;
  border:1px solid rgba(148, 163, 184, .28);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 24px rgba(15,23,42,.045);
  text-align:center;
}

.lr-instruction-text{
  max-width:1040px;
  margin:0 auto 12px;
  color:#1f2937;
  font-size:clamp(15px, 1.08vw, 18px);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.5;
}

.lr-instruction-controls{
  display:flex;
  justify-content:center;
}

.lr-instruction-image{
  display:block;
  width:min(520px, 100%);
  height:auto;
  margin:10px auto 18px;
  border:1px solid #d1d5db;
  background:#fff;
}

.lr-practice-layout{
  display:grid;
  grid-template-columns:minmax(260px, 420px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.lr-practice-stack{
  min-width:0;
}

.lr-visual-panel{
  position:sticky;
  top:96px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
}

.lr-practice-image{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #d1d5db;
  background:#fff;
}

.lr-flow-panel{
  margin-bottom:14px;
  padding:14px;
  border:1px solid #dbeafe;
  border-radius:16px;
  background:#eff6ff;
}

.lr-flow-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.lr-flow-status{
  color:#475569;
  font-size:14px;
  line-height:1.6;
}

.lr-countdown{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  color:#1e3a8a;
}

.lr-countdown-number{
  min-width:52px;
  text-align:center;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  border:1px solid #bfdbfe;
  font-size:22px;
}

.lr-floating-timer{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:80;
  transform:translate(-50%, 18px);
  min-width:260px;
  max-width:calc(100vw - 32px);
  padding:12px 20px 14px;
  border:1px solid rgba(79,70,229,.22);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 45px rgba(79,70,229,.18);
  color:#0f172a;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.lr-floating-timer.show{
  opacity:1;
  transform:translate(-50%, 0);
}

.lr-floating-timer-label{
  padding:6px 14px;
  margin:-12px -20px 10px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(135deg, #2563eb, #7c3aed);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lr-floating-timer-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.lr-floating-mic{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#eef2ff;
  color:#4f46e5;
  font-size:18px;
}

.lr-floating-time{
  font-size:32px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.lr-floating-timer-sub{
  margin-top:7px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}

.line-item.active{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  background:#f8fbff;
}

.scene-card.exam-running .manual-control{
  display:none;
}

.scene-card.exam-running .line-text{
  display:none !important;
}

.scene-card.exam-running .mine-btn{
  opacity:.45;
  pointer-events:none;
}

.scene-card.exam-running .line-item{
  opacity:.6;
}

.scene-card.exam-running .line-item.active,
.scene-card.exam-running .line-item.recorded-in-flow{
  opacity:1;
}

.scene-card.exam-running .line-item.active .record-status{
  color:#1e3a8a;
  font-weight:700;
}

/* ===== Speaking ===== */

.line-item{
  display:flex;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  margin-bottom:10px;
}

.sentence-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.play-btn,.record-btn,.mine-btn,.text-toggle-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}

.play-btn{
  background:var(--primary-soft);
}

.line-text{
  font-size:18px;
  line-height:1.7;
}

.hidden-text{
  display:none;
}

.hidden-text.show{
  display:block;
}

.vocab-grid{
  display:none;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.vocab-grid.show{
  display:grid;
}

.vocab-item{
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
}

.toolbar{
  padding:20px;
  margin:18px 0 22px;
}

.helper{
  color:var(--muted);
  font-size:14px;
}

.lr-speed-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 auto;
  margin-top:2px;
  padding:6px 10px;
  border:1px solid rgba(148, 163, 184, .32);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
  color:#64748b;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.01em;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}

.lr-speed-chip:active{
  transform:scale(.97);
}

.lr-speed-value{
  min-width:34px;
  color:#0f172a;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.lr-speed-select{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.select{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:14px;
}

.notice{
  margin-top:12px;
  color:var(--muted);
  line-height:1.6;
}

.set-header{
  margin:12px 0 10px;
}

.set-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.set-header h2{
  margin:0;
  font-size:clamp(24px, 2vw, 30px);
  line-height:1.15;
}

.block-title{
  margin:18px 0 10px;
  font-size:18px;
}

.line-label{
  font-weight:700;
  margin-bottom:8px;
}

.record-status{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.sentence-wrap{
  flex:1;
}

/* ===== Mobile ===== */

@media (max-width:900px){
  .home-shell{
    display:block;
  }

  .home-dashboard,.home-lower-grid{
    display:block;
  }

  .home-week,.home-records,.home-note,.home-module-grid{
    margin-top:18px;
  }

  .home-module-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .lr-practice-layout{
    grid-template-columns:1fr;
  }

  .lr-visual-panel{
    position:static;
  }

  .card-grid{
    grid-template-columns:1fr;
  }

  .home-grid{
    grid-template-columns:1fr;
  }

  .footer-follow{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-follow-qr img{
    width:140px;
    height:140px;
  }
}

@media (max-width:700px){
  .nav-inner{padding:10px 16px}

  .nav-links{margin:0}

  .auth-nav{width:auto;overflow:visible;padding-bottom:2px}

  .auth-nav button{
    flex:0 0 auto;
  }

  .nav-links a{
    padding:8px 12px;
    font-size:14px;
  }

  .page-shell{
    padding-top:188px;
  }

  .home-welcome{
    padding:26px 22px;
    min-height:0;
  }

  .home-welcome h1{
    font-size:34px;
  }

  .home-welcome p{
    font-size:16px;
  }

  .home-module-grid{
    grid-template-columns:1fr;
  }

  .module-tile{
    min-height:92px;
  }

  .record-row{
    grid-template-columns:38px minmax(0,1fr);
  }

  .record-score{
    grid-column:2;
    justify-self:flex-start;
  }

  .module-card h2{
    font-size:26px;
  }

}

/* Admin analytics dashboard */
.auth-admin{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.analytics-shell{max-width:1240px;margin:0 auto;padding:32px 20px 72px;}
.analytics-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px;}
.analytics-hero h1{margin:5px 0 8px;font-size:38px;letter-spacing:-.04em;}
.analytics-kicker{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#2563eb;}
.analytics-subtitle{margin:0;color:#64748b;}
.analytics-actions{display:flex;gap:8px;flex-wrap:wrap;}
.analytics-range,.analytics-refresh{border:1px solid #dbe3ef;background:#fff;border-radius:12px;padding:9px 14px;font-weight:800;cursor:pointer;}
.analytics-range.active{background:#111827;color:#fff;border-color:#111827;}
.analytics-status{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:#f8fafc;color:#64748b;}
.analytics-status.error{background:#fff1f2;color:#be123c;}
.analytics-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:18px;}
.analytics-stat{min-width:0;padding:17px;border:1px solid #e2e8f0;border-radius:17px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05);}
.analytics-stat span{display:block;color:#64748b;font-size:13px;font-weight:800;}
.analytics-stat strong{display:block;margin-top:8px;overflow:hidden;font-size:28px;letter-spacing:-.04em;text-overflow:ellipsis;white-space:nowrap;}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:18px;margin-top:18px;}
.analytics-panel{padding:20px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.04);}
.analytics-panel h2{margin:0 0 4px;font-size:20px;}
.analytics-panel-note{margin:0 0 18px;color:#94a3b8;font-size:13px;}
.analytics-bars{display:flex;align-items:flex-end;gap:6px;height:220px;padding-top:12px;overflow-x:auto;}
.analytics-bar-group{display:flex;flex:1 0 20px;min-width:20px;height:100%;align-items:flex-end;gap:2px;position:relative;}
.analytics-bar{width:33.333%;min-height:2px;border-radius:5px 5px 2px 2px;background:#2563eb;}
.analytics-bar.users{background:#f59e0b;}
.analytics-bar.paid{background:#8b5cf6;}
.analytics-bar-group small{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:9px;color:#94a3b8;white-space:nowrap;}
.analytics-bars-wrap{padding-bottom:24px;}
.analytics-legend{display:flex;flex-wrap:wrap;gap:16px;color:#64748b;font-size:12px;font-weight:700;}
.analytics-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;background:#2563eb;}.analytics-legend i.users{background:#f59e0b;}.analytics-legend i.paid{background:#8b5cf6;}
.analytics-list{display:grid;gap:12px;}
.analytics-list-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr auto;gap:10px;align-items:center;font-size:13px;}
.analytics-list-track{height:9px;background:#eef2f7;border-radius:99px;overflow:hidden;}.analytics-list-fill{height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:inherit;}
.analytics-table-scroll{overflow:auto;}
.analytics-table{width:100%;border-collapse:collapse;font-size:13px;}.analytics-table th,.analytics-table td{text-align:left;padding:10px 8px;border-bottom:1px solid #eef2f7;}.analytics-table th{color:#64748b;font-size:12px;white-space:nowrap;}
.analytics-daily-table-scroll{margin-top:28px;border-top:1px solid #eef2f7;}
.analytics-daily-table{min-width:650px;}
.analytics-daily-table td:not(:first-child),.analytics-daily-table th:not(:first-child){text-align:right;}
.analytics-daily-table tbody tr:hover{background:#fbfdff;}
.analytics-membership-panel{margin-top:18px;}
.analytics-membership-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:2px;}
.analytics-membership-header .analytics-panel-note{margin-bottom:0;}
.analytics-memberships-admin{margin-top:0;}
.analytics-membership-panel .memberships-admin-status{max-width:none;margin:0 0 14px;}
.analytics-membership-panel .memberships-admin-toolbar{margin-bottom:14px;}
.analytics-empty{padding:32px 12px;text-align:center;color:#94a3b8;}
.analytics-footnote{margin-top:18px;color:#64748b;font-size:12px;line-height:1.7;}
@media(max-width:900px){.analytics-summary{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.analytics-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.analytics-summary{grid-template-columns:1fr}.analytics-stat strong{font-size:30px}.analytics-hero h1{font-size:32px}.analytics-membership-header{align-items:stretch;flex-direction:column}.analytics-membership-header .payments-admin-refresh{align-self:flex-start}}

/* ===== Shared interaction polish (public learning UI) ===== */
:root{
  --focus-ring:0 0 0 3px rgba(96,127,232,.24);
  --ease-ui:cubic-bezier(.23,1,.32,1);
}

.nav-links a,
.auth-nav button,
.auth-submit,
.auth-switches button,
.auth-close,
.home-refresh,
.module-tile,
.record-row,
.reading-type-tab,
.listening-type-tab,
.speaking-type-tab,
.writing-type-tab,
.reading-card,
.listening-list-grid .listening-card,
.speaking-card,
.writing-card,
.email-card,
.discussion-card,
.top-link{
  transition:transform 160ms var(--ease-ui), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms var(--ease-ui), opacity 180ms ease;
}

/* Final library overrides live after legacy subject styles. */
body :is(.reading-hub,.listening-hub,.speaking-hub,.writing-hub){
  --writing-ink:var(--library-ink);--writing-muted:var(--library-muted);--writing-teal:var(--library-accent);--writing-teal-soft:var(--library-accent-soft);
  background:linear-gradient(180deg,#fafaff 0,#fff 260px);border-color:#e3e4f1;box-shadow:0 18px 50px rgba(55,57,105,.08)
}
body :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header){
  position:relative;padding:38px 40px 26px;background:radial-gradient(circle at 88% 18%,rgba(119,119,217,.14),transparent 23%),linear-gradient(135deg,#f8f8ff,#fff);border-bottom:1px solid #e8e8f3
}
body .writing-hub-eyebrow{color:var(--library-accent)}
body :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header) h1{color:var(--library-ink);font-size:40px;letter-spacing:-.035em}
body :is(.reading-type-row,.listening-type-row,.speaking-type-row,.writing-type-row){display:block;padding:24px 40px 10px}
body :is(.reading-type-label,.listening-type-label,.speaking-type-label,.writing-type-label){display:none}
body :is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){
  display:grid;grid-template-columns:repeat(var(--library-tab-count,3),minmax(0,1fr));gap:10px;padding:6px;background:#f1f1f8;border:1px solid #e4e4ef;border-radius:18px
}
body .listening-type-tabs{--library-tab-count:4}
body .speaking-type-tabs{--library-tab-count:2}
body :is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab){
  display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0;padding:13px 16px;border:1px solid transparent;border-radius:13px;background:transparent;color:#667085;text-align:left
}
body :is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab):hover{background:rgba(255,255,255,.76);color:var(--library-ink)}
body :is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab).active{color:var(--library-ink);background:#fff;border-color:#dedfeb;box-shadow:0 5px 16px rgba(54,55,94,.09)}
body .writing-type-tab.active .writing-tab-index{background:var(--library-accent)}
body :is(.reading-panel,.listening-panel,.speaking-panel,.writing-panel){padding:22px 40px 40px}
body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head){display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) h2{color:var(--library-ink);font-size:25px;letter-spacing:-.025em}
body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) p{text-align:right}
body :is(.reading-list-grid,.listening-list-grid,.speaking-list-grid,.writing-list-grid,.email-list-grid){gap:14px}
body :is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card){position:relative;overflow:hidden;min-height:0;padding:18px 20px;border-color:#e1e2ed;border-radius:18px;box-shadow:0 3px 12px rgba(40,42,77,.045)}
body :is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card):hover{transform:translateY(-2px);border-color:#c9c9e9;box-shadow:0 12px 26px rgba(53,55,105,.10)}
body :is(.reading-card-title,.listening-list-grid .listening-card-title,.speaking-card-title){margin-bottom:12px;color:var(--library-ink);font-size:18px}
body :is(.reading-card-foot,.listening-list-grid .listening-card-foot,.speaking-card-foot,.email-card-foot,.writing-card-foot){min-height:0;padding-top:10px;border-top:1px solid #eeeef5}
body .email-card-tag{color:var(--library-accent-dark);background:var(--library-accent-soft)}
body .email-card-route{grid-template-columns:1fr;margin:12px 0 14px}
body .discussion-library-card{min-height:0}

@media (max-width:900px){body :is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  body :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header),body :is(.reading-type-row,.listening-type-row,.speaking-type-row,.writing-type-row),body :is(.reading-panel,.listening-panel,.speaking-panel,.writing-panel){padding-left:20px;padding-right:20px}
  body :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header) h1{font-size:34px}
  body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head){display:block}
  body :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) p{margin-top:7px;text-align:left}
  body :is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){grid-template-columns:1fr}
}

/* ===== Unified subject libraries · 2026-08 ===== */
:is(.reading-hub,.listening-hub,.speaking-hub,.writing-hub){
  --library-ink:#17233d;
  --library-muted:#64748b;
  --library-accent:#7777d9;
  --library-accent-dark:#5f5fc2;
  --library-accent-soft:#eeeeff;
  background:linear-gradient(180deg,#fafaff 0,#fff 260px);
  border-color:#e3e4f1;
  box-shadow:0 18px 50px rgba(55,57,105,.08);
}

:is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header){
  position:relative;
  padding:38px 40px 26px;
  background:radial-gradient(circle at 88% 18%,rgba(119,119,217,.14),transparent 23%),linear-gradient(135deg,#f8f8ff,#fff);
  border-bottom:1px solid #e8e8f3;
}

.library-hub-eyebrow,.writing-hub-eyebrow{
  margin-bottom:10px;
  color:var(--library-accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

:is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header) h1{
  color:var(--library-ink);
  font-size:40px;
  letter-spacing:-.035em;
}

:is(.reading-type-row,.listening-type-row,.speaking-type-row,.writing-type-row){display:block;padding:24px 40px 10px}
:is(.reading-type-label,.listening-type-label,.speaking-type-label,.writing-type-label){display:none}
:is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){
  display:grid;
  grid-template-columns:repeat(var(--library-tab-count,3),minmax(0,1fr));
  gap:10px;
  padding:6px;
  background:#f1f1f8;
  border:1px solid #e4e4ef;
  border-radius:18px;
}
.listening-type-tabs{--library-tab-count:4}
.speaking-type-tabs{--library-tab-count:2}

:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
  padding:13px 16px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#667085;
  text-align:left;
}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab):hover{background:rgba(255,255,255,.76);color:var(--library-ink)}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab):active{transform:scale(.98)}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab).active{
  color:var(--library-ink);
  background:#fff;
  border-color:#dedfeb;
  box-shadow:0 5px 16px rgba(54,55,94,.09);
}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab) strong,
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab) small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab) strong{font-size:14px;line-height:1.35}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab) small{margin-top:2px;color:#8a97a6;font-size:11px;font-weight:700}
.library-tab-index,.writing-tab-index{
  flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:#e6e6f0;color:#73748a;font-size:11px;font-weight:900;
}
:is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab).active :is(.library-tab-index,.writing-tab-index){color:#fff;background:var(--library-accent)}

:is(.reading-panel,.listening-panel,.speaking-panel,.writing-panel){padding:22px 40px 40px}
:is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head){display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
:is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) h2{color:var(--library-ink);font-size:25px;letter-spacing:-.025em}
:is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) p{text-align:right}
:is(.reading-list-grid,.listening-list-grid,.speaking-list-grid,.writing-list-grid,.email-list-grid){gap:14px}

:is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card){
  position:relative;overflow:hidden;min-height:0;padding:18px 20px;border-color:#e1e2ed;border-radius:18px;
  box-shadow:0 3px 12px rgba(40,42,77,.045);text-decoration:none;
}
:is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card)::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--library-accent);opacity:0;transition:opacity 160ms ease;
}
:is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card):hover{transform:translateY(-2px);border-color:#c9c9e9;box-shadow:0 12px 26px rgba(53,55,105,.10)}
:is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card):hover::before{opacity:1}
:is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card):active{transform:scale(.985)}
:is(.reading-card-meta,.listening-list-grid .listening-card-meta,.speaking-card-meta){margin-bottom:10px}
:is(.reading-card-title,.listening-list-grid .listening-card-title,.speaking-card-title){margin-bottom:12px;color:var(--library-ink);font-size:18px}
:is(.reading-card-foot,.listening-list-grid .listening-card-foot,.speaking-card-foot,.email-card-foot,.writing-card-foot){padding-top:10px;border-top:1px solid #eeeeF5}

.writing-hub{--writing-ink:var(--library-ink);--writing-muted:var(--library-muted);--writing-teal:var(--library-accent);--writing-teal-soft:var(--library-accent-soft)}
.email-card-tag{color:var(--library-accent-dark);background:var(--library-accent-soft)}
.email-card-route{grid-template-columns:1fr;margin:12px 0 14px}
.discussion-library-card{min-height:0}
.discussion-library-card .writing-card-cn-title{margin:4px 0 14px}
.reading-card:not(:has(.reading-card-foot)),
.speaking-card:not(:has(.speaking-card-foot)){display:flex;min-height:106px;flex-direction:column;justify-content:center}

@media (max-width:900px){
  :is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header),
  :is(.reading-type-row,.listening-type-row,.speaking-type-row,.writing-type-row),
  :is(.reading-panel,.listening-panel,.speaking-panel,.writing-panel){padding-left:20px;padding-right:20px}
  :is(.reading-hub-header,.listening-hub-header,.speaking-hub-header,.writing-hub-header) h1{font-size:34px}
  :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head){display:block}
  :is(.reading-panel-head,.listening-panel-head,.speaking-panel-head,.writing-panel-head) p{margin-top:7px;text-align:left}
  :is(.reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs){grid-template-columns:1fr}
}

@media (hover:hover) and (pointer:fine){
  :is(.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card):hover{transform:translateY(-2px)}
}

@media (prefers-reduced-motion:reduce){
  :is(.reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab,.reading-card,.listening-list-grid .listening-card,.speaking-card,.writing-card,.email-card)::before{transition:none}
}

/* ===== Mock Test Library · aligned with subject hubs ===== */
.mock-shell.page-shell{
  max-width:1180px;
  padding-top:calc(var(--hang-nav-height, 66px) + 30px);
}

.mock-hub-header{
  position:relative;
  padding:38px 40px 30px;
  overflow:hidden;
  border-color:#e3e4f1;
  border-radius:30px;
  background:radial-gradient(circle at 88% 18%,rgba(119,119,217,.14),transparent 23%),linear-gradient(135deg,#f8f8ff,#fff);
  box-shadow:0 18px 50px rgba(55,57,105,.08);
}

.mock-hub-header h1{
  margin:0;
  color:#17233d;
  font-size:40px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.mock-hub-header .mock-hero-link{
  min-width:max-content;
  padding:12px 16px;
  border:1px solid #dedfeb;
  border-radius:13px;
  background:#fff;
  color:#5f5fc2;
  box-shadow:0 5px 16px rgba(54,55,94,.08);
}

.mock-table-card{
  padding:22px 28px 30px;
  border-color:#e3e4f1;
  border-radius:30px;
  background:linear-gradient(180deg,#fafaff 0,#fff 260px);
  box-shadow:0 18px 50px rgba(55,57,105,.08);
}

.mock-table-top{
  margin-bottom:20px;
}

.mock-table-top h2{
  margin:0;
  color:#17233d;
  font-size:25px;
  letter-spacing:-.025em;
}

.mock-flow-note{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  margin-top:10px;
  overflow-x:auto;
  scrollbar-width:none;
}

.mock-flow-note::-webkit-scrollbar{
  display:none;
}

.mock-flow-note span{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid #e4e4ef;
  border-radius:999px;
  background:#f7f7ff;
  color:#667085;
  font-size:12px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}

.mock-reset{
  padding:11px 15px;
  border:1px solid #e4e4ef;
  border-radius:13px;
  background:#fff;
  color:#667085;
}

.mock-set-grid{
  grid-template-columns:1fr;
  gap:14px;
}

.mock-set-card{
  display:grid;
  grid-template-columns:minmax(240px,.56fr) minmax(0,1.15fr);
  gap:18px;
  min-height:0;
  padding:18px 20px;
  border-color:#e1e2ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 3px 12px rgba(40,42,77,.045);
  transition:transform 160ms var(--ease-ui), border-color 180ms ease, box-shadow 180ms var(--ease-ui);
}

.mock-set-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#7777d9;
  opacity:0;
  transition:opacity 160ms ease;
}

.mock-set-card::after{
  content:none;
}

.mock-set-card:hover{
  transform:translateY(-2px);
  border-color:#c9c9e9;
  box-shadow:0 12px 26px rgba(53,55,105,.10);
}

.mock-set-card:hover::before{
  opacity:1;
}

.mock-set-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0;
}

.mock-set-kicker{
  margin-bottom:8px;
  background:#eeeeff;
  color:#5f5fc2;
}

.mock-set-main h3{
  color:#17233d;
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.025em;
}

.mock-set-main p{
  margin:7px 0 0;
  font-size:14px;
  line-height:1.45;
}

.mock-set-progress{
  justify-content:flex-start;
  margin-top:14px;
}

.mock-mode-panel{
  grid-template-columns:minmax(148px,180px) minmax(0,1fr) minmax(116px,146px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.mock-full-start,
.mock-section-start,
.mock-report-start{
  min-height:76px;
  border-radius:16px;
}

.mock-full-start{
  background:linear-gradient(135deg,#607fe8,#8b7ae6);
}

.mock-section-start{
  border-color:#e1e2ed;
  color:#17233d;
}

.mock-section-start:hover{
  border-color:#c9c9e9;
  background:#f8f8ff;
  box-shadow:0 10px 22px rgba(53,55,105,.08);
}

.mock-section-title{
  font-size:16px;
}

.mock-report-start{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border:1px solid #e1e2ed;
  border-radius:16px;
  background:#fff;
  color:#17233d;
  font:inherit;
  font-weight:950;
  text-decoration:none;
  transition:transform 140ms var(--ease-ui), border-color 180ms ease, background 180ms ease, box-shadow 180ms var(--ease-ui);
}

.mock-report-start.available:hover{
  transform:translateY(-1px);
  border-color:#c9c9e9;
  background:#f8f8ff;
  box-shadow:0 10px 22px rgba(53,55,105,.08);
}

.mock-report-start.unavailable{
  color:#98a2b3;
  background:#f5f6fb;
  cursor:not-allowed;
  opacity:.72;
}

.mock-report-start span{
  font-size:16px;
  line-height:1.15;
}

.mock-report-start small{
  color:inherit;
  font-size:12px;
  font-weight:850;
  line-height:1.2;
  opacity:.74;
}

@media(max-width:980px){
  .mock-set-card{
    grid-template-columns:1fr;
  }
  .mock-mode-panel{
    grid-template-columns:1fr;
  }
}

.mock-report-shell{
  --report-ink:#17233d;
  --report-muted:#667085;
  max-width:1180px;
  margin:0 auto;
}

.mock-report-header{
  margin-bottom:18px;
  padding:34px 38px 30px;
  border:1px solid #e3e4f1;
  border-radius:30px;
  background:radial-gradient(circle at 88% 18%,rgba(119,119,217,.14),transparent 23%),linear-gradient(135deg,#f8f8ff,#fff);
  box-shadow:0 18px 50px rgba(55,57,105,.08);
}

.mock-report-back{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--report-ink);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
}

.mock-report-header h1{
  margin:0;
  color:var(--report-ink);
  font-size:clamp(34px,4vw,48px);
  line-height:1.06;
  letter-spacing:-.04em;
}

.mock-report-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  overflow-x:auto;
  scrollbar-width:none;
}

.mock-report-tabs::-webkit-scrollbar{
  display:none;
}

.mock-report-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:48px;
  padding:0 18px;
  border:1px solid #dfe3f3;
  border-radius:16px;
  background:#fff;
  color:var(--report-ink);
  font-weight:950;
  text-decoration:none;
  white-space:nowrap;
}

.mock-report-tab.active{
  border-color:#d6d6f4;
  background:#fff;
  color:#5867d8;
  box-shadow:0 10px 20px rgba(88,103,216,.10);
}

.mock-report-tab.disabled{
  color:#a4adbb;
  background:#f5f6fb;
  cursor:not-allowed;
}

.mock-report-card{
  padding:28px;
  border:1px solid #d9dcf4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 34px rgba(40,42,77,.065);
}

.mock-report-date{
  color:var(--report-ink);
  font-size:22px;
  font-weight:900;
}

.mock-report-divider{
  height:1px;
  margin:20px 0 24px;
  background:#e4e7ee;
}

.mock-report-score-row{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.mock-report-overall{
  text-align:center;
}

.mock-report-overall h2{
  margin:4px 0 18px;
  color:#3b3f4a;
  font-size:18px;
}

.mock-report-overall p{
  margin:14px auto 0;
  color:var(--report-muted);
  font-size:13px;
  font-weight:750;
  line-height:1.5;
}

.mock-report-overall-status{
  max-width:220px;
  padding:9px 12px;
  border:1px solid #e1e2ed;
  border-radius:999px;
  background:#f7f8ff;
  font-weight:900!important;
}

.mock-report-gauge{
  --score-angle:-90deg;
  position:relative;
  display:grid;
  place-items:center;
  width:166px;
  height:94px;
  margin:0 auto;
  overflow:hidden;
}

.mock-report-gauge-arc{
  position:absolute;
  inset:0;
  border-radius:166px 166px 0 0;
  background:conic-gradient(from 270deg at 50% 100%, #607fe8 0deg, #8b7ae6 calc(var(--score-angle) + 90deg), #e4e4e8 0 180deg, transparent 0);
}

.mock-report-gauge::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:0;
  height:62px;
  border-radius:120px 120px 0 0;
  background:#fff;
}

.mock-report-gauge strong,
.mock-report-gauge span{
  position:relative;
  z-index:1;
}

.mock-report-gauge strong{
  margin-top:24px;
  color:var(--report-ink);
  font-size:30px;
  line-height:1;
}

.mock-report-gauge span{
  margin-top:52px;
  color:var(--report-muted);
  font-size:12px;
  font-weight:850;
}

.mock-report-sections{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.mock-report-section,
.mock-report-section-link{
  min-width:0;
}

.mock-report-section-link{
  color:inherit;
  text-decoration:none;
}

.mock-report-section{
  min-height:148px;
  padding:16px;
  border:1px solid #e1e2ed;
  border-radius:18px;
  background:#f7f8ff;
  transition:transform 160ms var(--ease-ui), border-color 180ms ease, box-shadow 180ms var(--ease-ui);
}

.mock-report-section-link:hover .mock-report-section{
  transform:translateY(-1px);
  border-color:#c9c9e9;
  box-shadow:0 12px 24px rgba(53,55,105,.09);
}

.mock-report-section.disabled{
  background:#f7f7fa;
  color:#98a2b3;
}

.mock-report-section-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#3b3f4a;
  font-size:16px;
}

.mock-report-section-score{
  margin:18px 0 10px;
  padding:14px 10px;
  border-radius:14px;
  background:#e7e7fb;
  color:#17233d;
  font-size:22px;
  font-weight:950;
  text-align:center;
}

.mock-report-section.disabled .mock-report-section-score{
  background:#eef0f6;
  color:#98a2b3;
}

.mock-report-section p{
  margin:0;
  color:var(--report-muted);
  font-size:13px;
  font-weight:750;
  line-height:1.45;
  text-align:center;
}

.mock-report-section-entry{
  display:block;
  margin-top:14px;
  color:#5867d8;
  font-size:13px;
  font-weight:950;
  text-align:center;
}

.mock-report-section.disabled .mock-report-section-entry{
  color:#98a2b3;
}

.mock-report-footnote{
  margin-top:22px;
  color:var(--report-muted);
  font-size:14px;
  font-weight:800;
}

.mock-report-empty{
  padding:54px 20px;
  text-align:center;
}

.mock-report-empty-badge{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:#f1f1fb;
  color:#6b6bd6;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mock-report-empty h2{
  margin:16px 0 10px;
  color:var(--report-ink);
  font-size:32px;
}

.mock-report-empty p{
  max-width:620px;
  margin:0 auto 22px;
  color:var(--report-muted);
  line-height:1.7;
}

.mock-analysis-titlebar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.mock-analysis-titlebar h2{
  margin:6px 0 8px;
  color:var(--report-ink);
  font-size:32px;
  line-height:1.1;
}

.mock-analysis-titlebar p{
  margin:0;
  color:var(--report-muted);
  font-weight:800;
}

.mock-analysis-score{
  flex:0 0 auto;
  min-width:96px;
  padding:14px 18px;
  border-radius:18px;
  background:#e7e7fb;
  color:#17233d;
  font-size:30px;
  font-weight:950;
  text-align:center;
}

.mock-analysis-score span{
  color:#667085;
  font-size:16px;
}

.mock-analysis-list{
  display:grid;
  gap:12px;
}

.mock-analysis-row{
  padding:16px;
  border:1px solid #e1e2ed;
  border-radius:18px;
  background:#fff;
}

.mock-analysis-row.correct{
  border-color:#b7e4c7;
  background:#fbfffd;
}

.mock-analysis-row.wrong{
  border-color:#ffd0d0;
  background:#fffafa;
}

.mock-analysis-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#17233d;
}

.mock-analysis-head span{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#f1f1fb;
  color:#667085;
  font-size:12px;
  font-weight:950;
}

.mock-analysis-row.correct .mock-analysis-head span{
  background:#dcfce7;
  color:#15803d;
}

.mock-analysis-row.wrong .mock-analysis-head span{
  background:#fee2e2;
  color:#b91c1c;
}

.mock-analysis-prompt,
.mock-analysis-note{
  margin:10px 0 0;
  color:#667085;
  line-height:1.6;
}

.mock-analysis-answer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.mock-analysis-answer-grid div{
  min-width:0;
  padding:12px;
  border-radius:14px;
  background:#f7f8fc;
}

.mock-analysis-answer-grid small{
  display:block;
  margin-bottom:4px;
  color:#8a97a6;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mock-analysis-answer-grid p{
  margin:0;
  color:#17233d;
  font-weight:850;
  line-height:1.5;
}

.mock-analysis-audio{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid #dbe4f3;
  border-radius:14px;
  background:#f8fbff;
  color:#334155;
  font-size:13px;
  font-weight:900;
}

.mock-analysis-audio audio{
  width:min(420px,100%);
  min-width:0;
  height:36px;
}

.mock-analysis-explanation-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}

.mock-analysis-explanation-state{
  display:grid;
  gap:5px;
  padding:14px 16px;
  border:1px solid #dbe4f3;
  border-radius:16px;
  background:#f8fbff;
  color:#334155;
  line-height:1.5;
}

.mock-analysis-explanation-state strong{
  color:#17233d;
  font-size:14px;
}

.mock-analysis-explanation-state span{
  color:#667085;
  font-size:13px;
}

.mock-analysis-explanation-state--available{
  border-color:#b7e4c7;
  background:#fbfffd;
}

.mock-analysis-explanation-state--pending{
  border-color:#fde68a;
  background:#fffbeb;
}

@media(max-width:980px){
  .mock-report-score-row{
    grid-template-columns:1fr;
  }
  .mock-report-sections{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .mock-report-header,
  .mock-report-card{
    padding:22px;
    border-radius:22px;
  }
  .mock-report-sections{
    grid-template-columns:1fr;
  }
  .mock-analysis-titlebar,
  .mock-analysis-answer-grid{
    grid-template-columns:1fr;
    display:grid;
  }
  .mock-analysis-explanation-status{
    grid-template-columns:1fr;
  }
  .mock-analysis-audio{
    align-items:flex-start;
    flex-direction:column;
  }
  .mock-analysis-audio audio{
    width:100%;
  }
}

@media(max-width:760px){
  .mock-hub-header{
    padding:30px 24px 24px;
  }
  .mock-table-card{
    padding:20px;
  }
  .mock-section-grid{
    grid-template-columns:repeat(4,minmax(72px,1fr));
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .mock-section-grid::-webkit-scrollbar{
    display:none;
  }
}

/* Mock library layout mirrors the subject practice hubs. */
.mock-hub{
  --library-ink:#17233d;
  --library-muted:#64748b;
  --library-accent:#7777d9;
  --library-accent-dark:#5f5fc2;
  --library-accent-soft:#eeeeff;
  overflow:hidden;
  border:1px solid #e3e4f1;
  border-radius:30px;
  background:linear-gradient(180deg,#fafaff 0,#fff 260px);
  box-shadow:0 18px 50px rgba(55,57,105,.08);
}

.mock-hub .mock-hub-header{
  display:block;
  margin:0;
  padding:38px 40px 26px;
  border:0;
  border-bottom:1px solid #e8e8f3;
  border-radius:0;
  background:radial-gradient(circle at 88% 18%,rgba(119,119,217,.14),transparent 23%),linear-gradient(135deg,#f8f8ff,#fff);
  box-shadow:none;
}

.mock-hub .mock-hub-header h1{
  margin:0;
  color:var(--library-ink);
  font-size:40px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.mock-mode-row{
  display:block;
  padding:24px 40px 10px;
}

.mock-mode-tabs{
  display:grid;
  grid-template-columns:1.2fr repeat(4,1fr);
  gap:10px;
  padding:6px;
  border:1px solid #e4e4ef;
  border-radius:18px;
  background:#f1f1f8;
}

.mock-mode-tab{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
  min-height:82px;
  padding:13px 16px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#667085;
  text-align:left;
  text-decoration:none;
  transition:transform 160ms var(--ease-ui), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms var(--ease-ui);
}

.mock-mode-tab:hover{
  background:rgba(255,255,255,.76);
  color:var(--library-ink);
}

.mock-mode-tab.active{
  color:var(--library-ink);
  background:#fff;
  border-color:#dedfeb;
  box-shadow:0 5px 16px rgba(54,55,94,.09);
}

.mock-mode-tab.active .library-tab-index{
  color:#fff;
  background:var(--library-accent);
}

.mock-mode-tab strong,
.mock-mode-tab small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mock-mode-tab strong{
  font-size:14px;
  line-height:1.35;
}

.mock-mode-tab small{
  margin-top:2px;
  color:#8a97a6;
  font-size:11px;
  font-weight:700;
}

.mock-panel{
  padding:22px 40px 40px;
}

.mock-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.mock-panel-head h2{
  margin:0;
  color:var(--library-ink);
  font-size:25px;
  letter-spacing:-.025em;
}

.mock-panel .mock-flow-note{
  margin-top:8px;
}

.mock-panel .mock-flow-note span{
  max-width:100%;
}

.mock-panel .mock-reset{
  flex:0 0 auto;
}

.mock-panel .mock-set-grid{
  grid-template-columns:1fr;
  gap:14px;
}

.mock-panel .mock-set-card{
  display:grid;
  grid-template-columns:minmax(240px,.56fr) minmax(0,1.15fr);
  gap:18px;
  min-height:0;
  padding:18px 20px;
  border-color:#e1e2ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 12px rgba(40,42,77,.045);
}

.mock-panel .mock-set-main{
  width:auto;
}

.mock-panel .mock-set-main p{
  margin-bottom:0;
}

@media (max-width:900px){
  .mock-mode-tabs{
    grid-template-columns:1fr 1fr;
  }
  .mock-panel .mock-set-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .mock-hub .mock-hub-header,
  .mock-panel{
    padding-left:20px;
    padding-right:20px;
  }
  .mock-hub .mock-hub-header h1{
    font-size:34px;
  }
  .mock-panel-head{
    display:block;
  }
  .mock-panel-head .mock-reset{
    margin-top:12px;
  }
}

button:not(.analytics-range):not(.analytics-refresh):active,
a[href]:not(.auth-admin):active{
  transform:scale(.98);
}

button:not(.analytics-range):not(.analytics-refresh):focus-visible,
a[href]:not(.auth-admin):focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="tab"]:focus-visible{
  outline:3px solid rgba(96,127,232,.42);
  outline-offset:3px;
  box-shadow:var(--focus-ring);
}

.auth-modal{
  display:flex;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease, visibility 0s linear 180ms;
}

.auth-modal.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity 200ms ease-out;
}

.auth-dialog{
  transform:translateY(8px) scale(.985);
  transition:transform 220ms var(--ease-ui);
}

.auth-modal.open .auth-dialog{
  transform:translateY(0) scale(1);
}

.auth-close{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

@media (hover:hover) and (pointer:fine){
  .auth-close:hover{background:var(--primary-soft);color:var(--primary-dark)}
  .top-link:hover{color:var(--primary);transform:translateX(-2px)}
}

@media (max-width:700px){
  .navbar{background:#fff}
  .nav-inner{gap:9px;padding:9px 14px 10px}
  .logo{flex-direction:row;align-items:baseline;gap:8px}
  .logo-sub{margin-top:0}
  .nav-links{order:initial;gap:6px;margin:0;padding:1px 0 3px;scroll-snap-type:none}
  .nav-links a{flex:0 0 auto;min-height:38px;padding:8px 12px;scroll-snap-align:none}
  .auth-nav{position:static;right:auto;top:auto;width:auto;max-width:none;overflow:visible;padding:0}
  .auth-account{max-width:min(132px,40vw)}
  .auth-profile,.auth-logout{padding-inline:10px}
  .page-shell{padding-top:calc(var(--hang-nav-height, 108px) + 24px)}
  .home-shell{padding-top:calc(var(--hang-nav-height, 108px) + 24px)}
  .reading-hub,.listening-hub,.speaking-hub,.writing-hub{border-radius:22px}
  .reading-type-tabs,.listening-type-tabs,.speaking-type-tabs,.writing-type-tabs{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:none}
  .reading-type-tabs::-webkit-scrollbar,.listening-type-tabs::-webkit-scrollbar,.speaking-type-tabs::-webkit-scrollbar,.writing-type-tabs::-webkit-scrollbar{display:none}
  .reading-type-tab,.listening-type-tab,.speaking-type-tab,.writing-type-tab{flex:0 0 auto;min-height:46px;padding:12px 16px}
}

@media (prefers-reduced-motion:reduce){
  .nav-links a,
  .auth-nav button,
  .auth-submit,
  .auth-switches button,
  .auth-close,
  .home-refresh,
  .module-tile,
  .record-row,
  .reading-type-tab,
  .listening-type-tab,
  .speaking-type-tab,
  .writing-type-tab,
  .reading-card,
  .listening-list-grid .listening-card,
  .speaking-card,
  .writing-card,
  .email-card,
  .discussion-card,
  .top-link,
  .auth-modal,
  .auth-dialog,
  .auth-notice{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ===== Listening Hub ===== */

.listening-type-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px 34px 10px;
  flex-wrap:wrap;
}

.listening-type-label{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.listening-type-tabs{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.listening-type-tab{
  border:none;
  background:#f2f5fb;
  color:#5f6c82;
  font-size:17px;
  font-weight:800;
  padding:18px 28px;
  border-radius:16px;
  cursor:pointer;
  transition:.2s ease;
}

.listening-type-tab:hover{
  background:#eaf1ff;
  color:var(--primary-dark);
}

.listening-type-tab.active{
  background:#6574f7;
  color:#fff;
  box-shadow:0 12px 24px rgba(101,116,247,.22);
}

.listening-panel{
  padding:28px 34px 34px;
}

.listening-panel-head{
  margin-bottom:18px;
}

.listening-panel-head h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.25;
}

.listening-panel-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.listening-list-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.listening-list-grid .listening-card{
  display:block;
  min-height:178px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.listening-list-grid .listening-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.listening-list-grid .listening-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#7a869a;
  font-size:13px;
  font-weight:700;
}

.listening-list-grid .listening-card-title{
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:8px;
}

.listening-list-grid .listening-card-sub{
  color:var(--primary-dark);
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  min-height:44px;
  margin-bottom:10px;
}

.listening-list-grid .listening-card-foot{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.listening-list-grid.is-response-list{
  gap:12px;
}

.listening-list-grid.is-response-list .listening-card{
  min-height:128px;
  border-radius:16px;
  padding:15px 16px;
}

.listening-list-grid.is-response-list .listening-card-meta{
  margin-bottom:8px;
  font-size:12px;
}

.listening-list-grid.is-response-list .listening-card-title{
  font-size:17px;
  margin-bottom:6px;
}

.listening-list-grid.is-response-list .listening-card-sub{
  min-height:0;
  margin-bottom:12px;
  font-size:13px;
  line-height:1.4;
}

.listening-list-grid.is-response-list .listening-card-foot{
  font-size:13px;
  line-height:1.4;
}

.listening-empty{
  color:#dc3545;
  font-size:15px;
  padding:18px 0;
}

@media (max-width:900px){
  .listening-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .listening-type-row{
    padding:20px 20px 8px;
    gap:12px;
  }

  .listening-type-label{
    width:100%;
    font-size:16px;
  }

  .listening-type-tabs{
    width:100%;
  }

  .listening-type-tab{
    padding:14px 18px;
    font-size:15px;
    border-radius:14px;
  }

  .listening-panel{
    padding:16px 20px 24px;
  }

  .listening-panel-head h2{
    font-size:24px;
  }

  .listening-list-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .listening-list-grid .listening-card{
    min-height:0;
    padding:18px;
    border-radius:18px;
  }
}

@media (max-width:600px){
  .scene-name{
    font-size:18px;
  }

  .lr-instruction-panel{
    padding:12px 12px 14px;
    border-radius:16px;
  }

  .lr-instruction-text{
    font-size:15px;
    line-height:1.55;
  }

  .set-header-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .scene-header{
    align-items:flex-start;
  }

  .line-item{
    flex-direction:column;
  }

  .sentence-controls{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .vocab-grid{
    grid-template-columns:1fr;
  }
}

/* ===== Simple Page (子页面统一风格) ===== */

.page-simple{
  max-width:900px;
  margin:0 auto;
  padding:110px 20px 60px;
}

.page-simple h1{
  font-size:48px;
  margin-bottom:12px;
}

.page-desc{
  color:var(--muted);
  margin-bottom:28px;
  font-size:16px;
}

/* 列表 */

.section-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.section-item{
  display:block;
  padding:18px 20px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  transition:.2s;
}

.section-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

.section-title{
  display:block;
  font-weight:700;
  font-size:18px;
  margin-bottom:4px;
}

.section-sub{
  color:var(--muted);
  font-size:14px;
}

/* ===== Reading Hub ===== */

.reading-hub{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.reading-hub-header{
  padding:34px 34px 20px;
  border-bottom:1px solid var(--line);
}

.reading-hub-header h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.2;
}

.reading-hub-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.reading-type-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px 34px 10px;
  flex-wrap:wrap;
}

.reading-type-label{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.reading-type-tabs{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.reading-type-tab{
  border:none;
  background:#f2f5fb;
  color:#5f6c82;
  font-size:17px;
  font-weight:800;
  padding:18px 28px;
  border-radius:16px;
  cursor:pointer;
  transition:.2s ease;
}

.reading-type-tab:hover{
  background:#eaf1ff;
  color:var(--primary-dark);
}

.reading-type-tab.active{
  background:#6574f7;
  color:#fff;
  box-shadow:0 12px 24px rgba(101,116,247,.22);
}

.reading-panel{
  padding:18px 34px 34px;
}

.reading-panel-head{
  margin-bottom:18px;
}

.reading-panel-head h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.25;
}

.reading-panel-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.reading-list-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.reading-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.reading-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.reading-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#7a869a;
  font-size:13px;
  font-weight:700;
}

.reading-card-title{
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  color:var(--text);
  margin-bottom:8px;
}

.academic-frequency-badge{
  position:absolute;
  top:14px;
  right:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  box-shadow:0 4px 12px rgba(249,115,22,.14);
  font-size:17px;
  line-height:1;
  z-index:1;
}

.reading-card.has-academic-frequency{
  padding-right:58px;
}

.reading-card-sub{
  color:var(--primary-dark);
  font-size:14px;
  line-height:1.6;
  min-height:22px;
  margin-bottom:10px;
  font-weight:600;
}

.reading-card-foot{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  min-height:22px;
}

.reading-empty{
  color:#dc3545;
  font-size:15px;
  padding:18px 0;
}

/* ===== Reading Hub Mobile ===== */

@media (max-width:900px){
  .reading-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .reading-hub-header{
    padding:26px 20px 16px;
  }

  .reading-hub-header h1{
    font-size:34px;
  }

  .reading-type-row{
    padding:20px 20px 8px;
    gap:12px;
  }

  .reading-type-label{
    width:100%;
    font-size:16px;
  }

  .reading-type-tabs{
    width:100%;
  }

  .reading-type-tab{
    padding:14px 18px;
    font-size:15px;
    border-radius:14px;
  }

  .reading-panel{
    padding:16px 20px 24px;
  }

  .reading-panel-head h2{
    font-size:24px;
  }

  .reading-list-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .reading-card{
    padding:18px;
    border-radius:18px;
  }

  .reading-card.has-academic-frequency{
    padding-right:54px;
  }

  .reading-card-title{
    font-size:17px;
  }
}

/* ===== Writing Hub ===== */

.writing-hub{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.writing-hub-header{
  padding:34px 34px 20px;
  border-bottom:1px solid var(--line);
  text-align: left;
}

.writing-hub-header h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.2;
}

.writing-hub-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.writing-type-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px 34px 10px;
  flex-wrap:wrap;
}

.writing-type-label{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.writing-type-tabs{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.writing-type-tab{
  border:none;
  background:#f2f5fb;
  color:#5f6c82;
  font-size:17px;
  font-weight:800;
  padding:18px 28px;
  border-radius:16px;
  cursor:pointer;
  transition:.2s ease;
}

.writing-type-tab:hover{
  background:#eaf1ff;
  color:var(--primary-dark);
}

.writing-type-tab.active{
  background:#6574f7;
  color:#fff;
  box-shadow:0 12px 24px rgba(101,116,247,.22);
}

.writing-panel{
  padding:18px 34px 34px;
}

.writing-panel-head{
  margin-bottom:18px;
}

.writing-panel-head h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.25;
}

.writing-panel-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.writing-list-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.writing-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.writing-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.writing-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#7a869a;
  font-size:13px;
  font-weight:700;
}

.writing-card-title{
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  color:var(--text);
  margin-bottom:8px;
}

.writing-card-sub{
  color:var(--primary-dark);
  font-size:14px;
  line-height:1.6;
  min-height:22px;
  margin-bottom:10px;
  font-weight:600;
}

.writing-card-foot{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  min-height:22px;
}

.writing-empty-card{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:20px;
  padding:26px;
}

.writing-empty-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:8px;
  color:var(--text);
}

.writing-empty-text{
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
}

@media (max-width:900px){
  .writing-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .writing-hub-header{
    padding:26px 20px 16px;
  }

  .writing-hub-header h1{
    font-size:34px;
  }

  .writing-type-row{
    padding:20px 20px 8px;
    gap:12px;
  }

  .writing-type-label{
    width:100%;
    font-size:16px;
  }

  .writing-type-tabs{
    width:100%;
  }

  .writing-type-tab{
    padding:14px 18px;
    font-size:15px;
    border-radius:14px;
  }

  .writing-panel{
    padding:16px 20px 24px;
  }

  .writing-panel-head h2{
    font-size:24px;
  }

  .writing-list-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .writing-card{
    padding:18px;
    border-radius:18px;
  }

  .writing-card-title{
    font-size:17px;
  }
}

/* ===== Academic Discussion ===== */

.discussion-page{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:28px;
}

.discussion-header{
  margin-bottom:20px;
}

.discussion-header h1{
  margin:0 0 8px;
  font-size:40px;
  line-height:1.2;
}

.discussion-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.discussion-list-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.discussion-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.discussion-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.discussion-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#7a869a;
  font-size:13px;
  font-weight:700;
}

.discussion-card-title{
  font-size:18px;
  font-weight:800;
  line-height:1.5;
  color:var(--text);
  margin-bottom:10px;
}

.discussion-card-foot{
  color:var(--muted);
  font-size:14px;
}

.discussion-single-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:0 6px 20px rgba(24,39,75,.06);
}

.discussion-single-label{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  color:#6574f7;
  background:#eef1ff;
  border-radius:999px;
  padding:7px 12px;
  margin-bottom:16px;
}

.discussion-single-text{
  font-size:18px;
  line-height:1.9;
  color:var(--text);
  white-space:normal;
}

.discussion-single-actions{
  margin-top:24px;
}

.discussion-back-btn{
  display:inline-block;
  color:#2563eb;
  font-weight:700;
  text-decoration:none;
}

.discussion-back-btn:hover{
  text-decoration:underline;
}

@media (max-width:900px){
  .discussion-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .discussion-page{
    padding:20px;
    border-radius:24px;
  }

  .discussion-header h1{
    font-size:32px;
  }

  .discussion-list-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .discussion-card,
  .discussion-single-card{
    padding:20px;
    border-radius:18px;
  }

  .discussion-single-text{
    font-size:16px;
    line-height:1.8;
  }
}

/* ===== Write an Email ===== */

.email-list-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.email-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.email-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.email-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.email-card-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:12px;
  font-weight:800;
}

.email-card-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.email-card-status.draft{
  background:#ecfdf3;
  color:#15803d;
}

.email-card-status.empty{
  background:#f8fafc;
  color:#64748b;
}

.email-card-title{
  font-size:19px;
  font-weight:800;
  line-height:1.45;
  color:var(--text);
  margin-bottom:10px;
}

.email-card-sub{
  font-size:14px;
  line-height:1.7;
  color:var(--primary-dark);
  margin-bottom:4px;
  font-weight:600;
}

.email-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.email-page{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:28px;
}

.email-page-header{
  margin-bottom:18px;
}

.email-page-header h1{
  margin:0 0 8px;
  font-size:40px;
  line-height:1.2;
}

.email-page-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.email-practice-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.email-practice-progress{
  font-size:16px;
  font-weight:800;
  color:#334155;
}

.email-practice-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.email-timer{
  min-width:86px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  color:#2563eb;
  background:#eef4ff;
  border-radius:12px;
  padding:10px 14px;
}

.email-nav-btn{
  padding:10px 16px;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.email-nav-btn.primary{
  background:#2563eb;
  color:#fff;
}

.email-nav-btn.secondary{
  background:#e5e7eb;
  color:#111827;
}

.email-nav-btn.dark{
  background:#111827;
  color:#fff;
}

.email-practice-layout{
  display:grid;
  grid-template-columns:1.02fr 1.18fr;
  gap:24px;
}

.email-prompt-card,
.email-compose-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 6px 20px rgba(24,39,75,.06);
  padding:22px;
}

.email-prompt-text{
  font-size:17px;
  line-height:1.75;
  color:var(--text);
  margin-bottom:18px;
  white-space:pre-line;
}

.email-prompt-title{
  font-size:18px;
  font-weight:800;
  line-height:1.55;
  margin-bottom:12px;
}

.email-task-list{
  margin:0 0 18px 0;
  padding-left:26px;
}

.email-task-list li{
  margin-bottom:10px;
  font-size:17px;
  line-height:1.7;
}

.email-note{
  font-size:17px;
  line-height:1.7;
  color:#334155;
}

.email-compose-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
}

.email-meta-line{
  font-size:17px;
  font-weight:800;
  margin-bottom:10px;
  line-height:1.6;
  color:#111827;
}

.email-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:16px 0 14px;
  flex-wrap:wrap;
}

.email-toolbar-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.email-tool-btn{
  padding:10px 14px;
  border:none;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.email-tool-btn.primary{
  background:#12a594;
  color:#fff;
}

.email-tool-btn.light{
  background:#f1f5f9;
  color:#334155;
}

.email-word-count{
  font-size:15px;
  font-weight:700;
  color:#64748b;
}

.email-textarea{
  width:100%;
  min-height:520px;
  border:2px solid #9dd5dd;
  border-radius:20px;
  padding:18px;
  font-size:18px;
  line-height:1.8;
  font-family:inherit;
  resize:vertical;
  outline:none;
  background:#fff;
}

.email-textarea:focus{
  border-color:#38b2ac;
  box-shadow:0 0 0 4px rgba(56,178,172,.12);
}

.email-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:16px;
  flex-wrap:wrap;
}

.email-save-status{
  font-size:14px;
  color:#64748b;
  line-height:1.6;
}

.email-bottom-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.email-empty-state{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:20px;
  padding:26px;
  color:var(--muted);
  line-height:1.8;
}

@media (max-width:980px){
  .email-practice-layout{
    grid-template-columns:1fr;
  }

  .email-list-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .email-page{
    padding:20px;
    border-radius:24px;
  }

  .email-page-header h1{
    font-size:32px;
  }

  .email-prompt-card,
  .email-compose-card{
    padding:18px;
    border-radius:18px;
  }

  .email-textarea{
    min-height:360px;
    font-size:16px;
    line-height:1.75;
  }

  .email-prompt-text,
  .email-task-list li,
  .email-note,
  .email-meta-line{
    font-size:16px;
  }
}

/* ===== Writing library polish · 2026-08 ===== */

.writing-hub{
  --writing-ink:#17233d;
  --writing-muted:#64748b;
  --writing-teal:#7777d9;
  --writing-teal-soft:#eeeeff;
  background:linear-gradient(180deg, #fafaff 0, #fff 260px);
  border-color:#e3e4f1;
  box-shadow:0 18px 50px rgba(55, 57, 105, .08);
}

.writing-hub-header{
  position:relative;
  padding:38px 40px 26px;
  background:
    radial-gradient(circle at 88% 18%, rgba(119, 119, 217, .14), transparent 23%),
    linear-gradient(135deg, #f8f8ff, #fff);
}

.writing-hub-eyebrow{
  margin-bottom:10px;
  color:var(--writing-teal);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

.writing-hub-header h1{
  color:var(--writing-ink);
  font-size:40px;
  letter-spacing:-.035em;
}

.writing-type-row{
  display:block;
  padding:24px 40px 10px;
}

.writing-type-label{
  display:none;
}

.writing-type-tabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  padding:6px;
  background:#f1f1f8;
  border:1px solid #e4e4ef;
  border-radius:18px;
}

.writing-type-tab{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
  padding:13px 16px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#667085;
  text-align:left;
  transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms cubic-bezier(.23,1,.32,1);
}

.writing-type-tab:hover{
  background:rgba(255,255,255,.72);
  color:var(--writing-ink);
}

.writing-type-tab:active{
  transform:scale(.98);
}

.writing-type-tab.active{
  color:var(--writing-ink);
  background:#fff;
  border-color:#dedfeb;
  box-shadow:0 5px 16px rgba(54, 55, 94, .09);
}

.writing-type-tab strong,
.writing-type-tab small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.writing-type-tab strong{
  font-size:14px;
  line-height:1.35;
}

.writing-type-tab small{
  margin-top:2px;
  color:#8a97a6;
  font-size:11px;
  font-weight:700;
}

.writing-tab-index{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#e6e6f0;
  color:#73748a;
  font-size:11px;
  font-weight:900;
}

.writing-type-tab.active .writing-tab-index{
  color:#fff;
  background:var(--writing-teal);
}

.writing-panel{
  padding:22px 40px 40px;
}

.writing-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.writing-panel-head h2{
  color:var(--writing-ink);
  font-size:25px;
  letter-spacing:-.025em;
}

.writing-panel-head p{
  text-align:right;
}

.email-list-grid,
.writing-list-grid{
  gap:14px;
}

.email-card,
.writing-card{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-color:#e1e2ed;
  border-radius:18px;
  box-shadow:0 3px 12px rgba(27, 46, 61, .045);
  text-decoration:none;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), border-color 160ms ease, box-shadow 160ms ease;
}

.email-card::before,
.writing-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--writing-teal);
  opacity:0;
  transition:opacity 160ms ease;
}

.email-card:hover,
.writing-card:hover{
  transform:translateY(-2px);
  border-color:#c9c9e9;
  box-shadow:0 12px 26px rgba(53, 55, 105, .10);
}

.email-card:hover::before,
.writing-card:hover::before{
  opacity:1;
}

.email-card:active,
.writing-card:active{
  transform:scale(.985);
}

.email-card-tag{
  color:#5f5fc2;
  background:var(--writing-teal-soft);
  letter-spacing:.05em;
}

.writing-card-cn-title{
  margin:3px 0 5px;
  color:var(--writing-ink);
  font-size:19px;
  font-weight:900;
  line-height:1.4;
  letter-spacing:-.015em;
}

.email-card-title,
.writing-card-title{
  margin-bottom:12px;
  color:#536174;
  font-size:14px;
  font-weight:700;
}

.email-card-route{
  display:grid;
  grid-template-columns:minmax(110px, .65fr) minmax(0, 1.35fr);
  gap:10px;
  margin:14px 0 17px;
}

.email-card-route span{
  min-width:0;
  padding:10px 12px;
  border-radius:11px;
  background:#f7f9fa;
  color:#344054;
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.email-card-route small{
  display:block;
  margin-bottom:3px;
  color:#98a2b3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.email-card-foot,
.writing-card-foot{
  padding-top:12px;
  border-top:1px solid #edf1f2;
}

.writing-card-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.discussion-library-card{
  display:flex;
  min-height:310px;
  flex-direction:column;
}

.discussion-library-card .writing-card-sub{
  display:-webkit-box;
  min-height:66px;
  margin-bottom:15px;
  overflow:hidden;
  color:#607084;
  font-size:13px;
  font-weight:500;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.discussion-card-people{
  display:flex;
  align-items:center;
  min-height:38px;
  margin:auto 0 14px;
}

.discussion-card-people img{
  width:34px;
  height:34px;
  margin-right:-7px;
  border:2px solid #fff;
  border-radius:50%;
  background:#eeeeff;
  object-fit:cover;
  object-position:center 18%;
}

.discussion-card-people span{
  min-width:0;
  margin-left:16px;
  overflow:hidden;
  color:#7b8795;
  font-size:11px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Exam-like Academic Discussion workspace */

.discussion-prompt-pane,
.discussion-response-pane{
  border-radius:16px;
  box-shadow:0 3px 14px rgba(28, 56, 68, .06);
}

.discussion-prompt-pane{
  border-top:4px solid var(--writing-teal, #7777d9);
}

.discussion-exam-kicker{
  margin-bottom:13px;
  color:#6868c9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}

.discussion-course-title{
  margin-bottom:16px;
  font-weight:800;
}

.discussion-instruction-box{
  margin-bottom:22px;
  padding:16px;
  border-radius:12px;
  background:#f5f8f8;
  color:#273449;
}

.discussion-instruction-box .email-task-list{
  margin:10px 0 8px;
}

.discussion-instruction-box .email-task-list li,
.discussion-instruction-box .email-note{
  font-size:14px;
}

.discussion-professor-post{
  padding-top:20px;
  border-top:1px solid #e5ebec;
}

.discussion-person{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.discussion-avatar-frame{
  flex:0 0 auto;
  display:block;
  overflow:hidden;
  border-radius:50%;
  background:#eeeeff;
}

.discussion-avatar-frame img{
  display:block;
  width:110%;
  height:110%;
  max-width:none;
  object-fit:cover;
  transform:translate(var(--discussion-avatar-shift-x, -5%), var(--discussion-avatar-shift-y, -5%));
}

.discussion-avatar-frame img[src$="professor-sheep.png"]{
  --discussion-avatar-shift-x:-5%;
  --discussion-avatar-shift-y:-3%;
}

.discussion-avatar-frame img[src$="student-fox.png"]{
  --discussion-avatar-shift-x:-9%;
  --discussion-avatar-shift-y:-5%;
}

.discussion-avatar-frame img[src$="student-rabbit.png"]{
  --discussion-avatar-shift-x:-16%;
  --discussion-avatar-shift-y:-6%;
}

.professor-avatar-frame{
  width:64px;
  height:64px;
}

.discussion-person .email-prompt-title{
  margin:0;
}

.discussion-student-posts{
  display:grid;
  gap:12px;
  margin-bottom:20px;
}

.discussion-student-post{
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  align-items:start;
  gap:14px;
  padding:16px;
  border:1px solid #e2e9ea;
  border-radius:14px;
  background:#fbfcfc;
}

.discussion-student-identity{
  color:#344054;
  font-size:12px;
  text-align:center;
}

.student-avatar-frame{
  width:54px;
  height:54px;
  margin:0 auto 6px;
}

.discussion-student-post p{
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.65;
}

.discussion-response-pane .email-compose-title{
  padding-top:16px;
  border-top:1px solid #e5ebec;
}

@media (max-width:900px){
  .writing-type-tabs{
    grid-template-columns:1fr;
  }

  .writing-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .writing-hub-header,
  .writing-type-row,
  .writing-panel{
    padding-left:20px;
    padding-right:20px;
  }

  .writing-panel-head{
    display:block;
  }

  .writing-panel-head p{
    margin-top:7px;
    text-align:left;
  }

  .writing-list-grid{
    grid-template-columns:1fr;
  }

  .email-card-route{
    grid-template-columns:1fr;
  }

  .discussion-library-card{
    min-height:0;
  }

  .discussion-student-post{
    grid-template-columns:52px minmax(0, 1fr);
    gap:10px;
    padding:13px;
  }

  .student-avatar-frame{
    width:44px;
    height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  .writing-type-tab,
  .email-card,
  .writing-card,
  .email-card::before,
  .writing-card::before{
    transition:none;
  }
}

/* ===== Speaking Hub ===== */

.speaking-hub{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.speaking-hub-header{
  padding:34px 34px 20px;
  border-bottom:1px solid var(--line);
}

.speaking-hub-header h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.2;
}

.speaking-hub-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.speaking-type-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px 34px 10px;
  flex-wrap:wrap;
}

.speaking-type-label{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.speaking-type-tabs{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.speaking-type-tab{
  border:none;
  background:#f2f5fb;
  color:#5f6c82;
  font-size:17px;
  font-weight:800;
  padding:18px 28px;
  border-radius:16px;
  cursor:pointer;
  transition:.2s ease;
}

.speaking-type-tab:hover{
  background:#eaf1ff;
  color:var(--primary-dark);
}

.speaking-type-tab.active{
  background:#6574f7;
  color:#fff;
  box-shadow:0 12px 24px rgba(101,116,247,.22);
}

.speaking-panel{
  padding:18px 34px 34px;
}

.speaking-panel-head{
  margin-bottom:18px;
}

.speaking-panel-head h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.25;
}

.speaking-panel-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.speaking-list-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.speaking-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  text-decoration:none;
  transition:.18s ease;
}

.speaking-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.speaking-card.locked{
  border-color:#d8e0ef;
  background:#f8fafc;
  color:#64748b;
}

.speaking-card.locked .speaking-card-title{
  color:#334155;
}

.reading-card.locked{
  border-color:#d8e0ef;
  background:#f8fafc;
  color:#64748b;
}

.reading-card.locked .reading-card-title{
  color:#334155;
}

.reading-card.locked .reading-card-foot{
  color:#64748b;
}

.email-card.locked,
.writing-card.locked,
.listening-card.locked,
.bs-set-row.access-blocked{
  border-color:#d8e0ef;
  background:#f8fafc;
  color:#64748b;
}

.email-card.locked .email-card-title,
.writing-card.locked .writing-card-cn-title,
.listening-card.locked .listening-card-title{
  color:#334155;
}

.speaking-card-title{
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:10px;
}

.speaking-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  color:#7a869a;
  margin-bottom:10px;
}

.interview-card-meta{
  justify-content:flex-start;
  flex-wrap:wrap;
}

.interview-card-meta span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.interview-card-meta span:first-child{
  flex:0 0 auto;
}

.interview-card-title{
  display:grid;
  gap:4px;
}

.interview-title-en,
.interview-title-zh{
  display:block;
  min-width:0;
}

.interview-title-en{
  color:var(--text);
  font-size:18px;
  letter-spacing:-0.01em;
}

.interview-title-zh{
  color:#64748b;
  font-size:15px;
  font-weight:750;
}

.interview-card-foot{
  display:grid;
  gap:2px;
  padding-top:10px;
  border-top:1px solid #eef2f7;
}

.interview-card-foot strong{
  margin-top:4px;
  color:#7c3aed;
}

.speaking-card-foot{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

@media (max-width:900px){
  .speaking-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px){
  .speaking-hub-header{
    padding:26px 20px 16px;
  }

  .speaking-hub-header h1{
    font-size:34px;
  }

  .speaking-type-row{
    padding:20px 20px 8px;
    gap:12px;
  }

  .speaking-type-label{
    width:100%;
    font-size:16px;
  }

  .speaking-type-tabs{
    width:100%;
  }

  .speaking-type-tab{
    padding:14px 18px;
    font-size:15px;
    border-radius:14px;
  }

  .speaking-panel{
    padding:16px 20px 24px;
  }

  .speaking-panel-head h2{
    font-size:24px;
  }

  .speaking-list-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .speaking-card{
    padding:18px;
    border-radius:18px;
  }

  .speaking-card-title{
    font-size:17px;
  }
}

.scene-date{
  margin-left:auto;
  color:#7a869a;
  font-size:13px;
  font-weight:800;
}

.lr-locked-panel{
  text-align:center;
  padding:38px 24px;
}

.lr-locked-panel h2{
  margin:0 0 10px;
}

.lr-locked-panel p{
  margin:0 auto 18px;
  max-width:520px;
  color:#64748b;
  line-height:1.7;
}

/* ===== Listening Pages ===== */

.listening-hub,
.listening-page,
.listening-type-shell,
.listening-test-shell{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.listening-hub-header,
.listening-type-header,
.listening-test-header{
  padding:34px 34px 20px;
  border-bottom:1px solid var(--line);
}

.listening-hub-header h1,
.listening-type-header h1,
.listening-test-header h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.2;
}

.listening-hub-header p,
.listening-type-header p,
.listening-test-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.listening-type-grid,
.listening-item-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  padding:28px 34px 34px;
}

.listening-entry-card,
.listening-item-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 16px rgba(24,39,75,.05);
  transition:.18s ease;
}

.listening-entry-card:hover,
.listening-item-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(24,39,75,.09);
}

.listening-entry-card h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.35;
}

.listening-entry-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

.listening-item-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.listening-item-title{
  font-size:20px;
  font-weight:900;
  color:var(--text);
  line-height:1.35;
}

.listening-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.listening-item-meta{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin-bottom:14px;
}

.listening-item-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.listening-score-text{
  color:#64748b;
  font-size:14px;
  font-weight:700;
}

.listening-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:12px;
  padding:10px 16px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  background:#e5e7eb;
  color:#111827;
  text-decoration:none;
  font-family:inherit;
}

.listening-btn.primary{
  background:#2563eb;
  color:#fff;
}

.listening-btn.dark{
  background:#111827;
  color:#fff;
}

.listening-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.listening-empty-state{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:20px;
  padding:26px;
  color:var(--muted);
  line-height:1.8;
}

/* ===== Listening Test List ===== */

.listening-test-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:28px 34px 34px;
}

.listening-test-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:0 6px 20px rgba(24,39,75,.06);
}

.listening-test-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.listening-test-title{
  font-size:28px;
  font-weight:900;
  color:var(--text);
  line-height:1.3;
}

.listening-test-meta{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin-top:6px;
}

.listening-module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

.listening-module-card{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:20px;
  padding:18px;
}

.listening-module-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:10px;
  color:#111827;
}

.listening-module-meta{
  color:#64748b;
  font-size:14px;
  line-height:1.8;
  margin-bottom:14px;
}

.listening-module-items{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.listening-module-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px 14px;
}

.listening-module-item-left{
  line-height:1.5;
}

.listening-module-item-title{
  font-size:15px;
  font-weight:800;
  color:#111827;
}

.listening-module-item-sub{
  color:#64748b;
  font-size:13px;
}

/* ===== Listening Practice Page ===== */

.listening-page{
  padding:28px;
  overflow:visible;
}

.listening-practice-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.listening-practice-header h1{
  margin:0 0 8px;
  font-size:36px;
  line-height:1.2;
}

.listening-meta{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.listening-top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.listening-stage{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:24px;
  align-items:start;
}

.listening-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow:0 6px 20px rgba(24,39,75,.06);
}

.audio-box-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
  color:var(--text);
}

.audio-instruction{
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin-bottom:16px;
}

.audio-player{
  width:100%;
  margin:10px 0 14px;
}

.listening-status{
  padding:14px 16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#475569;
  line-height:1.7;
  font-size:15px;
}

.timer-box{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#eef4ff;
  color:#2563eb;
  border-radius:16px;
  padding:14px 16px;
  font-weight:900;
}

.timer-number{
  font-size:26px;
  letter-spacing:.02em;
}

.question-area.locked{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
  text-align:center;
  color:#64748b;
  line-height:1.8;
  background:linear-gradient(180deg,#f8fafc,#fff);
}

.locked-icon{
  font-size:34px;
  margin-bottom:12px;
}

.question-block{
  border-bottom:1px solid var(--line);
  padding:0 0 18px;
  margin-bottom:18px;
}

.question-block:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.question-number{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:13px;
  font-weight:900;
  margin-bottom:10px;
}

.speaker-line{
  font-size:17px;
  line-height:1.7;
  padding:12px 14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  margin:0 0 12px;
  color:#334155;
}

.question-text{
  font-size:19px;
  font-weight:900;
  line-height:1.55;
  margin-bottom:14px;
  color:var(--text);
}

.option-row{
  display:block;
  border:1px solid #dbe4f0;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:10px;
  cursor:pointer;
  line-height:1.6;
  transition:.15s ease;
  background:#fff;
}

.option-row:hover{
  background:#f8fafc;
}

.option-row input{
  margin-right:8px;
  transform:translateY(1px);
}

.option-row.selected{
  border-color:#2563eb;
  background:#eef4ff;
}

.option-row.correct{
  border-color:#16a34a;
  background:#ecfdf3;
}

.option-row.wrong{
  border-color:#dc2626;
  background:#fef2f2;
}

.explanation-box{
  display:none;
  margin-top:12px;
  padding:14px 16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  line-height:1.8;
  color:#334155;
  font-size:15px;
}

.explanation-box.show{
  display:block;
}

.result-box{
  display:none;
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#334155;
  line-height:1.8;
}

.result-box.show{
  display:block;
}

.result-score{
  font-size:22px;
  font-weight:900;
  color:#111827;
  margin-bottom:6px;
}

.practice-bottom-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

@media (max-width:900px){
  .listening-type-grid,
  .listening-item-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .listening-stage{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .listening-hub-header,
  .listening-type-header,
  .listening-test-header{
    padding:26px 20px 16px;
  }

  .listening-hub-header h1,
  .listening-type-header h1,
  .listening-test-header h1{
    font-size:34px;
  }

  .listening-type-grid,
  .listening-item-grid,
  .listening-test-list{
    grid-template-columns:1fr;
    padding:20px;
    gap:14px;
  }

  .listening-page{
    padding:20px;
    border-radius:24px;
  }

  .listening-practice-header h1{
    font-size:30px;
  }

  .listening-card,
  .listening-entry-card,
  .listening-item-card,
  .listening-test-card{
    padding:18px;
    border-radius:18px;
  }

  .question-text{
    font-size:17px;
  }
}

/* Keep shared interaction timing authoritative after page-specific rules. */
.nav-links a,
.auth-nav button,
.auth-submit,
.auth-switches button,
.auth-close,
.home-refresh,
.module-tile,
.record-row,
.reading-type-tab,
.listening-type-tab,
.speaking-type-tab,
.writing-type-tab,
.reading-card,
.listening-list-grid .listening-card,
.speaking-card,
.writing-card,
.email-card,
.discussion-card,
.top-link{
  transition:transform 160ms var(--ease-ui), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms var(--ease-ui), opacity 180ms ease;
}

/* Keep grouped response sets ahead of legacy listening grid rules. */
.listening-list-grid.is-response-grouped{
  display:block;
}