:root{
  /* Serene Fluency — Elevated Japanese Minimalism */
  --ink:#1a365d;
  --sub:#5b6572;
  --bg:#f9f9f7;
  --card:#ffffff;
  --card2:#f4f4f2;
  --primary:#1a365d;
  --primary-deep:#002045;
  --soft:#e6f0ff;
  --line:#e2e8f0;
  --pill-bg:#d1e7d0;
  --pill-tx:#384b3a;
  --sage:#d1e7d0;
  --sage-soft:#eaf3e9;
  --sage-tx:#384b3a;
  --hl:#d96b62;
  --coral:#f56565;
  --gold:#d9b64c;
  --ok:#4a7c59;
  --bad:#b04a3f;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Meiryo",sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.7;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  max-width:520px;margin:0 auto;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.screen{display:none;min-height:100vh;padding-bottom:110px;}
.screen.active{display:block;}

/* ===== 共通 ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 6px;
}
.tb-brand{display:flex;align-items:center;gap:8px;min-width:0;}
.tb-logo{width:34px;height:34px;flex-shrink:0;}
.tb-title{font-size:1.28rem;font-weight:800;letter-spacing:.01em;}
.tb-gear{font-size:1.25rem;color:var(--ink);padding:4px;}

.appbar{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;}
.appbar .back{font-size:1.4rem;color:var(--primary);font-weight:700;padding:2px 10px 2px 0;}
.appbar .bar-title{font-weight:800;font-size:.98rem;}
.appbar .spacer{flex:1;}

.progress-track{height:6px;background:var(--line);border-radius:99px;margin:0 18px 18px;overflow:hidden;}
.progress-fill{height:100%;background:var(--primary);border-radius:99px;width:0%;transition:width .4s ease;}

.btn{
  display:block;width:100%;
  background:var(--primary);color:#fff;
  font-weight:800;font-size:1rem;
  padding:16px;border-radius:24px;text-align:center;
  transition:transform .12s ease,opacity .12s ease;
}
.btn:active{transform:scale(.98);opacity:.92;}
.btn.green{background:var(--card);color:var(--primary);border:1.5px solid var(--primary);}
.btn.ghost{background:none;color:var(--sub);font-weight:700;font-size:.88rem;padding:12px;}
.btn:disabled{opacity:.4;}

.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:26px 20px 10px;
}
.sec-head span{
  font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--ink);
}
.sec-head button{font-size:.78rem;font-weight:700;color:var(--sub);}
.section-label{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;
  color:var(--sub);margin:22px 20px 10px;text-transform:uppercase;
}

/* ===== ホーム ===== */
.greet{padding:10px 20px 2px;}
.greet-label{font-size:.64rem;font-weight:800;letter-spacing:.18em;color:var(--sub);margin-bottom:4px;}
.greet-text{font-size:1.08rem;font-weight:800;line-height:1.45;}

.mcard{
  background:var(--card);border-radius:18px;margin:18px 18px 0;
  overflow:hidden;box-shadow:0 8px 26px rgba(23,35,63,.08);
}
.mc-img{
  height:132px;position:relative;
  background:linear-gradient(180deg,#7a8db0 0%,#3d5178 55%,var(--primary) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 18px;
}
.mc-pill{
  position:absolute;top:auto;bottom:52px;left:18px;
  background:var(--pill-bg);color:var(--pill-tx);
  font-size:.62rem;font-weight:800;letter-spacing:.12em;
  border-radius:999px;padding:4px 12px;
}
.mc-title{color:#fff;font-size:1.35rem;font-weight:800;line-height:1.4;}
.mc-body{padding:16px 18px 18px;}
.mc-cols{display:flex;gap:18px;margin-bottom:14px;}
.mc-cols>div{flex:1;min-width:0;}
.mc-cols label{display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;color:var(--sub);margin-bottom:2px;}
.mc-cols b{font-size:.98rem;font-weight:800;line-height:1.4;display:block;}
.mc-prog{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:var(--sub);margin-bottom:5px;}
.mc-bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:16px;}
.mc-bar i{display:block;height:100%;background:var(--primary);border-radius:99px;}
.mc-review{
  display:block;width:100%;margin-top:10px;
  background:var(--soft);color:var(--primary);
  font-size:.8rem;font-weight:800;border-radius:10px;padding:11px;
}

.asset-row{display:flex;gap:12px;margin:0 18px;}
.asset{
  flex:1;background:var(--card);border-radius:16px;padding:16px 16px 14px;
  box-shadow:0 4px 14px rgba(23,35,63,.05);
}
.asset .a-ico{font-size:1.1rem;display:block;margin-bottom:6px;}
.asset b{font-size:1.5rem;font-weight:800;line-height:1.3;display:block;}
.asset small{font-size:.72rem;color:var(--sub);font-weight:700;}

.stepper-card{
  background:var(--card);border-radius:16px;margin:0 18px;
  padding:18px;box-shadow:0 4px 14px rgba(23,35,63,.05);
}
.st-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.st-ico{
  width:42px;height:42px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.st-head b{font-size:.95rem;display:block;line-height:1.4;}
.st-head small{font-size:.72rem;color:var(--sub);}
.st-line{display:flex;align-items:center;margin:0 4px;}
.st-dot{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line);background:var(--card);color:var(--sub);
  font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.st-dot.on{background:var(--primary);border-color:var(--primary);color:#fff;}
.st-bar{flex:1;height:2px;background:var(--line);}
.st-labels{display:flex;justify-content:space-between;margin-top:8px;}
.st-labels span{
  width:30px;text-align:center;font-size:.58rem;font-weight:800;
  letter-spacing:.04em;color:var(--sub);
}
.home-wave{
  display:flex;align-items:flex-end;justify-content:center;gap:5px;
  padding:30px 0 6px;opacity:.35;
}
.home-wave i{width:5px;background:var(--sub);border-radius:99px;display:block;}

/* ===== デイリーゴール・ストリーク・モーダル ===== */
.streak-chip{font-weight:800;font-size:.95rem;color:#c05f2a;}
.coin-chip{font-weight:800;font-size:.85rem;color:#2d6a8a;}
.mascot-row{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:7px 12px;
}
#mascot-face{font-size:1.4rem;flex-shrink:0;}
#mascot-say{font-size:.78rem;font-weight:700;color:var(--sub);}
.combo-pop{
  position:fixed;top:36%;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-weight:800;font-size:1.1rem;
  padding:10px 24px;border-radius:99px;z-index:130;pointer-events:none;
  box-shadow:0 10px 30px rgba(26,54,93,.4);
  animation:comboUp .9s ease forwards;
}
@keyframes comboUp{
  0%{opacity:0;transform:translate(-50%,12px) scale(.8);}
  20%{opacity:1;transform:translate(-50%,0) scale(1.08);}
  75%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-20px);}
}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cat-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  text-align:center;padding:12px 6px;
}
.cat-card .ce{font-size:1.7rem;display:block;line-height:1.4;}
.cat-card b{font-size:.78rem;display:block;}
.cat-card small{font-size:.6rem;color:var(--sub);display:block;line-height:1.5;}
.cat-card.locked{opacity:.55;background:var(--card2);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:8px;}
.cal-h{text-align:center;font-size:.6rem;font-weight:800;color:var(--sub);}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--card2);font-size:.7rem;color:var(--sub);
}
.cal-day.on{background:var(--sage-soft);font-size:.95rem;}
.cal-day.today{outline:2px solid var(--primary);}
.cal-day.empty{background:none;}
.tab .ti{position:relative;display:inline-block;}
.tab .dot{position:absolute;top:-2px;right:-7px;width:8px;height:8px;border-radius:50%;background:#e05252;display:none;}
.daily-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:13px 14px;box-shadow:0 6px 18px rgba(26,54,93,.07);
}
.dc-top{display:flex;gap:12px;align-items:center;margin-bottom:4px;}
.ring{position:relative;width:58px;height:58px;flex-shrink:0;}
.ring svg{width:58px;height:58px;transform:rotate(-90deg);}
.rg-bg{fill:none;stroke:var(--line);stroke-width:7;}
.rg-fg{fill:none;stroke:var(--primary);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .5s ease;}
.rg-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;}
.dc-head b{font-size:1.08rem;display:block;}
.dc-head small{font-size:.75rem;color:var(--sub);}
.dc-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px dashed var(--line);font-size:.86rem;}
.dc-lb{flex:1;font-weight:700;min-width:0;}
.dc-lb.dc-done{color:var(--sub);text-decoration:line-through;}
.dc-act{background:var(--soft);color:var(--primary);font-weight:800;border-radius:99px;padding:6px 14px;font-size:.76rem;flex-shrink:0;}
.modal{position:fixed;inset:0;background:rgba(15,25,45,.55);display:flex;align-items:center;justify-content:center;z-index:120;padding:30px;}
.modal[hidden]{display:none;}
.modal-card{
  background:#fff;border-radius:22px;padding:32px 26px;text-align:center;
  max-width:320px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.mc-emoji{font-size:3.4rem;margin-bottom:8px;}
.modal-card h2{font-size:1.3rem;margin-bottom:6px;}
.modal-card p{font-size:.9rem;color:var(--sub);margin-bottom:18px;}

/* ===== ホーム 4メニュー ===== */
.menu{padding:6px 18px 0;display:flex;flex-direction:column;gap:9px;}
.menu-card{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;text-align:left;
  box-shadow:0 4px 14px rgba(26,54,93,.05);
}
.menu-card .mi{
  width:40px;height:40px;border-radius:12px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.menu-card b{display:block;font-size:1.02rem;}
.menu-card small{font-size:.74rem;color:var(--sub);display:block;line-height:1.6;}
.menu-card .arrow{color:var(--primary);font-weight:800;flex-shrink:0;}
.menu-card.primary{background:var(--primary);border-color:var(--primary);}
.menu-card.primary b{color:#fff;}
.menu-card.primary small{color:#aebfdd;}
.menu-card.primary .mi{background:rgba(255,255,255,.14);}
.menu-card.primary .arrow{color:#fff;}

/* ===== 場面別・単語 ===== */
.dict-note{font-size:.78rem;color:var(--sub);padding:2px 22px 14px;line-height:1.9;}
.lv-tabs{display:flex;gap:8px;padding:4px 18px 12px;}
.lv-tab{
  flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:10px 8px;font-weight:800;font-size:.88rem;color:var(--sub);
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.lv-tab small{font-size:.68rem;font-weight:700;opacity:.75;}
.lv-tab.active{background:var(--soft-blue,#e6f0ff);border-color:var(--primary);color:var(--primary);}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px;}
.scene-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 12px;text-align:center;
}
.scene-card:active{background:var(--soft);}
.scene-card .si{font-size:1.6rem;display:block;margin-bottom:6px;}
.scene-card b{font-size:.95rem;display:block;}
.scene-card small{font-size:.68rem;color:var(--sub);}
.expr-row{
  display:flex;gap:12px;align-items:center;
  width:calc(100% - 36px);margin:0 18px 10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;text-align:left;
}
.expr-row:active{background:var(--soft);}
.expr-row .play{
  width:38px;height:38px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;
}
.expr-row .tx{min-width:0;}
.expr-row .tx b{display:block;font-size:.98rem;color:var(--primary);line-height:1.5;}
.expr-row .tx small{display:block;font-size:.75rem;color:var(--sub);}
.expr-row .tx .kana{display:block;font-size:.68rem;color:#98a1b3;}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 18px 6px;}
.pg-btn{
  background:var(--card);border:1.5px solid var(--line);border-radius:10px;
  padding:9px 16px;font-weight:800;font-size:.82rem;color:var(--primary);
}
.pg-btn:disabled{opacity:.35;}
.pg-info{font-size:.82rem;font-weight:800;color:var(--sub);}
.q-count{text-align:center;font-size:.72rem;font-weight:800;color:var(--sub);margin:4px 0 10px;}
.q-word{text-align:center;font-size:1.7rem;font-weight:800;margin-bottom:2px;padding:0 20px;}
.q-sub{text-align:center;font-size:.78rem;color:var(--sub);margin-bottom:16px;}
.choices{display:flex;flex-direction:column;gap:10px;padding:0 18px;}
.choice{
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:15px;font-size:1.02rem;font-weight:800;color:var(--primary);
}
.choice.correct{background:var(--sage);border-color:var(--sage-tx);}
.choice.wrong{background:#fdecea;border-color:var(--coral);color:var(--bad);animation:shake .3s;}
@keyframes shake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}

/* ===== タブバー ===== */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:520px;z-index:60;
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.62rem;font-weight:800;color:var(--sub);
  padding:6px 10px;border-radius:14px;min-width:56px;
}
.tab .ti{font-size:1.15rem;line-height:1;}
.tab.active{background:var(--primary);color:#fff;}

/* ===== コース ===== */
.day-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin:0 18px 10px;
  width:calc(100% - 36px);text-align:left;
}
.day-card .day-num{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--soft);color:var(--primary);
  font-weight:800;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;line-height:1.1;
}
.day-card.done .day-num{background:var(--primary);color:#fff;}
.day-card .day-info{flex:1;min-width:0;}
.day-card .day-pattern{display:block;font-weight:800;font-size:1rem;}
.day-card .day-jp{display:block;font-size:.75rem;color:var(--sub);}
.day-card .day-state{font-size:.8rem;font-weight:800;color:var(--hl);flex-shrink:0;}
.day-card.done .day-state{color:var(--ok);}
.day-card.locked{opacity:.5;}
.day-card.mission-card{background:linear-gradient(135deg,#f6f2e4,#fff);border-color:var(--gold);}
.day-card.mission-card .day-num{background:var(--gold);color:#4a3a08;}

.week-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 20px;border-bottom:1px dashed var(--line);
  width:100%;text-align:left;background:var(--card);
}
.week-row .w{font-size:.68rem;font-weight:800;color:var(--primary);flex-shrink:0;width:56px;letter-spacing:.04em;}
.week-row .t{flex:1;font-size:.86rem;font-weight:700;}
.week-row .t small{display:block;font-weight:500;color:var(--sub);font-size:.7rem;}
.week-row .lock{flex-shrink:0;font-size:.85rem;}
.week-row .freebadge{
  flex-shrink:0;font-size:.62rem;font-weight:800;color:var(--ok);
  border:1px solid var(--ok);border-radius:99px;padding:1px 8px;
}
.ahead-list{margin-top:10px;border-top:1px solid var(--line);}
.course-note{font-size:.7rem;color:var(--sub);text-align:center;padding:12px 20px 0;}

/* ===== レッスン ===== */
.step-tag{
  display:inline-block;background:var(--soft);color:var(--primary);
  font-size:.66rem;font-weight:800;letter-spacing:.1em;
  padding:5px 14px;border-radius:999px;margin:4px 18px 12px;
}
.pattern-hero{text-align:center;padding:26px 20px 22px;}
.pattern-hero .p-en{font-size:2rem;font-weight:800;color:var(--primary);line-height:1.3;}
.pattern-hero .p-jp{font-size:1rem;font-weight:700;margin-top:6px;color:var(--sub);}
.hint-box{
  background:var(--soft);border-radius:12px;
  padding:14px 16px;margin:0 18px 14px;font-size:.85rem;
}
.hint-box b{color:var(--primary);}
.listen-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);border:1.5px solid var(--primary);
  color:var(--primary);font-weight:800;font-size:.92rem;
  border-radius:12px;padding:13px;margin:0 18px 14px;
  width:calc(100% - 36px);
}
.listen-btn:active{background:var(--soft);}

.drill-jp{text-align:center;font-size:1.15rem;font-weight:800;padding:10px 20px 2px;}
.drill-note{text-align:center;font-size:.76rem;color:var(--sub);margin-bottom:14px;padding:0 20px;}
.drill-answer{
  text-align:center;margin:0 18px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 16px;box-shadow:0 4px 14px rgba(23,35,63,.04);
}
.drill-answer .a-en{font-size:1.4rem;font-weight:800;color:var(--primary);}
.drill-answer .a-en .swap{color:var(--primary);background:var(--soft);border-radius:8px;padding:0 8px;}
.drill-answer .a-kana{font-size:.8rem;color:var(--sub);margin-top:6px;}
.drill-answer.hidden-answer .a-en,
.drill-answer.hidden-answer .a-kana{filter:blur(9px);user-select:none;}
.mic-area{text-align:center;padding:4px 18px 8px;}
.mic-btn{
  width:80px;height:80px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:1.9rem;
  box-shadow:0 8px 20px rgba(23,35,63,.3);
  transition:transform .12s ease;
}
.mic-btn:active{transform:scale(.94);}
.mic-btn.listening{animation:pulse 1s infinite;background:#b04a3f;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,74,63,.5);}70%{box-shadow:0 0 0 18px rgba(176,74,63,0);}100%{box-shadow:0 0 0 0 rgba(176,74,63,0);}}
.mic-label{font-size:.75rem;color:var(--sub);margin-top:8px;}
.heard-box{margin:10px 18px;padding:12px 16px;border-radius:12px;font-size:.9rem;text-align:center;display:none;}
.heard-box.show{display:block;}
.heard-box.good{background:#e7f2ea;color:#1d6b43;font-weight:700;}
.heard-box.try{background:#f7ebe9;color:#9c4a40;}
.pron{margin-top:10px;text-align:center;}
.pron b{display:block;font-size:1.05rem;font-weight:800;}
.pron small{display:block;font-size:.74rem;color:var(--sub);font-weight:600;margin-top:2px;}
.pron .ps-good{color:#1d6b43;}
.pron .ps-mid{color:#8a6d1f;}
.pron .ps-low{color:var(--bad);}
.pron-lock{
  background:#fff;border:1.5px dashed #b4becf;color:var(--sub);
  font-weight:800;font-size:.78rem;border-radius:10px;padding:9px 14px;
}
.after-heard{display:flex;gap:8px;justify-content:center;margin-top:10px;}
.mine-btn{background:#fff;border:1.5px solid var(--primary);color:var(--primary);font-weight:800;border-radius:10px;padding:8px 14px;font-size:.8rem;}
.next-btn{background:var(--primary);color:#fff;font-weight:800;border-radius:10px;padding:8px 18px;font-size:.8rem;}
.selfcheck{display:flex;gap:10px;margin:6px 18px 0;}
.selfcheck button{flex:1;border-radius:12px;padding:13px;font-weight:800;font-size:.9rem;}
.selfcheck .said{background:var(--primary);color:#fff;}
.selfcheck .notyet{background:var(--card);border:1px solid var(--line);color:var(--sub);}

/* ===== 会話 ===== */
.scene-intro{
  background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;margin:0 18px 14px;font-size:.83rem;
}
.goal-banner{
  background:var(--sage-soft);border:1px solid var(--sage);
  border-radius:14px;padding:14px 18px;margin:4px 18px 14px;
}
.goal-banner .gb-label{
  display:block;font-size:.62rem;font-weight:800;letter-spacing:.16em;
  color:var(--sage-tx);margin-bottom:3px;
}
.goal-banner .gb-jp{font-size:.95rem;font-weight:800;color:var(--ink);}
.chat-area{padding:0 18px;}
.bubble{max-width:85%;border-radius:16px;padding:12px 16px;margin-bottom:10px;font-size:.95rem;}
.bubble.ai{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;}
.bubble.ai .en{font-weight:700;}
.bubble.ai .jp{font-size:.73rem;color:var(--sub);margin-top:3px;}
.bubble.me{background:var(--primary);color:#fff;font-weight:700;margin-left:auto;border-bottom-right-radius:6px;}
.goal-strip{
  background:var(--sage-soft);border:1px solid var(--sage);
  border-radius:10px;padding:10px 14px;margin:8px 18px;
  font-size:.84rem;font-weight:800;color:var(--ink);text-align:center;
}
.hint-reveal{text-align:center;margin:4px 18px;}
.hint-reveal button{font-size:.78rem;color:var(--primary);font-weight:700;text-decoration:underline;padding:6px;}
.hint-answer{
  text-align:center;font-size:.95rem;font-weight:800;color:var(--hl);
  margin:2px 18px 6px;display:none;
}
.hint-answer .k{display:block;font-size:.73rem;color:var(--sub);font-weight:600;}
.hint-answer.show{display:block;}

/* ===== 結果 ===== */
.result-hero{text-align:center;padding:46px 24px 18px;}
.result-hero .emoji{font-size:3rem;}
.result-hero h2{font-size:1.3rem;margin-top:10px;}
.praise{text-align:center;color:var(--sub);font-size:.86rem;margin-top:6px;}
.result-count{
  text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px;margin:10px 18px 16px;
  box-shadow:0 4px 14px rgba(23,35,63,.05);
}
.result-count .label{font-size:.76rem;color:var(--sub);font-weight:700;}
.result-count .num{font-size:2.7rem;font-weight:800;color:var(--primary);}
.result-count .num small{font-size:1rem;}
.result-count .diff{color:var(--hl);font-weight:800;font-size:.95rem;}

/* ===== 復習 ===== */
.timer{height:5px;background:var(--line);border-radius:99px;margin:12px 18px;overflow:hidden;}
.timer-fill{height:100%;background:var(--hl);width:100%;animation:shrink 3s linear forwards;}
@keyframes shrink{to{width:0;}}
.grades{display:flex;gap:8px;margin:10px 18px;}
.grades button{flex:1;border-radius:12px;padding:15px 6px;font-weight:800;font-size:.92rem;line-height:1.4;}
.grades .g-perfect{background:var(--primary);color:#fff;}
.grades .g-ng{background:#f7ebe9;color:#9c4a40;}
.src-tag{
  display:inline-block;font-size:.68rem;font-weight:800;border-radius:99px;
  padding:2px 9px;background:var(--soft);color:var(--primary);margin-left:2px;
}
.lv-badge{
  display:inline-block;font-size:.66rem;font-weight:800;border-radius:99px;
  padding:2px 10px;margin-top:8px;background:var(--soft);color:var(--primary);
}
.rv-chips{display:flex;gap:6px;flex-wrap:wrap;}
.rv-chips span{font-size:.68rem;font-weight:700;border-radius:99px;padding:3px 10px;background:var(--soft);color:var(--primary);}
.rv-chips span.hot{background:#f6efd9;color:#7a5e14;}

/* ===== 記録 ===== */
.rec{padding:4px 20px;}
.sync-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(23,35,63,.05);
}
.sync-in{
  display:block;width:100%;
  border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:.9rem;font-family:inherit;
  background:#fff;outline:none;margin-top:8px;
}
.sync-in:focus{border-color:var(--primary);}
.sync-btns{display:flex;gap:8px;margin-top:10px;}
.sync-mini{
  flex:1;background:var(--primary);color:#fff;
  font-weight:800;font-size:.85rem;border-radius:10px;padding:12px;
}
.sync-mini.alt{background:var(--soft);color:var(--primary);}
.rec-line{font-size:.9rem;font-weight:800;margin-bottom:4px;}
.rec-line.sub{font-size:.74rem;color:var(--sub);font-weight:600;}
.rec-bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:4px;}
.rec-fill{height:100%;background:var(--primary);border-radius:99px;}
.rec-dots{display:flex;gap:6px;margin-top:6px;}
.wd{
  width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--sub);
  font-size:.62rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
}
.wd.on{background:var(--gold);color:#4a3a08;}
.wd.today{outline:2px solid var(--primary);}
.badge-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 0;}
.badge{background:var(--card);border:1px solid var(--line);border-radius:12px;text-align:center;padding:10px 4px;}
.badge .be{font-size:1.4rem;line-height:1.3;}
.badge .bn{font-size:.6rem;font-weight:700;color:var(--sub);display:block;margin-top:2px;line-height:1.4;}
.badge.locked{opacity:.35;filter:grayscale(1);}
.title-badge{display:inline-block;background:var(--gold);color:#4a3a08;font-weight:800;font-size:.78rem;border-radius:999px;padding:5px 14px;}
.rec .btn.ghost{margin-top:10px;}
.rank-me{background:var(--primary);color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:10px;font-weight:800;font-size:.9rem;}
.rank-row{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin-bottom:8px;font-size:.85rem;
}
.rank-row .rr-rank{width:46px;font-weight:800;flex-shrink:0;}
.rank-row .rr-name{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank-row .rr-val{color:var(--sub);font-weight:700;font-size:.76rem;flex-shrink:0;}
.rank-row.mine{border-color:var(--primary);background:var(--soft);}
.hist-row{display:flex;gap:10px;align-items:center;border-bottom:1px dashed var(--line);padding:8px 2px;font-size:.8rem;}
.hist-row .hd{width:52px;font-weight:800;color:var(--sub);flex-shrink:0;}
.hist-row .hc{color:var(--ink);font-weight:600;}

/* ===== AIフリートーク ===== */

/* ===== ペイウォール ===== */
.pay-hero{
  background:linear-gradient(165deg,var(--primary-deep),var(--primary));
  color:#fff;text-align:center;
  padding:36px 22px 30px;border-radius:0 0 24px 24px;margin-bottom:18px;
}
.pay-hero h2{font-size:1.25rem;line-height:1.7;}
.pay-hero p{font-size:.85rem;opacity:.88;margin-top:8px;}
.plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 18px 16px;}
.plan-card{
  position:relative;background:var(--card);border:1.5px solid var(--line);
  border-radius:18px;padding:20px 14px 16px;
}
.plan-card.best{border-color:var(--primary);box-shadow:0 10px 30px rgba(26,54,93,.12);}
.pc-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:.62rem;font-weight:800;
  letter-spacing:.1em;border-radius:99px;padding:3px 12px;white-space:nowrap;
}
.pc-name{font-size:.85rem;font-weight:800;color:var(--sub);}
.pc-price{font-size:1.6rem;font-weight:800;color:var(--primary);margin-bottom:10px;}
.pc-price small{font-size:.75rem;color:var(--sub);font-weight:700;}
.plan-card ul{list-style:none;margin-bottom:14px;}
.plan-card li{
  font-size:.75rem;font-weight:600;padding:4px 0 4px 18px;position:relative;line-height:1.6;
}
.plan-card li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800;}
.plan-card .btn{padding:12px;font-size:.85rem;border-radius:12px;}
.plan-table{margin:0 18px 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);}
.plan-row{display:flex;align-items:center;border-bottom:1px dashed var(--line);padding:12px 14px;font-size:.82rem;}
.plan-row:last-child{border-bottom:none;}
.plan-row .f{flex:1;font-weight:600;}
.plan-row .free-col,.plan-row .pro-col,.plan-row .std-col{width:54px;text-align:center;font-weight:800;flex-shrink:0;}
.plan-row.head{background:var(--soft);font-size:.7rem;font-weight:800;color:var(--primary);}
.sc-locked{opacity:.55;}
.plan-price{text-align:center;margin:18px 18px 8px;}
.plan-price .now{font-size:2rem;font-weight:800;color:var(--primary);}
.plan-price .now small{font-size:.95rem;}
.plan-price .note{font-size:.74rem;color:var(--sub);}

/* ===== オンボーディング（Serene Fluency ライト） ===== */
#screen-onboard{
  background:var(--bg);color:var(--ink);min-height:100vh;padding-bottom:40px;
}
#screen-onboard.active{display:block;}
.ob-step{padding:28px 24px 20px;width:100%;text-align:center;}
.ob-hero{font-size:3rem;margin-bottom:16px;}
.ob-step h1{font-size:1.6rem;line-height:1.7;margin-bottom:16px;font-weight:800;letter-spacing:-.01em;}
.ob-step p{font-size:.9rem;color:var(--sub);margin-bottom:26px;line-height:2.1;}
.ob-goal{
  display:block;width:100%;
  background:var(--card);border:1.5px solid var(--line);
  color:var(--ink);font-weight:700;font-size:.95rem;
  border-radius:16px;padding:16px 18px;margin-bottom:12px;text-align:left;
}
.ob-goal:active{background:var(--soft);border-color:var(--primary);}

/* ようこそ（welcome_screen） */
.wl-brand{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:1.3rem;font-weight:800;letter-spacing:.02em;margin-bottom:26px;}
.brand-logo{width:40px;height:40px;flex-shrink:0;}
.wl-h1{font-size:1.7rem;font-weight:800;line-height:1.75;letter-spacing:-.01em;margin-bottom:14px;}
.wl-p{font-size:.92rem;color:var(--sub);line-height:2;margin-bottom:26px;}
.concept-card{
  background:var(--card2);border:1px solid var(--line);border-radius:18px;
  padding:26px 20px;margin-bottom:14px;text-align:center;
}
.cc-chip{font-size:.62rem;font-weight:800;letter-spacing:.18em;color:var(--sage-tx);display:block;margin-bottom:14px;}
.cc-tag{
  display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 26px;
  font-size:1.5rem;font-weight:800;color:var(--primary);
  box-shadow:0 10px 30px rgba(26,54,93,.08);transform:rotate(-1.5deg);
  margin-bottom:16px;
}
.cc-sub{font-size:.85rem;color:var(--sub);line-height:1.9;}
.sit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 26px;}
.sit-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 14px;text-align:center;
}
.sit-card .si{font-size:1.4rem;display:block;margin-bottom:6px;}
.sit-card b{font-size:.78rem;font-weight:800;letter-spacing:.1em;display:block;}
.sit-card small{font-size:.68rem;color:var(--sub);font-style:italic;}
.sit-card.dark{background:var(--primary);border-color:var(--primary);}
.sit-card.dark b{color:#aebfdd;}
.sit-card.dark small{color:#8fa3c8;}
.wl-login{font-size:.8rem;color:var(--sub);font-weight:700;margin-top:14px;text-decoration:underline;}

/* ===== Pattern Ladder（レッスン段階バー） ===== */
.ladder{padding:6px 20px 16px;}
.ladder-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ladder-head b{font-size:.92rem;font-weight:800;letter-spacing:.02em;}
.ladder-head span{font-size:.8rem;font-weight:700;color:var(--sub);}
.ladder-segs{display:flex;gap:8px;margin-bottom:7px;}
.ladder-segs i{flex:1;height:7px;border-radius:99px;background:var(--line);}
.ladder-segs i.on{background:var(--primary);}
.ladder-labels{display:flex;gap:8px;}
.ladder-labels span{flex:1;font-size:.6rem;font-weight:800;letter-spacing:.12em;color:var(--sub);opacity:.6;}
.ladder-labels span.on{color:var(--ink);opacity:1;}

.pcard{
  background:var(--card2);border:1px solid var(--line);border-radius:18px;
  margin:0 18px 14px;padding:28px 20px 20px;text-align:center;
}
.pc-en{font-size:2rem;font-weight:800;color:var(--primary);letter-spacing:-.01em;line-height:1.4;}
.pc-div{width:56px;height:1px;background:var(--line);margin:14px auto;}
.pc-jp{font-size:1.02rem;font-weight:700;color:var(--sub);margin-bottom:20px;}
.hub-back{
  display:block;margin:2px 18px 12px;padding:9px 14px;
  background:var(--card);border:1.5px solid var(--line);border-radius:10px;
  font-size:.82rem;font-weight:800;color:var(--primary);
}
.hub-back:active{background:var(--soft);}
.beta-open{
  background:#fff8e8;border:1px solid #f0dcae;border-radius:14px;
  margin:0 18px 16px;padding:13px 15px;
  font-size:.82rem;font-weight:700;color:#5c3a00;line-height:1.75;
}
.pc-ex{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 14px 14px;margin:0 0 16px;
}
.pc-ex-tag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:.66rem;font-weight:800;
  padding:2px 10px;border-radius:99px;letter-spacing:.08em;
}
.pc-ex-en{font-size:1.12rem;font-weight:800;color:var(--ink);line-height:1.5;}
.pc-ex-jp{font-size:.84rem;font-weight:700;color:var(--sub);margin-top:5px;}
.audio-card{
  background:#fff;border-radius:14px;padding:20px 16px 16px;
  box-shadow:0 10px 30px rgba(26,54,93,.05);
}
.aw{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:56px;margin-bottom:18px;}
.aw i{width:4px;border-radius:99px;background:#c7d4e8;display:block;}
.speed-row{display:flex;align-items:center;justify-content:center;gap:26px;}
.spd{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--ink);}
.spd .spd-ico{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--outline,#74777f);border-color:#9aa4b5;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:#fff;
}
.spd.main .spd-ico{
  width:72px;height:72px;background:var(--primary);border:none;color:#fff;font-size:1.6rem;
}
.sage-box{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--sage-soft);border:1px solid var(--sage);
  border-radius:14px;padding:15px 16px;margin:0 18px 14px;
  font-size:.88rem;line-height:1.9;
}
.pre-note{text-align:center;font-size:.8rem;color:var(--sub);font-weight:700;margin:4px 0 12px;}

/* ===== 記録：Pattern Ladder ツールボックス ===== */
.tbx-title{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:4px 0 2px;}
.tbx-sub{font-size:.85rem;color:var(--sub);margin-bottom:16px;}
.tbx-card{
  background:var(--card2);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:14px;
}
.lab-caps{font-size:.62rem;font-weight:800;letter-spacing:.16em;color:var(--sub);margin-bottom:6px;}
.lab-caps.light{color:#aebfdd;}
.tbx-big{font-size:1.7rem;font-weight:800;line-height:1.3;margin-bottom:8px;}
.tbx-big small{font-size:.8rem;font-weight:700;color:var(--sub);}
.bars{display:flex;align-items:flex-end;gap:8px;height:56px;margin-bottom:5px;}
.bars i{flex:1;border-radius:6px 6px 0 0;background:#ccd6e6;display:block;}
.bars i.on{background:var(--primary);}
.bar-labels{display:flex;gap:8px;}
.bar-labels span{flex:1;text-align:center;font-size:.58rem;font-weight:800;letter-spacing:.06em;color:var(--sub);}
.bar-labels span.today{color:var(--ink);}
.fluency-card{
  background:var(--primary);border-radius:16px;padding:18px;color:#fff;margin-bottom:20px;
}
.fl-big{font-size:1.9rem;font-weight:800;margin-bottom:10px;}
.fl-bar{height:7px;background:rgba(255,255,255,.22);border-radius:99px;overflow:hidden;margin-bottom:8px;}
.fl-bar i{display:block;height:100%;background:#fff;border-radius:99px;}
.fl-sub{font-size:.74rem;color:#aebfdd;font-weight:700;}
.tbx-h{font-size:1.1rem;font-weight:800;margin:20px 0 10px;}
.tbx-h small{font-size:.72rem;color:var(--sub);font-weight:700;}
.pat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pat-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px;text-align:left;
}
.pat-card .pb{
  display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.1em;
  border-radius:99px;padding:3px 10px;margin-bottom:8px;
}
.pat-card .pb.auto{background:var(--sage);color:var(--sage-tx);}
.pat-card .pb.prac{background:var(--soft);color:var(--primary);}
.pat-card b{font-size:1.05rem;font-weight:800;color:var(--primary);display:block;line-height:1.4;}
.pat-card small{font-size:.7rem;color:var(--sub);}
.pat-card.new{
  border:1.5px dashed #b4becf;background:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--sub);min-height:92px;
}
.scene-row{
  display:flex;align-items:center;gap:14px;
  background:var(--card2);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
}
.scene-row .sc-ico{font-size:1.3rem;}
.scene-row b{font-size:.92rem;display:block;}
.scene-row small{font-size:.72rem;color:var(--sub);}
.achv{
  background:#1f2e21;color:#cfe3cf;border-radius:14px;
  padding:14px 16px;margin:16px 0 4px;font-size:.82rem;line-height:1.7;
}
.achv b{color:#fff;}

/* ===== その他 ===== */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:700;
  padding:12px 22px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .3s;white-space:nowrap;z-index:99;
}
.toast.show{opacity:.96;}
.confetti{position:fixed;top:-10px;font-size:1.3rem;z-index:98;pointer-events:none;animation:fall 2.4s linear forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2;}}

@media(min-width:700px){
  .greet-text{font-size:1.5rem;}
}