/* 宅建士 学習アプリ — design tokens */

:root {
  /* primary / accent */
  --c-primary: #0068B7;
  --c-primary-dark: #00538F;
  --c-primary-light: #E0EFFA;
  --c-accent: #E8A33D;
  --c-accent-light: #FFF4E0;
  --c-pm: #6B3FA0;
  --c-pm-light: #F0E9F7;

  /* 分野色 */
  --c-field1: #2E6FB8;     /* 材料・施工 */
  --c-field1-bg: #E5EDF7;
  --c-field2: #B85C2E;     /* 管理・法規 */
  --c-field2-bg: #FBEEE5;
  --c-field3: #2E8C7B;     /* 環境・設備基礎 */
  --c-field3-bg: #E5F2EF;

  /* 必答 / 選択 */
  --c-required: #D64545;
  --c-required-bg: #FBE9E9;
  --c-select: #5A6373;
  --c-select-bg: #EDEEF1;

  /* semantic */
  --c-correct: #2E9B6B;
  --c-correct-bg: #E6F4ED;
  --c-wrong: #D64545;
  --c-wrong-bg: #FBE9E9;

  /* neutrals */
  --c-bg: #F7F6F2;
  --c-card: #FFFFFF;
  --c-ink: #1A1A1A;
  --c-ink2: #4A5160;
  --c-ink3: #8A909C;
  --c-line: #E8E5DE;
  --c-chip-bg: #EFECE5;
  --c-star: #E8A33D;

  --font:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue",
    sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  font-family: var(--font);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* ===== Screen container =====
   全画面のうちアクティブな1枚だけ display:block。
   <main id="app"> 配下に各 .screen を配置する。 */
.screen { display: none; min-height: 100vh; padding: 20px 16px 80px; }
.screen.is-active { display: block; }

/* iPhone 風のセンタリング（PCで開いてもモバイルレイアウト） */
.screen-inner {
  max-width: 420px; margin: 0 auto;
}

/* ===== Common bits ===== */
.h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.h2 { font-size: 18px; font-weight: 700; margin: 0; }
.body { font-size: 15px; line-height: 1.6; color: var(--c-ink2); margin: 0; }
.muted { color: var(--c-ink3); }

.btn-primary {
  width: 100%;
  padding: 16px 20px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s ease;
}
.btn-primary:disabled {
  background: var(--c-ink3);
  cursor: not-allowed;
}
.btn-primary:not(:disabled):active {
  background: var(--c-primary-dark);
}

.btn-ghost {
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  color: var(--c-ink2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}

.card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  padding: 18px;
}

.chip {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-chip-bg);
  color: var(--c-ink2);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.chip.field1 { background: var(--c-field1-bg); color: var(--c-field1); }
.chip.field2 { background: var(--c-field2-bg); color: var(--c-field2); }
.chip.field3 { background: var(--c-field3-bg); color: var(--c-field3); }
.chip.required { background: var(--c-required-bg); color: var(--c-required); }
.chip.select   { background: var(--c-select-bg);   color: var(--c-select); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(26,26,26,.92); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none; z-index: 1000;
  max-width: 90%;
}
.toast.show { opacity: 1; }

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 読み込み中オーバーレイ（全画面・操作ブロック） */
.loading-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, .30);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  animation: lo-fade .15s ease;
}
.loading-overlay.show { display: flex; }
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }
.loading-overlay__card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #fff; padding: 22px 30px;
  border-radius: var(--radius-lg); box-shadow: 0 10px 34px rgba(0,0,0,.20);
}
.loading-overlay__spinner {
  width: 30px; height: 30px;
  border: 3px solid rgba(30, 58, 95, .15); border-top-color: var(--c-primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.loading-overlay__text { font-size: 14px; font-weight: 600; color: var(--c-ink2); }

/* ===== Login screen ===== */
.login {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0 12px;
  min-height: calc(100vh - 100px);
}

/* 右上：試験までカウントダウン */
.login__top {
  display: flex; justify-content: flex-end;
  padding: 4px 0 0;
}
.login__countdown {
  padding: 6px 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink2); letter-spacing: 0.2px;
}
.login__countdown #login-days {
  color: var(--c-accent); font-weight: 800;
  font-feature-settings: "tnum";
}

/* ヒーロー：ロゴ + ブランド + タグライン */
.login__hero {
  margin-top: 48px;
  margin-bottom: 32px;
  text-align: center;
}
.login__logo {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 12px 24px -10px rgba(0, 104, 183, 0.5);
}
.login__logo-img {
  width: 152px; height: auto;
  display: block;
  margin: 0 auto 16px;
}
.sr-only-title {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.login__title {
  font-size: 28px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0 0 8px;
}
.login__tagline {
  font-size: 14px; color: var(--c-ink2);
  font-weight: 500;
  margin: 0;
}

/* フォーム */
.login__form {
  display: flex; flex-direction: column; gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 12px; font-weight: 700;
  color: var(--c-ink2); letter-spacing: 0.3px;
}
.field input {
  height: 56px; padding: 0 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  font-size: 16px; font-weight: 500;
  background: var(--c-card);
  color: var(--c-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.12);
}
.field .hint { font-size: 12px; color: var(--c-ink3); margin: 2px 0 0; }
.field.error input { border-color: var(--c-wrong); }
.field.error .hint { color: var(--c-wrong); }

/* CTA */
.login__cta {
  margin-top: 16px;
  width: 100%; height: 56px;
  border: none; border-radius: 16px;
  background: var(--c-primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, 0.8);
  transition: background 0.12s ease, transform 0.12s ease;
}
.login__cta:hover { background: var(--c-primary-dark); }
.login__cta:active { transform: translateY(1px); }
.login__cta:disabled {
  background: var(--c-chip-bg); color: var(--c-ink3);
  box-shadow: none; cursor: not-allowed;
}

/* ヘルプテキスト */
.login__help {
  margin-top: 16px;
  font-size: 11.5px; color: var(--c-ink3);
  line-height: 1.8;
  display: flex; flex-direction: column; gap: 2px;
}
.login__help > div {
  display: flex; gap: 6px; align-items: flex-start;
}
.login__help .ast { color: var(--c-ink3); flex-shrink: 0; }

/* 底部試験日 */
.login__footer {
  margin-top: auto;
  padding: 12px 0 8px;
  text-align: center;
  font-size: 11px; color: var(--c-ink3);
  font-weight: 600; letter-spacing: 0.3px;
}
.login__footer b { color: var(--c-ink2); font-weight: 700; }

/* ===== Login: 追加コンポーネント ===== */
.hint.is-error { color: var(--c-wrong); }

.login__sub-link {
  text-align: right;
  margin-top: -8px;
  margin-bottom: 14px;
}
.login__forgot {
  font-size: 11.5px;
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.login__divider {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; color: var(--c-ink3);
  font-weight: 700; letter-spacing: 1px;
}
.login__divider::before,
.login__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--c-line);
}

.login__secondary {
  margin-top: 14px;
  width: 100%; height: 52px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-card);
  color: var(--c-ink2);
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.login__secondary:hover { background: var(--c-bg); }

.login__link {
  color: var(--c-primary);
  text-decoration: underline;
  font-weight: 700;
}

/* ===== Signup screen ===== */
.signup {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 12px;
  min-height: calc(100vh - 100px);
}
.signup__top {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.signup__step {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 1px;
}
.signup__progress {
  margin-left: auto;
  display: flex; gap: 4px;
}
.signup__progress .bar {
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--c-chip-bg);
}
.signup__progress .bar.active {
  background: var(--c-primary);
}
.back-btn-text {
  width: 36px; height: 36px; border-radius: 18px;
  background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); cursor: pointer; padding: 0;
}
.back-btn-text:hover { background: var(--c-chip-bg); }

