@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&family=Barlow:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Brand tokens (aligned to fendodo.net: burgundy + charcoal + crest) ── */
  /* primary keeps the --c-blue* names (used app-wide) but maps to brand burgundy */
  --c-blue:#76161B; --c-blue-deep:#5A1115; --c-blue-bright:#BA3239;
  --c-sky:#E7D8C7; --c-burgundy:#76161B;
  --c-gold:#C6A15B; --c-gold-soft:#E7D8C7; /* premium accent */
  --c-sage:#7C8B71; --c-sage-2:#97A48D; --c-charcoal:#1C1C1C;
  /* 2026-07 readability pass (owner request: bigger + darker interface text):
     --c-body 3A3A3A→2A2A2A · --c-muted 878787→555555. Every student-facing
     page reads these tokens, so the darkening flows site-wide. */
  --c-ink:#1C1C1C; --c-body:#2A2A2A; --c-muted:#555555; --c-line:#DEDEDE;
  --bg-app:#F2F2F2; --bg-card:#FFFFFF; --bg-fill:#F3F4F3;
  --c-ok:#16A34A; --c-warn:#D97706; --c-warn-bg:#FFFBEB; --c-warn-bd:#FDE68A;
  --grad-hero:linear-gradient(160deg,#76161B 0%,#5A1115 52%,#1C1C1C 100%);
  --grad-topbar:linear-gradient(180deg,#1C1C1C 0%,#3A1015 100%);
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px;
  --sh-card:0 2px 10px rgba(0,0,0,.04); --sh-pop:0 12px 40px rgba(0,0,0,.08);
  --font-ui:'Barlow','Noto Sans TC',sans-serif;
  --font-display:'Playfair Display','Noto Sans TC',serif;
  --font-read:'Source Serif 4','Noto Sans TC',Georgia,serif;
}
/* base interface size: was the implicit browser default — now pinned at 16px
   so pages inherit a full-size base (readability pass). */
body{font-family:var(--font-ui);font-size:16px;background:var(--bg-app);color:var(--c-ink);height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.screen{display:none;flex:1;overflow:auto;}
.screen.active{display:flex;}

/* ── V1 SHARED COMPONENTS ── */
.eyebrow{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--c-burgundy);}
.btn-primary{background:var(--c-blue);color:#fff;border:0;padding:11px 22px;border-radius:var(--r-sm);font-weight:700;font-size:14px;cursor:pointer;font-family:var(--font-ui);}
.btn-primary:hover{background:var(--c-blue-deep);}
.btn-ghost{background:transparent;color:var(--c-blue);border:1.5px solid var(--c-blue);padding:9px 18px;border-radius:var(--r-sm);font-weight:600;font-size:13px;cursor:pointer;font-family:var(--font-ui);}
.btn-ghost:hover{background:var(--bg-fill);}
.btn-next{background:var(--c-sage);color:#fff;border:0;padding:8px 18px;border-radius:5px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font-ui);}
.btn-next:hover{filter:brightness(1.12);}
.hero{background:var(--grad-hero);color:#fff;position:relative;overflow:hidden;}
.hero .watermark{position:absolute;opacity:.06;color:#fff;pointer-events:none;}
.shield{display:inline-block;vertical-align:middle;}
/* topbar */
.topbar{background:var(--grad-topbar);color:#fff;display:flex;align-items:center;height:56px;padding:0 24px;flex-shrink:0;}
.topbar .tb-left{display:flex;align-items:center;gap:10px;}
.topbar .tb-brand{font-weight:700;font-size:13px;letter-spacing:.5px;}
.topbar .tb-sec{font-size:11px;color:var(--c-sky);letter-spacing:1px;text-transform:uppercase;border-left:1px solid #3a548a;padding-left:14px;}
.topbar .tb-center{margin:0 auto;text-align:center;}
.topbar #timer-label{font-size:9px;color:var(--c-sky);letter-spacing:2px;text-transform:uppercase;}
.topbar #timer{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1;margin-top:1px;}
.topbar #timer.warn{color:#ffcc00;} .topbar #timer.danger{color:#ff9b9b;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.topbar .tb-count{font-size:12px;color:var(--c-sky);}
#prog-bar{height:3px;background:#dde1e8;flex-shrink:0;} #prog-fill{height:100%;background:var(--c-burgundy);transition:width .4s;}
/* subject cards */
.subject-card{background:var(--bg-card);border-radius:var(--r-lg);padding:22px 18px;border-left:4px solid var(--c-blue);box-shadow:var(--sh-card);cursor:pointer;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .12s,box-shadow .12s;}
.subject-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.subject-card .sc-code{font-size:24px;font-weight:700;color:var(--c-ink);letter-spacing:-.3px;margin-top:6px;}
.subject-card .sc-meta{font-size:12.5px;color:var(--c-muted);margin-top:2px;}
.subject-card .sc-go{font-size:11px;color:var(--c-muted);letter-spacing:1px;text-transform:uppercase;}
.subject-card.disabled{background:#f5f5f5;border-left-color:#ccc;border:1px dashed #ccc;color:#999;cursor:not-allowed;box-shadow:none;}
.subject-card.disabled:hover{transform:none;box-shadow:none;}
.badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.5px;}
.badge-hybrid{background:#fef3c7;color:#92400e;} .badge-disabled{background:#e5e7eb;color:#6b7280;}
/* option rows */
.opt-row{background:var(--bg-card);border:1.5px solid var(--c-line);padding:12px 16px;border-radius:var(--r-sm);margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .12s;}
.opt-row:hover{border-color:var(--c-blue-bright);}
.opt-row.sel{background:#f8eded;border-color:var(--c-blue);}
.opt-dot{width:22px;height:22px;border:1.5px solid #c4c9d4;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--c-muted);flex:0 0 auto;}
.opt-row.sel .opt-dot{background:var(--c-blue);border-color:var(--c-blue);color:#fff;}
.opt-txt{font-size:14px;color:var(--c-ink);}
/* section scaffold shared by renderers */
.sec-split{display:flex;height:100%;width:100%;}
.sec-left{flex:1;min-width:0;padding:36px 40px;border-right:1px solid var(--c-line);background:var(--bg-card);overflow:auto;}
.sec-right{flex:1;min-width:0;padding:36px 40px;background:var(--bg-app);overflow:auto;}
.sec-read{font-family:var(--font-read);font-size:15.5px;line-height:1.85;color:#1a1a1a;}
.q-count{font-size:11px;color:var(--c-muted);letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:8px;}
.q-stem{font-size:15.5px;color:var(--c-ink);margin-bottom:18px;line-height:1.55;}
.q-nav{display:flex;justify-content:space-between;margin-top:20px;border-top:1px solid var(--c-line);padding-top:16px;}
.q-nav button{background:transparent;border:1.5px solid #c4c9d4;color:var(--c-body);padding:8px 16px;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-ui);}
.q-nav button:disabled{opacity:.35;cursor:not-allowed;}
/* listening */
.audio-player{background:var(--bg-card);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:8px;display:flex;align-items:center;gap:16px;}
.audio-player audio{flex:1;}
.listen-warn{font-size:12px;color:var(--c-warn);background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:24px;}
.track-info{font-weight:600;color:var(--c-blue);margin-bottom:14px;}
.track-nav{display:flex;gap:8px;margin-top:18px;}
.track-nav button{background:transparent;border:1.5px solid #c4c9d4;color:var(--c-body);padding:8px 16px;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-ui);}
.track-nav button:disabled{opacity:.35;cursor:not-allowed;}
.listen-wrap{padding:32px 40px;max-width:860px;margin:0 auto;width:100%;}
/* speaking */
.speak-wrap{padding:40px;max-width:680px;margin:0 auto;width:100%;text-align:center;}
.speak-prompt{background:var(--bg-card);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:28px 32px;text-align:left;margin-bottom:28px;}
.speak-prompt .sec-read{font-size:16px;line-height:1.7;}
.rec-indicator{width:88px;height:88px;border-radius:50%;background:#fdecec;border:3px solid var(--c-burgundy);display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;}
.rec-indicator .dot{width:22px;height:22px;background:var(--c-burgundy);border-radius:4px;}
.rec-indicator.recording::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c-burgundy);opacity:.3;animation:pulse 1.2s infinite;}
.rec-status{font-size:13px;color:var(--c-burgundy);font-weight:600;letter-spacing:.5px;margin-top:14px;}
.rec-hint{font-size:12px;color:var(--c-muted);margin-top:8px;}
/* writing */
.write-prompt .sec-read{font-size:15.5px;}
.write-editor{padding:24px 32px;background:var(--bg-app);display:flex;flex-direction:column;height:100%;}
.write-area{background:var(--bg-card);border:1.5px solid var(--c-line);border-radius:var(--r-md);padding:18px 20px;flex:1;font-family:var(--font-read);font-size:15px;line-height:1.8;color:#1a1a1a;width:100%;resize:none;outline:none;}
.write-area:focus{border-color:var(--c-blue);}
.write-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.write-count{font-size:12px;color:var(--c-muted);} .write-count strong{color:var(--c-blue);}
.write-saved{font-size:11px;color:var(--c-ok);}
/* ── Tablet (768–1023px) ── */
@media(max-width:1023px){
  .topbar{padding:0 16px;}
  .topbar .tb-sec{display:none;}
  .sec-left,.sec-right{padding:24px 22px;}
  .listen-wrap,.speak-wrap{padding:24px;}
}