/* v18 final consolidation: one cohesive JLPTGO UI layer for current data */
:root {
  --v18-blue: #086cff;
  --v18-blue-dark: #0057e7;
  --v18-bg: #f6f8fc;
  --v18-card: #fff;
  --v18-ink: #101828;
  --v18-muted: #667085;
  --v18-line: #e4eaf3;
  --v18-shadow: 0 14px 36px rgba(15, 23, 42, .06);
  --v18-radius: 14px;
}

body { background: var(--v18-bg) !important; }
body, button, input { font-family: Inter, "Microsoft YaHei", "Yu Gothic", "Hiragino Sans", Meiryo, system-ui, sans-serif !important; }

/* App shell / top nav */
.app-shell { background: var(--v18-bg) !important; }
.sidebar {
  height: 92px !important;
  min-height: 92px !important;
  padding: 0 34px !important;
  grid-template-columns: minmax(360px, 1fr) auto !important;
  box-shadow: 0 2px 18px rgba(16, 24, 40, .04) !important;
}
.brand-mark { width: 52px !important; height: 52px !important; border-radius: 12px !important; }
.brand h1 { font-size: 28px !important; line-height: 1.08 !important; color: #0b1220 !important; }
.brand p { color: #8a94a6 !important; font-size: 15px !important; }
.side-nav { height: 92px !important; gap: 34px !important; }
.nav-item { min-width: auto !important; color: #111827 !important; }
.nav-item b { font-size: 18px !important; letter-spacing: .01em; }
.nav-item.active { color: var(--v18-blue) !important; }
.nav-item.active::after { bottom: 8px !important; height: 4px !important; left: 2px !important; right: 2px !important; }

.main { width: min(1440px, calc(100% - 48px)) !important; padding-top: 28px !important; }
.route-home .main { padding-top: 24px !important; }

/* Homepage final layout */
.home-heading h2 { font-size: 28px !important; color: #0f172a !important; }
.home-heading p { color: #667085 !important; }
.level-grid-home { grid-template-columns: repeat(5, minmax(150px, 1fr)) !important; }
.level-select-card {
  min-height: 134px !important;
  padding: 22px 26px !important;
  border-radius: 12px !important;
  box-shadow: var(--v18-shadow) !important;
}
.level-select-card b { margin-bottom: 12px !important; font-size: 44px !important; }
.level-select-card strong { font-size: 15px !important; }
.level-select-card span { line-height: 1.45 !important; }
.level-select-card.selected { box-shadow: 0 16px 40px rgba(8, 108, 255, .14) !important; }
.home-layout { grid-template-columns: minmax(0, 1fr) 440px !important; gap: 22px !important; }
.current-level-row { padding: 20px 24px !important; }
.today-plan-card { min-height: 204px !important; padding: 28px 30px !important; }
.quick-start-home { grid-template-columns: repeat(4, 1fr) !important; padding: 20px !important; gap: 16px !important; }
.quick-start-home button { min-height: 90px !important; border-radius: 12px !important; }
.home-side-card { padding: 22px 22px 24px !important; }
.home-stat-row { padding: 14px 0 !important; }
.home-stat-row b { font-size: 26px !important; }
.mini-week-bars { height: 78px !important; }
.home-primary { min-height: 52px !important; }

/* Collections */
.collections { margin-bottom: 16px !important; }
.collection-chip { border-radius: 12px !important; padding: 11px 15px !important; font-weight: 900 !important; }
.collection-chip.active { box-shadow: 0 10px 22px rgba(8, 108, 255, .18) !important; }

/* Practice final layout */
.workspace { grid-template-columns: minmax(0, 1fr) 384px !important; gap: 22px !important; }
.question-card, .explanation-card, .answer-sheet-card { border-radius: var(--v18-radius) !important; border-color: var(--v18-line) !important; box-shadow: var(--v18-shadow) !important; }
.question-head { min-height: 106px !important; padding: 24px 34px !important; }
.question-progress-wrap { grid-template-columns: minmax(170px, auto) minmax(220px, 1fr) 74px !important; }
#questionNumber { display: grid; gap: 6px; min-width: 170px !important; }
#questionNumber span { font-size: 22px; font-weight: 850; color: #0f172a; }
#questionNumber b { color: var(--v18-blue); font-size: 32px; }
#questionNumber small { font-size: 14px; color: #667085; font-weight: 750; }
.question-progress { height: 9px !important; background: #e9eef6 !important; }
#questionProgressFill { background: linear-gradient(90deg, var(--v18-blue), #1c7dff) !important; }
.level-chip { min-width: 56px !important; min-height: 42px !important; font-size: 20px !important; border-radius: 10px !important; }
.question-body-label { margin-top: 36px !important; }
.prompt:not(.split-layout) {
  margin: 18px 34px 22px !important;
  padding: 26px 34px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 12px !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  line-height: 1.85 !important;
}
.options { padding: 0 34px 26px !important; gap: 16px !important; }
.option-btn { min-height: 82px !important; border-radius: 12px !important; font-size: clamp(19px, 1.6vw, 24px) !important; }
.option-index { background: #eef5ff !important; color: var(--v18-blue) !important; border-color: #cfe0ff !important; }
.option-btn.selected .option-index,
.option-btn.correct .option-index,
.option-btn.incorrect .option-index { color: #fff !important; }
.question-actions { padding: 20px 34px !important; grid-template-columns: 220px minmax(280px, 1fr) 220px !important; gap: 18px !important; }
.favorite-btn, .secondary-btn, .primary-btn { min-height: 60px !important; border-radius: 10px !important; font-size: 18px !important; }
.primary-btn { background: var(--v18-blue) !important; border-color: var(--v18-blue) !important; }
.primary-btn:disabled { background: #98bdf6 !important; border-color: #98bdf6 !important; }

/* Right rail final */
.right-rail { gap: 18px !important; }
.explanation-card, .answer-sheet-card { padding: 24px 26px !important; }
.explanation-head h3, .sheet-head h3 { font-size: 22px !important; }
.explanation-body { margin-top: 20px !important; font-size: 17px !important; }
.info-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 13px !important; margin-bottom: 13px !important; }
.info-row span { color: #667085 !important; font-weight: 750; }
.info-row b { color: #334155 !important; text-align: right; }
.locked-hint { padding: 14px 16px; border-radius: 12px; background: #f7f9fc; color: #667085; font-weight: 750; line-height: 1.55; }
.mini-explain { max-height: 360px; overflow: auto; }
.answer-sheet { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
.sheet-btn.sheet-number-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
.sheet-legend { gap: 18px !important; justify-content: center !important; }

/* Answer review */
body.is-answer-revealed .prompt:not(.split-layout) { margin: 24px 34px 22px !important; border: 0 !important; padding: 0 !important; }
body.is-answer-revealed .option-btn { min-height: 98px !important; }
.option-status { padding: 6px 10px; border-radius: 999px; font-size: 13px !important; }
.right-pick { background: #dcfce7; color: #15803d !important; }
.user-pick { background: #fee2e2; color: #dc2626 !important; }

/* Reading exact pass */
body.is-reading-question .prompt.split-layout { border-top: 1px solid #e8eef6 !important; }
body.is-reading-question .prompt-passage-pane,
body.is-reading-question .prompt-question-pane { padding: 32px 38px !important; min-height: 530px !important; }
body.is-reading-question .prompt-passage-pane::before,
body.is-reading-question .prompt-question-pane::before { font-size: 23px !important; }
body.is-reading-question .options { padding: 24px 34px 26px !important; }
body.is-reading-question .option-btn { min-height: 76px !important; }

/* Listening exact pass */
.audio-prompt-v16 { margin: 30px 34px 20px !important; padding: 26px !important; }
.audio-player-shell { min-height: 126px !important; }
.audio-wave i { animation: v18-wave 1.9s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -0.01s); }
@keyframes v18-wave { from { transform: scaleY(.72); opacity: .72; } to { transform: scaleY(1); opacity: 1; } }
body.is-listening-question .options { padding-top: 8px !important; }

/* Wrong preview */
.wrong-preview { margin-top: 18px !important; }
.wrong-preview-head b, .wrong-preview-empty b { font-size: 20px !important; }
.wrongbook-link { font-size: 16px !important; }

@media (max-width: 1180px) {
  .level-grid-home { grid-template-columns: repeat(3, 1fr) !important; }
  .home-layout, .workspace { grid-template-columns: 1fr !important; }
  .right-rail { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  .sidebar { height: 74px !important; min-height: 74px !important; }
  .main { width: 100% !important; padding: 12px 10px 88px !important; }
  .level-grid-home { grid-template-columns: 1fr 1fr !important; }
  .quick-start-home { grid-template-columns: 1fr 1fr !important; }
  .right-rail { grid-template-columns: 1fr !important; }
  .question-head { padding: 15px !important; min-height: 78px !important; }
  .question-progress-wrap { grid-template-columns: auto 1fr 50px !important; gap: 12px !important; }
  #questionNumber { min-width: 96px !important; }
  #questionNumber span { font-size: 15px; }
  #questionNumber b { font-size: 22px; }
  #questionNumber small { font-size: 11px; }
  .prompt:not(.split-layout) { margin: 14px !important; padding: 18px !important; font-size: 21px !important; }
  .options { padding: 0 14px 18px !important; }
  .question-actions { padding: 12px 14px !important; grid-template-columns: 1fr 1fr !important; }
  #nextBtn { grid-column: 1 / -1; }
  .answer-sheet { gap: 9px !important; }
  .sheet-btn.sheet-number-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; }
}