.signup__head { margin: 20px 0 18px; }
.signup__title {
  font-size: 24px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.signup__sub {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 500; line-height: 1.6;
  margin: 0;
}
.signup__hl { color: var(--c-primary); font-weight: 700; }

.signup__form {
  flex: 1; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 16px;
}
.signup__section-label {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 1px;
  margin-top: 10px;
}
.signup__optional {
  font-size: 10px; font-weight: 600;
  color: var(--c-ink3);
  letter-spacing: 0.3px;
}
.signup__radio-group {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.signup__radio {
  display: block;
  position: relative;
  cursor: pointer;
}
.signup__radio input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.signup__radio-box {
  display: block;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.signup__radio input[type="radio"]:checked + .signup__radio-box {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.signup__radio-title {
  display: block;
  font-size: 14px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.1px;
}
.signup__radio-sub {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--c-ink2);
  margin-top: 2px;
  line-height: 1.5;
}
.signup__cta {
  width: 100%; height: 56px;
  border: none; border-radius: 16px;
  background: var(--c-primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, 0.8);
}
.signup__cta:hover { background: var(--c-primary-dark); }
.signup__terms {
  margin-top: 10px;
  padding: 0 4px 8px;
  text-align: center;
  font-size: 10.5px;
  color: var(--c-ink3);
  font-weight: 600;
  line-height: 1.6;
}

/* ===== Password reset ===== */
.reset {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 16px;
  min-height: calc(100vh - 100px);
}
.reset__hero { margin: 16px 0 18px; }
.reset__title {
  font-size: 24px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.reset__sub {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 500; line-height: 1.7;
  margin: 0;
}
.reset__pill {
  display: inline-block;
  padding: 4px 9px; border-radius: 6px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.reset__sent {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 8px 60px;
}
.reset__sent-icon {
  width: 78px; height: 78px; border-radius: 39px;
  background: var(--c-primary-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.reset__sent-title {
  font-size: 22px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.reset__sent-body {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 500; line-height: 1.75;
  padding: 0 12px;
}
.reset__warn {
  margin-top: 28px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--c-accent-light);
  border: 1px solid rgba(232, 163, 61, 0.2);
  font-size: 11.5px;
  color: var(--c-ink2);
  font-weight: 600;
  line-height: 1.6;
}
.reset__warn b { color: var(--c-accent); }
.reset__resend {
  margin-top: 24px;
  font-size: 12px; color: var(--c-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== Admin login (dark navy) ===== */
.admin-login {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 28px;
  background: #003F6E;
  color: #fff;
  min-height: calc(100vh - 100px);
  margin: -20px -16px -80px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.admin-login__top {
  margin-top: 40px;
  margin-bottom: 28px;
}
.admin-login__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px; font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 18px;
}
.admin-login__title {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0 0 8px;
}
.admin-login__sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
.admin-login__form {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 20px;
}
.admin-login__field label {
  display: block;
  font-size: 12px; font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}
.admin-login__field input {
  width: 100%;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  padding: 0 16px;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.admin-login__field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.admin-login__field input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.2);
}
.admin-login__cta {
  margin-top: 18px;
  width: 100%; height: 56px;
  border: none; border-radius: 16px;
  background: var(--c-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(232, 163, 61, 0.8);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.admin-login__alt,
.admin-login__signup,
.admin-login__contact {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  line-height: 1.7;
  margin-top: 14px;
}
.admin-login__link {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}
.admin-login__contact {
  margin-top: auto;
  padding-top: 24px;
  font-size: 10.5px;
}

/* ===== Invite accept ===== */
.invite-accept {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 16px;
  min-height: calc(100vh - 100px);
}
.invite__hero {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px; margin-bottom: 18px;
}
.invite__pill {
  padding: 4px 9px; border-radius: 6px;
  background: #003F6E; color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px;
}
.invite__ttl {
  margin-left: auto;
  font-size: 10px; color: var(--c-ink3);
  font-weight: 700;
}
.invite__title {
  font-size: 22px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.invite__sub {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 500; line-height: 1.7;
  margin: 0 0 18px;
}
.invite__done {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 8px 60px;
}
.invite__done-icon {
  width: 84px; height: 84px; border-radius: 42px;
  background: var(--c-correct-bg);
  border: 3px solid var(--c-correct);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.invite__done-title {
  font-size: 22px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.invite__done-body {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 500; line-height: 1.7;
  padding: 0 16px;
  margin: 0 0 32px;
}

/* ═════════════════════════════════════════════════════════
   管理者ダッシュボード
   ═════════════════════════════════════════════════════════ */
.adm-loading, .adm-error {
  padding: 40px 16px;
  text-align: center;
  color: var(--c-ink3);
  font-size: 13px;
}
.adm-error { color: var(--c-wrong); font-weight: 700; }

.adm { display: flex; flex-direction: column; gap: 12px; padding-bottom: 80px; }
.adm__head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 8px;
}
.adm__avatar {
  width: 40px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.adm__head-text { flex: 1; min-width: 0; }
.adm__eyebrow {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 6px;
}
.adm__badge {
  padding: 1px 5px; border-radius: 3px;
  background: #003F6E; color: #fff;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.8px;
}
.adm__badge--owner {
  background: linear-gradient(135deg, #7a4dff 0%, #5b2fd9 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(122, 77, 255, 0.35);
}
.ainv__row-role {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
}
.ainv__row-role--admin {
  background: linear-gradient(135deg, #7a4dff 0%, #5b2fd9 100%);
  color: #fff;
}
.ainv__info--accent {
  border-left: 3px solid #7a4dff !important;
  background: #f4f0ff !important;
}
.adm__name {
  font-size: 16px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.2px;
  margin-top: 1px;
}
.adm__menu {
  width: 36px; height: 36px; border-radius: 18px;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-ink2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.adm__ctx {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--c-primary-light);
  border: 1px solid rgba(30, 58, 95, 0.13);
  display: flex; align-items: center; gap: 10px;
}
.adm__ctx-text {
  flex: 1; font-size: 12px; font-weight: 700; color: var(--c-ink);
}
.adm__ctx-sub {
  font-weight: 600; color: var(--c-ink3); margin-left: 4px;
}
.adm__ctx-id {
  font-size: 10px; color: var(--c-ink3); font-weight: 700;
}
.adm__ctx-id b {
  color: var(--c-ink2);
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
}

/* KPI */
.adm__kpi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

/* チーム累計ストリップ */
.adm__team-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: var(--c-primary-light);
  border: 1px solid rgba(30, 58, 95, 0.13);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
}
.adm__team-strip-item {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: center;
  text-align: center;
}
.adm__team-strip-item .lbl {
  font-size: 10px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 0.5px;
}
.adm__team-strip-item .val {
  font-size: 16px; font-weight: 800;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.adm__team-strip-item .val .unit {
  font-size: 10px; font-weight: 700;
  color: var(--c-ink3);
  margin-left: 1px;
}
.adm__kpi-card {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 12px 14px;
}
.adm__kpi-card.is-alert::before {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 5px;
  background: var(--c-wrong);
  box-shadow: 0 0 0 2px var(--c-card);
}
.adm__kpi-label {
  font-size: 10px; font-weight: 700;
  color: var(--c-ink3); letter-spacing: 0.5px;
}
.adm__kpi-val {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: 3px;
  font-feature-settings: "tnum";
}
.adm__kpi-val .num {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1;
}
.adm__kpi-val .unit {
  font-size: 11px; font-weight: 700;
}
.adm__kpi-val--primary .num,
.adm__kpi-val--primary .unit { color: var(--c-primary); }
.adm__kpi-val--correct .num,
.adm__kpi-val--correct .unit { color: var(--c-correct); }
.adm__kpi-val--wrong .num,
.adm__kpi-val--wrong .unit { color: var(--c-wrong); }
.adm__kpi-sub {
  font-size: 10px; color: var(--c-ink3);
  font-weight: 600; margin-top: 4px;
}

/* Tabs */
.adm__tabs {
  display: flex; gap: 4px;
}
.adm__tab {
  padding: 7px 12px; border-radius: 99px;
  background: transparent; color: var(--c-ink2);
  border: 1px solid var(--c-line);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.adm__tab.is-active {
  background: var(--c-ink); color: #fff;
  border-color: var(--c-ink);
}
.adm__tab-badge {
  font-size: 9.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 99px;
  background: var(--c-chip-bg);
  color: var(--c-ink2);
  letter-spacing: 0.3px;
}
.adm__tab.is-active .adm__tab-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.adm__body { padding: 4px 0 8px; }

.adm__members-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.adm__members-label {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 0.5px;
}
.adm__members-sort {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
}

.adm__members {
  display: flex; flex-direction: column; gap: 8px;
}

/* 管理者一覧（OWNER / ADMIN） */
.adm__admin-list {
  display: flex; flex-direction: column; gap: 8px;
}
.adm__admin-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.adm__admin-row:hover { transform: translateY(-1px); border-color: var(--c-primary); }
.adm__admin-row-main {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.adm__admin-row-name {
  font-size: 14px; font-weight: 800;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 6px;
}
.adm__admin-row-sub {
  font-size: 12px;
  color: var(--c-ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm__admin-row-chev {
  font-size: 18px; color: var(--c-ink3);
  flex-shrink: 0;
}
.adm__member {
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.adm__member:hover { transform: translateY(-1px); }
.adm__member.risk {
  background: rgba(214, 69, 69, 0.04);
  border-color: rgba(214, 69, 69, 0.33);
  border-left-width: 4px;
  border-left-color: var(--c-wrong);
}
.adm__member.caution {
  border-left-width: 4px;
  border-left-color: var(--c-accent);
}
.adm__mem-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.adm__mem-avatar {
  width: 36px; height: 36px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.adm__mem-info { flex: 1; min-width: 0; }
.adm__mem-name {
  font-size: 13.5px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.1px;
}
.adm__mem-dept {
  font-size: 10.5px; color: var(--c-ink3); font-weight: 700;
}
.adm__mem-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
  margin-top: 2px;
  font-feature-settings: "tnum";
}
.adm__mem-meta .sep { color: var(--c-line); }
.adm__mem-meta b { color: var(--c-ink2); }
.adm__mem-meta b.warn { color: var(--c-wrong); }
.adm__mem-streak { display: flex; align-items: center; gap: 3px; }
.adm__mem-streak .dot {
  width: 5px; height: 5px; border-radius: 3px;
  background: rgba(138, 144, 156, 0.5);
}
.adm__mem-streak .dot.on { background: var(--c-accent); }

.adm__mem-status {
  padding: 4px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap; flex-shrink: 0;
}
.adm__mem-status.star { background: var(--c-accent-light); color: var(--c-accent); }
.adm__mem-status.good { background: var(--c-correct-bg); color: var(--c-correct); }
.adm__mem-status.caution { background: var(--c-accent-light); color: var(--c-accent); }
.adm__mem-status.risk { background: var(--c-wrong-bg); color: var(--c-wrong); }

.adm__mem-progress {
  display: flex; align-items: center; gap: 10px;
}
.adm__mem-bar {
  flex: 1; height: 6px;
  background: var(--c-chip-bg);
  border-radius: 3px;
  overflow: hidden;
}
.adm__mem-bar-fill {
  height: 100%; border-radius: 3px;
}
.adm__mem-bar-fill.good { background: var(--c-correct); }
.adm__mem-bar-fill.mid { background: var(--c-accent); }
.adm__mem-bar-fill.low { background: var(--c-wrong); }
.adm__mem-stats {
  display: flex; align-items: baseline; gap: 4px;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.adm__mem-stats .lbl {
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3);
}
.adm__mem-stats .val {
  font-size: 14px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.2px;
}
.adm__mem-stats .val.acc-good { color: var(--c-correct); }
.adm__mem-stats .val.acc-mid { color: var(--c-accent); }
.adm__mem-stats .val.acc-low { color: var(--c-wrong); }
.adm__mem-stats .unit { font-size: 10px; font-weight: 700; color: inherit; }
.adm__mem-stats .sep { color: var(--c-line); }
/* 合格判定（S/A=緑, B=アンバー, C=オレンジ, D=赤） */
.adm__mem-stats .val.pred-s,
.adm__mem-stats .val.pred-a { color: var(--c-correct); }
.adm__mem-stats .val.pred-b { color: var(--c-accent); }
.adm__mem-stats .val.pred-c { color: var(--c-field2); }
.adm__mem-stats .val.pred-d { color: var(--c-wrong); }
.adm__mem-stats .val.pred-none { color: var(--c-ink3); }

.adm__mem-mock {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-line);
  display: flex; align-items: center; gap: 8px;
  font-feature-settings: "tnum";
}
.adm__mem-mock-label {
  font-size: 10px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 0.5px;
}
.adm__mem-mock-badge {
  padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
}
.adm__mem-mock-badge.pass { background: var(--c-correct-bg); color: var(--c-correct); }
.adm__mem-mock-badge.fail { background: var(--c-wrong-bg); color: var(--c-wrong); }
.adm__mem-mock-score {
  font-size: 12.5px; font-weight: 800; color: var(--c-ink);
}
.adm__mem-mock-score .denom {
  font-size: 10px; font-weight: 700; color: var(--c-ink3);
}
.adm__mem-mock-date {
  margin-left: auto;
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
}
.adm__mem-mock-empty {
  font-size: 10.5px; color: var(--c-ink3); font-weight: 600;
}

/* Overview tab */
.adm__overview {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.adm__ov-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
}
.adm__ov-num {
  font-size: 22px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.5px;
  font-feature-settings: "tnum";
}
.adm__ov-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3); margin-top: 4px;
}
.adm__overview-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font-size: 11.5px; color: var(--c-ink2);
  line-height: 1.7;
  font-weight: 500;
}

.adm__empty {
  padding: 32px 16px;
  text-align: center;
}
.adm__empty p {
  font-size: 13px; color: var(--c-ink3);
  margin: 0 0 16px;
}

/* Footer nav */
.adm__nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
  padding: 8px 16px env(safe-area-inset-bottom, 8px);
  z-index: 20;
}
.adm__nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: none;
  color: var(--c-ink3);
  font-family: inherit;
  font-size: 9.5px; font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
}
.adm__nav-item.is-active {
  color: var(--c-primary);
  font-weight: 800;
}

/* Menu */
.adm-menu__bg {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.adm-menu {
  position: fixed; top: 60px; right: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.2);
  z-index: 101;
  min-width: 200px;
  padding: 6px;
}
.adm-menu__item {
  width: 100%;
  padding: 10px 14px;
  background: transparent; border: none;
  text-align: left;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  border-radius: 8px;
}
.adm-menu__item:hover { background: var(--c-bg); }
.adm-menu__item.is-danger { color: var(--c-wrong); }

/* ═════════════════════════════════════════════════════════
   管理者ユーザー詳細
   ═════════════════════════════════════════════════════════ */
.amd { padding-bottom: 24px; }
.amd__head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0 8px;
}
.amd__crumb {
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
}
.amd__profile {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px;
}
.amd__avatar {
  width: 56px; height: 56px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 800;
}
.amd__profile-info { flex: 1; min-width: 0; }
.amd__profile-name {
  font-size: 18px; font-weight: 800;
  color: var(--c-ink); letter-spacing: -0.2px;
}
.amd__profile-sub {
  font-size: 11.5px; color: var(--c-ink3);
  font-weight: 600; margin-top: 2px;
}
.amd__status {
  display: inline-flex; margin-top: 5px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px;
}
.amd__status.risk { background: var(--c-wrong-bg); color: var(--c-wrong); }
.amd__status.caution { background: var(--c-accent-light); color: var(--c-accent); }
.amd__status.good { background: var(--c-correct-bg); color: var(--c-correct); }
.amd__status.star { background: var(--c-accent-light); color: var(--c-accent); }

/* 合格判定チップ（ユーザー詳細プロフィール） */
.amd__pred {
  display: inline-flex; margin-top: 5px; margin-left: 4px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px;
}
.amd__pred.s, .amd__pred.a { background: var(--c-correct-bg); color: var(--c-correct); }
.amd__pred.b { background: var(--c-accent-light); color: #9A6516; }
.amd__pred.c { background: var(--c-field2-bg); color: var(--c-field2); }
.amd__pred.d { background: var(--c-wrong-bg); color: var(--c-wrong); }
.amd__pred.none { background: var(--c-chip-bg); color: var(--c-ink3); }

.amd__kpi {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.amd__kpi.amd__kpi--4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.amd__mini {
  flex: 1;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.amd__mini .lbl {
  font-size: 10px; font-weight: 700;
  color: var(--c-ink3); letter-spacing: 0.5px;
}
.amd__mini .val {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: 3px;
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1;
  font-feature-settings: "tnum";
}
.amd__mini .val .unit {
  font-size: 11px; font-weight: 700;
}
.amd__mini.good .val, .amd__mini.good .val .unit { color: var(--c-correct); }
.amd__mini.mid .val, .amd__mini.mid .val .unit { color: var(--c-accent); }
.amd__mini.low .val, .amd__mini.low .val .unit { color: var(--c-wrong); }
.amd__mini .sub {
  font-size: 9.5px; color: var(--c-ink3);
  font-weight: 600; margin-top: 4px;
}

.amd__section-title {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 0.8px;
  padding: 4px 2px 8px;
}
.amd__heatmap-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin-bottom: 12px;
}
.amd__heatmap {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px;
}
.amd__hm-cell {
  aspect-ratio: 1/1;
  border-radius: 3px;
}
.amd__hm-cell.l0 { background: #EFECE5; }
.amd__hm-cell.l1 { background: #C5DCC9; }
.amd__hm-cell.l2 { background: #7CC498; }
.amd__hm-cell.l3 { background: #3FA774; }
.amd__hm-cell.l4 { background: #2E9B6B; }
.amd__hm-legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; color: var(--c-ink3); font-weight: 700;
  margin-top: 8px;
}
.amd__hm-legend-cells {
  display: flex; gap: 2px;
}
.amd__hm-legend-cells .amd__hm-cell {
  width: 12px; height: 12px;
}

.amd__mock-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.amd__mock-latest {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.amd__mock-pill {
  padding: 4px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px;
}
.amd__mock-pill.pass { background: var(--c-correct-bg); color: var(--c-correct); }
.amd__mock-pill.fail { background: var(--c-wrong-bg); color: var(--c-wrong); }
.amd__mock-score {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum";
}
.amd__mock-score.pass { color: var(--c-correct); }
.amd__mock-score.fail { color: var(--c-wrong); }
.amd__mock-score .denom {
  font-size: 11px; font-weight: 700;
  color: var(--c-ink3);
}
.amd__mock-line {
  margin-left: auto;
  font-size: 10px; color: var(--c-ink3); font-weight: 700;
}

.amd__mock-chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 60px; padding: 0 4px;
}
.amd__mock-bar-wrap {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.amd__mock-bar-val {
  font-size: 10.5px; font-weight: 800;
  font-feature-settings: "tnum";
}
.amd__mock-bar-val.pass { color: var(--c-correct); }
.amd__mock-bar-val.fail { color: var(--c-wrong); }
.amd__mock-bar {
  width: 100%; border-radius: 4px;
}
.amd__mock-bar.pass { background: var(--c-correct); }
.amd__mock-bar.fail { background: var(--c-wrong); }
.amd__mock-bar-date {
  font-size: 9.5px; color: var(--c-ink3); font-weight: 700;
  font-feature-settings: "tnum";
}

.amd__subj-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.amd__subj-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.amd__subj-row .name {
  width: 96px;
  font-size: 12px; font-weight: 700; color: var(--c-ink);
}
.amd__subj-row .bar {
  flex: 1; height: 5px;
  background: var(--c-chip-bg);
  border-radius: 3px;
  overflow: hidden;
}
.amd__subj-row .bar .fill {
  height: 100%;
}
.amd__subj-row .fill.good { background: var(--c-correct); }
.amd__subj-row .fill.mid { background: var(--c-accent); }
.amd__subj-row .fill.low { background: var(--c-wrong); }
.amd__subj-row .acc {
  width: 40px; text-align: right;
  font-size: 11px; font-weight: 800;
  font-feature-settings: "tnum";
}
.amd__subj-row .acc.good { color: var(--c-correct); }
.amd__subj-row .acc.mid { color: var(--c-accent); }
.amd__subj-row .acc.low { color: var(--c-wrong); }
.amd__subj-row .cnt {
  width: 56px; text-align: right;
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
  font-feature-settings: "tnum";
}

.amd__bottom-spacer { height: 24px; }

/* 退会ボタン（メンバー詳細の下部） */
.amd__danger {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--c-line);
}
.amd__danger-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--c-wrong);
  background: var(--c-card);
  color: var(--c-wrong);
  font-size: 13px; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer;
}
.amd__danger-btn:hover { background: var(--c-wrong-bg); }
.amd__danger-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--c-ink3);
  text-align: center;
}
.set-modal__list {
  margin: 8px 0 16px;
  padding-left: 20px;
  font-size: 12px;
  color: var(--c-ink2);
  line-height: 1.8;
}

/* ═════════════════════════════════════════════════════════
   管理者：招待
   ═════════════════════════════════════════════════════════ */
.ainv { padding-bottom: 80px; }
.ainv__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 10px;
}
.ainv__head-text { flex: 1; }
.ainv__eyebrow {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 4px;
}
.ainv__title {
  font-size: 18px; font-weight: 800;
  color: var(--c-ink); letter-spacing: -0.3px;
  margin-top: 1px;
}
.ainv__tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
}
.ainv__tab {
  padding: 7px 14px; border-radius: 99px;
  background: transparent; color: var(--c-ink2);
  border: 1px solid var(--c-line);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.ainv__tab.is-active {
  background: var(--c-ink); color: #fff;
  border-color: var(--c-ink);
  font-weight: 800;
}
.ainv__body { padding: 4px 0; }
.ainv__info {
  display: flex; gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--c-primary-light);
  border: 1px solid rgba(30, 58, 95, 0.13);
  margin-bottom: 16px;
  font-size: 11.5px;
  color: var(--c-ink2);
  font-weight: 500;
  line-height: 1.6;
}
.ainv__info code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px; border-radius: 4px;
}

/* CSV upload */
.ainv__upload {
  margin: 12px 0;
}
.ainv__upload input[type="file"] { display: none; }
.ainv__upload-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--c-primary);
  border-radius: 10px;
  background: var(--c-card);
  color: var(--c-primary);
  font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.ainv__upload-btn:hover { background: var(--c-primary-light); }
.ainv__upload-or {
  display: inline-block;
  margin-left: 12px;
  font-size: 11px; color: var(--c-ink3);
  font-weight: 600;
}
.ainv__textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-card);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-ink);
  resize: vertical;
  margin-bottom: 12px;
}
.ainv__bulk-summary {
  display: flex; gap: 8px; margin: 8px 0;
}
.ainv__bulk-sum {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
  text-align: center;
}
.ainv__bulk-sum.ok {
  background: var(--c-correct-bg);
  border: 1px solid rgba(46, 155, 107, 0.33);
  color: var(--c-correct);
}
.ainv__bulk-sum.ok b { font-size: 18px; font-weight: 800; font-feature-settings: "tnum"; }
.ainv__bulk-sum.err {
  background: var(--c-wrong-bg);
  border: 1px solid rgba(214, 69, 69, 0.33);
  color: var(--c-wrong);
}
.ainv__bulk-sum.err b { font-size: 18px; font-weight: 800; font-feature-settings: "tnum"; }
.ainv__bulk-rows {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ainv__bulk-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
}
.ainv__bulk-row:last-child { border-bottom: none; }
.ainv__bulk-row.err { background: rgba(214, 69, 69, 0.05); }
.ainv__bulk-row .status-icon {
  width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800;
}
.ainv__bulk-row.ok .status-icon { background: var(--c-correct); }
.ainv__bulk-row.err .status-icon { background: var(--c-wrong); }
.ainv__bulk-row .name { font-weight: 800; color: var(--c-ink); }
.ainv__bulk-row .email { flex: 1; color: var(--c-ink3); }
.ainv__bulk-row .dept { color: var(--c-ink3); font-size: 10px; }
.ainv__bulk-row .err-msg {
  width: 100%; margin-left: 26px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--c-wrong); font-weight: 700;
}

/* Invite list */
.ainv__list {
  display: flex; flex-direction: column; gap: 8px;
}
.ainv__row {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.ainv__row.accepted { background: var(--c-correct-bg); }
.ainv__row.expired { opacity: 0.7; }
.ainv__row.cancelled { opacity: 0.5; }
.ainv__row-main { flex: 1; min-width: 0; }
.ainv__row-name {
  font-size: 13px; font-weight: 800;
  color: var(--c-ink);
}
.ainv__row-dept {
  font-size: 10.5px; color: var(--c-ink3); font-weight: 700;
}
.ainv__row-email {
  font-size: 11px; color: var(--c-ink2); font-weight: 600;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ainv__row-date {
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
  margin-top: 2px;
  font-feature-settings: "tnum";
}
.ainv__row-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.ainv__row-status {
  padding: 3px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ainv__row-status.accepted { background: var(--c-correct); color: #fff; }
.ainv__row-status.pending { background: var(--c-accent); color: #fff; }
.ainv__row-status.expired { background: var(--c-ink3); color: #fff; }
.ainv__row-status.cancelled { background: var(--c-chip-bg); color: var(--c-ink3); }
.ainv__row-actions {
  display: flex; gap: 4px;
}
.ainv__row-action {
  padding: 3px 8px;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  background: var(--c-card);
  font-family: inherit;
  font-size: 10px; font-weight: 700;
  color: var(--c-ink2);
  cursor: pointer;
}
.ainv__row-action:hover { background: var(--c-bg); }
.ainv__row-action.danger { color: var(--c-wrong); }
.ainv__empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px; color: var(--c-ink3);
}

/* ===== Top screen ===== */
.top {
  display: flex; flex-direction: column; gap: 16px;
}
.top__greet {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 16px;
}
.top__greet .name { font-size: 22px; font-weight: 700; }
.top__greet .icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-card); border: 1px solid var(--c-line);
  display: grid; place-items: center;
}

/* ヘッダーバー（ロゴ + 連続日数 + 履歴アイコン + ログアウト） */
.top__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 12px;
}
.top__logo {
  font-size: 13px; font-weight: 700; letter-spacing: .15em;
  color: var(--c-ink3);
  display: flex; align-items: center;
}
.top__logo img { height: 21px; width: auto; display: block; }
.top__exam {
  margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--c-primary); background: var(--c-primary-light);
  padding: 3px 9px; border-radius: 999px;
}
.top__bar-right {
  display: flex; align-items: center; gap: 8px;
}
.top__streak {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--c-accent-light);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  color: #8a5a1a;
}
/* 管理者兼受験者: 管理者画面への切り替えボタン */
.top__admin-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: var(--c-primary-light);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
}
.top__admin-btn:hover { background: #DCE6F2; }
.top__streak .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}
.top__bar-right .icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-card); border: 1px solid var(--c-line);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
}

/* ===== History screen ===== */
.hist { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

.hist__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 8px;
}
.hist__back {
  width: 36px; height: 36px; border-radius: 18px;
  background: transparent; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); cursor: pointer;
}
.hist__back:hover { background: var(--c-chip-bg); }
.hist__heading { flex: 1; }
.hist__heading .title {
  font-size: 18px; font-weight: 800; color: var(--c-ink);
  letter-spacing: -0.3px;
}
.hist__refresh {
  width: 36px; height: 36px; border-radius: 18px;
  background: var(--c-card); border: 1px solid var(--c-line);
  color: var(--c-ink2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hist__refresh:hover { background: var(--c-chip-bg); }

.hist__loading, .hist__error {
  text-align: center; padding: 40px 16px;
  color: var(--c-ink3); font-size: 13px;
}
.hist__error { color: var(--c-wrong); font-weight: 700; }

.hist__empty {
  text-align: center; padding: 40px 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.hist__empty-icon { font-size: 36px; line-height: 1; margin-bottom: 4px; }
.hist__empty-title {
  font-size: 16px; font-weight: 800; color: var(--c-ink);
}
.hist__empty-sub {
  font-size: 12px; color: var(--c-ink3); font-weight: 600;
}

.hist__summary {
  display: flex; align-items: center; gap: 0;
  padding: 12px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
}
.hist__summary .cell { flex: 1; text-align: center; }
.hist__summary .div {
  width: 1px; height: 28px; background: var(--c-line);
}
.hist__summary .key {
  font-size: 9.5px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: 0.8px;
}
.hist__summary .val {
  font-size: 18px; font-weight: 800; color: var(--c-ink);
  font-feature-settings: "tnum"; letter-spacing: -0.3px;
  margin-top: 2px;
}
.hist__summary .val.good { color: var(--c-correct); }
.hist__summary .val.mid { color: var(--c-accent); }
.hist__summary .val.low { color: var(--c-wrong); }
.hist__summary .val .pct { font-size: 10px; margin-left: 1px; }

/* 履歴タブ（セッション / 問題別） */
.hist__tabs {
  display: flex; gap: 6px;
  margin: 12px 0 8px;
}
.hist__tab {
  flex: 1;
  padding: 9px 0;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-card);
  color: var(--c-ink2);
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.hist__tab.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* セッション行: クリック可能化 */
.hist__session.is-clickable { cursor: pointer; }
.hist__session.is-clickable:hover { border-color: var(--c-primary); }
.hist__chev {
  flex-shrink: 0;
  font-size: 18px; color: var(--c-ink3);
  margin-left: 2px;
}

/* 問題別 成績一覧 */
.hq__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 2px 8px;
}
.hq__label { font-size: 12px; font-weight: 800; color: var(--c-ink2); }
.hq__sort { display: flex; gap: 4px; }
.hq__sortbtn {
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--c-line); background: var(--c-card);
  color: var(--c-ink3); font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.hq__sortbtn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.hq__list { display: flex; flex-direction: column; gap: 6px; }
.hq__row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  cursor: pointer;
}
.hq__row:hover { border-color: var(--c-primary); }
.hq__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hq__title {
  font-size: 13px; font-weight: 800; color: var(--c-ink);
  display: flex; align-items: center; gap: 6px;
}
.hq__cat {
  font-size: 10px; font-weight: 700; color: var(--c-ink3);
  padding: 1px 7px; border-radius: 99px; background: var(--c-chip-bg);
}
.hq__marks { display: flex; gap: 3px; flex-wrap: wrap; }
.hq__marks .m {
  font-size: 11px; font-weight: 800; line-height: 1;
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.hq__marks .m.o { background: var(--c-correct-bg); color: var(--c-correct); }
.hq__marks .m.x { background: var(--c-wrong-bg); color: var(--c-wrong); }
.hq__rate { text-align: right; flex-shrink: 0; }
.hq__acc { font-size: 16px; font-weight: 800; font-feature-settings: "tnum"; }
.hq__acc.good { color: var(--c-correct); }
.hq__acc.mid { color: var(--c-accent); }
.hq__acc.low { color: var(--c-wrong); }
.hq__acc .pct { font-size: 10px; }
.hq__cnt { font-size: 10px; color: var(--c-ink3); font-feature-settings: "tnum"; }
.hq__chev { flex-shrink: 0; font-size: 18px; color: var(--c-ink3); }

/* セッション詳細（各問の正誤） */
.hsd__summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--c-primary-light);
  border-radius: 12px;
}
.hsd__date { font-size: 12px; font-weight: 700; color: var(--c-ink2); }
.hsd__stat { font-size: 13px; font-weight: 700; color: var(--c-ink); font-feature-settings: "tnum"; }
.hsd__stat .num.good { color: var(--c-correct); }
.hsd__stat .num.mid { color: var(--c-accent); }
.hsd__stat .num.low { color: var(--c-wrong); }
.hsd__hint { font-size: 11px; color: var(--c-ink3); margin: 0 4px 8px; }
.hsd__list { display: flex; flex-direction: column; gap: 5px; }
.hsd__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
}
.hsd__row:hover { border-color: var(--c-primary); }
.hsd__row.ng { background: var(--c-wrong-bg); }
.hsd__no { font-size: 11px; font-weight: 700; color: var(--c-ink3); width: 18px; text-align: center; flex-shrink: 0; }
.hsd__mark { font-size: 14px; font-weight: 800; width: 18px; text-align: center; flex-shrink: 0; }
.hsd__mark.o { color: var(--c-correct); }
.hsd__mark.x { color: var(--c-wrong); }
.hsd__title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--c-ink); }
.hsd__sel { font-size: 11px; font-weight: 700; color: var(--c-ink3); flex-shrink: 0; }
.hsd__chev { font-size: 16px; color: var(--c-ink3); flex-shrink: 0; }

