:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#273449; --line:#334155;
  --ink:#e2e8f0; --sub:#94a3b8; --accent:#38bdf8; --good:#34d399;
  --bad:#fb7185; --warn:#fbbf24; --safe: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  -webkit-text-size-adjust:100%;
}
#app{padding:0 16px calc(96px + var(--safe)); max-width:640px; margin:0 auto}
.hidden{display:none !important}

.tab-head{display:flex; align-items:baseline; justify-content:space-between; padding:18px 2px 10px}
.tab-head h1{font-size:22px; margin:0}
.goal{color:var(--sub); font-size:13px}

/* カード共通 */
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:14px}
.muted{color:var(--sub); font-size:13px}
.tag{display:inline-block; font-size:11px; color:var(--sub); background:var(--panel2);
  border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-bottom:8px}

/* ドリル */
.matrix{width:100%; border-collapse:collapse; margin:6px 0 14px; font-variant-numeric:tabular-nums}
.matrix th,.matrix td{border:1px solid var(--line); padding:12px; text-align:center; font-size:16px}
.matrix th{background:var(--panel2); color:var(--sub); font-weight:600; font-size:13px}
.matrix .val{font-size:20px; font-weight:700}
.ask{font-size:18px; font-weight:700; margin:6px 0 12px}
.drill-input{display:flex; gap:10px; align-items:center}
.drill-input input{flex:1; font-size:22px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); text-align:center;
  font-variant-numeric:tabular-nums}
.reveal{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}
.reveal .formula{font-size:15px; color:var(--sub); margin-top:6px; line-height:1.6}
.verdict{font-size:16px; font-weight:700; margin-bottom:6px}
.verdict.ok{color:var(--good)} .verdict.ng{color:var(--bad)}

/* ボタン */
button{font-family:inherit; cursor:pointer}
.primary{background:var(--accent); color:#04263a; border:none; border-radius:12px;
  padding:14px; font-size:16px; font-weight:700; width:100%}
.ghost{background:transparent; color:var(--sub); border:1px solid var(--line);
  border-radius:12px; padding:14px; font-size:16px; width:100%}
.good-btn{background:var(--good); color:#05372a}
.bad-btn{background:var(--bad); color:#3f0715}
.row{display:flex; gap:10px; margin-top:10px}
.row > *{flex:1}

/* 復習 */
.rev-front{font-size:24px; font-weight:700; text-align:center; padding:22px 6px}
.rev-back{font-size:17px; line-height:1.7; padding:6px 4px 14px; white-space:pre-wrap}
.empty{text-align:center; color:var(--sub); padding:60px 20px; line-height:1.8}

/* 進捗 */
.stat-row{display:flex; gap:10px; margin-bottom:14px}
.stat{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
.stat .n{font-size:26px; font-weight:800}
.stat .l{font-size:12px; color:var(--sub); margin-top:2px}
.prog-item{display:flex; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px}
.prog-item .name{font-size:14px}
.prog-item .sub{font-size:11px; color:var(--sub); margin-top:2px}
.mark{min-width:52px; height:40px; border-radius:10px; border:1px solid var(--line);
  font-size:20px; font-weight:800; background:var(--panel2); color:var(--ink)}
.mark[data-m="×"]{color:var(--bad)} .mark[data-m="△"]{color:var(--warn)}
.mark[data-m="○"]{color:var(--accent)} .mark[data-m="◎"]{color:var(--good)}
.section-title{font-size:13px; color:var(--sub); margin:22px 2px 8px; letter-spacing:.04em}

/* FAB */
#add-fab{position:fixed; right:18px; bottom:calc(84px + var(--safe)); width:56px; height:56px;
  border-radius:50%; border:none; background:var(--accent); color:#04263a; font-size:30px;
  font-weight:400; box-shadow:0 6px 20px rgba(56,189,248,.35); z-index:30; line-height:1}

/* タブバー */
#tabbar{position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--panel);
  border-top:1px solid var(--line); padding-bottom:var(--safe); z-index:20}
#tabbar button{flex:1; background:none; border:none; color:var(--sub); font-size:11px;
  padding:9px 0 8px; display:flex; flex-direction:column; align-items:center; gap:3px}
#tabbar button span{font-size:20px}
#tabbar button.active{color:var(--accent)}

/* モーダル */
.modal{position:fixed; inset:0; background:rgba(2,6,23,.6); z-index:40;
  display:flex; align-items:flex-end}
.sheet{background:var(--panel); width:100%; max-width:640px; margin:0 auto;
  border-radius:20px 20px 0 0; padding:20px 18px calc(24px + var(--safe)); border:1px solid var(--line)}
.sheet h2{margin:0 0 14px; font-size:18px}
.sheet label{display:block; font-size:13px; color:var(--sub); margin-bottom:12px}
.sheet input,.sheet select,.sheet textarea{width:100%; margin-top:6px; font-size:16px;
  padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); font-family:inherit}