:root{
  --bg:#0f1115; --bg2:#161a21; --bg3:#1e242e; --line:#2a3240;
  --fg:#e7ecf3; --fg2:#9fb0c5; --fg3:#6c7c92;
  --accent:#4da3ff; --accent2:#2b6fb8;
  --ok:#3ecf8e; --ng:#ff6b6b; --warn:#ffb454;
  --radius:12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabh: 58px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fa; --bg2:#ffffff; --bg3:#eef2f8; --line:#d8e0ec;
    --fg:#16202e; --fg2:#4b5b70; --fg3:#7d8da0;
    --accent:#1f6fd0; --accent2:#1a5aa8;
    --ok:#0f9d64; --ng:#d43c3c; --warn:#b8730d;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:15px; line-height:1.75;
  padding-bottom:calc(var(--tabh) + var(--safe-b) + 8px);
  overscroll-behavior-y:none;
}
a{color:var(--accent); text-decoration:none}
h1,h2,h3,h4{line-height:1.45; margin:0 0 .5em}
h1{font-size:1.25rem}
h2{font-size:1.1rem}
h3{font-size:1rem}
p{margin:0 0 .85em}
ul{margin:0 0 .9em; padding-left:1.25em}
li{margin-bottom:.4em}
code{background:var(--bg3); padding:.1em .35em; border-radius:5px; font-size:.9em}