.hist__group {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.hist__date {
  display: flex; align-items: baseline; gap: 6px;
  padding: 0 4px;
  font-feature-settings: "tnum";
}
.hist__date .d {
  font-size: 12px; font-weight: 800; color: var(--c-ink);
}
.hist__date .w {
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3);
}
.hist__date .rel {
  padding: 1px 8px; border-radius: 99px;
  background: var(--c-accent); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.hist__date .count {
  margin-left: auto;
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
}

.hist__sessions {
  display: flex; flex-direction: column; gap: 8px;
}

.hist__session {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.hist__icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hist__session.mode-normal .hist__icon { background: var(--c-primary-light); color: var(--c-primary); }
.hist__session.mode-year   .hist__icon { background: var(--c-pm-light); color: var(--c-pm); }
.hist__session.mode-mock   .hist__icon { background: var(--c-accent-light); color: var(--c-accent); }
.hist__session.mode-review .hist__icon { background: var(--c-chip-bg); color: var(--c-ink2); }

.hist__main { flex: 1; min-width: 0; }
.hist__top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.hist__mode {
  font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
}
.hist__session.mode-normal .hist__mode { color: var(--c-primary); }
.hist__session.mode-year   .hist__mode { color: var(--c-pm); }
.hist__session.mode-mock   .hist__mode { color: var(--c-accent); }
.hist__session.mode-review .hist__mode { color: var(--c-ink2); }

.hist__sep { color: var(--c-ink3); }
.hist__year {
  font-size: 10.5px; color: var(--c-ink3); font-weight: 700;
}
.hist__pass {
  padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
}
.hist__pass.pass { background: var(--c-correct-bg); color: var(--c-correct); }
.hist__pass.fail { background: var(--c-wrong-bg); color: var(--c-wrong); }

.hist__stat {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; color: var(--c-ink2); font-weight: 600;
  font-feature-settings: "tnum";
  flex-wrap: wrap;
}
.hist__stat b { color: var(--c-ink); font-weight: 800; }
.hist__stat b.good { color: var(--c-correct); }
.hist__stat b.mid { color: var(--c-accent); }
.hist__stat b.low { color: var(--c-wrong); }

.hist__rate {
  text-align: right; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end;
}
.hist__rate .num {
  font-size: 20px; font-weight: 800;
  font-feature-settings: "tnum"; letter-spacing: -0.3px;
  line-height: 1;
}
.hist__rate .num.good { color: var(--c-correct); }
.hist__rate .num.mid { color: var(--c-accent); }
.hist__rate .num.low { color: var(--c-wrong); }
.hist__rate .pct {
  font-size: 10px; font-weight: 700; margin-left: 1px;
}

/* ===== Settings screen ===== */
.settings { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }

.settings__head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 4px;
}
.settings__close {
  width: 36px; height: 36px; border-radius: 18px;
  background: transparent; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink2); cursor: pointer;
}
.settings__close:hover { background: var(--c-chip-bg); }
.settings__heading { display: flex; flex-direction: column; gap: 1px; }
.settings__heading .eyebrow {
  font-size: 11px; font-weight: 700; color: var(--c-ink3); letter-spacing: 1px;
}
.settings__heading .title {
  font-size: 22px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.3px;
}

