:root{
  --red:#c8102e; --red-dark:#9c0c23;
  --bg:#f7f5f2; --card:#ffffff; --ink:#1c1c1c; --sub:#6b6b6b;
  --border:#e5e1da; --good:#2e8b57; --hard:#d98c1f; --again:#c8102e; --easy:#2f6fdb;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#15151a; --card:#1f1f26; --ink:#f0f0f0; --sub:#a0a0a8; --border:#33333c; }
}
*{box-sizing:border-box;}
html{overscroll-behavior:none; touch-action:manipulation;}
html,body{margin:0;padding:0;height:100%;}
body{
  overscroll-behavior:none; touch-action:manipulation;
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
/* Inputs must be >=16px or iOS/Android auto-zoom the page on focus, which is what was
   throwing the layout out of sync with the fixed bottom tab bar. */
input, textarea, select, button{ font-size:16px; touch-action:manipulation; }
.topbar{
  display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--red); color:#fff; position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:17px; margin:0; flex:1; font-weight:600;}
.icon-btn{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:4px 8px;}
.badge{background:#fff; color:var(--red); border-radius:20px; padding:2px 10px; font-size:13px; font-weight:700;}

main{flex:1; padding:16px; max-width:640px; margin:0 auto; width:100%;}

.tabbar{
  position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--card); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom); z-index:10;
}
.tab{
  flex:1; min-width:0; background:none; border:none; padding:8px 0 6px; color:var(--sub);
  font-size:9.5px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tab-icon{font-size:18px;}
.tab.active{color:var(--red); font-weight:700;}

.card-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
}
.card-tile:active{transform:scale(0.98);}
.card-tile h3{margin:0 0 4px; font-size:15px;}
.card-tile p{margin:0; font-size:12px; color:var(--sub);}
.pill{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:3px 10px; font-size:11px; color:var(--sub); white-space:nowrap;}
.pill.due{background:var(--red); color:#fff; border-color:var(--red);}

.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--sub); margin:22px 0 8px;}
.section-title:first-child{margin-top:0;}

.btn{
  display:inline-block; background:var(--red); color:#fff; border:none; border-radius:10px;
  padding:12px 18px; font-size:15px; font-weight:600; cursor:pointer; width:100%; text-align:center;
}
.btn.secondary{background:var(--card); color:var(--ink); border:1px solid var(--border);}
.btn.small{width:auto; padding:8px 14px; font-size:13px;}
.btn:disabled{opacity:.4;}

.flash-wrap{display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:10px;}
.progress-bar{width:100%; height:6px; background:var(--border); border-radius:4px; overflow:hidden;}
.progress-bar > div{height:100%; background:var(--red);}
.flashcard{
  width:100%; max-width:420px; min-height:220px; background:var(--card); border:1px solid var(--border);
  border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; cursor:pointer; gap:10px;
}
.flashcard .front{font-size:44px; font-weight:600;}
.flashcard .reading{font-size:18px; color:var(--sub);}
.flashcard .romaji{font-size:14px; color:var(--sub);}
.flashcard .back{font-size:22px; font-weight:600; margin-top:6px;}
.flashcard .hint{font-size:12px; color:var(--sub); margin-top:14px;}
.grade-row{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; width:100%; max-width:420px;}
.grade-btn{border:none; border-radius:10px; padding:12px 4px; color:#fff; font-size:13px; font-weight:700; cursor:pointer;}
.grade-btn small{display:block; font-weight:400; font-size:10px; opacity:.85;}
.grade-again{background:var(--again);}
.grade-hard{background:var(--hard);}
.grade-good{background:var(--good);}
.grade-easy{background:var(--easy);}

.empty-state{text-align:center; padding:40px 20px; color:var(--sub);}
.empty-state .big{font-size:40px; margin-bottom:10px;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-box{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center;}
.stat-box .num{font-size:26px; font-weight:700; color:var(--red);}
.stat-box .label{font-size:12px; color:var(--sub); margin-top:2px;}

.list-item{
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.list-item .jp{font-size:18px; min-width:70px;}
.list-item .rd{font-size:12px; color:var(--sub);}
.list-item .en{font-size:13px; color:var(--ink); text-align:right; flex:1;}
.list-item .tagdot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.dot-new{background:#9aa0a6;} .dot-learning{background:var(--hard);} .dot-due{background:var(--red);} .dot-done{background:var(--good);}

label{font-size:13px; color:var(--sub); display:block; margin:14px 0 6px;}
input[type=number], input[type=range]{width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--ink);}
.settings-row{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px;}
.settings-row p.note{font-size:12px; color:var(--sub); margin:6px 0 0;}

.toast{
  position:fixed; bottom:76px; left:12px; right:12px; background:#1c1c1c; color:#fff;
  padding:10px 14px; border-radius:10px; font-size:12px; text-align:center; z-index:20;
}
.quiz-opt{
  display:block; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--ink); font-size:15px; cursor:pointer;
}
.quiz-opt.correct{background:var(--good); color:#fff; border-color:var(--good);}
.quiz-opt.wrong{background:var(--again); color:#fff; border-color:var(--again);}

.speak-btn{background:none; border:none; font-size:18px; cursor:pointer; padding:2px 6px; color:var(--ink); line-height:1;}
.mic-btn{background:var(--red); color:#fff; border:none; border-radius:50%; width:56px; height:56px; font-size:22px; cursor:pointer;}
.mic-btn.listening{animation:pulse 1s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.5);}70%{box-shadow:0 0 0 14px rgba(200,16,46,0);}100%{box-shadow:0 0 0 0 rgba(200,16,46,0);}}
.ai-box{background:var(--bg); border:1px dashed var(--border); border-radius:10px; padding:10px 12px; margin-top:10px; font-size:13px; text-align:left; white-space:pre-wrap;}
.chat-row{display:flex; gap:8px; margin-bottom:10px; align-items:flex-start;}
.chat-bubble{max-width:80%; padding:10px 12px; border-radius:14px; font-size:14px; white-space:pre-wrap;}
.chat-row.me{justify-content:flex-end;}
.chat-row.me .chat-bubble{background:var(--red); color:#fff; border-bottom-right-radius:4px;}
.chat-row.ai .chat-bubble{background:var(--card); border:1px solid var(--border); border-bottom-left-radius:4px;}
.chat-input-row{display:flex; gap:8px; align-items:center; position:sticky; bottom:0; background:var(--bg); padding-top:8px;}
.chat-input-row input{flex:1;}