/* ---- header ---- */
.appbar{
  position:sticky; top:0; z-index:50;
  background:var(--bg2); border-bottom:1px solid var(--line);
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
}
.appbar .back{
  background:none;border:0;color:var(--accent);font-size:1.4rem;
  padding:0 4px;cursor:pointer;line-height:1
}
.appbar h1{margin:0;font-size:1rem;font-weight:700;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .sub{font-size:.72rem;color:var(--fg3);font-weight:400}

/* ---- layout ---- */
.wrap{padding:14px; max-width:760px; margin:0 auto}
.card{
  background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:12px;
}
.card.tight{padding:10px 12px}
.muted{color:var(--fg2)}
.small{font-size:.82rem}
.xs{font-size:.75rem}
.center{text-align:center}
.row{display:flex;gap:8px;align-items:center}
.row.wrap2{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt{margin-top:12px}
.mb{margin-bottom:12px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---- buttons ---- */
button, .btn{
  font-family:inherit;font-size:.92rem;
  background:var(--bg3); color:var(--fg);
  border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; line-height:1.4;
}
button:active{transform:scale(.985)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}
.btn-block{display:block;width:100%;text-align:center}
.btn-sm{padding:7px 11px;font-size:.82rem;border-radius:8px}
.btn-ghost{background:transparent}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:74px;text-align:center}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ---- list ---- */
.list{display:flex;flex-direction:column;gap:8px}
.item{
  display:block;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:12px 13px;color:inherit;cursor:pointer;
  text-align:left;width:100%;font-size:.95rem;
}
.item .t{font-weight:700}
.item .d{color:var(--fg2);font-size:.8rem;margin-top:3px;line-height:1.55}
.badge{
  display:inline-block;font-size:.68rem;padding:2px 7px;border-radius:99px;
  background:var(--bg3);color:var(--fg2);border:1px solid var(--line);
  margin-right:5px;vertical-align:middle;line-height:1.7
}
.badge.k4{background:#5b2b2b;color:#ffc9c9;border-color:#7a3a3a}
.badge.k3{background:#5b482b;color:#ffe1b0;border-color:#7a5f3a}
.badge.acc{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.badge.ok{background:#1d5e42;color:#c7f3e0;border-color:#2a7c58}
.badge.ng{background:#5f2626;color:#ffcccc;border-color:#7d3434}

/* ---- syllabus blocks ---- */
.sec-sum{background:var(--bg3);border-left:3px solid var(--accent);
  padding:10px 12px;border-radius:8px;margin-bottom:14px;font-size:.92rem}
.lo{font-size:.84rem;color:var(--fg2);background:var(--bg3);
  border-radius:8px;padding:8px 10px;margin-bottom:12px}
.lo b{color:var(--fg)}
.note{background:var(--bg3);border-left:3px solid var(--warn);
  padding:10px 12px;border-radius:8px;margin:0 0 .9em;font-size:.9rem}
.points{background:var(--bg3);border-radius:10px;padding:12px 12px 12px;margin-top:14px}
.points h4{margin:0 0 .5em;font-size:.9rem;color:var(--accent)}
.points ul{margin:0;padding-left:1.15em}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1em}
table{border-collapse:collapse;font-size:.85rem;min-width:100%}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
th{background:var(--bg3);font-weight:700;white-space:nowrap}

/* ---- glossary term (long press) ---- */
.term{
  border-bottom:1px dashed var(--accent);
  cursor:pointer; user-select:none; -webkit-user-select:none;
}
.term.pressing{background:rgba(77,163,255,.22);border-radius:3px}
#pop-back{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
}
#pop{
  background:var(--bg2);border:1px solid var(--line);
  border-radius:16px 16px 0 0;width:100%;max-width:760px;
  padding:16px 16px calc(18px + var(--safe-b));
  max-height:72vh;overflow-y:auto;
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:translateY(18px);opacity:.4}to{transform:none;opacity:1}}
#pop .ttl{font-weight:800;font-size:1.05rem}
#pop .en{color:var(--fg3);font-size:.78rem;margin-bottom:8px}

/* ---- quiz ---- */
.qtext{font-size:1rem;font-weight:600;line-height:1.8;margin-bottom:14px;white-space:pre-wrap}
.choice{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:var(--bg2);border:1.5px solid var(--line);border-radius:10px;
  padding:12px;margin-bottom:8px;font-size:.93rem;line-height:1.65;cursor:pointer;
}
.choice .mk{
  flex:0 0 22px;height:22px;border-radius:6px;border:1.5px solid var(--fg3);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;
  margin-top:2px;color:var(--fg2)
}
.choice.sel{border-color:var(--accent)}
.choice.sel .mk{background:var(--accent);border-color:var(--accent);color:#fff}
.choice.correct{border-color:var(--ok);background:rgba(62,207,142,.1)}
.choice.wrong{border-color:var(--ng);background:rgba(255,107,107,.1)}
.expl{background:var(--bg3);border-radius:10px;padding:12px;margin-top:12px;font-size:.9rem}
.expl h4{margin:0 0 .4em;font-size:.88rem}
.verdict{font-weight:800;font-size:1.05rem;margin-bottom:8px}
.verdict.ok{color:var(--ok)} .verdict.ng{color:var(--ng)}
.progress{height:5px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-bottom:12px}
.progress > i{display:block;height:100%;background:var(--accent);transition:width .2s}
.quizbar{
  position:fixed;left:0;right:0;bottom:calc(var(--tabh) + var(--safe-b));
  background:var(--bg2);border-top:1px solid var(--line);
  padding:10px 14px;z-index:40;display:flex;gap:8px;
}
.quizbar > *{flex:1}
.hasbar{padding-bottom:74px}

/* ---- stats ---- */
.bar{height:7px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-top:5px}
.bar > i{display:block;height:100%;background:var(--ok)}
.bar.low > i{background:var(--ng)}
.bar.mid > i{background:var(--warn)}
.kv{display:flex;justify-content:space-between;font-size:.8rem;color:var(--fg2);margin-top:3px}
.statnum{font-size:1.5rem;font-weight:800;line-height:1.2}

/* ---- tabs ---- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--bg2);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(6,1fr);
  padding-bottom:var(--safe-b);
}
.tabs a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;height:var(--tabh);color:var(--fg3);font-size:.62rem;text-align:center
}
.tabs a .ic{font-size:1.15rem;line-height:1}
.tabs a.on{color:var(--accent)}

textarea,input[type=search],input[type=text]{
  width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:11px;font-family:inherit;font-size:.9rem;line-height:1.6;
}
textarea{min-height:170px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}
select{background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:10px;font-family:inherit;font-size:.9rem;width:100%}
label.fl{display:block;font-size:.8rem;color:var(--fg2);margin-bottom:5px;font-weight:700}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabh) + var(--safe-b) + 16px);
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;z-index:300;font-size:.85rem;box-shadow:0 6px 24px rgba(0,0,0,.35)
}