.settings__section { display: flex; flex-direction: column; gap: 8px; }
.settings__label {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 1.2px;
  padding-left: 4px;
}
.settings__card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
}
.settings__row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: transparent; border: none;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.settings__row:not(.static):hover { background: var(--c-bg); }
.settings__row.static { cursor: default; }
a.settings__row { text-decoration: none; color: var(--c-ink); }
.settings__row-main { flex: 1; min-width: 0; }
.settings__row .key {
  font-size: 14px; font-weight: 700;
  color: var(--c-ink);
}
.settings__row .val {
  font-size: 12px; font-weight: 600;
  color: var(--c-ink2);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings__row .val.muted { color: var(--c-ink3); font-weight: 500; }
.settings__row .val.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum";
}
.settings__row.danger .key { color: var(--c-wrong); }
.settings__row.danger .val { color: rgba(214, 69, 69, 0.7); }
.settings__chev {
  font-size: 22px; font-weight: 600;
  color: var(--c-ink3); line-height: 1;
}
.settings__divider {
  height: 1px; background: var(--c-line);
  margin: 0 16px;
}

.settings__logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; border-radius: 14px;
  background: var(--c-card);
  border: 1.5px solid rgba(214, 69, 69, 0.3);
  color: var(--c-wrong);
  font-family: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: 0.3px; cursor: pointer;
  margin-top: 4px;
}
.settings__logout:hover {
  background: var(--c-wrong-bg);
  border-color: var(--c-wrong);
}

/* ===== Set modal (settings sub-modals) ===== */
.set-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 22, 30, 0.45);
  z-index: 50;
  animation: sm-fade 0.16s ease-out;
}
.set-modal {
  position: fixed; left: 20px; right: 20px;
  top: 50%; transform: translateY(-55%);
  max-width: 380px; margin: 0 auto;
  background: var(--c-card); border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 60;
  animation: sm-pop 0.2s ease-out;
}
.set-modal__icon {
  width: 46px; height: 46px; border-radius: 23px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  background: var(--c-primary-light);
  color: var(--c-primary);
}
.set-modal__icon.danger {
  background: var(--c-wrong-bg);
  color: var(--c-wrong);
}
.set-modal__title {
  font-size: 17px; font-weight: 800; color: var(--c-ink);
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.set-modal__title.center { text-align: center; }
.set-modal__sub {
  font-size: 12px; color: var(--c-ink3);
  font-weight: 600;
  margin-bottom: 14px;
}
.set-modal__sub.center { text-align: center; }
.set-modal__field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.set-modal__field .lbl {
  font-size: 11px; font-weight: 700;
  color: var(--c-ink3); letter-spacing: 0.4px;
}
.set-modal__field input {
  height: 44px; padding: 0 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-bg);
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--c-ink);
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.set-modal__field input:focus {
  border-color: var(--c-primary);
  background: var(--c-card);
}
.set-modal__alert {
  background: var(--c-wrong-bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.set-modal__alert .lbl {
  font-size: 12px; font-weight: 800; color: var(--c-wrong);
  margin-bottom: 6px;
}
.set-modal__alert ul {
  margin: 0; padding-left: 18px;
  font-size: 12px; line-height: 1.7;
  color: var(--c-ink2); font-weight: 600;
}
.set-modal__alert .hint {
  font-size: 11px; color: var(--c-ink3);
  font-weight: 600; margin-top: 6px;
}
.set-modal__cta {
  display: flex; gap: 10px;
  margin-top: 4px;
}
.set-modal__cta .btn-cancel,
.set-modal__cta .btn-save,
.set-modal__cta .btn-danger {
  flex: 1;
  height: 46px; border-radius: 12px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.3px;
}
.set-modal__cta .btn-cancel {
  border: 1.5px solid var(--c-line);
  background: var(--c-card); color: var(--c-ink2);
}
.set-modal__cta .btn-save {
  border: none;
  background: var(--c-primary); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(30, 58, 95, 0.6);
}
.set-modal__cta .btn-danger {
  border: none;
  background: var(--c-wrong); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(214, 69, 69, 0.6);
}
.set-modal__cta .btn-cancel:hover { background: var(--c-chip-bg); }
.set-modal__cta .btn-save:hover { background: var(--c-primary-dark); }
.set-modal__cta .btn-danger:hover { background: #b03939; }

@keyframes sm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sm-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.96); }
  to { opacity: 1; transform: translateY(-55%) scale(1); }
}

.top__exam {
  font-size: 12px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: .04em;
}

/* メインのカウントダウン（試験まで N 日） */
.top__hero {
  padding: 4px 4px 8px;
}
.top__hero-label {
  font-size: 12px; color: var(--c-ink3); font-weight: 500;
  margin-bottom: 4px;
}
.top__hero-row {
  display: flex; align-items: baseline; gap: 8px;
}
.top__hero-row .num {
  font-size: 60px; font-weight: 800;
  letter-spacing: -.04em; line-height: .95;
  color: var(--c-primary);
  font-feature-settings: "tnum";
}
.top__hero-row .unit {
  font-size: 18px; font-weight: 700; color: var(--c-primary);
}
.top__hero-row .exam-date {
  margin-left: auto;
  font-size: 11px; color: var(--c-ink3); font-weight: 500;
  text-align: right; line-height: 1.4;
}

.top__menu {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-top: 8px;
}
.top__menu .menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  text-align: left;
}
.top__menu .menu-item .lbl { font-size: 15px; font-weight: 700; }
.top__menu .menu-item .sub { font-size: 12px; color: var(--c-ink3); margin-top: 2px; }
.top__menu .menu-item .arr { color: var(--c-ink3); font-size: 18px; }

/* 学習サマリ（今日/学習済み/正答率） */
.top__summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 14px 10px;
  margin-bottom: 10px;
}
.top__summary-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.top__summary-item .lbl {
  font-size: 10px; font-weight: 800; color: var(--c-ink3);
  letter-spacing: 0.5px;
}
.top__summary-item .val {
  display: flex; align-items: baseline; gap: 2px;
  color: var(--c-ink);
}
.top__summary-item .val .num {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary);
  line-height: 1;
}
.top__summary-item .val .unit {
  font-size: 11px; font-weight: 700; color: var(--c-ink3);
}

/* 学習段階バー */
.top__tiers {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.top__tiers-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.top__tiers-head .lbl {
  font-size: 12px; font-weight: 800; color: var(--c-ink2);
}
.top__tiers-head .sub {
  font-size: 11px; font-weight: 700; color: var(--c-primary);
}
.top__tiers-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f1f3;
}
.top__tiers-bar .seg {
  height: 100%;
  transition: width 0.35s ease;
}
.top__tiers-bar .seg.untouched { background: #e5e7eb; }
.top__tiers-bar .seg.learning  { background: #fbbf24; }
.top__tiers-bar .seg.settling  { background: #60a5fa; }
.top__tiers-bar .seg.mastered  { background: #22c55e; }
.top__tiers-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--c-ink2);
}
.top__tiers-legend .lg {
  display: inline-flex; align-items: center; gap: 6px;
}
.top__tiers-legend .lg .dot {
  width: 8px; height: 8px; border-radius: 4px;
}
.top__tiers-legend .lg .dot.untouched { background: #e5e7eb; }
.top__tiers-legend .lg .dot.learning  { background: #fbbf24; }
.top__tiers-legend .lg .dot.settling  { background: #60a5fa; }
.top__tiers-legend .lg .dot.mastered  { background: #22c55e; }
.top__tiers-legend .lg b {
  margin-left: auto;
  font-weight: 800; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* 回転数プログレスカード */
.top__progress {
  background: var(--c-card);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid var(--c-line);
  margin-bottom: 12px;
}
.top__progress-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.top__progress-head .lbl {
  font-size: 12px; color: var(--c-ink3); font-weight: 500;
  margin-bottom: 4px;
}
.top__progress-head .val {
  display: flex; align-items: baseline; gap: 6px;
}
.top__progress-head .val .big {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--c-ink);
  font-feature-settings: "tnum";
}
.top__progress-head .val .goal {
  font-size: 13px; color: var(--c-ink3); font-weight: 600;
}
.top__progress-head .pct {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 13px; font-weight: 700;
  font-feature-settings: "tnum";
}
.top__progress-bar {
  height: 8px;
  background: var(--c-chip-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.top__progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), #2F5A8F);
  border-radius: 4px;
  transition: width .3s ease;
}
.top__progress-bar .tick {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-bg);
}
.top__progress-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.top__progress-foot .left {
  display: flex; align-items: center; gap: 6px;
}
.top__progress-foot .left .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
}
.top__progress-foot .left .t {
  font-size: 12px; color: var(--c-ink2); font-weight: 600;
}
.top__progress-foot .right {
  font-size: 12px; font-weight: 700; color: var(--c-ink);
  font-feature-settings: "tnum";
}
.top__progress-foot .right .ok { color: var(--c-accent); }
.top__progress-foot .right .sep,
.top__progress-foot .right .all { color: var(--c-ink); }

/* ペース逆算行（回転数カード内） */
.top__pace {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--c-bg);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-ink2);
}
.top__pace b { color: var(--c-ink); font-weight: 800; }

/* 合格判定カード */
.top__goukaku {
  background: var(--c-card);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid var(--c-line);
  margin-bottom: 12px;
}
.top__goukaku-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.top__goukaku-head .lbl {
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
}
.top__goukaku-head .sub {
  font-size: 10px; color: var(--c-ink3);
}
.top__goukaku-ph .t {
  font-size: 13px; font-weight: 600; color: var(--c-ink2);
  margin-bottom: 8px;
}
.top__goukaku-ph .bar {
  height: 8px;
  background: var(--c-chip-bg);
  border-radius: 4px;
  overflow: hidden;
}
.top__goukaku-ph .bar .fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: 4px;
  transition: width .3s ease;
}
.top__goukaku-ph .s {
  margin-top: 6px;
  font-size: 11px; color: var(--c-ink3); text-align: right;
  font-feature-settings: "tnum";
}
.top__goukaku-main {
  display: flex; align-items: center; gap: 16px;
}
.gk-grade {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-chip-bg); color: var(--c-ink2);
}
.gk-grade .g {
  font-size: 30px; font-weight: 800; line-height: 1;
}
.gk-grade .cap {
  font-size: 10px; font-weight: 600; margin-top: 2px;
}
.gk-grade.s, .gk-grade.a { background: var(--c-correct-bg); color: var(--c-correct); }
.gk-grade.b { background: var(--c-accent-light); color: #9A6516; }
.gk-grade.c { background: var(--c-field2-bg); color: var(--c-field2); }
.gk-grade.d { background: var(--c-wrong-bg); color: var(--c-wrong); }
.gk-score { flex: 1; min-width: 0; }
.gk-score .row {
  display: flex; align-items: baseline; gap: 6px;
}
.gk-score .row .num {
  font-size: 28px; font-weight: 800; letter-spacing: -.03em;
  color: var(--c-ink);
  font-feature-settings: "tnum";
}
.gk-score .row .unit {
  font-size: 13px; color: var(--c-ink3); font-weight: 600;
}
.gk-score .gauge {
  position: relative;
  height: 8px;
  background: var(--c-chip-bg);
  border-radius: 4px;
  margin: 8px 0 5px;
}
.gk-score .gauge .fill {
  position: absolute; left: 0; top: 0;
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.gk-score .gauge .fill.ng { background: var(--c-accent); }
.gk-score .gauge .fill.ok { background: var(--c-correct); }
.gk-score .gauge .mark {
  position: absolute; top: -3px;
  width: 2px; height: 14px;
  background: var(--c-correct);
}
.gk-score .cap-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--c-ink3);
}
.gk-score .cap-row .pass { color: var(--c-correct); font-weight: 600; }
.top__goukaku-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px;
}
.top__goukaku-foot .box {
  background: var(--c-bg);
  border-radius: 12px;
  padding: 9px 12px;
  min-width: 0;
}
.top__goukaku-foot .box .k {
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
  margin-bottom: 3px;
}
.top__goukaku-foot .box .v {
  font-size: 13px; font-weight: 700; color: var(--c-ink);
}
.top__goukaku-foot .box .v.muted { color: var(--c-ink3); font-weight: 600; }
.top__goukaku-foot .box .v .ok { color: var(--c-correct); }
.top__goukaku-foot .box .v b { font-weight: 800; }
.top__goukaku-foot .box .s {
  margin-top: 2px;
  font-size: 10px; color: var(--c-ink3);
  font-feature-settings: "tnum";
}
.top__goukaku-foot .box .d.up { color: var(--c-correct); font-weight: 700; }
.top__goukaku-foot .box .d.down { color: var(--c-wrong); font-weight: 700; }

