:root{
  /* 主色：靜藍（鎮靜、學術感，適合長時間閱讀） */
  --pri:#2D5FA8;--pri-bg:#EDF2FB;--pri-bd:#B0C8EE;--pri-tx:#1D4080;
  /* 警示紅（僅限錯誤・重要提示・SRS徽章） */
  --red:#C0392B;--red-bg:#FDF2F1;--red-bd:#F0B8B2;
  /* 成功綠 */
  --grn-bg:#EAF5EE;--grn-bd:#8ECDA8;--grn-tx:#1E7A45;
  /* 背景：暖米白（護眼，接近紙張質感） */
  --sur:#F4F2EC;--card:#FFFFFF;--bd:#E6E3DB;--bd2:#C8C5BB;
  /* 文字：深暖黑（比純黑柔和） */
  --tx:#2A2825;--tx2:#514F4C;--tx3:#9A958F;
  /* 任務類型色（各自獨立，低飽和） */
  --tv:#1A7A72;--tg:#7B5EA7;--tk:#B8601A;--tr:#2E6DA4;--tl:#2E7D52;
  /* 尺寸 */
  --r:12px;--rl:18px;--nav-h:68px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Segoe UI",sans-serif;background:var(--sur);color:var(--tx);min-height:100vh;font-size:15px;line-height:1.6;}
.wrap{max-width:740px;margin:0 auto;padding-bottom:3rem;}
.screen{display:none;}
.screen.active{display:block;animation:fi .2s ease;}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.prog-fill{position:relative;overflow:hidden;}
.prog-fill::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.38),transparent);animation:shimmer 2.2s ease-in-out infinite;}

