*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Dark/light tokens ── */
  :root {
    --bg: #F4F6F8; --surface: #fff; --surface2: #ECEFF1; --border: #e0e0e0;
    --text: #212529; --text2: #607D8B; --text3: #90A4AE; --shadow: rgba(0,0,0,.06);
    --panel-bg: #F8F9FA; --panel-text: #455A64; --panel-dim: #90A4AE;
    --panel-border: #dee2e6; --panel-head: #ECEFF1;
    --panel-cell: #fff; --panel-cell-border: #dee2e6;
  }
  body.dark {
    --bg: #1A1F23; --surface: #263238; --surface2: #2E3B42; --border: #37474F;
    --text: #ECEFF1; --text2: #90A4AE; --text3: #546E7A; --shadow: rgba(0,0,0,.3);
    --panel-bg: #1E272C; --panel-text: #CFD8DC; --panel-dim: #546E7A;
    --panel-border: #2E3B42; --panel-head: #263238;
    --panel-cell: #263238; --panel-cell-border: #37474F;
  }

  html, body { height: 100%; }
  body { font-family: 'Noto Sans JP', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .2s, color .2s; }

  /* ── Layout ── */
  .page-layout { min-height: 100vh; }
  .main-col { padding: 14px 14px 40px; max-width: 640px; margin: 0 auto; }

  /* Side panel — fixed to right of viewport */
  .side-panel { 
    position: fixed; top: 0; right: 0; width: 210px; height: 100vh;
    background: var(--panel-bg); border-left: 1px solid var(--panel-border);
    padding: 14px 10px; overflow-y: auto; display: none; z-index: 200;
    box-shadow: -2px 0 12px rgba(0,0,0,.08);
    transition: background .2s;
  }
  .side-panel.visible { display: block; }
  .side-panel-title { font-size: 11px; font-weight: 700; color: var(--panel-text); margin-bottom: 10px; letter-spacing: .5px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--panel-border); }
  .tracker-grid { display: grid; grid-template-columns: 22px 1fr 1fr 1fr 1fr; gap: 3px; align-items: center; }
  .tracker-row-num { font-size: 10px; font-weight: 600; color: var(--panel-dim); text-align: right; padding-right: 3px; }
  .tracker-cell { 
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; font-size: 11px; font-weight: 700; height: 26px;
    background: var(--panel-cell); color: var(--panel-dim);
    border: 1px solid var(--panel-cell-border);
    transition: background .15s, color .15s, border-color .15s;
  }
  .tracker-cell.current-row { border-color: var(--accent-color, #1565C0) !important; }
  .tracker-cell.chosen-correct { background: #1B5E20 !important; color: #A5D6A7 !important; border-color: #2E7D32 !important; }
  .tracker-cell.chosen-wrong   { background: #B71C1C !important; color: #FFCDD2 !important; border-color: #C62828 !important; }
  /* When quiz panel visible, shrink available width so margin:0 auto re-centers */
  .has-panel { padding-right: 210px; }

  /* ── Theme toggle & level tabs row ── */
  .top-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .level-tabs { display: flex; gap: 5px; flex: 1; }
  .level-tab { flex: 1; padding: 9px 2px; text-align: center; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 700; font-size: 12px; color: var(--text2); transition: all .15s; }
  .level-tab.active { color: #fff; border-color: transparent; }
  .theme-btn { padding: 8px 11px; border-radius: 8px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; font-size: 16px; color: var(--text2); transition: all .15s; flex-shrink: 0; }
  .theme-btn:hover { border-color: var(--text2); }

  /* ── Set tabs ── */
  .set-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
  .set-tab { flex: 1; padding: 9px; text-align: center; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text2); transition: all .15s; }
  .set-tab.active { color: #fff; border-color: transparent; }

  .header { text-align: center; padding: 18px 0 12px; }
  .header-icon { display: inline-block; color: #fff; border-radius: 10px; padding: 7px 18px; font-size: 20px; font-weight: 800; letter-spacing: 2px; margin-bottom: 6px; }
  .header h1 { font-size: 23px; font-weight: 800; margin: 5px 0 0; }
  .header p { font-size: 13px; color: var(--text3); margin: 3px 0 0; }

  .menu-grid { display: flex; flex-direction: column; gap: 9px; }
  .menu-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; box-shadow: 0 1px 3px var(--shadow); color: var(--text); transition: box-shadow .15s, transform .1s; }
  .menu-card:hover { box-shadow: 0 3px 10px var(--shadow); transform: translateY(-1px); }
  .menu-icon { font-size: 25px; flex-shrink: 0; }
  .menu-label { font-size: 15px; font-weight: 700; color: var(--text); }
  .menu-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .footer { text-align: center; color: var(--text3); font-size: 13px; margin-top: 18px; }

  .quiz-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .quit-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: none; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; font-family: inherit; transition: all .15s; }
  .quit-btn:hover { border-color: #c62828; color: #c62828; background: #FFF5F5; }

  .progress-wrap { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
  .progress-bar { height: 100%; border-radius: 3px; transition: width .3s; }
  .progress-text { font-size: 13px; color: var(--text3); text-align: right; margin-bottom: 11px; }

  .q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px; margin-bottom: 12px; box-shadow: 0 2px 6px var(--shadow); }
  .badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 10px; margin-bottom: 7px; }
  .q-text { font-size: 16px; line-height: 1.65; color: var(--text); white-space: pre-wrap; }

  .opts { display: flex; flex-direction: column; gap: 7px; }
  .opt-btn { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; font-size: 15px; font-weight: 500; text-align: left; background: var(--surface); transition: all .15s; font-family: inherit; color: var(--text); }
  .opt-btn:hover:not(.locked) { border-color: #90CAF9; background: var(--surface2); }
  .opt-letter { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 7px; background: var(--surface2); font-weight: 700; font-size: 13px; flex-shrink: 0; }
  .opt-btn.correct { background: #E8F5E9; border-color: #2E7D32; color: #1B5E20; }
  .opt-btn.wrong   { background: #FFEBEE; border-color: #c62828; color: #b71c1c; }

  .explanation { background: #FFF8E1; border: 1px solid #FFE082; border-radius: 10px; padding: 11px 13px; margin-top: 10px; font-size: 14px; line-height: 1.6; color: #F57F17; }
  body.dark .explanation { background: #2E2600; border-color: #7C6C00; color: #FFD54F; }
  .explanation-title { font-weight: 700; display: block; margin-bottom: 3px; }

  .feedback { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 8px; }
  .feedback span { font-size: 17px; }
  .next-btn { padding: 9px 20px; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s; }
  .run-score { text-align: center; font-size: 13px; color: var(--text3); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }

  .review-header { text-align: center; padding: 20px 0 8px; }
  .score-circle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; border: 5px solid; margin-bottom: 10px; }
  .score-pct { font-size: 31px; font-weight: 800; }
  .score-label { font-size: 13px; color: var(--text3); }
  .grade-text { font-size: 20px; font-weight: 700; color: var(--text); }
  .wrong-section { margin-top: 12px; }
  .wrong-title { font-size: 15px; font-weight: 700; margin-bottom: 9px; }
  .wrong-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
  .wrong-q { font-size: 14px; color: var(--text); margin: 5px 0 4px; white-space: pre-wrap; }
  .wrong-exp { font-size: 13px; color: #7C6C00; margin-top: 5px; padding-top: 5px; border-top: 1px solid #FFE082; }
  body.dark .wrong-exp { color: #FFD54F; border-color: #7C6C00; }
  .primary-btn { display: block; width: 100%; padding: 13px; background: #37474F; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 15px; font-family: inherit; transition: background .15s; }
  .primary-btn:hover { background: #263238; }

  .stats-header { text-align: center; padding: 16px 0 10px; }
  .stats-header h2 { font-size: 20px; font-weight: 800; color: var(--text); }
  .stats-header p { font-size: 13px; color: var(--text3); margin-top: 2px; }
  .stats-overall { display: flex; justify-content: center; gap: 20px; padding: 15px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 13px; box-shadow: 0 2px 6px var(--shadow); }
  .stats-big { text-align: center; }
  .stats-big-num { font-size: 27px; font-weight: 800; }
  .stats-big-label { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .stats-cat-card { background: var(--surface); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); margin-bottom: 8px; box-shadow: 0 1px 3px var(--shadow); }
  .stats-cat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
  .stats-cat-name { font-size: 14px; font-weight: 700; }
  .stats-cat-nums { font-size: 13px; color: var(--text2); }
  .stats-bar-track { height: 10px; background: var(--surface2); border-radius: 5px; overflow: hidden; position: relative; }
  .stats-bar-correct { height: 100%; border-radius: 5px; transition: width .4s; }
  .stats-bar-wrong { height: 100%; position: absolute; top: 0; right: 0; border-radius: 5px; }
  .stats-detail { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); margin-top: 4px; }
  .stats-btn-row { display: flex; gap: 10px; margin-top: 13px; }
  .stats-btn-row .primary-btn { margin-top: 0; }
  .danger-btn { display: block; width: 100%; padding: 13px; background: var(--surface); border: 1.5px solid #FFCDD2; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; margin-top: 0; color: #c62828; }
  .danger-btn:hover { background: #FFF5F5; border-color: #c62828; }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
  .modal-box { background: var(--surface); border-radius: 14px; padding: 22px; max-width: 340px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25); text-align: center; }
  .modal-box h3 { font-size: 16px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
  .modal-box p { font-size: 14px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
  .modal-btns { display: flex; gap: 10px; }
  .modal-btns button { flex: 1; padding: 10px 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; transition: all .15s; }
  .modal-cancel { background: var(--surface2); color: var(--text2); }
  .modal-cancel:hover { background: var(--border); }
  .modal-confirm { color: #fff; }

  .hidden { display: none !important; }


  /* ── Interview screens ── */
  .iv-level-grid { display: flex; flex-direction: column; gap: 12px; }
  .iv-level-btn { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 2px solid; border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; transition: all .15s; }
  .iv-level-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow); }
  .iv-level-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 800; flex-shrink: 0; }
  .iv-level-name { font-size: 16px; font-weight: 700; }
  .iv-level-desc { font-size: 12px; color: var(--text3); margin-top: 3px; }

  .iv-session-btn { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); box-shadow: 0 1px 3px var(--shadow); transition: all .15s; }
  .iv-session-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px var(--shadow); }
  .iv-session-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 800; flex-shrink: 0; }
  .iv-session-title { font-size: 15px; font-weight: 700; color: var(--text); }
  .iv-session-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }

  .iv-topic-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 8px 12px; background: var(--surface2); border-radius: 8px; }

  .iv-content-area { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 6px var(--shadow); }
  .iv-passage-text { font-size: 15px; line-height: 1.75; color: var(--text); margin-bottom: 14px; }
  .iv-illus-block { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
  .iv-illus-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
  .iv-illus-text { font-size: 13px; color: var(--text2); line-height: 1.6; font-style: italic; }

  .iv-question-box { border-left: 4px solid; border-radius: 10px; padding: 14px 16px; background: var(--surface2); }
  .iv-q-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
  .iv-q-text { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.6; }

  .iv-transcript-area { min-height: 48px; margin-bottom: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
  .iv-transcript-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; margin-bottom: 4px; }
  .iv-transcript-text { color: var(--text); line-height: 1.6; }
  .iv-feedback-area { margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }

  .iv-score-pill { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }
  .iv-kw-row { font-size: 13px; color: var(--text2); }
  .iv-kw-label { font-weight: 600; }
  .kw-match { display: inline-block; background: #E8F5E9; color: #2E7D32; border-radius: 4px; padding: 1px 7px; margin: 2px; font-size: 12px; font-weight: 600; }
  .kw-miss  { display: inline-block; background: #FFEBEE; color: #C62828; border-radius: 4px; padding: 1px 7px; margin: 2px; font-size: 12px; font-weight: 600; }

  .iv-model-answer { background: #FFF8E1; border: 1px solid #FFE082; border-radius: 8px; padding: 10px 12px; }
  body.dark .iv-model-answer { background: #2E2600; border-color: #7C6C00; }
  .iv-model-label { font-size: 11px; font-weight: 700; color: #F57F17; text-transform: uppercase; margin-bottom: 4px; }
  .iv-model-text { font-size: 14px; color: var(--text); line-height: 1.6; }

  .iv-action-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .iv-btn-listen { padding: 10px 18px; background: var(--surface); border: 2px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text); transition: all .15s; }
  .iv-btn-listen:hover:not(:disabled) { border-color: #1565C0; color: #1565C0; }
  .iv-btn-listen:disabled { opacity: .6; cursor: default; }
  .iv-btn-record { padding: 10px 18px; background: #E3F2FD; border: 2px solid #1565C0; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; color: #1565C0; transition: all .15s; }
  .iv-btn-record.recording { background: #FFEBEE; border-color: #C62828; color: #C62828; animation: pulse 1s infinite; }
  .iv-btn-reveal { padding: 10px 18px; background: #FFF8E1; border: 2px solid #FFE082; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; color: #F57F17; transition: all .15s; }
  .iv-btn-reveal:hover { background: #FFF3CD; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

  .iv-result-detail { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
  .iv-result-row { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
  .iv-result-q { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
  .iv-result-transcript { font-size: 14px; color: var(--text); font-style: italic; margin-bottom: 4px; }

  .opt-btn.pending { font-weight: 700; }