/* 科目別の実力カード */
.top__subjects {
  background: var(--c-card);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid var(--c-line);
  margin-bottom: 12px;
}
.top__subjects .head {
  margin-bottom: 12px;
}
.top__subjects .head .lbl {
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
}
.subj-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.subj-row:last-child { margin-bottom: 0; }
.subj-row .name {
  width: 60px; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--c-ink2);
}
.subj-row .bar {
  flex: 1;
  height: 6px;
  background: var(--c-chip-bg);
  border-radius: 3px;
  overflow: hidden;
}
.subj-row .bar .fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.subj-row .bar .fill.good { background: var(--c-correct); }
.subj-row .bar .fill.mid  { background: var(--c-accent); }
.subj-row .bar .fill.low  { background: var(--c-wrong); }
.subj-row .pts {
  width: 82px; flex-shrink: 0;
  text-align: right;
  font-size: 12px; font-weight: 600; color: var(--c-ink);
  font-feature-settings: "tnum";
}
.top__subjects .hint {
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--c-bg);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-ink2);
}

/* 科目フィルターチップ */
.top__chips {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.top__chips::-webkit-scrollbar { display: none; }
.top-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--c-card);
  color: var(--c-ink2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  letterspacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.top-chip.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* 問題数セレクタ（10問 / 5問） */
.top__qcount {
  margin-bottom: 12px;
}
.top__qcount-label {
  font-size: 11px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: .08em; margin-bottom: 8px;
}
.top__qcount-row {
  display: flex; gap: 8px;
  background: var(--c-chip-bg);
  padding: 4px;
  border-radius: 12px;
}
.qcount-btn {
  flex: 1; height: 40px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--c-ink3);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.qcount-btn .num {
  font-size: 17px; font-weight: 800;
  font-feature-settings: "tnum";
}
.qcount-btn .unit { font-size: 12px; color: var(--c-ink3); font-weight: 600; }
.qcount-btn .badge {
  font-size: 10px; font-weight: 800; color: var(--c-accent);
  background: var(--c-accent-light);
  padding: 2px 6px; border-radius: 4px;
  margin-left: 4px; letter-spacing: .03em;
}
.qcount-btn .hint {
  font-size: 10px; font-weight: 700; margin-left: 4px;
  color: var(--c-ink3);
}
.qcount-btn.is-active {
  background: var(--c-card);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.qcount-btn.is-active .unit { color: var(--c-ink3); }

/* 下部フロートドック（問題数セレクタ + メインCTA）。TOP画面が非表示になると一緒に消える */
.top__dock {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 20px));
  z-index: 60;
  background: rgba(247, 246, 242, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 12px 32px -8px rgba(30, 58, 95, 0.35);
}
.top__dock .top__qcount { margin-bottom: 8px; }
.top__dock .top__qcount-label { margin-bottom: 4px; }
.top__dock .top__qcount-row { background: rgba(232, 229, 222, 0.85); }

/* メイン CTA（ドック内の大きな1ボタン） */
.top__cta {
  width: 100%; height: 64px;
  border: none; border-radius: 16px;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(30, 58, 95, 0.4);
}
/* フロートドックに最下部のコンテンツが隠れないよう余白を確保 */
section[data-screen="top"] { padding-bottom: 220px; }
.top__cta:disabled { opacity: .5; cursor: not-allowed; }
.top__cta.is-busy { opacity: .65; cursor: progress; pointer-events: none; }
.submenu-btn:disabled,
.submenu-btn.is-busy { opacity: .55; cursor: not-allowed; pointer-events: none; }
.top__cta-text { text-align: left; }
.top__cta-sub {
  font-size: 11px; opacity: .7; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 2px;
}
.top__cta-title {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
}
.top__cta-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
}

/* サブメニュー（2列横並び） */
.top__submenu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.submenu-btn {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
}
.submenu-btn:hover { background: var(--c-bg); }
.submenu-btn__head {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-primary);
}
.submenu-btn__head .title {
  font-size: 15px; font-weight: 700; color: var(--c-ink);
}
.submenu-btn__sub {
  font-size: 11px; color: var(--c-ink3); font-weight: 500;
  margin-left: 28px;
}

/* ===== Question screen ===== */
.q {
  display: flex; flex-direction: column; gap: 16px;
}
.q__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 12px;
}
.q__bar .back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: none;
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.q__bar .progress-wrap {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.q__bar .dots {
  display: flex; gap: 4px;
}
.q__bar .dots .seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--c-chip-bg);
}
.q__bar .dots .seg.done { background: var(--c-primary); }
.q__bar .dots .seg.cur  { background: var(--c-accent); }
.q__bar .progress {
  font-size: 12px; color: var(--c-ink3); font-weight: 600;
  font-feature-settings: "tnum";
}
.q__bar .progress .cur { color: var(--c-ink); font-weight: 700; }
.q__bar .mock-timer { /* 既存ルールはそのまま使う */ }

.q__meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.q__tag {
  padding: 5px 11px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.q__tag.subject {
  background: var(--c-primary-light);
  color: var(--c-primary);
}
.q__tag.subject.field1 { background: var(--c-field1-bg); color: var(--c-field1); }
.q__tag.subject.field2 { background: var(--c-field2-bg); color: var(--c-field2); }
.q__tag.subject.field3 { background: var(--c-field3-bg); color: var(--c-field3); }
.q__tag.source {
  background: var(--c-chip-bg); color: var(--c-ink2);
  font-weight: 600;
}
.q__tag.rotation {
  margin-left: auto;
  background: var(--c-accent-light);
  color: #8a5a1a;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 8px;
}
.q__tag.multi {
  background: var(--c-accent-light); color: #8a5a1a;
}

.q__prompt {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
}
.q__prompt-cat {
  font-size: 12px; font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.q__prompt-text {
  font-size: 15px; line-height: 1.75;
  color: var(--c-ink); letter-spacing: .01em;
}
.q__prompt-text .hl {
  background: linear-gradient(transparent 70%, var(--c-accent-light) 70%);
  font-weight: 700;
}
/* CTA 行: 回答するボタン + 右端の読み上げアイコンボタン */
.q__cta-row {
  display: flex; align-items: stretch; gap: 8px;
}
.q__cta-row .q__cta {
  flex: 1;
  min-width: 0;
}
/* 読み上げ／音声回答ボタン（CTA 行の右端、四角アイコンボタン） */
.q__speak-btn,
.q__answer-mic {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  border: 1.5px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-ink2);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.q__speak-btn:hover,
.q__answer-mic:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
/* 音声回答: 録音中は赤く点滅 */
.q__answer-mic.is-recording {
  background: var(--c-wrong);
  border-color: var(--c-wrong);
  color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.q__speak-btn .ico-stop { display: none; }
.q__speak-btn.is-speaking {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.q__speak-btn.is-speaking .ico-play { display: none; }
.q__speak-btn.is-speaking .ico-stop { display: inline-block; }
.q__speak-btn.is-loading {
  background: var(--c-chip-bg);
  border-color: var(--c-line);
  color: var(--c-ink3);
  pointer-events: none;
}
.q__speak-btn.is-loading .ico-play,
.q__speak-btn.is-loading .ico-stop {
  animation: speak-loading 1s linear infinite;
}
@keyframes speak-loading {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.q__prompt-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #F0E9F7;
  color: #6B3FA0;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3px;
}

/* ===== 個数問題（タイプA: 各設問○×） ===== */
.counting {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 4px;
}
.counting__cards {
  display: flex; flex-direction: column; gap: 10px;
}
.stmt-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 14px;
  transition: border-color 0.15s ease;
}
.stmt-card.has-ans {
  border-color: var(--c-primary);
}
.stmt-card__head {
  display: flex; gap: 10px;
  margin-bottom: 12px;
}
.stmt-card__key {
  width: 28px; height: 28px; border-radius: 8px;
  flex-shrink: 0;
  background: var(--c-primary-light); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.stmt-card__text {
  flex: 1;
  font-size: 13.5px; line-height: 1.65;
  color: var(--c-ink);
  padding-top: 2px;
  white-space: pre-wrap;
}
.stmt-card__row {
  display: flex; gap: 10px;
  padding-left: 38px;
  align-items: center;
}
.ox-btn {
  flex: 1; max-width: 130px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--c-line);
  background: var(--c-card);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ox-btn .mark { font-size: 20px; font-weight: 800; }
.ox-btn .lbl { font-size: 12px; font-weight: 700; }
.ox-btn.o .mark { color: var(--c-correct); }
.ox-btn.x .mark { color: var(--c-wrong); }
.ox-btn.o.is-on {
  border-color: var(--c-correct);
  background: var(--c-correct-bg);
}
.ox-btn.x.is-on {
  border-color: var(--c-wrong);
  background: var(--c-wrong-bg);
}
.ox-btn:disabled, .ox-btn.is-disabled {
  cursor: default; opacity: 0.6;
}
.ox-hint {
  font-size: 11px; color: var(--c-ink3); font-weight: 600;
  margin-left: 4px;
}
.counting__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px;
  font-size: 12px; color: var(--c-ink3); font-weight: 700;
  letter-spacing: .3px;
}
.counting__status b { color: var(--c-ink2); margin-left: 4px; }
.counting__status b.ok { color: var(--c-correct); }
.counting__status-dots {
  display: flex; gap: 4px;
}
.counting__status-dots .dot {
  width: 22px; height: 4px; border-radius: 2px;
  background: var(--c-chip-bg);
}
.counting__status-dots .dot.on { background: var(--c-primary); }
.counting__tally {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-primary-light);
  font-size: 11px;
  flex-wrap: wrap;
}
.counting__tally .lbl {
  font-size: 10px; font-weight: 800;
  color: var(--c-primary); letter-spacing: .5px;
}
.counting__tally .ttl {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700;
}
.counting__tally .ttl .t { font-size: 10.5px; }
.counting__tally .ttl .n { font-size: 14px; font-weight: 800; }
.counting__tally .ttl.o { color: var(--c-correct); }
.counting__tally .ttl.x { color: var(--c-wrong); }
.counting__tally .sep { color: var(--c-ink3); }
.counting__tally .qa {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
}
.counting__tally .qa b {
  color: var(--c-ink);
  font-weight: 800;
}

/* ===== 個数問題 回答後（あなた vs 正解） ===== */
.hdo {
  margin-bottom: 4px;
}
.hdo__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 6px;
  gap: 8px;
}
.hdo__title {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3);
  letter-spacing: 0.5px;
}
.hdo__summary {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3);
  text-align: right;
}
.hdo__summary b {
  color: var(--c-ink); font-weight: 800;
}
.hdo__list {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
}
.hdo__row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line);
}
.hdo__row:last-child { border-bottom: none; }
.hdo__row.is-wrong { background: var(--c-wrong-bg); }
.hdo__row-head {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 8px;
}
.hdo__key {
  width: 24px; height: 24px; border-radius: 6px;
  flex-shrink: 0;
  background: var(--c-chip-bg);
  color: var(--c-ink2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.hdo__key.ok {
  background: var(--c-correct-bg); color: var(--c-correct);
}
.hdo__key.ng {
  background: var(--c-wrong-bg); color: var(--c-wrong);
}
.hdo__text {
  flex: 1;
  font-size: 12.5px; line-height: 1.6;
  color: var(--c-ink);
  white-space: pre-wrap;
}
.hdo__row-body {
  display: flex; align-items: center; gap: 8px;
  padding-left: 34px;
  flex-wrap: wrap;
}
.hdo__lbl {
  font-size: 10px; font-weight: 700;
  color: var(--c-ink3);
  letter-spacing: 0.3px;
}
.hdo__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 11px;
  border: 1.5px solid;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3px;
}
.hdo__badge.user.o,
.hdo__badge.truth.o {
  background: var(--c-correct-bg);
  border-color: var(--c-correct);
  color: var(--c-correct);
}
.hdo__badge.user.x,
.hdo__badge.truth.x {
  background: var(--c-wrong-bg);
  border-color: var(--c-wrong);
  color: var(--c-wrong);
}
.hdo__badge.truth.o,
.hdo__badge.truth.x {
  background: var(--c-card); /* 正解バッジは塗りなし枠線のみ */
}
.hdo__badge.user.none {
  background: var(--c-chip-bg);
  border-color: var(--c-line);
  color: var(--c-ink3);
}
.hdo__badge.truth.unknown {
  background: var(--c-card);
  border-color: var(--c-line);
  color: var(--c-ink3);
}
.hdo__arrow {
  color: var(--c-ink3);
}
.hdo__match-wrap {
  margin-left: auto;
}
.hdo__match {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3px;
}
.hdo__match.ok { color: var(--c-correct); }
.hdo__match.ng { color: var(--c-wrong); }
.hdo__match.unknown { color: var(--c-ink3); }
.hdo__note {
  margin: 8px 4px 0;
  font-size: 10.5px;
  color: var(--c-ink3);
}

.q__image {
  width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  display: block;
  /* maintain aspect ratio if known later */
}

.q__choices { display: flex; flex-direction: column; gap: 10px; }
.q__choices.is-answered .choice {
  padding: 10px 12px;
  border-radius: 10px;
}
.q__choices.is-answered .choice .num {
  width: 22px; height: 22px; font-size: 11px;
}
/* 回答後：正解・自分の不正解以外は薄く */
.q__choices.is-answered .choice:not(.is-correct):not(.is-wrong) {
  opacity: .5;
}
/* 回答後：正解 / 自分の不正解にインラインラベル（テキスト本文の上） */
.q__choices.is-answered .choice {
  position: relative;
}
.q__choices.is-answered .choice.is-correct .txt::before,
.q__choices.is-answered .choice.is-wrong .txt::before {
  display: block;
  margin-bottom: 3px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .8px;
}
.q__choices.is-answered .choice.is-correct .txt::before {
  content: '✓ 正解';
  color: var(--c-correct);
}
.q__choices.is-answered .choice.is-wrong .txt::before {
  content: '✗ あなたの回答';
  color: var(--c-wrong);
}
.choice {
  width: 100%;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px 14px 12px;
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.choice .num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 14px;
  border: 1.5px solid var(--c-line);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--c-ink2);
  margin-top: 1px;
}
.choice .txt { font-size: 14px; line-height: 1.65; color: var(--c-ink); letter-spacing: 0.05px; }

