: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}
}


.tile.sync{border-color:#98b4ff;background:linear-gradient(180deg,#ffffff,#eef3ff)}
.syncPanel{max-width:980px;margin:24px auto;padding:24px;border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}
.syncLead{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.syncActions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.syncBox{width:100%;min-height:220px;border:1px solid var(--border);border-radius:18px;padding:14px;font-size:14px;line-height:1.6;background:var(--memoBg, #fff);color:var(--text);box-sizing:border-box}
.syncLabel{display:block;margin:16px 0 8px;font-weight:900;color:var(--muted)}
.syncInput{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--border);border-radius:16px;padding:14px 16px;font-size:16px;background:var(--memoBg,#fff);color:var(--text)}
.autoSyncLine{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--muted);margin:18px 0}
.autoSyncLine input{width:20px;height:20px;accent-color:#16305f}
.legacySync{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.legacySync summary{font-weight:900;cursor:pointer;color:var(--muted)}

/* v AI copy fix: remove old 倍率/色 controls, keep only AIコピー in that row */
.settingsRow label:has(#zoomSelect),
.settingsRow label:has(#themeSelect),
#zoomSelect,
#themeSelect { display: none !important; }
.aiCopyOnlyRow { display: flex !important; gap: 10px; align-items: center; justify-content: flex-start; }
.aiCopyInlineBtn { min-width: 140px; font-weight: 900; }

/* v17: 解説選択範囲の色付け。既存レイアウトは触らずAIコピー横にだけ追加 */
.explainColorTools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.explainColorBtn{border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-weight:900;background:rgba(255,255,255,.72);color:var(--ink);cursor:pointer}
.explainColorBtn.colorRed{box-shadow:inset 0 -5px 0 rgba(255,80,90,.32)}
.explainColorBtn.colorBlue{box-shadow:inset 0 -5px 0 rgba(80,140,255,.32)}
.explainColorBtn.colorGreen{box-shadow:inset 0 -5px 0 rgba(40,190,115,.32)}
.explainColorBtn.colorYellow{box-shadow:inset 0 -5px 0 rgba(255,220,75,.46)}
.explainMarkRed{background:rgba(255,80,90,.28);border-radius:4px;padding:0 1px}
.explainMarkBlue{background:rgba(80,140,255,.26);border-radius:4px;padding:0 1px}
.explainMarkGreen{background:rgba(40,190,115,.26);border-radius:4px;padding:0 1px}
.explainMarkYellow{background:rgba(255,220,75,.42);border-radius:4px;padding:0 1px}


/* v18: 解説マーカー安定化（iMac版） */
.explanation{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
.explainColorBtn{
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
.explainMarkRed{background:rgba(255,68,82,.34)!important;border-radius:5px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.explainMarkBlue{background:rgba(64,132,255,.32)!important;border-radius:5px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.explainMarkGreen{background:rgba(30,190,120,.32)!important;border-radius:5px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.explainMarkYellow{background:rgba(255,220,65,.50)!important;border-radius:5px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}