:root {
  --teal:#1699a3;
  --bg:#ececec;
  --card:#fff;
  --text:#111;
  --shadow:0 6px 18px rgba(0,0,0,.15);
  --ok:#1f9d62;
  --ok-bg:#e8f7f1;
  --ng:#d24a43;
  --ng-bg:#fdeeee;
}
* { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Meiryo",sans-serif; }
body { min-height:100vh; }
button { touch-action: manipulation; }
.app { max-width:430px; margin:0 auto; min-height:100vh; background:linear-gradient(180deg,#f1f1f1 0%, #ebebeb 100%); position:relative; overflow-x:hidden; }
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }
.hero {
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%), var(--teal);
  color:#fff;
  padding:28px 22px 42px;
}
.hero-title { font-size:50px; line-height:1.02; font-weight:900; text-shadow:0 3px 8px rgba(0,0,0,.18); }
.home-buttons { padding:22px 18px 120px; display:flex; flex-direction:column; gap:18px; }
.big-btn {
  appearance:none; border:none; border-radius:14px; padding:22px 18px; color:#fff; font-size:22px; font-weight:900;
  text-align:left; box-shadow:var(--shadow); cursor:pointer;
}
.big-btn.teal { background:linear-gradient(180deg,#19aab4,#0f8a93); }
.big-btn.green { background:linear-gradient(180deg,#67c926,#3b9920); }
.big-btn.gray { background:linear-gradient(180deg,#7e7e7e,#2f2f2f); }
.big-btn small { display:block; font-size:13px; margin-top:4px; opacity:.95; }
.big-btn[disabled] { opacity:.55; cursor:default; filter:saturate(.65); }
.action-btn[disabled] { opacity:.45; cursor:not-allowed; filter:saturate(.65); transform:none !important; }
.topbar {
  position:sticky; top:0; z-index:40; background:var(--teal); color:#fff; text-align:center;
  padding:44px 16px 16px; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.topbar-title { font-size:22px; font-weight:900; }
.topbar-sub { margin-top:4px; font-size:12px; font-weight:700; opacity:.96; }
.section-pad { padding:18px; }
.card {
  background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:18px;
}
.card + .card { margin-top:16px; }
.card-title { font-size:18px; font-weight:900; margin-bottom:12px; }
.action-btn {
  appearance:none; border:none; border-radius:14px; padding:14px 16px; font-size:17px; font-weight:900; cursor:pointer;
  box-shadow:var(--shadow); width:100%; margin-top:10px;
}
.action-btn.teal { background:var(--teal); color:#fff; }
.action-btn.gray { background:#444; color:#fff; }
.score-box {
  background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:18px; text-align:center;
}
.score-big { font-size:36px; font-weight:900; margin:8px 0; }
.score-comment { font-size:24px; font-weight:900; margin-top:8px; }
.quiz-floating {
  position:fixed; right:12px; top:max(12px, env(safe-area-inset-top)); z-index:60;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.counter {
  background:rgba(255,255,255,.94); border-radius:999px; box-shadow:var(--shadow); padding:8px 12px; font-size:13px; font-weight:900;
}
.nav-row { display:flex; gap:8px; }
.nav-btn {
  appearance:none; border:none; background:rgba(255,255,255,.96); color:#111; border-radius:999px;
  box-shadow:var(--shadow); padding:10px 14px; font-size:14px; font-weight:900; cursor:pointer;
}
.nav-btn:disabled { opacity:.45; cursor:default; }
.quiz-header { padding:14px 16px 10px; background:var(--teal); color:#fff; }
.quiz-title { font-size:24px; font-weight:900; text-align:center; }
.quiz-sub { font-size:12px; font-weight:700; text-align:center; margin-top:4px; opacity:.96; }
.quiz-body { padding-top:84px; padding-bottom:230px; }
.noteText { font-size:14px; color:#444; font-weight:700; }
.figureWrap.fullpage { padding:10px; }
.figureWrap.fullpage img { width:100% !important; height:auto !important; max-width:100% !important; display:block; }

.qText { padding:18px 16px 14px; font-size:24px; line-height:1.72; letter-spacing:.01em; }
.stmt { margin-top:10px; padding-left:1.35em; text-indent:-1.35em; font-size:20px; line-height:1.72; }
.line { height:6px; background:var(--teal); margin:0 14px; }
.figureWrap { margin:12px 10px 14px; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px 10px 12px; overflow:visible; }
.figureHead { font-size:18px; font-weight:900; color:#222; margin:0 2px 10px; }
.figureSub { font-size:13px; color:#666; font-weight:700; margin:0 2px 10px; line-height:1.6; }
.figureStack { display:grid; gap:12px; }
.figurePanel { background:#fff; border:1px solid #ececec; border-radius:14px; padding:8px 6px 10px; }
.figurePanelTitle { font-size:14px; font-weight:900; color:#444; margin:0 2px 8px; }
.figureWrap svg,.figureWrap img { display:block; width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; object-fit:contain; margin:0 auto; }
.figureWrap > * { box-sizing:border-box; }
.figureWrap table { width:100% !important; border-collapse:collapse; }
.figureWrap img { vertical-align:top; }
.singlePlate img{width:100% !important; height:auto !important; display:block; margin:0 auto;}
.r2tableScroll{overflow:hidden; padding-bottom:2px;}
.r2tableScroll img{display:block; width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; margin:0 auto;}
@media (min-width: 840px){ .r2tableScroll img{width:100% !important; min-width:0 !important; max-width:100% !important;} }

.inlineChoices { margin:14px 0 0; display:flex; flex-direction:column; gap:10px; }
.inlineChoice {
  background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px 14px;
  font-size:18px; line-height:1.55; font-weight:700;
}
.inlineChoice .formulaWrap { overflow-x:auto; }
.choice.compact { width:64px; text-align:center; padding:10px 0; font-size:18px; line-height:1; }
.choice.compact span { display:block; }
.dockRow.compact { grid-template-columns:64px 40px; justify-content:start; }

.inlineChoice .matrixBlock, .inlineChoice [style*="white-space:pre"] {
  overflow-x:auto;
  font-size:16px !important;
  line-height:1.3 !important;
}
.inlineChoice div { max-width:100%; }
.qText + .stmt{margin-top:8px;}
.qText br{display:block;margin-top:.6em;content:"";}

@media (max-width:430px){ .qText{font-size:25px; line-height:1.78;} .stmt{font-size:21px;} .figureHead{font-size:19px;} }
.miniBox { margin:12px 14px; background:#fff; border-radius:13px; box-shadow:var(--shadow); padding:12px 14px; font-size:15px; line-height:1.65; }
.miniBox .tip { margin-top:6px; font-size:12px; color:#555; font-weight:700; }
.feedbackArea { margin:0 14px 12px; min-height:58px; }
.feedback {
  display:none; padding:13px 14px; border-radius:16px; color:#fff; font-size:17px; font-weight:900; text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}
.feedback.show { display:block; }
.feedback.ok { background:linear-gradient(180deg,#24b06a,#198f57); }
.feedback.ng { background:linear-gradient(180deg,#e95b53,#cc433b); }
.topPillRow { display:flex; gap:8px; padding:0 14px 10px; flex-wrap:wrap; }
.pill {
  appearance:none; border:3px solid rgba(22,153,163,.35); border-radius:999px; color:#1c4e52; padding:8px 14px;
  font-size:15px; font-weight:900; background:#fff; cursor:pointer;
}
.answerDock {
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:min(430px,100%);
  background:rgba(239,239,239,.99); border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -4px 12px rgba(0,0,0,.10);
  padding:6px 7px calc(6px + env(safe-area-inset-bottom)); z-index:40;
}
.dockTitle { margin:0 0 6px 4px; font-size:12px; font-weight:900; color:#555; }
.dockList { display:flex; flex-direction:column; gap:5px; }
.dockRow { display:grid; grid-template-columns:1fr 40px; gap:5px; align-items:start; }
.choice {
  background:#fff; border-radius:13px; box-shadow:var(--shadow); padding:8px 11px; font-size:16px; font-weight:900;
  line-height:1.2; cursor:pointer;
}
.choice small { display:block; margin-top:2px; font-size:10px; color:#666; font-weight:700; }
.choice img { display:block; width:100%; height:auto; }
.choice.correct { background:var(--ok-bg); color:var(--ok); }
.choice.wrong { background:var(--ng-bg); color:var(--ng); }
.zoomBtn {
  display:grid; place-items:center; width:40px; height:40px; background:#fff; border-radius:11px;
  box-shadow:var(--shadow); color:var(--teal); font-size:22px; font-weight:900; cursor:pointer;
}
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.42); display:none; align-items:center; justify-content:center; padding:12px; z-index:80;
}
.modal.show { display:flex; }
.sheet {
  width:min(410px, 100%); max-height:82vh; overflow:auto; background:#f8f8f8; border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.26); padding:16px 16px 18px;
}
.sheetTop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sheetTitle { font-size:22px; font-weight:900; }
.closeBtn {
  appearance:none; border:none; color:#fff; background:var(--teal); border-radius:12px; padding:8px 12px; font-size:14px; font-weight:900; cursor:pointer;
}
.tag { display:inline-block; padding:4px 10px; border-radius:999px; color:#fff; font-size:12px; font-weight:900; margin-bottom:10px; }
.tag.ok { background:#1f9d62; } .tag.ng { background:#d24a43; } .tag.memo { background:#666; }
.block { background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px 13px; margin-bottom:10px; }
.blockTitle { font-size:14px; font-weight:900; color:#666; margin-bottom:6px; }
.block p { margin:0; font-size:15px; line-height:1.7; }
.bullet { margin:0; padding-left:1.1em; }
.bullet li { margin:0 0 8px 0; font-size:15px; line-height:1.7; }
.formula { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#f3f3f3; border-radius:10px; padding:8px 10px; font-size:14px; line-height:1.6; }
.blankBox {
  display:inline-flex; align-items:center; justify-content:center; min-width:2.15em; min-height:1.7em;
  padding:0 0.24em; margin:0 0.10em; border:2.5px solid #2f4f4f; border-radius:7px;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05); font-weight:900; font-size:0.92em;
  line-height:1; vertical-align:middle; white-space:nowrap; letter-spacing:0;
}
.qText.blankQuestionMode { line-height:1.84; }
.qText.blankQuestionMode .stmt { line-height:1.84; }
.qText.blankQuestionMode .inlineChoice small { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }

.jump-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.jump-btn{
  appearance:none;
  border:none;
  background:#f5f5f5;
  color:#111;
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px 0;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}
.jump-btn.current{background:var(--teal); color:#fff;}
.jump-btn.unanswered{background:#f5f5f5; color:#111;}
.jump-btn.correct{background:#e8f7f1; color:#1f9d62;}
.jump-btn.wrong{background:#fdeeee; color:#d24a43;}
.score-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.score-row{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px 14px;
  font-size:15px;
  line-height:1.7;
}
.small-note{
  margin-top:10px;
  font-size:13px;
  color:#666;
  line-height:1.7;
}

.mode-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#fff;
  color:#1c4e52;
  border:2px solid rgba(22,153,163,.25);
  font-size:12px;
  font-weight:900;
  margin-left:8px;
}
.numbers{
  font-weight:900;
  letter-spacing:.02em;
}



.revisionNote{
  margin:0 0 10px 0;
  font-size:11px;
  line-height:1.5;
  color:#777;
  font-weight:700;
}


/* ===== UI compact refresh ===== */
:root{
  --teal:#2d6c7b;
  --bg:#f3f5f7;
  --shadow:0 10px 28px rgba(17,37,56,.10);
  --ok:#198a58;
  --ok-bg:#e7f6ee;
  --ng:#cb4a45;
  --ng-bg:#fcecec;
}
html,body{background:var(--bg);}
.app{background:linear-gradient(180deg,#f7f9fb 0%, #eef2f5 100%);}
.hero{
  padding:22px 18px 30px;
  background:radial-gradient(circle at 25% 20%, rgba(255,255,255,.16), transparent 34%), linear-gradient(135deg,#3a7d91 0%, #2d6c7b 100%);
}
.hero-title{font-size:42px; letter-spacing:.01em;}
.home-buttons{padding:16px 14px 56px; gap:12px;}
.big-btn{
  position:relative;
  border-radius:18px;
  padding:18px 16px;
  font-size:20px;
  box-shadow:0 10px 26px rgba(17,37,56,.12);
}
.big-btn.teal{background:linear-gradient(180deg,#448ba0,#2d6c7b);}
.big-btn.green{background:linear-gradient(180deg,#4f9b83,#2d6f5b);}
.big-btn.gray{background:linear-gradient(180deg,#54626a,#34424a);}
.big-btn.orange{background:linear-gradient(180deg,#f0a446,#d97a18);}
.big-btn small{font-size:12px; margin-top:6px; color:rgba(255,255,255,.88); opacity:1;}
.topbar{padding:36px 14px 12px; background:linear-gradient(135deg,#3a7d91 0%, #2d6c7b 100%);}
.topbar-title{font-size:20px;}
.topbar-sub{font-size:11px; margin-top:3px;}
.section-pad{padding:12px;}
.card{padding:14px; border-radius:16px;}
.card + .card{margin-top:12px;}
.card-title{font-size:16px; margin-bottom:10px;}
.action-btn{padding:12px 14px; font-size:15px; border-radius:14px; margin-top:8px;}
.score-box{padding:14px; border-radius:16px;}
.score-big{font-size:31px; margin:6px 0;}
.score-comment{font-size:21px; margin-top:6px;}
.quiz-floating{right:10px; top:max(10px, env(safe-area-inset-top)); gap:6px;}
.counter{padding:7px 10px; font-size:12px;}
.nav-row{gap:6px;}
.nav-btn{padding:8px 11px; font-size:13px;}
.quiz-header{padding:11px 14px 8px;}
.quiz-title{font-size:20px;}
.quiz-sub{font-size:11px; margin-top:3px;}
.quiz-body{padding-top:70px; padding-bottom:116px;}
.qText{padding:12px 12px 10px; font-size:20px; line-height:1.56; letter-spacing:0;}
.stmt{margin-top:7px; padding-left:1.15em; text-indent:-1.15em; font-size:17px; line-height:1.6;}
.line{height:4px; margin:0 12px;}
.figureWrap{margin:10px 8px 12px; padding:10px 8px; border-radius:14px;}
.figureWrap.fullpage{padding:8px;}
.figureHead{font-size:16px; margin:0 2px 8px;}
.figureSub{font-size:12px; margin:0 2px 8px; line-height:1.5;}
.figureStack{gap:10px;}
.figurePanel{border-radius:12px; padding:7px 5px 8px;}
.figurePanelTitle{font-size:13px; margin:0 2px 6px;}
.inlineChoices{margin:10px 0 0; gap:8px;}
.inlineChoice{padding:10px 12px; font-size:16px; line-height:1.48; border-radius:12px;}
.inlineChoice .matrixBlock, .inlineChoice [style*="white-space:pre"]{font-size:14px !important; line-height:1.25 !important;}
@media (max-width:430px){ .qText{font-size:20px; line-height:1.58;} .stmt{font-size:17px; line-height:1.62;} .figureHead{font-size:16px;} }
.miniBox{display:none;}
.feedbackArea{margin:0 12px 8px; min-height:44px;}
.feedback{padding:10px 12px; border-radius:14px; font-size:15px;}
.topPillRow{gap:6px; padding:0 12px 8px;}
.pill{padding:6px 12px; font-size:13px; border-width:2px;}
.answerDock{
  background:rgba(243,245,247,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:4px 6px calc(4px + env(safe-area-inset-bottom));
}
.dockTitle{margin:0 0 4px 2px; font-size:11px;}
.dockList{display:grid; gap:6px;}
.dockRow.compact{
  display:block;
  position:relative;
  min-height:44px;
}
.dockList.choiceCount1{grid-template-columns:1fr;}
.dockList.choiceCount2{grid-template-columns:repeat(2,minmax(0,1fr));}
.dockList.choiceCount3{grid-template-columns:repeat(3,minmax(0,1fr));}
.dockList.choiceCount4{grid-template-columns:repeat(2,minmax(0,1fr));}
.dockList.choiceCount5{grid-template-columns:repeat(6,minmax(0,1fr));}
.dockList.choiceCount5 .dockCell{grid-column:span 2;}
.dockList.choiceCount5 .dockCell:nth-child(-n+2){grid-column:span 3;}
.choice.compact{
  width:100%;
  min-height:44px;
  border-radius:13px;
  padding:10px 0 9px;
  font-size:15px;
  box-shadow:0 6px 16px rgba(17,37,56,.10);
}
.choice.compact span{display:block; line-height:1;}
.zoomBtn{
  position:absolute;
  right:5px;
  bottom:5px;
  width:18px;
  height:18px;
  font-size:10px;
  border-radius:999px;
  box-shadow:none;
  background:#eef3f6;
  border:1px solid rgba(45,108,123,.18);
}
.sheet{width:min(400px,100%); border-radius:18px; padding:14px 14px 16px;}
.sheetTitle{font-size:20px;}
.closeBtn{padding:7px 11px; font-size:13px; border-radius:10px;}
.block{padding:11px 12px; margin-bottom:8px; border-radius:12px;}
.blockTitle{font-size:13px; margin-bottom:5px;}
.block p{font-size:14px; line-height:1.65;}
.bullet li{font-size:14px; line-height:1.65; margin:0 0 6px 0;}
.formula{padding:7px 9px; font-size:13px; line-height:1.55;}
.jump-grid{gap:6px; margin-top:10px;}
.jump-btn{padding:10px 0; font-size:14px; border-radius:10px;}
.score-list{margin-top:10px; gap:6px;}
.score-row{padding:10px 12px; font-size:14px; line-height:1.55;}
.small-note{margin-top:8px; font-size:12px; line-height:1.55;}
.mode-badge{padding:3px 9px; font-size:11px; margin-left:6px;}
.revisionNote{font-size:10px; line-height:1.45; margin:0 0 8px 0;}

#pastMenuScreen .section-pad,
#yearMenuScreen .section-pad,
#scoreYearScreen .section-pad{
  display:grid;
  gap:10px;
}
#yearMenuScreen .big-btn,
#scoreYearScreen .big-btn{
  background:linear-gradient(180deg,#ffffff,#f7fafb);
  color:#1b333d;
  border:1px solid rgba(45,108,123,.15);
  padding:14px 16px 14px 18px;
  font-size:18px;
  box-shadow:0 10px 24px rgba(17,37,56,.08);
}
#yearMenuScreen .big-btn::before,
#scoreYearScreen .big-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,#62a6b6,#2d6c7b);
}
#yearMenuScreen .big-btn small,
#scoreYearScreen .big-btn small{
  color:#687c84;
}
#yearMenuScreen .big-btn.gray,
#scoreYearScreen .big-btn.gray{
  color:#fff;
  background:linear-gradient(180deg,#46555d,#313e46);
  border:none;
}
#yearMenuScreen .big-btn.gray::before,
#scoreYearScreen .big-btn.gray::before{
  background:linear-gradient(180deg,#9cb0b9,#6a7d86);
}
#yearMenuScreen .big-btn.gray small,
#scoreYearScreen .big-btn.gray small{
  color:rgba(255,255,255,.82);
}
#scoreScreen .topbar,
#yearMenuScreen .topbar,
#scoreYearScreen .topbar{
  background:linear-gradient(135deg,#386f82 0%, #2d6c7b 100%);
}


/* ===== UI polish v2 ===== */
:root[data-font-scale="standard"] .hero-title{font-size:48px;}
:root[data-font-scale="standard"] .topbar-title{font-size:22px;}
:root[data-font-scale="standard"] .topbar-sub{font-size:12px;}
:root[data-font-scale="standard"] .big-btn{font-size:22px;padding:20px 18px;}
:root[data-font-scale="standard"] .big-btn small{font-size:13px;}
:root[data-font-scale="standard"] .card-title{font-size:18px;}
:root[data-font-scale="standard"] .action-btn{font-size:17px;padding:14px 16px;}
:root[data-font-scale="standard"] .qText{font-size:22px;line-height:1.64;}
:root[data-font-scale="standard"] .stmt{font-size:18px;line-height:1.68;}
:root[data-font-scale="standard"] .inlineChoice{font-size:17px;line-height:1.58;}
:root[data-font-scale="standard"] .figureHead{font-size:17px;}
:root[data-font-scale="standard"] .choice.compact{min-height:48px;font-size:16px;}
:root[data-font-scale="standard"] .nav-btn{font-size:15px;padding:10px 13px;}
:root[data-font-scale="standard"] .feedback{font-size:16px;padding:11px 13px;}
:root[data-font-scale="standard"] .block p,
:root[data-font-scale="standard"] .bullet li,
:root[data-font-scale="standard"] .score-row,
:root[data-font-scale="standard"] .inlineHelp,
:root[data-font-scale="standard"] .small-note,
:root[data-font-scale="standard"] .legendItem{font-size:15px;line-height:1.72;}
:root[data-font-scale="standard"] .formula{font-size:14px;line-height:1.65;}
:root[data-font-scale="compact"] .hero-title{font-size:42px;}
:root[data-font-scale="compact"] .topbar-title{font-size:20px;}
:root[data-font-scale="compact"] .topbar-sub{font-size:11px;}
:root[data-font-scale="compact"] .big-btn{font-size:20px;padding:18px 16px;}
:root[data-font-scale="compact"] .big-btn small{font-size:12px;}
:root[data-font-scale="compact"] .card-title{font-size:16px;}
:root[data-font-scale="compact"] .action-btn{font-size:15px;padding:12px 14px;}
:root[data-font-scale="compact"] .qText{font-size:19px;line-height:1.56;}
:root[data-font-scale="compact"] .stmt{font-size:16px;line-height:1.58;}
:root[data-font-scale="compact"] .inlineChoice{font-size:15px;line-height:1.48;}
:root[data-font-scale="compact"] .figureHead{font-size:15px;}
:root[data-font-scale="compact"] .choice.compact{min-height:42px;font-size:14px;}
:root[data-font-scale="compact"] .nav-btn{font-size:13px;padding:8px 11px;}
:root[data-font-scale="compact"] .topPillRow{padding:0 10px 6px;}
:root[data-font-scale="compact"] .feedback{font-size:14px;}
:root[data-font-scale="compact"] .quiz-body{padding-top:76px;padding-bottom:108px;}
:root[data-font-scale="compact"] .figureWrap{margin:8px 8px 10px;padding:8px 7px;}
:root[data-font-scale="compact"] .questionMeta{gap:6px;}
:root[data-font-scale="compact"] .block p,
:root[data-font-scale="compact"] .bullet li,
:root[data-font-scale="compact"] .score-row,
:root[data-font-scale="compact"] .inlineHelp,
:root[data-font-scale="compact"] .small-note,
:root[data-font-scale="compact"] .legendItem{font-size:14px;line-height:1.65;}
:root[data-font-scale="compact"] .formula{font-size:13px;line-height:1.55;}
:root[data-font-scale="mini"] .hero-title{font-size:36px;}
:root[data-font-scale="mini"] .topbar-title{font-size:18px;}
:root[data-font-scale="mini"] .topbar-sub{font-size:10px;}
:root[data-font-scale="mini"] .big-btn{font-size:18px;padding:16px 14px;}
:root[data-font-scale="mini"] .big-btn small{font-size:11px;}
:root[data-font-scale="mini"] .card-title{font-size:15px;}
:root[data-font-scale="mini"] .action-btn{font-size:14px;padding:11px 13px;}
:root[data-font-scale="mini"] .qText{font-size:16px;line-height:1.46;}
:root[data-font-scale="mini"] .stmt{font-size:14px;line-height:1.48;}
:root[data-font-scale="mini"] .inlineChoice{font-size:13px;line-height:1.38;padding:8px 10px;}
:root[data-font-scale="mini"] .figureHead{font-size:14px;}
:root[data-font-scale="mini"] .choice.compact{min-height:38px;font-size:13px;padding:8px 0;}
:root[data-font-scale="mini"] .nav-btn{font-size:12px;padding:7px 10px;}
:root[data-font-scale="mini"] .quiz-body{padding-top:78px;padding-bottom:104px;}
:root[data-font-scale="mini"] .figureWrap{margin:8px 7px 9px;padding:7px 6px;}
:root[data-font-scale="mini"] .feedback{font-size:13px;padding:9px 10px;}
:root[data-font-scale="mini"] .pill{font-size:12px;padding:5px 10px;}
:root[data-font-scale="mini"] .block p,
:root[data-font-scale="mini"] .bullet li,
:root[data-font-scale="mini"] .score-row,
:root[data-font-scale="mini"] .inlineHelp,
:root[data-font-scale="mini"] .small-note,
:root[data-font-scale="mini"] .legendItem{font-size:13px;line-height:1.56;}
:root[data-font-scale="mini"] .formula{font-size:12px;line-height:1.48;}
.home-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.home-card{min-height:96px;padding:16px 14px 14px;display:flex;flex-direction:column;justify-content:space-between;}
.big-btn.soft{background:linear-gradient(180deg,#fefefe,#eef3f6);color:#1f3440;border:1px solid rgba(45,108,123,.15);}
.big-btn.soft small{color:#6c7b82;}
.big-btn,.action-btn,.nav-btn,.pill,.choice,.jump-btn,.setting-chip{transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;}
.big-btn:active,.action-btn:active,.nav-btn:active,.pill:active,.choice:active,.jump-btn:active,.setting-chip:active{transform:translateY(1px) scale(.99);filter:saturate(.98);}
#pastMenuScreen .section-pad,#yearMenuScreen .section-pad,#scoreYearScreen .section-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pastMenuScreen .big-btn:last-child,#yearMenuScreen .big-btn:last-child,#scoreYearScreen .big-btn:last-child{grid-column:1/-1;}
#yearMenuScreen .big-btn,#scoreYearScreen .big-btn,#pastMenuScreen .big-btn{min-height:82px;display:flex;flex-direction:column;justify-content:center;}
#yearMenuScreen .big-btn small,#scoreYearScreen .big-btn small,#pastMenuScreen .big-btn small{line-height:1.35;}
.quiz-header{padding-bottom:10px;}
.questionMeta{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.progressTrack{width:100%;height:8px;background:rgba(255,255,255,.24);border-radius:999px;overflow:hidden;}
.progressFill{height:100%;width:0;background:linear-gradient(90deg,#c8f2ff,#ffffff);border-radius:999px;transition:width .18s ease;}
.statusRow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.statusChip{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:11px;font-weight:900;color:#fff;}
.statusChip.ok{background:rgba(25,138,88,.18);border-color:rgba(200,255,226,.4);}
.statusChip.ng{background:rgba(203,74,69,.2);border-color:rgba(255,217,216,.4);}
.statusChip.pending{background:rgba(255,255,255,.14);}
.statusChip.ghost{background:rgba(255,255,255,.12);}
.statusChip.revision{background:rgba(255,232,171,.18);border-color:rgba(255,241,203,.4);cursor:pointer;}
.feedbackArea{display:flex;flex-direction:column;gap:8px;}
.nextAction{display:none;gap:6px;flex-wrap:wrap;align-items:center;margin:0 12px 4px;}
.nextAction.show{display:flex;}
.guide-btn{appearance:none;border:none;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;background:#fff;color:#204351;box-shadow:0 8px 18px rgba(17,37,56,.10);cursor:pointer;}
.guide-btn.primary{background:linear-gradient(180deg,#3f879b,#2d6c7b);color:#fff;}
.guide-text{font-size:12px;color:#53646d;font-weight:800;}
.answerDock{padding-top:4px;}
.dockList{gap:5px;}
.choice.compact{min-height:40px;border-radius:12px;}
.zoomBtn{right:4px;bottom:4px;width:17px;height:17px;font-size:10px;}
.jumpLegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px;}
.legendItem{background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:900;color:#44555c;box-shadow:0 8px 18px rgba(17,37,56,.07);}
.jump-btn{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 12px;text-align:left;}
.jump-num{font-size:14px;font-weight:900;}
.jump-mark{font-size:12px;font-weight:900;opacity:.9;}
.jump-btn.current .jump-mark{opacity:1;}
.score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.metric-label{font-size:14px;font-weight:900;}
.score-list.compact{margin-top:12px;}
.score-row strong{font-weight:900;}


/* ===== 分野別5角形成績チャート ===== */
.radar-card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(45,108,123,.10);
  padding:14px;
  margin:12px 0;
}
.radar-title{
  font-size:16px;
  font-weight:900;
  color:#1b333d;
  line-height:1.45;
}
.radar-sub{
  font-size:12px;
  color:#687c84;
  font-weight:700;
  line-height:1.6;
  margin-top:3px;
}
.radar-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.radar-svg{
  width:100%;
  max-width:360px;
  min-height:245px;
  display:block;
  margin:0 auto;
  overflow:visible;
}
.radar-grid{fill:none;stroke:rgba(45,108,123,.22);stroke-width:1;}
.radar-axis{stroke:rgba(45,108,123,.25);stroke-width:1;}
.radar-area{fill:rgba(45,108,123,.20);stroke:#2d6c7b;stroke-width:2.5;}
.radar-point{fill:#2d6c7b;stroke:#fff;stroke-width:1.5;}
.radar-label{font-size:11px;font-weight:900;fill:#1b333d;}
.radar-percent{font-size:10px;font-weight:900;fill:#2d6c7b;}
.radar-legend{display:flex;flex-direction:column;gap:7px;}
.radar-legend-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  background:#f7fbfc;
  border:1px solid rgba(45,108,123,.10);
  border-radius:11px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.35;
}
.radar-legend-row strong{font-weight:900;color:#1b333d;}
.radar-legend-row span{font-weight:900;color:#2d6c7b;white-space:nowrap;}
.radar-legend-row small{display:block;color:#687c84;font-weight:700;margin-top:2px;}
@media (max-width:560px){
  .radar-wrap{grid-template-columns:1fr;}
  .radar-svg{max-width:320px;min-height:235px;}
}

.settingsRow{display:flex;gap:8px;flex-wrap:wrap;}
.setting-chip{appearance:none;border:none;border-radius:999px;padding:10px 14px;background:#eef3f6;color:#21414f;font-size:14px;font-weight:900;box-shadow:0 8px 18px rgba(17,37,56,.08);cursor:pointer;}
.setting-chip.active{background:linear-gradient(180deg,#3f879b,#2d6c7b);color:#fff;}
.inlineHelp{font-size:13px;line-height:1.65;color:#5a6b73;}
#settingsScreen .section-pad{display:grid;gap:12px;}
@media (max-width:430px){
  .home-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
  #pastMenuScreen .section-pad,#yearMenuScreen .section-pad,#scoreYearScreen .section-pad{grid-template-columns:repeat(2,minmax(0,1fr));}
}


.home-wide{grid-column:1/-1;}
.home-progress-card{padding:16px 14px;border-radius:18px;}
.home-progress-title{font-size:16px;font-weight:900;margin-bottom:10px;}
.home-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.home-progress-item{background:#f7fafc;border-radius:12px;padding:10px 12px;box-shadow:0 6px 16px rgba(17,37,56,.06);}
.home-progress-item b{display:block;font-size:12px;color:#5b6c74;margin-bottom:4px;}
.home-progress-item span{font-size:16px;font-weight:900;color:#1d3944;line-height:1.35;}
#categoryScreen .section-pad,#calcCategoryScreen .section-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#categoryScreen .big-btn:last-child,#categoryScreen .small-note,#calcCategoryScreen .big-btn:last-child,#calcCategoryScreen .small-note{grid-column:1/-1;}
#categoryScreen .big-btn,#calcCategoryScreen .big-btn{min-height:94px;display:flex;flex-direction:column;justify-content:center;}
.jumpFilters,.explainJumpRow{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px;}
.jump-filter-btn,.explain-jump-btn{appearance:none;border:none;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;background:#eef3f6;color:#21414f;box-shadow:0 8px 18px rgba(17,37,56,.08);cursor:pointer;}
.jump-filter-btn.active,.explain-jump-btn.active{background:linear-gradient(180deg,#3f879b,#2d6c7b);color:#fff;}
.jump-btn.review{background:#fff7df;color:#9a6a00;}
.jump-year-section{margin-bottom:12px;}
.jump-year-title{font-size:13px;font-weight:900;color:#4d616a;margin:4px 2px 8px;}
.jump-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.jump-context{margin:2px 0 10px;font-size:13px;font-weight:900;color:#4d616a;line-height:1.5;}

.legendItem.review{background:#fff7df;color:#8a6100;}
.hl-wrong{color:#cb4a45;font-weight:900;}
.hl-correct{color:#1d7a56;font-weight:900;}
.hl-formula{color:#2d6c7b;font-weight:900;}
.hl-key{color:#d47b00;font-weight:900;}
.wrong-keyword{color:#cb4a45;font-weight:900;}
.correct-keyword{color:#1d7a56;font-weight:900;}
.important-keyword{color:#d47b00;font-weight:900;}
.formula-keyword{color:#2d6c7b;font-weight:900;}
.answer-keyword{color:#1d3f57;font-weight:900;}
.term-actual{color:#1f5f99;font-weight:900;}
.term-target{color:#b55312;font-weight:900;}
#modalBody .choice-explain-list{display:block;margin-top:6px;}
#modalBody .choice-explain-item{
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  line-height:1.7;
}
#modalBody .choice-explain-item + .choice-explain-item{margin-top:.35em;}
#modalBody .choice-explain-item .choice-marker{
  display:inline;
  min-width:0;
  margin-right:.38em;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#1d3f57;
  font-weight:900;
  white-space:nowrap;
}
#modalBody .explainBlock{
  background:#fff;
  border:1px solid rgba(45,108,123,.10);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 20px rgba(17,37,56,.08);
}
#modalBody .explainBlock + .explainBlock{margin-top:10px;}
#modalBody .explainBlock:first-of-type{border-left:5px solid #1d7a56;background:#fbfffd;}
#modalBody .explainBlock:first-of-type .blockTitle{color:#1d7a56;}
#modalBody .explainBlock > p{margin:0 0 8px;line-height:1.75;}
#modalBody .explainBlock > p:last-child{margin-bottom:0;}
#modalBody .explain-main,
#modalBody .explain-support{
  position:relative;
  margin:10px 0 0;
  padding:12px;
  border-radius:14px;
  line-height:1.75;
  font-size:15px;
}
#modalBody .explain-main{background:#edf8f6;border:1px solid rgba(45,108,123,.22);}
#modalBody .explain-support{background:#fff8ed;border:1px solid rgba(212,123,0,.22);}
#modalBody .wrong-keyword,
#modalBody .correct-keyword,
#modalBody .important-keyword,
#modalBody .answer-keyword,
#modalBody .formula-keyword,
#modalBody .term-actual,
#modalBody .term-target{
  display:inline;
  padding:.08em .24em;
  border-radius:7px;
}
#modalBody .wrong-keyword{background:#fff0ed;}
#modalBody .correct-keyword{background:#edf8f0;}
#modalBody .important-keyword{background:#fff4df;}
#modalBody .answer-keyword{background:#eaf2f6;}
#modalBody .formula-keyword{background:#eef8fb;}
#modalBody .term-actual{background:#eaf3ff;border:1px solid rgba(31,95,153,.18);}
#modalBody .term-target{background:#fff1e6;border:1px solid rgba(181,83,18,.18);}
.formula-label{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  vertical-align:middle;
  white-space:nowrap;
  margin:.1em .16em;
  padding:.24em .52em .28em;
  border-radius:10px;
  background:#eef8fb;
  border:1px solid rgba(45,108,123,.22);
  box-shadow:0 4px 10px rgba(17,37,56,.06);
  color:#225f70;
  font-family:"Times New Roman","Cambria Math","STIX Two Math",serif;
  font-weight:900;
  line-height:1.22;
  -webkit-overflow-scrolling:touch;
}
#modalBody .formulaDisplay{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin:.55em 0;
  padding:.45em .55em;
  border-radius:12px;
  background:#eef8fb;
  border:1px solid rgba(45,108,123,.22);
  box-shadow:0 4px 10px rgba(17,37,56,.06);
  color:#225f70;
  -webkit-overflow-scrolling:touch;
}
#modalBody .formulaDisplay .mathChoice,
#modalBody .formulaDisplay .mathEquation,
#modalBody .formulaDisplay .formulaStack{
  width:max-content;
  max-width:none;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.explain-figure{margin:10px 0 12px;padding:8px;background:#fff;border-radius:12px;box-shadow:0 8px 18px rgba(17,37,56,.08);}
.explain-figure img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;}
.explain-figure figcaption{margin-top:6px;font-size:12px;font-weight:800;color:#52636b;}
.explain-figure-inline{margin:10px 0 12px;}
.explain-figure-inline .figureWrap{margin:8px 0 12px;padding:8px;border-radius:12px;}
.explain-figure-inline img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;}
.modal .figureWrap,
#modalBody .figureWrap,
#modalBody .figurePanel,
#modalBody .singlePlate,
#modalBody .r2tableScroll{
  overflow:visible !important;
  max-height:none !important;
}
#modalBody .r2tableScroll{overflow-x:auto !important;overflow-y:visible !important;}
#modalBody img,
#modalBody svg,
#modalBody canvas{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
}
.explainBlock.block-formula .blockTitle{color:#2d6c7b;}
.explainBlock.block-warn .blockTitle{color:#cb4a45;}
.explainBlock.block-key .blockTitle{color:#d47b00;}
.explainBlock.block-correct .blockTitle{color:#1d7a56;}
.category-list-btn{appearance:none;border:none;width:100%;text-align:left;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;font-size:14px;font-weight:900;cursor:pointer;line-height:1.6;color:#1b333d;}
.category-list-btn small{display:block;margin-top:4px;font-size:12px;color:#687c84;font-weight:700;}
.category-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(45,108,123,.10);}
.category-card.full{grid-column:1/-1;}
.category-wide-btn{grid-column:1/-1;}
.category-card-title{font-size:16px;font-weight:900;line-height:1.45;color:#1b333d;}
.category-card-sub{font-size:12px;line-height:1.6;color:#687c84;font-weight:700;}
.category-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#categoryScreen .category-action-row{grid-template-columns:repeat(2,minmax(0,1fr));}
.category-mini-btn{appearance:none;border:none;border-radius:12px;padding:11px 10px;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(17,37,56,.08);}
.category-mini-btn.main{background:linear-gradient(180deg,#448ba0,#2d6c7b);color:#fff;}
.category-mini-btn.random{background:linear-gradient(180deg,#4da86d,#2f8050);color:#fff;}
.category-mini-btn.alt{background:linear-gradient(180deg,#ffffff,#eef3f6);color:#1f3440;border:1px solid rgba(45,108,123,.15);}

.category-mini-btn.score{grid-column:1/-1;background:linear-gradient(180deg,#fff9e8,#f6efcf);color:#5b4a12;border:1px solid rgba(138,111,27,.18);}
.category-score-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.category-score-item{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;border:1px solid rgba(45,108,123,.10);line-height:1.6;}
.category-score-item strong{font-weight:900;}
.category-score-item small{display:block;color:#687c84;font-size:12px;margin-top:2px;font-weight:700;}

@media (max-width:430px){#categoryScreen .section-pad,#calcCategoryScreen .section-pad{grid-template-columns:repeat(2,minmax(0,1fr));}.category-action-row{grid-template-columns:1fr;}}


/* ===== inline choice box cleanup ===== */
.inlineChoices{
  display:block !important;
  margin:14px 0 0 !important;
}
.inlineChoice{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-top:12px !important;
  font-size:20px !important;
  line-height:1.72 !important;
  font-weight:400 !important;
}
.inlineChoice:first-child{margin-top:0 !important;}
.inlineChoice .formulaWrap,
.inlineChoice .matrixBlock,
.inlineChoice [style*="white-space:pre"]{
  background:transparent !important;
}
@media (max-width:430px){
  .inlineChoice{
    font-size:17px !important;
    line-height:1.62 !important;
  }
}



/* ===== color polish v2 ===== */
:root{
  --teal:#2c4f67;
  --bg:#f6f1eb;
  --card:#fffdfb;
  --text:#1c232b;
  --shadow:0 14px 34px rgba(28,35,43,.10);
  --ok:#2a7652;
  --ok-bg:#ebf6f0;
  --ng:#b95e56;
  --ng-bg:#fcf0ee;
}
html,body{
  background:
    radial-gradient(circle at top left, rgba(214,177,116,.16), transparent 30%),
    linear-gradient(180deg,#fbf7f2 0%, #f2ece6 100%);
  color:var(--text);
}
.app{
  background:
    radial-gradient(circle at top right, rgba(91,117,141,.08), transparent 24%),
    linear-gradient(180deg,#fcfaf7 0%, #f2ece6 100%);
}
.hero,
.topbar,
#scoreScreen .topbar,
#yearMenuScreen .topbar,
#scoreYearScreen .topbar{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(214,177,116,.18), transparent 28%),
    linear-gradient(135deg,#5d748d 0%, #2c4f67 52%, #1f394d 100%);
}
.hero-title,
.topbar-title,
.quiz-title,
.sheetTitle{
  letter-spacing:.018em;
  text-shadow:0 3px 10px rgba(0,0,0,.10);
}
.big-btn{
  box-shadow:0 14px 30px rgba(28,35,43,.10);
}
.big-btn.teal{background:linear-gradient(180deg,#7391ad,#2c4f67);}
.big-btn.green{background:linear-gradient(180deg,#7f9a8b,#4f6c60);}
.big-btn.gray{background:linear-gradient(180deg,#7b8591,#535d68);}
.big-btn.orange{background:linear-gradient(180deg,#dfb680,#c48649);}
.big-btn.soft{
  background:linear-gradient(180deg,#fffefd,#f5efe7);
  color:#24343f;
  border:1px solid rgba(44,79,103,.12);
}
.big-btn.soft small{color:#6f7675;}
.card,
.score-box,
.figureWrap,
.figurePanel,
.inlineChoice,
.sheet,
.block,
.score-row,
.legendItem{
  background:rgba(255,253,251,.98);
  box-shadow:var(--shadow);
}
.figurePanel{
  border:1px solid rgba(44,79,103,.07);
}
.action-btn.teal,
.guide-btn.primary,
.setting-chip.active{
  background:linear-gradient(180deg,#6d8ba7,#2c4f67);
}
.action-btn.gray,
.closeBtn{
  background:linear-gradient(180deg,#73808c,#4b5662);
}
.nav-btn,
.counter,
.pill,
.guide-btn,
.setting-chip,
.statusChip.pending,
.statusChip.ghost{
  background:rgba(255,252,248,.98);
  color:#24343f;
}
.pill,
.mode-badge{
  border-color:rgba(44,79,103,.18);
  color:#31536b;
}
.answerDock{
  background:rgba(249,245,239,.97);
  border-top:1px solid rgba(44,79,103,.08);
}
.choice{
  background:#fffdfb;
}
.choice.correct{background:var(--ok-bg); color:var(--ok);}
.choice.wrong{background:var(--ng-bg); color:var(--ng);}
.zoomBtn{
  background:#f5efe8;
  border:1px solid rgba(44,79,103,.14);
  color:var(--teal);
}
.jump-btn.current,
.statusChip.ok,
.progressFill{
  background:linear-gradient(90deg,#87a2bb,#2c4f67);
  color:#fff;
}
.jump-btn.correct{background:var(--ok-bg); color:var(--ok);}
.jump-btn.wrong{background:var(--ng-bg); color:var(--ng);}
.statusChip.ok{border-color:rgba(255,255,255,.22);}
.statusChip.ng{background:rgba(185,94,86,.15); border-color:rgba(185,94,86,.18);}
.statusChip.revision{
  background:rgba(223,182,128,.18);
  border-color:rgba(196,134,73,.24);
  color:#66431d;
}
#yearMenuScreen .big-btn,
#scoreYearScreen .big-btn,
#pastMenuScreen .big-btn{
  background:linear-gradient(180deg,#fffefd,#f7f0e8);
  color:#22343f;
  border:1px solid rgba(44,79,103,.10);
}
#yearMenuScreen .big-btn::before,
#scoreYearScreen .big-btn::before,
#pastMenuScreen .big-btn::before{
  background:linear-gradient(180deg,#9bb2c7,#2c4f67);
}
#yearMenuScreen .big-btn small,
#scoreYearScreen .big-btn small,
#pastMenuScreen .big-btn small,
.inlineHelp,
.small-note,
.figureSub,
.noteText{
  color:#6b7372;
}
.formula{
  background:#f6efe7;
  border:1px solid rgba(44,79,103,.07);
}
.line{background:linear-gradient(90deg,#6f8f98,#2f5d67);}



/* ===== PATCH: figure visibility hardening (2026-05-12) ===== */
#figureHost,
#figureHost .figureWrap,
#figureHost .figurePanel,
#figureHost .figureCard,
#figureHost .singlePlate,
#figureHost .r2tableScroll{
  max-width:100% !important;
  overflow:visible !important;
}
#figureHost img,
#figureHost svg,
#figureHost canvas{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#figureHost table{
  width:100% !important;
  max-width:100% !important;
}
#figureHost [style*="overflow:hidden"],
#figureHost [style*="overflow: hidden"]{
  overflow:visible !important;
}



/* ===== PATCH: figure visibility hardening 2 (2026-05-12) ===== */
#figureHost{
  overflow:visible !important;
  padding-bottom:16px !important;
}
#figureHost,
#figureHost *{
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#figureHost .figureWrap,
#figureHost .figurePanel,
#figureHost .figureCard,
#figureHost .singlePlate,
#figureHost .r2tableScroll,
#figureHost [style*="overflow:hidden"],
#figureHost [style*="overflow: hidden"]{
  overflow:visible !important;
  height:auto !important;
  max-height:none !important;
}
#figureHost [style*="height:"],
#figureHost [style*="max-height"]{
  height:auto !important;
  max-height:none !important;
}
#figureHost img,
#figureHost svg,
#figureHost canvas{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#figureHost svg{
  overflow:visible !important;
}
#figureHost table{
  max-width:100% !important;
}



/* ===== Sales-ready additions ===== */
.hero-sales-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.hero-sales-note{
  margin-top:8px;
  color:rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.55;
  font-weight:700;
}
.sales-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px 15px;}
.sales-card + .sales-card{margin-top:12px;}
.sales-card h2{font-size:18px;line-height:1.35;margin:0 0 10px;font-weight:900;color:#1d3944;}
.sales-card h3{font-size:15px;line-height:1.45;margin:14px 0 6px;font-weight:900;color:#1d3944;}
.sales-card p,.sales-card li{font-size:14px;line-height:1.75;color:#34454d;}
.sales-card ul{margin:8px 0 0 1.2em;padding:0;}
.sales-card a{color:#176b83;font-weight:900;word-break:break-all;}
.sales-alert{background:#fff7e8;border:1px solid #f2ca85;color:#6a4300;border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.7;font-weight:800;}
.sales-mini{font-size:12px;line-height:1.65;color:#61727a;}
.license-table{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:6px;}
.license-table th,.license-table td{font-size:13px;line-height:1.55;text-align:left;vertical-align:top;padding:9px 10px;background:#f7fafc;}
.license-table th{width:36%;color:#243d49;border-radius:10px 0 0 10px;font-weight:900;}
.license-table td{border-radius:0 10px 10px 0;color:#34454d;}
.sales-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;}
.log-box{margin-top:10px;padding:10px;border-radius:12px;background:#f7fafc;border:1px solid #d9e4e8;font-size:12px;line-height:1.55;color:#34454d;white-space:pre-wrap;word-break:break-all;max-height:180px;overflow:auto;}
.log-note{font-size:12px;line-height:1.6;color:#61727a;margin-top:8px;}
.footer-credit{grid-column:1/-1;margin-top:2px;padding:10px 12px;border-radius:14px;background:#eef3f6;color:#52656d;font-size:11px;line-height:1.55;font-weight:700;}
.footer-credit b{color:#1f3440;}


/* ===== R8 text-layout fixed patch ===== */
.inlineChoice[data-choice]{cursor:pointer;-webkit-tap-highlight-color:rgba(44,79,103,.12);}
.inlineChoice[data-choice].correct{background:var(--ok-bg) !important;color:var(--ok) !important;border-radius:12px !important;padding:8px 10px !important;font-weight:800 !important;}
.inlineChoice[data-choice].wrong{background:var(--ng-bg) !important;color:var(--ng) !important;border-radius:12px !important;padding:8px 10px !important;font-weight:800 !important;}
.versionNoteR8{margin:10px 0 0;padding:8px 10px;border-radius:12px;background:#eef8f9;color:#2c4f67;font-size:13px;font-weight:800;line-height:1.5;}


/* 成績リセットボタン */
.big-btn.danger { background:linear-gradient(180deg,#d66a5f,#a83b33); color:#fff; }
.action-btn.danger { background:#b83a34; color:#fff; }
.reset-warning-note { font-size:12px; color:#7b3a35; line-height:1.55; margin-top:8px; text-align:left; }


[hidden] { display:none !important; }
.app-menu-button,.app-menu-close { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #c3ced5; border-radius:8px; color:#2c4f67; background:#fffdfb; font:26px/1 Arial,sans-serif; cursor:pointer; }
.app-menu-button { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); z-index:80; box-shadow:var(--shadow); }
.app-menu-button:focus-visible,.app-menu-close:focus-visible { outline:3px solid #2587ae; outline-offset:3px; }
.app-menu-dialog { position:fixed; inset:0 auto 0 0; margin:0; padding:0; width:min(330px,calc(100% - 36px)); max-width:calc(100% - 36px); height:100dvh; max-height:100dvh; border:0; border-right:1px solid #c8d2d8; border-radius:0; background:var(--card); color:var(--text); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; box-shadow:8px 0 30px #0003; }
.app-menu-dialog::-webkit-scrollbar { display:none; }
.app-menu-dialog::backdrop { background:#14253480; }
.app-menu-heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:inherit; border-bottom:1px solid #dce2e6; }
.app-menu-heading h2 { margin:0; font-size:18px; letter-spacing:0; }
.app-menu-links { display:grid; padding:8px 16px calc(20px + env(safe-area-inset-bottom)); }
.app-menu-links a { padding:14px 8px; min-height:48px; border-bottom:1px solid #dce2e6; color:inherit; font-size:15px; font-weight:700; text-decoration:none; }
.app-menu-links a:hover,.app-menu-links a:focus-visible { background:#e9f1f4; }
body.app-nav-ready .screen > .topbar { padding-top:calc(76px + env(safe-area-inset-top)); }
body.app-nav-ready #homeScreen .hero { padding-top:calc(76px + env(safe-area-inset-top)); }
body.app-nav-ready .quiz-header { padding-top:calc(98px + env(safe-area-inset-top)); }
body.app-nav-ready #counterWrap { max-width:calc(100% - 70px); }
body.app-nav-ready #counterWrap .nav-row { gap:5px; }
body.app-nav-ready #counterWrap .nav-btn { padding:8px 10px; }
.night-mode-controls { display:flex; justify-content:flex-end; margin-bottom:4px; }
.night-mode-toggle { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--text); font-size:14px; font-weight:700; cursor:pointer; }
.night-mode-toggle input { appearance:none; width:44px; height:26px; margin:0; padding:3px; border:1px solid #9bacb6; border-radius:999px; background:#ccd5db; cursor:pointer; }
.night-mode-toggle input::before { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; transition:transform .15s; }
.night-mode-toggle input:checked { background:#397ba2; border-color:#5a9abe; }
.night-mode-toggle input:checked::before { transform:translateX(17px); }
.night-mode-toggle input:focus-visible { outline:3px solid #2587ae; outline-offset:3px; }
.study-time-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; font-size:14px; }
.study-time-line strong { font-size:18px; font-variant-numeric:tabular-nums; }
.study-save-warning { margin:8px 0; font-size:12px; color:#a84432; }
#modalBody .related-knowledge-list { grid-template-columns:minmax(0,1fr); }
#modalBody .related-knowledge-item { min-width:0; }
#modalBody .math-chip { max-width:calc(100% - 6px); overflow-x:auto; white-space:nowrap; }
.score-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
#scoreYearScreen > .section-pad { display:block; }
.score-tabs .setting-chip { margin:0; border-radius:8px; padding:11px 6px; }
.score-tabs [aria-selected="true"],.settingsRow [aria-pressed="true"] { background:var(--teal); color:#fff; }
[data-score-panel] > .big-btn { width:100%; margin:6px 0; }
.score-kpis { margin-bottom:16px; }
.score-kpis small { display:block; margin-top:6px; font-size:12px; line-height:1.5; }
.training-order { display:flex; flex-wrap:wrap; gap:16px; margin:12px 0; padding:10px 0; border:0; font-size:14px; }
.training-order legend { font-size:13px; font-weight:700; }
.training-order label { display:flex; align-items:center; gap:6px; min-height:32px; }
.training-order input { accent-color:var(--teal); width:18px; height:18px; margin:0; }
#calcCategoryScreen .category-action-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
#calcCategoryScreen [data-calc-resume] { grid-column:1 / -1; }
#calcCategoryScreen .category-mini-btn:disabled { opacity:.45; cursor:default; }
#localSaveNotice,.pwa-update-notice { position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:110; display:flex; align-items:center; gap:12px; width:min(410px,calc(100% - 24px)); padding:12px 14px; border:1px solid #b9ccd7; border-radius:8px; background:var(--card); color:var(--text); box-shadow:var(--shadow); font-size:13px; line-height:1.5; }
#localSaveNotice button,.pwa-update-notice button { flex:none; padding:9px 12px; border:0; border-radius:6px; background:var(--teal); color:#fff; font:700 13px inherit; cursor:pointer; }
#localSaveNotice.save-failed { border-color:#bd6257; }
.pwa-update-notice span { flex:1; }
.pwa-settings { margin-top:16px; padding-top:16px; border-top:1px solid #d8dfe3; font-size:13px; }
.pwa-settings p { line-height:1.6; }
html[data-color-mode="dark"] { color-scheme:dark; --bg:#17191c; --card:#22262b; --text:#eceff2; --teal:#4488b0; --shadow:0 8px 24px #0003; --ok:#8bd8ad; --ok-bg:#19392d; --ng:#ffa199; --ng-bg:#432725; }
html[data-color-mode="dark"],html[data-color-mode="dark"] body,html[data-color-mode="dark"] .app { background:#17191c; color:var(--text); }
html[data-color-mode="dark"] :is(.card,.sheet,.block,.score-box,.score-row,.legendItem,.inlineChoice,.home-progress-card,.home-progress-item,.score-dashboard-card,.category-card,.category-score-item,.category-list-btn) { background:#22262b; color:var(--text); border-color:#454e58; }
html[data-color-mode="dark"] :is(.hero,.topbar,.quiz-header,#scoreScreen .topbar,#yearMenuScreen .topbar,#scoreYearScreen .topbar) { background:#203d50; color:#fff; }
html[data-color-mode="dark"] .big-btn { background:#2b3540; color:#f4f6f8; border-color:#4b5764; }
html[data-color-mode="dark"] :is(.big-btn small,.small-note,.inlineHelp,.category-card-sub,.score-card-sub,.category-list-btn small,.home-progress-item b,.score-kpis small,.topbar-sub) { color:#bdc8d2; }
html[data-color-mode="dark"] :is(.setting-chip,.nav-btn,.app-menu-button,.app-menu-close,.pill,.guide-btn,.jump-filter-btn,.category-mini-btn,.fixed-page-nav button) { background:#303943; color:#eaf1f6; border-color:#64707c; }
html[data-color-mode="dark"] :is(.fixed-page-nav,.answerDock) { background:#20262bf2; color:var(--text); border-color:#4f5b66; }
html[data-color-mode="dark"] .counter { background:#303943; color:#eaf1f6; }
html[data-color-mode="dark"] :is(.setting-chip.active,[aria-selected="true"],[data-score-mode][aria-pressed="true"],.fixed-page-nav button[data-action="forward"]) { background:#326d94; color:#fff; }
html[data-color-mode="dark"] .choice.compact { background:#28343e; border-color:#546474; color:#fff; }
html[data-color-mode="dark"] .choice.correct,html[data-color-mode="dark"] .feedback.ok { background:#193f30; border-color:#75cd9e; color:#b4f2cf; }
html[data-color-mode="dark"] .choice.wrong,html[data-color-mode="dark"] .feedback.ng { background:#492b2b; border-color:#e8958d; color:#ffd2cd; }
html[data-color-mode="dark"] :is(.correct-keyword,.related-keyword,.related-term,.important-keyword) { color:#94e0c0; background:#193b33; }
html[data-color-mode="dark"] .wrong-keyword { color:#ffb3a8; background:#4c2929; }
html[data-color-mode="dark"] .related-value { color:#ffd98d; background:#40351e; }
html[data-color-mode="dark"] :is(.math-chip,.formula-label,.formula-keyword) { color:#bce5ff; background:#193a54; border-color:#5a9cc6; }
html[data-color-mode="dark"] .revisionCaution { background:#443c25; border-color:#8f7c42; color:#ffedb9; }
html[data-color-mode="dark"] :is(.app-menu-heading,.app-menu-links a,.pwa-settings) { border-color:#424b55; }
html[data-color-mode="dark"] .app-menu-links a:hover { background:#303943; }
html[data-color-mode="dark"] :is(.figureWrap,.figurePanel,#figureHost img,.figureStage) { background:#fff; color:#111; }
html[data-color-mode="dark"] :is(.score-card-title,.home-progress-title,.category-card-title,.card-title,.score-menu-heading,.blockTitle) { color:inherit; }
html[data-color-mode="dark"] :is(.score-metric-card,.score-insight-card,.score-chart-card,.priority-score,.radar-legend-item,#fontPreviewCard) { background:#27313b; color:#edf3f7; border-color:#465361; }
html[data-color-mode="dark"] :is(.home-progress-item span,.score-metric-value,.score-big,.radar-legend-item b,.radar-legend-item span) { color:#edf3f7; }
html[data-color-mode="dark"] :is(.score-metric-label,.score-metric-note,.category-score-item small) { color:#bdc8d2; }
html[data-color-mode="dark"] .radar-chart text { fill:#e0ebf2; }
html[data-color-mode="dark"] .radar-area { fill:#589ac53d; stroke:#83c7f0; }
html[data-color-mode="dark"] .radar-point { fill:#83c7f0; stroke:#203d50; }
html[data-color-mode="dark"] #modalBody :is(.explainBlock,.block-correct,.combo-explain,.choice-explain-list) { background:#22262b; color:#eceff2; border-color:#45525e; }
html[data-color-mode="dark"] #modalBody .explain-main { background:#1c3639; color:#edf5f5; border-color:#43777b; }
html[data-color-mode="dark"] #modalBody .explain-support { background:#3a3324; color:#f1e9d8; border-color:#7c6a3d; }
html[data-color-mode="dark"] #modalBody :is(.correct-keyword,.related-keyword,.combo-term) { color:#9ae5c1; background:#1b3d34; }
html[data-color-mode="dark"] #modalBody :is(.wrong-keyword,.combo-wrong) { color:#ffb6ad; background:#4c2c2b; }
html[data-color-mode="dark"] #modalBody :is(.important-keyword,.related-value,.term-target) { color:#ffe0a4; background:#44391f; }
html[data-color-mode="dark"] #modalBody :is(.answer-keyword,.formula-keyword,.formula-label,.term-actual) { color:#bce5ff; background:#193a54; border-color:#5a9cc6; }
html[data-color-mode="dark"] #modalBody :is(.combo-answer,.combo-result,.choice-explain-conclusion) { background:#253c4a; color:#e3f3ff; border-color:#4b7186; }
html[data-color-mode="dark"] #modalBody .choice-explain-item { border-color:#495460; }
@media(max-width:360px) {
  body.app-nav-ready #counterWrap .nav-btn { font-size:12px; padding:8px; }
  body.app-nav-ready .quiz-header { padding-top:calc(104px + env(safe-area-inset-top)); }
}
@media(prefers-reduced-motion:reduce) { .night-mode-toggle input::before { transition:none; } }

:root {
  --study-width: 100%;
  --reading-width: 100%;
  --sheet-width: 540px;
}

.app { width: var(--study-width); max-width: none; }
.screen { padding-bottom: env(safe-area-inset-bottom); }
.screen > .section-pad, .home-buttons { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.screen > .topbar, .hero, .quiz-header { overflow-wrap: anywhere; }
body.app-nav-ready .screen > .topbar,
body.app-nav-ready #homeScreen .hero { padding-top: var(--page-controls-space, calc(76px + env(safe-area-inset-top))); }
body.app-nav-ready #quizScreen .quiz-header { padding-top: var(--quiz-controls-space, calc(98px + env(safe-area-inset-top))); }

.quiz-body { width: 100%; max-width: var(--reading-width); margin-inline: auto; }
.qText {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  overflow-wrap: anywhere;
}
.answerDock {
  width: min(var(--study-width), var(--reading-width));
  max-width: 100%;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}
body.app-nav-ready #counterWrap {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  max-width: calc(100% - 74px - env(safe-area-inset-left) - env(safe-area-inset-right));
}
.app-menu-button { left: max(10px, env(safe-area-inset-left)); }
.nav-row { max-width: 100%; }
.nav-btn { min-height: 44px; white-space: nowrap; }
.fixed-page-nav { max-width: calc(100% - 74px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
.sheet {
  width: min(var(--sheet-width), 100%);
  max-height: calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheetTop { position: sticky; top: -1px; z-index: 2; background: inherit; padding-bottom: 8px; }
.sheetTitle { min-width: 0; overflow-wrap: anywhere; }
.closeBtn { flex-shrink: 0; min-height: 44px; }
.modal {
  z-index: 100;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.category-card, .card, .home-progress-item, .score-box { min-width: 0; }
.big-btn, .category-mini-btn, .home-progress-item { overflow-wrap: anywhere; }
.category-mini-btn, .setting-chip, .pill, .jump-btn, .guide-btn { min-height: 44px; }
html .choice.compact { min-height: 44px !important; }
.app-menu-dialog { max-height: 100vh; max-height: 100dvh; }
.app-menu-heading, .app-menu-links { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

@media (min-width: 600px) {
  :root {
    --study-width: min(840px, calc(100vw - 32px));
    --reading-width: 760px;
    --sheet-width: 720px;
  }
  .section-pad, .home-buttons { padding: 20px; gap: 16px; }
  #pastMenuScreen .section-pad, #yearMenuScreen .section-pad,
  #categoryScreen .section-pad, #calcCategoryScreen .section-pad { gap: 16px; }
  .home-buttons > .big-btn { grid-column: auto; }
  .home-progress-card { grid-column: 1 / -1; }
  .home-card { min-height: 108px; }
  .category-cards { gap: 16px; }
  #calcCategoryScreen .category-card.full { grid-column: auto; }
  #calcCategoryScreen .training-order, #calcCategoryScreen .small-note { grid-column: 1 / -1; }
  .quiz-floating { flex-direction: row; align-items: center; gap: 10px; }
  .counter { flex-shrink: 0; }
  .nav-row { flex-wrap: nowrap; }
  .quiz-header { padding-inline: 24px; }
  .questionMeta { max-width: var(--reading-width); margin-inline: auto; }
  .answerDock { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .dockList.choiceCount4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dockList.choiceCount5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dockList.choiceCount5 .dockCell,
  .dockList.choiceCount5 .dockCell:nth-child(-n+2) { grid-column: auto; }
  html .choice.compact { min-height: 48px !important; }
  .sheet { padding: 20px 24px 24px; }
  .sheetTop { margin-bottom: 14px; }
  .jump-grid, .jump-year-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .score-grid { gap: 16px; }
  #settingsScreen .section-pad { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #settingsScreen .section-pad > .card { margin: 0; }
  #settingsScreen .section-pad > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  #yearMenuScreen .section-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #yearMenuScreen .year-tools-card, #yearMenuScreen .small-note { grid-column: 1 / -1; }
  .home-progress-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  :root {
    --study-width: min(1040px, calc(100vw - 64px));
    --reading-width: 800px;
    --sheet-width: 800px;
  }
  .section-pad, .home-buttons { padding-inline: 28px; }
  .home-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #yearMenuScreen .section-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Keep the question visible when a phone is held horizontally. */
@media (min-width: 600px) and (max-height: 500px) {
  :root {
    --study-width: 100%;
    --reading-width: min(800px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  .section-pad, .home-buttons, .quiz-header { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .quiz-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding-bottom: 6px; }
  .quiz-title { text-align: left; }
  .quiz-sub { text-align: right; align-self: center; margin-top: 0; }
  .questionMeta { grid-column: 1; width: 100%; display: flex; flex-direction: row; align-items: center; margin-top: 0; gap: 8px; }
  .progressTrack { flex: 1; height: 4px; }
  .statusRow { flex-shrink: 0; }
  .quiz-header > .app-version { grid-column: 2; grid-row: 2; text-align: right; align-self: center; margin: 0; }
  .answerDock { padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .dockTitle { display: none; }
  html .choice.compact { min-height: 44px !important; }
  .sheet { padding: 12px 18px 16px; }
  .sheetTop { margin-bottom: 8px; }
}

html,body{height:100%;overflow:hidden}
.app{height:100vh;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}
.app::-webkit-scrollbar{display:none}
.screen{min-height:100%}
#quizScreen .quiz-body{padding-top:0!important}
:root{--teal:#2c4f67;--bg:#edf0f2;--card:#fffdfb;--text:#24343f;--shadow:0 6px 18px #172e4110}
.app{background:#f5f5f2}
.hero,.topbar,.quiz-header{background:#2c4f67}
.big-btn{border-radius:12px;border:1px solid #d7dfe3;box-shadow:var(--shadow)}
.big-btn.teal{background:#2c4f67}.big-btn.green{background:#3f6b62}.big-btn.orange{background:#9d683b}.big-btn.gray{background:#4e5963}
.big-btn.soft{background:#e4ecf0;color:#2c4f67}
.home-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-wide{grid-column:1/-1}
.home-buttons>#openPastMenuBtn{grid-column:1/-1}
#pastMenuScreen .section-pad,#yearMenuScreen .section-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#pastMenuScreen .big-btn,#yearMenuScreen .big-btn{width:100%;margin:0;min-width:0}
#pastMenuScreen .big-btn:last-child,#yearMenuScreen .big-btn:last-child{grid-column:1/-1}
#scoreYearScreen .big-btn{display:block;width:100%;margin:10px 0}
.home-progress-item small{font-size:11px;color:#5b6b75}
.fixed-page-nav{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:65;display:flex;gap:4px;padding:3px;border-radius:10px;background:#fffdfbf5;border:1px solid #c3ced5}
.fixed-page-nav button{min-height:38px;padding:6px 10px;border:0;background:transparent;color:#2c4f67;font-weight:700;border-radius:7px;cursor:pointer}
.fixed-page-nav button:disabled{opacity:.35;cursor:default}
#quizScreen.active~*{}.quiz-floating{top:max(64px,calc(56px + env(safe-area-inset-top)));z-index:60;right:max(10px,env(safe-area-inset-right))}
body.app-nav-ready #quizScreen .quiz-header{padding-top:var(--quiz-controls-space,150px)}
#quizScreen .quiz-header{padding-bottom:12px}
body.app-nav-ready #counterWrap{top:max(62px,calc(56px + env(safe-area-inset-top)))}
body.app-nav-ready #counterWrap .counter{background:#fffdfb;color:#24343f}
body.app-nav-ready #counterWrap,.fixed-page-nav{right:max(10px,env(safe-area-inset-right),calc((100vw - var(--study-width))/2 + 10px))}
.app-menu-button{left:max(10px,env(safe-area-inset-left),calc((100vw - var(--study-width))/2 + 10px))}
.answerDock{left:50%;transform:translateX(-50%)}
.score-heatmap{display:grid;gap:6px}.heatmap-row{display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:4px;align-items:center;font-size:11px}
.heatmap-head{text-align:center;font-weight:700;font-size:10px;overflow-wrap:anywhere}
.heatmap-cell{padding:10px 1px;text-align:center;border-radius:5px;background:rgb(44 108 127 / var(--heat));font-size:11px;font-weight:700;color:#173244}
.heatmap-card{margin-top:16px}.category-score-item small{display:block;margin-top:6px;line-height:1.5}
.import-label{display:block;margin:15px 0;font-weight:700;font-size:14px}.import-label input{display:block;max-width:100%;margin-top:8px}
#localBackupSelect{width:100%;padding:10px;margin-top:10px;border:1px solid #a7bac5;border-radius:8px;background:var(--card);color:var(--text)}
#settingsScreen .section-pad>.card{margin-bottom:16px}
#localSaveNotice{bottom:16px;max-height:40vh;overflow-y:auto}
.bookmark-pill.active{background:#fff0bd;color:#75500a}
.sheet{background:var(--card)}.modal .sheetTop{background:var(--card)}
.nav-btn:focus-visible,.choice:focus-visible,button:focus-visible{outline:3px solid #e2aa41;outline-offset:2px}
html[data-color-mode="dark"] .heatmap-cell{background:rgb(82 164 196 / var(--heat));color:#f2f6ff}
html[data-color-mode="dark"] :is(.radar-card,.radar-legend-row,.miniBox,.reset-warning-note,.terms-check){background:#22262b!important;color:#eceff2!important;border-color:#485864!important}
html[data-color-mode="dark"] :is(.radar-label,.radar-percent){fill:#e5f3ff}
html[data-color-mode="dark"] .radar-legend-row :is(strong,small,span){color:#d4e1e9}
html[data-color-mode="dark"] .fixed-page-nav button{color:#eaf1f6}
html[data-color-mode="dark"] .score-comment{color:#d4e1e9}
html[data-color-mode="dark"] .sheet .tag{color:#111}
html[data-color-mode="dark"] .sheet .block p{color:inherit}
@media(min-width:600px){
 .home-wide{grid-column:auto}.home-progress-card,.footer-credit{grid-column:1/-1}
 #calcCategoryScreen .section-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 #calcCategoryScreen .section-pad>.small-note,#calcCategoryBackBtn{grid-column:1/-1}
 .quiz-floating{flex-direction:row}body.app-nav-ready #quizScreen .quiz-header{padding-top:var(--quiz-controls-space,126px)}
 #settingsScreen .section-pad{display:block}.heatmap-row{font-size:13px;grid-template-columns:85px repeat(5,minmax(0,1fr))}
}
@media(max-width:380px){.home-buttons{gap:8px;padding-inline:10px}.heatmap-row{grid-template-columns:58px repeat(5,minmax(0,1fr));font-size:10px}.heatmap-cell{font-size:10px}.fixed-page-nav button{padding:6px 7px}}
@media(max-height:500px){.quiz-floating{top:60px}body.app-nav-ready #quizScreen .quiz-header{padding-top:var(--quiz-controls-space,120px)}.hero-title{font-size:30px!important}}

/* Appearance controls belong to the heading, outside the study-menu grid. */
.hero-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hero-heading .hero-title{min-width:0;flex:1}
.hero-heading .hero-theme-toggle{flex:none;flex-direction:column;align-items:flex-end;gap:8px;margin-top:3px;color:#f3f7fb;font-size:11px;line-height:1.4;font-weight:700;white-space:nowrap}
.hero-theme-toggle input{border-color:#9ab3c4;background:#718a9b}
.appearance-settings .night-mode-toggle{width:100%;justify-content:space-between;margin:0}
.night-mode-toggle input{-webkit-appearance:none;appearance:none;flex-shrink:0}
.night-mode-toggle:has(input:focus-visible){outline:3px solid #e2aa41;outline-offset:5px;border-radius:4px}
.save-status{grid-column:1/-1;margin:8px 0;font-size:12px;line-height:1.6;color:#526771;overflow-wrap:anywhere}
.save-status[data-save-level="error"]{color:#a83b33;font-weight:700}
.save-status[data-save-level="success"]{color:#28634d}
#localBackupSelect,#importBackupFile{font-size:16px}

/* Use a scoped rule stronger than the legacy per-screen button palettes. */
html[data-color-mode="dark"] #appRoot :is(.big-btn,.action-btn,.category-mini-btn,.guide-btn,.setting-chip,.nav-btn,.pill,.jump-btn,.jump-filter-btn,.explain-jump-btn,.closeBtn,.zoomBtn){background:#303b47;background-image:none;color:#edf3f8;border-color:#657587;box-shadow:0 5px 14px #0002}
html[data-color-mode="dark"] #appRoot :is(.big-btn,.category-mini-btn){border:1px solid #506071}
html[data-color-mode="dark"] #appRoot :is(.big-btn.teal,.action-btn.teal,.category-mini-btn.main,.guide-btn.primary){background:#284e68;border-color:#608aa8;color:#eff7ff}
html[data-color-mode="dark"] #appRoot :is(.big-btn.green,.category-mini-btn.random){background:#284b41;border-color:#608e7c;color:#effbf5}
html[data-color-mode="dark"] #appRoot .big-btn.orange{background:#554129;border-color:#967449;color:#fff1d8}
html[data-color-mode="dark"] #appRoot :is(.big-btn.danger,.action-btn.danger){background:#6d333b;border-color:#b3777c;color:#fff0f1}
html[data-color-mode="dark"] #appRoot .category-mini-btn.score{background:#49432d;border-color:#8b8053;color:#fff0bd}
html[data-color-mode="dark"] #appRoot :is(.big-btn small,.category-mini-btn small){color:#c9d6e2}
html[data-color-mode="dark"] #appRoot :is(.setting-chip.active,.jump-filter-btn.active,.explain-jump-btn.active,.jump-btn.current,[data-score-tab][aria-selected="true"],[data-metric-mode][aria-pressed="true"]){background:#326d94;border:1px solid #8ec1e4;color:#fff}
html[data-color-mode="dark"] #appRoot .bookmark-pill.active{background:#514426;color:#ffe2a2;border-color:#bba06a}
html[data-color-mode="dark"] #appRoot :is(.counter,.mode-badge,.statusChip.pending,.statusChip.ghost){background:#303b47;color:#edf3f8;border-color:#607386}
html[data-color-mode="dark"] #appRoot :is(.choice,.choice.compact){background:#28343e;color:#f1f6fa;border:1px solid #566a7a}
html[data-color-mode="dark"] #appRoot :is(.choice.correct,.jump-btn.correct,.statusChip.ok){background:#193f30;color:#b4f2cf;border-color:#75cd9e}
html[data-color-mode="dark"] #appRoot :is(.choice.wrong,.jump-btn.wrong,.statusChip.ng){background:#492b2b;color:#ffd2cd;border-color:#e8958d}
html[data-color-mode="dark"] #appRoot :is(.jump-btn.review,.statusChip.revision){background:#4b4029;color:#ffe2a2;border-color:#bba06a}
html[data-color-mode="dark"] #appRoot :is(.small-note,.inlineHelp,.category-card-sub,.card p,.miniBox .tip,.footer-credit,.score-row,.heatmap-head,.category-score-item small){color:#c5d1db}
html[data-color-mode="dark"] #appRoot .figureSub{color:#53636d}
html[data-color-mode="dark"] #appRoot .save-status{color:#c5d1db}
html[data-color-mode="dark"] #appRoot .save-status[data-save-level="error"]{color:#ffb3b8}
html[data-color-mode="dark"] #appRoot .save-status[data-save-level="success"]{color:#a2e3c1}
html[data-color-mode="dark"] :is(.fixed-page-nav,.app-menu-button,.app-menu-close){background:#293540;border-color:#647587;color:#eef5fa}
html[data-color-mode="dark"] .fixed-page-nav button{background:#293540;color:#eef5fa}
html[data-color-mode="dark"] #appRoot :is(#fontPreviewCard,.formula,.inlineChoices .formulaWrap){background:#25303a;color:#dceaf5;border-color:#4f6376}
html[data-color-mode="dark"] #appRoot .big-btn::before{background:#739ab7}

/* Full text audit against the assistant-surveyor v2026.10.21-10 fixes. */
html[data-color-mode="light"]{--ok:#16563b;--ng:#a92d2b}
html[data-color-mode="light"] #appRoot :is(.small-note,.category-card-sub){color:#53656e}
html[data-color-mode="light"] #appRoot .category-score-item small{color:#53656e}
html[data-color-mode="light"] #appRoot .heatmap-cell{color:#07151f}
html[data-color-mode="light"] #appRoot :is(.choice.correct,.feedback.ok){background:#e8f7f1;color:#16563b;border-color:#378761}
html[data-color-mode="light"] #appRoot :is(.choice.wrong,.feedback.ng){background:#fdeeee;color:#a92d2b;border-color:#ba5551}
html[data-color-mode="light"] #appRoot :is(.radar-sub,.radar-legend-row small){color:#53656e}
html[data-color-mode="dark"] #appRoot .radar-sub{color:#c5d1db}
html[data-color-mode="dark"] #appRoot .radar-title{color:#edf3f7}
html[data-color-mode="dark"] #appRoot .heatmap-cell{background:rgb(82 164 196 / calc(var(--heat) * .6));color:#f2f6ff}
html[data-color-mode="dark"] #appRoot .guide-text{color:#d6e3ed}
html[data-color-mode="light"] #appRoot #openSalesInfoBtn small{color:#53656e}
html[data-color-mode="light"] #appRoot :is(#resumeYearBtn,#resumeCategoryBtn){background:#765332;color:#fff}
html[data-color-mode="light"] #appRoot :is(#resumeYearSub,#resumeCategorySub){color:#fff}
#modalBody .explainBlock{overflow-wrap:anywhere}
html[data-color-mode="light"] #modalBody :is(.hl-key,.important-keyword){color:#865000}
html[data-color-mode="light"] #modalBody :is(.hl-wrong,.wrong-keyword){color:#a92d2b}
html[data-color-mode="light"] #appRoot .statusChip.revision{background:#fff0cd;color:#66431d;border-color:#b99554}
html[data-color-mode="dark"] #appRoot .blankBox{background:#283f4d;color:#f0f7fc;border-color:#95bed4}
html[data-color-mode="dark"] #appRoot :is(.dockTitle,.jump-year-title,.jump-context){color:#d6e3ed}
html[data-color-mode="dark"] #appRoot .footer-credit{background:#27313b;color:#d6e3ed}
html[data-color-mode="dark"] #appRoot .footer-credit :is(b,a){color:#bce5ff}
html[data-color-mode="dark"] #appRoot .terms-check label{color:#eceff2!important}
html[data-color-mode="dark"] #appRoot .terms-check .sales-mini{color:#c5d1db}
html[data-color-mode="dark"] #appRoot #questionHtml [style*="color:"]{color:#eceff2!important}
html[data-color-mode="dark"] #appRoot #modalBody .tag{background:#354653;color:#f0f7fc}
html[data-color-mode="dark"] #appRoot #modalBody :is(.hl-key,.important-keyword){color:#ffdf9a}
html[data-color-mode="dark"] #appRoot #modalBody .hl-wrong{color:#ffa79e}
html[data-color-mode="dark"] #appRoot #modalBody .hl-correct{color:#8fe0b9}
html[data-color-mode="dark"] #appRoot #modalBody .hl-formula{color:#9bd8f5}
html[data-color-mode="dark"] #appRoot #modalBody .explainBlock:first-of-type .blockTitle{color:#8fe0b9}
html[data-color-mode="dark"] #appRoot #modalBody .block-correct .blockTitle{color:#8fe0b9}
html[data-color-mode="dark"] #appRoot #modalBody :is(.block-related,.block-key) .blockTitle{color:#ffdf9a}
html[data-color-mode="dark"] #appRoot #modalBody .block-warn .blockTitle{color:#ffa79e}
html[data-color-mode="dark"] #appRoot #modalBody .block-formula .blockTitle{color:#9bd8f5}
html[data-color-mode="dark"] .app-menu-links a:is(:hover,:focus-visible){background:#303943;color:#eaf1f6}
@media(prefers-reduced-motion:reduce){.progressFill,.night-mode-toggle input::before{transition:none}}
/* Keep scrolling text behind an opaque toolbar, rather than behind floating buttons. */
body.app-nav-ready::before{content:"";position:fixed;top:0;left:50%;transform:translateX(-50%);width:var(--study-width);height:var(--fixed-controls-height,0px);background:#2c4f67;z-index:59;pointer-events:none}
html[data-color-mode="dark"] body.app-nav-ready::before{background:#203d50}