.choice.is-selected {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
  box-shadow: 0 2px 0 rgba(30, 58, 95, 0.12);
}
.choice.is-selected .num { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.choice.is-correct { border-color: var(--c-correct); background: var(--c-correct-bg); }
.choice.is-correct .num { background: var(--c-correct); color: #fff; border-color: var(--c-correct); }
.choice.is-wrong { border-color: var(--c-wrong); background: var(--c-wrong-bg); }
.choice.is-wrong .num { background: var(--c-wrong); color: #fff; border-color: var(--c-wrong); }

/* multi2 用に2問選択中の表示 */
.choice.multi .num { border-radius: 6px; }

/* ===== 選択肢が画像のとき ===== */
.choice.has-image {
  align-items: stretch;
  padding: 12px;
}
.choice.has-image .num {
  align-self: flex-start;
  margin-top: 0;
}
.choice.has-image .img-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
  background: var(--c-bg);
  border-radius: 8px;
  font-size: 11px; color: var(--c-ink3);
  overflow: hidden;
}
.choice.has-image .img-wrap.loading::before {
  content: '';
  width: 18px; height: 18px;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  margin-right: 6px;
  animation: spin 0.8s linear infinite;
}
.choice.has-image .img-wrap.failed {
  color: var(--c-wrong); font-weight: 700;
}
.choice.has-image .img-wrap .choice-img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto; height: auto;
  object-fit: contain;
}
/* 回答後の縮小表示時も画像はそれなりに見える */
.q__choices.is-answered .choice.has-image .img-wrap {
  min-height: 80px;
}
.q__choices.is-answered .choice.has-image .img-wrap .choice-img {
  max-height: 120px;
}

/* フィードバック バナー（コンパクト） */
.q__feedback {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid;
  margin-bottom: 12px;
}
.q__feedback.correct { background: var(--c-correct-bg); border-color: rgba(46, 155, 107, 0.25); }
.q__feedback.wrong   { background: var(--c-wrong-bg);   border-color: rgba(214, 69, 69, 0.2); }
.q__feedback .icon-circle {
  width: 30px; height: 30px; border-radius: 15px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #fff; font-size: 14px; font-weight: 800;
}
.q__feedback.correct .icon-circle { background: var(--c-correct); }
.q__feedback.wrong   .icon-circle { background: var(--c-wrong); }
.q__feedback .text { flex: 1; min-width: 0; }
.q__feedback .lbl { font-size: 16px; font-weight: 800; line-height: 1; }
.q__feedback.correct .lbl { color: var(--c-correct); }
.q__feedback.wrong .lbl { color: var(--c-wrong); }
.q__feedback .subtitle {
  font-size: 11px; color: var(--c-ink2); font-weight: 600;
  margin-top: 3px;
}
.q__feedback .subtitle b { color: var(--c-ink); font-weight: 800; }

/* sticky CTA バー */
.q__cta-bar {
  position: sticky;
  bottom: 0;
  margin: 18px -16px 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  z-index: 5;
}
.q__cta-bar .btn-primary {
  height: 56px;
  border-radius: 16px;
  font-size: 16px; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px -6px rgba(30, 58, 95, 0.5);
}
.q__cta { margin-top: 0; }
.q__cta-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-ink3);
  letter-spacing: 0.3px;
}

/* ===== Confidence buttons ===== */
.confidence {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.confidence__label {
  font-size: 13px; font-weight: 600; color: var(--c-ink2);
  margin: 0;
}
.confidence__row { display: flex; gap: 8px; }
.confidence__btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-ink2);
  font-size: 13px; font-weight: 600;
}
.confidence__btn.is-on.sure   { border-color: var(--c-correct); color: var(--c-correct); background: var(--c-correct-bg); }
.confidence__btn.is-on.unsure { border-color: var(--c-accent);  color: var(--c-accent);  background: var(--c-accent-light); }

/* ===== Explanation slot ===== */
.explanation {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 12px 14px;
}
.explanation__head {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
}
.explanation__head .bar {
  width: 3px; height: 12px;
  background: var(--c-primary);
  border-radius: 2px;
}
.explanation__head .lbl {
  font-size: 11px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: 0.5px;
}
.explanation__body {
  font-size: 12px; line-height: 1.75;
  color: var(--c-ink2);
  white-space: pre-wrap;
}
.explanation__body b { color: var(--c-ink); font-weight: 800; }
.explanation .ph { color: var(--c-ink3); font-style: normal; }

/* ===== Coaching cards (回答後に表示) ===== */
.coach { display: flex; flex-direction: column; gap: 10px; }
.coach__card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.coach__card .lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 6px;
}
.coach__card .body {
  font-size: 13px; line-height: 1.7; color: var(--c-ink);
  white-space: pre-wrap;
}
.coach__card.memory .lbl { color: var(--c-pm); }
.coach__card.memory { background: var(--c-pm-light); border-color: var(--c-pm); }
.coach__card.trap .lbl   { color: var(--c-required); }
.coach__card.trap { background: var(--c-required-bg); border-color: var(--c-required); }
.coach__card.focus .lbl  { color: var(--c-field1); }
.coach__card.focus { background: var(--c-field1-bg); border-color: var(--c-field1); }

.coach__details {
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  overflow: hidden;
}
.coach__details > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.coach__details > summary::-webkit-details-marker { display: none; }
.coach__details > summary::after { content: '▾'; color: var(--c-ink3); transition: transform .15s ease; }
.coach__details[open] > summary::after { transform: rotate(180deg); }
.coach__details > .body {
  padding: 0 14px 14px;
  font-size: 13px; line-height: 1.7; color: var(--c-ink2);
  white-space: pre-wrap;
}

/* 各選択肢の解説（折りたたみリスト） */
.choice-coach {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.choice-coach > .label {
  font-size: 11px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: .04em;
}
.choice-coach__row {
  border-top: 1px solid var(--c-line);
  padding: 8px 0;
}
.choice-coach__row:first-of-type { border-top: none; padding-top: 4px; }
.choice-coach__row > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.5;
}
.choice-coach__row > summary::-webkit-details-marker { display: none; }
.choice-coach__row .num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink2);
}
.choice-coach__row.is-correct .num { background: var(--c-correct); color: #fff; border-color: var(--c-correct); }
.choice-coach__row.is-wrong .num   { background: var(--c-wrong);   color: #fff; border-color: var(--c-wrong); }
.choice-coach__row .text { flex: 1; color: var(--c-ink); }
.choice-coach__row .body {
  margin-top: 8px; padding: 8px 10px;
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.7;
  color: var(--c-ink2);
  white-space: pre-wrap;
}
.choice-coach__row .focus-tag {
  display: inline-block;
  padding: 2px 6px;
  margin-top: 6px;
  background: var(--c-chip-bg);
  color: var(--c-ink3);
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700;
}

/* ===== Markdown スタイル（AI返答用） ===== */
.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
  margin: 12px 0 6px; line-height: 1.4;
}
.md-h1 { font-size: 16px; font-weight: 700; }
.md-h2 { font-size: 15px; font-weight: 700; color: var(--c-primary); }
.md-h3 { font-size: 14px; font-weight: 700; }
.md-h4, .md-h5, .md-h6 { font-size: 13px; font-weight: 700; }
.md-p {
  margin: 6px 0; line-height: 1.7; word-break: break-word;
}
.md-ul, .md-ol {
  margin: 6px 0 6px 1.2em; padding: 0; line-height: 1.7;
}
.md-ul li, .md-ol li { margin: 2px 0; }
.md-quote {
  margin: 8px 0; padding: 8px 12px;
  background: var(--c-bg);
  border-left: 3px solid var(--c-primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-ink2); font-size: 13px;
}
.md-quote .md-p { margin: 2px 0; }
.md-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 12px;
}
.md-table th, .md-table td {
  border: 1px solid var(--c-line);
  padding: 6px 8px;
  text-align: left;
  line-height: 1.5;
}
.md-table th { background: var(--c-bg); font-weight: 700; color: var(--c-ink2); }
hr { border: none; border-top: 1px solid var(--c-line); margin: 10px 0; }
code {
  background: var(--c-chip-bg);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== AI chat (design画面③-B/C) ===== */
.ai-chat {
  display: flex; flex-direction: column; gap: 10px;
}

/* 開く前ボタン（ダッシュ枠の情報カード型） */
.ai-chat__open {
  width: 100%;
  padding: 14px 14px;
  background: var(--c-card);
  border-radius: 14px;
  border: 1.5px dashed rgba(30, 58, 95, 0.35);
  color: var(--c-primary);
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ai-chat__open:hover {
  background: var(--c-primary-light);
  border-color: var(--c-primary);
}
.ai-chat__open .ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-chat__open .text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ai-chat__open .title {
  font-size: 13px; font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.1px;
}
.ai-chat__open .sub {
  font-size: 10.5px; font-weight: 600;
  color: var(--c-ink3);
  letter-spacing: 0.1px;
}
.ai-chat__open .chev {
  flex-shrink: 0;
  color: var(--c-primary);
}

/* ヘッダー：AIアイコン + タイトル */
.ai-chat__header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 4px;
}
.ai-chat__header .ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ai-chat__header .title {
  font-size: 12px; font-weight: 800; color: var(--c-primary);
  letter-spacing: .04em;
}
.ai-chat__header .sub {
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
}

/* メッセージリスト */
.ai-chat__messages {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 4px;
}
.ai-msg {
  display: flex; gap: 6px; align-items: flex-end;
}
.ai-msg.user { flex-direction: row-reverse; }

/* AIアバター */
.ai-msg .avatar {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-primary-light);
  display: grid; place-items: center;
}
.ai-msg.user .avatar { display: none; }

/* 吹き出し本体（左右非対称の角丸） */
.ai-msg .bubble {
  max-width: 78%;
  padding: 10px 13px;
  font-size: 13px; line-height: 1.65;
  word-break: break-word;
}
.ai-msg.assistant .bubble {
  background: var(--c-card);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: 4px 14px 14px 14px;
}
.ai-msg.user .bubble {
  background: var(--c-primary);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

/* AI 応答内の Markdown 用色調整（user バブル内では使わない） */
.ai-msg.assistant .bubble .md-h2 { color: var(--c-primary); }
.ai-msg.user .bubble .md-h2 { color: #fff; }

/* 「考えています…」の typing バブル */
.ai-typing {
  display: flex; align-items: flex-end; gap: 6px;
}
.ai-typing .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-primary-light);
  display: grid; place-items: center; flex-shrink: 0;
}
.ai-typing .bubble {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--c-ink3); font-weight: 600;
}
.typing-dots {
  display: inline-flex; gap: 3px;
}
.typing-dots span {
  width: 4px; height: 4px; border-radius: 2px;
  background: var(--c-primary);
  animation: tkdot 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tkdot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* 入力欄（ピル型・primary枠） */
.ai-chat__input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-card);
  border: 1.5px solid var(--c-primary);
  border-radius: 24px;
  padding: 4px 4px 4px 16px;
}
.ai-chat__input-wrap .ai-chat__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 14px;
  color: var(--c-ink);
}
.ai-chat__input-wrap .ai-chat__input::placeholder {
  color: var(--c-ink3);
}
.ai-chat__input-wrap .send-btn,
.ai-chat__input-wrap .stop-btn,
.ai-chat__input-wrap .mic-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ai-chat__input-wrap .mic-btn {
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  color: var(--c-ink2);
  width: 36px; height: 36px;
}
.ai-chat__input-wrap .mic-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.ai-chat__input-wrap .mic-btn.is-recording {
  background: var(--c-wrong);
  border-color: var(--c-wrong);
  color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(214, 69, 69, 0); }
}
.ai-chat__input-wrap .send-btn {
  background: var(--c-primary);
  color: #fff;
}
.ai-chat__input-wrap .send-btn:disabled {
  background: var(--c-ink3); cursor: not-allowed;
}
.ai-chat__input-wrap .stop-btn {
  background: var(--c-primary);
  color: #fff;
}
.ai-chat__input-wrap .stop-btn .square {
  width: 12px; height: 12px; border-radius: 2px; background: #fff;
}

