:root {
  --navy: #12344d;
  --navy-2: #0b2639;
  --blue: #197ca5;
  --cyan: #42c3c8;
  --cream: #f5f1e7;
  --paper: #ffffff;
  --ink: #18313e;
  --muted: #6d7f88;
  --green: #21a66b;
  --red: #d84936;
  --orange: #ef7d32;
  --yellow: #f4c54a;
  --line: #dbe3e7;
  --shadow: 0 14px 34px rgba(16, 50, 70, .12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 90% -10%, rgba(66,195,200,.25), transparent 34%),
    linear-gradient(180deg, #edf6f7 0, var(--cream) 300px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, select { font: inherit; }
button { touch-action: manipulation; }
a { color: inherit; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 18px 8px;
}
.app-header h1 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.08;
  letter-spacing: .02em;
}
.app-header h1 span { color: var(--blue); }
.eyebrow, .card-label {
  margin: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px calc(100px + var(--safe-bottom));
}
.screen { display: none; animation: enter .22s ease; }
.screen.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }

.icon-button {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(18,52,77,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 7px 22px rgba(16,50,70,.08);
  cursor: pointer;
}
.icon-button.dark { color: white; background: var(--navy); }

.countdown-card, .boiler-card, .settings-card, .law-status-card, .mastery-section, .result-card {
  border: 1px solid rgba(18,52,77,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}
.countdown-card { padding: 18px; margin: 8px 0 14px; }
.countdown-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.countdown-card h2 { margin: 5px 0 2px; font-size: 20px; }
.countdown-card p { margin-top: 4px; }
.countdown-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 84px;
  padding: 10px 12px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(145deg, var(--blue), var(--navy));
}
.countdown-badge strong { font-size: 34px; line-height: 1; }
.countdown-badge span { margin-left: 3px; font-weight: 800; }
.application-status {
  margin: 15px 0 5px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #6c4a03;
  background: #fff4cc;
  font-size: 13px;
  font-weight: 800;
}
.text-button {
  padding: 8px 0 2px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.boiler-card { padding: 17px; }
.boiler-card-head, .section-heading, .page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.boiler-card h2, .section-heading h2, .page-title h2 { margin: 4px 0 0; font-size: 21px; }
.stage-badge, .subject-chip, .difficulty-chip {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.stage-badge { color: white; background: var(--orange); }
.boiler-scene { overflow: hidden; margin: 14px 0; border-radius: 20px; }
.boiler-scene svg { display: block; width: 100%; height: auto; }
.scene-item { opacity: 0; transform-origin: center; transition: opacity .6s ease, transform .6s ease; transform: scale(.96); }
.boiler-scene.stage-1 .stage-1,
.boiler-scene.stage-2 .stage-1, .boiler-scene.stage-2 .stage-2,
.boiler-scene.stage-3 .stage-1, .boiler-scene.stage-3 .stage-2, .boiler-scene.stage-3 .stage-3,
.boiler-scene.stage-4 .stage-1, .boiler-scene.stage-4 .stage-2, .boiler-scene.stage-4 .stage-3, .boiler-scene.stage-4 .stage-4,
.boiler-scene.stage-5 .scene-item { opacity: 1; transform: scale(1); }
.progress-copy { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.progress-copy strong { color: var(--navy); }
.progress-track, .quiz-progress {
  overflow: hidden;
  height: 9px;
  margin-top: 8px;
  border-radius: 999px;
  background: #e5ecef;
}
.progress-track span, .quiz-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .5s ease;
}

.primary-button, .secondary-button, .danger-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  font-weight: 900;
  cursor: pointer;
}
.primary-button {
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  box-shadow: 0 10px 24px rgba(25,124,165,.22);
}
.secondary-button { border: 2px solid #c9d7de; color: var(--navy); background: white; }
.danger-button { margin-top: 14px; border: 1px solid #f0b5ac; color: var(--red); background: #fff7f5; }
.hero-button { flex-direction: column; margin: 15px 0; min-height: 72px; font-size: 18px; }
.hero-button small { margin-top: 3px; opacity: .78; font-size: 11px; font-weight: 600; }

.stat-grid, .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 15px; }
.stat-grid article, .info-grid article {
  display: flex;
  flex-direction: column;
  padding: 13px 7px;
  border: 1px solid rgba(18,52,77,.08);
  border-radius: 17px;
  background: rgba(255,255,255,.8);
  text-align: center;
}
.stat-grid strong { color: var(--navy); font-size: 23px; }
.stat-grid span, .info-grid span, .info-grid small { color: var(--muted); font-size: 10px; }
.mastery-section { padding: 17px; }
.subject-list { display: grid; gap: 13px; margin-top: 16px; }
.mastery-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.mastery-status-summary span {
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--muted);
  background: #edf5f6;
  font-size: 11px;
}
.mastery-status-summary strong { color: var(--navy); }

.subject-row {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 10px;
  align-items: center;
}
.subject-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #edf5f6; font-size: 20px; }
.subject-row h3 { margin: 0 0 6px; font-size: 14px; }
.subject-bar { overflow: hidden; height: 8px; border-radius: 99px; background: #e4eaed; }
.subject-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), var(--green)); }
.subject-percent { font-size: 13px; font-weight: 900; text-align: right; }

.bottom-nav {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 720px;
  margin: auto;
  padding: 7px 6px calc(7px + var(--safe-bottom));
  border-top: 1px solid rgba(18,52,77,.1);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(17px);
}
.header-actions { display: flex; gap: 8px; align-items: center; }

.nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 0;
  padding: 5px 1px;
  border: 0;
  color: #71828b;
  background: transparent;
}
.nav-item span { font-size: 21px; line-height: 1; }
.nav-item small { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.nav-item.active { color: var(--blue); }

.quiz-screen { padding-top: 3px; }
.quiz-header { display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
.quiz-progress-wrap { flex: 1; }
.quiz-progress-copy { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: 12px; font-weight: 800; }
.question-card {
  min-height: 440px;
  padding: 20px 16px;
  border-radius: 25px;
  background: white;
  box-shadow: var(--shadow);
}
.question-meta { display: flex; justify-content: space-between; }
.subject-chip { color: white; background: var(--blue); }
.difficulty-chip { color: #704b00; background: #fff0b9; }
.recent-history-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 11px;
  border: 1px solid #dce6ea;
  border-radius: 14px;
  background: #f5f9fa;
}
.history-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.history-marks { display: flex; gap: 6px; }
.history-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 2px solid #cbd8de;
  border-radius: 50%;
  color: #99a9b1;
  background: white;
  font-size: 17px;
  font-weight: 900;
}
.history-mark.correct { border-color: var(--green); color: var(--green); }
.history-mark.wrong {
  border-color: var(--red);
  border-radius: 8px;
  color: var(--red);
}
.history-mark.review {
  border-color: var(--orange);
  border-radius: 50%;
  color: var(--orange);
}
.history-legend {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 9px;
}
.learning-status {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue);
  background: #e1f3f5;
  font-size: 10px;
  font-weight: 900;
}
.learning-status.cooling { color: #326443; background: #dcf6e7; }
.learning-status.review { color: #8b5600; background: #fff0c8; }

.question-card h2 { margin: 18px 2px; font-size: clamp(18px, 4.8vw, 24px); line-height: 1.55; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.answer-options { display: grid; gap: 11px; }
.answer-button {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 58px;
  padding: 14px;
  border: 2px solid #dce5e9;
  border-radius: 16px;
  color: var(--ink);
  background: white;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.answer-button .option-letter {
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  height: 27px;
  border-radius: 9px;
  color: white;
  background: #7b909b;
  font-size: 13px;
  font-weight: 900;
}
.answer-button:disabled { cursor: default; opacity: .78; }
.answer-button.correct { border-color: #5ec38e; background: #edfff4; }
.answer-button.correct .option-letter { background: var(--green); }
.answer-button.wrong { border-color: #ec8e80; background: #fff1ef; }
.answer-button.wrong .option-letter { background: var(--red); }

.feedback-panel {
  display: none;
  margin-top: 14px;
  padding: 17px;
  border-radius: 23px;
  background: white;
  box-shadow: var(--shadow);
}
.feedback-panel.show { display: grid; grid-template-columns: 58px 1fr; gap: 12px; animation: enter .22s ease; }
.result-symbol {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 5px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 34px;
  font-weight: 900;
}
.feedback-panel.wrong .result-symbol { border-color: var(--red); color: var(--red); }
.feedback-panel h3 { margin: 2px 0 7px; font-size: 20px; }
.feedback-panel p { margin: 0 0 8px; line-height: 1.65; }
.mnemonic { padding: 9px 11px; border-radius: 11px; background: #fff5d6; font-size: 13px; font-weight: 800; }
.mastery-notice {
  margin: 9px 0;
  padding: 11px 12px;
  border-left: 5px solid var(--green);
  border-radius: 11px;
  color: #275d3d;
  background: #e9f9f0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}
.mastery-notice.review {
  border-left-color: var(--orange);
  color: #7b4c00;
  background: #fff3ce;
}

.source-link { color: var(--blue); font-size: 11px; }
.feedback-actions { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 9px; margin-top: 5px; }

.ox-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  background: rgba(7, 27, 39, .14);
  opacity: 0;
  pointer-events: none;
}
.ox-overlay.show { visibility: visible; animation: oxFade .65s ease; }
.ox-overlay span {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border: 16px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  background: rgba(255,255,255,.93);
  box-shadow: 0 20px 70px rgba(0,0,0,.2);
  font-size: 105px;
  font-weight: 900;
}
.ox-overlay.wrong span { border-color: var(--red); color: var(--red); border-radius: 28px; }
@keyframes oxFade { 0% { opacity: 0; transform: scale(.75); } 20%, 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }

.result-card { padding: 28px 20px; text-align: center; }
.result-card h2 { margin: 7px 0; }
.result-medal { font-size: 62px; }
.result-score-ring {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border: 15px solid #e5edf0;
  border-top-color: var(--cyan);
  border-right-color: var(--blue);
  border-radius: 50%;
}
.result-score-ring strong { font-size: 34px; }
.advance-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
  padding: 14px 17px;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--orange), #dc562c);
}
.advance-box strong { font-size: 25px; }
.result-card .secondary-button { margin-top: 10px; }

.page-title { display: block; margin: 4px 3px 16px; }
.page-title p:last-child { color: var(--muted); line-height: 1.6; }
.map-legend { display: flex; justify-content: space-between; margin: 8px 4px; font-size: 13px; }
.sugoroku-map {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  padding: 10px;
  border-radius: 20px;
  background: #17394e;
  box-shadow: var(--shadow);
}
.map-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  color: #6f838d;
  background: #eaf0f2;
  font-size: 9px;
  font-weight: 800;
}
.map-cell.done { color: white; background: var(--green); }
.map-cell.current { color: white; background: var(--orange); outline: 3px solid #ffe499; transform: scale(1.08); }
.map-cell.milestone::after { content: "★"; position: absolute; top: -5px; right: -3px; color: #ffce4c; font-size: 13px; }
.milestone-list { display: grid; gap: 9px; margin-top: 14px; }
.milestone-list article { display: flex; justify-content: space-between; padding: 13px; border-radius: 14px; background: white; }
.milestone-list span { color: var(--blue); font-weight: 900; }

.settings-card { padding: 18px; margin-bottom: 14px; }
.settings-card label { display: block; margin: 10px 0 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
select {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 2px solid #dce5e9;
  border-radius: 14px;
  color: var(--ink);
  background: white;
}
.deadline-list { display: grid; gap: 8px; margin-top: 16px; }
.deadline-list div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.deadline-list span { color: var(--muted); font-size: 12px; }
.deadline-list strong { text-align: right; font-size: 13px; }
.notice { color: #825900; background: #fff3c6; padding: 11px; border-radius: 12px; font-size: 11px; line-height: 1.55; }
.info-grid { grid-template-columns: repeat(2, 1fr); }
.info-grid strong { margin: 3px 0; color: var(--navy); font-size: 20px; }
.official-links { display: grid; gap: 8px; margin-top: 14px; }
.official-links a { padding: 12px; border-radius: 12px; color: var(--blue); background: #edf7f8; font-size: 13px; font-weight: 800; text-decoration: none; }
.law-status-card { padding: 16px; background: #eaf9f1; }
.law-status-card > div { display: flex; gap: 8px; align-items: center; }
.law-status-card p { margin-bottom: 0; color: #3d6551; font-size: 12px; line-height: 1.6; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(33,166,107,.12); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row div { display: flex; flex-direction: column; }
.setting-row span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.switch input { display: none; }
.switch span { position: relative; display: block; width: 48px; height: 28px; border-radius: 99px; background: #c8d2d7; transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
.wide { margin-top: 10px; }
.version { color: var(--muted); font-size: 11px; text-align: center; }

body.dark {
  --cream: #081b28;
  --paper: #102b3a;
  --ink: #eaf3f5;
  --muted: #a6b7bf;
  --line: #294452;
  background: #081b28;
}
body.dark .app-header h1 { color: #eef8fa; }
body.dark .countdown-card,
body.dark .boiler-card,
body.dark .settings-card,
body.dark .mastery-section,
body.dark .result-card,
body.dark .question-card,
body.dark .feedback-panel,
body.dark .stat-grid article,
body.dark .info-grid article,
body.dark .milestone-list article { background: #102b3a; border-color: #294452; }
body.dark .bottom-nav { background: rgba(11,35,49,.96); border-color: #294452; }
body.dark .answer-button, body.dark select, body.dark .secondary-button { color: var(--ink); background: #133444; border-color: #355362; }
body.dark .icon-button { color: white; background: #133444; }
body.dark .subject-icon { background: #17394a; }
body.dark .recent-history-panel,
body.dark .mastery-status-summary span { background: #17394a; border-color: #355362; }
body.dark .history-mark { background: #102b3a; }
body.dark .mastery-status-summary strong { color: #eaf3f5; }

@media (min-width: 650px) {
  main { padding-inline: 24px; }
  .app-header { padding-inline: 28px; }
  .home-layout { display: grid; grid-template-columns: 1fr 1fr; }
}


/* Ver1.2 account, formulas and diagrams */
.account-mini-card {
  display:flex; align-items:center; width:100%; gap:12px; margin:0 0 14px; padding:13px 15px;
  border:1px solid rgba(18,52,77,.08); border-radius:17px; color:var(--ink); background:rgba(255,255,255,.86);
  box-shadow:0 8px 22px rgba(16,50,70,.08); text-align:left; cursor:pointer;
}
.account-mini-icon {display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:13px; color:white; background:linear-gradient(145deg,var(--cyan),var(--blue)); font-size:21px;}
.account-mini-card > span:nth-child(2){display:flex; flex:1; min-width:0; flex-direction:column;}
.account-mini-card small{margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4;}
.account-mini-arrow{font-size:26px; color:var(--blue);}
.learning-shortcuts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.learning-shortcut,.material-hero{border:0; color:white; cursor:pointer; text-align:left; box-shadow:var(--shadow);}
.learning-shortcut{display:flex; align-items:center; gap:10px; min-height:76px; padding:13px; border-radius:19px;}
.learning-shortcut.formula,.material-hero.formula{background:linear-gradient(135deg,#5063b7,#26386f);}
.learning-shortcut.diagram,.material-hero.diagram{background:linear-gradient(135deg,#1d9b78,#12604d);}
.shortcut-icon{display:grid; place-items:center; flex:0 0 39px; height:39px; border-radius:12px; background:rgba(255,255,255,.17); font-size:22px; font-weight:900;}
.learning-shortcut span:last-child{display:flex; min-width:0; flex-direction:column;}
.learning-shortcut strong{font-size:14px;}.learning-shortcut small{margin-top:3px; opacity:.8; font-size:9px;}
.material-hero{display:grid; grid-template-columns:58px 1fr 20px; gap:13px; align-items:center; width:100%; min-height:104px; margin-bottom:13px; padding:18px; border-radius:23px;}
.material-hero-icon{display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.16); font-size:30px; font-weight:900;}
.material-hero span:nth-child(2){display:flex; flex-direction:column}.material-hero strong{font-size:18px}.material-hero small{margin-top:5px; opacity:.82}.material-hero b{font-size:30px;}
.study-tip-card{padding:17px; border-radius:20px; background:#fff7d9; color:#684b08; line-height:1.65}.study-tip-card p{margin-bottom:0;font-size:13px;}
.formula-toolbar{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-bottom:13px; padding:12px; border-radius:17px; background:rgba(255,255,255,.82);}
.formula-toolbar label{color:var(--muted);font-size:12px;font-weight:800}.formula-toolbar select{min-height:42px}.formula-toolbar span{font-size:11px;font-weight:900;color:var(--blue);}
.formula-list{display:grid;gap:13px}.formula-card{overflow:hidden;border:1px solid rgba(18,52,77,.09);border-radius:22px;background:white;box-shadow:var(--shadow)}
.formula-card-head{display:grid;grid-template-columns:45px 1fr auto;gap:11px;align-items:center;padding:16px;}
.formula-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;color:white;background:linear-gradient(145deg,var(--blue),var(--navy));font-weight:900;}
.formula-card-head h3{margin:0 0 3px;font-size:17px}.formula-card-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.formula-score{font-size:11px;color:var(--green);font-weight:900;}
.formula-equation{margin:0 16px 14px;padding:16px 10px;border-radius:15px;color:#173b4c;background:#edf8fa;font-size:clamp(17px,5vw,24px);font-weight:900;text-align:center;line-height:1.5;}
.formula-toggle{width:calc(100% - 32px);margin:0 16px 14px;min-height:44px;border:1px solid #cbdde4;border-radius:13px;color:var(--blue);background:white;font-weight:900;}
.formula-detail{padding:0 16px 17px}.formula-detail[hidden]{display:none}.symbol-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.symbol-list span{padding:7px 9px;border-radius:10px;background:#f0f3f4;font-size:10px;}
.memory-box,.example-box{padding:11px 12px;border-radius:12px;line-height:1.55;font-size:12px}.memory-box{background:#fff3c7;color:#735000}.example-box{margin-top:10px;background:#eef8f2;color:#286447}.formula-steps{margin:12px 0;padding-left:23px;font-size:12px;line-height:1.7}.formula-mini{margin-top:13px;padding:13px;border-radius:16px;background:#f2f6f8}.formula-mini h4{margin:0 0 9px;font-size:13px}.mini-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mini-option{min-height:42px;border:1px solid #cbd9df;border-radius:11px;background:white;font-weight:800}.mini-option.correct{border-color:var(--green);background:#eafff2}.mini-option.wrong{border-color:var(--red);background:#fff0ed}.mini-feedback{margin:9px 0 0;font-size:11px;font-weight:800;line-height:1.5}.mini-feedback.ok{color:var(--green)}.mini-feedback.ng{color:var(--red)}
.diagram-selector{display:flex;gap:8px;overflow:auto;padding:2px 2px 10px;scrollbar-width:none}.diagram-selector::-webkit-scrollbar{display:none}.diagram-select-button{flex:0 0 auto;padding:10px 13px;border:1px solid #ccdbe1;border-radius:999px;color:var(--navy);background:white;font-size:12px;font-weight:900}.diagram-select-button.active{color:white;border-color:var(--blue);background:var(--blue)}
.diagram-card,.diagram-quiz-card{padding:14px;border-radius:22px;background:white;box-shadow:var(--shadow)}.diagram-canvas{overflow:hidden;border-radius:18px;background:#102f42}.diagram-canvas svg{display:block;width:100%;height:auto}.diagram-caption{margin:8px 2px 11px;color:var(--muted);font-size:10px}.diagram-hotspot{cursor:pointer;transition:filter .2s,opacity .2s}.diagram-hotspot:hover,.diagram-hotspot.active{filter:drop-shadow(0 0 8px #ffe36a);opacity:1}.diagram-part-buttons{display:flex;gap:7px;overflow:auto;padding-bottom:10px}.diagram-part-button{flex:0 0 auto;padding:8px 10px;border:1px solid #cddbe1;border-radius:11px;background:#f8fbfc;font-size:11px;font-weight:800}.diagram-part-button.active{color:white;background:var(--orange);border-color:var(--orange)}
.diagram-part-panel{min-height:112px;padding:14px;border-radius:16px;background:#eef6f7}.diagram-part-panel h3{margin:0 0 7px}.diagram-part-panel p{margin:5px 0;font-size:12px;line-height:1.55}.diagram-part-panel .exam-point{padding:8px 10px;border-radius:10px;background:#fff2c7;color:#725000}.tap-hint{color:var(--muted);font-size:12px}.diagram-quiz-card{margin-top:13px}.diagram-quiz-card h3{margin:0 0 8px}.diagram-quiz-options{display:grid;gap:7px}.diagram-quiz-option{min-height:45px;padding:9px;border:1px solid #cbd9df;border-radius:12px;background:white;text-align:left;font-weight:800}.diagram-quiz-option.correct{background:#eafff2;border-color:var(--green)}.diagram-quiz-option.wrong{background:#fff0ed;border-color:var(--red)}
.account-card,.account-notice{padding:18px;border-radius:22px;background:white;box-shadow:var(--shadow)}.account-notice{margin-bottom:13px;background:#fff1d4;color:#6f4d08}.account-notice p{margin-bottom:0;font-size:12px;line-height:1.6}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:16px;padding:4px;border-radius:14px;background:#eef2f4}.auth-tab{min-height:42px;border:0;border-radius:11px;color:var(--muted);background:transparent;font-weight:900}.auth-tab.active{color:var(--navy);background:white;box-shadow:0 4px 12px rgba(16,50,70,.08)}.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:800}.auth-form input{width:100%;min-height:49px;padding:0 12px;border:2px solid #dce5e9;border-radius:13px;font:inherit}.auth-form small{color:var(--muted);font-size:10px}.form-message{margin-top:12px;padding:11px;border-radius:12px;font-size:12px;font-weight:800}.form-message.error{color:#8a2b20;background:#fff0ed}.form-message.ok{color:#176a46;background:#eafff2}.local-data-note{margin:15px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.profile-row{display:flex;gap:12px;align-items:center}.profile-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;color:white;background:linear-gradient(145deg,var(--blue),var(--navy));font-size:22px;font-weight:900}.profile-row div:last-child{display:flex;flex-direction:column}.profile-row span{margin-top:3px;color:var(--muted);font-size:11px}.sync-status-box{display:flex;gap:12px;align-items:center;margin:17px 0;padding:13px;border-radius:15px;background:#eff6f7}.sync-status-box div{display:flex;flex-direction:column}.sync-status-box small{margin-top:3px;color:var(--muted)}.sync-dot{width:13px;height:13px;border-radius:50%;background:#a6b3b9;box-shadow:0 0 0 5px rgba(166,179,185,.14)}.sync-dot.ok{background:var(--green);box-shadow:0 0 0 5px rgba(33,166,107,.13)}.sync-dot.busy{background:var(--yellow);box-shadow:0 0 0 5px rgba(244,197,74,.17)}.sync-dot.error{background:var(--red);box-shadow:0 0 0 5px rgba(216,73,54,.13)}
body.dark .account-mini-card,body.dark .formula-card,body.dark .diagram-card,body.dark .diagram-quiz-card,body.dark .account-card,body.dark .formula-toolbar{background:#102b3a;border-color:#294452}body.dark .formula-equation,body.dark .diagram-part-panel{background:#17394a;color:#eaf3f5}body.dark .formula-toggle,body.dark .mini-option,body.dark .diagram-select-button,body.dark .diagram-part-button,body.dark .diagram-quiz-option,body.dark .auth-form input{color:var(--ink);background:#133444;border-color:#355362}body.dark .symbol-list span,body.dark .formula-mini,body.dark .sync-status-box,body.dark .auth-tabs{background:#17394a}body.dark .auth-tab.active{color:white;background:#244b5e}
@media(max-width:390px){.learning-shortcuts{grid-template-columns:1fr}.formula-toolbar{grid-template-columns:auto 1fr}.formula-toolbar span{grid-column:1/-1;text-align:right}.mini-options{grid-template-columns:1fr}}

@media(max-width:390px){.bottom-nav{padding-inline:2px}.nav-item span{font-size:20px}.nav-item small{font-size:8.5px}.header-actions{gap:6px}.header-actions .icon-button{width:42px;height:42px}}


/* ===== Ver1.3: settings visibility, mock exam, app icon ===== */
.header-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 184px; }
.header-version {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #ef5a48, #c92f35);
  box-shadow: 0 7px 17px rgba(201,47,53,.20);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
}
.icon-button.compact { width: 42px; height: 42px; }
.settings-button {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 4px;
  color: var(--navy);
  font-size: 20px;
}
.settings-button small {
  display: block;
  margin-top: -5px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
}

.mock-home-button {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 80px;
  margin: 0 0 15px;
  padding: 14px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  color: #172f40;
  background: linear-gradient(135deg,#fff 0%,#edf6ff 58%,#e2f0fb 100%);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}
.mock-home-button::after {
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-64px;
  bottom:-78px;
  border-radius:50%;
  background:rgba(25,124,165,.12);
}
.mock-home-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  color:white;
  background:linear-gradient(145deg,#4168c3,#26376d);
  font-size:27px;
}
.mock-home-button span:nth-child(2) { display:flex; min-width:0; flex-direction:column; }
.mock-home-button strong { font-size:16px; }
.mock-home-button small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.new-badge {
  position:relative;
  z-index:1;
  padding:5px 7px;
  border-radius:999px;
  color:white;
  background:var(--red);
  font-size:9px;
  font-weight:900;
}

.material-hero.mock { background:linear-gradient(135deg,#4068bf,#24386f); }

.mock-intro-card,.mock-history-card,.mock-result-card {
  border:1px solid rgba(18,52,77,.08);
  border-radius:24px;
  background:white;
  box-shadow:var(--shadow);
}
.mock-intro-card { padding:18px; }
.mock-intro-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.mock-intro-head div { display:flex; flex-direction:column; }
.mock-intro-head strong { font-size:18px; }
.mock-intro-head small { margin-top:3px; color:var(--muted); }
.mock-paper-icon {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:17px;
  color:white;
  background:linear-gradient(145deg,#4368c1,#25356b);
  font-size:30px;
}
.mock-rule-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.mock-rule-grid div {
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:14px;
  background:#f0f6f8;
}
.mock-rule-grid span { color:var(--muted); font-size:10px; }
.mock-rule-grid strong { margin-top:3px; color:var(--navy); font-size:17px; }
.mock-notes {
  margin:0 0 16px;
  padding:13px 13px 13px 31px;
  border-radius:14px;
  color:#5c4a13;
  background:#fff6d8;
  font-size:12px;
  line-height:1.7;
}
.text-danger-button {
  display:block;
  width:100%;
  margin-top:10px;
  padding:10px;
  border:0;
  color:var(--red);
  background:transparent;
  font-weight:800;
}
.mock-history-card { margin-top:14px; padding:16px; }
.mock-history-card h3 { margin:0 0 12px; }
.mock-history-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mock-history-grid div { display:flex; flex-direction:column; padding:11px 6px; border-radius:13px; background:#f2f6f8; text-align:center; }
.mock-history-grid span { color:var(--muted); font-size:9px; }
.mock-history-grid strong { margin-top:3px; font-size:14px; }

.mock-quiz-topbar {
  display:grid;
  grid-template-columns:46px 1fr 1fr;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.mock-timer-block,.mock-answer-count {
  display:flex;
  flex-direction:column;
  padding:8px 10px;
  border-radius:13px;
  background:white;
  box-shadow:0 5px 16px rgba(16,50,70,.08);
}
.mock-timer-block span,.mock-answer-count span { color:var(--muted); font-size:9px; }
.mock-timer-block strong { color:var(--red); font-size:17px; letter-spacing:.04em; }
.mock-answer-count strong { color:var(--navy); font-size:15px; }
.mock-question-card { min-height:410px; }
.mock-navigation-buttons { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.mock-palette-card {
  margin-top:12px;
  padding:13px;
  border-radius:17px;
  background:white;
  box-shadow:var(--shadow);
}
.mock-palette-card summary { color:var(--blue); font-size:13px; font-weight:900; cursor:pointer; }
.mock-question-palette {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
  margin-top:12px;
}
.mock-palette-button {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border:1px solid #cad9e0;
  border-radius:8px;
  color:var(--muted);
  background:#f6fafb;
  font-size:10px;
  font-weight:900;
}
.mock-palette-button.answered { color:white; border-color:var(--green); background:var(--green); }
.mock-palette-button.current { outline:3px solid #f5c854; transform:scale(1.05); }
.finish-mock-button {
  width:100%;
  min-height:52px;
  margin-top:13px;
  border:2px solid #d45142;
  border-radius:16px;
  color:#a83328;
  background:#fff5f3;
  font-weight:900;
}

.mock-result-card { padding:24px 18px; text-align:center; }
.mock-result-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:48px;
  margin:8px 0 4px;
  padding:8px 18px;
  border-radius:999px;
  color:white;
  background:var(--green);
  box-shadow:0 9px 22px rgba(33,166,107,.22);
  font-size:24px;
  font-weight:900;
}
.mock-result-badge.fail { background:var(--red); box-shadow:0 9px 22px rgba(216,73,54,.2); }
.mock-total-score {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  margin:16px 0 8px;
}
.mock-total-score strong { color:var(--navy); font-size:36px; }
.mock-total-score span { color:var(--blue); font-size:22px; font-weight:900; }
.mock-pass-reason { margin:0 0 14px; color:var(--muted); line-height:1.6; }
.mock-subject-results { display:grid; gap:8px; margin:12px 0 18px; text-align:left; }
.mock-subject-result {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border-radius:13px;
  background:#f0f5f7;
}
.mock-subject-result strong { min-width:50px; text-align:right; }
.mock-subject-result b { padding:4px 7px; border-radius:999px; color:white; background:var(--green); font-size:10px; }
.mock-subject-result b.fail { background:var(--red); }
.mock-wrong-section { text-align:left; }
.mock-wrong-section h3 { margin:0 0 10px; }
.mock-wrong-list { display:grid; gap:8px; max-height:460px; overflow:auto; }
.mock-wrong-item { padding:11px 12px; border-radius:13px; background:#fff3ef; }
.mock-wrong-item summary { color:#82392e; font-size:12px; font-weight:900; cursor:pointer; }
.mock-wrong-item p { margin:8px 0 0; color:#5f514e; font-size:11px; line-height:1.6; }
.mock-wrong-item .correct-answer { color:var(--green); font-weight:900; }

.settings-title-row { display:flex; align-items:center; justify-content:space-between; }
.page-version-badge {
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  color:white;
  background:linear-gradient(135deg,#ef5b48,#c92f35);
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(201,47,53,.2);
}
.version-card {
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
  padding:15px;
  border-radius:22px;
  color:white;
  background:linear-gradient(135deg,#12344d,#176d91);
  box-shadow:var(--shadow);
}
.version-card img { width:78px; height:78px; border-radius:19px; box-shadow:0 8px 19px rgba(0,0,0,.22); }
.version-card div { display:flex; flex-direction:column; }
.version-card span { opacity:.75; font-size:10px; }
.version-card strong { margin:2px 0 4px; font-size:28px; }
.version-card small { opacity:.86; font-size:10px; line-height:1.5; }
.settings-section-title { margin:0 0 5px; color:var(--blue); font-size:13px; }
.settings-link-button {
  display:grid;
  grid-template-columns:38px 1fr 18px;
  gap:10px;
  align-items:center;
  width:100%;
  padding:13px 0;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  background:transparent;
  text-align:left;
}
.settings-link-button:last-child { border-bottom:0; }
.settings-link-button > span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#edf5f7; font-size:20px; }
.settings-link-button div { display:flex; flex-direction:column; }
.settings-link-button small { margin-top:3px; color:var(--muted); font-size:10px; }
.settings-link-button b { color:var(--blue); font-size:22px; }
.home-icon-card {
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  padding:15px;
  border-radius:21px;
  background:#fff7dc;
  box-shadow:var(--shadow);
}
.home-icon-card img { width:76px; height:76px; border-radius:18px; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.home-icon-card strong { color:#634b09; }
.home-icon-card p { margin:5px 0 0; color:#6d5e32; font-size:11px; line-height:1.55; }
.update-button { margin-top:10px; border-color:#75bdd5; color:var(--blue); }
.version-large { margin:20px 0 5px; color:var(--muted); font-size:13px; text-align:center; }
.version-large strong { color:var(--red); font-size:17px; }

.settings-nav { color:var(--blue); }

body.dark .mock-home-button,
body.dark .mock-intro-card,
body.dark .mock-history-card,
body.dark .mock-palette-card,
body.dark .mock-result-card,
body.dark .mock-timer-block,
body.dark .mock-answer-count,
body.dark .version-card,
body.dark .settings-link-button { color:var(--ink); background:#102b3a; border-color:#294452; }
body.dark .mock-rule-grid div,
body.dark .mock-history-grid div,
body.dark .mock-subject-result { background:#17394a; }
body.dark .home-icon-card { background:#493d18; }
body.dark .home-icon-card strong, body.dark .home-icon-card p { color:#f4e4ad; }
body.dark .settings-link-button > span { background:#17394a; }

@media (max-width: 430px) {
  .app-header { align-items:flex-start; }
  .app-header h1 { font-size:25px; }
  .header-actions { max-width:138px; gap:5px; }
  .header-version { order:3; margin-left:auto; }
  .settings-button { width:44px; height:44px; }
  .mock-question-palette { grid-template-columns:repeat(5,1fr); }
  .mock-total-score strong { font-size:31px; }
}

.mock-answer-button.selected {
  border-color: var(--blue);
  background: #e8f5fb;
  box-shadow: inset 0 0 0 1px var(--blue);
}
.mock-answer-button.selected .option-letter { background: var(--blue); }
.mock-all-correct { padding:14px; border-radius:13px; color:#176a46; background:#eafff2; text-align:center; font-weight:900; }

.review-summary-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:-6px 0 15px;
}
.review-summary-grid article {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 13px;
  border:1px solid rgba(18,52,77,.08);
  border-radius:15px;
  background:rgba(255,255,255,.82);
}
.review-summary-grid span { color:var(--muted); font-size:11px; }
.review-summary-grid strong { color:var(--navy); font-size:16px; }
body.dark .review-summary-grid article { background:#102b3a; border-color:#294452; }


/* ===== Ver1.3.1: reliable iPhone icon and single version label ===== */
.app-icon-preview {
  position: relative;
  display: grid;
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 19px;
  color: #fff;
  background-color: #0d4263;
  background-image: url('/apple-touch-icon-v131.png');
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 19px rgba(0,0,0,.22);
  isolation: isolate;
}
.app-icon-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg,#1a719c,#0a2e48);
}
.app-icon-preview .fallback-cloud { position:absolute; top:6px; left:7px; font-size:16px; opacity:.9; }
.app-icon-preview .fallback-gauge { position:absolute; top:5px; right:7px; font-size:19px; }
.app-icon-preview b { margin-top:6px; font-size:17px; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.app-icon-preview small { position:absolute; right:4px; bottom:5px; left:4px; padding:2px 1px; border-radius:6px; color:#fff; background:#c3262d; font-size:8px; font-weight:900; line-height:1.1; text-align:center; }
.version-card .app-icon-preview,
.home-icon-card .app-icon-preview { flex-shrink:0; }
.header-actions { margin-left:auto; }

.app-icon-preview > img { position:absolute; inset:0; z-index:3; width:100%; height:100%; object-fit:cover; border-radius:inherit; }


/* ===== Ver1.4: single version, inline icon, boiler-room development ===== */
.header-version, .page-version-badge, .version-large { display:none !important; }
.single-version-card { display:block; grid-template-columns:1fr; padding:17px 20px; }
.single-version-card > div { display:flex; flex-direction:column; }
.single-version-card strong { font-size:30px; }
.inline-app-icon { display:block; flex:0 0 82px; width:82px; height:82px; border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.home-icon-card { grid-template-columns:82px 1fr; }
.unlock-notice { display:flex; flex-direction:column; gap:4px; margin:0 0 12px; padding:13px 15px; border-radius:15px; color:#604100; background:linear-gradient(135deg,#fff2ae,#ffd766); text-align:left; }
.unlock-notice strong { font-size:13px; }
.unlock-notice span { font-size:12px; font-weight:900; }
.growth-rank-card { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:19px; border-radius:24px; color:white; background:linear-gradient(135deg,#12344d,#197ca5); box-shadow:var(--shadow); }
.growth-rank-card > div:first-child { display:flex; min-width:0; flex-direction:column; }
.growth-rank-card > div:first-child span { opacity:.7; font-size:10px; font-weight:800; }
.growth-rank-card > div:first-child strong { margin:4px 0; font-size:20px; }
.growth-rank-card > div:first-child small { opacity:.84; font-size:10px; line-height:1.45; }
.growth-level-badge { display:grid; place-items:center; width:76px; height:76px; border:2px solid rgba(255,255,255,.35); border-radius:22px; background:rgba(255,255,255,.12); }
.growth-level-badge small { font-size:9px; font-weight:900; }
.growth-level-badge b { font-size:31px; line-height:1; }
.growth-progress { grid-column:1/-1; overflow:hidden; height:10px; border-radius:999px; background:rgba(255,255,255,.18); }
.growth-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#65e2d1,#ffd45d); transition:width .5s ease; }
.growth-points { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.growth-points strong { font-size:13px; }.growth-points b{font-size:18px;}
.maintenance-missions,.equipment-section,.facility-route-section { margin-top:15px; padding:17px; border:1px solid rgba(18,52,77,.08); border-radius:23px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.compact-heading { align-items:flex-end; }.compact-heading h2{font-size:19px;}
.maintenance-mission-list,.facility-route { display:grid; gap:9px; margin-top:13px; }
.maintenance-mission { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:11px; border-radius:15px; background:#f2f6f7; }
.maintenance-mission > span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:white; background:#77909c; font-size:19px; font-weight:900; }
.maintenance-mission div { display:flex; flex-direction:column; }.maintenance-mission strong{font-size:13px}.maintenance-mission small{margin-top:3px;color:var(--muted);font-size:9px}.maintenance-mission b{color:#758790;font-size:10px}
.maintenance-mission.done { background:#e9fff2; }.maintenance-mission.done > span{background:var(--green)}.maintenance-mission.done b{color:var(--green)}
.collection-count { padding:6px 9px; border-radius:999px; color:white; background:var(--blue); font-size:11px; font-weight:900; }
.equipment-collection { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.equipment-card { display:grid; grid-template-columns:39px 1fr; gap:8px; align-items:center; min-height:82px; padding:10px; border:1px solid var(--line); border-radius:16px; background:#f7fafb; }
.equipment-card .equipment-icon { display:grid; grid-row:1/3; place-items:center; width:39px; height:39px; border-radius:12px; background:#e6eff2; font-size:21px; }
.equipment-card div { display:flex; min-width:0; flex-direction:column; }.equipment-card strong{font-size:11px}.equipment-card small{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.35}.equipment-card>b{grid-column:2;color:var(--blue);font-size:8px}
.equipment-card.locked { filter:grayscale(.85); opacity:.58; }.equipment-card.unlocked{border-color:#8fd5b1;background:#effff6}.equipment-card.unlocked .equipment-icon{background:#d9f7e7}
.repair-status-card { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:15px; }
.repair-status-card div { display:flex; flex-direction:column; align-items:center; padding:12px 5px; border-radius:16px; background:white; box-shadow:0 7px 19px rgba(16,50,70,.08); }
.repair-status-card span{font-size:21px}.repair-status-card strong{margin:3px 0;color:var(--navy);font-size:21px}.repair-status-card small{color:var(--muted);font-size:8px}
.facility-route-card { position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:16px; background:#f2f6f7; }
.facility-route-card > span { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#dce8ed; font-size:22px; }
.facility-route-card div{display:flex;flex-direction:column}.facility-route-card strong{font-size:13px}.facility-route-card small{margin-top:2px;color:var(--muted);font-size:9px}.facility-route-card>b{font-size:9px;color:#7b8d96}.facility-range{margin-top:5px;color:var(--blue);font-size:8px;font-weight:900}
.facility-route-card.current { color:white; background:linear-gradient(135deg,#197ca5,#12344d); }.facility-route-card.current > span{background:rgba(255,255,255,.17)}.facility-route-card.current small,.facility-route-card.current .facility-range,.facility-route-card.current>b{color:#d7eef4}
.facility-route-card.complete { background:#e9fff2; }.facility-route-card.complete>b{color:var(--green)}.facility-route-card.locked{opacity:.58}
body.dark .maintenance-missions,body.dark .equipment-section,body.dark .facility-route-section,body.dark .repair-status-card div{background:#102b3a;border-color:#294452}body.dark .maintenance-mission,body.dark .equipment-card,body.dark .facility-route-card{background:#17394a;border-color:#355362}body.dark .equipment-card.unlocked,body.dark .facility-route-card.complete{background:#174438}body.dark .maintenance-mission.done{background:#174438}
@media(max-width:370px){.equipment-collection{grid-template-columns:1fr}.growth-rank-card{padding:15px}.home-icon-card{grid-template-columns:70px 1fr}.inline-app-icon{width:70px;height:70px}}

/* Ver1.5 ログイン不要・端末自動保存 */
.recovery-code-card { margin-top: 14px; }
.recovery-code-card h3, .account-card h3 { margin: 5px 0 10px; }
.recovery-code-card p:not(.card-label) { color: var(--muted); font-size: 12px; line-height: 1.65; }
.recovery-code-text {
  margin: 14px 0;
  padding: 17px 10px;
  border: 2px dashed #75b8cf;
  border-radius: 16px;
  color: var(--navy);
  background: #eef9fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(20px, 6vw, 29px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  user-select: all;
}
.recovery-actions { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.safe-note { margin-top: 14px; color: #24543d; background: #eaf9f1; }
.safe-note p { color: #3d6551; }
#restoreCode { text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
body.dark .recovery-code-text { color: #eaf3f5; background: #17394a; border-color: #4d91aa; }
body.dark .safe-note { color: #bfe8d2; background: #143a2c; }
body.dark .safe-note p { color: #acd5bf; }
@media (max-width: 390px) {
  .recovery-actions { grid-template-columns: 1fr; }
}


/* Ver1.6 過去10年アーカイブ */
.past-home-button {
  display:flex; align-items:center; gap:12px; width:100%; margin:0 0 15px; padding:14px;
  border:0; border-radius:18px; color:var(--ink); background:linear-gradient(135deg,#fff7d6,#ffffff);
  box-shadow:var(--shadow); text-align:left; cursor:pointer;
}
.past-home-icon {
  display:grid; place-items:center; flex:0 0 52px; height:52px; border-radius:15px;
  color:#fff; background:linear-gradient(135deg,#ed7e2f,#b94729); font-size:14px; font-weight:900;
}
.past-home-button > span:nth-child(2) { display:flex; flex:1; flex-direction:column; }
.past-home-button strong { font-size:16px; }
.past-home-button small { margin-top:3px; color:var(--muted); font-size:10px; }
.past-count-badge { padding:6px 8px; border-radius:999px; color:#8a5200; background:#ffe7a0; font-size:10px; font-weight:900; }
.material-hero.past { background:linear-gradient(135deg,#fff6d4,#fff); }
.material-hero.past .material-hero-icon { color:#fff; background:linear-gradient(135deg,#ed7e2f,#b94729); font-size:13px; }
.past-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.past-summary-grid article { display:flex; flex-direction:column; padding:13px 6px; border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(16,50,70,.08); text-align:center; }
.past-summary-grid strong { color:var(--navy); font-size:19px; }
.past-summary-grid span { color:var(--muted); font-size:10px; }
.past-law-warning { margin-bottom:14px; padding:15px; border-radius:17px; color:#744c00; background:#fff1bf; }
.past-law-warning p { margin:6px 0 0; font-size:12px; line-height:1.6; }
.past-filter-row { display:flex; gap:7px; overflow-x:auto; margin:0 0 12px; padding-bottom:2px; }
.past-filter { flex:0 0 auto; padding:9px 13px; border:1px solid #cbd9df; border-radius:999px; color:var(--muted); background:#fff; font-size:12px; font-weight:900; }
.past-filter.active { color:#fff; border-color:var(--blue); background:var(--blue); }
.past-exam-list { display:grid; gap:11px; margin-bottom:14px; }
.past-exam-card { padding:15px; border:1px solid rgba(18,52,77,.08); border-radius:19px; background:#fff; box-shadow:0 8px 24px rgba(16,50,70,.08); }
.past-exam-card.completed { border-color:#75c9a1; background:#f3fff8; }
.past-exam-main { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.past-exam-main h3 { margin:3px 0 4px; font-size:18px; }
.past-exam-main p { margin:0; color:var(--muted); font-size:11px; }
.past-status-icon { display:grid; place-items:center; width:38px; height:38px; border:3px solid #cbd8dd; border-radius:50%; color:#8ca0a9; font-size:20px; font-weight:900; }
.past-exam-card.completed .past-status-icon { border-color:var(--green); color:var(--green); }
.past-set-badge { margin-left:5px; padding:3px 6px; border-radius:8px; color:#674900; background:#fff0b7; font-size:9px; }
.past-exam-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.past-source-button,.past-complete-button,.past-practice-button {
  display:flex; align-items:center; justify-content:center; min-height:43px; border-radius:12px; font-size:12px; font-weight:900; text-decoration:none;
}
.past-source-button { color:#fff; background:var(--navy); }
.past-complete-button { border:1px solid #bdcdd5; color:var(--navy); background:#fff; }
.past-practice-button { width:100%; margin-top:8px; border:0; color:#fff; background:linear-gradient(135deg,var(--blue),var(--navy)); }
.past-law-note { margin:9px 0 0; color:#8a6b2c; font-size:10px; line-height:1.5; }
body.dark .past-home-button, body.dark .past-summary-grid article, body.dark .past-exam-card { background:#102b3a; }
body.dark .past-exam-card.completed { background:#103828; }
body.dark .past-complete-button { color:var(--ink); background:#133444; border-color:#355362; }

.question-origin-notice {
  margin: 14px 0 -5px;
  padding: 9px 11px;
  border: 1px solid #f0c56b;
  border-radius: 12px;
  color: #76500a;
  background: #fff7dc;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}
body.dark .question-origin-notice {
  color: #ffe6a3;
  background: #433512;
  border-color: #7e652b;
}


/* Ver1.7.1 過去問グループ・文字色修正 */
.material-hero.past {
  color: #17354a !important;
  background: linear-gradient(135deg,#fff1bd 0%,#fff9e5 58%,#ffffff 100%);
}
.material-hero.past strong { color:#17354a !important; }
.material-hero.past small { color:#705b28 !important; opacity:1; }
.material-hero.past b { color:#c45d28 !important; }

.past-library-preview {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid rgba(18,52,77,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
}
.past-library-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.past-library-heading h3 { margin:3px 0 0; color:var(--navy); font-size:19px; }
.past-all-link {
  padding:7px 10px;
  border:1px solid #c9d8df;
  border-radius:999px;
  color:var(--blue);
  background:#fff;
  font-size:11px;
  font-weight:900;
}
.past-group-grid { display:grid; gap:9px; margin-top:9px; }
.past-group-card {
  display:grid;
  grid-template-columns:50px 1fr 18px;
  gap:11px;
  align-items:center;
  width:100%;
  min-height:74px;
  padding:12px 13px;
  border:1px solid rgba(18,52,77,.08);
  border-radius:18px;
  color:#17354a;
  background:#f5f9fb;
  text-align:left;
  box-shadow:0 6px 18px rgba(16,50,70,.07);
}
.past-group-card.featured { min-height:92px; padding:15px; }
.past-group-card.orange { background:linear-gradient(135deg,#fff0b8,#fff8dc); }
.past-group-card.blue { background:linear-gradient(135deg,#e8f4ff,#f8fcff); }
.past-group-card.green { background:linear-gradient(135deg,#e8faef,#f8fffb); }
.past-group-card.slate { background:linear-gradient(135deg,#eef2f5,#fbfcfd); }
.past-group-badge {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:15px;
  color:#fff;
  background:#d8652c;
  font-size:12px;
  font-weight:900;
}
.past-group-card.blue .past-group-badge { background:#2f7fb1; }
.past-group-card.green .past-group-badge { background:#258868; }
.past-group-card.slate .past-group-badge { background:#607887; }
.past-group-copy { display:flex; min-width:0; flex-direction:column; }
.past-group-copy strong { color:#17354a; font-size:15px; line-height:1.35; }
.past-group-copy small { margin-top:3px; color:#667b86; font-size:10px; }
.past-group-copy em { margin-top:5px; color:#9c511f; font-size:10px; font-style:normal; font-weight:900; }
.past-group-card > b { color:#2b607d; font-size:26px; }

.past-group-selector {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-bottom:10px;
}
.past-group-tab {
  min-height:42px;
  padding:8px 7px;
  border:1px solid #cbd8de;
  border-radius:13px;
  color:#5f747f;
  background:#fff;
  font-size:11px;
  font-weight:900;
}
.past-group-tab:last-child { grid-column:1/-1; }
.past-group-tab.active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--navy)); }
.past-group-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:13px 14px;
  border-radius:16px;
  color:#17354a;
  background:#eaf5f8;
}
.past-group-summary div { display:flex; min-width:0; flex-direction:column; }
.past-group-summary span { color:var(--blue); font-size:9px; font-weight:900; letter-spacing:.08em; }
.past-group-summary strong { margin-top:2px; font-size:15px; }
.past-group-summary small { margin-top:3px; color:#687e89; font-size:9px; line-height:1.4; }
.past-group-summary > b { flex:0 0 auto; padding:6px 8px; border-radius:999px; color:#775000; background:#ffe9a9; font-size:10px; }

body.dark .past-library-preview { background:#102b3a; }
body.dark .past-library-heading h3 { color:var(--ink); }
body.dark .past-all-link, body.dark .past-group-tab { color:var(--ink); background:#133444; border-color:#355362; }
body.dark .past-group-card { color:var(--ink); background:#153545; border-color:#355362; }
body.dark .past-group-card.orange,
body.dark .past-group-card.blue,
body.dark .past-group-card.green,
body.dark .past-group-card.slate { background:#153545; }
body.dark .past-group-copy strong { color:var(--ink); }
body.dark .past-group-copy small { color:#b3c4ca; }
body.dark .past-group-summary { color:var(--ink); background:#153545; }
body.dark .past-group-summary small { color:#b3c4ca; }


/* Ver1.8: 10-year server question bank */
.past-bank-sync-card { margin:0 0 16px; padding:17px; border:1px solid rgba(18,52,77,.09); border-radius:22px; background:linear-gradient(145deg,#f1fbff,#fff9df); box-shadow:var(--shadow); }
.past-sync-head { display:flex; gap:12px; align-items:center; }
.past-sync-icon { display:grid; place-items:center; flex:0 0 58px; height:58px; border-radius:17px; color:#fff; background:linear-gradient(145deg,#ef7b2d,#b8462a); font-weight:900; }
.past-sync-head h3 { margin:3px 0; font-size:19px; }
.past-sync-head p:last-child { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.past-sync-meter { overflow:hidden; height:10px; margin:15px 0 7px; border-radius:999px; background:#dfe9ed; }
.past-sync-meter span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--orange),var(--green)); transition:width .35s ease; }
.past-sync-stats { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--muted); font-size:12px; }
.past-sync-stats strong { color:var(--navy); }
.past-bank-sync-card > small { display:block; margin-top:10px; color:#7b692b; font-size:10px; line-height:1.55; }
.question-image-wrap { overflow:hidden; margin:14px 0; border:1px solid var(--line); border-radius:16px; background:#fff; }
.question-image-wrap img { display:block; width:100%; max-height:380px; object-fit:contain; }
body.dark .past-bank-sync-card { background:linear-gradient(145deg,#102f3f,#3b3414); }
body.dark .question-image-wrap { background:#102b3a; }


/* Ver1.9.2 公式完全版 */
.formula-toolbar{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center}
.formula-title-row{display:flex;align-items:center;gap:7px}
.formula-title-row h3{margin:0}
.formula-priority{display:inline-grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;color:#fff;font-size:11px;font-weight:1000}
.formula-priority.priority-A{background:#d84c3c}.formula-priority.priority-B{background:#e39a22}.formula-priority.priority-C{background:#60879b}
.formula-source-note{margin-bottom:14px;padding:15px;border-radius:18px;color:var(--ink);background:linear-gradient(135deg,#fff6d7,#fff);box-shadow:0 7px 20px rgba(16,50,70,.08)}
.formula-source-note p{margin:6px 0 10px;color:var(--muted);font-size:11px;line-height:1.6}
.formula-source-note div{display:flex;flex-wrap:wrap;gap:7px}.formula-source-note a{padding:7px 10px;border-radius:999px;color:#fff;background:var(--navy);font-size:10px;font-weight:900;text-decoration:none}
.formula-next-button{margin-top:10px;padding:8px 13px;border:0;border-radius:10px;color:#fff;background:var(--blue);font-weight:900}
@media(max-width:560px){.formula-toolbar{grid-template-columns:auto 1fr}.formula-toolbar #formulaProgressText{grid-column:1/-1;text-align:right}.formula-source-note div{display:grid}.formula-source-note a{text-align:center}}
body.dark .formula-source-note{background:#183746}


/* Ver1.9.3 確認済み問題パック */
.verified-pack-card .past-sync-icon {
  font-size: 12px;
  background: linear-gradient(135deg, #1c8b72, #0e5f65);
}
.verified-pack-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 15px 0;
  padding: 14px 16px;
  border-radius: 15px;
  background: #edf8f4;
}
.verified-pack-summary strong {
  color: #0f5f63;
  font-size: 30px;
}
.verified-pack-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
body.dark .verified-pack-summary {
  background: #12382f;
}


/* Ver1.9.4 公式48項目・詳細解説優先 */
.formula-load-status {
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  margin-bottom:12px; padding:13px 15px; border:1px solid #c9d8de;
  border-radius:16px; background:#fff;
}
.formula-load-status strong { color:var(--navy); font-size:14px; }
.formula-load-status span { color:var(--muted); font-size:10px; text-align:right; }
.formula-load-status.ok { border-color:#79cba5; background:#effcf5; }
.formula-load-status.error { border-color:#e89b91; background:#fff0ed; }
.formula-number { padding:3px 6px; border-radius:7px; color:#48616d; background:#e9f0f3; font-size:9px; font-weight:900; }
.formula-explain-section { margin:11px 0; padding:12px; border-radius:14px; background:#f5f9fa; }
.formula-explain-section h4 { margin:0 0 7px; color:var(--blue); font-size:12px; }
.formula-explain-section p { margin:0; color:var(--ink); font-size:12px; line-height:1.7; }
.feedback-content { min-width:0; }
.answer-explanation-block { margin:10px 0; padding:13px 14px; border-radius:15px; background:#f4f8fa; }
.answer-explanation-block h4, .option-review-block h4 { margin:0 0 7px; color:var(--blue); font-size:13px; }
.answer-explanation-block p { margin:0; color:var(--ink); font-size:13px; line-height:1.75; }
.answer-explanation-block.corrected { border-left:5px solid #2aa876; background:#edf9f3; }
.answer-explanation-block.calculation { border-left:5px solid #4f68c7; background:#f0f3ff; }
.answer-explanation-block ol { margin:0; padding-left:21px; }
.answer-explanation-block li { margin:5px 0; color:var(--ink); font-size:12px; line-height:1.65; }
.option-review-block { margin:12px 0; padding:13px; border:1px solid #d8e2e6; border-radius:16px; background:#fff; }
.option-review-row { display:grid; grid-template-columns:31px 1fr; gap:9px; padding:10px 0; border-top:1px solid #e3eaed; }
.option-review-row:first-of-type { border-top:0; }
.option-review-row>b { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#fff; background:#8ca0a9; }
.option-review-row.answer>b { background:#e06356; }
.option-review-row div>strong { color:var(--navy); font-size:11px; }
.option-review-row p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.feedback-panel:not(.wrong) .option-review-row.answer>b { background:#2aa876; }
body.dark .formula-load-status, body.dark .formula-explain-section, body.dark .answer-explanation-block, body.dark .option-review-block { background:#153444; border-color:#355362; }
body.dark .formula-load-status.ok, body.dark .answer-explanation-block.corrected { background:#153d30; }
body.dark .formula-load-status.error { background:#4a2825; }
body.dark .answer-explanation-block.calculation { background:#202d50; }
body.dark .formula-explain-section p, body.dark .answer-explanation-block p, body.dark .answer-explanation-block li { color:#eaf3f5; }


/* Ver1.9.6 文字サイズ設定 */
.text-size-setting-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
.text-size-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  padding: 5px;
  border-radius: 15px;
  background: #edf2f4;
}
.text-size-selector button {
  min-height: 42px;
  padding: 8px 5px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
}
.text-size-selector button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  box-shadow: 0 5px 14px rgba(14, 77, 106, .18);
}
body.dark .text-size-selector { background: #102b3a; }
body[data-text-scale="1-5"] .answer-button,
body[data-text-scale="1-5"] .primary-button,
body[data-text-scale="1-5"] .secondary-button,
body[data-text-scale="1-5"] .settings-link-button {
  min-height: 58px;
  height: auto;
}
body[data-text-scale="1-5"] .setting-row {
  min-height: 76px;
}
body[data-text-scale="1-5"] .bottom-nav {
  min-height: 82px;
}
body[data-text-scale="1-5"] main {
  padding-bottom: 112px;
}

/* Ver1.9.6 不正解時の公式即時参照 */
.formula-reference-block {
  border-left: 5px solid #2f83a6;
  background: #eef8fb;
}
.formula-reference-intro {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.65;
}
.feedback-formula-list {
  display: grid;
  gap: 10px;
}
.feedback-formula-card {
  padding: 13px;
  border: 1px solid #bcd9e4;
  border-radius: 15px;
  background: #fff;
}
.feedback-formula-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feedback-formula-head > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.feedback-formula-head small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}
.feedback-formula-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #2b95b7, #123f5b);
  font-weight: 900;
}
.feedback-formula-equation {
  margin: 11px 0;
  padding: 11px 9px;
  border-radius: 11px;
  color: #0d405b;
  background: #e8f5fa;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
.feedback-formula-toggle,
.feedback-formula-page-button {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  font-weight: 900;
}
.feedback-formula-toggle {
  border: 1px solid #9fc8d8;
  color: #155c78;
  background: #fff;
}
.feedback-formula-page-button {
  margin-top: 8px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #278dac, #123f5b);
}
.feedback-formula-detail {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f6fbfd;
}
.feedback-formula-detail h5 {
  margin: 8px 0 6px;
  color: #155c78;
}
.feedback-formula-detail ol {
  margin: 0;
  padding-left: 21px;
  line-height: 1.7;
}
.feedback-formula-example,
.feedback-formula-memory {
  margin: 9px 0 0;
  line-height: 1.65;
}
.feedback-formula-memory {
  padding: 9px;
  border-radius: 9px;
  background: #fff3c9;
}
body.dark .formula-reference-block { background: #12313d; }
body.dark .feedback-formula-card { border-color: #365e6d; background: #102b3a; }
body.dark .feedback-formula-equation { color: #cdefff; background: #173e4e; }
body.dark .feedback-formula-detail { background: #153543; }
body.dark .feedback-formula-toggle { color: #d4f1fb; background: #173e4e; }
body.dark .feedback-formula-memory { color: #ffe8a0; background: #403712; }


/* Ver1.9.7 15問から公式を開いた時の復帰バー */
.formula-quiz-return-bar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  padding: 11px;
  border: 2px solid #2b91b3;
  border-radius: 17px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 9px 28px rgba(16, 64, 88, .20);
  backdrop-filter: blur(10px);
}
.formula-quiz-return-bar[hidden] {
  display: none !important;
}
.formula-quiz-return-bar > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.formula-quiz-return-bar strong {
  color: #103d58;
  font-size: 15px;
}
.formula-quiz-return-bar span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.formula-quiz-return-bar button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #248eae, #103d58);
  font-weight: 900;
  white-space: nowrap;
}
body.dark .formula-quiz-return-bar {
  border-color: #55b8d8;
  background: rgba(15, 43, 57, .97);
}
body.dark .formula-quiz-return-bar strong {
  color: #daf5ff;
}
body[data-text-scale="1-5"] .formula-quiz-return-bar {
  align-items: stretch;
  flex-direction: column;
}
body[data-text-scale="1-5"] .formula-quiz-return-bar button {
  width: 100%;
  white-space: normal;
}


/* Ver2.8.0 interactive diagram overhaul */
.diagram-canvas svg .diagram-hotspot{cursor:pointer;transition:opacity .18s ease,filter .18s ease}.diagram-canvas svg .part-glow{fill:none;stroke:#ff7a1a;stroke-width:0;opacity:0;pointer-events:none;filter:drop-shadow(0 0 0 rgba(255,122,26,0))}.diagram-canvas svg .part-glow.path{fill:none}.diagram-canvas svg .diagram-hotspot.active .part-glow{stroke-width:8;opacity:.95;filter:drop-shadow(0 0 10px rgba(255,213,80,.95))}.diagram-canvas svg .diagram-hotspot.active .part-main{filter:drop-shadow(0 0 8px rgba(255,226,90,.95));stroke:#ff7a1a!important;stroke-width:8!important}.diagram-canvas svg .diagram-hotspot.active .part-number{fill:#ff7a1a!important;stroke:#fff!important;stroke-width:5!important;filter:drop-shadow(0 0 5px rgba(255,226,90,.9))}.diagram-canvas svg .diagram-hotspot.active text{fill:#102f42}.diagram-canvas svg .diagram-hotspot.active .part-number+text{fill:#fff!important}.diagram-part-button.active{color:#102f42!important;background:#fff2bf!important;border-color:#ff9a2e!important;box-shadow:0 0 0 2px rgba(255,154,46,.25) inset}.diagram-part-button.active b{color:#e86800!important}.diagram-part-panel{scroll-margin-bottom:90px}.diagram-select-button.active{box-shadow:0 5px 14px rgba(0,103,130,.18)}


/* Ver2.8.1 interactive diagram visibility fix */
.diagram-canvas svg .diagram-hotspot{cursor:pointer;isolation:isolate;}
.diagram-canvas svg .diagram-hotspot:not(.active){opacity:.78;}
.diagram-canvas svg .diagram-hotspot.active{opacity:1!important;filter:drop-shadow(0 0 12px rgba(255,214,72,.95));}
.diagram-canvas svg .diagram-hotspot.active .part-glow{stroke:#ff8a00!important;stroke-width:14!important;opacity:1!important;fill:rgba(255,138,0,.16)!important;filter:drop-shadow(0 0 12px rgba(255,226,90,1));}
.diagram-canvas svg .diagram-hotspot.active .part-main{stroke:#ff8a00!important;stroke-width:9!important;filter:drop-shadow(0 0 10px rgba(255,226,90,.95));}
.diagram-canvas svg .diagram-hotspot.active .part-number{fill:#ff8a00!important;stroke:#fff!important;stroke-width:6!important;filter:drop-shadow(0 0 7px rgba(255,226,90,.95));}
.diagram-canvas svg .diagram-hotspot.active .part-number + text,
.diagram-canvas svg .diagram-hotspot.active .part-number-text{fill:#fff!important;paint-order:stroke;stroke:#102f42;stroke-width:2px;}
.diagram-part-button.active{color:#102f42!important;background:#fff0ba!important;border-color:#ff8a00!important;box-shadow:0 0 0 3px rgba(255,138,0,.22) inset!important;}
.diagram-part-button.active b{color:#d95e00!important;}


/* Ver4.2.2 admin stealth panel */
.admin-stealth-button {
  display: block;
  margin: 14px 0 0 auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 39, 58, .07);
  color: rgba(8, 39, 58, .42);
  font-size: 14px;
  font-weight: 800;
}
.admin-stealth-button:active { transform: scale(.98); }
.admin-panel-card { margin-top: 18px; }
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-summary-grid div {
  background: #eef6f8;
  border-radius: 18px;
  padding: 14px;
}
.admin-summary-grid strong {
  display: block;
  font-size: 26px;
  color: #0f3448;
}
.admin-summary-grid span, .admin-summary-line, .admin-result-count {
  color: #6d7f89;
  font-weight: 800;
}
.admin-summary-line { grid-column: 1 / -1; margin: 6px 0 0; }
.admin-filter-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.admin-filter-row select, .admin-filter-row input {
  width: 100%;
  border: 2px solid #dbe7ec;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 800;
  background: white;
}
.admin-question-list { margin-top: 16px; display: grid; gap: 12px; }
.admin-question-item {
  border: 1px solid #dbe7ec;
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
}
.admin-question-item summary {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-weight: 900;
  color: #0f3448;
}
.admin-question-item summary span {
  background: #e9f6fa;
  color: #0b82a8;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
}
.admin-q-topic { color: #0b82a8; font-weight: 900; margin: 12px 0 4px; }
.admin-q-text { white-space: pre-wrap; font-weight: 900; line-height: 1.7; color: #102f41; }
.admin-choice-list { padding-left: 22px; color: #314d5d; font-weight: 700; line-height: 1.7; }
.admin-choice-list .correct { color: #10825f; font-weight: 900; }
.admin-answer, .admin-explanation, .admin-source { line-height: 1.7; color: #314d5d; font-weight: 700; }

.admin-choice-list { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.admin-choice-list li { padding: 10px 12px; border: 1px solid #dce7ec; border-radius: 12px; background: #fff; }
.admin-choice-list li.correct { border-color: #32b37c; background: #effff7; }


/* Ver5.0: internal archive and readability */
.question-card h2.long-question { font-size: clamp(17px, 4.2vw, 22px); line-height: 1.55; }
.question-card h2.very-long-question { font-size: clamp(16px, 3.8vw, 20px); line-height: 1.5; }
.past-source-button { border: 0; }
.past-internal-detail {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #d7e5ea;
  border-radius: 18px;
  background: #f6fbfc;
}
.past-internal-detail h4 { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
.past-internal-detail p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.past-inline-question-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; padding-right: 2px; }
.past-inline-question {
  border: 1px solid #dce6ea;
  border-radius: 14px;
  background: white;
}
.past-inline-question summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}
.past-inline-question summary span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: white;
  background: var(--blue);
  font-size: 12px;
}
.past-inline-question p, .past-inline-question ol { margin: 0; padding: 0 12px 10px 12px; }
.past-inline-question ol { padding-left: 34px; display: grid; gap: 5px; }
.past-inline-question li.correct { color: #0a7d55; font-weight: 900; }
.past-inline-text { white-space: pre-line; font-weight: 800; color: var(--ink) !important; }
.internal-only-note { display: inline-block; color: var(--muted); font-size: 13px; font-weight: 800; }

/* Ver6.0 alpha: App Store native-app style question UI */
.question-card.v6-write-card,
.question-card.scratch-enabled-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 88px;
}
.answer-choice-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 14px 14px;
  margin: 10px 0;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
  line-height: 1.65;
  color: #0f172a;
}
.answer-choice-card .option-letter {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  color: #075985;
  font-weight: 800;
  font-size: 18px;
}
.answer-choice-card.correct {
  border-color: #16a34a;
  background: #ecfdf5;
}
.answer-choice-card.wrong {
  border-color: #dc2626;
  background: #fef2f2;
}
.answer-choice-card.selected {
  border-color: #2563eb;
  background: #eff6ff;
}
.answer-number-bar {
  position: sticky;
  bottom: 10px;
  z-index: 9;
  display: grid;
  grid-template-columns: auto repeat(5, minmax(42px, 1fr));
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .24);
  color: #fff;
}
.answer-bar-label {
  font-size: 13px;
  font-weight: 700;
  padding: 0 4px;
  white-space: nowrap;
}
.answer-number-button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
}
.answer-number-button.selected {
  background: #bfdbfe;
  color: #1d4ed8;
}
.answer-number-button.correct {
  background: #22c55e;
  color: #fff;
}
.answer-number-button.wrong {
  background: #ef4444;
  color: #fff;
}
.scratch-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 10px;
  position: relative;
  z-index: 12;
}
.scratch-toolbar button {
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
}
.scratch-toolbar button.active {
  background: #111827;
  color: #fff;
}
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  touch-action: none;
}
.scratch-active .scratch-canvas {
  pointer-events: auto;
}
.scratch-active .answer-number-bar,
.scratch-active .scratch-toolbar,
.scratch-active .feedback-panel {
  pointer-events: auto;
}
#questionText,
#mockQuestionText,
.answer-options,
.question-image-wrap,
.recent-history-panel,
.question-origin-notice {
  position: relative;
  z-index: 2;
}
@media (max-width: 420px) {
  .answer-number-bar { grid-template-columns: auto repeat(5, minmax(38px, 1fr)); gap: 6px; }
  .answer-number-button { min-height: 44px; font-size: 20px; }
  .answer-choice-card { grid-template-columns: 38px 1fr; padding: 12px; }
}