/* ── Header ── */
.hdr{display:flex;align-items:center;gap:12px;padding:1rem 1.25rem .85rem;border-bottom:1px solid var(--bd);background:var(--card);position:sticky;top:0;z-index:99;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.logo{width:36px;height:36px;background:var(--pri-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:var(--pri);}
.hdr-t{font-size:16px;font-weight:700;}
.hdr-s{font-size:11px;color:var(--tx3);margin-top:1px;}
.hdr-r{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* iOS 返回按鈕 */
.btn-back{display:flex;align-items:center;gap:1px;border:none;background:none;cursor:pointer;color:var(--pri);font-size:16px;font-weight:600;padding:6px 8px 6px 2px;min-height:44px;flex-shrink:0;line-height:1;}
.btn-back-arr{font-size:26px;line-height:1;margin-right:1px;}

/* ── 按鈕 ── */
.btn-p{display:block;width:100%;padding:15px;background:var(--pri);border:none;border-radius:var(--r);font-size:16px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;text-align:center;box-shadow:0 3px 10px rgba(45,95,168,.25);}
.btn-p:hover{opacity:.88;}
.btn-p:disabled{background:var(--bd);color:var(--tx3);box-shadow:none;cursor:not-allowed;}
.btn-s{background:var(--card);border:1px solid var(--bd2);border-radius:var(--r);padding:7px 14px;font-size:13px;color:var(--tx2);cursor:pointer;}
.btn-s:hover{background:var(--sur);}
.btn-done{padding:8px 16px;border-radius:22px;border:1.5px solid var(--grn-bd);background:var(--grn-bg);color:var(--grn-tx);font-size:13px;font-weight:700;cursor:pointer;min-height:38px;white-space:nowrap;}

/* ── Pad ── */
.pad{padding:1.25rem 1.25rem;}

/* ── Setup ── */
.sec-lbl{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
.lvl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:1.25rem;}
.lvl-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s;}
.lvl-card:hover{border-color:var(--bd2);}
.lvl-card.sel{border:2px solid var(--pri);background:var(--pri-bg);}
.lvl-n{font-size:18px;font-weight:700;}
.lvl-card.sel .lvl-n{color:var(--pri);}
.lvl-d{font-size:10px;color:var(--tx3);margin-top:3px;line-height:1.3;}
.form-row{margin-bottom:1.1rem;}
.form-lbl{font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:6px;display:block;}
.form-sel{width:100%;padding:10px 12px;border:1px solid var(--bd2);border-radius:var(--r);font-size:14px;background:var(--card);color:var(--tx);}
.time-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.time-btn{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:10px 4px;text-align:center;cursor:pointer;font-size:13px;transition:all .15s;}
.time-btn.sel{border:2px solid var(--pri);background:var(--pri-bg);color:var(--pri);font-weight:600;}
.time-sub{font-size:10px;color:var(--tx3);margin-top:2px;}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.focus-btn{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:9px 10px;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;transition:all .15s;}
.focus-btn.sel{border:2px solid var(--pri);background:var(--pri-bg);color:var(--pri);}

/* ── Home screen：列表式學習模式卡 ── */
.mode-list{display:flex;flex-direction:column;gap:12px;margin-bottom:1.5rem;}
/* 預設 mode-card（會話主題格子等） */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0;}
.mode-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:14px 16px;text-align:center;cursor:pointer;transition:all .15s;}
.mode-card:hover,.mode-card:active{box-shadow:0 4px 14px rgba(0,0,0,.10);}
.mode-icon{font-size:28px;margin-bottom:6px;}
.mode-title{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:4px;}
.mode-desc{font-size:12px;color:var(--tx2);line-height:1.5;margin-bottom:6px;}
.mode-tag{font-size:11px;color:var(--pri-tx);background:var(--pri-bg);border:1px solid var(--pri-bd);border-radius:20px;padding:2px 8px;display:inline-block;}
/* 首頁列表卡（覆寫） */
.mode-list .mode-card{text-align:left;display:flex;align-items:center;gap:16px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.04);border-radius:var(--rl);}
.mode-icon-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;background:var(--pri-bg);}
.mode-card.srs-card .mode-icon-wrap{background:rgba(255,255,255,.18);}
.mode-body{flex:1;min-width:0;}
.mode-list .mode-card .mode-title{font-size:16px;margin-bottom:3px;}
.mode-list .mode-card .mode-desc{font-size:13px;margin-bottom:0;}
.mode-list .mode-card .mode-tag{margin-top:6px;display:inline-block;}
.mode-arr{font-size:22px;color:var(--bd2);flex-shrink:0;line-height:1;}
/* SRS 特殊卡（藍漸層） */
.mode-card.srs-card{background:linear-gradient(135deg,#2D5FA8 0%,#1D4080 100%);border-color:transparent;box-shadow:0 4px 14px rgba(45,95,168,.28);}
.mode-card.srs-card .mode-title,.mode-card.srs-card .mode-desc{color:#fff;}
.mode-card.srs-card .mode-tag{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);}
.mode-card.srs-card .mode-arr{color:rgba(255,255,255,.4);}

/* ── Sprint section ── */
.sprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;}
.sprint-card{background:var(--card);border:1px solid var(--bd2);border-radius:10px;padding:16px;cursor:pointer;transition:all .15s;}
.sprint-card:hover{border-color:var(--pri);background:var(--pri-bg);}
.sprint-card-icon{font-size:24px;margin-bottom:6px;}
.sprint-card-title{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:4px;}
.sprint-card-desc{font-size:12px;color:var(--tx2);line-height:1.5;}

/* ── Standard multiplier ── */
.mult-bar{height:6px;border-radius:3px;background:linear-gradient(to right,var(--pri-bd),var(--pri));}

/* ── Post-lesson quiz ── */
.quiz-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:18px;margin:8px 0;}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:14px 16px;margin:8px 0;border:1.5px solid var(--bd2);border-radius:var(--r);cursor:pointer;transition:all .1s;font-size:15px;color:var(--tx);}
.quiz-opt:hover{border-color:var(--pri);background:var(--pri-bg);}
.quiz-opt.correct{border-color:#27AE60;background:var(--grn-bg);color:var(--grn-tx);}
.quiz-opt.wrong{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.quiz-opt.reveal{opacity:.55;}

/* ── Course count preview ── */
.course-preview{background:var(--pri-bg);border:1px solid var(--pri-bd);border-radius:var(--r);padding:12px 16px;margin:1rem 0;display:flex;align-items:center;gap:12px;}
.cp-num{font-size:32px;font-weight:700;color:var(--pri);}
.cp-label{font-size:13px;color:var(--tx2);}
.cp-detail{font-size:11px;color:var(--tx3);margin-top:3px;}

/* ── Progress dashboard ── */
.prog-hdr{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:1.1rem 1.25rem;margin-bottom:1rem;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ph-level{font-size:12px;font-weight:700;color:var(--pri);letter-spacing:.06em;margin-bottom:4px;}
.ph-title{font-size:18px;font-weight:700;}
.ph-meta{font-size:12px;color:var(--tx3);margin-top:3px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.stat-box{background:var(--sur);border-radius:var(--r);padding:10px 8px;text-align:center;}
.sn{font-size:20px;font-weight:700;}
.sn.done{color:var(--grn-tx);}
.sn.todo{color:var(--tx3);}
.sn.pct{color:var(--pri);}
.sl{font-size:11px;color:var(--tx3);margin-top:2px;}
.pb-wrap{height:8px;background:var(--sur);border-radius:20px;overflow:hidden;margin-top:12px;}
.pb{height:100%;background:var(--pri);border-radius:20px;transition:width .5s ease;position:relative;overflow:hidden;}
.pb::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.38),transparent);animation:shimmer 2.2s ease-in-out infinite;}

/* ── Phase tabs ── */
.ph-tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:4px;margin-bottom:1rem;}
.ph-tab{flex:1;padding:8px 4px;border-radius:8px;border:none;background:transparent;font-size:13px;font-weight:600;color:var(--tx3);cursor:pointer;transition:all .15s;text-align:center;}
.ph-tab.active{background:var(--sur);color:var(--tx);}