.ai-chat__hint {
  font-size: 10.5px; color: var(--c-ink3);
  text-align: center; margin: 6px 0 0;
  font-weight: 600;
}

.ai-chat__error {
  font-size: 12px; color: var(--c-wrong);
  background: var(--c-wrong-bg);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin: 0 4px;
}
.ai-chat__history-loading {
  font-size: 12px;
  color: var(--c-ink3);
  text-align: center;
  padding: 8px 4px;
  font-style: italic;
}

/* ===== Image loading state ===== */
.q__image-wrap {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.q__image-wrap.loading {
  padding: 24px;
  text-align: center;
  font-size: 13px; color: var(--c-ink3);
}
.q__image {
  width: 100%; display: block;
}

/* ===== Result screen (Session End) ===== */
.result { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.result__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 4px;
}
.result__head .label {
  font-size: 12px; color: var(--c-ink3); font-weight: 600; letter-spacing: .04em;
}
.result__head .title {
  font-size: 22px; font-weight: 800; color: var(--c-ink);
  letter-spacing: -.02em; margin-top: 2px;
}
.result__head .close-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-card); border: 1px solid var(--c-line);
  display: grid; place-items: center;
  cursor: pointer;
}
.result__head .close-btn svg { display: block; }

/* ドーナツ */
.result__hero {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  padding: 24px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.result__donut {
  position: relative;
  width: 180px; height: 180px;
}
.result__donut svg { transform: rotate(-90deg); }
.result__donut .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.result__donut .center .lbl {
  font-size: 11px; color: var(--c-ink3); font-weight: 700;
  letter-spacing: .12em;
}
.result__donut .center .pct {
  font-size: 52px; font-weight: 800; color: var(--c-ink);
  letter-spacing: -.06em; line-height: 1;
  font-feature-settings: "tnum"; margin-top: 2px;
}
.result__donut .center .pct .pct-sym {
  font-size: 22px; margin-left: 2px;
}
.result__donut .center .ratio {
  font-size: 13px; color: var(--c-ink2); font-weight: 700; margin-top: 4px;
  font-feature-settings: "tnum";
}

/* 内訳（自信あり / まだ不安 / 不正解） */
.result__breakdown {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.breakdown-cell {
  border-radius: 12px; padding: 10px 8px; text-align: center;
}
.breakdown-cell .num {
  font-size: 20px; font-weight: 800; line-height: 1;
  font-feature-settings: "tnum";
}
.breakdown-cell .num .unit { font-size: 11px; margin-left: 1px; }
.breakdown-cell .lbl {
  font-size: 11px; font-weight: 700; color: var(--c-ink2); margin-top: 4px;
}
.breakdown-cell.sure   { background: var(--c-correct-bg); }
.breakdown-cell.sure .num   { color: var(--c-correct); }
.breakdown-cell.unsure { background: var(--c-accent-light); }
.breakdown-cell.unsure .num { color: var(--c-accent); }
.breakdown-cell.wrong  { background: var(--c-wrong-bg); }
.breakdown-cell.wrong .num  { color: var(--c-wrong); }

/* 回転数アップ ご褒美カード */
.result__rotation {
  background: linear-gradient(135deg, var(--c-accent-light) 0%, #FFF9EC 100%);
  border: 1px solid rgba(232, 163, 61, 0.2);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: center;
}
.result__rotation .icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-accent);
  display: grid; place-items: center;
  color: #fff;
}
.result__rotation .text { flex: 1; }
.result__rotation .text .top {
  font-size: 11px; color: #8a5a1a; font-weight: 700;
  letter-spacing: .08em;
}
.result__rotation .text .body {
  font-size: 15px; font-weight: 700; color: var(--c-ink);
  line-height: 1.4; margin-top: 2px;
}
.result__rotation .text .body b {
  color: var(--c-accent); font-size: 22px; font-weight: 800;
}

/* 連続日数のヒント */
.result__hint {
  font-size: 12px; color: var(--c-ink3);
  text-align: center; font-weight: 600; letter-spacing: .03em;
  margin: 4px 0;
}

/* CTA ボタン2分割 */
.result__cta .btn-home {
  width: 100%;
  height: 56px; min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-card);
  color: var(--c-ink);
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.result__cta .btn-again {
  width: 100%;
  height: 56px; min-height: 56px;
  padding: 0 18px;
  border: none; border-radius: 16px;
  background: var(--c-primary);
  color: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, 0.8);
  box-sizing: border-box;
}
.result__cta .btn-home:hover { background: var(--c-chip-bg); }
.result__cta .btn-again:hover { background: var(--c-primary-dark); }
.result__cta .btn-home:active,
.result__cta .btn-again:active { transform: translateY(1px); }

/* 詳細を見る（折りたたみ） */
.result__more {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.result__more > summary {
  padding: 14px 16px;
  cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.result__more > summary::-webkit-details-marker { display: none; }
.result__more > summary::after { content: '▾'; color: var(--c-ink3); transition: transform .15s ease; }
.result__more[open] > summary::after { transform: rotate(180deg); }
.result__more__body {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 14px;
}

.result__section { display: flex; flex-direction: column; gap: 10px; }
.result__section .label {
  font-size: 13px; font-weight: 700; color: var(--c-ink2);
  margin: 6px 4px 0;
}

.cat-row {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.cat-row .cat-name { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.cat-row .cat-meta { display: flex; justify-content: space-between; align-items: center; }
.cat-row .cat-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-chip-bg);
  overflow: hidden;
}
.cat-row .cat-bar > div {
  height: 100%; background: var(--c-primary); border-radius: var(--radius-pill);
}
.cat-row .cat-score { font-size: 12px; color: var(--c-ink2); font-feature-settings: "tnum"; }

.wrong-row {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.wrong-row .src { font-size: 11px; color: var(--c-ink3); }
.wrong-row .text {
  font-size: 13px; line-height: 1.5; color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 10問それぞれの正誤バッジ一覧 */
.q-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.q-cell {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px;
  cursor: pointer;
  transition: transform .1s ease;
}
.q-cell:active { transform: scale(.97); }
.q-cell .num {
  font-size: 11px; font-weight: 700; color: var(--c-ink3);
  line-height: 1;
}
.q-cell .mark {
  font-size: 22px; font-weight: 800;
  margin-top: 4px;
}
.q-cell.ok   { border-color: var(--c-correct); background: var(--c-correct-bg); }
.q-cell.ok .mark   { color: var(--c-correct); }
.q-cell.ng   { border-color: var(--c-wrong); background: var(--c-wrong-bg); }
.q-cell.ng .mark   { color: var(--c-wrong); }

.result__cta {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px;
}

/* ===== Year select ===== */
.year-select {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 4px;
  position: relative;
}
.year-select__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 6px;
}
.year-select__head .back {
  width: 36px; height: 36px; border-radius: 18px;
  background: transparent; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); cursor: pointer;
}
.year-select__head .back:hover { background: var(--c-chip-bg); }
.year-select__heading { display: flex; flex-direction: column; gap: 1px; }
.year-select__heading .eyebrow {
  font-size: 11px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: 1px;
}
.year-select__heading .title {
  font-size: 19px; font-weight: 800; color: var(--c-ink);
  letter-spacing: -0.3px;
}
.year-select__sub {
  font-size: 12px; color: var(--c-ink2); font-weight: 500;
  line-height: 1.6; margin: 0 0 4px;
}
.year-select__sub b { color: var(--c-ink); font-weight: 800; }

.year-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.year-card {
  position: relative;
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  padding: 14px 14px 12px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  font-family: inherit;
}
.year-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 8px 18px -8px rgba(30, 58, 95, 0.38);
  transform: translateY(-1px);
}
.year-card:active { transform: translateY(0); }

.year-card__badge {
  position: absolute; top: -7px; right: 10px;
  padding: 3px 8px; border-radius: 8px;
  background: var(--c-accent); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
}
.year-card__era {
  font-size: 13px; font-weight: 800;
  color: var(--c-ink); letter-spacing: -0.2px;
}
.year-card__seireki {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3); margin-top: 1px;
  font-feature-settings: "tnum";
}
.year-card__count {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: 10px;
}
.year-card__count .num {
  font-size: 18px; font-weight: 800;
  color: var(--c-primary);
  font-feature-settings: "tnum";
  line-height: 1;
}
.year-card__count .unit {
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3);
}
.year-card__divider {
  margin-top: 10px; padding-top: 0;
  border-top: 1px dashed var(--c-line);
}
.year-card__rate-row {
  margin-top: 9px;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 3px;
}
.year-card__rate-row .lbl {
  font-size: 9.5px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: 0.3px;
}
.year-card__rate-row .val {
  font-size: 14px; font-weight: 800;
  font-feature-settings: "tnum"; line-height: 1;
}
.year-card__rate-row .val.good { color: var(--c-correct); }
.year-card__rate-row .val.mid { color: var(--c-accent); }
.year-card__rate-row .val.low { color: var(--c-wrong); }
.year-card__rate-row .pct { font-size: 9px; font-weight: 700; margin-left: 1px; }
.year-card__bar {
  height: 3px; background: var(--c-chip-bg);
  border-radius: 2px; overflow: hidden; margin-bottom: 3px;
}
.year-card__bar > span {
  display: block; height: 100%; border-radius: 2px;
}
.year-card__bar > span.good { background: var(--c-correct); }
.year-card__bar > span.mid { background: var(--c-accent); }
.year-card__bar > span.low { background: var(--c-wrong); }
.year-card__sub {
  font-size: 9.5px; color: var(--c-ink3); font-weight: 600;
  font-feature-settings: "tnum";
}
.year-card__unset {
  margin-top: 9px;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--c-ink3); font-weight: 700;
}
.year-card__unset .dot {
  width: 5px; height: 5px; border-radius: 3px;
  background: var(--c-ink3); opacity: 0.35;
}
.year-card.warning {
  border-color: var(--c-required);
  background: var(--c-required-bg);
}
.year-card.warning .year-card__era { color: var(--c-required); }
.year-card.warning .year-card__count .num { color: var(--c-required); }

/* ===== Year confirm modal ===== */
.year-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 22, 30, 0.45);
  z-index: 50;
  animation: ym-fade 0.16s ease-out;
}
.year-modal {
  position: fixed; left: 20px; right: 20px;
  top: 50%; transform: translateY(-55%);
  max-width: 380px; margin: 0 auto;
  background: var(--c-card); border-radius: 20px;
  padding: 24px 22px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 60;
  animation: ym-pop 0.2s ease-out;
}
.year-modal__icon {
  width: 46px; height: 46px; border-radius: 23px;
  background: var(--c-primary-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; color: var(--c-primary);
}
.year-modal__title {
  font-size: 17px; font-weight: 800; color: var(--c-ink);
  text-align: center; letter-spacing: -0.2px;
  margin-bottom: 6px; line-height: 1.45;
}
.year-modal__prev {
  font-size: 12px; color: var(--c-ink3); text-align: center;
  font-weight: 600; margin-bottom: 6px;
}
.year-modal__prev b { color: var(--c-ink2); }
.year-modal__note {
  font-size: 11px; color: var(--c-ink3); text-align: center;
  font-weight: 500; margin-bottom: 18px; line-height: 1.55;
}
.year-modal__cta {
  display: flex; gap: 10px;
}
.year-modal__cta .btn-cancel,
.year-modal__cta .btn-start {
  height: 48px; border-radius: 14px;
  font-family: inherit; font-size: 14px;
  cursor: pointer;
}
.year-modal__cta .btn-cancel {
  flex: 1;
  border: 1.5px solid var(--c-line);
  background: var(--c-card); color: var(--c-ink2);
  font-weight: 700;
}
.year-modal__cta .btn-start {
  flex: 1.3;
  border: none;
  background: var(--c-primary); color: #fff;
  font-weight: 800; letter-spacing: 0.3px;
  box-shadow: 0 6px 16px -6px rgba(30, 58, 95, 0.7);
}
.year-modal__cta .btn-cancel:hover { background: var(--c-chip-bg); }
.year-modal__cta .btn-start:hover { background: var(--c-primary-dark); }

@keyframes ym-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ym-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.96); }
  to { opacity: 1; transform: translateY(-55%) scale(1); }
}

/* ===== Mock break (refresh) ===== */
.mock-break {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 16px;
}

.mock-break__hero {
  text-align: center;
  background: linear-gradient(135deg, var(--c-primary-light) 0%, #f5efde 100%);
  border-radius: 22px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(30, 58, 95, 0.08);
}
.mock-break__icon {
  font-size: 44px; line-height: 1;
  margin-bottom: 8px;
  animation: mb-icon-bounce 2.4s ease-in-out infinite;
}
@keyframes mb-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.mock-break__eyebrow {
  font-size: 11px; font-weight: 800;
  color: var(--c-primary); letter-spacing: 2px;
  margin-bottom: 4px;
}
.mock-break__title {
  font-size: 24px; font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}
.mock-break__sub {
  font-size: 13px; color: var(--c-ink2);
  font-weight: 600;
  margin: 0;
}

.mock-break__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mock-break__stat {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.mock-break__stat .key {
  font-size: 10.5px; font-weight: 700;
  color: var(--c-ink3); letter-spacing: 1px;
  margin-bottom: 6px;
}
.mock-break__stat .val {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin-bottom: 4px;
}
.mock-break__stat .val .num {
  font-size: 26px; font-weight: 800;
  color: var(--c-primary);
  font-feature-settings: "tnum"; line-height: 1;
  letter-spacing: -0.5px;
}
.mock-break__stat .val .num.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
}
.mock-break__stat .val .denom {
  font-size: 12px; font-weight: 700;
  color: var(--c-ink3);
}
.mock-break__stat .hint {
  font-size: 11px; font-weight: 700;
  color: var(--c-ink3);
}

.mock-break__tips {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 14px 16px 12px;
}
.mock-break__tips-label {
  font-size: 11px; font-weight: 800;
  color: var(--c-ink3); letter-spacing: 1.2px;
  margin-bottom: 10px;
}
.mock-break__tips-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mock-break__tips-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--c-ink);
}
.mock-break__tips-list .ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--c-primary-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}

