:root { --bg:#111318; --panel:#1b1e26; --line:#2a2e39; --text:#e8eaf0; --dim:#9aa1b2; --accent:#6ea8fe;
  --again:#e5534b; --hard:#d29922; --good:#3fb950; --easy:#58a6ff; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", sans-serif; }
a { color:var(--accent); }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; }
header a { color:var(--text); text-decoration:none; }
.logo { font-weight:700; }
nav a { margin-left:16px; color:var(--dim); }
nav a:hover { color:var(--text); }
main { max-width:760px; margin:0 auto; padding:20px; }
h1 { font-size:24px; margin:8px 0 16px; } h2 { font-size:18px; margin:24px 0 8px; }
.muted, .hint { color:var(--dim); font-size:14px; }
.hint { margin-top:10px; }
.deck { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.deck .name { font-weight:600; cursor:pointer; }
.counts span { display:inline-block; min-width:34px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.c-new { color:var(--easy); } .c-learn { color:var(--again); } .c-due { color:var(--good); }
button, .btn { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { border-color:var(--accent); }
button:disabled { opacity:.6; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:#0b1020; font-weight:600; }
button.small, .btn.small { padding:5px 10px; font-size:14px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px 24px; min-height:240px; text-align:center; font-size:22px; overflow-wrap:anywhere; color:var(--text); }
.card img { max-width:100%; height:auto; }
.card hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
.big { font-size:72px; line-height:1.2; margin-bottom:8px; }
.jp { font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif; }
.cloze { color:var(--accent); font-weight:700; }
.answers { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.answers button { padding:12px 4px; }
.answers small { display:block; color:var(--dim); font-size:12px; }
.answers .again { border-color:var(--again); } .answers .hard { border-color:var(--hard); }
.answers .good { border-color:var(--good); } .answers .easy { border-color:var(--easy); }
.reveal { width:100%; margin-top:16px; padding:14px; }
.bar { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--dim); font-size:14px; }
label { display:block; margin-top:10px; color:var(--dim); font-size:14px; }
textarea, input[type=text] { width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; margin-top:4px; }
textarea { min-height:90px; }
.drop { border:2px dashed var(--line); border-radius:14px; padding:36px; text-align:center; cursor:pointer; }
.drop.over { border-color:var(--accent); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); padding:10px 16px; border-radius:10px; z-index:9; }
table { width:100%; border-collapse:collapse; font-size:14px; margin-top:10px; } td { border-bottom:1px solid var(--line); padding:6px 4px; vertical-align:top; }
kbd { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:0 5px; font-size:12px; }
@media (max-width:520px) { .big { font-size:56px; } .card { font-size:19px; padding:24px 16px; } nav a { margin-left:10px; } }