/* ── Course list ── */
.course-item{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .15s;}
.course-item:hover{border-color:var(--bd2);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.course-item.selecting{border-color:var(--pri);background:var(--pri-bg);transform:scale(0.997);box-shadow:0 0 0 3px rgba(45,95,168,0.15);transition:all 0.08s;}
.course-item.current{border:2px solid var(--pri);}
.course-item.locked{opacity:.55;cursor:default;}
.c-num{width:32px;height:32px;border-radius:50%;background:var(--sur);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--tx3);flex-shrink:0;margin-top:2px;}
.c-num.done{background:var(--grn-bg);border-color:var(--grn-bd);color:var(--grn-tx);}
.c-num.cur{background:var(--pri-bg);border-color:var(--pri-bd);color:var(--pri);}
.c-body{flex:1;min-width:0;}
.c-title{font-size:14px;font-weight:600;}
.c-jlpt{font-size:11px;color:var(--tx3);margin-top:3px;}
.c-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;}
.t-v{background:#E6F4F2;color:var(--tv);}
.t-g{background:#F2EEF9;color:var(--tg);}
.t-r{background:#EBF3FB;color:var(--tr);}
.t-l{background:#E9F4EE;color:var(--tl);}
.t-w{background:#F5EEF8;color:#512E5F;}
.t-k{background:#FDF1E6;color:var(--tk);}
.t-s{background:#FEF9E7;color:#6B3A2A;}
.c-status{font-size:12px;color:var(--tx3);flex-shrink:0;padding-top:3px;}

/* ── Lesson hero card ── */
.lesson-hdr{background:linear-gradient(145deg,var(--pri) 0%,#1D3F7A 100%);border-radius:20px;padding:22px 20px 20px;margin-bottom:20px;box-shadow:0 6px 20px rgba(45,95,168,.25);}
.ls-phase{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.ls-title{font-size:26px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:14px;letter-spacing:-.02em;}
.ls-jlpt{display:flex;flex-wrap:wrap;gap:6px;}
.ls-jlpt-chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.9);}

/* 課程大綱（手機隱藏） */
.outline-box{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:1.1rem 1.25rem;margin-bottom:1rem;}
.ob-title{font-size:13px;font-weight:700;color:var(--tx2);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.ob-badge{font-size:11px;background:var(--pri-bg);color:var(--pri-tx);padding:2px 8px;border-radius:20px;font-weight:700;}
.ol-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd);}
.ol-item:last-child{border-bottom:none;}
.ol-n{width:22px;height:22px;border-radius:50%;background:var(--sur);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--tx3);flex-shrink:0;margin-top:1px;}
.ol-lbl{font-size:14px;font-weight:600;}
.ol-sub{font-size:12px;color:var(--tx3);margin-top:2px;}
.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px;}
.scope-box{background:var(--sur);border-radius:var(--r);padding:8px 10px;font-size:12px;color:var(--tx2);}
.scope-box strong{display:block;font-size:13px;color:var(--tx);margin-bottom:2px;}

/* ── Section label（帶橫線） ── */
.divider{height:1px;background:var(--bd);margin:1rem 0;}
.task-sec-lbl{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.task-sec-lbl::after{content:'';flex:1;height:1px;background:var(--bd);}

/* ── 課程分類按鈕（大列表式） ── */
.cat-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--bd);border-radius:var(--rl);background:var(--card);cursor:pointer;text-align:left;margin-bottom:10px;transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.cat-btn:hover{border-color:var(--bd2);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.cat-btn.cat-done{border-color:var(--grn-bd);background:var(--grn-bg);}
.cat-btn-icon{font-size:26px;flex-shrink:0;width:40px;text-align:center;}
.cat-btn-body{flex:1;min-width:0;}
.cat-btn-title{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:3px;}
.cat-btn.cat-done .cat-btn-title{color:var(--grn-tx);}
.cat-btn-desc{font-size:13px;color:var(--tx3);line-height:1.4;}
.cat-btn-arr{font-size:20px;color:var(--bd2);flex-shrink:0;}
.cat-btn.cat-done .cat-btn-arr{color:var(--grn-tx);font-size:18px;font-weight:700;}

/* ── Task cards ── */
.task-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.task-card::before{content:'';display:block;height:4px;}
.task-card.vocab::before{background:var(--tv);}
.task-card.grammar::before{background:var(--tg);}
.task-card.reading::before{background:var(--tr);}
.task-card.listening::before{background:var(--tl);}
.task-card.writing::before{background:#8E44AD;}
.task-card.kanji::before{background:var(--tk);}
.task-card.speaking::before{background:#E67E22;}
.task-card.kana::before{background:#B8860B;}
.tk-top{padding:16px 18px 12px;}
.tk-main{flex:1;}
/* Task 類型 badge */
.task-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:10px;}
.task-card.vocab   .task-badge{background:#E6F4F2;color:var(--tv);}
.task-card.grammar .task-badge{background:#F2EEF9;color:var(--tg);}
.task-card.kanji   .task-badge{background:#FDF1E6;color:var(--tk);}
.task-card.reading .task-badge{background:#EBF3FB;color:var(--tr);}
.task-card.listening .task-badge{background:#E9F4EE;color:var(--tl);}
.task-card.kana    .task-badge{background:#FFF8E7;color:#8B6914;}
.tk-title{font-size:17px;font-weight:700;margin-bottom:5px;line-height:1.3;color:var(--tx);}
.tk-desc{font-size:14px;color:var(--tx2);line-height:1.6;}
.tk-mins{font-size:13px;color:var(--tx3);margin-top:8px;display:flex;align-items:center;gap:4px;}
.chk{width:34px;height:34px;border-radius:50%;border:2px solid var(--bd2);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--sur);}
.chk.done{background:var(--grn-bg);border-color:var(--grn-bd);}
.chk.done::after{content:'✓';font-size:16px;color:var(--grn-tx);font-weight:700;}
.task-done-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 18px 14px;border-top:1px solid var(--bd);}
.task-done-hint{font-size:13px;color:var(--tx3);}
.exp-btn{font-size:13px;color:var(--pri);background:none;border:none;cursor:pointer;padding:6px 0 0;display:block;}
.exp-btn:hover{opacity:.75;}
.content-box{background:var(--sur);border-radius:var(--r);padding:14px;font-size:14px;color:var(--tx);line-height:1.8;margin-top:8px;display:none;}
.content-box.open{display:block;}
.jp-line{display:flex;align-items:flex-start;gap:6px;padding:5px 0;border-bottom:1px solid var(--bd);}
.jp-line:last-child{border-bottom:none;}
.jp-line-text{flex:1;line-height:1.9;font-size:14px;}
.speak-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--bd2);background:var(--card);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;margin-top:2px;}
.accent-btn{color:var(--tg);font-size:12px;}

/* ── Kana Learning Layout ── */
.kana-row{display:grid;grid-template-columns:32px 56px 48px 1fr;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--sur);}
.kana-char{font-size:36px;font-family:serif;text-align:center;cursor:pointer;line-height:1;}
.kana-char:hover{color:var(--pri);}
.kana-romaji{font-size:13px;color:var(--tx3);text-align:center;font-weight:600;font-family:monospace;}
.kana-desc{font-size:12px;color:var(--tx2);line-height:1.5;}
.kana-kata{font-size:14px;color:var(--tx3);margin-left:4px;}

/* ── Dialogue Avatar Panel ── */
.avatar-panel{display:flex;gap:16px;justify-content:center;padding:8px 0 4px;position:sticky;top:0;background:var(--sur);z-index:10;border-bottom:1px solid var(--bd);}
.avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.avatar-canvas{border-radius:50%;border:2px solid var(--bd);transition:border-color .1s,box-shadow .1s;}
.avatar-canvas.speaking{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-bg);}
.avatar-name{font-size:10px;color:var(--tx3);font-weight:600;letter-spacing:.5px;}
.speak-btn:hover{background:var(--pri-bg);border-color:var(--pri-bd);}
.pron-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid #aac4e0;background:#e8f4ff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;transition:all .15s;margin-top:2px;}
.pron-btn:hover{background:#c8e4ff;border-color:var(--pri);}
.pron-btn.recording{background:#fde;border-color:var(--red);animation:pb .6s ease infinite;}
.speak-btn.playing{background:var(--pri-bg);border-color:var(--pri-bd);animation:pb .8s ease infinite;}
@keyframes pb{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.plain-line{padding:2px 0;line-height:1.9;font-size:14px;}
.dialogue-block{background:var(--sur);border-radius:var(--r);padding:10px 12px;margin:6px 0;}
.dialogue-controls{display:flex;gap:6px;margin:8px 0 4px;align-items:center;}
.play-all-btn{background:var(--pri-bg);border:1px solid var(--pri-bd);border-radius:var(--r);padding:7px 16px;font-size:13px;font-weight:600;color:var(--pri);cursor:pointer;}
.play-all-btn:hover{opacity:.85;}
.play-all-btn.playing{background:var(--sur);color:var(--tx3);}
.dlg-spk-a{color:#1A5276;}
.dlg-spk-b{color:#145A32;}
.dlg-spk-c{color:#6E2F00;}
.pa-badge{display:inline-block;background:#EBF5FB;color:#1A5276;border:1px solid #AED6F1;border-radius:4px;font-size:10px;font-weight:700;padding:1px 5px;margin-left:4px;vertical-align:middle;letter-spacing:.02em;font-family:monospace;}
.pa-flat{background:#EAFAF1;color:#145A32;border-color:#A9DFBF;}
.exam-badge{display:inline-block;background:#FEF9E7;color:#7D6608;border:1px solid #F9E79F;border-radius:4px;font-size:10px;padding:1px 5px;margin-left:3px;vertical-align:middle;white-space:nowrap;}
.exam-badge.hot{background:var(--red-bg);color:#922B21;border-color:#F1948A;}
.exam-badge.super{background:#F5EEF8;color:#6C3483;border-color:#D7BDE2;}
.pa-head{background:#FADBD8;color:#922B21;border-color:#F1948A;}

/* ── Vocab card ── */
.vocab-card{padding:14px 0 10px;border-bottom:1px solid var(--bd);}
.vocab-card:last-child{border-bottom:none;}
.vocab-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.6;margin-bottom:2px;}
.v-word{font-weight:800;font-size:20px;white-space:nowrap;color:var(--tx);}
.v-pos-row{margin:2px 0 1px;}
.v-pos{display:inline-block;font-size:11px;color:var(--tx3);background:var(--sur);border:1px solid var(--bd);border-radius:20px;padding:1px 8px;line-height:1.8;}
.v-meaning-row{margin-bottom:2px;}
.v-meta{color:var(--pri);font-size:14px;font-weight:700;}
.vocab-r2{display:flex;align-items:flex-start;gap:5px;padding:2px 0 0 2px;margin-top:2px;}
.v-kana{font-size:13px;color:var(--tx3);padding-top:3px;white-space:nowrap;}
.v-ex{font-size:14px;line-height:1.8;flex:1;}
.vocab-r3{font-size:13px;color:var(--tx3);padding:2px 0 4px 28px;line-height:1.6;}

/* ── Kanji card ── */
.kanji-card{padding:8px 0 6px;border-bottom:1px solid var(--bd);}
.kanji-card:last-child{border-bottom:none;}
.kanji-char{font-size:28px;font-weight:700;font-family:serif;color:var(--tx);padding:2px 0 6px;}
.kanji-tbl{width:100%;border-collapse:collapse;table-layout:fixed;}
.kanji-td{padding:4px 6px 3px 0;vertical-align:top;width:50%;}
.kanji-td+.kanji-td{padding-left:8px;border-left:1px solid var(--bd2);}
.kanji-type{display:inline-block;background:var(--sur);border:1px solid var(--bd2);border-radius:3px;font-size:10px;font-weight:700;color:var(--tx3);padding:1px 4px;margin-right:3px;vertical-align:middle;flex-shrink:0;}
.kanji-reading{font-size:13px;font-weight:700;color:var(--pri);margin-right:4px;}
.kanji-vocab{font-size:13px;font-weight:600;color:var(--tx);}
.kanji-kana{font-size:11px;color:var(--tx3);margin-left:2px;}
.kanji-mean{font-size:12px;color:var(--tx2);margin-left:5px;}
.kanji-ex-row{font-size:13px;color:var(--tx);padding-top:5px;line-height:1.8;}
.kanji-ex-inner{display:flex;align-items:flex-start;gap:4px;}
.kanji-tr-row{font-size:12px;color:var(--tx3);padding:2px 0 4px 28px;line-height:1.6;}
.ai-ld{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3);padding:5px 0;}
.dot{width:5px;height:5px;background:var(--pri);border-radius:50%;animation:bl 1.2s ease infinite;}
.dot:nth-child(2){animation-delay:.2s;}.dot:nth-child(3){animation-delay:.4s;}
@keyframes bl{0%,80%,100%{opacity:.25;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}
.err-box{background:var(--red-bg);border:1px solid var(--red-bd);border-radius:var(--r);padding:10px 12px;font-size:13px;color:var(--red);margin-top:8px;white-space:pre-wrap;}
.ok-banner{background:var(--grn-bg);border:1px solid var(--grn-bd);border-radius:var(--rl);padding:14px 16px;margin-top:1rem;display:flex;gap:10px;align-items:center;}
.ok-banner-t{font-size:14px;font-weight:700;color:var(--grn-tx);}
.ok-banner-s{font-size:12px;color:var(--tx3);margin-top:2px;}

/* ── Bottom Navigation ── */
#bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--bd);display:none;z-index:200;box-shadow:0 -1px 8px rgba(0,0,0,.07);}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;cursor:pointer;padding:6px 2px;color:var(--tx3);position:relative;transition:color .15s;-webkit-tap-highlight-color:transparent;min-height:44px;}
.bnav-btn.active{color:var(--pri);}
.bnav-icon{font-size:24px;line-height:1;}
.bnav-lbl{font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:16px;height:16px;background:var(--red);color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card);}
#bnav-account-sheet{display:none;position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));right:4px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 -4px 20px rgba(0,0,0,.14);z-index:201;min-width:154px;overflow:hidden;}
#bnav-account-sheet.open{display:block;}
.bnav-sheet-btn{display:block;width:100%;padding:13px 18px;border:none;border-bottom:1px solid var(--bd);background:none;cursor:pointer;font-size:14px;color:var(--tx);text-align:left;}
.bnav-sheet-btn:last-child{border-bottom:none;}
.bnav-sheet-btn.danger{color:var(--red);}

/* ── SRS 選項 ── */
.srs-opt{padding:14px 16px;border:1.5px solid var(--bd2);border-radius:var(--r);background:var(--sur);cursor:pointer;font-size:15px;color:var(--tx);text-align:center;transition:background 0.15s,border-color 0.15s;line-height:1.4;}
.srs-opt:active{opacity:0.8;}
.srs-opt-correct{border-color:#27AE60!important;background:var(--grn-bg)!important;color:var(--grn-tx)!important;font-weight:600;}
.srs-opt-wrong{border-color:var(--red)!important;background:var(--red-bg)!important;color:var(--red)!important;}
.srs-opt-dim{opacity:0.35;}

/* ── RWD：手機版面調整 ── */
@media (max-width:600px){
  #bottom-nav{display:flex;}
  #auth-bar{display:none!important;}
  .wrap{padding:0 0 calc(var(--nav-h) + env(safe-area-inset-bottom,0px));}
  .hdr{padding:.75rem 1rem;gap:8px;flex-wrap:nowrap;}
  .hdr-r{width:auto;margin-left:auto;border-top:none;margin-top:0;padding-top:0;flex-wrap:nowrap;overflow:hidden;}
  .pad{padding:1rem;}
  .lvl-grid{grid-template-columns:repeat(5,1fr);gap:4px;}
  .lvl-card{padding:8px 2px;}
  .lvl-n{font-size:15px;}
  .lvl-d{font-size:9px;}
  .time-row{grid-template-columns:repeat(2,1fr);}
  .focus-grid{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .outline-box{display:none;}
  .ph-tabs{gap:2px;}
  .ph-tab{font-size:11px;padding:7px 2px;}
  .course-item{padding:12px;}
  .lesson-hdr{padding:20px 18px 18px;border-radius:16px;}
  .ls-title{font-size:22px;}
  .prog-hdr{padding:.9rem 1rem;}
  .content-box{padding:12px;}
  .kana-row{grid-template-columns:28px 48px 40px 1fr;}
  .kana-char{font-size:28px;}
  .dialogue-controls{gap:4px;}
  .play-all-btn,.btn-s{font-size:12px;padding:6px 12px;}
  .task-card{margin-bottom:12px;}
  table{font-size:13px;}
  table th,table td{padding:6px;}
  .mode-list{gap:10px;}
  .mode-list .mode-card{padding:14px 16px;}
  .mode-icon-wrap{width:46px;height:46px;font-size:22px;}
}