.mock-break__note {
  font-size: 11px; color: var(--c-ink3);
  text-align: center; line-height: 1.5;
  padding: 0 4px;
}

.mock-break__cta {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.mock-break__cta .btn-cancel,
.mock-break__cta .btn-start {
  height: 52px; border-radius: 14px;
  font-family: inherit; font-size: 13px;
  letter-spacing: 0.3px; cursor: pointer;
}
.mock-break__cta .btn-cancel {
  flex: 1;
  border: 1.5px solid var(--c-line);
  background: var(--c-card); color: var(--c-ink2);
  font-weight: 700;
}
.mock-break__cta .btn-start {
  flex: 1.4;
  border: none;
  background: var(--c-primary); color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(30, 58, 95, 0.7);
}
.mock-break__cta .btn-cancel:hover { background: var(--c-chip-bg); }
.mock-break__cta .btn-start:hover { background: var(--c-primary-dark); }

/* ===== Mock dark header (during exam) ===== */
.q__mock-header {
  background: var(--c-ink);
  color: #fff;
  padding: 10px 20px 12px;
  margin: -20px -16px 12px;
  border-radius: 0;
}
.q__mock-header__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.q__mock-header__brand { display: flex; align-items: center; gap: 8px; }
.q__mock-header__icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--c-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.q__mock-header__label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
}
.q__mock-header__timer {
  display: flex; align-items: baseline; gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.q__mock-header__timer .lbl {
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 3px;
}
.q__mock-header__timer .val {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.5px; color: var(--c-accent);
  font-feature-settings: "tnum";
}
.q__mock-header__timer.warning .val {
  color: #ff7575;
  animation: mock-timer-pulse 1s ease-in-out infinite;
}
@keyframes mock-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.q__mock-header__progress {
  display: flex; align-items: center; gap: 8px;
}
.q__mock-header__progress .bar {
  flex: 1; height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px; overflow: hidden;
}
.q__mock-header__progress .bar > span {
  display: block; height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.q__mock-header__progress .count {
  font-size: 10.5px; font-weight: 700;
  color: #fff; font-feature-settings: "tnum";
}

/* ===== Mock end bar (bottom of screen) ===== */
.mock-end-bar {
  margin: 16px -16px -80px;
  padding: 12px 20px 24px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.mock-end-bar__btn {
  width: 100%; height: 46px;
  border: 1.5px solid rgba(214, 69, 69, 0.27);
  border-radius: 12px;
  background: var(--c-card);
  color: var(--c-wrong);
  font-family: inherit;
  font-size: 13px; font-weight: 800; letter-spacing: 0.3px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.mock-end-bar__btn:hover {
  background: var(--c-wrong-bg);
  border-color: var(--c-wrong);
}
.mock-end-bar__hint {
  font-size: 10px; color: var(--c-ink3);
  text-align: center; font-weight: 600;
  margin-top: 5px; letter-spacing: 0.2px;
}

/* ===== Mock end confirm modal ===== */
.mock-end-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 22, 30, 0.45);
  z-index: 50;
  animation: mem-fade 0.16s ease-out;
}
.mock-end-modal {
  position: fixed; left: 20px; right: 20px;
  top: 50%; transform: translateY(-55%);
  max-width: 380px; margin: 0 auto;
  background: var(--c-card); border-radius: 20px;
  padding: 24px 22px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 60;
  animation: mem-pop 0.2s ease-out;
}
.mock-end-modal__icon {
  width: 46px; height: 46px; border-radius: 23px;
  background: var(--c-wrong-bg);
  color: var(--c-wrong);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.mock-end-modal__title {
  font-size: 17px; font-weight: 800; color: var(--c-ink);
  text-align: center; letter-spacing: -0.2px;
  margin-bottom: 14px;
}
.mock-end-modal__alert {
  background: var(--c-wrong-bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  text-align: center;
}
.mock-end-modal__alert .lbl {
  font-size: 11px; color: var(--c-wrong);
  font-weight: 700; margin-bottom: 2px;
}
.mock-end-modal__alert .num {
  font-size: 24px; font-weight: 800; color: var(--c-wrong);
  font-feature-settings: "tnum"; line-height: 1;
}
.mock-end-modal__alert .num span {
  font-size: 12px; margin-left: 2px;
}
.mock-end-modal__alert .hint {
  font-size: 10.5px; color: var(--c-ink3);
  font-weight: 600; margin-top: 4px;
}
.mock-end-modal__note-ok {
  background: var(--c-correct-bg);
  border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px;
  text-align: center;
  font-size: 12px; font-weight: 700;
  color: var(--c-correct);
}
.mock-end-modal__cta { display: flex; gap: 10px; }
.mock-end-modal__cta .btn-keep,
.mock-end-modal__cta .btn-end {
  height: 48px; border-radius: 14px;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.mock-end-modal__cta .btn-keep {
  flex: 1.3;
  border: 1.5px solid var(--c-primary);
  background: var(--c-card); color: var(--c-primary);
  font-weight: 800;
}
.mock-end-modal__cta .btn-end {
  flex: 1;
  border: none;
  background: var(--c-wrong); color: #fff;
  font-weight: 800;
}
.mock-end-modal__cta .btn-keep:hover { background: var(--c-primary-light); }
.mock-end-modal__cta .btn-end:hover { background: #b03939; }

@keyframes mem-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mem-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.96); }
  to { opacity: 1; transform: translateY(-55%) scale(1); }
}

/* ===== Mock timer in question bar ===== */
.q__bar .mock-timer {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 12px; font-weight: 700;
  font-feature-settings: "tnum";
}
.q__bar .mock-timer.warning {
  background: var(--c-wrong-bg);
  color: var(--c-wrong);
}

/* ===== Mock result (refresh) ===== */
.mr-screen { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

/* legacy badge — kept for any remaining usage */
.pass-badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  font-size: 18px; font-weight: 800;
  letter-spacing: .12em;
}
.pass-badge.pass { background: var(--c-correct-bg); color: var(--c-correct); border: 2px solid var(--c-correct); }
.pass-badge.fail { background: var(--c-wrong-bg); color: var(--c-wrong); border: 2px solid var(--c-wrong); }

/* Top bar */
.mr-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; }
.mr-top__close {
  width: 32px; height: 32px; border-radius: 16px;
  background: transparent; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink2); cursor: pointer;
}
.mr-top__close:hover { background: var(--c-chip-bg); }
.mr-top__heading { display: flex; flex-direction: column; gap: 1px; }
.mr-top__heading .eyebrow {
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3); letter-spacing: 1px;
}
.mr-top__heading .title {
  font-size: 16px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.2px;
}

/* Verdict hero */
.mr-hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 24px 24px 20px;
  color: #fff; text-align: center;
  box-shadow: 0 10px 24px -10px rgba(46, 155, 107, 0.62);
}
.mr-hero.pass { background: linear-gradient(135deg, var(--c-correct) 0%, #247a54 100%); }
.mr-hero.fail {
  background: linear-gradient(135deg, var(--c-wrong) 0%, #ae3232 100%);
  box-shadow: 0 10px 24px -10px rgba(214, 69, 69, 0.62);
}
.mr-hero__deco {
  position: absolute; top: -20px; right: -20px;
  width: 120px; height: 120px; opacity: 0.18;
  pointer-events: none;
}
.mr-hero__label {
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  opacity: 0.85; margin-bottom: 6px;
}
.mr-hero__verdict {
  font-size: 48px; font-weight: 800; line-height: 1;
  letter-spacing: 8px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.mr-hero.fail .mr-hero__verdict { letter-spacing: 6px; }
.mr-hero__score {
  margin-top: 14px;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-feature-settings: "tnum";
}
.mr-hero__score .num {
  font-size: 42px; font-weight: 800; line-height: 1;
  letter-spacing: -1.5px;
}
.mr-hero__score .denom { font-size: 14px; font-weight: 700; opacity: 0.85; }
.mr-hero__line {
  margin-top: 8px;
  font-size: 11.5px; font-weight: 600; opacity: 0.92;
  line-height: 1.5;
}
.mr-hero__reason {
  margin-top: 8px;
  display: inline-block; padding: 4px 10px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
}

/* Quick stats */
.mr-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
.mr-stat-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px; padding: 12px 14px;
}
.mr-stat-card .key {
  font-size: 10px; font-weight: 700; color: var(--c-ink3);
  letter-spacing: 0.8px;
}
.mr-stat-card .val {
  font-size: 17px; font-weight: 800; color: var(--c-ink);
  font-feature-settings: "tnum";
  margin-top: 3px; letter-spacing: -0.2px;
}
.mr-stat-card .val.good { color: var(--c-correct); }
.mr-stat-card .val.bad { color: var(--c-wrong); }

/* Section labels */
.mr-section-label {
  font-size: 12px; font-weight: 800; color: var(--c-ink3);
  letter-spacing: 1.2px; margin: 8px 0 -2px;
}
.mr-section-label.nopad { margin: 0; }
.mr-section-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.mr-section-count {
  font-size: 11px; color: var(--c-ink3); font-weight: 700;
  font-feature-settings: "tnum";
}

/* Subject breakdown */
.mr-subjects {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px; overflow: hidden;
}
.mr-subject { padding: 12px 16px; border-top: 1px solid var(--c-line); }
.mr-subject.first { border-top: none; }
.mr-subject__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.mr-subject__name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--c-ink);
}
.mr-subject__name .cutoff-badge {
  font-size: 9px; font-weight: 800; color: var(--c-required);
  padding: 1px 5px; border-radius: 4px;
  background: var(--c-required-bg); letter-spacing: 0.4px;
}
.mr-subject__score {
  display: flex; align-items: baseline; gap: 3px;
  font-feature-settings: "tnum";
}
.mr-subject__score .num {
  font-size: 15px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.2px;
}
.mr-subject__score .denom {
  font-size: 10.5px; font-weight: 700; color: var(--c-ink3);
}
.mr-subject__score .pct { font-size: 11px; font-weight: 800; margin-left: 6px; }
.mr-subject__score .pct.good { color: var(--c-correct); }
.mr-subject__score .pct.mid { color: var(--c-accent); }
.mr-subject__score .pct.low { color: var(--c-wrong); }
.mr-subject__bar {
  height: 5px; background: var(--c-chip-bg);
  border-radius: 3px; overflow: hidden;
}
.mr-subject__bar > span {
  display: block; height: 100%; border-radius: 3px;
}
.mr-subject__bar > span.good { background: var(--c-correct); }
.mr-subject__bar > span.mid { background: var(--c-accent); }
.mr-subject__bar > span.low { background: var(--c-wrong); }

/* Wrong questions card */
.mr-wrong-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px; padding: 10px 12px;
}
.mr-wrong-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mr-wrong-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--c-wrong-bg); border: 1px solid rgba(214, 69, 69, 0.2);
  color: var(--c-wrong);
  font-size: 12px; font-weight: 800; font-family: inherit;
  font-feature-settings: "tnum";
  cursor: pointer;
}
.mr-wrong-chip:hover { background: rgba(214, 69, 69, 0.18); }
.mr-wrong-hint {
  font-size: 10px; color: var(--c-ink3); font-weight: 600;
  text-align: center; margin-top: 8px;
}

.mr-perfect {
  background: var(--c-correct-bg);
  border: 1px solid rgba(46, 155, 107, 0.25);
  border-radius: 14px; padding: 16px;
  text-align: center;
  font-size: 15px; font-weight: 800; color: var(--c-correct);
  margin: 0;
}

/* All-results collapsible grid */
.mr-grid-wrap {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px; overflow: hidden;
}
.mr-grid-wrap > summary {
  padding: 12px 14px;
  font-size: 12px; font-weight: 700; color: var(--c-ink2);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.mr-grid-wrap > summary::-webkit-details-marker { display: none; }
.mr-grid-wrap > summary::after {
  content: '▸';
  color: var(--c-ink3); font-size: 11px;
  transition: transform 0.15s ease;
}
.mr-grid-wrap[open] > summary::after { transform: rotate(90deg); }
.mr-grid-wrap[open] > summary { border-bottom: 1px solid var(--c-line); }
.mr-grid-wrap .q-grid { padding: 12px 14px; }

/* Bottom CTA */
.mr-cta {
  display: flex; gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
}
.mr-cta__home, .mr-cta__retry {
  height: 52px; border-radius: 14px;
  font-family: inherit; font-size: 13px;
  letter-spacing: 0.3px; cursor: pointer;
}
.mr-cta__home {
  flex: 1;
  border: 1.5px solid var(--c-line);
  background: var(--c-card); color: var(--c-ink);
  font-weight: 700;
}
.mr-cta__retry {
  flex: 1.2;
  border: none;
  background: var(--c-primary); color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(30, 58, 95, 0.7);
}
.mr-cta__home:hover { background: var(--c-chip-bg); }
.mr-cta__retry:hover { background: var(--c-primary-dark); }