:root{
  --bg:#f3efe6; --card:#fffaf1; --ink:#16213a; --muted:#6d7280; --line:#d8cdb8;
  --accent:#1c2a4a; --gold:#b68a3a; --easy:#119866; --iffy:#d99a00; --wrong:#cf1f3a;
  --shadow:0 10px 30px rgba(20,24,35,.10);
}
body[data-theme="blue"]{--bg:#edf3ff;--card:#ffffff;--ink:#132346;--line:#c6d4f2;--accent:#233b7a;--gold:#7b8fbf;}
body[data-theme="green"]{--bg:#edf5ee;--card:#fbfff8;--ink:#15311f;--line:#c8dcc8;--accent:#1d5632;--gold:#7d9d62;}
body[data-theme="dark"]{--bg:#101521;--card:#171e2d;--ink:#eef3ff;--muted:#aab3c5;--line:#30384d;--accent:#d7e3ff;--gold:#d0a647;--shadow:none;}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:var(--bg);color:var(--ink);}
button,select,textarea{font:inherit}
button{border:0;cursor:pointer}
.appHeader{height:76px;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--card),rgba(255,255,255,.58));position:sticky;top:0;z-index:20}
.kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--gold)}
h1,h2{margin:0;letter-spacing:-.04em}
h1{font-size:24px}.appHeader h1{font-size:22px}
.ghost{border:1px solid var(--line);background:rgba(255,255,255,.55);color:var(--ink);border-radius:14px;padding:9px 14px;font-weight:800}
.primary{background:var(--accent);color:#fff;border-radius:14px;padding:10px 14px;font-weight:900}
.screen{display:none}.screen.active{display:block}
#home,#sectionScreen,#statsScreen{max-width:1180px;margin:0 auto;padding:28px}
.hero{display:grid;grid-template-columns:92px 1fr;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.heroMark{width:80px;height:80px;border-radius:24px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:38px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900}
.hero h2{font-size:32px;margin:4px 0 8px}.hero p{margin:0;color:var(--muted);line-height:1.65}
.homeGrid,.listGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.tile,.sectionItem{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:left;box-shadow:var(--shadow);color:var(--ink)}
.tile strong,.sectionItem strong{font-size:20px;display:block}.tile span,.sectionItem span{color:var(--muted);display:block;margin-top:8px;line-height:1.5}
.tile.danger{border-color:rgba(207,31,58,.35)}.tile.warn{border-color:rgba(217,154,0,.45)}
.panelTop{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.panelTop p{margin:.5em 0 0;color:var(--muted)}
.studyShell{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(420px,.84fr);height:calc(100vh - 76px);gap:12px;padding:12px}
.leftPane,.rightPane{min-height:0}
.leftPane{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.problemToolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.42)}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;margin-right:6px;color:var(--ink)}
.toolbarBtns{display:flex;gap:8px;white-space:nowrap}
.questionList{overflow:auto;padding:18px;display:grid;gap:14px;font-size:calc(16px * var(--zoom,1))}
.qCard{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.58);padding:16px;line-height:1.82;position:relative}
.qCard.selected{outline:3px solid rgba(28,42,74,.22);border-color:var(--accent)}
.qCard.correct{background:rgba(17,152,102,.09);border-color:rgba(17,152,102,.38)}
.qCard.wrong{background:rgba(207,31,58,.09);border-color:rgba(207,31,58,.38)}
.qHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.qNo{font-weight:1000;font-size:18px}.qSection{color:var(--muted);font-size:12px;font-weight:800}
.qText{white-space:pre-wrap}
.qMiniResult{position:absolute;right:12px;top:12px;font-weight:1000;border-radius:999px;padding:4px 9px;font-size:12px;background:rgba(255,255,255,.75);border:1px solid var(--line)}
.rightPane{display:grid;grid-template-rows:minmax(360px,.98fr) minmax(260px,1.02fr);gap:12px}
.commandPanel,.memoPanel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;overflow:auto;box-shadow:var(--shadow)}
.miniHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.answerBadge{border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:13px;font-weight:1000;background:rgba(255,255,255,.58)}
.choiceBlock{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.choiceBtn{border-radius:18px;padding:18px 10px;font-size:22px;font-weight:1000;color:#fff}
.circleO{background:#147a5a}.circleX{background:#a72136}
.resultBox{border:1px dashed var(--line);border-radius:16px;padding:12px;line-height:1.6;color:var(--muted);min-height:50px}
.rankBlock{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.rank{border-radius:15px;padding:13px 8px;color:#fff;font-weight:1000}
.easy{background:var(--easy)}.iffy{background:var(--iffy)}.wrong{background:var(--wrong)}
.explainDetails{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.explainDetails summary{font-weight:1000;cursor:pointer;margin-bottom:10px}
.explanation{font-size:14px;line-height:1.75;color:var(--ink);max-height:210px;overflow:auto;white-space:pre-wrap}
.settingsRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.settingsRow label{font-size:12px;font-weight:900;color:var(--muted);display:grid;gap:5px}
select{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.66);color:var(--ink);padding:9px}
.memoPanel{display:flex;flex-direction:column;min-height:0}
.memoTabs{display:flex;gap:8px;margin-bottom:10px}
.memoTabs button{border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:12px;padding:8px 10px;font-weight:900;color:var(--ink)}
.memoTabs button.active{background:var(--accent);color:#fff}
textarea{width:100%;min-height:0;resize:none;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.66);color:var(--ink);padding:14px;line-height:1.6;outline:none}
#recordMemo,#aiMemo{flex:1}
.hidden{display:none!important}
.memoActions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (max-width: 980px){
  .studyShell{display:block;height:auto;padding:10px}
  .leftPane{height:58vh;margin-bottom:10px}
  .rightPane{display:block}
  .commandPanel,.memoPanel{margin-bottom:10px}
  .homeGrid,.listGrid{grid-template-columns:1fr}
}

.copyActions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.copyActions button:disabled{opacity:.45;cursor:not-allowed}
.copyStatus{font-size:12px;font-weight:900;color:var(--muted)}

.syncBox{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);display:grid;gap:14px;max-width:860px}
.syncInput{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.66);color:var(--ink)}
.checkline{font-weight:900;color:var(--ink)}
.syncActions{display:flex;gap:10px;flex-wrap:wrap}.syncStatus{color:var(--muted);font-weight:900}.syncBox label{font-weight:900;color:var(--muted)}