/* ═══════════════════════════════════════════════════════════
   またとく — Design System v2 "Calm Intelligence"
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --bg: #eef7fd;
  --bg-rail: #e5f1f8;
  --surface: #ffffff;
  --surface-soft: #f7fbfe;
  --surface-strong: #edf5fa;
  --ink: #151d29;
  --ink-soft: #2f4050;
  --muted: #5d7184;        /* WCAG AA: 5.0:1 on white (was #627689 4.7:1) */
  --muted-2: #5f7080;      /* WCAG AA: 5.1:1 on white (was #8b9ba8 2.86:1, failed) */
  --line: #d5e5ef;
  --line-strong: #b8d9ef;
  --accent: #0b6bb7;
  --accent-dark: #075b9f;
  --accent-soft: #eaf6ff;
  --accent-glow: rgba(22, 139, 232, .16);
  --blue: #2563eb;
  --blue-soft: #e8f1ff;
  --amber: #8a5a0f;
  --amber-soft: #fbeed6;
  --danger: #b33d36;
  --danger-soft: #f9e6e4;
  --ok: #1f6b49;
  --ok-soft: #e1f3e9;
  --shadow: 0 20px 48px rgba(34, 78, 116, .12), 0 4px 12px rgba(34, 78, 116, .05);
  --shadow-soft: 0 8px 22px rgba(34, 78, 116, .08);
  --shadow-subtle: 0 1px 3px rgba(34, 78, 116, .05);
  --radius: 10px;
  --radius-sm: 10px;
  --radius-md: 16px;   /* scoring buttons + next-review card */
  --radius-lg: 16px;
  --button-radius: 18px;
  --page: 1240px;
  --transition: .18s ease;
  --font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --font-display: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;

  /* type scale (kills magic numbers — §1.1) */
  --fs-display: 32px;   /* hero stats (.stat strong reduced from 36) */
  --fs-h1: 26px;        /* base for clamp; h1 stays clamp(26px,2.4vw,32px) */
  --fs-h2: 18px;        /* the ONE section-heading size */
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 13px;        /* was 13.5 */
  --fs-xs: 12px;        /* was 12 */
  --fs-2xs: 11px;       /* was 11.5 */
  --lh-tight: 1.2;
  --lh: 1.55;

  /* spacing scale (§1.5) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* control height — button == input in form rows (§1.4) */
  --control-h: 44px;
}

/* ── Fixed taxonomy classification workspace ──────────────────────────────
   The generic mobile fieldset grid is intentionally overridden here. The
   seven major rows stay put while only the minor pane changes, preventing the
   checked control and the page scroll position from jumping on iPad. */
.section-head.taxonomy-classify-heading {
  align-items: center;
}

.taxonomy-classify-workspace {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin: 0 auto 32px;
  display: grid;
  gap: 18px;
  align-items: start;
  overflow-x: hidden;
  overflow-x: clip;
}

.taxonomy-classify-preview,
.taxonomy-classify-form {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.taxonomy-classify-preview {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.taxonomy-classify-preview .classify-image-frame img,
.taxonomy-classify-preview .classify-thumb-missing {
  height: clamp(220px, 34dvh, 360px);
  min-height: 0;
}

.taxonomy-classify-problem-copy {
  min-width: 0;
}

.taxonomy-classify-problem-copy .eyebrow,
.taxonomy-classify-form-head .eyebrow {
  margin-bottom: 4px;
}

.taxonomy-classify-problem-copy h2,
.taxonomy-classify-form-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.taxonomy-classify-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
}

.taxonomy-classify-form-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(220px, 1fr);
  align-items: end;
  gap: 12px 20px;
}

.taxonomy-classify-form-head > * {
  min-width: 0;
}

.taxonomy-classify-form-head .muted {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.taxonomy-classify-scroll {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.taxonomy-classify-tree {
  --taxonomy-major-pane: 42%;
  position: relative;
  min-width: 0;
  min-height: 410px;
  padding: 0;
  overflow: hidden;
  overflow-anchor: none;
}

fieldset.taxonomy-classify-group:not([hidden]) {
  position: static;
  display: block !important;
  grid-template-columns: none !important;
  width: var(--taxonomy-major-pane);
  min-width: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  box-sizing: border-box;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

fieldset.taxonomy-classify-group:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.taxonomy-classify-group .taxonomy-major-legend {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.taxonomy-major-choice,
.taxonomy-minor-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  cursor: pointer;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  word-break: normal;
  overflow-wrap: anywhere;
}

.taxonomy-major-choice {
  min-height: 48px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.taxonomy-choice-input {
  inline-size: 20px !important;
  block-size: 20px !important;
  min-inline-size: 20px !important;
  min-block-size: 20px !important;
  margin: 0 !important;
  accent-color: var(--accent);
  justify-self: start;
}

.taxonomy-choice-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.taxonomy-choice-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.taxonomy-choice-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.taxonomy-major-choice:has(.taxonomy-choice-input:focus-visible),
.taxonomy-minor-choice:has(.taxonomy-choice-input:focus-visible) {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
}

.taxonomy-minor-placeholder,
.taxonomy-minor-choices {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--taxonomy-major-pane) + 16px);
  inset-inline-end: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-sizing: border-box;
}

.taxonomy-minor-placeholder {
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.taxonomy-minor-placeholder span {
  color: var(--accent-dark);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .08em;
}

.taxonomy-minor-placeholder strong {
  color: var(--ink-soft);
  font-size: var(--fs-md);
}

.taxonomy-minor-placeholder small {
  max-width: 26em;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.taxonomy-minor-choices {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

.taxonomy-minor-choices[hidden] {
  display: none !important;
}

.taxonomy-minor-title {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.4;
  writing-mode: horizontal-tb !important;
}

.taxonomy-minor-choice {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.taxonomy-minor-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-dark);
}

.taxonomy-classify-actions {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 -4px -4px;
  padding: 10px 4px 4px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.taxonomy-classify-actions > button {
  width: 100%;
  min-height: 44px;
  white-space: normal;
}

.taxonomy-classify-actions > button:first-child {
  grid-column: 1 / -1;
  min-height: 48px;
}

html:not(.js) .taxonomy-classify-tree {
  min-height: 0;
  overflow: visible;
}

html:not(.js) fieldset.taxonomy-classify-group:not([hidden]) {
  position: relative;
  width: 100%;
}

html:not(.js) .taxonomy-minor-placeholder {
  display: none;
}

html:not(.js) .taxonomy-minor-choices,
html:not(.js) .taxonomy-minor-choices[hidden] {
  position: static;
  display: grid !important;
  max-height: none;
  margin: 0 8px 8px;
}

@media (min-width: 960px) {
  .taxonomy-classify-workspace {
    grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
  }

  .taxonomy-classify-preview {
    position: sticky;
    top: 98px;
  }

  .taxonomy-classify-preview .classify-image-frame img,
  .taxonomy-classify-preview .classify-thumb-missing {
    height: min(56dvh, 540px);
  }
}

@media (max-width: 760px) {
  .section-head.taxonomy-classify-heading {
    align-items: stretch;
  }

  .taxonomy-classify-heading > a {
    width: 100%;
  }

  .taxonomy-classify-actions {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 639px) {
  .taxonomy-classify-form-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .taxonomy-classify-tree {
    min-height: 0;
    overflow: visible;
  }

  fieldset.taxonomy-classify-group:not([hidden]) {
    position: relative;
    width: 100%;
  }

  .taxonomy-minor-placeholder {
    display: none;
  }

  .taxonomy-minor-choices {
    position: static;
    max-height: 340px;
    margin: 0 8px 8px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .taxonomy-classify-preview,
  .taxonomy-classify-form {
    padding: 12px;
  }

  .taxonomy-classify-preview .classify-image-frame img,
  .taxonomy-classify-preview .classify-thumb-missing {
    height: min(32dvh, 250px);
  }
}

/* Durable drawing sets and batch grading. */
.study-set-launch {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin: 18px 0 28px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #2457d6) 24%, #d8dee9);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8faff 0%, #fffdf4 100%);
}

.study-resume-list {
  display: grid;
  gap: 14px;
  margin: 18px 0 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}
.study-resume-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.study-resume-list-head h2 { margin: 4px 0 0; }
.study-resume-list-count {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.study-resume-list-items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.study-resume-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
}
.study-resume-card-copy { min-width: 0; }
.study-resume-card-copy h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.study-resume-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.study-resume-card form { min-width: 0; }
.study-resume-card .button { min-height: var(--control-h); }
.study-review-set-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.study-review-set-actions form { display: flex; }
.study-review-set-actions .button { white-space: nowrap; }

.study-set-launch-copy h2,
.study-grading-card h2 { margin: 4px 0 8px; }

.study-set-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.study-set-size-form {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
html:not(.js) .study-set-size-form--dynamic { display: none; }

.study-set-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.study-set-config-choice .print-order-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.study-set-category-choice .print-order-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 難易度 offers four bands, so it keeps its own column count instead of wrapping 3 + 1. */
.study-set-difficulty-choice .print-order-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.study-set-config-choice .print-order-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 12px;
}
.study-set-config-choice .print-order-option input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.study-set-config-choice .print-order-option:has(input:checked) {
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.study-set-config-choice .print-order-option:has(input:focus-visible) {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
}
.study-set-config-choice .print-order-option span { display: grid; gap: 1px; }
.study-set-config-choice .print-order-option strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.study-set-category-focus {
  display: none;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.study-set-size-form:has([data-study-category-mode][value="focused"]:checked) .study-set-category-focus {
  display: grid;
}
/* カテゴリ and 教材名 are two independent optional narrowings inside one panel. */
.study-set-focus-field { display: grid; gap: 5px; }
.study-set-category-focus select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  background: #fff;
  writing-mode: horizontal-tb;
}
.study-set-category-focus small { color: var(--muted); font-size: var(--fs-2xs); }

.study-set-size {
  min-width: 108px;
  min-height: 68px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid #bcc8dd;
  border-radius: 14px;
  background: #fff;
  color: #1d2b45;
}

.study-set-size strong { font-size: 1.25rem; }
.study-set-size span { font-size: .78rem; color: #667085; }
.study-set-size.is-recommended { border-color: #2457d6; box-shadow: 0 0 0 2px rgb(36 87 214 / 10%); }
.study-set-size:disabled {
  border-color: #d0d5dd;
  background: #f2f4f7;
  box-shadow: none;
  color: #667085;
  cursor: not-allowed;
  opacity: .72;
}

.study-set-review-link { grid-column: 1 / -1; border-top: 1px solid #e1e6ef; padding-top: 14px; }

.study-submitted-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 20px;
  padding: 16px 18px;
  border: 1px solid #a9d8bc;
  border-radius: 16px;
  background: linear-gradient(120deg, #eefaf3, #fbfffc 72%);
  color: #174f32;
}

.study-submitted-notice h2,
.study-submitted-notice p { margin: 0; }
.study-submitted-notice h2 { font-size: 1.05rem; }
.study-submitted-notice p { margin-top: 3px; color: #42705a; }
.study-submitted-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #237548;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
}

.study-grading-queue-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid #e3d0a2;
  border-radius: 14px;
  background: rgba(255, 250, 237, .82);
}
.study-grading-queue-summary > div { display: grid; gap: 2px; }
.study-grading-queue-summary p { margin: 0; color: #805715; }
.study-grading-queue-summary strong { color: #593d0f; font-size: 1.05rem; }
.study-grading-queue-summary span { color: #756342; font-size: .84rem; }
.study-grading-queue-summary .button { flex: 0 0 auto; min-height: 44px; }

.study-grading { max-width: 1040px; margin: 0 auto; }
.study-grading-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 20px;
}
.study-grading-progress {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  margin: 0;
}
.study-grading-filter { flex: 0 0 auto; max-width: 100%; }
.study-grading-filter .control-tab {
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 14px;
}
.study-grading-filter .control-tab:hover {
  background: rgb(255 255 255 / 68%);
  box-shadow: none;
  transform: none;
}
.study-grading-list { display: grid; gap: 18px; }
.study-grading-card {
  border: 1px solid #d9dfeb;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 6px 20px rgb(26 39 67 / 6%);
}

.study-grading-card {
  transition: border-color var(--transition), opacity .18s ease, transform .18s ease;
}
.study-grading-card.is-filtering-out { opacity: 0; transform: translateY(-6px); }
.study-grading-card.is-filtered-out { display: none; }
.study-grading-filter-empty { margin-top: 4px; }
.study-grading-card.is-graded { border-color: #aebbd4; }
.study-grading-card-head,
.study-grading-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.study-no-ink-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff4d8;
  color: #765100;
  font-size: .82rem;
  font-weight: 700;
}

.study-grading-preview {
  margin: 14px 0;
  display: grid;
  place-items: center;
  min-height: 180px;
  max-height: none;
  overflow: visible;
  border-radius: 12px;
  background: #f4f6f9;
}
.study-grading-preview-pages {
  display: grid;
  gap: 14px;
}
.study-grading-artifact-page {
  min-width: 0;
  border: 1px solid #e1e6ef;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
}
.study-artifact-page-label {
  align-self: start;
  justify-self: start;
  margin: 8px 10px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.study-grading-preview img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.study-grading-blank-page {
  min-height: min(72vw, 620px);
  align-content: start;
  padding: clamp(12px, 3vw, 28px);
  background: #fff;
}
.study-grading-blank-page img {
  max-height: 52%;
  object-position: center top;
}
.study-no-ink-review-label {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.study-red-pen { margin: 14px 0; }
.study-red-pen .study-grading-preview { margin: 8px 0 0; }
.study-red-pen-stage {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  line-height: 0;
}
.study-red-pen-stage img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.study-red-pen-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.study-red-pen.is-active .study-red-pen-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.study-red-pen-toolbar {
  position: static;
  z-index: auto;
  top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px;
  border: 1px solid #e6d3d3;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffafa 0%, #fff 100%);
}
.study-red-pen-toolbar button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d6b6b6;
  border-radius: 10px;
  background: #fff;
  color: #5e3030;
  font: inherit;
  font-weight: 800;
}
.study-red-pen-toolbar button:not(:disabled) { cursor: pointer; }
.study-red-pen-toolbar button:disabled { opacity: .42; cursor: not-allowed; }
.study-red-pen-toolbar [data-study-red-pen-toggle][aria-pressed="true"] {
  border-color: #a81f25;
  background: #c62828;
  color: #fff;
}
.study-red-pen-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
  background: #c62828;
  vertical-align: 1px;
}
[data-study-red-pen-toggle][aria-pressed="true"] .study-red-pen-dot {
  background: #fff;
}
.study-red-pen-note {
  margin-left: auto;
  color: #795252;
  font-size: .78rem;
  font-weight: 700;
}
.study-red-pen-note strong {
  color: #a81f25;
  font-weight: 900;
}
.study-red-pen.is-active .study-red-pen-toolbar {
  border-color: #c62828;
  box-shadow: 0 6px 18px rgb(80 24 24 / 14%);
}
.study-grading-answer [data-study-answer-panel] .study-red-pen { margin: 0; }
.study-grading-answer img { max-width: 100%; height: auto; display: block; }
.study-grading-answer { margin-bottom: 14px; }
.study-grading-answer [data-study-answer-panel] { margin-top: 10px; padding: 12px; background: #f8fafc; border-radius: 12px; }

.study-grading-actions,
.study-grading-organize {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.study-grading-actions button,
.study-grading-organize button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #c6cede;
  background: #fff;
  padding: 8px 10px;
}

.study-grading-actions button[aria-pressed="true"],
.study-grading-organize button[aria-pressed="true"] {
  border-color: #2457d6;
  background: #eef3ff;
  color: #153d9f;
  font-weight: 700;
}

.study-grade-undo { grid-column: 1 / -1; }
.study-grading-organize { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #edf0f5; padding-top: 12px; }
.study-action-undo { display: block; font-size: .75rem; margin-top: 2px; }
.study-grading-message { min-height: 1.5em; margin: 10px 0 0; color: #45536b; }
.study-grading-footer { margin-top: 22px; padding: 20px; border-radius: 14px; background: #f5f7fb; }
.study-grading-inbox {
  max-width: 940px;
  margin: 0 auto;
}
.study-grading-inbox-head { align-items: flex-start; }
.study-grading-inbox-head > div { max-width: 680px; }
.study-grading-inbox-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 8px 12px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  border: 1px solid #e3d0a2;
  border-radius: 14px;
  background: #fffaf0;
  color: #745318;
}
.study-grading-inbox-summary strong { font-size: 1.15rem; color: #52380b; }
.study-grading-inbox-summary small { justify-self: end; color: #7a6b4f; }
.study-grading-inbox-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.study-grading-inbox-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d8dfeb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgb(26 39 67 / 6%);
}
.study-grading-inbox-order {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e2ca91;
  border-radius: 50%;
  background: #fff8e7;
  color: #76510a;
  font-weight: 850;
}
.study-grading-inbox-card-main { min-width: 0; }
.study-grading-inbox-card h2 { margin: 2px 0 8px; font-size: 1.05rem; }
.study-grading-inbox-date { margin: 0; color: #738097; font-size: .78rem; font-weight: 700; }
.study-grading-inbox-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #5e6b82;
  font-size: .84rem;
}
.study-grading-inbox-counts strong { color: #815700; font-size: 1rem; }
.study-grading-inbox-progress {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f5;
}
.study-grading-inbox-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3973d6;
}
.study-grading-inbox-card > .button { min-width: 148px; min-height: 44px; }
.study-grading-inbox-empty { padding-block: 48px; }
.study-grading-inbox-empty-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e8f6ee;
  color: #237548;
  font-size: 1.4rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .study-set-launch { grid-template-columns: 1fr; padding: 18px; }
  .study-set-size-form { min-width: 0; }
  .study-set-category-choice .print-order-options { grid-template-columns: 1fr; }
  .study-set-order-choice .print-order-options { grid-template-columns: 1fr; }
  /* The band labels are short, so two per row stays readable where the other groups stack. */
  .study-set-difficulty-choice .print-order-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .study-set-size { min-width: 0; width: 100%; }
  .study-resume-list { padding: 16px; }
  .study-resume-card { grid-template-columns: 1fr; gap: 12px; }
  .study-resume-card .button { width: 100%; }
  .study-grading-card-head,
  .study-grading-footer { align-items: flex-start; flex-direction: column; }
  .study-grading-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-grading-organize { grid-template-columns: 1fr; }
  .study-grading-toolbar { align-items: stretch; }
  .study-grading-progress { align-items: center; }
  .study-grading-filter { display: flex; width: 100%; }
  .study-grading-filter .control-tab {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
  }
  .study-red-pen-toolbar { align-items: stretch; }
  .study-red-pen-toolbar button { flex: 1 1 auto; }
  .study-red-pen-note { flex: 1 0 100%; margin: 0; text-align: center; }
  .study-grading-queue-summary { align-items: stretch; flex-direction: column; }
  .study-grading-queue-summary .button { width: 100%; }
  .study-grading-inbox-head { align-items: stretch; flex-direction: column; }
  .study-grading-inbox-head .button { width: 100%; }
  .study-grading-inbox-summary { grid-template-columns: 1fr; }
  .study-grading-inbox-summary small { justify-self: start; }
  .study-grading-inbox-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 16px;
  }
  .study-grading-inbox-card > .button { grid-column: 1 / -1; width: 100%; }
}

/* ── Animations ───────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reset & Base ─────────────────────────────────────── */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

/* Respect the OS "reduce motion" setting: near-zero all animations/transitions and disable smooth
   scroll. The upload list re-renders rows (fadeInUp) on every progress tick, which is especially
   bothersome for motion-sensitive users (WS8). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link: hidden until focused, so keyboard/SR users can jump past the fixed top nav (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: var(--button-radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 8px; outline: 3px solid var(--accent-glow); }
#main:focus { outline: none; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 280px),
    radial-gradient(ellipse at 20% -4%, rgba(35,170,255,.12), transparent 420px),
    radial-gradient(ellipse at 82% 0%, rgba(37,99,235,.07), transparent 380px),
    var(--bg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.58;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
form { margin: 0; }

/* ── Custom Scrollbar ─────────────────────────────────── */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── Buttons ──────────────────────────────────────────── */

button, .button {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #ffffff, #f5fbff);
  color: var(--ink);
  border-radius: var(--button-radius);
  padding: 10px 16px;
  min-height: 42px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, var(--shadow-subtle);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
}

button svg, .button svg {
  flex-shrink: 0;
  opacity: .72;
  transition: opacity var(--transition);
}

button:hover svg, .button:hover svg { opacity: 1; }

button:hover, .button:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
  box-shadow: 0 8px 20px rgba(22,139,232,.12);
}

button:active, .button:active {
  transform: translateY(1px) scale(.98);
  box-shadow: var(--shadow-subtle);
}

/* §1.7: the solid outline is for buttons/links ONLY. Inputs/selects/textarea rely on their
   own border-color + --accent-glow :focus ring (no doubled ring on keyboard focus). */
button:focus-visible, .button:focus-visible, a:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}

.primary {
  background: linear-gradient(180deg, #0f77c8, var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 24px rgba(22,139,232,.24);
}

.primary svg { opacity: .9; }

.primary:hover {
  background: linear-gradient(180deg, #0b6bb7, var(--accent-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 28px rgba(22,139,232,.28);
}

.subtle {
  color: #4b6272;
  background: #edf5fa;
  font-size: var(--fs-sm);
  padding: 8px 13px;
  min-height: 40px;
  box-shadow: none;
  border-color: transparent;
}

.subtle:hover {
  border-color: transparent;
  color: var(--accent-dark);
  background: #e2f0f8;
}

/* ── Score Buttons ─────────────────────────────────────── */

.score-correct {
  color: var(--ok);
  border-color: #a8d1be;
  background: var(--ok-soft);
}
.score-correct:hover, .score-correct.active {
  color: #fff;
  background: var(--ok);
  border-color: var(--ok);
  box-shadow: 0 6px 14px rgba(31,107,73,.22);
}

.score-wrong {
  color: var(--danger);
  border-color: #ddb0ac;
  background: var(--danger-soft);
}
.score-wrong:hover, .score-wrong.active {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 6px 14px rgba(179,61,54,.22);
}

.score-retry {
  color: var(--amber);
  border-color: #e0c18a;
  background: var(--amber-soft);
}
.score-retry:hover, .score-retry.active {
  color: #fff;
  background: #9a6510;
  border-color: var(--amber);
  box-shadow: 0 6px 14px rgba(138,90,15,.22);
}

.score-unanswered {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-soft);
}
.score-unanswered:hover, .score-unanswered.active {
  color: var(--ink);
  background: var(--surface-strong);
  border-color: var(--line-strong);
}

.score-skipped {
  color: #526777;
  border-color: #b9c7d0;
  background: #eef3f6;
}
.score-skipped:hover, .score-skipped.active {
  color: #fff;
  background: #526777;
  border-color: #526777;
  box-shadow: 0 6px 14px rgba(82,103,119,.2);
}

/* ── Inputs ───────────────────────────────────────────── */

input, select, textarea {
  width: 100%;
  min-height: var(--control-h);   /* §1.4: button == input height in form rows */
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
  resize: vertical;
  line-height: 1.55;
}

input:hover, select:hover, textarea:hover {
  border-color: var(--line-strong);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667370' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
}

input::placeholder { color: var(--muted); }

label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

label input, label select, label textarea {
  margin-top: 6px;
  font-size: 14px;
}

fieldset {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-soft);
}

legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
}

/* ── Topbar ───────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 0;
  background: rgba(248, 252, 255, .9);
  border-bottom: 1px solid rgba(184, 217, 239, .72);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: box-shadow var(--transition), border-color var(--transition);
}

/* §2 base: align the brand's left edge with the page H1's left edge (.page = 24px gutters). */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 64px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* §2 base: lift the sticky bar off near-white once the page scrolls under it. */
.topbar.scrolled {
  border-bottom-color: var(--line-strong);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(34, 78, 116, .07);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: opacity var(--transition);
}

.brand:hover { opacity: .9; }

/* Active-learner chip (multi-child only). A <details> dropdown to switch child, so "whose data" is
   always visible in the header and switching is one tap. */
.learner-chip { position: relative; }
.learner-chip > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.learner-chip > summary::-webkit-details-marker { display: none; }
.learner-chip > summary svg { color: var(--accent); }
.learner-chip[open] .learner-chip-caret { transform: rotate(180deg); }
.learner-chip-menu {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 14px 30px rgba(20, 50, 80, .16);
}
.learner-chip-option {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.learner-chip-option:hover { background: var(--surface-soft); }
.learner-chip-option.is-current { background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; }

/* Settings: learner management rows + scope note reused on record screens. */
.learner-manage-list { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 12px; }
.learner-manage-row {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.learner-profile-title { margin: 0; color: var(--ink); font-size: var(--fs-md); }
.learner-rename-form, .learner-add-form { display: flex; gap: 8px; align-items: center; }
.learner-rename-form input[type="text"], .learner-add-form input[type="text"] { flex: 1 1 auto; min-width: 0; }
.learner-handedness-form { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.learner-handedness-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.learner-handedness-fieldset legend { margin-bottom: 7px; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 800; }
.learner-handedness-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.learner-handedness-choice {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.learner-handedness-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.learner-handedness-choice:has(input:focus-visible) { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.learner-handedness-choice input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); }
.learner-handedness-choice span { display: grid; gap: 1px; }
.learner-handedness-choice strong { color: var(--ink); font-size: var(--fs-sm); }
.learner-handedness-choice small { color: var(--muted); font-size: var(--fs-2xs); }
.learner-handedness-help { margin: 0; }
.learner-handedness-save { justify-self: start; }
.learner-add-form { margin-top: 4px; }
.scope-note { margin: 6px 0 0; }
.scope-note strong { color: var(--accent-dark); }

/* §1.6: subject-neutral mark (refresh/loop glyph echoing the 「また解く」 promise), tonal-blue gradient
   (was 「算」 on an accent→navy blend that math-locked a multi-subject product). */
.brand::before {
  content: "";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background:
    no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"),
    linear-gradient(145deg, #23aaff, var(--accent-dark));
  box-shadow: 0 10px 20px rgba(22,139,232,.22);
}

/* §2 base: two flex groups — bordered pill around the 3 primary items, demoted text links after.
   Fixes the old `.nav-demoted:first-of-type{margin-left:auto}` dead-space inside the pill. */
.nav-shell {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow-subtle);
}

.nav-secondary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: calc(var(--button-radius) - 4px);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--transition);
}

.nav a svg {
  flex-shrink: 0;
  opacity: .6;
  transition: opacity var(--transition);
}

/* PCはフルラベル。mobileの@media内で短ラベルへ切替える。 */
.nav-label-short { display: none; }
.nav-label-full { display: inline; }

.nav a:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.nav a:hover svg { opacity: 1; }

.nav a.active {
  color: #fff;
  background: linear-gradient(180deg, #0f77c8, var(--accent));
  box-shadow: 0 4px 12px rgba(22,139,232,.22);
}

.nav a.active svg { opacity: 1; }

/* ── Page Layout ──────────────────────────────────────── */

.page {
  width: min(var(--page), calc(100vw - 48px));
  margin: 0 auto;
  padding: 24px 0 56px;
  animation: fadeInUp .4s ease-out;
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

/* CTAs sit directly under the heading block (§2 home): not floated top-right. */
.hero .button-row { margin-top: 20px; max-width: 660px; }
.hero-cta-note { margin: 10px 0 0; }

h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
}

h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.38;
  letter-spacing: -.01em;
  font-weight: 700;
}

/* The ONE larger heading — reserved for home's hero "next action" card (§1.1). */
.h2-lg { font-size: 20px; }

/* One hover-lift utility (§1.3 elevation contract): --shadow + reduced -2px lift. */
.lift:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.lead {
  max-width: 660px;
  color: var(--muted);
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}
/* ヒーローの補足(ほかに結果待ちが何枚)。控えめに、でも読めるコントラストで。 */
.hero-subnote {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--muted-2);
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Stats ────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.stat, .panel {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.stat {
  position: relative;
  min-height: 120px;
  padding: 18px 20px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  animation: fadeInUp .45s ease-out both;
}

.stat:nth-child(1) { animation-delay: .05s; }
.stat:nth-child(2) { animation-delay: .1s; }
.stat:nth-child(3) { animation-delay: .15s; }

.stat:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(90deg, var(--accent), var(--blue));
  opacity: .7;
  transition: opacity var(--transition);
}

.stat:hover::after { opacity: 1; }

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 8px;
}

.stat:nth-child(2) .stat-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.stat:nth-child(3) .stat-icon {
  background: var(--amber-soft);
  color: var(--amber);
}

.stat span:not(.stat-icon) {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.stat strong {
  display: block;
  margin-top: 6px;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 900;
  animation: countUp .5s ease-out both;
}

.stat:nth-child(1) strong { animation-delay: .15s; }
.stat:nth-child(2) strong { animation-delay: .2s; }
.stat:nth-child(3) strong { animation-delay: .25s; }

/* ── Panels ───────────────────────────────────────────── */

.panel {
  padding: 20px;
  margin-bottom: 18px;
}

.narrow { max-width: 840px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin: 22px 0 18px;
}

.section-head:first-child { margin-top: 4px; }
.section-head > * { min-width: 0; }
/* The ONE section-heading size (§1.1 / §2 home) — explicit so panel titles are uniform. */
.section-head h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.text-link {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
  transition: color var(--transition);
}

.text-link:hover { color: var(--accent); }

.path, code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: #26322f;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ── Rows ─────────────────────────────────────────────── */

.rows { display: grid; gap: 8px; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  animation: fadeInUp .35s ease-out both;
}

.row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.row-main span, .row > span {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.row:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.row small, .muted {
  color: var(--muted);
  font-weight: 500;
}

.small, .mini-meta { font-size: 12px; }

/* ── History rows (§2 history) ────────────────────────────
   2-col grid [title+meta | state+actions]; the inline badge-in-text /-delimited
   line is gone. Meta is a light 2nd layer; 結果待ち lives in a right-side amber chip. */
.history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
/* amber left border flags rows that still have unscored items (§2). */
.history-row--ungraded { border-left: 3px solid var(--amber); }
.history-row .row-main small {
  color: var(--muted);
  font-size: var(--fs-xs);
}
/* 失敗ジョブの理由(『条件に合う問題が0件』等)。赤系で1行、無言放置の不安を消す。 */
.history-error-reason {
  display: block;
  margin-top: 2px;
  color: var(--danger, #c0392b);
  font-size: var(--fs-xs);
}
/* 状態タブ(結果待ち/記録済み/作れなかった)。リンクの行を上部に集約。 */
.history-tabs { margin: 0 0 16px; display: inline-flex; }
.history-row-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* right-side 結果待ち chip — token amber (no new colors, §HARD RULES). */
.history-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--amber-soft);
  color: var(--amber);
  white-space: nowrap;
}
/* badge baselines were mismatched inside the old /-line; settle it next to the chip. */
.history-row-aside .status-badge {
  padding: 2px 9px;
  line-height: 1.5;
  vertical-align: middle;
}
/* §2 history: action emphasis — primary pops, PDF/削除 stay subtle. The delete-form's
   stacked-card border-top (built for score cards) would draw an unwanted line in the row. */
.history-row-aside .button-row { gap: 8px; }
.button-row .delete-form {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
/* Separate the destructive 削除 from the primary 結果を記録 so a fat-finger tap can't hit it by
   accident (deletion is recoverable for 30 days, but the緊張 is real). Push it to the row's end. */
.problem-card-actions { align-items: center; }
.problem-card-actions .delete-form { margin-left: auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Filters ──────────────────────────────────────────── */

.filters, .actionbar, .button-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.filters { margin-bottom: 16px; }
.filters > * { width: auto; min-width: 150px; }

.list-tools {
  padding: 18px;
  margin-bottom: 18px;
}

.problem-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  overflow: visible;
}

.problem-filters > * {
  min-width: 0;
}

.problem-filters > label:first-of-type {
  order: 1;
  flex: 1 1 220px;
  max-width: 280px;
}

.problem-filters > .multi-filter-wrapper,
.problem-filters > label:not(:first-of-type) {
  order: 1;
  flex: 1 1 126px;
  max-width: 150px;
}

.problem-filters > button,
.problem-filters > .button,
.filter-actions {
  order: 2;
  flex: 0 0 auto;
}

.problem-filters > input[type="hidden"] {
  display: none;
}

.problem-filters > label,
.problem-filters > .multi-filter-wrapper {
  display: grid;
  grid-template-rows: 16px 42px;
  gap: 6px;
  align-content: end;
}

.problem-filters > label > input,
.problem-filters > label > select,
.multi-filter > summary {
  margin-top: 0;
}

.problem-filters > button,
.problem-filters > .button {
  padding-right: 8px;
  padding-left: 8px;
  min-height: 42px;
}

.filter-actions {
  display: flex;
  gap: 10px;
  align-items: end;
}

.filter-actions > button,
.filter-actions > .button {
  min-width: 74px;
  min-height: 42px;
  padding-right: 8px;
  padding-left: 8px;
}

.multi-filter {
  position: relative;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.multi-filter summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.problem-filters select {
  padding-right: 28px;
}

.multi-filter summary::-webkit-details-marker { display: none; }

.multi-filter summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}

.multi-filter summary span {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.multi-filter summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-filter[open] {
  z-index: 20;
}

.multi-filter[open] summary {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.multi-filter[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

/* §1.8: custom disclosure for /pdf "詳しい条件" — match the .multi-filter chevron,
   kill the raw browser ▶ triangle, add a top divider. */
.advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-dark);
  min-height: 40px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--line);
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.advanced[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.multi-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 88vw);
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
  animation: fadeInUp .2s ease-out;
}

.multi-filter-menu.compact {
  width: min(220px, 88vw);
}

.multi-filter-clear {
  width: 100%;
  margin-bottom: 6px;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  min-height: 32px;
}

.multi-filter-clear:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.multi-filter-option {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
}

.multi-filter-option:hover {
  background: var(--surface-soft);
}

.multi-filter-option input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.quick-filters {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

/* ── Workbar ──────────────────────────────────────────── */

.actionbar {
  margin: 0 0 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.problem-workbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.workbar-status,
.workbar-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.workbar-status {
  min-width: 0;
}

.workbar-controls {
  justify-content: flex-end;
}

.workbar-controls label {
  display: grid;
  grid-template-rows: 16px 42px;
  gap: 6px;
  align-content: end;
}

.workbar-controls label input,
.workbar-controls label select {
  margin-top: 0;
}

.workbar-controls > button,
.workbar-controls > .button,
.view-switch {
  min-height: 42px;
}

.result-count {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 600;
  color: var(--muted);
}

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.view-switch .button {
  min-height: 30px;
  border-color: transparent;
  box-shadow: none;
}

.view-switch .button.active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.short-input { width: 78px; }
.order-select { min-width: 150px; }

/* ── Quick Score ──────────────────────────────────────── */

.quick-score { margin-bottom: 14px; }
.quick-score .filters { margin-bottom: 0; }

/* ── Candidate Summary ────────────────────────────────── */

.candidate-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-strong), #fff);
  border-radius: var(--radius);
  padding: 16px;
}

.candidate-summary strong {
  display: block;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 900;
}

.estimate-box {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.estimate-box span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Create (pdf_builder) ─────────────────────────────────
   §2 create: a 1-field create flow shouldn't read as a half-empty
   grid in an 840px panel. Tighten the panel, collapse the form to one
   column, cap the field+CTA stack at a 420px measure, and give the CTA
   real weight. The candidate-summary shares the same measure. */
.pdf-builder.narrow { max-width: 560px; }

/* Intro note (§2 create: intro spacing 4px 0 16px) — the helper line that
   sits directly above the create panel. */
.muted.small:has(+ .pdf-builder) { margin: 4px 0 16px; }

.pdf-builder .candidate-summary {
  justify-content: flex-start;
  max-width: 420px;
  border-left: 3px solid var(--accent);
}

.pdf-builder .candidate-summary strong {
  font-size: 36px;
  color: var(--accent);
}

.pdf-builder .candidate-pool { display: block; margin-top: 2px; }

/* 1-column form + 420px measure for fields and CTA (kills the L of whitespace). */
.pdf-builder .form-grid { grid-template-columns: 1fr; }
.pdf-builder .stack { max-width: 420px; }

/* Advanced checkboxes: grid stack, option-weight labels (not field headers). */
.pdf-builder .advanced-checks { display: grid; gap: 10px; }
.pdf-builder .advanced-checks .check {
  font-weight: 500;
  font-size: var(--fs-sm);
}

.pdf-filter-group {
  display: grid;
  gap: 8px;
  padding-top: 12px;
}
.pdf-filter-group > span {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.pdf-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
}
.pdf-filter-chip input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}
.pdf-filter-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* 「未設定」チップ: 通常チップより控えめに（クリア＝何も選ばない、を示す）。選択時は他と同じ強調。 */
.pdf-filter-chip--none { color: var(--muted); border-style: dashed; }
.pdf-filter-chip--none:has(input:checked) { color: var(--accent-dark); border-style: solid; }

/* 補助タグ: グループ（解法 / 考え方）ごとに小見出しを置く。 */
.pdf-tag-subgroup { display: grid; gap: 6px; }
.pdf-tag-grouplabel {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* 「表示する問題」モードのラジオ: 幅を揃えて縦に1列で並べる（行ごとの幅バラつきをなくす）。 */
.pdf-mode-chips {
  flex-direction: column;
  align-items: stretch;
}
.pdf-mode-chip {
  width: 100%;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
}
.pdf-mode-chip > span.pdf-mode-label { font-weight: 800; }
.pdf-mode-chip .pdf-mode-hint {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}
.pdf-mode-chip:has(input:checked) .pdf-mode-hint { color: var(--accent-dark); }
.pdf-selection-help {
  margin: -2px 0 2px;
}
.pdf-selection-help > summary {
  width: fit-content;
  min-height: 44px;
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
}
.pdf-selection-help-body {
  display: grid;
  gap: 14px;
  margin: 2px 0 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.65;
}
.pdf-selection-help-body h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.pdf-selection-help-body p { margin: 0; }
.pdf-selection-help-body ol {
  margin: 6px 0;
  padding-left: 1.5rem;
}
.pdf-selection-help-body dl {
  display: grid;
  gap: 9px;
  margin: 0;
}
.pdf-selection-help-body dl > div {
  display: grid;
  gap: 1px;
}
.pdf-selection-help-body dt { color: var(--ink); font-weight: 800; }
.pdf-selection-help-body dd { margin: 0; }
.pdf-selection-help-note {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.pdf-thinking-extras[hidden] { display: none; }
.pdf-extra-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdf-extra-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}
.pdf-extra-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pdf-extra-option input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.pdf-extra-option span { display: grid; gap: 2px; }
.pdf-extra-option strong { font-size: var(--fs-sm); }
.pdf-extra-option small { color: var(--muted); font-size: var(--fs-2xs); }

/* ページ数: 重要パラメータとして「詳しい条件」の外に出した説明つきコントロール。 */

/* 確定前PDFプレビュー（採点/確認画面）。 */
.pdf-preview-panel { display: grid; gap: 8px; }
.pdf-preview-frame {
  width: 100%;
  height: min(70vh, 720px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

/* CTA weight (desktop): a real primary button, not a 38px minor control. */
.pdf-builder .button-row .primary {
  min-height: 48px;
  font-size: 15px;
  padding: 12px 28px;
}

/* ── Card Sorting Classification ─────────────────────── */

.classify-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.classify-nudge h2 { margin: 0 0 4px; font-size: var(--fs-h3); }
.classify-nudge p { margin: 0; }

.classify-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.classify-mode-card {
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
}
.classify-mode-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.classify-mode-card.is-empty {
  border-left-color: var(--line-strong);
  color: var(--muted);
  background: var(--surface-soft);
}
.classify-mode-count {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 900;
  font-size: 20px;
}
.classify-mode-card.is-empty .classify-mode-count {
  background: var(--surface-strong);
  color: var(--muted);
}
.classify-mode-card strong { font-size: 18px; }
.classify-mode-card small { color: var(--muted); font-weight: 600; }

.classify-workspace {
  max-width: 820px;
  margin: 0 auto;
}
.classify-progress {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.classify-progress strong {
  color: var(--ink);
  font-size: 18px;
}

.classify-card {
  display: grid;
  gap: 16px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.classify-card.is-saving {
  opacity: .78;
  pointer-events: none;
}
.classify-card.is-complete {
  box-shadow: var(--shadow-soft);
}
.classify-image-frame {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  overflow: hidden;
}
.classify-image-frame img,
.classify-thumb-missing {
  display: block;
  width: 100%;
  height: min(48vh, 420px);
  min-height: 220px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.classify-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.classify-card-meta strong {
  min-width: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.classify-card h2 {
  margin: 0;
  font-size: var(--fs-h2);
}
.classify-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.classify-choice-grid form,
.classify-secondary-actions form {
  margin: 0;
}
.classify-choice {
  width: 100%;
  min-height: 62px;
  display: grid;
  gap: 2px;
  align-content: center;
  white-space: normal;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.classify-choice span {
  font-size: 16px;
  font-weight: 800;
}
.classify-choice small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.classify-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.classify-secondary-actions form,
.classify-secondary-actions .button {
  flex: 1 1 130px;
}
.classify-secondary-actions .button,
.classify-secondary-actions button {
  width: 100%;
}

/* ── Preview Panel ────────────────────────────────────── */

.preview-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, var(--surface-soft));
  padding: 14px;
}

.preview-panel[hidden] { display: none; }

.manual-preview {
  margin: 0 0 16px;
}

.preview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.preview-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.preview-counts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.preview-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: transform var(--transition), box-shadow var(--transition);
}

.preview-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.preview-card.unplaced {
  opacity: .58;
  border-style: dashed;
}

.preview-thumb {
  position: relative;
  background: var(--surface-strong);
}

.preview-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.preview-thumb span {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 26px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-sm);
  background: rgba(22, 139, 232, .92);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.preview-card.unplaced .preview-thumb span {
  background: rgba(138, 90, 15, .88);
}

.preview-meta {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.preview-meta strong,
.preview-meta small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preview-meta strong {
  font-size: 12px;
  line-height: 1.25;
}

.preview-meta small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.preview-empty {
  margin: 8px 0 0;
}

.warning-text {
  color: var(--amber);
  font-weight: 600;
}

.danger-text { color: var(--danger); }

/* §1.9 destructive tiers — list-row delete (history / problems): neutral at rest,
   red only on hover/focus-visible (the always-red beacon ×100 was noise). */
.subtle.danger-text {
  color: var(--muted);
}
.subtle.danger-text:hover,
.subtle.danger-text:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* ── Pagination ───────────────────────────────────────── */

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 92px;
}

.page-count {
  color: var(--muted);
  font-weight: 700;
  padding: 0 8px;
  font-size: 13px;
}

.disabled {
  opacity: .4;
  pointer-events: none;
}

/* ── Selection Tray ───────────────────────────────────── */

.selection-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  transform: translateX(-50%);
  width: min(800px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  animation: fadeInUp .3s ease-out;
}

.selection-tray[hidden] { display: none; }
.selection-tray p { margin: 2px 0 0; max-width: 520px; overflow-wrap: anywhere; }

.bulk-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.bulk-panel[hidden] { display: none; }

/* ── Problem Grid ─────────────────────────────────────── */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.problem-grid.image-only-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.problem-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  animation: fadeInUp .35s ease-out both;
}

.problem-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.problem-card:has(input[type="checkbox"]:checked) {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow) !important;
  background: var(--accent-soft) !important;
}

.problem-card:has(input[type="checkbox"]:checked) .pick {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.image-only-card:has(input[type="checkbox"]:checked) {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent), var(--shadow) !important;
}

.pick {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.problem-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  display: block;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
}

.image-only-card {
  display: block;
  background: #fff;
}

/* §2 problems: cards aren't clickable → remove the false hover lift; keep a
   quiet border-color change only (chose "remove lift" over "wire zoom"). */
.image-only-card:hover {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.image-only-link {
  display: block;
}

/* §2 problems P0: real thumbnail frame. Preserve the full worksheet crop; parent needs to
   inspect problem edges/text more than browse a gallery-like crop. */
.image-only-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;
  object-position: top;
  background: #f3f5f4;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.image-pick {
  top: 7px;
  left: 7px;
  width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
}

.image-pick input {
  margin: 0;
}

.card-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.card-title {
  min-height: 38px;
  font-weight: 600;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.card-meta {
  color: var(--muted);
  font-size: 12px;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ── Badges ───────────────────────────────────────────── */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.badges span, .pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-soft);
  white-space: nowrap;
}

.pill {
  color: var(--accent-dark);
  border-color: var(--line-strong);
  background: var(--accent-soft);
  font-weight: 700;
}

.badges .danger {
  color: var(--danger);
  border-color: #ddb0ac;
  background: var(--danger-soft);
}

.badges .warn {
  color: var(--amber);
  border-color: #e0c18a;
  background: var(--amber-soft);
}

.badges .ok {
  color: var(--ok);
  border-color: #a8d1be;
  background: var(--ok-soft);
}

.badges .difficulty--入門 {
  color: #52616b;
  border-color: #cbd5db;
  background: #f2f5f7;
}
.badges .difficulty--基礎 {
  color: var(--ok);
  border-color: #a8d1be;
  background: var(--ok-soft);
}
.badges .difficulty--標準 {
  color: var(--blue);
  border-color: #b0cbe8;
  background: var(--blue-soft);
}
.badges .difficulty--応用 {
  color: var(--amber);
  border-color: #e0c18a;
  background: var(--amber-soft);
}
.inline-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-soft) !important;
}

.inline-label input,
.inline-label select {
  margin-top: 0 !important;
}

.stack {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.check, .inline-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.check input, .inline-check input, .pick input {
  width: auto;
  min-height: 0;
  accent-color: var(--accent);
}

.inline-check {
  min-height: 32px;
  margin-right: 8px;
  color: var(--ink-soft);
}

.settings-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 12px;
}

.delete-form {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.full-button { width: 100%; }

/* ── Score List ───────────────────────────────────────── */

.score-list {
  display: grid;
  gap: 12px;
}

.score-command {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, var(--accent-soft), #fff);
}

.score-command-head, .score-id-form {
  display: flex;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.score-progress {
  min-width: 130px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px 14px;
  text-align: center;
}

.score-progress strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
}

.score-progress span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* ── Progress Bar ─────────────────────────────────────── */

.progress-bar {
  height: 6px;
  background: var(--surface-strong);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: 3px;
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
  min-width: 0;
}

.score-id-form label {
  flex: 1 1 180px;
}

.score-id-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warning-panel {
  border-color: #e0c18a;
  background: var(--amber-soft);
}

.notice-panel {
  border-color: rgba(22, 139, 232, 0.22);
  background: #eef8ff;
}

.danger-panel {
  border-color: #ddb0ac;
  background: var(--danger-soft);
}

.score-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 260px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition), box-shadow var(--transition);
  /* clean anchor landing under the sticky topbar + sticky progress panel (§2 score P0). */
  scroll-margin-top: 132px;
  max-height: 500px;
  overflow: hidden;
}

.score-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: #7f95a4;
}

.score-item[data-item-result="correct"]::before { background: var(--ok); }
.score-item[data-item-result="retry"]::before { background: #9a6510; }
.score-item[data-item-result="wrong"]::before { background: var(--danger); }
.score-item[data-item-result="skipped"]::before { background: #7f95a4; }

.score-item[data-item-result="unanswered"] {
  background: #fffdf7;
  border-color: #dca84a;
  box-shadow:
    inset 0 0 0 2px rgba(220, 168, 74, .18),
    var(--shadow-soft);
}

.score-item[data-item-result="unanswered"]::before {
  background: repeating-linear-gradient(
    to bottom,
    #d28a11 0,
    #d28a11 10px,
    transparent 10px,
    transparent 16px
  );
}

/* §2 score P2: this is a touch-primary list — no hover lift on 109 cards. Keep a quiet
   border cue only. */
.score-item:hover {
  border-color: var(--line-strong);
}

/* §2 score P2: animate fadeInUp on only the first ~6 cards (not all 109). */
.score-item:nth-child(-n + 6) { animation: fadeInUp .35s ease-out both; }

/* Client-side 未入力のみ filter (§2 score): hide answered cards without losing scroll. */
.score-item.is-hidden { display: none; }

.score-item.fade-out-disappear {
  opacity: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  overflow: hidden !important;
  transform: scale(0.9) translateY(-10px) !important;
  transition: all .4s cubic-bezier(.22, .61, .36, 1) !important;
}

/* §2 score: a flat index, not a CTA — no gradient, no colored shadow, no navy blend (§1.6). */
.score-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 13px;
}

.score-item img {
  width: 260px;
  height: 146px;
  object-fit: contain;
  object-position: center;
  background: var(--surface-strong);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* The final review is a visual check. Keep scoring rows compact, but make draft thumbnails
   readable enough that parents do not have to open every problem in the zoom dialog. */
.score-list--draft .score-item {
  grid-template-columns: 44px minmax(380px, 46%) minmax(220px, 1fr);
}
.score-list--draft .score-item img,
.score-list--draft .score-item .score-thumb-missing {
  width: 100%;
  height: clamp(210px, 24vw, 260px);
}

.score-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.score-main h2 { overflow-wrap: anywhere; }

.score-memo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: end;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.score-memo-form label {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.score-memo-form textarea {
  min-height: 66px;
  resize: vertical;
}
.score-memo-form .small { grid-column: 1 / -1; }
.score-item-source {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin: -1px 0 0;
}
.score-item-source span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--line-strong);
}
.score-problem-id {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.score-item-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
}

.score-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #243746;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.score-status-pill.is-unanswered {
  background: #fff;
  color: #8a5a0f;
  border: 1px solid #dca84a;
  box-shadow: inset 0 0 0 1px rgba(220, 168, 74, .18);
}
.score-status-pill.is-print-order {
  background: var(--surface-strong);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
/* §2 score: empty thumb well — faint problem-glyph watermark + an expand-hint corner so the
   ×109 blank grey boxes don't read as broken. */
.score-thumb-missing {
  position: relative;
  width: 260px;
  height: 146px;
  background: var(--surface-strong);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}
.score-thumb-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, transparent 13px, var(--line) 13px, var(--line) 15px, transparent 15px),
    linear-gradient(var(--line-strong), var(--line-strong));
  background-size: 100% 100%, 18px 2px;
  background-position: center, 50% 66%;
  background-repeat: no-repeat;
  opacity: .5;
}

.image-retry {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 12px;
  color: var(--accent-dark);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
}
.image-retry::before { display: none; }
.image-retry:hover { background: var(--accent-soft); border-color: var(--line-strong); }

/* ── Scoring touch targets (doc 08 §6.3) ──────────────── */
/* Finger-sized buttons: >=48px desktop, >=52px phone. >=8px gap = no mis-taps. */
.score-list .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.score-list .button-row form {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.score-list .button-row .score-clear-form {
  flex: 0 0 auto;
}
.score-list .button-row button {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-md);
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.score-list .button-row .score-clear-form button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

/* Instant-save feedback states (doc 08 §6.2). */
.score-item[data-state="saving"] { opacity: .78; }
.score-item[data-state="saved"]  { border-color: var(--ok); }
.score-item[data-state="error"]  { border-color: var(--danger); }

/* ── Post-scoring next-review banner (doc 08 §6.5 / P1-B) ──
   §2 score P2: solid --accent-soft fill + a left accent border so it reads distinctly from the
   sticky progress panel (which keeps the tonal gradient). */
.next-review-banner {
  display: none;
  margin: 18px 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.next-review-banner.is-visible { display: block; }
.next-review-banner p {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 15px;
}

/* Bottom sticky completion bar — appears only when all items are graded (is-visible toggled in JS;
   server-renders is-visible when next_review is set for no-JS). Keeps the next step at the thumb. */
.score-complete-bar {
  display: none;
  position: sticky;
  bottom: 0;
  /* Above the in-page sticky progress panel (20), but below modals/dropdowns (900+) so it never
     covers the zoom modal or filter menus. */
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 18px -16px -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 20px rgba(20, 50, 80, .08);
}
.score-complete-bar.is-visible { display: flex; }
.score-complete-bar-label { font-weight: 700; color: var(--ink-soft); font-size: var(--fs-sm); }
.score-complete-bar .button { flex: 0 0 auto; }

.source-context {
  margin-top: -8px;
}

.source-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.source-bulk-actions h2 {
  margin: 0 0 4px;
  font-size: var(--fs-h3);
}
.source-bulk-actions p {
  margin: 0;
}

/* ── Sticky scoring progress (§2 score P0) ────────────────
   The lifeline can run ~43,000px on mobile @109 items; the progress must never scroll away.
   Sits below the z-30 topbar. */
.score-progress-panel {
  position: sticky;
  /* sit BELOW the sticky topbar, not under it (both were top:0 and collided).
     Measured: desktop topbar ≈85px. Mobile (stacked nav ≈132px) overridden below. */
  top: 88px;
  z-index: 20;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--accent-soft), #fff);
}

.score-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* number group — 記録済み 59 / 109 (label leads, row 31). */
.score-progress-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.score-progress-label {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.score-progress-numbers {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-soft);
  font-weight: 700;
}
.score-progress-numbers strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

/* progress bar fills the middle on desktop. */
.score-progress .progress-bar {
  flex: 1 1 auto;
  height: 8px;
  margin-top: 0;
}

/* per-result breakdown — right-aligned, desktop only. */
.score-progress-breakdown {
  display: flex;
  gap: var(--space-4);
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.score-progress-breakdown strong {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 未入力へ jump — mobile only (desktop relies on the breakdown + full bar). */
.score-jump-unanswered {
  display: none;
  flex: 0 0 auto;
  min-height: 0;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
/* Time-saving hint under the progress panel (parity with source_results' bulk guidance). */
.score-shortcut-hint { margin: 8px 0 0; flex-basis: 100%; }
/* 「まず、ぜんぶできたにする」を主導線として強調(中受は正答率が高く、誤答だけ拾うのが最速)。 */
.score-all-correct-btn { min-height: 44px; font-weight: 800; }

/* ── Settings ─────────────────────────────────────────── */

.settings-list {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);   /* §2: 150 → 96 (label column was too wide) */
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.settings-list dt {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.settings-list dd {
  margin: 0;
  min-width: 0;
}

.settings-section-title {
  /* §2 settings: drop the floating border-top/padding-top that drew a short
     line just under each .panel top; the card edge is divider enough. */
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink-soft);
}

/* §2 settings: narrow the thin content to a centered 640px column so the
   840px panel isn't ⅓-empty on desktop. Head aligns with the panels. */
.settings-head { max-width: 640px; margin-inline: auto; }
.settings-panel.narrow { max-width: 640px; margin-inline: auto; }
.settings-logout-form {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ── Toast Notifications ──────────────────────────────── */

.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 50;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  animation: slideInRight .3s ease-out, fadeOut .4s ease 2.6s forwards;
}

.toast--success { border-color: #a8d1be; color: var(--ok); }
.toast--error   { border-color: #ddb0ac; color: var(--danger); }
.toast--info    { border-color: var(--line-strong); color: var(--accent); }

/* ── Busy / Loading Feedback ─────────────────────────── */

.global-busy {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(244, 250, 255, 0.62);
  backdrop-filter: blur(2px);
}
.global-busy[hidden] { display: none; }
.global-busy-panel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  max-width: min(320px, calc(100vw - 48px));
  padding: 13px 16px;
  border: 1px solid rgba(22, 139, 232, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 700;
}
.busy-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  border: 2px solid rgba(22, 139, 232, 0.22);
  border-top-color: var(--accent);
  animation: busy-spin .72s linear infinite;
}
button.is-loading,
.button.is-loading {
  pointer-events: none;
  opacity: .78;
}
button.is-loading::before,
.button.is-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -0.14em;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: busy-spin .72s linear infinite;
}
.score-item[data-state="saving"] .button-row button {
  pointer-events: none;
  opacity: .62;
}
.score-item[data-state="saving"] .button-row button.active::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .45em;
  vertical-align: -0.14em;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: busy-spin .72s linear infinite;
}
@keyframes busy-spin {
  to { transform: rotate(360deg); }
}

/* ── Empty States ─────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.empty-state-icon {
  color: var(--line-strong);
  opacity: .5;
}

.empty-state .muted {
  font-size: 14px;
  max-width: 360px;
  /* keep-all stops a lone particle (e.g. 「取り込む|と、」) from wrapping awkwardly; the explicit
     <br> in the markup controls the intended break. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* branded 404 (§2 base / step 13 — no route leaks raw JSON) */
.not-found { max-width: 480px; margin-inline: auto; }
.not-found .empty-state { padding: 48px 24px; }
.not-found-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  opacity: 1;
}
.not-found-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 4px 0 0;
}

/* ── Import Status Colors ─────────────────────────────── */

.import-status { font-weight: 600; }
.import-status--imported  { color: var(--ok); }
.import-status--duplicate { color: var(--amber); }
/* ── Segmented Control ────────────────────────────────── */

.score-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 18px;
}

.score-list-header h2 {
  /* size/weight inherit from global h2 (--fs-h2, §1.1) — no override */
  margin: 0;
  color: var(--ink);
}
.print-item-order-note { margin: 4px 0 0; }

.segmented-control {
  display: inline-flex;
  background: var(--surface-strong);
  padding: 3px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.control-tab {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: calc(var(--radius) - 2px);
  transition: all var(--transition);
}

.control-tab:hover {
  color: var(--ink);
}

.control-tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-subtle);
}

/* count on the 未入力のみ tab (§2 score). */
.control-tab-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.control-tab.active .control-tab-count { color: var(--muted); }

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 900px) {
  .problem-filters > label:first-of-type,
  .problem-filters > .multi-filter-wrapper,
  .problem-filters > label:not(:first-of-type) {
    flex-basis: min(220px, 100%);
    max-width: none;
  }
  .score-item {
    grid-template-columns: 44px minmax(160px, 220px) minmax(0, 1fr);
  }

  /* §2 score: below the desktop row, drop the per-result breakdown and surface the 未入力へ jump
     (count + thin bar + jump). The desktop row layout is reserved for ≥900px. */
  .score-progress-breakdown { display: none; }
  .score-jump-unanswered { display: inline-flex; align-items: center; justify-self: end; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }

  .topbar {
    padding: 12px 0;
  }

  .topbar-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 0 16px;
  }

  /* §2 base: primary items stay prominent; secondary app links become a compact second row so
     mobile users can still reach 問題一覧 / 設定 without URL guessing. */
  .nav-shell {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .nav {
    width: 100%;
  }

  .nav-primary a {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    min-height: 48px;            /* tap target >=44px (祖母・子の指でも押せる) */
    font-size: 12px;
    gap: 3px;
    flex-direction: column;
    white-space: nowrap;         /* 折り返さない(「今日の復\n習」を防ぐ) */
  }
  /* mobile: 短いラベルに切替えて折り返しと横詰まりを解消 */
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }

  .nav-secondary {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .nav-demoted {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 600;
  }

  .page {
    width: min(100vw - 28px, var(--page));
    padding: 16px 0 44px;
  }

  .hero, .section-head, .row, .candidate-summary, .selection-tray, .preview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 16px;
  }

  /* §2 history: single column on mobile — title+meta, then aside (chip + full-width actions). */
  .history-row { grid-template-columns: 1fr; gap: 12px; }
  .history-row-aside { align-items: stretch; }
  .history-row-aside .status-badge,
  .history-row-aside .history-chip { align-self: flex-start; }

  h1 { font-size: 26px; }

  .stats, .form-grid, .settings-list {
    grid-template-columns: 1fr;
  }

  .panel { padding: 14px; }
  .actionbar { justify-content: stretch; }

  .problem-workbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .workbar-status,
  .workbar-controls {
    align-items: stretch;
  }

  .workbar-controls > label,
  .workbar-controls > button,
  .workbar-controls > .button,
  .view-switch {
    flex: 1 1 160px;
  }

  .button-row, .filters { align-items: stretch; }
  .button-row > *, .button-row form, .button-row button, .button-row .button {
    width: 100%;
  }
  .filters > * { width: 100%; }
  .quick-filters { flex-basis: 100%; }
  .problem-grid { grid-template-columns: 1fr; }
  /* Metadata was added to each card; one column is now more readable than a cramped 2-col phone grid. */
  .problem-grid.image-only-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .problem-list-toolbar {
    align-items: stretch;
  }
  .problem-status-tabs {
    flex: 1 1 100%;
  }
  .problem-sort-form {
    flex: 1 1 100%;
  }
  .problem-sort-form select {
    flex: 1 1 auto;
    max-width: none;
  }
  .problem-list-total {
    margin-left: 0;
  }
  .image-only-card .card-body {
    display: grid;
    gap: 8px;
  }
  .image-only-card .button-row {
    grid-template-columns: 1fr 1fr;
  }
  .image-only-card img,
  .image-only-card .card-thumb-missing {
    aspect-ratio: 4 / 3;
  }

  /* §2 score P0: mobile progress collapses to a 56px row — count + thin full-width bar + 未入力へ.
     scroll-margin-top accounts for the taller mobile (column) topbar + secondary nav + this sticky row. */
  .score-item { scroll-margin-top: 204px; }

  /* Mobile topbar stacks (brand + primary nav + secondary nav) to ≈176px, so the sticky progress row sits lower
     than the desktop 88px (else it tucks under the topbar). */
  .score-progress-panel { padding: 8px var(--space-4); top: 180px; }
  .score-progress {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .score-progress .progress-bar {
    grid-column: 1 / -1;
    width: 100%;
  }
  .score-progress form {
    grid-column: 1 / -1;
    width: 100%;
  }
  .score-progress .score-all-correct-btn {
    width: 100%;
    white-space: normal;
  }
  .score-shortcut-hint {
    grid-column: 1 / -1;
  }
  .score-progress-numbers strong { font-size: 17px; }

  .score-item {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }
  .score-list--draft .score-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .score-item img,
  .score-item .score-thumb-missing {
    grid-column: 2;
    width: 100%;
    max-width: 360px;
    height: 128px;
  }
  .score-list--draft .score-item img,
  .score-list--draft .score-item .score-thumb-missing {
    max-width: 520px;
    height: clamp(190px, 48vw, 280px);
  }
  .score-main { grid-column: 2; }
  /* Four completion choices, with "未入力に戻す" as a quieter full-width utility. */
  .score-item .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
  }
  .score-item .button-row form {
    width: 100% !important;
    margin: 0 !important;
  }
  .score-item .button-row button {
    width: 100% !important;
    margin: 0 !important;
    min-height: 52px !important;        /* doc 08 §6.3: phones get a bigger target */
    padding: 8px 6px !important;
    font-size: 13px !important;
    /* Stack icon over label so a narrow column never splits "icon | text" awkwardly across lines;
       labels are short (できた / もう一度 / できなかった) so this reads as a clean 2-line chip. */
    flex-direction: column !important;
    gap: 3px !important;
    line-height: 1.25 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .score-item .button-row .score-clear-form {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: auto !important;
  }
  .score-item .button-row .score-clear-form button {
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .score-memo-form {
    grid-template-columns: 1fr;
  }
  .score-memo-form .button {
    width: 100%;
  }

  .score-complete-bar {
    margin: 18px 0 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    flex-direction: column;
    align-items: stretch;
  }
  .score-complete-bar .button {
    width: 100%;
  }

  /* Modern 2-column pill selection grid for fieldsets on mobile */
  fieldset {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  fieldset legend {
    grid-column: 1 / -1;
  }
  fieldset .inline-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 0 !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: background-color var(--transition), border-color var(--transition) !important;
  }
  fieldset .inline-check:has(input:checked) {
    background-color: var(--surface-strong) !important;
    border-color: var(--accent) !important;
  }

  .classify-nudge {
    align-items: stretch;
    flex-direction: column;
  }
  .classify-mode-grid {
    grid-template-columns: 1fr;
  }
  .classify-card {
    padding: 14px;
  }
  .classify-image-frame img,
  .classify-thumb-missing {
    height: min(42vh, 340px);
    min-height: 180px;
  }
  .classify-card h2 {
    font-size: 21px;
  }
  .classify-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
  .classify-choice {
    min-height: 58px;
  }
  .pdf-filter-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* The five verbose selection modes need a full row on phones. Keeping them in
     two columns makes both the label and helper text break every few characters. */
  .pdf-mode-chips,
  .pdf-paper-chips {
    grid-template-columns: 1fr;
  }
  .pdf-filter-chip {
    width: 100%;
    justify-content: flex-start;
  }

  .bulk-panel {
    grid-template-columns: 1fr;
  }

  .score-command-head, .score-id-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
  }

  .score-id-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .score-id-buttons button {
    flex: 1 1 45%;
    justify-content: center !important;
  }

  .pagination {
    justify-content: stretch;
    margin-bottom: 128px;
  }

  .pagination .button, .pagination .page-count {
    flex: 1 1 auto;
    text-align: center;
  }

  .toast-container {
    top: auto;
    bottom: 20px;
    right: 16px;
    left: 16px;
  }

  .toast {
    max-width: none;
  }
}

/* ── Image Zoom Modal ────────────────────────────────── */
.zoom-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 64px 12px 12px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: rgba(22, 26, 25, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--transition);
}

.zoom-modal.show {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  gap: 10px;
  opacity: 1;
}

.zoom-modal-viewport {
  width: min(1120px, 100%);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, .04) 25%, transparent 25%),
    rgba(8, 13, 12, .38);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: default;
}

.zoom-modal[data-zoomed="true"] .zoom-modal-viewport { cursor: grab; }
.zoom-modal-viewport.is-dragging { cursor: grabbing; }

.zoom-modal-stage {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.zoom-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.zoom-modal.show .zoom-modal-content {
  transform: translate(-50%, -50%);
}

.zoom-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #fff;
  transition: color var(--transition), transform var(--transition), background var(--transition);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  line-height: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1010;
}

.zoom-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.zoom-modal-controls {
  min-height: 44px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(10, 16, 15, .78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.zoom-modal-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  font-weight: 850;
}

.zoom-modal-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, .22);
}

.zoom-modal-controls button:disabled {
  cursor: default;
  opacity: .42;
}

.zoom-modal-controls output {
  min-width: 58px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: center;
}

.zoom-modal-caption {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: 20px;
  max-width: 80%;
  word-break: break-all;
}

@media (max-width: 560px) {
  .zoom-modal {
    padding: 58px 7px 7px;
  }
  .zoom-modal-close {
    top: 7px;
    right: 7px;
  }
  .zoom-modal-controls {
    width: min(100%, 340px);
    box-sizing: border-box;
  }
  .zoom-modal-controls button {
    flex: 1 1 44px;
    padding-inline: 8px;
  }
  .zoom-modal-caption {
    max-width: 96%;
    font-size: 12px;
  }
}

/* Hover effect for zoomable images */
[data-zoomable] {
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

[data-zoomable][role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

[data-zoomable]:hover {
  transform: translateY(-2px);
  filter: brightness(0.98);
}


/* ---- 一括編集モーダル —— 通常カードの操作とは混ぜず、選択後だけ開く編集面 ---- */
.edit-modal {
  display: none;
  position: fixed;
  z-index: 1100;            /* 下部固定バー .selection-tray(z-index:40) より前面 */
  inset: 0;
  padding: 24px 16px;
  overflow: auto;
  background-color: rgba(22, 26, 25, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--transition);
}

.edit-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.edit-modal-card {
  display: grid;
  gap: 8px;
  width: min(420px, 100%);
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
  padding: 22px;
  transform: scale(0.96);
  transition: transform var(--transition);
}

.edit-modal.show .edit-modal-card { transform: scale(1); }

.edit-modal-card h2 { margin: 0; }
.edit-modal-card label { font-weight: 700; font-size: 13px; }
.edit-modal-card .text-input { width: 100%; }
.edit-modal-actions { justify-content: flex-end; margin-top: 6px; }

.catalog-bulk-toggle {
  white-space: nowrap;
}

.card-bulk-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.card-bulk-pick[hidden] { display: none; }
.card-bulk-pick input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.card-bulk-pick:has(input:checked) { color: #fff; background: var(--accent); }

body.is-bulk-selecting .card-bookmark,
body.is-bulk-selecting .card-exclusion,
body.is-bulk-selecting [data-card-pick],
body.is-bulk-selecting .card-edit,
body.is-bulk-selecting .similar-card-action,
body.is-bulk-selecting .print-tray {
  display: none !important;
}

body.is-bulk-selecting .problem-card:has([data-pick-checkbox]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow);
}

.bulk-selection-tray {
  width: min(680px, calc(100vw - 32px));
}

.bulk-edit-card {
  width: min(680px, 100%);
  gap: 12px;
}

.bulk-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bulk-edit-head h2,
.bulk-edit-head p,
.bulk-edit-summary { margin: 0; }

.bulk-edit-summary {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-weight: 800;
}

.bulk-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bulk-edit-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.bulk-edit-field:has([data-bulk-apply]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.bulk-edit-apply {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--ink);
  cursor: pointer;
}

.bulk-edit-apply input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.bulk-edit-field select,
.bulk-edit-field .text-input { width: 100%; min-width: 0; }
.bulk-edit-field [data-bulk-control]:disabled { opacity: .52; cursor: not-allowed; }
.bulk-edit-field:has([data-bulk-category-groups]) { grid-column: 1 / -1; }
.bulk-edit-field [data-bulk-category-groups][inert] { opacity: .52; }

.bulk-edit-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .bulk-edit-fields { grid-template-columns: 1fr; }
  .bulk-edit-card { padding: 18px; }
  .bulk-selection-tray { align-items: stretch; }
  .bulk-selection-tray > .button { width: 100%; }
}


/* ---- Upload UI (STEP7-upload) — on v2 tokens (§1.2: no second blue app) ---- */
.upload-panel { max-width: 720px; margin-inline: auto; }   /* §2 upload: centered, not 1440px 间延び */
.section-sub { color: var(--muted); font-size: var(--fs-body); margin: var(--space-1) 0 0; }
/* Upload header: stack the h1 above its sub-text instead of sharing a space-between flex row,
   which squeezed the h1 and broke「宿題・テストを取り込む」mid-word as「取/り込む」on narrow widths. */
.upload-panel .section-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.upload-panel .section-head h1 { text-wrap: balance; }
.upload-panel .field-label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.field-required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  vertical-align: middle;
}
.subject-note { margin: 0 0 var(--space-2); }
.upload-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.upload-privacy-note svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.upload-privacy-note .text-link { margin-left: 6px; white-space: nowrap; }
.upload-field { margin-bottom: var(--space-5); }
.req { font-size: var(--fs-2xs); color: var(--danger); margin-left: 6px; }
.field-note { font-size: var(--fs-2xs); color: var(--muted); margin-left: 8px; font-weight: 700; }
.subject-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.subject-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; font-size: 15px; min-height: 44px;
  color: var(--ink);
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.subject-choice.selected {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600;
  box-shadow: 0 8px 18px rgba(27, 117, 187, 0.10);
}
.subject-choice-disabled,
.subject-choice:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--surface-soft);
  border-color: var(--line);
  opacity: 0.68;
}
.subject-choice small {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--muted);
}
.text-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 16px; box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* パスワード入力 + 表示トグル。入力欄の右端に「表示/隠す」を重ねる。 */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; min-height: 48px; padding-right: 68px; }
.password-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  min-width: 52px; min-height: 44px; padding: 8px 10px; border: 0; background: transparent;
  color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-sm);
}
.password-toggle:hover { background: var(--accent-glow); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.chip {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-soft); cursor: pointer; font-size: var(--fs-sm);
}
.upload-picker {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 28px 24px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
  cursor: pointer; color: var(--muted); font-weight: 600; text-align: center;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.upload-picker svg { color: var(--accent); }   /* §2 upload: accent picker icon (主役化) */
.upload-picker-hint {
  max-width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}
.upload-picker:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-picker.is-dragover {
  border-color: var(--accent);
  background: #e8f6ff;
  box-shadow: 0 0 0 4px var(--accent-glow), 0 18px 34px rgba(24, 143, 230, .16);
  color: var(--accent-dark);
  transform: translateY(-1px);
}
.upload-picker.is-dragover svg,
.upload-picker.is-dragover .upload-picker-hint {
  color: var(--accent-dark);
}
.upload-picker:active { transform: translateY(1px); }
.upload-picker[role="button"]:focus-visible {
  outline: 3px solid var(--accent-glow);
  outline-offset: 3px;
  border-color: var(--accent);
}
/* Secondary「その場で撮影する」shortcut: a compact horizontal row, primarily for touch devices.
   Hidden on non-touch (pointer:fine) where a hardware camera shortcut is rarely useful. */
.upload-picker-camera {
  flex-direction: row;
  gap: 8px;
  margin-top: var(--space-2);
  padding: 12px 16px;
  border-style: solid;
  font-size: var(--fs-sm);
}
@media (pointer: fine) { .upload-picker-camera { display: none; } }
.upload-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.upload-batch-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.upload-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  min-width: 0;
}
.upload-row--single {
  grid-template-columns: 1fr;
}
.upload-row--no-source-preview {
  grid-template-columns: minmax(0, 1fr);
}
.upload-preview-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Single preview: hug the photo's natural ratio (no fixed 16/9 box) so a wide/short cropped
   problem doesn't sit in a tall letterbox with wasted top/bottom whitespace. Cap the height so a
   very tall photo can't dominate the form. */
.upload-row--single .upload-preview-frame {
  aspect-ratio: auto;
  max-height: 70vh;
}
.upload-row--single .upload-preview-image {
  height: auto;
  max-height: 70vh;
}
/* A full A4 PDF preview is useful for orientation, but it must not push the source/category
   controls several screens below the fold. Ordinary photo previews keep their existing size. */
.upload-row--single.upload-row--pdf .upload-preview-frame,
.upload-row--single.upload-row--pdf .upload-preview-image {
  max-height: min(52vh, 420px);
}
.upload-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
}
.upload-preview-placeholder {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.upload-preview-placeholder.is-error { color: var(--danger); }
.upload-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.upload-photo-preparation {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #afd4e7;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1f9fd, #fff);
}
.upload-photo-preparation.is-ready {
  border-color: #add8bd;
  background: linear-gradient(145deg, #edf9f1, #fff);
}
.upload-photo-preparation-copy { display: grid; gap: 4px; }
.upload-photo-preparation-copy strong { color: var(--ink); font-size: var(--fs-sm); }
.upload-photo-preparation-copy p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
.upload-photo-preparation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-photo-preparation-actions .button {
  min-height: 48px;
  white-space: normal;
  line-height: 1.45;
}
.upload-photo-preparation-primary { flex: 1 1 300px; }
.upload-photo-preparation-secondary { flex: 0 1 auto; }
.upload-photo-preparation-actions .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.upload-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 12px;
  padding: 14px 16px;
  border: 1px solid #afd4e7;
  border-radius: 14px;
  background: #f1f9fd;
}
.upload-review-summary[hidden] { display: none; }
.upload-review-summary strong { color: var(--ink); }
.upload-review-summary span { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.upload-review-summary.has-unprocessed { border-color: #e5c779; background: #fff9e8; }
#add-button:disabled { border-color: #cad4dc; background: #dfe5e9; color: #667785; box-shadow: none; cursor: not-allowed; }
.upload-entry-label { display: grid; gap: 7px; margin: 9px 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.upload-entry-label-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.upload-entry-label-toggle input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.upload-entry-source-label { margin-top: 2px; color: var(--ink-soft); }
.upload-entry-label .text-input { margin-top: 2px; }
.upload-row-guidance { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.upload-pdf-overview { display: grid; gap: 10px; min-width: 0; margin: 12px 0; }
.upload-pdf-overview-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.upload-pdf-overview-head span { flex: 1; color: var(--muted); font-size: var(--fs-xs); }
.upload-pdf-pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 3px 2px 9px; }
.upload-pdf-page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(176px, 188px); align-items: center; gap: 7px 12px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.upload-pdf-page.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.upload-pdf-page-open { grid-row: 1 / span 2; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 84px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.upload-pdf-page-open:disabled { color: var(--muted); cursor: default; }
.upload-pdf-page-open img, .upload-pdf-page-placeholder { width: 84px; height: 84px; object-fit: contain; border-radius: 7px; background: #edf4f7; }
.upload-pdf-page-placeholder { display: grid; place-items: center; color: #6b7e8a; font-size: 24px; font-weight: 900; }
.upload-pdf-page-open span:last-child { min-width: 0; font-size: 12px; font-weight: 850; }
.upload-pdf-page-state { min-height: 25px; padding: 5px 7px; border-radius: 7px; background: #eef2f4; color: #596b76; font-size: 11px; font-weight: 850; text-align: center; }
.upload-pdf-page-state--ready { background: #e8f7ee; color: #17633a; }
.upload-pdf-page-state--unselected { background: #f2f3f4; color: #44535e; }
.upload-pdf-page-actions { grid-column: 2; display: grid; min-width: 0; gap: 6px; }
.upload-pdf-page-actions .button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.upload-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.upload-row-name { flex: 1; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 8px;
}
.upload-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.upload-retry-button { flex: 0 0 auto; }
.upload-row-status { flex: 1; min-width: 160px; font-size: var(--fs-sm); }
.upload-row--failed .upload-row-status { color: var(--danger); }
.upload-row--imported .upload-row-status { color: var(--accent-dark); }
.upload-row-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.upload-progress-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.upload-progress { flex: 1 1 140px; height: 8px; background: var(--bg-rail); border-radius: 4px; overflow: hidden; }
.upload-progress-wrap .upload-row-status { flex: 1 1 160px; min-width: 0; }
.upload-cancel-button { flex: 0 0 auto; min-height: 44px; }
.upload-progress-fill { height: 100%; background: var(--accent); transition: width 0.2s; }
.upload-editor {
  display: grid;
  gap: var(--space-4);
}
html.is-modal-open,
html.is-modal-open body {
  overflow: hidden;
}
.upload-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.upload-editor-modal[hidden] { display: none; }
.upload-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 38, 0.46);
}
.upload-editor-dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(14, 42, 70, 0.28);
}
.upload-editor-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 12px;
  padding: 20px 22px 14px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 14px rgba(20, 50, 80, .05);
}
.upload-editor-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.upload-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.upload-editor-toolbar[hidden] { display: none; }
.upload-editor-toolbar .upload-cutter-flash { flex: 1 0 100%; }
.upload-editor-toolbar .upload-cutter-pagebar { flex: 0 1 auto; }
.upload-editor-toolbar .upload-editor-actions {
  flex: 1 1 460px;
  justify-content: flex-end;
}
.upload-editor-kicker {
  margin: 0 0 4px;
  color: var(--accent-dark);
  font-size: var(--fs-2xs);
  font-weight: 800;
}
.upload-editor-header h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0;
}
.upload-editor-body {
  padding: 18px 22px 22px;
}
.upload-editor-file {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-editor-intro {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.upload-editor-stage {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  background: #f7fbff;
  border: 1px solid var(--line);
  overflow: hidden;
  touch-action: none;
}
.upload-cutter-stage { cursor: crosshair; }
.upload-editor-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}
.upload-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.upload-preset-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.upload-preset-button:hover,
.upload-preset-button.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.upload-editor-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-soft);
}
.upload-editor-details summary {
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.upload-editor-details[open] summary {
  margin-bottom: var(--space-3);
}
.upload-crop-box {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 999px rgba(7, 31, 58, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  cursor: move;
  touch-action: none;
}
.upload-crop-box.is-dragging { border-color: var(--accent-dark); }
.upload-crop-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  touch-action: none;
}
/* The entire 44px target stays inside the crop box, including when the box touches a stage edge.
   The small dot is visual only; the transparent parent remains the finger-sized hit target. */
.upload-crop-handle::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 2px 8px rgba(15, 64, 110, 0.22);
}
.upload-crop-handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.upload-crop-handle--ne { right: 0; top: 0; cursor: nesw-resize; }
.upload-crop-handle--sw { left: 0; bottom: 0; cursor: nesw-resize; }
.upload-crop-handle--se { right: 0; bottom: 0; cursor: nwse-resize; }
.upload-crop-handle--nw::before { left: 2px; top: 2px; }
.upload-crop-handle--ne::before { right: 2px; top: 2px; }
.upload-crop-handle--sw::before { left: 2px; bottom: 2px; }
.upload-crop-handle--se::before { right: 2px; bottom: 2px; }
/* Coarse pointers (touch): enlarge the visible dot while retaining the same 44px target. */
@media (pointer: coarse) {
  .upload-crop-handle::before { width: 24px; height: 24px; }
}
.upload-editor-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.upload-range {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.upload-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.upload-range output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.upload-range input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.upload-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.upload-toggle input { accent-color: var(--accent); }
.upload-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.upload-cutter-pagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.upload-cutter-help {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Candidate review: one focused, full-screen decision surface. The source rectangle and the
   exact saved crop stay visible together; proposals do not enter the upload region list until
   the final confirmation action. */
.upload-editor-modal--candidate {
  padding: 10px;
  place-items: stretch;
}
.upload-editor-modal--candidate .upload-editor-dialog {
  display: flex;
  flex-direction: column;
  width: min(1480px, 100%);
  height: calc(100vh - 20px);
  max-height: none;
  margin: auto;
  overflow: hidden;
  border-radius: 18px;
}
.upload-editor-modal--candidate .upload-editor-header {
  flex: 0 0 auto;
  padding: 18px 24px;
}
.upload-editor-modal--candidate .upload-editor-header-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 20px;
}
.upload-editor-modal--candidate .upload-editor-heading {
  grid-column: 2;
  text-align: center;
}
.upload-editor-modal--candidate .upload-editor-kicker { display: none; }
.upload-editor-modal--candidate .upload-editor-close {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.upload-candidate-header-progress {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 26px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.upload-candidate-progress-item strong {
  margin: 0 2px;
  color: var(--accent-dark);
  font-size: 22px;
}
.upload-editor-modal--candidate .upload-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.upload-candidate-review {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  background: #f8fbfe;
}
.upload-candidate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.upload-candidate-grid img { max-width: 100%; }
.upload-candidate-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 26px 28px;
}
.upload-candidate-panel + .upload-candidate-panel {
  border-left: 1px solid var(--line);
  background: #fff;
}
.upload-candidate-panel h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.upload-candidate-file {
  max-width: 100%;
  margin: -5px 0 12px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-candidate-source-stage {
  width: min(100%, 560px);
  margin: 0 auto;
  background: #eef3f7;
  box-shadow: 0 10px 30px rgba(23, 54, 82, 0.08);
}
.upload-candidate-source-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.upload-candidate-source-actions .button { min-height: 44px; }
.upload-candidate-source .upload-cutter-help { margin-top: 10px; }
.upload-candidate-preview-frame {
  --candidate-preview-ratio: 1.4;
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(36vh, 360px);
  aspect-ratio: var(--candidate-preview-ratio);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 54, 82, 0.07);
}
.upload-candidate-preview-frame img {
  position: absolute;
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
.upload-candidate-checklist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: min(100%, 720px);
  margin: 14px auto 0;
}
.upload-candidate-checklist-label {
  margin-right: 2px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.upload-candidate-check-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.upload-candidate-warning,
.upload-candidate-message {
  width: min(100%, 720px);
  margin: 16px auto 0;
  border-radius: 12px;
}
.upload-candidate-warning {
  display: grid;
  gap: 3px;
  padding: 13px 16px;
  border: 1px solid #e7c869;
  background: #fff9e7;
  color: #765100;
  font-size: var(--fs-sm);
}
.upload-candidate-warning strong { color: #9a6500; }
.upload-candidate-message {
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.upload-candidate-message.is-loading {
  border-color: #acd3ea;
  background: #eff8fd;
  color: var(--accent-dark);
}
.upload-candidate-confirmed {
  width: min(100%, 720px);
  margin: 16px auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.upload-candidate-confirmed > summary {
  min-height: 44px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.upload-candidate-confirmed .upload-region-previews { padding: 0 12px 12px; }
.upload-candidate-footer {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 20px rgba(20, 50, 80, 0.05);
}
.upload-candidate-pending-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.upload-candidate-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, auto));
  justify-content: end;
  gap: 10px;
  min-width: 0;
}
.upload-candidate-actions .button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}
.upload-candidate-actions .upload-candidate-primary { min-width: 180px; }

@media (max-width: 900px) {
  .upload-editor-modal--candidate .upload-editor-dialog {
    height: calc(100vh - 12px);
  }
  .upload-editor-modal--candidate .upload-editor-body { overflow: auto; }
  .upload-candidate-review { height: auto; min-height: 100%; }
  .upload-candidate-grid {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .upload-candidate-panel { overflow: visible; padding: 20px; }
  .upload-candidate-panel + .upload-candidate-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .upload-candidate-footer {
    position: sticky;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .upload-candidate-pending-note { text-align: center; }
  .upload-candidate-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  .upload-candidate-actions .button,
  .upload-candidate-actions .upload-candidate-primary {
    width: 100%;
    min-width: 0;
  }
}
/* Transient feedback after adding/updating a region. Empty by default (no reserved gap). */
.upload-cutter-flash {
  margin: 0;
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid #a8d8b9;
  border-radius: 10px;
  background: #edf9f1;
  color: var(--ok);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.upload-cutter-flash:empty { display: none; }
.upload-cutter-flash.is-warn { border-color: #e3c56d; background: #fff8df; color: var(--amber); }
.upload-cutter-flash.is-info { border-color: #a9d3eb; background: #eff8fd; color: var(--accent-dark); }
.upload-region-adjusted-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
  pointer-events: none;
}
.upload-region-previews {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.upload-region-previews--compact {
  padding-top: 0;
  border-top: 0;
}
.upload-region-previews-title {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.upload-region-preview-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: 2px;
}
.upload-region-classification-details {
  grid-column: 2;
  min-width: 0;
  border-top: 1px solid var(--line);
  background: #fbfdfe;
}
.upload-region-classification-summary {
  min-height: 44px;
  padding: 12px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}
.upload-region-classification-summary.is-required { color: var(--danger); }
.upload-region-classification {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
.upload-region-classification-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.upload-region-classification-field select {
  width: 100%;
  min-height: 42px;
  color: var(--text);
  background: #fff;
}
.upload-region-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(132px, 38%) minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.upload-region-preview-frame {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border-right: 1px solid var(--line);
}
.upload-region-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}
/* Zoomable region thumbnail: make the tap-to-enlarge affordance obvious (the shared
   [data-zoomable] rule adds cursor:zoom-in; this adds a visible magnifier hint corner). */
.upload-region-preview-frame img[data-zoomable] {
  cursor: zoom-in;
}
.upload-region-preview-frame:has(img[data-zoomable])::after {
  content: "⤢";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(12, 24, 38, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
.upload-region-preview-frame span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.upload-region-preview figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.upload-region-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.upload-cut-chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 0 12px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.upload-cut-chip:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.upload-cut-chip--delete:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: #fff5f5;
}
.upload-handoff {
  margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--accent-soft); border: 1px solid var(--line-strong);
}
.handoff-headline { font-weight: 700; font-size: var(--fs-h2); margin: 0 0 var(--space-1); }
.handoff-headline:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.handoff-troubleshoot {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.handoff-troubleshoot[hidden] { display: none; }
.handoff-failed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.handoff-failed-heading h3 { margin: 0; font-size: var(--fs-h3); }
.handoff-failed-list { display: grid; gap: var(--space-2); }
.handoff-failed-problem {
  display: grid;
  grid-template-columns: minmax(128px, 34%) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 58, 48, 0.24);
  border-radius: var(--radius);
  background: #fff;
}
.handoff-failed-preview {
  min-height: 118px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}
.handoff-failed-preview img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; cursor: zoom-in; background: #fff; }
.handoff-failed-preview span { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.handoff-failed-problem-body { display: grid; align-content: center; justify-items: start; gap: 5px; min-width: 0; padding: 12px 14px; }
.handoff-failed-source { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.handoff-failed-reason { margin: 2px 0 6px; color: var(--danger); font-size: var(--fs-sm); line-height: 1.55; }
.handoff-troubleshoot-card {
  padding: 12px 14px;
  border: 1px solid rgba(180, 58, 48, 0.22);
  border-radius: var(--radius);
  background: #fffafa;
}
.handoff-troubleshoot-title {
  margin: 0 0 4px;
  color: var(--danger);
  font-weight: 800;
}
.handoff-troubleshoot-body,
.handoff-troubleshoot-files {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.handoff-troubleshoot-files {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 620px) {
  .upload-editor-modal--candidate { padding: 0; }
  .upload-editor-modal--candidate .upload-editor-dialog {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .upload-editor-modal--candidate .upload-editor-header { padding: 12px 14px; }
  .upload-editor-modal--candidate .upload-editor-header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .upload-editor-modal--candidate .upload-editor-heading {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .upload-editor-modal--candidate .upload-editor-header h2 { font-size: 18px; }
  .upload-editor-modal--candidate .upload-editor-close {
    grid-column: 1;
    max-width: 150px;
    padding-inline: 10px;
  }
  .upload-candidate-header-progress {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    gap: 22px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .upload-candidate-progress-item strong { font-size: 19px; }
  .upload-candidate-grid { grid-template-columns: minmax(0, 1fr); }
  .upload-candidate-panel { padding: 16px 14px; }
  .upload-candidate-source-stage { width: 100%; }
  .upload-candidate-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }
  .upload-candidate-pending-note { text-align: center; }
  .upload-candidate-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  .upload-candidate-actions .button,
  .upload-candidate-actions .upload-candidate-primary {
    width: 100%;
    min-width: 0;
  }
  .upload-candidate-actions .upload-candidate-primary:last-child { grid-column: 1 / -1; }
  .upload-picker-hint--drop { display: none; }
  .upload-photo-preparation-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .upload-photo-preparation-actions .button { width: 100%; }
  .upload-review-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .upload-pdf-page { grid-template-columns: minmax(0, 1fr); }
  .upload-pdf-page-open { grid-row: auto; grid-column: 1; }
  .upload-pdf-page-state { grid-column: 1; }
  .upload-pdf-page-actions { grid-column: 1; grid-template-columns: minmax(0, 1fr) auto; }
  .upload-pdf-page-open { grid-template-columns: 72px minmax(0, 1fr); min-height: 72px; gap: 9px; }
  .upload-pdf-page-open img, .upload-pdf-page-placeholder { width: 72px; height: 72px; }
  .upload-region-preview { grid-template-columns: minmax(0, 1fr); }
  .upload-region-preview-frame {
    min-height: 180px;
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .upload-region-preview-frame img { width: 100%; height: auto; max-height: 280px; }
  .upload-region-classification-details { grid-column: 1; }
  .handoff-failed-heading { align-items: stretch; flex-direction: column; }
  .handoff-failed-problem { grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); }
  .upload-region-classification { grid-template-columns: 1fr; }
  .upload-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .upload-row--single { grid-template-columns: 1fr; }
  .upload-preview-frame { width: 100%; }
  .upload-editor-modal { padding: 10px; place-items: stretch; }
  .upload-editor-dialog { max-height: 96vh; border-radius: 18px; }
  .upload-editor-header { padding: 16px; }
  .upload-editor-body { padding: 14px 16px 18px; }
  .upload-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-editor-controls { grid-template-columns: 1fr; }
  .upload-row-status { min-width: 100%; }
  /* The crop overlay is positioned in stage percentages, so the stage must keep the source's
     inline aspect-ratio. The dialog already scrolls; never clamp only its height and letterbox the
     object-fit image inside a wider coordinate surface. */
  .upload-cutter .upload-editor-stage {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .upload-editor-toolbar .upload-cutter-pagebar {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .upload-editor-toolbar .upload-cutter-pagebar .button {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }
  .upload-editor-toolbar .upload-cutter-pagebar .upload-row-status {
    min-width: 0;
    text-align: center;
  }
  .upload-editor-toolbar .upload-editor-actions {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .upload-editor-toolbar .upload-editor-actions .button { width: 100%; }
}

@media (max-width: 380px) {
  .upload-candidate-actions { grid-template-columns: minmax(0, 1fr); }
  .upload-candidate-actions .upload-candidate-primary:last-child { grid-column: 1; }
  .upload-candidate-header-progress { gap: 12px; font-size: 11px; }
  .upload-editor-modal--candidate .upload-editor-close { max-width: 128px; font-size: 12px; }
  .upload-candidate-panel { padding: 14px 10px; }
  .upload-file-secondary {
    min-width: 0;
    padding-inline: 12px;
  }
  .upload-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-pdf-page-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-region-preview,
  .handoff-failed-problem {
    grid-template-columns: minmax(0, 1fr);
  }
  .upload-editor-modal { padding: 4px; }
  .upload-editor-header { padding: 14px 12px; }
  .upload-editor-body { padding: 12px; }
}

/* ── STEP 8b: home / onboarding (docs/design/09 §6.4) ──────────────────── */

/* nav: 問題一覧/設定 are demoted — borderless text links sitting outside the primary pill (§2 base). */
.nav-demoted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  transition: color var(--transition);
}
.nav-demoted svg { opacity: .7; transition: opacity var(--transition); }
.nav-demoted:hover { color: var(--accent-dark); }
.nav-demoted:hover svg { opacity: .9; }
.nav-demoted.active { color: var(--accent-dark); font-weight: 600; }
.nav-demoted.active svg { opacity: .9; }

/* ② 採点を続ける — strong action card (.panel base + left accent border). */
.action-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-5);
  margin: var(--space-6) 0;   /* §2 home: unify section gaps to 24px */
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  overflow-wrap: anywhere;
}
.action-card h2 { margin: 0 0 2px; }   /* size via .h2-lg modifier in markup (§1.1) */
.action-card p { margin: 0; }
.action-card.prominent {
  background: var(--accent-soft);
  border-left-width: 6px;
  box-shadow: var(--shadow-soft);   /* §1.3: primary CTA card is not the flattest element */
}
.action-card.prominent .button.primary { min-height: 48px; font-size: 16px; }

/* ③ 初回コーチ 1行（点線下線、muted）。 */
.first-run-steps {
  margin: 14px 0 0;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--line);
  overflow-wrap: anywhere;
}

/* 直近の作成理由。 */
.reason-preview { margin: 0 0 12px; }

/* §2 home empty-state parity：48px の --accent-soft 丸アイコン + 32px パディング
   （他画面の empty-state に揃える）。home の空状態は .panel 内に入る。 */
.panel .empty-state { padding: 32px; }
/* §2 history: roomier empty-state for the (no history) document icon. */
.panel .empty-state.history-empty { padding: 56px 24px; }
.panel .empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  opacity: 1;
}

/* recent_jobs 状態バッジ */
.status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--bg-rail);
  color: var(--ink-soft);
}
/* §2 home: badge is NOT blue — solid blue is reserved for primary actions.
   記録済み (confirmed/created, 0 remaining) → neutral base; 結果待ち/印刷待ち → amber. */
.status-badge--draft,
.status-badge--ungraded { background: var(--amber-soft); color: var(--amber); }
.status-badge--failed,
.status-badge--discarded { background: var(--danger-soft); color: var(--danger); }

/* 採点完了メッセージ（strong + muted）。 */
.score-done-note { font-weight: 600; color: var(--ink-soft); }
.answer-notice { margin: 6px 0 14px; }

/* 約束リスト（設定/退会）— §2 settings: ✓ accent marker for kept promises,
   calm line rhythm, no default disc bullets. */
.promise-list { margin: 4px 0 12px; padding: 0; list-style: none; color: var(--ink-soft); }
.promise-list li {
  position: relative;
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) 26px;
  line-height: var(--lh);
}
.promise-list li + li { border-top: 1px solid var(--line); }
.promise-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg);
}

/* 退会確認フォーム（docs/design/09 §7.5 / §2 delete-account）— 2チェック必須 + danger 送信。
   semantic grouping: 削除されるデータ block → 確認チェックボックス box → ボタン → 注釈. */
.delete-account-panel { max-width: 560px; margin-inline: auto; }

/* (1) 削除されるデータ block, separated from the confirmation form by a hairline. */
.delete-data-block { margin: 0 0 var(--space-5); }
.delete-data-block .eyebrow { margin-bottom: var(--space-2); }

.delete-account-form {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* (2) confirmation checkboxes wrapped in a calm box so they read as a deliberate gate. */
.confirm-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;            /* finger-sized touch target (mobile-first) */
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
/* checked → confirm the parent has read it (§2 delete-account). */
.checkbox-row:has(input:checked) span { color: var(--ink); font-weight: 600; }

/* §2 delete-account: 「削除せずに戻る」 is the safe primary on desktop (first/left), danger after;
   it is first in the DOM so on mobile (stacked column) the safe action stays above. */
.delete-account-form .button-row { gap: 10px; }

/* legal 注釈 sits below the submit (§2 delete-account), quiet. */
.delete-account-form .legal-note { margin: var(--space-1) 0 0; font-size: var(--fs-xs); }

/* done state — small completion cue, calmer line rhythm (§2 delete-account). */
.delete-done { line-height: 1.7; margin: var(--space-2) 0 var(--space-4); }

@media (max-width: 600px) {
  /* safe 「削除せずに戻る」 (first in DOM) stays on top; danger below. */
  .delete-account-form .button-row { flex-direction: column; }
  .delete-account-form .button-row > * { width: 100%; }
}

/* ── Login / auth screen (§2 login) ──────────────────────
   Standalone layout: replicates brand mark + footer legal links + Inter font (login does not
   extend base — the unauthenticated screen should not surface the in-app nav). Vertical centering,
   a reusable callout for notice/error/success, success-state form fade. */
.auth-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-content: center;
  gap: var(--space-4);
  width: min(380px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 48px 0 32px;
}
.auth-brand {
  align-self: end;
  font-size: 14px;
  font-weight: 800;
}
.auth-panel {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  align-self: center;
}
.auth-heading {
  margin-bottom: var(--space-5);
}
.auth-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.auth-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}
.auth-form input { min-height: var(--control-h); }
.auth-submit { min-height: 46px; margin-top: var(--space-3); }
.auth-helper-links {
  display: grid;
  gap: 8px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.auth-helper-links .text-link {
  width: fit-content;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.auth-links { align-self: end; justify-content: center; }
/* success state: fade the form once the link has been sent (§2 login). */
.auth-form.is-sent { opacity: .55; pointer-events: none; }

/* reusable callout — notice / error / success share one chrome (§2 login P0: .notice had no CSS). */
.callout {
  margin: 0 0 var(--space-4);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(22, 139, 232, 0.22);
  background: #eef8ff;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  line-height: var(--lh);
}
.callout.is-info {
  border-color: rgba(22, 139, 232, 0.22);
  background: #eef8ff;
  color: var(--accent-dark);
}
.callout.is-error {
  border-color: #ddb0ac;
  background: var(--danger-soft);
  color: var(--danger);
}
.callout.is-success {
  border-color: #a8d1be;
  background: var(--ok-soft);
  color: var(--ok);
}
/* §1.9 / §2 delete-account: the final account-delete is the heavy destructive tier,
   but softened — danger-soft fill at rest, solid red only on :active. Disabled (opacity .5)
   until both confirmation checks are on. */
button.danger, .button.danger {
  min-height: 44px;
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
  box-shadow: var(--shadow-subtle);
}
button.danger:hover, .button.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: #f3d6d2;
}
button.danger:active, .button.danger:active {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
button.danger:disabled, .button.danger:disabled,
button.danger[disabled], .button.danger[disabled] {
  opacity: .5;
  cursor: not-allowed;
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

/* 法務 draft バナー + 本文 (§2 legal) */
.draft-banner {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #fdf6e9;
  border: 1px solid #ecdcb4;
  border-left: 3px solid #d9b25a;
  color: #7a5a14;
  font-size: 12.5px;
}

/* legal eyebrow: quiet 法的事項 context, not the accent uppercase (§2 legal) */
.eyebrow-muted {
  color: var(--muted);
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 700;
}

/* legal body: readable measure + clear h2 hierarchy + custom bullets (§2 legal) */
.legal-body { max-width: 680px; }
.legal-body h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 26px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  margin: 16px 0 4px;
}
.legal-body p { color: var(--ink-soft); line-height: 1.85; margin: 0 0 10px; }
.legal-body ul { color: var(--ink-soft); list-style: none; padding-left: 0; margin: 0 0 10px; }
.legal-body li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.85;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* FAQ: native disclosure controls keep iPad touch and keyboard behavior predictable. */
.faq-page {
  display: grid;
  gap: 22px;
  width: min(880px, 100%);
  margin: 0 auto;
}

.faq-hero {
  display: grid;
  gap: 7px;
}

.faq-hero .eyebrow,
.faq-hero h1,
.faq-hero p {
  margin: 0;
}

.faq-hero > p:last-child {
  color: var(--ink-soft);
  line-height: var(--lh);
}

.faq-category-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 8px;
}

.faq-category-nav a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

.faq-category-nav a:hover,
.faq-category-nav a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.faq-category-nav a:focus-visible,
.faq-item > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.faq-all-link {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.faq-sections {
  display: grid;
  gap: 32px;
}

.faq-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  scroll-margin-top: 24px;
}

.faq-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
}

.faq-list {
  display: grid;
  gap: 8px;
}

.faq-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.faq-item > summary {
  min-height: 52px;
  padding: 14px 18px;
  color: var(--ink);
  font-weight: 750;
  line-height: 1.55;
  cursor: pointer;
  touch-action: manipulation;
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--accent-dark);
}

.faq-answer {
  padding: 14px 18px 16px;
}

.faq-answer p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.8;
}

@media (max-width: 560px) {
  .faq-page { gap: 18px; }
  .faq-category-nav { grid-template-columns: 1fr; }
  .faq-sections { gap: 26px; }
  .faq-item > summary,
  .faq-answer { padding-left: 14px; padding-right: 14px; }
}

/* footer current-page: non-link style for the active legal doc (§2 legal) */
.footer-links a[aria-current="page"] {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  pointer-events: none;
}

/* §2 problems: review reference list — flat subject label + neutral delete under
   the thumbnail, with one clean divider (§1.9 keeps the delete neutral-at-rest). */
.problem-list-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 14px;
}

.problem-status-tabs {
  max-width: 100%;
  overflow-x: auto;
}

.problem-status-tabs .control-tab {
  padding: 6px 12px;
  white-space: nowrap;
}

.problem-sort-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.problem-sort-form label,
.problem-list-total {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.problem-sort-form select {
  min-height: 34px;
  max-width: 210px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 30px 5px 10px;
}

.problem-list-total {
  margin-left: auto;
}

.image-only-card .card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.image-only-card .delete-form { margin: 0; }
.problem-card-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
}
.problem-card-meta .muted {
  overflow-wrap: anywhere;
}

.problem-card-headline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.problem-number {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.answer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 8px;
  white-space: nowrap;
}

.answer-chip--correct {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 28%, #fff);
  background: color-mix(in srgb, var(--ok) 10%, #fff);
}

.answer-chip--wrong,
.answer-chip--retry {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 24%, #fff);
  background: var(--danger-soft);
}

.answer-chip--unanswered {
  color: #476174;
  border-color: #c7ddec;
  background: #eef7fd;
}

.problem-card-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.image-only-card .button-row {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
}

.image-only-card .button-row .button {
  min-height: 34px;
  padding-inline: 13px;
}

/* §2 problems: header rhythm — tighten the section-head → intro → grid gap. */
.section-head:has(+ .problems-intro) { margin-bottom: 12px; }
.problems-intro { margin: 2px 0 16px; }

/* §2 problems: flat subject label — not an accent pill (the accent pill ×100 was
   noise; reserve blue for CTAs). */
.subject-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* §2 problems: missing-thumb variant — full-bleed top-rounded well instead of
   the fixed 160×120 box, matching the real thumbnail frame above. */
.card-thumb-missing {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* footer: quiet wordmark left, legal links right; bordered off the page (§2 base). */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  width: min(var(--page), calc(100vw - 48px));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 24px 0 32px;
  color: var(--muted);
  font-size: 12.5px;
}

.footer-wordmark {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: -.01em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Public Top ───────────────────────────────────────── */

.public-body {
  min-height: 100vh;
}

.public-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
}

.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 74px;
  padding: 16px 0 10px;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.public-nav > a:not(.button):hover {
  color: var(--accent-dark);
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .85fr);
  align-items: center;
  gap: 56px;
  padding: 48px 0 46px;
  border-bottom: 1px solid var(--line);
}

.public-hero h1 {
  max-width: 720px;
  margin: 0 0 var(--space-4);
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: 0;
}

.public-lead {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.85;
}

.public-cta-row {
  margin-top: var(--space-6);
  max-width: none;
}

.public-main-cta {
  min-height: 48px;
  padding-inline: 18px;
  font-size: 14px;
}

.public-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.public-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
}

.public-visual {
  display: grid;
  gap: var(--space-4);
}

.public-paper {
  min-height: 320px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98)),
    var(--surface);
  box-shadow: var(--shadow);
}

.public-paper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 24px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.public-paper-head strong {
  color: var(--accent-dark);
  font-size: 26px;
  line-height: 1;
}

.public-question-line {
  height: 46px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--surface-strong) 0 58%, transparent 58%),
    linear-gradient(180deg, #fff, var(--surface-soft));
}

.public-question-line.is-long { height: 58px; }
.public-question-line.is-short { width: 74%; }

.public-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-5);
}

.public-score-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.public-score-pill.is-wrong {
  color: var(--danger);
  background: var(--danger-soft);
}

.public-score-pill.is-retry {
  color: var(--amber);
  background: var(--amber-soft);
}

.public-score-pill.is-ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.public-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.public-loop li {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 82px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  color: var(--ink-soft);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.public-loop span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.public-section {
  padding: 54px 0 0;
}

.public-section > h2,
.public-safety h2,
.public-final-cta h2 {
  max-width: 760px;
  margin: 0;
  font-size: 32px;
  line-height: 1.32;
  letter-spacing: 0;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.public-feature {
  min-height: 250px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-soft);
}

.public-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.public-feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}

.public-feature p,
.public-section-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.public-safety {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .9fr);
  gap: 48px;
  align-items: start;
}

.public-section-lead {
  max-width: 560px;
  margin-top: var(--space-3);
  font-size: 15px;
}

.public-safety-list {
  display: grid;
  gap: 10px;
}

.public-safety-list > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
}

.public-safety-list strong {
  color: var(--ink);
  font-size: 15px;
}

.public-safety-list span {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.public-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: 64px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
}

.public-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding: 22px 0 30px;
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .action-card .button.primary { width: 100%; }

  .site-footer {
    width: min(100vw - 28px, var(--page));
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  .footer-links { justify-content: center; }

  /* §2 legal: tighter panel padding on mobile */
  .legal-body.panel { padding: 18px 16px; }
}

@media (max-width: 900px) {
  .public-hero,
  .public-safety {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .public-hero h1 {
    font-size: 44px;
  }

  .public-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .public-shell {
    width: min(100vw - 28px, 1120px);
  }

  .public-topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 14px 0 8px;
  }

  .public-nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .public-nav .button {
    min-height: 34px;
    padding: 6px 10px;
  }

  .public-hero {
    padding: 30px 0 34px;
  }

  .public-hero h1 {
    font-size: 34px;
  }

  .public-lead {
    font-size: 15px;
    line-height: 1.75;
  }

  .public-cta-row,
  .public-cta-row .button,
  .public-final-cta .button {
    width: 100%;
  }

  .public-proof span {
    flex: 1 1 auto;
    justify-content: center;
  }

  .public-paper {
    min-height: 250px;
    padding: 18px;
  }

  .public-question-line {
    height: 38px;
  }

  .public-question-line.is-long {
    height: 48px;
  }

  .public-loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-section {
    padding-top: 42px;
  }

  .public-section > h2,
  .public-safety h2,
  .public-final-cta h2 {
    font-size: 25px;
  }

  .public-final-cta {
    align-items: stretch;
    flex-direction: column;
    margin-top: 46px;
    padding: 20px;
  }

  .public-footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ── Public Top v2: Nani-style feature index ─────────── */

body.public-body {
  min-height: 100vh;
  background: #eefaff;
  color: #151b23;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: min(1040px, calc(100vw - 48px));
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 14px 0;
  background: rgba(238, 250, 255, .86);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}

.public-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #151b23;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.public-logo > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(160deg, #22aef1, #147ee4);
  box-shadow: 0 12px 26px rgba(20, 126, 228, .24);
}

.public-logo strong {
  font: inherit;
  letter-spacing: 0;
}

.public-header-note {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(181, 219, 238, .86);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #5f7587;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(38, 125, 176, .06);
}

.public-header-note svg {
  flex: 0 0 auto;
  color: #93adbf;
}

.public-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.public-header-cta,
.public-header-login {
  border-radius: 18px;
  white-space: nowrap;
}

.public-header-cta {
  min-height: 44px;
  border: 0;
  background: linear-gradient(180deg, #23aaff, #168be8);
  box-shadow: 0 12px 24px rgba(22, 139, 232, .24);
}

.public-header-login {
  min-height: 42px;
  border: 0;
  color: #4b6272;
  background: #edf5fa;
  box-shadow: none;
}

.public-main {
  width: min(900px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 22px 0 36px;
}

.public-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 40px 0 54px;
  border: 0;
  text-align: center;
}

.public-hero-mark {
  position: relative;
  width: 126px;
  height: 126px;
  margin-bottom: 18px;
}

.public-app-icon {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  background: linear-gradient(160deg, #25b2f5, #1484e8);
  box-shadow: 0 14px 26px rgba(20, 132, 232, .24);
  transform: translateX(-50%);
}

.public-app-icon span {
  width: 17px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
}

.public-float-card {
  position: absolute;
  top: 10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(155deg, #54c6ff, #1f83ee);
  box-shadow: 0 10px 20px rgba(31, 131, 238, .2);
}

.public-float-card--left {
  left: 14px;
  transform: rotate(-13deg);
}

.public-float-card--right {
  right: 12px;
  top: 18px;
  background: linear-gradient(155deg, #70d7ff, #62a9ff);
  transform: rotate(11deg);
}

.public-hero h1 {
  max-width: 720px;
  margin: 0 0 14px;
  font-size: 31px;
  line-height: 1.24;
  letter-spacing: 0;
  font-weight: 900;
}

.public-hero h1 span {
  display: inline;
}

.public-lead {
  max-width: 620px;
  margin: 0 auto 20px;
  color: #667784;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.9;
}

.public-story-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid rgba(184, 219, 237, .95);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #2f4656;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(61, 137, 182, .08);
}

.public-beta-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0 auto 48px;
  padding: 24px 26px;
  border: 1px solid rgba(156, 207, 232, .72);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 38px rgba(54, 131, 174, .09);
}

.public-beta-card h2 {
  margin: 4px 0 8px;
  font-size: 20px;
  line-height: 1.45;
}

.public-beta-card p {
  margin: 0;
  color: #667784;
  font-size: 13px;
  line-height: 1.75;
}

.public-beta-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #435c6d;
  font-size: 12px;
  font-weight: 750;
}

.public-beta-card li::before {
  content: "✓";
  margin-right: 7px;
  color: #168458;
  font-weight: 900;
}

.public-beta-card .button {
  min-height: 46px;
  white-space: nowrap;
}

.candidate-empty-actions {
  margin: 0.7rem 0 0.9rem;
  align-items: stretch;
}

.candidate-empty-actions .button {
  min-height: 44px;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px 36px;
  margin: 0 auto;
}

.public-feature-card {
  min-width: 0;
}

.public-feature-card h2 {
  margin: 14px 0 6px;
  color: #202933;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0;
}

.public-feature-card p {
  margin: 0;
  color: #6f7f8a;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.82;
}

.public-shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.47 / 1;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, .86);
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 8%, rgba(255,255,255,.92), transparent 36%),
    linear-gradient(180deg, #c7efff, #dff7ff);
  box-shadow: 0 18px 34px rgba(68, 151, 196, .12);
}

.phone-shot {
  width: 68%;
  padding: 12px;
  border: 1px solid #b6ddeb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 20px rgba(54, 131, 174, .14);
}

.phone-toolbar {
  width: 44%;
  height: 7px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: #e5f1f6;
}

.subject-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.subject-chips span,
.score-buttons span,
.safety-card span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #1581c4;
  background: #eef8ff;
  font-size: 10px;
  font-weight: 850;
}

.upload-drop {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 76px;
  border: 1px dashed #b6ddeb;
  border-radius: 11px;
  color: #547384;
  background: #f7fcff;
  font-size: 11px;
  font-weight: 850;
}

.upload-drop strong {
  font-size: 25px;
  color: #188fe6;
}

.paper-stack,
.paper-main {
  position: absolute;
  width: 58%;
  height: 55%;
  border: 1px solid #bcdcec;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 20px rgba(54, 131, 174, .12);
}

.paper-stack.one {
  transform: translate(-38px, 20px) rotate(-11deg);
  opacity: .76;
}

.paper-stack.two {
  transform: translate(42px, 18px) rotate(12deg);
  opacity: .76;
}

.paper-main {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 18px;
  transform: translateY(-4px);
}

.paper-main span {
  height: 13px;
  border-radius: 99px;
  background: #e7f1f6;
}

.paper-main span:nth-child(2) { width: 82%; }
.paper-main span:nth-child(3) { width: 55%; }

.score-panel {
  width: 74%;
  padding: 14px;
  border: 1px solid #bcdcec;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 22px rgba(54, 131, 174, .14);
}

.public-shot-score-progress {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  color: #627887;
  font-size: 11px;
  font-weight: 800;
}

.public-shot-score-progress strong {
  color: #1281d4;
  font-size: 24px;
}

.score-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.score-buttons span:nth-child(1) {
  color: #168458;
  background: #e5f7ee;
}

.score-buttons span:nth-child(2) {
  color: #9d650f;
  background: #fff3d9;
}

.score-buttons span:nth-child(3) {
  color: #be4b43;
  background: #fdecea;
}

.score-list-line {
  height: 13px;
  margin-top: 8px;
  border-radius: 99px;
  background: #e6f0f5;
}

.score-list-line.short {
  width: 62%;
}

.public-shot-loop ol {
  width: 84%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.public-shot-loop li {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 68px;
  border: 1px solid #bcdcec;
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  color: #486373;
  font-size: 12px;
  font-weight: 850;
}

.public-shot-loop span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #168be8;
  background: #e8f7ff;
}

.subject-orbit {
  position: relative;
  width: 78%;
  height: 68%;
}

.subject-orbit span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 74px;
  height: 36px;
  border: 1px solid #bcdcec;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #2479a9;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(54, 131, 174, .1);
}

.subject-orbit span:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); }
.subject-orbit span:nth-child(2) { left: 0; top: 38%; }
.subject-orbit span:nth-child(3) { right: 0; top: 38%; }
.subject-orbit span:nth-child(4) { left: 20%; bottom: 0; }
.subject-orbit span:nth-child(5) { right: 18%; bottom: 0; }
/* Coming-soon subjects rendered muted so the orbit doesn't over-promise parity with 算数. */
.subject-orbit span.subject-orbit-soon {
  border-color: #d5e5ef;
  background: rgba(255, 255, 255, .7);
  color: #8b9ba8;
  box-shadow: none;
}

.safety-card {
  width: 76%;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #bcdcec;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 22px rgba(54, 131, 174, .14);
}

.safety-card span {
  justify-content: center;
  color: #3f6578;
  background: #f1f8fc;
}

.public-roadmap {
  display: grid;
  place-items: center;
  gap: 14px;
  margin-top: 68px;
  color: #6d7c88;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.public-roadmap p {
  margin: 0;
}

.public-roadmap .button {
  min-width: 178px;
  min-height: 46px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #23aaff, #168be8);
}

.public-roadmap-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.public-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  margin-top: 70px;
  padding: 28px 0 36px;
  border-top: 1px solid rgba(170, 211, 231, .56);
  color: #7b8b96;
}

.public-footer-brand {
  display: inline-block;
  color: #202933;
  font-size: 15px;
  font-weight: 900;
}

.public-footer p {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 650;
}

@media (max-width: 980px) {
  .public-header {
    width: min(760px, calc(100vw - 28px));
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    min-height: 0;
    padding: 12px 0;
  }

  .public-header-note {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
    min-width: 0;
  }

  .public-main {
    width: min(760px, calc(100vw - 28px));
    margin: 0 auto;
    padding-top: 18px;
  }

  .public-beta-card {
    grid-template-columns: 1fr 1fr;
  }

  .public-beta-card .button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  body.public-body {
    overflow-x: hidden;
  }

  .public-header {
    width: calc(100vw - 28px);
    grid-template-columns: 1fr;
  }

  .public-logo > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 22px;
  }

  .public-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .public-header-cta,
  .public-header-login {
    min-height: 42px;
    padding-inline: 10px;
  }

  .public-header-note {
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }

  .public-hero {
    padding: 26px 0 42px;
  }

  .public-main {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 14px;
    overflow: hidden;
  }

  .public-hero h1 {
    max-width: 100%;
    font-size: 25px;
    overflow-wrap: anywhere;
  }

  .public-hero h1 span {
    display: block;
  }

  .public-lead {
    max-width: 100%;
    font-size: 13.5px;
    line-height: 1.82;
  }

  .public-feature-card {
    min-width: 0;
  }

  .public-beta-card {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 38px;
    padding: 22px 20px;
  }

  .public-beta-card .button {
    grid-column: auto;
    width: 100%;
  }

  .public-feature-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .public-shot {
    width: min(100%, 340px);
    max-width: 340px;
    margin-inline: auto;
    border-radius: 24px;
  }

  .public-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .public-footer .footer-links {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .public-main {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .public-feature-grid,
  .public-feature-card,
  .public-hero h1,
  .public-lead {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .public-shot {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .public-hero h1,
  .public-feature-card h2 {
    white-space: normal;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
}

/* ── Guest Sample Flow ──────────────────────────────────
   Login-free sample route. It generates PDFs, but never reads/writes tenant data. */

body.guest-body {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, #eef9ff 0%, #f8fbfb 42%, #f7fbfe 100%);
}

.guest-shell {
  width: min(1040px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 24px 0 72px;
  animation: fadeInUp .35s ease-out;
}

.guest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
}

.guest-header .brand::before {
  background:
    no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"),
    linear-gradient(145deg, #2aa3ee, #1377d2);
  box-shadow: 0 12px 22px rgba(19, 119, 210, .22);
}

.guest-hero {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 34px 34px 30px;
  text-align: center;
  border-color: rgba(74, 160, 220, .24);
  background: rgba(255, 255, 255, .86);
}

.guest-hero h1,
.guest-notice h1 {
  margin: 0;
  letter-spacing: 0;
}

.guest-hero .lead {
  margin-inline: auto;
  max-width: 620px;
}

.guest-builder-panel {
  max-width: 760px;
  margin-inline: auto;
  padding: 22px;
}

.guest-summary {
  margin-bottom: 16px;
  border-color: rgba(74, 160, 220, .2);
  background: linear-gradient(135deg, #f1fbff, #ffffff);
}

.guest-summary strong {
  font-size: 22px;
  color: #1377d2;
}

.guest-builder-panel .button-row {
  justify-content: flex-end;
  padding-top: 4px;
}

.guest-notice {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  border-color: rgba(74, 160, 220, .2);
  background: rgba(255, 255, 255, .9);
}

.guest-score-progress {
  position: static;
  top: auto;
  margin-bottom: 14px;
  border-color: rgba(74, 160, 220, .22);
  background: linear-gradient(135deg, #eaf8ff, #ffffff);
}

.guest-next-banner {
  display: block;
  margin: 14px 0 16px;
  border-color: rgba(74, 160, 220, .28);
  border-left-color: #2aa3ee;
  background: #edf9ff;
}

.guest-next-banner .button-row {
  justify-content: flex-end;
}

.button.is-disabled {
  opacity: .52;
  cursor: not-allowed;
  box-shadow: none;
}

.button.is-disabled:hover {
  transform: none;
}

@media (max-width: 760px) {
  .source-bulk-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .source-bulk-actions .button-row,
  .source-bulk-actions form,
  .source-bulk-actions button {
    width: 100%;
  }
}

.guest-score-list {
  gap: 14px;
}

.guest-score-item {
  grid-template-columns: 44px minmax(180px, 240px) minmax(0, 1fr);
  max-height: none;
  border-color: rgba(213, 220, 217, .9);
}

.guest-score-item img {
  width: 100%;
  max-width: 240px;
  height: 144px;
  background: #fff;
}

.guest-score-item .score-main h2 {
  font-size: 17px;
}

.guest-score-item[data-item-result="correct"] {
  border-left: 5px solid var(--ok);
}

.guest-score-item[data-item-result="wrong"] {
  border-left: 5px solid var(--danger);
}

.guest-score-item[data-item-result="retry"] {
  border-left: 5px solid var(--amber);
}

.guest-score-item[data-item-result="unanswered"] {
  border-left: 5px solid var(--line-strong);
}

@media (max-width: 760px) {
  .guest-shell {
    width: min(100vw - 28px, 1040px);
    padding: 16px 0 48px;
  }

  .guest-header {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .guest-header .button-row {
    width: 100%;
  }

  .guest-hero,
  .guest-builder-panel,
  .guest-notice {
    padding: 18px 16px;
  }

  .guest-hero h1,
  .guest-notice h1 {
    font-size: 24px;
  }

  .guest-builder-panel .button-row,
  .guest-next-banner .button-row {
    justify-content: stretch;
  }

  .guest-score-progress {
    position: sticky;
    top: 0;
  }

  .guest-score-progress .score-progress {
    grid-template-columns: auto 1fr;
  }

  .guest-score-progress .score-progress-breakdown {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    white-space: normal;
  }

  .guest-score-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .guest-score-item img {
    grid-column: 2;
    max-width: 100%;
    height: 118px;
  }
}

/* ═══════════════════════════════════════════════════════════
   問題一覧 — Amazon-style catalog (左フィルター + カード一覧 + 今回のプリント)
   ═══════════════════════════════════════════════════════════ */

.catalog {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

.catalog-source-tabs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-width: 560px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-soft);
}
.catalog-source-tab {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.catalog-source-tab:hover { background: var(--surface-soft); color: var(--accent-dark); }
.catalog-source-tab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(18, 113, 185, .2);
}
.catalog-source-tab:focus-visible { outline: 3px solid rgba(18, 113, 185, .3); outline-offset: 2px; }

.filter-edit-link {
  float: right;
  margin-left: 10px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.edit-taxonomy-link {
  margin: 4px 0 0;
  font-size: .88rem;
}

#categories,
#formats {
  scroll-margin-top: 88px;
}

.problem-library-head { margin-bottom: 2px; }
.problem-library-head h1 { margin-bottom: 6px; }
.problem-library-head .problems-intro { margin: 0; font-size: 14px; }
.problem-library-head + .scope-note { margin-bottom: 14px; line-height: 1.55; }

.catalog-quick-filters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
  padding: 12px;
  border: 1px solid #cfe2ef;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 248, 253, .94));
  box-shadow: var(--shadow-soft);
}
.catalog-quick-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 9px 14px;
  border: 2px solid #5f8eac;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(31, 78, 108, .1);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.catalog-quick-filter:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(18, 113, 185, .16); }
.catalog-quick-filter:focus-visible { outline: 3px solid rgba(18, 113, 185, .3); outline-offset: 2px; }
.catalog-quick-filter strong { color: var(--accent-dark); font-size: 18px; font-variant-numeric: tabular-nums; }
.catalog-quick-filter strong small { margin-left: 2px; color: var(--muted); font-size: 10px; }
.catalog-quick-filter.is-active {
  border-color: #0b68aa;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(18, 113, 185, .12);
  color: var(--accent-dark);
}

/* ── Left filter sidebar (PC: sticky column) ───────────── */
.catalog-filters {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.filter-group legend small {
  display: inline;
  margin-left: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-panel-head h2 { margin: 0; font-size: var(--fs-h2); }
.filter-panel-head > div { display: flex; align-items: baseline; gap: 8px; }
.filter-live-total { margin: 0; color: var(--muted); font-size: 12px; }
.filter-live-total strong { color: var(--accent-dark); font-size: 14px; font-variant-numeric: tabular-nums; }
/* `:not([hidden])` so the no-JS state (button keeps its [hidden] attr) stays hidden; JS clears
   [hidden] to reveal it. An author display rule would otherwise win over the UA [hidden] default. */
.filter-close:not([hidden]) { display: inline-flex; align-items: center; font-weight: 700; }

.filter-clear-all {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.filter-clear-all.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
.filter-close { min-width: 44px; min-height: 44px; justify-content: center; }

.filter-bookmark-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fffdf8;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
}
.filter-bookmark-toggle input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.filter-bookmark-toggle > span { color: #a56a00; font-size: 20px; line-height: 1; }
.filter-bookmark-toggle:has(input:checked) { border-color: #d19835; background: #fff4d8; color: #6f4808; }

.filter-group {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.filter-group > :not(legend) { margin-top: 4px; }
.filter-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.filter-group legend {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink);
}

.filter-search {
  width: 100%;
  min-height: 44px;
  font-size: 13px;
  padding: 6px 10px;
}

.filter-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 0;
}
.filter-options--scroll { max-height: 232px; overflow: auto; padding-right: 2px; }

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-option:hover { background: var(--surface-soft); }
.filter-option input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.filter-option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.filter-option-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.filter-option.is-disabled { color: var(--muted-2); cursor: not-allowed; }
.filter-option.is-disabled small { font-weight: 700; }
.filter-option.is-hidden { display: none; }

/* Source switch + hierarchical taxonomy: a compact "教材棚" rather than a flat wall of 50
   checkboxes. The warm paper tint separates shared teaching material from household metadata. */
.source-scope-grid { display: grid; gap: 6px; }
.source-scope-option {
  position: relative;
  display: grid;
  min-height: 48px;
  cursor: pointer;
}
.source-scope-option input { position: absolute; opacity: 0; pointer-events: none; }
.source-scope-option span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.source-scope-option small { color: var(--muted); font-size: 10px; font-weight: 700; }
.source-scope-option input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-dark);
}
.source-scope-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.category-filter { gap: 6px; }
.category-filter > p { margin: 0; line-height: 1.35; }
.category-sub-panels { display: grid; gap: 8px; }
.category-sub-panel {
  display: grid;
  gap: 1px;
  padding: 10px;
  border: 1px solid #ead9b9;
  border-radius: var(--radius-sm);
  background: #fffdf8;
}
.category-sub-panel.is-all-selected {
  border-color: #d19835;
  background: #fff9eb;
  box-shadow: inset 0 0 0 1px rgba(209, 152, 53, .12);
}
.category-sub-panel.is-partial-selected { border-color: #dfbf84; }
.category-group-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(42px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 2px 6px;
  color: #6f5424;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}
.category-group-toggle input { width: auto; min-height: 0; justify-self: start; margin: 0; }
.category-group-toggle-text { line-height: 1.35; }
.category-group-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.category-sub-list {
  display: grid;
  gap: 1px;
  max-height: 240px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-anchor: none;
}
.category-sub-list .filter-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(42px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 2px 6px 2px 14px;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}
.category-group-toggle .filter-option-count,
.category-sub-list .filter-option-count {
  justify-self: end;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
}
.category-sub-list .filter-option.is-disabled { display: none; }
.category-unclassified { border-top: 1px dashed var(--line); padding-top: 10px; }

.filter-actions { margin-top: 4px; }
.filter-actions .button { width: 100%; }

/* ── Right column: toolbar + grid ──────────────────────── */
.catalog-main { min-width: 0; }
.catalog-main[aria-busy="true"] { cursor: progress; }
.catalog.is-filter-loading .catalog-main > :not(.catalog-filter-error) { opacity: .55; transition: opacity .14s ease; }
.catalog-filter-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #d99a94;
  border-radius: var(--radius);
  background: #fff2f1;
  color: #7a2923;
  font-size: 13px;
  font-weight: 700;
}
.catalog-filter-error[hidden] { display: none; }
.filter-panel-error { margin: 0; }

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
/* The toolbar 「絞り込み」 button is hidden on PC by default; it appears only when the sidebar is
   collapsed (PC) or always on mobile (the media query below). JS reveals the element (clears the
   [hidden] attr) but CSS decides when it actually shows. */
.catalog-filter-open { gap: 6px; display: none; }
.catalog.is-filters-collapsed .catalog-filter-open { display: inline-flex; }
.filter-active-dot { color: var(--accent); font-size: 9px; }
.filter-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

/* PC sidebar collapse: hide the panel and let the card grid take the full width. Scoped to the
   desktop layout (≥901px) so the mobile drawer behaviour is untouched. */
@media (min-width: 901px) {
  .catalog.is-filters-collapsed { grid-template-columns: 1fr; }
  .catalog.is-filters-collapsed .catalog-filters { display: none; }
}
.catalog-total {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.catalog-total strong { color: var(--ink); font-size: 15px; }
/* 「すべてプリントに入れる」ボタン: 件数の右隣。目立ちすぎないよう subtle 寄りで、十分タップしやすい。 */
.catalog-select-all { font-size: 13px; white-space: nowrap; }
.catalog-sort-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.catalog-sort-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.catalog-sort-form select {
  min-height: 44px;
  max-width: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 30px 6px 12px;
}

.catalog-density {
  display: inline-flex;
  min-height: 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: rgba(255, 255, 255, .78);
}
.catalog-density button {
  min-height: 36px;
  padding: 5px 11px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.catalog-density button[aria-pressed="true"] {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-subtle);
}
.catalog-density button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.catalog[data-density="compact"] .problem-grid.image-only-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 1280px) {
  .catalog.is-filters-collapsed:not([data-density="compact"]) .problem-grid.image-only-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .catalog.is-filters-collapsed[data-density="compact"] .problem-grid.image-only-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Card select toggle (color-independent state) ── */
.catalog-card { position: relative; container-type: inline-size; }
.card-pick {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px 6px 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.card-pick:hover { border-color: var(--accent); }
.card-pick .card-pick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-pick .icon-check { display: none; }
.card-pick .icon-plus { display: inline-flex; }

/* Selected state: filled pill + check + visible label change + card frame. Not color alone. */
.problem-card.is-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow);
}
.problem-card.is-picked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  pointer-events: none;
}
.card-pick[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.card-pick[aria-pressed="true"] .icon-check { display: inline-flex; }
.card-pick[aria-pressed="true"] .icon-plus { display: none; }

/* ── Image-hero card: 問題画像 → 算数カテゴリ → 教材名 → 状態と操作。 ── */
.catalog-card {
  display: grid;
  grid-template-rows: auto auto;
}
.card-bookmark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.card-bookmark:hover,
.card-bookmark:focus-visible {
  border-color: #d49a2a;
  color: #a96f00;
}
.card-bookmark:active { transform: scale(.96); }
.card-bookmark svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}
.card-bookmark.is-on {
  border-color: #d49a2a;
  background: #fff7e4;
  color: #9a6500;
}
.card-bookmark.is-on svg { fill: currentColor; }
.card-bookmark:disabled {
  cursor: progress;
  opacity: .72;
}
.card-exclusion {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 82px;
  height: 36px;
  padding: 0 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-2);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.card-exclusion:hover,
.card-exclusion:focus-visible {
  border-color: #b9635d;
  color: #8a3732;
}
.card-exclusion:active { transform: scale(.96); }
.card-exclusion.is-on {
  border-color: #b9635d;
  background: #fff0ee;
  color: #84332f;
}
.card-exclusion:disabled { cursor: progress; opacity: .72; }
.catalog-card.is-selection-excluded .card-media img { opacity: .78; filter: grayscale(.25); }
.catalog-card.is-selection-excluded .card-media::after {
  content: "出題しない";
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(80, 50, 48, .88);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}
.catalog-card .card-media {
  position: relative;
  width: 100%;
  min-height: 96px;
  display: grid;
  place-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.catalog-card .card-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 360px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
  cursor: zoom-in;
}
.catalog-card .card-thumb-missing {
  width: 100%;
  min-height: 150px;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.catalog-card .card-pick {
  position: static;
}
.catalog-card .card-status-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-card .card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
}
.catalog-card .card-source {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.catalog-card .card-summary {
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-category-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-context {
  flex: 0 1 auto;
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.catalog-card .card-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
}
.catalog-card .card-secondary-actions,
.catalog-card .card-primary-actions { display: contents; }
.catalog-card .card-primary-actions .button {
  width: auto;
}
.catalog-card .card-bookmark,
.catalog-card .card-exclusion,
.catalog-card .card-edit-menu,
.catalog-card .card-answer-register { flex: 0 0 auto; min-height: 44px; height: 44px; }
.catalog-card .card-bookmark { width: 44px; }
.catalog-card .card-answer-register {
  min-width: 72px;
  padding-inline: 9px;
  font-size: 11px;
  white-space: nowrap;
}
.catalog-card .card-study-start,
.catalog-card .card-pick {
  position: static;
  flex: 1 1 0;
  min-width: 72px;
  min-height: 44px;
  height: 44px;
  padding: 7px 10px;
  justify-content: center;
  border-radius: var(--button-radius);
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}
.catalog-card .card-pick { border-width: 1px; }
.catalog-card .delete-form { flex: 0 0 auto; margin: 0; }
.catalog-card .card-delete { min-height: 32px; padding-inline: 12px; }
.catalog-card .card-edit-menu {
  width: auto;
  min-width: 56px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 800;
}
.catalog-card .card-edit-menu::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Keep every everyday card action on one rail. Narrow cards retain the 44px targets and collapse
   only the two utility labels; the accessible names remain on the controls. */
@container (max-width: 460px) {
  .catalog-card .card-exclusion {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }
  .catalog-card .card-exclusion .card-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .catalog-card .card-edit-menu {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }
  .catalog-card .card-edit-menu::before {
    margin-right: 0;
    color: var(--ink-soft);
    font-size: 11px;
  }
  .catalog-card .card-study-start,
  .catalog-card .card-pick { padding-inline: 5px; font-size: 11px; }
}

@container (max-width: 340px) {
  .catalog-card .card-body { padding: 9px; }
  .catalog-card .card-actions { gap: 4px; }
  .catalog-card .card-study-start,
  .catalog-card .card-pick { min-width: 60px; }
  .catalog-card .card-answer-register { min-width: 64px; padding-inline: 5px; }
}
.catalog[data-density="compact"] .catalog-card .card-body {
  gap: 9px;
  padding: 10px;
}
.catalog[data-density="compact"] .catalog-card .card-media img { max-height: 240px; }
.catalog[data-density="compact"] .card-category-title { font-size: var(--fs-sm); }

/* 自分の問題・収録問題とも、2列以上では同じ画像枠に揃える。
   object-fit: contain のため問題画像は切り抜かない。1列になるモバイルは自然高のまま。 */
@media (min-width: 721px) {
  .catalog .catalog-card .card-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .catalog .catalog-card .card-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 8px 10px;
    object-fit: contain;
  }
  .catalog .catalog-card .card-thumb-missing {
    min-height: 0;
  }
}

/* ── Bottom fixed 今回のプリント tray ───────────────────── */
.print-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px 14px 12px 18px;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  animation: fadeInUp .26s ease-out;
}
.print-tray[hidden] { display: none; }
.print-tray-info { display: flex; align-items: center; gap: 8px 10px; white-space: nowrap; }
.print-tray-mode {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 850;
}
.print-tray-count { font-size: 15px; font-weight: 700; color: var(--ink); }
.print-tray-count strong { color: var(--accent-dark); font-size: 18px; }
.print-tray-change-mode, .print-tray-clear { font-size: 11px; }
.print-tray-thumbs { display: flex; min-width: 0; gap: 6px; overflow: hidden; }
.print-tray-thumb {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f5f8fa;
  overflow: hidden;
}
.print-tray-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.print-tray-thumb button {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 40, 55, .78);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.print-tray-more { align-self: center; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.print-tray-actions { flex-wrap: nowrap; gap: 8px; }
.print-tray-actions .button { white-space: nowrap; }
.print-tray-primary { min-width: 220px; }

/* The first pick establishes the paper contract before the parent spends time curating. */
.paper-mode-dialog {
  width: min(560px, calc(100vw - 28px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(16, 35, 49, .32);
}
.paper-mode-dialog::backdrop { background: rgba(22, 26, 25, .58); backdrop-filter: blur(4px); }
.paper-mode-dialog-card { display: grid; gap: 16px; padding: 22px; border-radius: 22px; background: var(--surface); }
.paper-mode-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.paper-mode-dialog-head .eyebrow { margin: 0 0 3px; }
.paper-mode-dialog-head h2 { margin: 0; font-size: clamp(20px, 3vw, 25px); }
.paper-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.paper-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.paper-mode-option:hover, .paper-mode-option:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(18, 104, 168, .14);
}
.paper-mode-option.is-current { border-color: var(--accent); background: var(--accent-soft); }
.paper-mode-option-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--surface-strong);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
}
.paper-mode-option--thinking .paper-mode-option-icon { background: #fff2d8; color: #8a5a0a; }
.paper-mode-option > span:last-child { display: grid; gap: 4px; }
.paper-mode-option strong { font-size: 15px; }
.paper-mode-option small { color: var(--muted); font-size: 12px; line-height: 1.55; }
.paper-mode-cancel { justify-self: center; }

/* One selected set can become either a screen session or a PDF. Keep this wider than the
   paper-only choice so both destinations can explain themselves without cramped copy. */
.paper-mode-dialog[data-study-start-dialog] {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
}
.study-use-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.study-use-option {
  min-width: 0;
  min-height: 292px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 16px;
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
  border-radius: 18px;
  background: #fff;
}
.study-use-option--screen {
  border-color: #78b6d5;
  background: linear-gradient(145deg, #edf8fc 0%, #fff 62%);
  box-shadow: 0 12px 28px rgba(25, 105, 145, .1);
}
.study-use-option--pdf {
  background: linear-gradient(145deg, #fff 0%, var(--surface-soft) 100%);
}
.study-use-option-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.study-use-option-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.study-use-option-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}
.study-use-option-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.study-use-option-mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #dff2f5;
  color: #17686c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}
.study-use-option--pdf .study-use-option-mark {
  background: #fff2d8;
  color: #805700;
}
.study-use-option > p {
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.study-use-option .print-order-choice {
  align-self: center;
  width: 100%;
}
.study-use-option .print-order-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.study-use-option .print-order-option {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding-inline: 8px;
}
.study-use-option > .button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  white-space: normal;
}

/* ── 今回のプリント drawer (slide-in from right) ────────── */
.print-drawer {
  position: fixed;
  inset: 0;
  z-index: 1120;
  display: none;
}
.print-drawer.show { display: block; }
.print-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(22, 26, 25, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition);
}
.print-drawer.show .print-drawer-scrim { opacity: 1; }
.print-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: -24px 0 64px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.print-drawer.show .print-drawer-panel { transform: translateX(0); }
.print-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 8px;
}
.print-drawer-head h2 { margin: 0; font-size: 20px; }
.print-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  cursor: pointer;
}
.print-drawer-sub { padding: 0 20px; margin: 0 0 8px; }
.print-drawer-sub strong { color: var(--accent-dark); }
.print-drawer-trim-guide {
  display: grid;
  gap: 3px;
  margin: 0 20px 10px;
  padding: 11px 13px;
  border: 1px solid #e6c98d;
  border-radius: var(--radius);
  background: #fff8e8;
  color: #70501a;
  font-size: 12px;
}
.print-drawer-trim-guide[hidden] { display: none; }
.print-drawer-trim-guide strong { font-size: 13px; }
.print-drawer-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 6px 20px 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.print-drawer-empty { padding: 24px 20px; }

.drawer-item {
  display: grid;
  grid-template-columns: 44px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.drawer-item.is-dragging {
  opacity: .58;
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(18, 104, 168, .18);
}
.drawer-item-drag-handle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7890a2;
  cursor: grab;
  touch-action: none;
}
.drawer-item-drag-handle:active { cursor: grabbing; }
.drawer-item-drag-handle:hover,
.drawer-item-drag-handle:focus-visible { color: var(--accent-dark); }
.drawer-thumb-button {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: zoom-in;
}
.drawer-thumb-button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.drawer-item img,
.drawer-item .drawer-thumb-missing {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  border: 1px solid var(--line);
}
.drawer-thumb-zoom {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 7px rgba(18, 104, 168, .28);
}
.drawer-item-main { min-width: 0; display: grid; gap: 2px; }
.drawer-item-no { font-size: 13px; font-weight: 800; color: var(--ink); }
.drawer-item-sub { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.drawer-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--danger);
  cursor: pointer;
}
.drawer-item-remove:hover { background: var(--danger-soft); border-color: #ddb0ac; }

.drawer-image-preview {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 20px;
}
.drawer-image-preview[hidden] { display: none; }
.drawer-image-preview-scrim { position: absolute; inset: 0; background: rgba(13, 22, 29, .82); }
.drawer-image-preview-panel {
  position: relative;
  width: min(920px, 96vw);
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}
.drawer-image-preview-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-image-preview-head h3 { margin: 0; font-size: 16px; }
.drawer-image-preview-close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  cursor: pointer;
}
.drawer-image-preview-body {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 16px;
  background: #eef4f7;
}
.drawer-image-preview-body img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 132px);
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.drawer-image-preview-caption { margin: 0; padding: 9px 18px 11px; color: var(--muted); font-size: 12px; }

.print-drawer-foot {
  border-top: 1px solid var(--line);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
}
.print-drawer-foot form { display: grid; gap: 12px; }
.print-drawer-foot form[hidden] { display: none; }
.print-drawer-build { width: 100%; min-height: 50px; font-size: 16px; }
.print-drawer-hint { margin: 0; text-align: center; }
.print-drawer-paper-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.print-drawer-paper-mode > div { display: grid; gap: 2px; }
.print-drawer-paper-mode strong { color: var(--ink); font-size: 14px; }
.print-drawer-paper-mode small { color: var(--muted); font-size: 11px; }
.print-drawer-paper-mode .button { min-height: 38px; padding: 7px 12px; }
.print-drawer-trim-actions { display: grid; gap: 10px; }
.print-drawer-trim-actions[hidden] { display: none; }
.print-drawer-trim-actions p { margin: 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.print-drawer-trim-actions p strong { color: var(--accent-dark); font-size: 18px; }
.print-drawer-trim-actions .button-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.print-drawer-trim-actions .button { width: 100%; min-height: 46px; }
.print-drawer.is-trimming [data-drawer-drag-handle] { visibility: hidden; }

/* 印刷の順番: ドロワーのフッター内の2択ラジオ */
.print-order-choice { display: grid; gap: 6px; }
.print-order-label { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-soft); }
.print-order-options { display: flex; gap: 12px; flex-wrap: wrap; }
.print-order-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.print-order-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.print-order-option input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }

/* ── Mobile: filters become a drawer; tray full-width ──── */
@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; }
  .catalog-source-tabs { position: sticky; top: 66px; z-index: 20; max-width: none; }
  .catalog-quick-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -8px; }
  .catalog-filters {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1120;
    top: 0;
    width: min(330px, 88vw);
    max-height: none;
    height: 100%;
    border-radius: 0;
    box-shadow: 24px 0 64px rgba(0, 0, 0, .28);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow: hidden;
    padding: 0;
  }
  .catalog-filters.show { transform: translateX(0); }
  .catalog-filters::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(22, 26, 25, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: -1;
  }
  .catalog-filters.show::before { opacity: 1; pointer-events: auto; }
  .catalog-filter-open { display: inline-flex !important; }
  .filter-close { display: inline-flex !important; }
  .filter-actions { display: none; }       /* drawer applies live; no submit button needed */
  .filter-form {
    position: relative;
    z-index: 1;
    height: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0 16px 88px;
    gap: 12px;
    background: var(--surface);
  }
  .filter-panel-head {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: 0 -16px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
  }
  .filter-mobile-result {
    position: fixed;
    z-index: 4;
    left: 0;
    bottom: 0;
    width: min(330px, 88vw);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
  }
  .filter-mobile-result .button { width: 100%; min-height: 48px; }
}

@media (max-width: 760px) {
  .catalog-filters { width: min(340px, 92vw); }
  .filter-mobile-result { width: min(340px, 92vw); }
  .print-tray {
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    bottom: 12px;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .print-tray-thumbs { display: none; }
  .print-tray-actions { width: auto; }
  .print-tray-actions .button { width: auto; flex: 1 1 auto; }
  .print-drawer-panel { width: 100%; }
  .catalog-sort-form select { max-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════
   問題の編集ドロワー（画像差し替え / 教材名 / 分類 / 削除）
   print-drawer と同じ右スライド。同時に1つしか開かない前提で z-index も同層。
   ═══════════════════════════════════════════════════════════ */

.card-edit { flex: 0 0 auto; min-height: 32px; padding-inline: 14px; }

.edit-drawer {
  position: fixed;
  inset: 0;
  z-index: 1120;
  display: none;
}
.edit-drawer.show { display: block; }
.edit-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(22, 26, 25, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition);
}
.edit-drawer.show .edit-drawer-scrim { opacity: 1; }
.edit-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: -24px 0 64px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.edit-drawer.show .edit-drawer-panel { transform: translateX(0); }
.edit-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 8px;
  flex: 0 0 auto;
}
.edit-drawer-head h2 { margin: 0; font-size: 20px; }
.edit-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink-soft);
  cursor: pointer;
}
.edit-section-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  margin: 0 20px 8px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-strong);
}
.edit-section-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 850;
  cursor: pointer;
}
.edit-section-tabs button.is-active {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: 0 1px 5px rgba(24, 63, 88, .12);
}
.edit-section-tabs button:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 1px; }
.edit-drawer-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 6px 20px 16px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.edit-tab-panel { display: grid; gap: 18px; align-content: start; min-width: 0; }
.edit-tab-panel[hidden] { display: none !important; }

.edit-answer { gap: 14px; }
.edit-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.edit-answer-head h3 { margin: 2px 0 0; font-size: var(--fs-h2); }
.edit-answer-head .eyebrow { margin: 0; }
.edit-answer-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.edit-answer-state.is-ready {
  border-color: #97cbb6;
  background: #eef9f4;
  color: #24664d;
}
.edit-answer-current,
.edit-answer-manage { width: 100%; }
.edit-answer-upload {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.edit-answer-upload .answer-file-field {
  position: relative;
  min-width: 0;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}
.edit-answer-upload .answer-file-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.edit-answer-upload .answer-file-field:has(input:focus-visible) {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
}
.edit-answer-upload .answer-file-name { margin: -5px 2px 0; }
.edit-answer-upload > .button { width: 100%; min-height: 46px; }

.edit-image {
  position: relative;
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  /* .edit-drawer-body は grid。既定の stretch だと中の img(height:auto) が高さに寄与せず
     ラッパが潰れて、上に重ねるメモレイヤー(inset:0)が 0px になる。start で内容高さに合わせる。 */
  align-self: start;
}
.edit-image img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.edit-image-busy { display: none; }   /* hidden idle; the author rule below would beat [hidden] otherwise */
.edit-image-busy:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .82);
  font-weight: 700;
  color: var(--ink-soft);
}
.edit-note-position-prompt:not([hidden]) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 92, 143, .94);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
  box-shadow: 0 5px 18px rgba(12, 50, 74, .2);
}
.edit-image.is-positioning-note { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.edit-image-actions { display: grid; gap: 6px; margin-top: -8px; }

/* メモ（画像に重ねる）: 位置決めレイヤー + マーカー（実際の印字位置のプレビュー）。
   レイヤーは画像にぴったり重なり、メモ入力中だけ表示＆タップ操作を受ける。 */
.edit-note-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;          /* ドラッグ配置中にスクロールへ持っていかれないように */
  z-index: 2;
}
.edit-note-marker {
  position: absolute;
  transform: translate(-50%, 0);   /* 指定点 = 文字の上端中央（PDFの基準と一致させる） */
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  color: #000;
  line-height: 1.1;
  pointer-events: none;            /* マーカー自体はクリックを奪わない（下のレイヤーで拾う） */
  text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
}
.edit-note-field { margin-top: 4px; }
.edit-note-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.edit-note-controls .pdf-filter-chips { margin: 0; }
.edit-note-position-trigger { flex: 1 0 100%; width: 100%; }

.edit-field { display: grid; gap: 8px; }
.edit-field > label,
.edit-field-label {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink);
}
.edit-field .text-input { width: 100%; }
.edit-location-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.edit-exclusion-setting {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  cursor: pointer;
}
.edit-exclusion-setting input { width: auto; min-height: 0; margin-top: 3px; accent-color: #a54c46; }
.edit-exclusion-setting span { display: grid; gap: 3px; }
.edit-exclusion-setting strong { color: var(--ink); font-size: var(--fs-sm); }
.edit-exclusion-setting small { color: var(--muted); line-height: 1.45; }

.edit-learning {
  display: grid;
  gap: 12px;
}
.edit-learning > h3,
.edit-learning-history h4 { margin: 0; }
.edit-learning-summary {
  display: grid;
  gap: 12px;
}
.edit-learning-status {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #acd1e5;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #f5fbff, #eaf5fb);
}
.edit-learning-status span { color: var(--muted); font-size: var(--fs-2xs); font-weight: 750; }
.edit-learning-status strong { color: var(--ink); font-size: 18px; }
.edit-learning-totals { display: grid; gap: 8px; }
.edit-learning-totals h4 { margin: 0; font-size: var(--fs-sm); }
.edit-learning-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.edit-learning-counts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.edit-learning-counts dt { min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.edit-learning-counts dd { flex: 0 0 auto; margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 850; }
.edit-learning-history { display: grid; gap: 8px; }
.edit-learning-history h4 { font-size: var(--fs-sm); }
.edit-learning-history ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.edit-learning-history li {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.edit-learning-history li.is-before-reset { opacity: .68; }
.edit-learning-history-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.edit-learning-history-main strong { color: var(--ink); font-size: var(--fs-sm); }
.edit-learning-history time,
.edit-learning-history-source { color: var(--muted); }
.edit-learning-history time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.edit-learning-old {
  width: fit-content;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 10px;
  font-weight: 800;
}
.edit-learning-reset { width: 100%; }

.edit-copy-panel {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid #b9d7e8;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #f8fcff, #eef7fc);
}
.edit-copy-panel h3 { margin: 0 0 4px; color: var(--ink); font-size: var(--fs-sm); }
.edit-copy-panel p { margin: 0; }
.edit-copy {
  width: 100%;
  min-height: 44px;
  border-color: #8dbed8;
  background: #fff;
  color: var(--accent-dark);
}
.edit-copy-status[data-state="error"] { color: var(--danger); }

.edit-danger-zone {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.edit-danger-zone > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.edit-danger-zone-body {
  display: grid;
  gap: 10px;
  padding: 0 0 8px;
}
.edit-danger-zone-body form { display: grid; margin: 0; }

.edit-drawer-foot {
  border-top: 1px solid var(--line);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  flex: 0 0 auto;
}
.edit-drawer-foot form { display: grid; margin: 0; }
.edit-save { width: 100%; min-height: 48px; font-size: 16px; }
.edit-delete { width: 100%; }

@media (max-width: 760px) {
  .edit-drawer-panel { width: 100%; }
}

@media (max-width: 420px) {
  .edit-location-fields { grid-template-columns: 1fr; }
}

/* ── 設定: 分類・教材名の管理リスト ───────────────────────────────── */
.taxonomy-change-note {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.taxonomy-change-note-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 800;
}
.taxonomy-change-note ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 4px;
}
.taxonomy-change-note strong { color: var(--ink); }
.taxonomy-group { margin-top: 14px; }
.taxonomy-group + .taxonomy-group { margin-top: 22px; }
.taxonomy-group-title { font-size: var(--fs-h3); margin: 0 0 8px; color: var(--ink); }
.taxonomy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.taxonomy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.taxonomy-rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.taxonomy-rename-form input[type="text"] { flex: 1 1 auto; min-width: 0; }
.taxonomy-count { flex: 0 0 auto; white-space: nowrap; }
.taxonomy-more { position: relative; flex: 0 0 auto; }
.taxonomy-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 800;
}
.taxonomy-more > summary::-webkit-details-marker { display: none; }
.taxonomy-more-menu {
  margin-top: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  width: 100%;
}
.taxonomy-merge-form { display: grid; gap: 6px; }
.taxonomy-merge-form select { width: 100%; min-height: 36px; }
.taxonomy-add { margin-top: 10px; }
.taxonomy-add > summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); }
.taxonomy-add-form { display: flex; gap: 8px; margin-top: 8px; }
.taxonomy-add-form input { flex: 1 1 auto; min-width: 0; }

/* ═══════════════════════════════════════════════════════════
   UX implementation 2026-07 — quiet study-desk system
   Structural states first; decorative rules stay restrained.
   ═══════════════════════════════════════════════════════════ */

h1, h2, .brand, .public-logo, .public-hero h1 {
  font-family: var(--font-display);
}

button, .button, .subtle { min-height: 44px; }

.advanced > summary,
.multi-filter > summary,
.learner-add > summary,
.taxonomy-add > summary {
  min-height: 44px;
}
.learner-add > summary,
.taxonomy-add > summary {
  display: flex;
  align-items: center;
}
.taxonomy-more > summary {
  width: 44px;
  min-height: 44px;
}

.history-detail-actions {
  width: fit-content;
  margin-top: 16px;
}
.history-detail-actions > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
.history-detail-actions > summary::-webkit-details-marker { display: none; }
.history-detail-actions[open] > form { margin-top: 12px; }

.learner-context {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.learner-chip > summary { min-height: 44px; }
.learner-context strong { color: var(--ink); font-size: var(--fs-sm); }

.account-menu { position: relative; flex: 0 0 auto; }
.account-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu-panel {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 8px);
  right: 0;
  width: 180px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.account-menu-panel a,
.account-menu-panel button {
  width: 100%;
  justify-content: flex-start;
  min-height: 44px;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.account-menu-panel a:hover,
.account-menu-panel button:hover,
.account-menu-panel a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }

.toast { max-width: min(460px, calc(100vw - 28px)); }
.toast-close {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: currentColor;
  font-size: 20px;
}

.settings-nav {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .72);
}
.settings-nav a {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}
.settings-nav a[aria-current="page"] { color: #fff; background: var(--accent); }
.settings-danger-zone { border-color: #ddb0ac; margin-top: 28px; }

.filter-advanced {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.filter-advanced > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.filter-advanced-body { display: grid; gap: 12px; padding: 6px 0 10px; }
.filter-actions { display: block; position: sticky; bottom: 0; padding-top: 8px; background: var(--surface); }
.filter-actions .button { width: 100%; }
.filter-option { min-height: 44px; padding: 6px; }
.filter-search { min-height: 44px; }

.active-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-size: var(--fs-xs);
}
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 300px; }
.active-filter-chips a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font-weight: 700;
  text-decoration: none;
}
.active-filter-chips a:hover { border-color: var(--accent); color: var(--accent-dark); }

.filter-mobile-result { display: none; }

.card-pick, .card-bookmark, .card-edit, .drawer-item-remove, .drawer-item-drag-handle,
.print-drawer-close, .edit-drawer-close { min-width: 44px; min-height: 44px; }

.edit-problem-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.edit-problem-facts > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.edit-problem-facts dt { color: var(--muted); font-size: 10px; font-weight: 750; }
.edit-problem-facts dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }

.print-order-choice,
.edit-field {
  min-width: 0;
}
fieldset.print-order-choice,
fieldset.edit-field {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.print-order-label,
fieldset.edit-field > legend { padding: 0; color: var(--ink-soft); }

.edit-section > h3 { margin: 0 0 12px; font-size: var(--fs-h3); }
.edit-advanced { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.edit-advanced > summary { min-height: 48px; display: flex; align-items: center; padding: 10px 13px; cursor: pointer; color: var(--accent-dark); font-weight: 800; }
.edit-advanced-body { display: grid; gap: 14px; padding: 0 13px 14px; }
.edit-load-error { margin-bottom: 14px; }
.edit-category-groups {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-anchor: none;
}
.edit-category-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.edit-category-group > summary {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}
.edit-category-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.edit-category-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}
.edit-category-options input { width: auto; min-height: 0; accent-color: var(--accent); }
.edit-category-major {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}
.edit-category-major input,
.edit-category-children input { width: auto; min-height: 0; accent-color: var(--accent); }
.edit-category-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  min-width: 0;
}
.edit-category-children label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .edit-category-children,
  .edit-category-options { grid-template-columns: 1fr; }
}

.pdf-builder-layout { display: grid; gap: 18px; align-items: start; }
fieldset.pdf-filter-group { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
fieldset.pdf-filter-group > legend { padding: 0; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 800; }
fieldset.pdf-filter-group:not([hidden]),
fieldset.edit-field:not([hidden]),
fieldset.print-order-choice:not([hidden]) { display: block !important; grid-template-columns: none !important; }
.pdf-builder-overview { background: linear-gradient(160deg, #ffffff, #f1f8fc); }
.pdf-builder-overview h2 { margin-top: 5px; }
@media (max-width: 1199px) {
  /* The main card already shows the count and reason. Avoid repeating the same explanation below it. */
  .pdf-builder-overview { display: none; }
}
.pdf-builder-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pdf-builder-steps li { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; }
.pdf-builder-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); }

.score-item { max-height: none; overflow: visible; }
.score-list .button-row .score-clear-form button { min-height: 44px; }

.upload-crop-box:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.public-lead { color: #4a6070; }
.public-feature-card p { color: #425866; }
.public-footer { color: #566977; }
.public-header-note { color: #4a6070; }
.public-header-cta,
.public-roadmap .button { background: linear-gradient(180deg, #0f77c8, var(--accent)); color: #fff; }

@media (max-width: 760px) {
  .app-body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar { padding: 6px 0; }
  .topbar-inner {
    min-height: 52px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
  }
  .brand { flex: 1 1 auto; min-width: 0; font-size: 13px; }
  .brand::before { width: 30px; height: 30px; flex: 0 0 auto; }
  .learner-chip > summary,
  .learner-context { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
  .learner-context > span { display: none; }
  .account-menu-label { display: none; }
  .account-menu > summary { width: 44px; padding: 0; justify-content: center; }
  .account-menu-panel { position: fixed; top: 62px; right: 12px; }

  .nav-shell {
    position: fixed;
    z-index: 1100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: block;
    padding: 0;
  }
  .nav-primary {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(34, 78, 116, .12);
  }
  .nav-primary a {
    min-width: 0;
    min-height: 54px;
    padding: 5px 2px;
    border-radius: 10px;
  }
  .nav-secondary { display: none; }
  .page { padding-bottom: 56px; }
  .site-footer { margin-bottom: 12px; }
  .score-progress-panel { top: 64px; }
  .score-item { scroll-margin-top: 140px; }
  .score-item .button-row button { min-height: 44px !important; }
  .score-complete-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }

  .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog .problem-grid.image-only-grid,
  .catalog[data-density="compact"] .problem-grid.image-only-grid,
  .catalog.is-filters-collapsed .problem-grid.image-only-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .catalog-density { display: none; }
  .catalog-card .card-body { grid-template-columns: 1fr; }
  .catalog-card .card-actions { justify-content: flex-start; }
  .catalog-card .card-media img { max-height: 320px; }
  .filter-actions { display: none; }
  .filter-mobile-result { display: block; }
  .catalog-source-tabs { top: 64px; }
  .catalog-quick-filter { min-height: 48px; padding: 7px 10px; font-size: 12px; }
  .catalog-quick-filter strong { font-size: 16px; }
  .catalog-toolbar { position: sticky; z-index: 15; top: 124px; padding: 8px 0; background: var(--bg); }
  .print-tray { bottom: calc(76px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 8px; }
  .print-tray-info { justify-content: center; flex-wrap: wrap; }
  .print-tray-actions { width: 100%; }
  .print-tray-actions .button { min-width: 0; }
  .print-tray-primary { flex: 1.4 1 auto !important; }
}

@media (max-width: 560px) {
  .paper-mode-dialog-card { gap: 13px; padding: 17px; }
  .paper-mode-options { grid-template-columns: 1fr; }
  .paper-mode-option { min-height: 88px; padding: 13px; }
  .paper-mode-dialog[data-study-start-dialog] {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .study-use-options { grid-template-columns: minmax(0, 1fr); }
  .study-use-option {
    min-height: 0;
    padding: 15px;
    gap: 13px;
  }
  .study-use-option-head strong { font-size: 17px; }
  .study-use-option > p { align-self: start; }
  .print-tray-change-mode { order: 3; }
  .print-tray-clear { order: 4; }
}

/* Progressive enhancement: without JavaScript, keep the GET form visible and scroll with the
   page. The submit button inside <noscript> remains the complete fallback. */
@media (max-width: 900px) {
  html:not(.js) .catalog-filters {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 16px;
    border-radius: var(--radius-md);
    transform: none;
    box-shadow: var(--shadow-soft);
  }
  html:not(.js) .filter-form { height: auto; overflow: visible; padding: 0; }
  html:not(.js) .filter-panel-head { position: static; margin: 0; padding: 0; border: 0; }
  html:not(.js) .filter-mobile-result,
  html:not(.js) .catalog-filter-open,
  html:not(.js) .filter-close { display: none !important; }
  html:not(.js) .filter-actions { display: block; }
}

@media (max-width: 360px) {
  .topbar .brand { flex: 0 0 30px; gap: 0; font-size: 0; }
  .learner-context { max-width: 92px; padding-inline: 8px; }
  .learner-chip > summary { max-width: 118px; white-space: nowrap; }
  .learner-chip > summary span { overflow: hidden; text-overflow: ellipsis; }
  .nav-primary a { font-size: 11px; }
  .card-meta { display: grid; gap: 2px; }
}

@media (max-width: 720px) {
  .public-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
  }
  .public-header-actions { width: auto; display: block; }
  .public-header-login { display: none; }
  .public-header-cta { min-height: 44px; }
  .public-header-note {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    min-height: 30px;
    padding-block: 4px;
  }
}

@media (min-width: 1200px) {
  .pdf-builder-layout {
    display: grid;
    grid-template-columns: minmax(520px, 620px) minmax(360px, 1fr);
    gap: 28px;
    align-items: start;
  }
  /* On wide screens the side summary owns this text, so it is not repeated in both columns. */
  .pdf-builder .reason-preview { display: none; }
}

.score-complete-actions { flex: 0 0 auto; }
.print-drawer.is-compact .print-drawer-panel {
  top: auto;
  bottom: 0;
  height: auto;
  max-height: min(720px, 92dvh);
  border-radius: 20px 0 0 0;
}
.print-drawer.is-compact .print-drawer-list {
  flex: 0 1 auto;
  max-height: 190px;
}

@media (max-width: 760px) {
  /* A backdrop-filter ancestor becomes the containing block for fixed descendants in WebKit.
     The bottom nav lives inside .topbar, so keep the mobile header opaque and let the nav anchor
     to the viewport bottom rather than the 65px-tall header itself. */
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(248, 252, 255, .98);
  }
  .score-complete-bar { flex-wrap: wrap; }
  .pdf-extra-options { grid-template-columns: 1fr; }
  .score-complete-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-complete-actions .button { width: 100%; min-width: 0; white-space: normal; }
  .print-drawer.is-compact .print-drawer-panel { border-radius: 20px 20px 0 0; }
  .score-item .button-row .score-clear-form button { min-height: 44px !important; }
}
/* 2026-07 parent-flow audit: keep the first decision visible and the optional work quiet. */
.upload-subject-current { margin: 0 0 var(--space-4); color: var(--accent-dark); font-weight: 800; }
.upload-camera-primary {
  display: flex; width: 100%; min-height: 92px; margin: 0 0 var(--space-2); border-style: solid;
  border-color: var(--accent); background: var(--accent); color: #fff; font-size: 17px;
}
.upload-camera-primary svg { color: #fff; }
.upload-camera-primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }
@media (pointer: fine) { .upload-camera-primary { display: none; } }
.upload-file-secondary { width: 100%; padding: 18px 20px; font: inherit; }
.pdf-builder-primary-action { margin: 4px 0 14px; }
.pdf-builder-primary-action .primary { width: 100%; }
.pdf-builder-options { border-top: 1px solid var(--line); }
.pdf-builder-options > summary {
  display: flex; align-items: center; min-height: 48px; padding: 13px 2px;
  color: var(--accent-dark); cursor: pointer; font-weight: 800;
}
.pdf-builder-options-body { display: grid; gap: 14px; padding: 4px 0 12px; }
.pdf-preview-open-action .button { width: 100%; min-height: 48px; }
.home-pending-more { max-width: 420px; margin-top: 12px; }
.home-pending-more > summary {
  display: flex; align-items: center; min-height: 44px; color: var(--accent-dark);
  cursor: pointer; font-weight: 800;
}
.home-pending-more p { margin: 4px 0; }

/* ── Home: compact task cards ─────────────────────────────────────────
   Cards separate states clearly; copy stays limited to state, item, metadata and action. */
.today-board {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 8px 0 24px;
}
.today-board-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px 14px;
  margin-bottom: 8px;
}
.metrics-home-link { flex: 0 0 auto; }
.today-task-list {
  display: grid;
  gap: 12px;
}
.today-task {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 22px rgba(35, 70, 100, .07);
}
.today-task--answer { border-color: #e6c783; background: linear-gradient(110deg, #fffdf8, #fff 68%); }
.today-task--answer.today-task--screen-grading {
  border-color: #b7c7df;
  background: linear-gradient(110deg, #f7f9fd, #fff 70%);
}
.today-task--pdf { border-color: #b9cce7; background: linear-gradient(110deg, #f8faff, #fff 68%); }
.today-task--flash { border-color: #a9cfea; background: linear-gradient(110deg, #f2f9ff, #fff 72%); }
.today-task--create { border-color: #a5d6c0; background: linear-gradient(110deg, #f6fcf9, #fff 72%); }
.today-task-marker { display: none; }
.today-task-body { min-width: 0; }
.today-task-body h2 { margin: 0; font-size: 18px; }
.today-task-count {
  margin-left: 5px;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 750;
  white-space: nowrap;
}
.today-task-body > p:not(.today-task-kicker):not(.today-task-meta) {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
}
.today-task-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
}
.today-task--answer .today-task-kicker { color: #8a5a00; background: #fff1d6; }
.today-task--screen-grading .today-task-kicker { color: #294f83; background: #e8effa; }
.today-task--create .today-task-kicker { color: #17633a; background: #e7f7ef; }
.today-task-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.today-task .button-row { margin-top: 12px; }
.today-task-more { display: inline-flex; margin-top: 10px; }
.today-task-finish {
  max-width: 560px;
  margin-top: 10px;
  border-top: 1px dashed var(--line-strong);
}
.today-task-finish > summary,
.today-create-ahead > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 750;
}
.today-task-finish[open] { padding-bottom: 4px; }
.today-task-finish p { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); }
.today-create-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.today-create-choice {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.today-create-choice--auto { border-color: #78bce9; background: var(--accent-soft); }
.today-create-choice:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(22, 139, 232, .12);
  transform: translateY(-1px);
}
.today-create-choice strong { color: var(--accent-dark); font-size: 14px; }
.today-create-choice span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.today-create-ahead {
  margin-left: 24px;
  padding: 0 10px;
}
.today-create-ahead .button-row { padding: 0 0 10px; }

@media (max-width: 760px) {
  .today-board { padding-top: 2px; }
  .today-board-head { padding-inline: 0; }
  .metrics-home-link { min-height: 44px; }
  .today-task {
    padding: 17px 16px;
    border-radius: 14px;
  }
  .today-task-body h2 { font-size: 17px; }
  .today-task .button-row { display: grid; grid-template-columns: 1fr; }
  .today-task .button-row > * { width: 100%; white-space: normal; }
  .today-create-choices { grid-template-columns: 1fr; }
  .today-create-ahead { margin-left: 18px; padding-right: 0; }
}
.score-result-guide { margin: 0 0 14px; }
.review-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.review-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #f8fafc; border-radius: 12px; }
.status-chip { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #e7f7ef; color: #17633a; font-weight: 800; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ── Admin-only local AI workbench ───────────────────── */
.similar-workbench {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  padding: 20px 22px;
  border: 1px solid #a9d8d0;
  border-radius: 18px;
  background: linear-gradient(118deg, #f1fbf8 0%, #f8fcff 58%, #eef7ff 100%);
  box-shadow: 0 10px 28px rgba(16, 92, 105, .09);
}
.similar-workbench::after {
  content: "AI";
  position: absolute;
  right: 20%;
  bottom: -38px;
  color: rgba(21, 124, 126, .05);
  font-size: 116px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}
.similar-workbench-copy { position: relative; z-index: 1; min-width: 0; }
.similar-workbench-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.similar-workbench-kicker span {
  padding: 3px 8px;
  border: 1px solid #9fd1ca;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #176c6d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.similar-workbench h2 { margin: 0; color: #123f4d; font-size: clamp(20px, 2vw, 26px); }
.similar-workbench p { margin: 6px 0 13px; color: #496b73; font-size: 13px; line-height: 1.65; }
.similar-workbench-actions { position: relative; z-index: 1; display: grid; gap: 8px; min-width: 190px; }
.similar-workbench-actions .button { width: 100%; }
.similar-status-filters {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(79, 151, 153, .22);
}
.similar-status-filters > strong { flex: 0 0 auto; color: #45676e; font-size: 11px; }
.similar-status-filters > div { display: flex; flex-wrap: wrap; gap: 7px; }
.similar-status-filters a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #b7d8d5;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: #315f67;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.similar-status-filters a:hover { border-color: #258184; background: #fff; color: #126d6e; }
.similar-status-filters a.is-active { border-color: #177d7e; background: #177d7e; color: #fff; }
.similar-workflow, .similar-admin-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.similar-workflow li, .similar-admin-steps li { display: flex; align-items: center; gap: 7px; min-width: 0; color: #42656d; font-size: 11px; font-weight: 800; }
.similar-workflow b, .similar-admin-steps b {
  display: inline-grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #d5eeeb;
  color: #126f70;
  font-size: 11px;
}
.similar-card-action { grid-column: 1 / -1; width: 100%; min-height: 58px; padding-top: 7px; border-top: 1px dashed var(--line); }
.similar-card-action form, .similar-card-action .button { width: 100%; }
.similar-card-create { min-height: 42px; border-color: #9fcfc8; background: #eef9f6; color: #126d6e; font-weight: 900; }
.similar-card-create:hover { border-color: #157e7e; background: #def4ef; }
.similar-card-status {
  display: grid;
  gap: 2px;
  min-height: 50px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.similar-card-status:hover { transform: translateY(-1px); border-color: currentColor; box-shadow: var(--shadow-soft); }
.similar-card-status span { font-size: 12px; font-weight: 900; }
.similar-card-status small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.similar-card-status--waiting, .similar-status--waiting { background: #f4f7fa; color: #536575; }
.similar-card-status--working, .similar-status--working { background: #eef6ff; color: #125e9b; }
.similar-card-status--attention, .similar-status--attention { background: #fff7dc; color: #795300; }
.similar-card-status--danger, .similar-status--danger { background: #fff0ee; color: #9b3930; }
.similar-card-status--ready, .similar-status--ready { background: #f0f0ff; color: #5147a8; }
.similar-card-status--published, .similar-status--published { background: #eaf8ef; color: #17633a; }
.similar-card-status--stopped, .similar-status--stopped { background: #fff1d9; color: #8a4f08; }
.similar-card-status--rejected, .similar-status--rejected { background: #f6eeee; color: #7c3f42; }
.similar-card-status--muted, .similar-status--muted { background: #f4f5f6; color: #606a73; }

.similar-admin-head, .similar-review-head { align-items: end; }
.similar-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.similar-admin-steps {
  position: relative;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.7);
}
.similar-admin-steps li { position: relative; font-size: 12px; }
.similar-admin-steps li:not(:last-child)::after { content: "→"; position: absolute; right: 3px; color: #9eb2b8; }
.similar-admin-steps li.is-done b { background: #dff3e6; color: #17633a; }
.similar-admin-steps li.is-current { color: #126f70; }
.similar-admin-steps li.is-current b { background: #157e7e; color: #fff; box-shadow: 0 0 0 4px rgba(21,126,126,.13); }
.similar-worker-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.similar-worker-panel h2 { margin: 0; }
.similar-worker-state { display: flex; align-items: center; gap: 9px; margin: 0; }
.similar-worker-state > span { width: 10px; height: 10px; border-radius: 50%; background: #97a5ae; box-shadow: 0 0 0 5px rgba(151,165,174,.12); }
.similar-worker-state.is-online > span { background: #20a461; box-shadow: 0 0 0 5px rgba(32,164,97,.13); }
.similar-worker-state strong, .similar-worker-state small { display: block; }
.similar-worker-state small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.similar-queue-panel .section-head { margin-bottom: 14px; }
.similar-job-count { color: var(--muted); font-size: 12px; font-weight: 800; }
.admin-job-list { display: grid; gap: 8px; }
.admin-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 22px;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 10px 13px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.admin-job-row:hover { transform: translateY(-1px); border-color: #79bdb6; box-shadow: var(--shadow-soft); }
.admin-job-main { display: grid; gap: 3px; min-width: 0; }
.admin-job-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-job-main small, .admin-job-attempt { color: var(--muted); font-size: 11px; }
.admin-job-arrow { color: #168080; font-size: 18px; }
.similar-status { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.similar-empty { display: grid; justify-items: center; gap: 10px; }
.similar-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.similar-next-action { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 15px; border-left: 4px solid currentColor; border-radius: 0 12px 12px 0; background: #f5f8fa; color: #405764; }
.similar-next-action strong { flex: 0 0 auto; font-size: 12px; }
.similar-next-action span { font-size: 13px; }
.similar-next-action--attention { background: #fff8e2; color: #795300; }
.similar-next-action--danger { background: #fff0ee; color: #9b3930; }
.similar-next-action--ready { background: #f0f0ff; color: #5147a8; }
.similar-next-action--published { background: #eaf8ef; color: #17633a; }
.similar-generation-error { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 20px; padding: 19px 22px; border: 1px solid #e6aaa4; border-left: 5px solid #b84236; border-radius: 0 15px 15px 0; background: linear-gradient(135deg, #fff 0%, #fff2ef 100%); box-shadow: 0 12px 28px rgba(148, 54, 45, .08); }
.similar-generation-error-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #b84236; color: #fff; font-size: 24px; font-weight: 950; box-shadow: 0 0 0 6px rgba(184,66,54,.09); }
.similar-generation-error .eyebrow { margin: 0 0 2px; color: #a23a31; }
.similar-generation-error h2 { margin: 0 0 5px; color: #692a25; }
.similar-generation-error p { margin: 0 0 5px; color: #713c37; font-size: 13px; line-height: 1.65; }
.similar-generation-error small { color: #8c5b56; }
.similar-draft-waiting { gap: 8px; min-height: 300px; }
.similar-draft-waiting small { color: var(--muted); }
.similar-wait-spinner { width: 30px; height: 30px; border: 3px solid #d4e4eb; border-top-color: #168080; border-radius: 50%; animation: similar-wait-spin .9s linear infinite; }
.similar-draft-failed { min-height: 240px; background: #fff8f7; color: #98473f; }
@keyframes similar-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .similar-wait-spinner { animation: none; border-top-color: #d4e4eb; background: #168080; } }
.review-sheet { padding: 0; overflow: hidden; }
.review-sheet-head { display: flex; align-items: baseline; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.review-sheet-head span { color: #168080; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.review-sheet-head h2 { margin: 0; }
.review-sheet .review-image { border-radius: 0; }
.similar-rework-panel, .similar-publish-panel { margin-top: 20px; }
.similar-rework-panel form { display: grid; gap: 12px; }
.similar-rework-panel form .button { justify-self: start; }
.similar-rework-panel.has-retained-draft { border-color: #b8d5e5; background: linear-gradient(145deg, #fff 0%, #f4faff 100%); }
.similar-rework-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.similar-rework-head h2 { margin-bottom: 3px; }
.similar-retained-badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #afd0df; border-radius: 999px; background: #edf8fc; color: #28677f; font-size: 10px; font-weight: 900; }
.similar-publish-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: #b9d9e8;
  background:
    radial-gradient(circle at 96% 0%, rgba(49, 162, 154, .12), transparent 30%),
    linear-gradient(155deg, #fff 0%, #f7fcff 72%);
  box-shadow: 0 18px 45px rgba(32, 91, 125, .10);
}
.similar-publish-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #15938b, #0b6bb7);
}
.similar-publish-head { display: flex; gap: 14px; align-items: flex-start; padding: 23px 26px 18px 30px; }
.similar-publish-head h2 { margin: 1px 0 5px; font-size: clamp(20px, 2vw, 25px); letter-spacing: -.025em; }
.similar-publish-head .eyebrow { margin-bottom: 2px; color: #147d79; }
.similar-publish-lead { margin: 0; color: var(--muted); font-size: 13px; }
.similar-publish-mark {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #9dd6ce;
  border-radius: 50%;
  background: #e8f8f4;
  color: #147d79;
  box-shadow: 0 0 0 6px rgba(29, 148, 139, .06);
  font-size: 21px;
  font-weight: 950;
}
.similar-approval-form { display: grid; gap: 0; padding: 0 26px 24px 30px; }
.similar-category-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.84); }
.similar-category-editor > summary {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.similar-category-editor > summary::-webkit-details-marker { display: none; }
.similar-category-editor > summary:hover { background: #f6fbfe; }
.similar-category-summary-copy { display: grid; gap: 2px; }
.similar-category-summary-copy small { color: #168080; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.similar-category-summary-copy strong { font-size: 14px; }
.similar-category-summary-value { display: flex; flex-wrap: wrap; gap: 6px; }
.similar-category-summary-value span { padding: 5px 9px; border-radius: 999px; background: #e9f7f4; color: #176c69; font-size: 11px; font-weight: 850; }
.similar-category-chevron { width: 9px; height: 9px; border-right: 2px solid #66808e; border-bottom: 2px solid #66808e; transform: rotate(45deg); transition: transform var(--transition); }
.similar-category-editor[open] .similar-category-chevron { transform: rotate(225deg); }
.similar-category-editor-body { padding: 5px 16px 16px; border-top: 1px solid var(--line); }
.similar-category-editor-body > p { margin: 10px 0 12px; color: var(--muted); font-size: 12px; }
.similar-category-editor .edit-category-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.similar-category-editor .edit-category-group { align-content: start; box-shadow: none; }
.similar-category-editor .edit-category-major { font-size: 13px; }
.similar-approval-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 16px 0 0; }
.similar-approval-action strong { display: block; font-size: 14px; }
.similar-approval-action p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.similar-approve-button { min-height: 50px; padding-inline: 22px; border-radius: 14px; font-size: 14px; }
.similar-approve-button > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); }
.similar-safety-note { margin: 13px 0 0; color: #6b5a2d; font-size: 11px; font-weight: 750; text-align: right; }
.similar-safety-note span { color: #c69428; font-size: 8px; vertical-align: 1px; }
.similar-publish-panel.is-approved::before, .similar-publish-panel.is-published::before { background: linear-gradient(180deg, #1f9b62, #147448); }
.similar-publish-panel.is-approved .similar-publish-mark, .similar-publish-panel.is-published .similar-publish-mark { border-color: #a7d8bf; background: #e9f7ef; color: #17633a; }
.similar-publish-panel.is-stopped { border-color: #e6bd7c; background: radial-gradient(circle at 96% 0%, rgba(221, 147, 35, .13), transparent 32%), linear-gradient(155deg, #fff 0%, #fffaf0 72%); }
.similar-publish-panel.is-stopped::before { background: linear-gradient(180deg, #e39a2d, #b96316); }
.similar-publish-panel.is-stopped .similar-publish-mark { border-color: #e4ba75; background: #fff1d6; color: #9b5709; box-shadow: 0 0 0 6px rgba(211, 133, 25, .08); }
.similar-publish-panel.is-rejected { border-color: #d9b8ba; background: radial-gradient(circle at 96% 0%, rgba(132, 65, 69, .09), transparent 32%), linear-gradient(155deg, #fff 0%, #fcf7f7 72%); }
.similar-publish-panel.is-rejected::before { background: linear-gradient(180deg, #996064, #6f3d41); }
.similar-publish-panel.is-rejected .similar-publish-mark { border-color: #d8b8ba; background: #f8eded; color: #783f43; box-shadow: 0 0 0 6px rgba(120, 63, 67, .06); }
.similar-release-action { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin: 0 26px 25px 30px; padding: 18px; border: 1px solid #b7daca; border-radius: 15px; background: rgba(240, 250, 245, .9); }
.similar-release-copy { display: grid; gap: 2px; }
.similar-release-copy > span { color: #327156; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.similar-release-copy > strong { color: #173f30; font-size: 17px; }
.similar-release-copy p { margin: 2px 0 0; color: #526d60; font-size: 12px; }
.similar-release-button { min-height: 50px; border-radius: 14px; }
.similar-rollback-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -8px 26px 25px 30px; padding: 14px 4px 0; border-top: 1px dashed #bfd5df; }
.similar-rollback-row strong { display: block; color: var(--ink-soft); font-size: 12px; }
.similar-rollback-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.similar-rollback-row .button { min-height: 40px; color: #536979; }
.similar-published-state { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; margin: 0 26px 25px 30px; padding: 17px 18px; border: 1px solid #b7daca; border-radius: 15px; background: #f0faf5; }
.similar-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #20a461; box-shadow: 0 0 0 6px rgba(32,164,97,.12); }
.similar-published-state strong { color: #174d32; }
.similar-stopped-state { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin: 0 26px 25px 30px; padding: 20px; border: 1px solid #e2b76f; border-radius: 16px; background: #fff8e8; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.similar-stopped-identity { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.similar-stopped-dot { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 5px; border: 3px solid #c3741e; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 0 5px rgba(195,116,30,.12); }
.similar-stopped-identity > div > span { display: block; margin-bottom: 3px; color: #8c5d25; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.similar-stopped-identity strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #6e3d0d; font-size: 19px; }
.similar-stopped-identity em { padding: 3px 8px; border-radius: 999px; background: #bf6417; color: #fff; font-size: 10px; font-style: normal; letter-spacing: .06em; }
.similar-stopped-identity p { margin: 5px 0 0; color: #735a3e; font-size: 12px; line-height: 1.6; }
.similar-stopped-actions { display: grid; gap: 8px; min-width: 230px; }
.similar-stopped-actions form, .similar-stopped-actions .button { width: 100%; }
.similar-stopped-actions .button.subtle { border-color: #d9b985; background: rgba(255,255,255,.72); color: #754719; }
.similar-stopped-guide { grid-column: 1 / -1; margin: 0; padding-top: 13px; border-top: 1px dashed #d9b77d; color: #735a3e; font-size: 11px; }
.similar-stopped-guide strong { margin-right: 8px; color: #754719; }
.similar-published-state strong span { color: #26714e; font-size: 12px; }
.similar-published-state p { margin: 2px 0 0; color: #547061; font-size: 11px; }
.similar-published-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.similar-published-actions form { margin: 0; }
.similar-next-review-button { white-space: nowrap; }
.similar-reject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 26px 25px 30px;
  padding-top: 15px;
  border-top: 1px dashed #d9b8ba;
}
.similar-reject-row strong { color: #63383b; font-size: 13px; }
.similar-reject-row p { margin: 3px 0 0; color: #765b5d; font-size: 11px; }

.similar-answer-panel { margin-top: 20px; padding: 0; overflow: hidden; border-color: #b9d7d3; background: #fff; }
.similar-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #d7e8e5; background: #f3faf8; }
.similar-answer-head h2 { margin: 0; color: #183f46; font-size: 22px; }
.similar-answer-head .eyebrow { margin: 0 0 2px; color: #167a77; }
.similar-answer-head > span { padding: 5px 9px; border-radius: 999px; background: #e2f2ee; color: #236c63; font-size: 10px; font-weight: 900; }
.similar-answer-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.similar-answer-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 15px 22px; }
.similar-answer-list li + li { border-top: 1px solid #e2ecea; }
.similar-answer-list span { color: #678087; font-size: 13px; font-weight: 850; }
.similar-answer-list strong { color: #173f45; font-size: 20px; overflow-wrap: anywhere; }
.similar-answer-empty { margin: 0; padding: 18px 22px; color: #687d82; font-size: 13px; }
.similar-answer-note { margin: 0; padding: 10px 22px 14px; border-top: 1px solid #e2ecea; color: #728488; font-size: 10px; }

@media (max-width: 900px) {
  .similar-workbench { grid-template-columns: 1fr; }
  .similar-workbench-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .review-compare { grid-template-columns: 1fr; }
  .similar-workbench { padding: 17px 15px; }
  .similar-workflow, .similar-admin-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .similar-workflow li, .similar-admin-steps li { min-height: 32px; }
  .similar-admin-steps li:not(:last-child)::after { display: none; }
  .similar-workbench-actions { grid-template-columns: 1fr; }
  .similar-status-filters { align-items: flex-start; flex-direction: column; }
  .similar-worker-panel { align-items: flex-start; flex-direction: column; }
  .admin-job-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; }
  .admin-job-main { grid-column: 1 / -1; }
  .admin-job-attempt { justify-self: start; }
  .admin-job-arrow { justify-self: end; }
  .similar-next-action { align-items: flex-start; flex-direction: column; gap: 4px; }
  .similar-publish-head { padding: 20px 18px 16px 22px; }
  .similar-approval-form { padding: 0 18px 20px 22px; }
  .similar-category-editor > summary { grid-template-columns: 1fr 20px; gap: 8px; }
  .similar-category-summary-value { grid-column: 1 / -1; grid-row: 2; }
  .similar-category-chevron { grid-column: 2; grid-row: 1; }
  .similar-category-editor .edit-category-groups { grid-template-columns: 1fr; }
  .similar-approval-action { align-items: stretch; flex-direction: column; }
  .similar-approve-button { width: 100%; }
  .similar-safety-note { text-align: left; }
  .similar-release-action { grid-template-columns: 1fr; margin: 0 18px 20px 22px; }
  .similar-release-action form, .similar-release-button { width: 100%; }
  .similar-rollback-row { align-items: stretch; flex-direction: column; margin: -4px 18px 20px 22px; }
  .similar-rollback-row form, .similar-rollback-row .button { width: 100%; }
  .similar-stopped-state { grid-template-columns: 1fr; margin: 0 18px 20px 22px; padding: 17px; }
  .similar-stopped-actions { min-width: 0; }
  .similar-stopped-guide { grid-column: 1; }
  .similar-generation-error { grid-template-columns: 38px minmax(0, 1fr); padding: 16px; }
  .similar-generation-error-mark { width: 36px; height: 36px; font-size: 20px; }
  .similar-published-state { grid-template-columns: 12px 1fr; margin: 0 18px 20px 22px; }
  .similar-published-actions {
    grid-column: 1 / -1;
    align-items: stretch;
    flex-direction: column;
  }
  .similar-published-actions .button { width: 100%; }
  .similar-review-actions { width: 100%; }
  .similar-review-actions .button { flex: 1 1 180px; }
  .similar-reject-row { align-items: stretch; flex-direction: column; margin: 0 18px 20px 22px; }
  .similar-reject-row form, .similar-reject-row .button { width: 100%; }
  .similar-answer-head, .similar-answer-list li { padding-right: 16px; padding-left: 16px; }
  .similar-answer-note, .similar-answer-empty { padding-right: 16px; padding-left: 16px; }
}

.guest-catalog-filter { margin-bottom: var(--space-6); }
.guest-catalog-filter .section-head { align-items: end; }
.guest-catalog-filter form { display: grid; gap: var(--space-4); }
.guest-public-grid { margin-bottom: var(--space-5); }

/* ── Registration-free sample experience ──────────────────────────────────
   A calm, blue study desk: the public proof uses the same product tokens as
   the signed-in app while keeping selection and the next action unmistakable. */
.guest-demo-body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .96) 0 13rem, transparent 27rem),
    linear-gradient(180deg, #eaf5fc 0, #f7fbfe 38rem, #edf6fb 100%);
  font-family: var(--font);
}

.guest-demo-header,
.guest-demo-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.guest-demo-header {
  min-height: 78px;
}

.guest-demo-header nav,
.guest-demo-footer nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.guest-demo-link,
.guest-demo-footer a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.guest-demo-shell,
.guest-grading-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 150px;
}

.guest-demo-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid rgba(132, 178, 213, .55);
  border-radius: 32px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 28px 70px rgba(40, 91, 132, .13);
}

.guest-demo-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -190px;
  border: 54px solid rgba(63, 151, 216, .1);
  border-radius: 50%;
  pointer-events: none;
}

.guest-demo-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.guest-demo-kicker span {
  font-size: 9px;
  color: #57a6dc;
}

.guest-demo-hero h1,
.guest-grading-head h1 {
  margin: 0;
  color: #163752;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.1vw, 62px);
  line-height: 1.18;
  letter-spacing: -.04em;
}

.guest-demo-hero-copy > p:not(.guest-demo-kicker),
.guest-grading-head > p:not(.guest-demo-kicker) {
  max-width: 46rem;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.9;
}

.guest-demo-steps {
  display: flex;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.guest-demo-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 9px;
  border: 1px solid #cfe1ee;
  border-radius: 999px;
  color: #294b66;
  background: #f8fcff;
  font-size: 13px;
  font-weight: 800;
}

.guest-demo-steps span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
}

.guest-demo-privacy {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid #c9e3d8;
  border-radius: 20px;
  background: #f1faf6;
  color: #235440;
}

.guest-demo-privacy-mark {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--ok);
  font-weight: 900;
}

.guest-demo-privacy strong { display: block; margin: 2px 0 6px; font-size: 15px; }
.guest-demo-privacy p { margin: 0; font-size: 13px; line-height: 1.7; }

.guest-demo-catalog {
  padding: clamp(42px, 7vw, 78px) 0 0;
}

.guest-demo-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #cbdde9;
}

.guest-demo-section-head h2 {
  margin: 3px 0 0;
  color: #163752;
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 34px);
}

.guest-demo-section-head > p {
  margin: 0;
  color: var(--muted);
}

.guest-demo-section-head > p strong { color: var(--accent-dark); }

.guest-demo-message {
  min-height: 28px;
  margin: 14px 0 4px;
  color: #854f0b;
  font-weight: 700;
}

.guest-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.guest-demo-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 19px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.guest-demo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(38, 86, 126, .14);
}

.guest-demo-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11, 107, 183, .12), var(--shadow-soft);
}

.guest-demo-card-select {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  min-height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #b9d2e5;
  border-radius: 999px;
  color: #274b67;
  background: rgba(255, 255, 255, .95);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.guest-demo-card.is-selected .guest-demo-card-select {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.guest-demo-check { display: none; }
.guest-demo-card.is-selected .guest-demo-check { display: inline; }

.guest-demo-thumb {
  aspect-ratio: 4 / 3;
  padding: 12px;
  display: grid;
  place-items: center;
  background: #f4f8fb;
}

.guest-demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.guest-demo-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 16px;
}

.guest-demo-card-body span { color: var(--muted); font-size: 12px; font-weight: 700; }
.guest-demo-card-body strong { overflow: hidden; color: #294b66; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.guest-demo-tray {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(720px, calc(100% - 28px));
  min-height: 76px;
  padding: 12px 14px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(122, 163, 195, .6);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 60px rgba(24, 62, 93, .24);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.guest-demo-tray[hidden] { display: none; }
.guest-demo-tray-count { display: grid; gap: 2px; }
.guest-demo-tray-count span { color: var(--muted); font-size: 12px; }
.guest-demo-tray-count strong { color: #163752; font-size: 19px; }
.guest-demo-tray-actions { display: flex; gap: 9px; }

.guest-demo-dialog {
  width: min(620px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(15, 48, 75, .3);
}

.guest-demo-dialog::backdrop { background: rgba(14, 36, 54, .46); backdrop-filter: blur(4px); }
.guest-demo-dialog-card { position: relative; padding: 34px; }
.guest-demo-dialog-card h2 { margin: 4px 0 24px; font-family: var(--font-display); font-size: 26px; color: #163752; }
.guest-demo-dialog-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #edf4f8; color: #34536a; font-size: 25px; cursor: pointer; }
.guest-demo-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guest-demo-mode { min-height: 190px; padding: 22px; display: grid; align-content: center; justify-items: center; gap: 9px; border: 1px solid #bfd5e6; border-radius: 18px; color: #24465f; background: #f8fcff; font-family: inherit; cursor: pointer; }
.guest-demo-mode:hover, .guest-demo-mode:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.guest-demo-mode-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: #fff; background: var(--accent); font-size: 21px; font-weight: 900; }
.guest-demo-mode-icon.is-grid { background: #477c69; }
.guest-demo-mode strong { font-size: 17px; }
.guest-demo-mode span:last-child { color: var(--muted); font-size: 12px; }
.guest-demo-pdf-status { min-height: 24px; margin: 18px 0 0; color: #385a73; line-height: 1.6; }

.guest-demo-waiting {
  max-width: 620px;
  margin: 70px auto;
  padding: 44px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.guest-demo-waiting > span { display: inline-grid; place-items: center; width: 56px; height: 56px; border: 8px solid #d7e9f4; border-top-color: var(--accent); border-radius: 50%; color: transparent; }
.guest-demo-waiting h2 { margin: 20px 0 8px; color: #163752; font-family: var(--font-display); }
.guest-demo-waiting p { color: var(--muted); }
.guest-demo-waiting .button-row { justify-content: center; }

.guest-demo-footer {
  min-height: 100px;
  padding: 22px 0;
  color: var(--muted);
  border-top: 1px solid #d0e1ec;
}

/* The guest shelf mirrors the signed-in problem library. Only the quiet storage boundary and
   registration invitation are guest-specific; cards, tray, use choice, and review drawer keep
   the same information hierarchy as the member workflow. */
.guest-demo-overview { display: grid; gap: 14px; }
.guest-demo-overview .guest-demo-section-head {
  align-items: flex-start;
  padding: 8px 0 18px;
}
.guest-demo-overview .guest-demo-section-head h1 {
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: clamp(27px, 3.5vw, 38px);
  letter-spacing: -.025em;
}
.guest-demo-overview .problems-intro { margin: 0; }
.guest-demo-limit {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #a9cfe4;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #f2f9fd;
  font-size: 12px;
  font-weight: 850;
}
.guest-demo-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 12px 16px;
  padding: 12px 14px;
  border: 1px solid #c0ded5;
  border-radius: 14px;
  background: #f2faf7;
  color: #285a4c;
}
.guest-demo-notice-mark {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border-radius: 12px;
  color: #fff;
  background: #397b69;
  font-size: 11px;
  font-weight: 900;
}
.guest-demo-notice strong { display: block; font-size: 13px; }
.guest-demo-notice strong span { color: #397b69; }
.guest-demo-notice p { margin: 2px 0 0; font-size: 12px; line-height: 1.55; }
.guest-demo-notice > a {
  color: #17686c;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}
.guest-demo-catalog { padding-top: 30px; }
.guest-demo-catalog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.guest-demo-catalog-head h2,
.guest-demo-catalog-head p { margin: 0; }
.guest-demo-catalog-head h2 { font-size: 20px; }
.guest-demo-catalog-head p { color: var(--muted); font-size: 12px; }
.guest-demo-catalog-head > p strong { color: var(--accent-dark); }
.guest-demo-grid.problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guest-demo-card.problem-card { border-width: 1px; border-radius: var(--radius); }
.guest-demo-card.problem-card:hover { transform: none; }
.guest-demo-card.problem-card.is-selected,
.guest-demo-card.problem-card.is-picked { border-color: var(--accent); }
.guest-demo-card .guest-demo-thumb { aspect-ratio: 16 / 9; padding: 0; }
.guest-demo-card .guest-demo-thumb img { border-radius: 0; }
.guest-demo-card .guest-demo-card-body {
  display: grid;
  align-items: initial;
  justify-content: initial;
  padding: 12px;
}
.guest-demo-card .card-summary { align-items: flex-start; }
.guest-demo-card .card-category-title { font-size: var(--fs-sm); }
.guest-demo-card .card-context { margin-left: auto; white-space: nowrap; }
.guest-demo-card .guest-demo-card-select {
  position: static;
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  justify-content: center;
  border-radius: var(--button-radius);
  box-shadow: none;
}
.guest-demo-card.is-selected .guest-demo-card-select,
.guest-demo-card.is-picked .guest-demo-card-select { color: #fff; border-color: var(--accent); background: var(--accent); }
@keyframes guestTrayIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.guest-demo-tray.study-selection-tray {
  z-index: 60;
  width: min(1120px, calc(100vw - 36px));
  min-height: 0;
  padding: 12px 14px 12px 18px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 12px 20px;
  border-radius: var(--radius-lg);
  transform: translateX(-50%);
  animation: guestTrayIn .22s ease-out;
}
.guest-demo-tray .print-tray-clear {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.guest-demo-tray .print-tray-thumb button { min-width: 44px; min-height: 44px; top: 1px; right: 1px; }
.guest-demo-use-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
}
.guest-demo-use-dialog .paper-mode-dialog-head h2 { padding-top: 7px; }
.guest-demo-dialog .guest-demo-mode-grid { align-items: stretch; }
.guest-demo-dialog .guest-demo-mode {
  min-height: 112px;
  padding: 16px;
  align-content: initial;
  justify-items: initial;
}
.guest-demo-dialog .guest-demo-mode span:last-child { display: grid; }
.guest-demo-selection-foot {
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(160px, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.guest-demo-selection-foot .button { min-height: 44px; justify-content: center; }
.guest-demo-selection-order { cursor: default; font-size: 15px; font-weight: 900; text-align: center; }
.guest-demo-selection-item .drawer-item-remove { width: 44px; height: 44px; font-size: 20px; }
.guest-demo-selection-empty { padding: 18px; text-align: center; }

@media (min-width: 1280px) {
  .guest-demo-grid.problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .guest-demo-notice { grid-template-columns: auto minmax(0, 1fr); }
  .guest-demo-notice > a { grid-column: 2; }
  .guest-demo-grid.problem-grid { grid-template-columns: minmax(0, 1fr); }
  .guest-demo-tray.study-selection-tray {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
  }
  .guest-demo-tray .print-tray-actions {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .guest-demo-shell { padding-top: 14px; }
  .guest-demo-overview .guest-demo-section-head { display: flex; }
  .guest-demo-overview .guest-demo-section-head > div { min-width: 0; }
  .guest-demo-notice { grid-template-columns: auto minmax(0, 1fr); }
  .guest-demo-notice > a { grid-column: 1 / -1; }
  .guest-demo-catalog-head { align-items: flex-start; }
  .guest-demo-tray.study-selection-tray {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .guest-demo-tray .print-tray-thumbs { display: none; }
  .guest-demo-tray .print-tray-actions { display: grid; }
  .guest-demo-tray.study-selection-tray .print-tray-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guest-demo-tray.study-selection-tray .study-selection-review {
    grid-column: 1;
    grid-row: 1;
  }
  .guest-demo-tray.study-selection-tray .study-selection-start {
    grid-column: 2;
    grid-row: 1;
  }
  .guest-demo-tray .print-tray-actions .button { min-height: 48px; white-space: normal; }
  .guest-demo-selection-foot { grid-template-columns: 1fr; }
  .guest-demo-use-dialog .study-use-options { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .guest-demo-overview .guest-demo-section-head h1 { font-size: 25px; }
  .guest-demo-limit { padding-inline: 9px; }
  .guest-demo-notice { padding: 10px; gap: 10px; }
  .guest-demo-card .card-summary { display: grid; }
  .guest-demo-card .card-context { margin-left: 0; }
  .guest-demo-selection-item { grid-template-columns: 44px 48px minmax(0, 1fr) 44px; gap: 5px; }
  .guest-demo-selection-item img { width: 48px; height: 48px; }
}

/* Guest pen mode intentionally reuses the member study workspace below. These rules only cover
   its browser-local recording indicator, image decoder, and gentle public-image fallback. */
.guest-study-body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #eaf3f8;
  font-family: var(--font);
  overscroll-behavior: none;
}

.study-workspace.guest-study {
  height: 100vh;
  height: var(--guest-study-viewport-height, 100dvh);
  min-height: 0;
  grid-template-rows: 44px 3px minmax(0, 1fr);
}

.guest-study-progress span { transition: width .22s ease; }
.guest-study-page-scroll { scrollbar-width: none; }
.guest-study-page-scroll::-webkit-scrollbar { display: none; }

.guest-study-problem-surface,
.guest-study-answer-surface {
  overflow: hidden;
  background-color: #fff;
}

.guest-study-problem-image-loader { display: none !important; }
.guest-study-problem-image { z-index: 1; }

.guest-study-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  place-items: center;
  gap: 10px;
  color: #506674;
  background: rgba(250, 252, 252, .97);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.guest-study-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid #d8e5eb;
  border-top-color: #1674ad;
  border-radius: 50%;
  animation: guest-study-spin .72s linear infinite;
}
.guest-study-loading[hidden] { display: none; }

.guest-study-image-retry {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: var(--muted);
  background: rgba(250, 252, 252, .97);
  text-align: center;
}
.guest-study-image-retry[hidden] { display: none; }
.guest-study-image-retry p { margin: 0; font-size: 13px; font-weight: 800; }
.guest-study-image-retry .button {
  min-width: 144px;
  min-height: 44px;
  justify-content: center;
}

.study-workspace.guest-study .guest-study-tab-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.study-workspace.guest-study .guest-study-save-indicator {
  min-height: 44px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  border: 1px solid #c8d8d8;
  border-radius: 8px;
  background: #eaf7f5;
  color: #176c6d;
  font-size: 11px;
  font-weight: 800;
}
.study-workspace.guest-study .guest-study-save-indicator strong {
  color: #0f7474;
  font-size: 10px;
  letter-spacing: .04em;
}
.study-workspace.guest-study .guest-study-tab-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-workspace.guest-study .guest-study-toolbar > select,
.study-workspace.guest-study .guest-study-toolbar > button { min-height: 44px; }
.study-workspace.guest-study .flash-zoom-button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

@keyframes guest-study-spin { to { transform: rotate(360deg); } }

/* Guest grading reuses the member grading hierarchy while all artifacts and results stay in-tab. */
.guest-grading-body { min-width: 320px; }
.guest-grading-app-header { min-height: 66px; }
.guest-grading-shell {
  max-width: 1040px;
  padding-top: 18px;
}
.guest-grading-head {
  position: static;
  padding: 8px 0 18px;
  border: 0;
  border-bottom: 1px solid #cbdde9;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.guest-grading-head h1 {
  margin: 3px 0 7px;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(27px, 3.5vw, 38px);
  letter-spacing: -.025em;
}
.guest-grading-head > div > p:last-child { max-width: 48rem; margin: 0; }
.guest-session-chip,
.guest-grade-state {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #bcd8d3;
  border-radius: 999px;
  color: #27685e;
  background: #eff9f6;
  font-size: 12px;
  font-weight: 850;
}
.guest-grading-toolbar { margin-top: 14px; }
.guest-grading-list { display: grid; gap: 18px; }
.guest-grading-card { overflow: visible; }
.guest-grading-card[hidden] { display: none; }
.guest-grading-card[data-result="correct"] { border-color: #8ebfa4; }
.guest-grading-card[data-result="retry"],
.guest-grading-card[data-result="wrong"] { border-color: #d6ae61; }
.guest-grading-card[data-result="skipped"] { border-color: #b8c3d2; }
.guest-grading-card[data-result="correct"] .guest-grade-state {
  border-color: #a9d8bc;
  color: #19633a;
  background: #edf9f2;
}
.guest-grading-card[data-result="retry"] .guest-grade-state,
.guest-grading-card[data-result="wrong"] .guest-grade-state {
  border-color: #e4c987;
  color: #76510a;
  background: #fff8e7;
}
.guest-grading-card[data-result="skipped"] .guest-grade-state {
  border-color: #cfd7e2;
  color: #5e6b7d;
  background: #f5f7fa;
}
.guest-grading-preview-pages { gap: 16px; }
.guest-artifact-page { background: #f5f8fa; }
.guest-artifact-preview {
  min-height: 0;
  margin: 8px 0 0;
  overflow: hidden;
  border-radius: 0;
  background: #eaf3f8;
}
.guest-artifact-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.guest-artifact-stage.is-answer-page {
  background: #fff;
}
.guest-artifact-stage > img {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.guest-saved-ink-canvas,
.guest-artifact-stage > .study-red-pen-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.guest-saved-ink-canvas {
  z-index: 2;
  pointer-events: none;
}
.guest-artifact-stage > .study-red-pen-canvas { z-index: 3; }
.guest-red-pen { margin: 0; }
.guest-red-pen .study-red-pen-toolbar {
  margin: 10px;
  background: #fff;
}
.guest-answer-panel {
  margin-top: 10px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  border-radius: 8px 12px 12px 8px;
  background: #f2f8fc;
}
.guest-answer-panel p { margin: 0 0 8px; color: var(--muted); }
.guest-answer-panel ol { margin: 0; padding-left: 25px; color: #173c58; font-size: 18px; font-weight: 900; }
.guest-grade-actions button { cursor: pointer; color: #294b66; font-family: inherit; font-weight: 800; }
.guest-grade-actions button[aria-pressed="true"] {
  color: #fff;
  border-color: #23658f;
  background: #23658f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
}
.guest-grading-filter-empty[hidden],
.guest-grading-summary[hidden] { display: none; }
.guest-grading-summary {
  align-items: flex-end;
  margin-top: 24px;
  border: 1px solid #a8cce1;
  background: #f4faff;
}
.guest-grading-summary h2 { margin: 3px 0 14px; color: #173c58; font-size: 22px; }
.guest-grading-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.guest-grading-summary dl div { padding: 12px 14px; border-radius: 12px; background: #fff; }
.guest-grading-summary dt { color: var(--muted); font-size: 12px; }
.guest-grading-summary dd { margin: 3px 0 0; color: #174e73; font-size: 21px; font-weight: 900; }
.guest-grading-summary .button-row { flex: 0 0 auto; }

@media (max-width: 900px) {
  .guest-demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guest-demo-hero { grid-template-columns: 1fr; gap: 28px; }
  .guest-demo-privacy { max-width: 540px; }
}

@media (max-width: 680px) {
  .guest-demo-header,
  .guest-demo-footer,
  .guest-demo-shell,
  .guest-grading-shell { width: min(1180px, calc(100% - 24px)); }
  .guest-demo-header { min-height: 66px; }
  .guest-demo-header nav { gap: 10px; }
  .guest-demo-header nav .button { min-height: 44px; padding-inline: 13px; }
  .guest-demo-hero { padding: 28px 22px; border-radius: 24px; }
  .guest-demo-hero h1 { font-size: clamp(32px, 10vw, 44px); }
  .guest-demo-steps { gap: 6px; }
  .guest-demo-steps li { padding-right: 9px; font-size: 12px; }
  .guest-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .guest-demo-section-head { display: grid; gap: 8px; }
  .guest-demo-card-select { top: 7px; right: 7px; min-height: 44px; padding: 0 10px; font-size: 12px; }
  .guest-demo-thumb { padding: 7px; }
  .guest-demo-card-body { display: grid; gap: 3px; padding: 11px; }
  .guest-demo-tray { padding: 10px 10px 10px 14px; }
  .guest-demo-tray-actions .button { min-height: 48px; padding-inline: 13px; }
  .guest-demo-mode-grid { grid-template-columns: 1fr; }
  .guest-demo-dialog-card { padding: 28px 20px; }
  .guest-demo-footer { align-items: flex-start; }
  .guest-demo-footer nav { display: grid; gap: 8px; }
  .guest-grading-head { padding: 6px 0 16px; }
  .guest-session-chip { align-self: flex-start; }
  .guest-grading-card { padding: 14px; }
  .guest-red-pen .study-red-pen-toolbar { margin: 7px; }
  .guest-grade-actions { grid-template-columns: 1fr 1fr; }
  .guest-grading-summary { align-items: stretch; }
  .guest-grading-summary .button-row { width: 100%; }
  .guest-grading-summary .button { flex: 1 1 180px; justify-content: center; }
  .guest-grading-summary dl { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .study-workspace.guest-study .guest-study-tab-state {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow: hidden;
  }
  .study-workspace.guest-study .guest-study-save-indicator { flex: 0 0 auto; }
  .study-workspace.guest-study .guest-study-tab-note {
    flex: 1 1 auto;
    text-align: left;
  }
  .study-workspace.guest-study .guest-study-toolbar > select,
  .study-workspace.guest-study .guest-study-toolbar > button {
    width: 100%;
    min-width: 0;
    padding-inline: 3px;
    white-space: normal;
  }
  .guest-grading-shell { width: calc(100% - 16px); }
  .guest-grading-card { padding: 10px; border-radius: 14px; }
  .guest-grading-head h1 { font-size: 27px; }
  .guest-artifact-page { border-radius: 10px; }
  .guest-red-pen .study-red-pen-toolbar { margin: 5px; padding: 7px; }
  .guest-red-pen .study-red-pen-toolbar button { padding-inline: 8px; }
  .guest-answer-panel { padding: 14px; }
  .guest-grading-summary .button-row { display: grid; }
  .guest-grading-summary .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .guest-demo-card,
  .guest-study-progress span { transition: none; }
  .guest-demo-card,
  .guest-demo-tray { animation: none; }
  .guest-demo-selection-drawer .print-drawer-scrim,
  .guest-demo-selection-drawer .print-drawer-panel { transition: none; }
  .guest-demo-card:hover { transform: none; }
  .guest-study-loading span { animation: none; }
}

/* Email-only contact: a calm correspondence desk, with examples that remain easy to scan. */
.contact-layout {
  width: min(700px, calc(100vw - 32px));
  align-content: start;
}
.contact-layout .auth-panel { max-width: 700px; }
.contact-destination {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #f4faff 0%, #fff 72%);
}
.contact-destination::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -58px;
  width: 132px;
  height: 132px;
  border: 22px solid rgba(11, 107, 183, .05);
  border-radius: 50%;
  pointer-events: none;
}
.contact-destination-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 107, 183, .18);
}
.contact-destination-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.contact-destination-label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.contact-address {
  position: relative;
  z-index: 1;
  color: var(--accent-dark);
  font-size: clamp(14px, 2.5vw, 17px);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-address:focus-visible,
.contact-example-link:focus-visible { outline: 3px solid rgba(38, 130, 205, .24); outline-offset: 3px; }
.contact-destination-note {
  position: relative;
  z-index: 1;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.contact-mail-button {
  min-height: 48px;
  margin-top: var(--space-4);
}
.contact-mail-button span { margin-left: 6px; }
.contact-mail-fallback {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-align: center;
}
.contact-examples {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.contact-examples-heading { margin-bottom: var(--space-4); }
.contact-examples-heading .eyebrow { margin-bottom: 3px; }
.contact-examples-heading h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.4;
}
.contact-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.contact-example-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.contact-example-card-feature {
  border-top-color: #397b69;
  background: linear-gradient(180deg, #f5fbf8, #fff);
}
.contact-example-kind {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.contact-example-card dl,
.contact-example-card dd { margin: 0; }
.contact-example-card dl { display: grid; gap: var(--space-3); }
.contact-example-card dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
}
.contact-example-subject,
.contact-example-body {
  padding: 10px 11px;
  border: 1px solid rgba(184, 217, 239, .75);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.contact-example-body { white-space: pre-line; }
.contact-example-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.contact-privacy-note {
  margin-top: var(--space-4);
  padding: 12px 14px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #fffaf0;
}
.contact-privacy-note strong { color: #70490c; font-size: var(--fs-xs); }
.contact-privacy-note p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: 1.65;
}
@media (max-width: 600px) {
  .contact-layout { width: min(100% - 24px, 700px); padding-top: 28px; }
  .contact-layout .auth-panel { padding: 20px 16px; }
  .contact-example-grid { grid-template-columns: 1fr; }
  .contact-destination { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 14px; }
  .contact-destination-icon { width: 40px; height: 40px; border-radius: 12px; }
  .contact-destination-icon svg { width: 22px; height: 22px; }
}
.legal-document-links { display: grid; gap: 8px; margin: 2px 0 8px; }
.legal-document-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(22, 117, 190, .35);
  border-radius: 10px;
  background: #f4faff;
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-document-link:hover { border-color: var(--accent); background: #eaf6ff; color: var(--accent); }
.legal-document-link:focus-visible { outline: 3px solid rgba(38, 130, 205, .24); outline-offset: 2px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.check-row input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.support-inbox { display: grid; gap: 1rem; }
.support-request { border: 1px solid var(--line); border-radius: 14px; padding: 1rem; background: #fff; }
.support-request > header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.support-request > header div { display: grid; gap: .2rem; }
.support-message { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Digital flash review ────────────────────────────────────────────────
   The normal app stays a calm paper workflow. During a flash session the chrome recedes and the
   worksheet becomes a centered reading surface: large enough to read, never stretched to a 4K
   display, with the two decisions kept close to the image on desktop and thumb-reachable mobile. */

.flash-landing,
.flash-summary {
  width: min(880px, 100%);
  margin: 0 auto;
}
.flash-landing-head,
.flash-summary-head {
  max-width: 680px;
  margin-bottom: 28px;
}
.flash-landing-head h1,
.flash-summary-head h1 { margin-bottom: 8px; }
.flash-landing-head > p:last-child,
.flash-summary-head > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.75;
}
.flash-start-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.flash-start-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}
.flash-start-card--resume::before { background: var(--amber); }
.flash-start-card--done::before { background: var(--ok); }
.flash-start-card--empty,
.flash-start-card--resume,
.flash-start-card--done { grid-template-columns: minmax(0, 1fr) auto; }
.flash-start-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 92px;
  color: var(--accent-dark);
}
.flash-start-count strong {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 66px);
  line-height: .9;
  letter-spacing: -.06em;
}
.flash-start-count span { font-weight: 900; }
.flash-start-copy { min-width: 0; }
.flash-start-kicker {
  margin: 0 0 3px;
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
}
.flash-start-card h2,
.flash-second-result h2 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 25px); }
.flash-start-card p:not(.flash-start-kicker) { margin: 0; color: var(--muted); }
.flash-start-actions {
  display: grid;
  gap: 8px;
}
.flash-start-actions form { margin: 0; }
.flash-start-button {
  width: 100%;
  min-width: 220px;
  justify-content: center;
}
.flash-home-actions form { margin: 0; }
.flash-howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.flash-howto > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .74);
}
.flash-howto-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}
.flash-howto p { display: grid; gap: 3px; margin: 0; }
.flash-howto strong { color: var(--ink); font-size: var(--fs-sm); }
.flash-howto p span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.flash-setting-link { margin: 14px 2px 0; text-align: right; }

.flash-focus-body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.96), transparent 54%),
    #eaf3f8;
}
.flash-focus-page {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}
.flash-study {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px 3px minmax(0, 1fr);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.flash-study-head {
  width: min(1240px, calc(100% - 24px));
  min-height: 44px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.flash-study-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.flash-exit-link {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
}
.flash-exit-link:hover { color: var(--accent-dark); text-decoration: underline; }
.flash-progress-copy {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  white-space: nowrap;
}
.flash-progress-copy span { font-size: var(--fs-xs); font-weight: 800; }
.flash-progress-copy strong { color: var(--ink); font-family: var(--font-display); font-size: 16px; }
.flash-progress-track { width: 100%; height: 3px; overflow: hidden; background: #d9e7ef; }
.flash-progress-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); transition: width .22s ease; }
.flash-problem-identifiers {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.flash-problem-identifiers span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.flash-problem-identifiers span + span::before { content: "·"; margin-right: 10px; color: var(--line-strong); }
.flash-study-reminder {
  margin: 0;
  color: var(--danger);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 900;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
}
.flash-problem-stage {
  position: relative;
  width: min(1240px, calc(100% - 24px));
  min-height: 0;
  height: calc(100% - 8px);
  margin: 0 auto 8px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #c9dbe5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(38, 74, 101, .11);
}
.study-previous-result {
  min-width: 0;
  max-width: 160px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.study-previous-result [data-study-previous-result] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.study-page-viewport {
  --study-page-scrollbar-hit-width: 24px;
  --study-page-scrollbar-thumb-width: 10px;
  --study-page-scrollbar-gutter-width: 12px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.study-page-viewport > [data-flash-image-scroll] {
  width: 100%;
  height: 100%;
  padding-right: 0;
  padding-left: var(--study-page-scrollbar-gutter-width);
  box-sizing: border-box;
  overflow-x: hidden;
  scrollbar-width: none;
}
.study-page-viewport > [data-flash-image-scroll]::-webkit-scrollbar { display: none; }
.study-page-viewport > [data-flash-image-scroll].is-zoomed {
  overflow: auto;
}
@supports selector(::-webkit-scrollbar) {
  .study-page-viewport > [data-flash-image-scroll].is-zoomed {
    scrollbar-width: auto;
  }
  .study-page-viewport > [data-flash-image-scroll].is-zoomed::-webkit-scrollbar {
    display: block;
    width: 0;
    height: 7px;
  }
}
.study-page-scrollbar {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: auto;
  bottom: 8px;
  left: 0;
  width: var(--study-page-scrollbar-hit-width);
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0 2px,
    rgba(41, 101, 137, .2) 2px 8px,
    transparent 8px
  );
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.study-page-scrollbar[hidden] { display: none; }
.study-page-scrollbar:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: -2px;
}
.study-page-scrollbar.is-dragging { cursor: grabbing; }
.study-page-scrollbar-thumb {
  display: block;
  width: var(--study-page-scrollbar-thumb-width);
  min-height: 44px;
  margin-left: 0;
  margin-right: auto;
  border-radius: inherit;
  background: rgba(29, 89, 126, .76);
  box-shadow: 0 1px 3px rgba(17, 55, 79, .18);
  transform: translate3d(0, 0, 0);
  will-change: height, transform;
}
.study-page-viewport[data-handedness="left"] > [data-flash-image-scroll] {
  padding-right: var(--study-page-scrollbar-gutter-width);
  padding-left: 0;
}
.study-page-viewport[data-handedness="left"] .study-page-scrollbar {
  right: 0;
  left: auto;
  background: linear-gradient(
    90deg,
    transparent 0 calc(100% - 8px),
    rgba(41, 101, 137, .2) calc(100% - 8px) calc(100% - 2px),
    transparent calc(100% - 2px)
  );
}
.study-page-viewport[data-handedness="left"] .study-page-scrollbar-thumb {
  margin-right: 0;
  margin-left: auto;
}
.study-page-scrollbar:hover .study-page-scrollbar-thumb,
.study-page-scrollbar:focus-visible .study-page-scrollbar-thumb {
  background: var(--accent);
}
.study-page-scrollbar.is-dragging .study-page-scrollbar-thumb {
  background: var(--accent-dark);
}
@media (pointer: coarse) {
  .study-page-viewport {
    --study-page-scrollbar-hit-width: 28px;
    --study-page-scrollbar-thumb-width: 12px;
    --study-page-scrollbar-gutter-width: 14px;
  }
}
@media (forced-colors: active) {
  .study-page-scrollbar {
    border-right: 0;
    border-left: 2px solid CanvasText;
    background: transparent;
  }
  .study-page-viewport[data-handedness="left"] .study-page-scrollbar {
    border-right: 2px solid CanvasText;
    border-left: 0;
    background: transparent;
  }
  .study-page-scrollbar-thumb { background: Highlight; }
}
.flash-image-scroll {
  min-height: 0;
  max-height: none;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.flash-image-scroll.is-zoomed { display: block; }
.study-page-stack {
  min-width: 100%;
  width: max-content;
  /* 書き込み面の高さはscroll viewportの高さそのままで決まり、この余白は計算に入らない。余白を残すと
     カードがviewportより高くなって毎回スクロールが要る。0にしてページが1画面へちょうど収まるように
     する。ページ間の間隔はgapが持つ。 */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
}
.study-page-stack[hidden] { display: none; }
.study-drawing-page {
  flex: 0 0 auto;
  max-width: none;
  border: 1px solid #c9dbe5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(38, 74, 101, .11);
  overflow: hidden;
  box-sizing: content-box;
}
.study-drawing-page.is-active {
  border-color: #6ba8c9;
  box-shadow: 0 0 0 3px rgba(38, 128, 177, .14), 0 12px 32px rgba(38, 74, 101, .13);
}
/* 会員の画面学習ではページ上の帯を廃止し、ページ操作をツール列の右端（`.study-tool-pages`）へ移した。
   帯は45pxを占め、その下に問題画像の余白も入って、方眼も書き込みも入らない帯が解答スペースを削って
   いたため。以下の帯のスタイルはゲスト体験版（`guest_study.html`）が今も使うので残す。 */
.study-page-head {
  min-height: 44px;
  padding: 0 8px 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #f5f8fa;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}
.study-page-title {
  flex: 0 0 auto;
  white-space: nowrap;
}
.study-page-head-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.study-tool-pages {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.study-page-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}
.study-page-action {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--accent-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.study-page-action:disabled { cursor: not-allowed; opacity: .48; }
.study-page-action:focus-visible {
  outline: 3px solid rgba(38, 128, 177, .28);
  outline-offset: 1px;
}
.study-page-add {
  border-color: #9bc8dc;
  background: #eef8fc;
}
.study-page-delete { color: var(--danger); }
.study-drawing-page.is-answer-page .flash-draw-surface { background: #fff; }
/* PDF答案モードと同じ点線方眼を書き込み面に敷く。1タイルは方眼1マス幅×点の間隔で、縦線と横線を
   それぞれの転置タイルとして重ねる。stripeのgradientは重ね合わせが乗算ではないため点線にできない
   が、tileしたradial-gradientなら点線になる。
   専用レイヤーにしているのは、問題ページでは問題画像より下だけに方眼を出すため。`top`はJSが
   画像の下端の割合で書き、解答用紙は0%になる。DOM上で最初の子なので、後に来る問題画像とインクの
   canvasより必ず下に描かれ、保存画像の合成順序（方眼→問題画像→インク）と一致する。 */
.study-workspace .study-drawing-page .flash-draw-surface { background-color: #fff; }
.study-workspace .study-grid-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at .75px .75px, rgba(88, 115, 132, .78) .75px, transparent 1px),
    radial-gradient(circle at .75px .75px, rgba(88, 115, 132, .78) .75px, transparent 1px);
  background-size:
    var(--study-grid-pitch, 36px) calc(var(--study-grid-pitch, 36px) / 10),
    calc(var(--study-grid-pitch, 36px) / 10) var(--study-grid-pitch, 36px);
  background-repeat: repeat, repeat;
}
.study-workspace[data-study-grid="none"] .study-grid-layer { background-image: none; }
.flash-draw-surface {
  position: relative;
  flex: 0 0 auto;
  max-width: none;
  margin: auto;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.flash-problem-image-loader {
  display: none !important;
}
.flash-problem-image {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  transform: translateX(-50%);
}
.flash-draw-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.flash-draw-canvas:active { cursor: crosshair; }
.flash-draw-surface.is-gesturing .flash-draw-canvas {
  cursor: grabbing;
}
.flash-image-missing {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}
.flash-image-missing p { margin: 0 0 14px; }
.flash-image-missing .button { min-height: 44px; }
.flash-stage-tools {
  min-height: 42px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* ページ操作を右端へ足したので、狭い画面では折り返さず左右スクロールで届かせる。 */
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.flash-record-tools {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.flash-auto-save-toggle,
.flash-drawing-save,
.flash-drawing-history {
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.flash-auto-save-toggle {
  border: 1px solid #c8d8d8;
  background: #fff;
  color: #536869;
}
.flash-auto-save-toggle strong {
  color: #6f7f80;
  font-size: 10px;
  letter-spacing: .04em;
}
.flash-auto-save-toggle[aria-pressed="true"] {
  border-color: #5ca7a3;
  background: #eaf7f5;
  color: #176c6d;
}
.flash-auto-save-toggle[aria-pressed="true"] strong { color: #0f7474; }
.flash-auto-save-toggle:disabled { cursor: wait; opacity: .64; }
.flash-auto-save-toggle:hover:not(:disabled),
.flash-drawing-save:hover:not(:disabled),
.flash-drawing-history:hover { background: #fff; }
.flash-drawing-save:disabled { color: var(--muted); cursor: default; opacity: .64; }
.flash-drawing-save [data-flash-save-busy],
.flash-drawing-save [data-flash-save-done] { display: none; }
.flash-drawing-save[data-state="busy"] [data-flash-save-default],
.flash-drawing-save[data-state="saved"] [data-flash-save-default] { display: none; }
.flash-drawing-save[data-state="busy"] [data-flash-save-busy],
.flash-drawing-save[data-state="saved"] [data-flash-save-done] { display: inline; }
.flash-tool-compact { display: none; }
.flash-history-count {
  min-width: 17px;
  height: 17px;
  margin-left: 3px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10px;
  line-height: 1;
}
.flash-history-count[hidden] { display: none; }
.flash-draw-tool {
  min-height: 32px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.flash-draw-tool:hover:not(:disabled) { background: #fff; color: var(--accent-dark); }
.flash-draw-tool:disabled { opacity: .4; cursor: not-allowed; }
.flash-remove-button {
  min-height: 32px;
  margin-right: 0;
  padding: 5px 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.flash-remove-button:hover:not(:disabled) { background: #fff; }
.flash-remove-button:disabled { color: var(--muted); cursor: default; opacity: .75; }
.flash-draw-mode {
  min-height: 32px;
  width: 88px;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.flash-draw-canvas.is-erasing { cursor: cell; }
.flash-zoom-button {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.flash-zoom-button:hover { background: var(--accent-soft); }
.flash-decision {
  position: absolute;
  right: 14px;
  bottom: 50px;
  left: 14px;
  z-index: 8;
  width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.flash-navigation {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.flash-previous-button {
  min-width: 142px;
  min-height: 48px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 7px 20px rgba(38, 74, 101, .14);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.flash-previous-button strong { font-size: 15px; }
.flash-previous-button span { color: var(--muted); font-size: 13px; font-weight: 800; }
.flash-previous-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); }
.flash-previous-button:disabled { opacity: .42; cursor: not-allowed; }
.flash-next-button {
  width: auto;
  min-width: 172px;
  min-height: 50px;
  padding: 8px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 9px 24px rgba(11, 107, 183, .24);
  pointer-events: auto;
}
.flash-next-button strong { font-size: 18px; }
.flash-next-button span { opacity: .78; font-size: 14px; font-weight: 800; }
.flash-next-button:hover:not(:disabled) {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.flash-next-button:disabled { opacity: .55; cursor: wait; }
.flash-decision-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flash-answer {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  font-family: inherit;
}
.flash-answer strong { font-size: 18px; }
.flash-answer span { opacity: .72; font-size: 11px; font-weight: 700; }
.flash-answer--recalled {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 107, 183, .22);
}
.flash-answer--recalled:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); }
.flash-answer--missed { border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); }
.flash-answer--missed:hover:not(:disabled) { border-color: var(--muted); background: var(--surface-soft); transform: translateY(-1px); }
.flash-answer:disabled { opacity: .55; cursor: wait; }
.flash-save-status {
  width: max-content;
  max-width: calc(100% - 360px);
  min-height: 0;
  margin: 6px auto 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
  backdrop-filter: blur(8px);
}
.flash-save-status:empty { display: none; }
.flash-history-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: min(82dvh, 860px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(26, 53, 76, .28);
}
.flash-history-dialog::backdrop {
  background: rgba(17, 34, 50, .42);
  backdrop-filter: blur(3px);
}
.flash-history-panel {
  max-height: min(82dvh, 860px);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.flash-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.flash-history-head p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.flash-history-head h2 { margin: 0; font-size: 22px; }
.flash-history-close {
  min-height: 36px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}
.flash-history-note {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 12px;
}
.flash-history-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
}
.flash-history-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.flash-history-card-head {
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.flash-history-card-head strong {
  color: var(--accent-dark);
  font-size: 11px;
}
.flash-history-card-head time {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.flash-history-card img {
  width: 100%;
  height: auto;
  display: block;
  border-top: 1px solid var(--line);
  background: #fff;
}
.flash-history-image-button {
  width: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  cursor: zoom-in;
}
.flash-history-image-button:not(:disabled):hover img {
  transform: scale(1.012);
}
.flash-history-image-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.flash-history-image-button img { transition: transform .16s ease; }
.flash-history-image-button:disabled { cursor: wait; }
.flash-history-card img.is-missing { min-height: 120px; }
.flash-history-empty,
.flash-history-message {
  margin: 0;
  padding: 34px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.flash-history-empty[hidden] { display: none; }
.flash-history-message:empty { display: none; }
.flash-history-review-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #e9f0f4;
  color: var(--ink);
}
.flash-history-review-dialog::backdrop { background: #e9f0f4; }
.flash-history-review-panel {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) auto;
}
.flash-history-review-head {
  min-width: 0;
  padding: 6px 12px 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #c9d8e1;
  background: rgba(255, 255, 255, .94);
}
.flash-history-review-head h2 {
  margin: 0;
  font-size: 15px;
}
.flash-history-review-head p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.flash-history-review-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flash-history-review-close,
.flash-history-review-delete {
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.flash-history-review-delete {
  border-color: #e0b4ae;
  color: var(--danger);
}
.flash-history-review-delete:not(:disabled):hover {
  background: var(--danger-soft);
}
.flash-history-review-close:disabled,
.flash-history-review-delete:disabled {
  cursor: wait;
  opacity: .58;
}
.flash-history-review-viewport {
  min-height: 0;
  padding: 10px;
  display: grid;
  place-items: center;
  overflow: auto;
}
.flash-history-review-pages {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.flash-history-review-sheet {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 38px rgba(22, 48, 68, .17);
  line-height: 0;
}
.flash-history-review-sheet img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.flash-history-review-sheet canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.flash-history-review-sheet canvas.is-erasing { cursor: cell; }
.flash-history-review-extra-pages {
  width: min(100%, 1100px);
  display: grid;
  gap: 14px;
}
.flash-history-review-extra-page {
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 38px rgba(22, 48, 68, .17);
}
.flash-history-review-extra-page img {
  display: block;
  width: 100%;
  height: auto;
}
.flash-history-review-tools {
  min-height: 48px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  border-top: 1px solid #c9d8e1;
  background: rgba(255, 255, 255, .96);
}
.flash-history-review-tools p {
  margin: 0 auto 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.flash-history-review-tools p[data-state="error"] { color: var(--danger); }
.flash-history-review-tools select,
.flash-history-review-tools button {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}
.flash-history-review-tools select { padding-right: 24px; }
.flash-history-review-tools button:disabled { opacity: .4; cursor: not-allowed; }
.flash-study.is-controls-idle .flash-decision {
  opacity: .22;
  transform: translateY(4px);
}
.flash-study.is-controls-idle .flash-decision:hover,
.flash-study.is-controls-idle .flash-decision:focus-within {
  opacity: 1;
  transform: none;
}
.flash-noscript { max-width: 600px; margin: 12px auto; padding: 12px; background: var(--danger-soft); color: var(--danger); }

.flash-study.is-finished {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr;
  background:
    radial-gradient(circle at 50% 20%, rgba(77, 130, 178, .24), transparent 34%),
    linear-gradient(160deg, #172b43 0%, #0d1b2c 100%);
}
.flash-study.is-finished .flash-study-head,
.flash-study.is-finished .flash-progress-track { display: none; }
.flash-finish[hidden] { display: none; }
.flash-finish {
  width: min(760px, calc(100% - 40px));
  margin: auto;
  padding: clamp(36px, 7vw, 72px);
  display: grid;
  justify-items: center;
  color: #f7fbff;
  text-align: center;
}
.flash-finish-mark {
  width: 88px;
  height: 64px;
  margin-bottom: 28px;
  position: relative;
  border: 3px solid #93c9ee;
  border-radius: 9px;
  background: rgba(8, 25, 42, .72);
  box-shadow: 0 0 0 8px rgba(147, 201, 238, .08), 0 22px 50px rgba(0, 0, 0, .26);
}
.flash-finish-mark::before {
  content: "";
  width: 30px;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: -13px;
  border-radius: 999px;
  background: #93c9ee;
  transform: translateX(-50%);
}
.flash-finish-mark span {
  width: 22px;
  height: 22px;
  position: absolute;
  inset: 0;
  margin: auto;
  border: 3px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.flash-finish-kicker {
  margin: 0 0 10px;
  color: #9fd3f4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.flash-finish h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: .01em;
}
.flash-finish > p:not(.flash-finish-kicker) {
  margin: 18px 0 0;
  color: #c5d5e3;
  font-size: clamp(14px, 2vw, 17px);
}
.flash-finish-actions {
  width: min(520px, 100%);
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.flash-finish-actions .button {
  min-height: 54px;
  justify-content: center;
}
.flash-finish-exit {
  border-color: rgba(255, 255, 255, .42);
  background: transparent;
  color: #fff;
}
.flash-finish-exit:hover { border-color: #fff; background: rgba(255, 255, 255, .09); }
.flash-finish-restart { box-shadow: 0 10px 28px rgba(0, 0, 0, .24); }

.flash-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flash-result {
  min-height: 150px;
  padding: 20px;
  display: grid;
  align-content: center;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
}
.flash-result > span { grid-column: 1 / -1; margin-bottom: 3px; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; }
.flash-result strong { font-family: var(--font-display); font-size: 48px; line-height: 1; }
.flash-result small { align-self: end; padding-bottom: 4px; font-weight: 800; }
.flash-result--fast { border-top: 4px solid var(--ok); }
.flash-result--slow { border-top: 4px solid var(--amber); }
.flash-result--missed { border-top: 4px solid var(--muted); }
.flash-second-result,
.flash-paper-nudge {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.flash-second-result { text-align: center; }
.flash-paper-nudge { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.flash-paper-nudge strong { font-size: 16px; }
.flash-paper-nudge p { margin: 3px 0 0; color: var(--muted); }
.flash-summary-primary { margin-top: 20px; }
.flash-summary-primary .button { width: 100%; min-height: 56px; justify-content: center; }
.flash-summary-actions { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.flash-summary-actions form { margin: 0; }

.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-default-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 900; }
.flash-threshold-list { display: grid; gap: 8px; margin-top: 16px; }
.flash-threshold-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 120px auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}
.flash-threshold-row label { color: var(--ink); font-weight: 800; }
.flash-threshold-row select { width: 100%; }
.flash-cycle-settings-row {
  grid-template-columns: minmax(120px, 1fr) auto 96px auto 96px auto;
}
.flash-cycle-settings-row > label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.settings-after-note { margin-bottom: 0; }

@media (max-width: 720px) {
  .flash-start-card,
  .flash-start-card--resume,
  .flash-start-card--done,
  .flash-start-card--empty { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .flash-start-count { min-width: 0; }
  .flash-start-card form,
  .flash-start-actions,
  .flash-start-card .flash-start-button { width: 100%; }
  .flash-start-button { min-width: 0; }
  .flash-howto { grid-template-columns: 1fr; }
  .flash-setting-link { text-align: left; }
  .flash-study { grid-template-rows: 44px 3px minmax(0, 1fr); }
  .flash-study-head {
    width: calc(100% - 16px);
    min-height: 44px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .flash-study-context { gap: 0; }
  .flash-problem-identifiers { display: none; }
  .flash-study-reminder {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }
  .flash-progress-copy { gap: 5px; }
  .flash-progress-copy span { font-size: 10px; }
  .flash-progress-copy strong { font-size: 13px; }
  .flash-problem-stage { width: calc(100% - 12px); min-height: 0; height: calc(100% - 6px); margin-bottom: 6px; border-radius: 14px; }
  .flash-image-scroll { min-height: 0; max-height: none; }
  .flash-stage-tools { padding-right: 4px; padding-left: 5px; gap: 1px; }
  .flash-remove-button { max-width: 64px; padding-right: 3px; padding-left: 3px; font-size: 9px; line-height: 1.05; }
  .flash-record-tools { gap: 0; }
  .flash-auto-save-toggle,
  .flash-drawing-save,
  .flash-drawing-history { padding-right: 4px; padding-left: 4px; font-size: 10px; }
  .flash-tool-wide { display: none; }
  .flash-tool-compact { display: inline; }
  .flash-history-count { min-width: 15px; height: 15px; padding: 0 4px; }
  .flash-draw-mode { width: 76px; padding-right: 17px; padding-left: 5px; font-size: 10px; }
  .flash-draw-tool, .flash-zoom-button { padding-right: 6px; padding-left: 6px; font-size: 10px; }
  .flash-decision {
    position: absolute;
    right: 8px;
    bottom: 48px;
    left: 8px;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .flash-answer { min-height: 60px; flex-direction: column; gap: 0; }
  .flash-answer strong { font-size: 16px; }
  .flash-answer span { display: none; }
  .flash-next-button { min-width: 116px; min-height: 46px; padding: 7px 15px; }
  .flash-next-button strong { font-size: 16px; }
  .flash-navigation { gap: 8px; }
  .flash-previous-button { min-width: 108px; min-height: 44px; padding: 7px 13px; }
  .flash-previous-button strong { font-size: 14px; }
  .flash-save-status { max-width: calc(100% - 240px); font-size: 10px; }
  .flash-history-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  .flash-history-panel { max-height: calc(100dvh - 16px); padding: 16px; }
  .flash-history-list { grid-template-columns: 1fr; }
  .flash-history-card img { max-height: 58dvh; object-fit: contain; }
  .flash-history-review-panel { grid-template-rows: 46px minmax(0, 1fr) auto; }
  .flash-history-review-head { padding-left: 10px; }
  .flash-history-review-actions { gap: 3px; }
  .flash-history-review-close,
  .flash-history-review-delete { padding-right: 7px; padding-left: 7px; font-size: 10px; }
  .flash-history-review-viewport { padding: 4px; }
  .flash-history-review-tools {
    min-height: 44px;
    padding: 5px;
    gap: 2px;
  }
  .flash-history-review-tools p { display: none; }
  .flash-history-review-tools select,
  .flash-history-review-tools button {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 10px;
  }
  .flash-finish { width: min(100% - 24px, 620px); padding: 30px 12px; }
  .flash-finish-actions { grid-template-columns: 1fr; }
  .flash-result-grid { grid-template-columns: 1fr; }
  .flash-result { min-height: 100px; grid-template-columns: auto auto; }
  .flash-paper-nudge { align-items: stretch; flex-direction: column; }
  .flash-paper-nudge .button { width: 100%; justify-content: center; }
  .flash-summary-actions { align-items: stretch; flex-direction: column; }
  .flash-summary-actions .button,
  .flash-summary-actions form { width: 100%; }
  .flash-threshold-row { grid-template-columns: 1fr auto; }
  .flash-threshold-row label { grid-column: 1 / -1; }
  .flash-cycle-settings-row { grid-template-columns: minmax(90px, 1fr) minmax(100px, 1fr); }
  .flash-cycle-settings-row > strong,
  .flash-cycle-settings-row > button { grid-column: 1 / -1; }
  .flash-cycle-settings-row > label { grid-column: auto; }
  .flash-cycle-settings-row > button { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .flash-stage-tools {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    row-gap: 1px;
  }
  .flash-record-tools { margin-right: 0; }
  .flash-draw-mode { margin-left: auto; }
  .flash-decision { bottom: 78px; }
}

/* ── Learner metrics: a quiet ledger, aligned with the paper-first product. ── */
.metrics-page { display: grid; gap: 24px; min-width: 0; max-width: 1120px; margin: 0 auto; }
.metrics-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 10px 2px 4px; }
.metrics-heading h1 { margin-bottom: 6px; }
.metrics-lead { max-width: 620px; margin: 0; color: var(--muted); }
.metrics-total {
  display: flex; align-items: baseline; gap: 5px; min-width: 190px; padding: 18px 20px;
  border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; box-shadow: var(--shadow-subtle);
}
.metrics-total span { margin-right: auto; color: var(--muted); font-size: 13px; font-weight: 800; }
.metrics-total strong { color: var(--accent-dark); font-family: var(--font-display); font-size: 36px; line-height: 1; }
.metrics-total small { color: var(--muted); font-weight: 800; }
.metrics-source-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .72);
}
.metrics-source-bar > p { margin: 0 0 0 4px; color: var(--muted); font-size: 13px; }
.metrics-source-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-rail); }
.metrics-source-tabs a { display: grid; place-items: center; min-height: 40px; padding: 6px 16px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 850; }
.metrics-source-tabs a[aria-current="page"] { background: #fff; color: var(--accent-dark); box-shadow: var(--shadow-subtle); }
.metrics-source-setting { flex: 0 0 auto; }
.metrics-section {
  min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 12px 30px rgba(35, 70, 100, .07);
}
.metrics-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.metrics-section-head h2 { margin: 0; }
.metrics-section-head > p { margin: 0; color: var(--muted); font-size: 13px; }
.metrics-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.metrics-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.metrics-table th, .metrics-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.metrics-table thead th { color: var(--muted); font-size: 12px; font-weight: 850; }
.metrics-table th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: #fff; }
.metrics-table tbody th { color: var(--ink); font-size: 14px; }
.metrics-table td strong { display: block; color: var(--ink); font-size: 17px; }
.metrics-table td span, .metrics-table td small { color: var(--muted); font-size: 11px; font-weight: 700; }
.metrics-table td small { display: block; margin-top: 2px; }
.metrics-table .metric-entered { color: #315c78; }
.metrics-table .metric-correct { color: #17633a; }
.metrics-table .metric-wrong { color: #a13a32; }
.metrics-table .metric-retry { color: #8a5a00; }
.metrics-total-row th, .metrics-total-row td { background: #f2f8fc; }
.metrics-total-row th:first-child { background: #f2f8fc; }
.metrics-total-row th, .metrics-total-row td strong { font-weight: 900; }
.metrics-trend-head { align-items: start; }
.metrics-filter { display: flex; align-items: end; gap: 8px; }
.metrics-filter label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; }
.metrics-filter select { min-width: 190px; min-height: 44px; }
.metrics-periods {
  display: inline-grid; grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: 4px; margin-bottom: 16px;
  padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-rail);
}
.metrics-periods a { display: grid; place-items: center; min-height: 40px; padding: 6px 14px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 800; }
.metrics-periods a[aria-current="page"] { background: #fff; color: var(--accent-dark); box-shadow: var(--shadow-subtle); }
.metrics-chart-card { padding: 18px 18px 8px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fbfdff, #fff); }
.metrics-chart-summary { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.metrics-chart-summary strong { color: var(--ink); }
.metrics-chart-summary span { color: var(--muted); font-size: 12px; }
.metrics-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 8px; padding: 0; list-style: none; }
.metrics-legend li { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.metrics-legend li span { width: 18px; height: 3px; border-radius: 999px; background: currentColor; }
.metrics-legend li.metric-entered { color: #315c78; }
.metrics-legend li.metric-correct { color: #238453; }
.metrics-legend li.metric-wrong { color: #c34b42; }
.metrics-legend li.metric-retry { color: #d18a19; }
.metric-entered { color: #315c78; }
.metric-correct { color: #238453; }
.metric-wrong { color: #c34b42; }
.metric-retry { color: #d18a19; }
.metrics-chart-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
.metrics-chart { display: block; width: 100%; min-width: 680px; height: auto; }
.metrics-grid-line { stroke: #dce6ed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.metrics-y-label, .metrics-x-label { fill: #687b88; font-size: 11px; font-weight: 700; }
.metrics-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.metrics-last-point { fill: #fff; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.metrics-data-table { margin-top: 14px; }
.metrics-data-table > summary { min-height: 44px; display: flex; align-items: center; color: var(--accent-dark); cursor: pointer; font-size: 13px; font-weight: 800; }
.metrics-trend-table { margin-top: 6px; }
.metrics-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.metrics-empty { text-align: center; }
.metrics-empty p { color: var(--muted); }

@media (max-width: 760px) {
  .metrics-page { gap: 16px; }
  .metrics-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .metrics-total { width: 100%; min-width: 0; }
  .metrics-source-bar { align-items: stretch; flex-direction: column; }
  .metrics-source-tabs { width: 100%; }
  .metrics-source-setting, .metrics-source-setting .button { width: 100%; }
  .metrics-section { padding: 18px 14px; border-radius: 16px; }
  .metrics-section-head, .metrics-trend-head { align-items: stretch; flex-direction: column; gap: 10px; }
  .metrics-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .metrics-filter label { min-width: 0; }
  .metrics-filter select { width: 100%; min-width: 0; }
  .metrics-periods { display: grid; width: 100%; }
  .metrics-chart-card { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) { .metrics-line { transition: none; } }

/* ── Digital study pivot: write, save, revisit. Paper remains a quiet secondary tool. ── */
.today-task--study {
  border-color: #93bfd8;
  background:
    linear-gradient(112deg, rgba(235, 247, 252, .96), rgba(255, 255, 255, .98) 66%);
  box-shadow: 0 12px 30px rgba(32, 92, 126, .10);
}
.today-task--study .today-task-kicker {
  background: #dff2f5;
  color: #17686c;
}
.today-task--study .button.primary { min-width: 148px; }
.today-task--paper {
  margin-inline: 12px;
  box-shadow: none;
}
.today-task--welcome { padding-block: clamp(24px, 4vw, 38px); }
.today-paper-tools {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
}
.today-paper-tools > summary {
  min-height: 48px;
  padding-inline: 14px;
}
.today-paper-tools > p,
.today-paper-tools > .button-row {
  margin-inline: 14px;
}

.card-study-start {
  min-width: 92px;
  min-height: 44px;
  justify-content: center;
}
.catalog-card .card-pick,
.catalog-card .card-exclusion,
.catalog-card .card-bookmark,
.catalog-card .card-edit-menu,
.catalog-card .card-answer-register {
  min-height: 44px;
}
.catalog-card .card-bookmark {
  width: 44px;
  height: 44px;
}
.catalog-card .card-exclusion { height: auto; }
.catalog-card .card-study-start,
.catalog-card .card-pick {
  min-width: 72px;
  justify-content: center;
  white-space: nowrap;
}
.study-selection-tray {
  min-width: 0;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  border-color: #91bcd4;
  box-shadow: 0 16px 44px rgba(29, 72, 99, .18);
}
.study-selection-tray .print-tray-info,
.study-selection-tray .print-tray-actions { min-width: 0; }
.study-selection-tray .print-tray-actions {
  display: grid;
  grid-template-columns: auto minmax(190px, auto);
  align-items: center;
}
.study-selection-tray .print-tray-actions .button {
  width: 100%;
  min-width: 0;
}
.study-selection-tray .print-tray-mode {
  background: #dff2f5;
  color: #17686c;
}
.study-selection-tray .print-tray-primary {
  min-width: 190px;
}
.study-selection-tray .print-tray-thumb {
  flex-basis: 64px;
  width: 64px;
  height: 56px;
}
.study-selection-tray .print-tray-thumb button {
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  background: rgba(20, 40, 55, .82);
}

/* iPad portrait/split-view: keep the desktop-style top navigation, but compact it into one
   horizontal line. The 768px viewport sits just above the phone breakpoint, so full labels would
   otherwise collapse into vertical Japanese text. Comfortable cards use one wide column so the
   scanned problem remains the primary content; compact mode intentionally retains two columns. */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar { padding: 6px 0; }
  .topbar-inner {
    min-height: 52px;
    gap: 8px;
    padding-inline: 12px;
  }
  .brand {
    flex: 0 0 30px;
    min-width: 30px;
    min-height: 44px;
    gap: 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  .brand::before {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .learner-context,
  .learner-chip > summary {
    max-width: 104px;
    min-height: 44px;
    padding-inline: 8px;
    overflow: hidden;
    white-space: nowrap;
  }
  .learner-context > span { display: none; }
  .learner-context strong,
  .learner-chip > summary span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-shell {
    min-width: 0;
    flex: 1 1 auto;
  }
  .nav-primary {
    width: 100%;
    min-width: 0;
  }
  .nav-primary a {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    justify-content: center;
    gap: 4px;
    padding: 6px 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .account-menu-label { display: none; }
  .account-menu > summary {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
  }
  .catalog-source-tabs { top: 65px; }
  .catalog:not([data-density="compact"]) .problem-grid.image-only-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog[data-density="compact"] .problem-grid.image-only-grid,
  .catalog.is-filters-collapsed[data-density="compact"] .problem-grid.image-only-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .study-selection-tray {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
  }
  .study-selection-tray .print-tray-info {
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
  }
  .study-selection-tray .print-tray-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .study-selection-tray .print-tray-actions .button,
  .study-selection-tray .print-tray-primary {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* iPad landscape: preserve the two-column problem layout, but use the same compact one-line
   navigation as portrait. Full Japanese labels otherwise wrap at 1024px and make the header
   jump vertically. */
@media (min-width: 901px) and (max-width: 1100px) {
  .topbar { padding: 6px 0; }
  .topbar-inner {
    min-height: 52px;
    gap: 8px;
    padding-inline: 12px;
  }
  .brand {
    flex: 0 0 30px;
    min-width: 30px;
    min-height: 44px;
    gap: 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  .brand::before {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .learner-context,
  .learner-chip > summary {
    max-width: 104px;
    min-height: 44px;
    padding-inline: 8px;
    overflow: hidden;
    white-space: nowrap;
  }
  .learner-context > span { display: none; }
  .learner-context strong,
  .learner-chip > summary span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-shell {
    min-width: 0;
    flex: 1 1 auto;
  }
  .nav-primary {
    width: 100%;
    min-width: 0;
  }
  .nav-primary a {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    justify-content: center;
    gap: 4px;
    padding: 6px 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .account-menu-label { display: none; }
  .account-menu > summary {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
  }
  .catalog-source-tabs { top: 65px; }
}
.print-drawer-secondary-heading {
  margin-bottom: 12px;
  padding: 12px 0 2px;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.print-drawer-secondary-heading .eyebrow { margin: 0; }
.print-drawer-secondary-heading strong { font-size: 15px; }

.study-landing {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.study-landing-head {
  max-width: 760px;
  padding: 10px 2px 4px;
}
.study-landing-head .eyebrow { margin-bottom: 8px; }
.study-landing-head h1 { margin: 0; }
.study-landing-head > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 17px);
}
.study-guide {
  width: min(760px, 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-subtle);
}
.study-guide > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 15px;
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 850;
}
.study-guide > summary::marker { color: var(--accent); }
.study-guide > summary:focus-visible {
  outline: 3px solid var(--accent-glow);
  outline-offset: 2px;
}
.study-guide[open] > summary {
  border-radius: 15px 15px 0 0;
  background: var(--surface-soft);
}
.study-guide-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.study-guide-steps {
  margin: 0;
  padding: 16px 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px 22px;
}
.study-guide-steps li {
  min-width: 0;
  padding-right: 8px;
  color: var(--muted);
  line-height: 1.65;
}
.study-guide-steps li::marker { color: var(--accent); font-weight: 900; }
.study-guide-steps strong,
.study-guide-steps span { display: block; }
.study-guide-steps strong { margin-bottom: 2px; color: var(--ink-soft); }
.study-guide-steps span { font-size: 12px; }
.study-selection-gateway { width: min(1040px, 100%); }
.study-selection-methods {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.study-selection-method {
  position: relative;
  min-width: 0;
  min-height: 258px;
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(35, 70, 100, .07);
}
.study-selection-method--auto {
  grid-column: span 7;
  border-color: #78b6d5;
  background: linear-gradient(145deg, #eaf7fc 0%, #fff 62%);
  box-shadow: 0 16px 36px rgba(25, 105, 145, .12);
}
.study-selection-method--flash {
  grid-column: span 5;
  background: linear-gradient(145deg, #fff 0%, #f5fafc 100%);
}
.study-selection-method--manual {
  grid-column: 1 / -1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  box-shadow: none;
}
.study-selection-method-copy {
  min-width: 0;
  align-self: start;
}
.study-selection-method .study-start-kicker {
  margin: 0 0 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.study-selection-method h2 {
  margin: 0;
  font-size: clamp(21px, 3vw, 27px);
}
.study-selection-method-copy > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.study-selection-method-result {
  align-self: start;
  min-width: 84px;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 185, 211, .72);
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  text-align: center;
}
.study-selection-method-result strong {
  color: var(--accent-dark);
  font-size: 14px;
  line-height: 1;
}
.study-selection-method-result strong span {
  font-size: 26px;
  font-weight: 900;
}
.study-selection-method-result small {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
}
.study-selection-method-actions {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.study-selection-method--manual .study-selection-method-actions {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}
.study-selection-method-actions .button {
  min-width: 0;
  min-height: 48px;
  white-space: normal;
}
.study-resume-note {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #9bc8c5;
  border-radius: 15px;
  background: #eef9f7;
}
.study-resume-note > div { display: grid; gap: 2px; }
.study-resume-note strong { color: #17686c; }
.study-resume-note span { color: var(--muted); font-size: 12px; }
.study-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.study-mode-card {
  min-width: 0;
  min-height: 280px;
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(35, 70, 100, .07);
}
.study-mode-card--standard {
  border-color: #89bdd7;
  background:
    linear-gradient(145deg, #edf8fc 0%, #fff 58%);
}
.study-mode-card--flash {
  min-height: 0;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  border-style: dashed;
  box-shadow: none;
}
.study-mode-copy { min-width: 0; }
.study-mode-copy .study-start-kicker,
.study-start-panel .study-start-kicker {
  margin: 0 0 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.study-mode-copy h2 { margin: 0; font-size: clamp(21px, 3vw, 27px); }
.study-mode-copy > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
.study-mode-actions {
  grid-column: 1 / -1;
  margin: 0;
  display: grid;
  gap: 12px;
}
.study-mode-actions .print-order-option,
[data-study-start-dialog] .print-order-option { min-height: 44px; }
.study-mode-actions .button {
  width: 100%;
  min-height: 52px;
  justify-content: center;
}
.study-mode-card--flash .study-mode-actions {
  grid-column: auto;
  white-space: nowrap;
}
.study-mode-card--flash .study-mode-actions .button {
  width: auto;
  min-height: 46px;
}
.study-start-options,
.study-start-panel {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .84);
}
.study-start-options h2,
.study-start-panel h2 { margin: 0; font-size: 18px; }
.study-start-options p,
.study-start-panel p:not(.study-start-kicker) {
  margin: 5px 0 0;
  color: var(--muted);
}
.study-start-options form { flex: 0 0 auto; margin: 0; }
.study-recent {
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.study-recent-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.study-recent-row {
  min-height: 64px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
}
.study-recent-row + .study-recent-row { border-top: 1px solid var(--line); }
.study-recent-row > span:first-child { min-width: 0; display: grid; gap: 3px; }
.study-recent-row strong,
.study-recent-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.study-recent-row small { color: var(--muted); }
.study-recent-row > span:last-child { flex: 0 0 auto; color: var(--accent-dark); font-size: 12px; font-weight: 800; }

.learning-history-head { align-items: end; }
.learning-history-head .eyebrow { margin-bottom: 5px; }
.learning-history-head p:last-child { margin: 6px 0 0; }
.learning-history-kinds {
  width: min(360px, 100%);
  margin-bottom: 24px;
}
.learning-history-kinds .control-tab {
  min-height: 44px;
  display: grid;
  place-items: center;
}
.work-history { display: grid; gap: 18px; }
.work-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.work-record-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(180px, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(35, 70, 100, .07);
}
.work-record-preview-pages {
  min-width: 0;
  min-height: 180px;
  padding: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-gutter: stable;
  background: #edf3f6;
}
.work-record-preview-pages.is-single {
  padding: 0;
  gap: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}
.work-record-preview {
  position: relative;
  min-height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(#edf3f6 1px, transparent 1px),
    linear-gradient(90deg, #edf3f6 1px, transparent 1px),
    #f9fbfc;
  background-size: 24px 24px;
}
.work-record-preview-pages.is-single .work-record-preview,
.work-record-card > .work-record-preview {
  border: 0;
  border-radius: 0;
}
.work-record-preview img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: contain;
  background: rgba(255, 255, 255, .92);
}
.work-record-page-number {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(24, 53, 68, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(25, 48, 61, .18);
}
.work-record-placeholder { color: #8198a5; }
.work-record-placeholder { font-size: 12px; font-weight: 800; }
.work-record-body { min-width: 0; padding: 16px; }
.work-record-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}
.work-record-mode {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 850;
}
.work-record-body h2 {
  margin: 11px 0 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-record-body > p {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-record-evaluation {
  color: var(--accent-dark) !important;
  font-weight: 850;
}
.work-record-state { font-weight: 750; }
.work-record-page-links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.work-record-page-links a {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-mid);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}
.work-record-page-links a:hover { filter: brightness(.98); }
.work-record-page-links a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.work-record-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-record-actions .button { flex: 1 1 130px; justify-content: center; }
.work-history-empty { padding: clamp(38px, 7vw, 72px) 20px; }
.history-pagination { justify-content: center; }

.app-body.study-focus-body {
  min-height: 100dvh;
  padding-bottom: 0 !important;
  overflow: hidden;
}
.study-focus-page {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}
.study-workspace {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% -28%, rgba(255, 255, 255, .98), transparent 52%),
    #eaf3f8;
}
.study-workspace-head { gap: clamp(8px, 1.4vw, 16px); }
.study-workspace:not(.guest-study) .study-workspace-head {
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
}
.study-workspace-head .flash-progress-copy {
  font-variant-numeric: tabular-nums;
}
.study-head-navigation {
  min-width: 0;
  height: 44px;
  align-self: stretch;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, 112px);
  align-items: center;
  gap: 6px;
}
.study-head-navigation .flash-previous-button,
.study-head-navigation .flash-next-button {
  width: 112px;
  min-width: 112px;
  min-height: 44px;
  height: 44px;
  padding: 5px 12px;
  gap: 7px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
}
.study-head-navigation .flash-previous-button strong,
.study-head-navigation .flash-next-button strong { font-size: 13px; }
.study-navigation-compact { display: none; }
.study-head-navigation .flash-next-button:hover:not(:disabled) {
  transform: none;
}
.study-head-navigation .flash-previous-button:focus-visible,
.study-head-navigation .flash-next-button:focus-visible {
  outline-offset: -3px;
}
.study-workspace .study-problem-stage {
  border-color: #adcbd9;
  grid-template-rows: minmax(0, 1fr) auto;
}
.study-workspace .study-stage-tools {
  min-height: 54px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  gap: 4px;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.study-workspace .flash-record-tools { flex: 0 0 auto; }
.study-workspace .flash-auto-save-toggle,
.study-workspace .flash-drawing-save,
.study-workspace .flash-drawing-history,
.study-workspace .flash-draw-tool,
.study-workspace .flash-draw-mode,
.study-workspace .flash-zoom-button,
.study-workspace .flash-history-close,
.study-workspace .flash-history-review-close,
.study-workspace .flash-history-review-delete,
.study-workspace .flash-history-review-tools select,
.study-workspace .flash-history-review-tools button {
  min-height: 44px;
}
.study-workspace .flash-draw-mode { flex: 0 0 96px; width: 96px; }
.study-workspace .flash-draw-tool,
.study-workspace .flash-zoom-button { flex: 0 0 auto; }
/* 枠も背景もない文字だけでは、問題一覧を開くボタンだと気付かれなかった。解答用紙の操作ボタンと
   同じ体裁に寄せて、押せることが分かるようにする。 */
.study-list-open {
  min-width: 44px;
  min-height: 44px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #9bc8dc;
  border-radius: 10px;
  background: #eef8fc;
  color: var(--accent-dark);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.study-list-open:hover {
  border-color: #6ba8c9;
  background: #e2f2f9;
  color: var(--accent-dark);
}
.study-list-open:focus-visible {
  outline: 3px solid rgba(18, 113, 185, .32);
  outline-offset: 1px;
}
.study-decision {
  right: 12px;
  bottom: 62px;
  left: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.study-decision .study-check-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}
.study-check-actions {
  z-index: 1;
  width: auto;
  max-width: min(180px, 100%);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.study-answer-open {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.study-answer-open {
  border-color: #83b8d5;
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 8px 24px rgba(28, 66, 91, .14);
}
.study-answer-open:hover { transform: translateY(-1px); }
.study-answer-open:disabled { cursor: wait; opacity: .58; }
.study-skip-button {
  min-width: 72px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #b8ccd7;
  border-radius: 11px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.study-skip-button:hover:not(:disabled) {
  border-color: #83b8d5;
  background: #f5fbfe;
  color: var(--accent-dark);
}
.study-skip-button:disabled { cursor: wait; opacity: .52; }
.study-decision .flash-save-status {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.study-workspace.is-controls-idle .flash-decision {
  opacity: .58;
  transform: none;
}
.study-workspace.is-controls-idle .flash-decision:hover,
.study-workspace.is-controls-idle .flash-decision:focus-within { opacity: 1; }

.study-list-fallback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(17, 34, 50, .44);
  backdrop-filter: blur(3px);
  pointer-events: auto;
  touch-action: none;
  overscroll-behavior: contain;
}
.study-list-fallback-backdrop[hidden] { display: none; }
.study-list-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(26, 53, 76, .3);
}
.study-list-dialog.is-fallback {
  position: fixed;
  z-index: 1610;
}
.study-list-dialog::backdrop {
  background: rgba(17, 34, 50, .44);
  backdrop-filter: blur(3px);
}
.study-list-panel {
  max-height: min(88dvh, 900px);
  padding: 22px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  box-sizing: border-box;
}
.study-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.study-list-head p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.study-list-head h2 { margin: 0; }
.study-list-close {
  min-width: 64px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 800;
}
.study-list-summary {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.study-list-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px;
  overscroll-behavior: contain;
}
.study-list-card { min-width: 0; }
.study-list-card-button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font: inherit;
}
.study-list-card-button:hover { border-color: #83b8d5; background: #f7fbfd; }
.study-list-card.is-current .study-list-card-button {
  border: 2px solid var(--accent);
  padding: 7px;
  background: #f7fbfd;
}
.study-list-card-button:focus-visible {
  outline: 3px solid rgba(18, 113, 185, .32);
  outline-offset: 2px;
}
.study-list-card-image {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  display: block;
  box-sizing: border-box;
  padding-bottom: 46%;
  object-fit: contain;
  object-position: center top;
  border-radius: 9px;
  background: #fff;
}
.study-list-card-image.is-writing-preview { padding-bottom: 0; }
.study-list-card-placeholder {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(#f3f8fa 0 34%, #fff 34% 100%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.study-list-card-number {
  min-width: 24px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}
.study-list-card-state {
  min-width: 0;
  justify-self: end;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.study-list-card-state.is-attempted { font-size: 16px; }
.study-list-card-state.is-skipped { color: var(--muted); font-size: 11px; }
.study-list-card-state.is-pending {
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
}
.study-list-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.study-list-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.study-list-complete { min-height: 44px; }

.study-answer-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  max-height: min(86dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(26, 53, 76, .3);
}
.study-answer-dialog::backdrop {
  background: rgba(17, 34, 50, .44);
  backdrop-filter: blur(3px);
}
.study-answer-panel {
  max-height: min(86dvh, 900px);
  padding: 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 14px;
}
.study-answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.study-answer-head p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.study-answer-head h2 { margin: 0; }
.study-answer-close {
  min-width: 64px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 800;
}
.study-answer-content {
  min-height: 140px;
  overflow: auto;
  display: grid;
  align-content: start;
  place-items: stretch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafb;
}
.study-answer-switch {
  margin: 10px 10px 0;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid #c8dce6;
  border-radius: 12px;
  background: #eaf3f7;
}
.study-answer-switch-tab {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
.study-answer-switch-tab[aria-pressed="true"] {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: 0 3px 10px rgba(31, 78, 108, .14);
}
.study-answer-switch-tab:focus-visible {
  outline: 3px solid rgba(18, 113, 185, .32);
  outline-offset: 1px;
}
.study-answer-media {
  min-height: 140px;
  display: grid;
  place-items: center;
}
.study-answer-content img {
  width: 100%;
  height: auto;
  max-height: 62dvh;
  object-fit: contain;
  background: #fff;
}
.study-answer-content iframe {
  width: 100%;
  min-height: min(56dvh, 620px);
  border: 0;
  background: #fff;
}
.study-answer-media > .button { margin: 0 12px 12px; }
.study-answer-content ol,
.study-answer-content p { margin: 0; padding: 22px 34px; }
.study-answer-message {
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  text-align: center;
}
.study-answer-message:empty { display: none; }
.study-answer-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.study-explanation-create {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #b7ccd7;
  border-radius: 10px;
  background: #fff;
  color: var(--accent-dark);
  box-shadow: none;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.study-explanation-create:hover:not(:disabled) {
  border-color: #83b8d5;
  background: var(--accent-soft);
}
.study-explanation-create:disabled { cursor: wait; opacity: .58; }
.study-workspace.is-explanation-recording .flash-record-tools > button {
  display: none;
}
.study-explanation-recording-controls {
  position: static;
  z-index: auto;
  width: auto;
  min-width: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.study-explanation-recording-controls[hidden] { display: none; }
.study-explanation-recording-state {
  min-width: 0;
  min-height: 44px;
  padding: 5px 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  border: 1px solid #e7c2bc;
  border-radius: 12px;
  background: #fff7f5;
  color: var(--ink-soft);
  font-size: 12px;
}
.study-explanation-recording-state strong {
  color: #b43b2f;
  font-size: 13px;
  white-space: nowrap;
}
.study-explanation-recording-indicator {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #b43b2f;
  box-shadow: 0 0 0 4px rgba(180, 59, 47, .13);
  animation: explanation-recording-pulse 1.4s ease-in-out infinite;
}
@keyframes explanation-recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .58; transform: scale(.86); }
}
.study-explanation-recording-state time {
  min-width: 44px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.study-explanation-snapshot-state {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.study-explanation-snapshot-state[data-ready="true"] { color: #28715e; }
.study-explanation-recording-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.study-explanation-action-compact { display: none; }
.study-explanation-recording-controls button {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.study-explanation-recording-controls button:hover:not(:disabled) {
  border-color: #8caeba;
  background: #f5f9fa;
}
.study-explanation-recording-controls .study-explanation-stop {
  border-color: #c8584d;
  background: #b43b2f;
  color: #fff;
}
.study-explanation-recording-controls .study-explanation-cancel {
  border-color: #cbd8de;
  background: #f6f9fa;
  color: var(--ink-soft);
}
.study-explanation-recording-controls .study-explanation-stop:hover:not(:disabled) {
  border-color: #933027;
  background: #933027;
}
.study-explanation-recording-controls button:disabled {
  cursor: wait;
  opacity: .58;
}
.study-explanation-recording-message {
  position: absolute;
  right: 12px;
  bottom: 64px;
  z-index: 13;
  width: min(440px, calc(100% - 24px));
  min-height: 44px;
  margin: 0;
  padding: 10px 13px;
  display: grid;
  place-items: center start;
  box-sizing: border-box;
  border: 1px solid #cbdbe2;
  border-radius: 11px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(31, 57, 76, .14);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.study-explanation-recording-message:empty { display: none; }
.study-explanation-recording-message[data-state="error"] {
  border-color: #e3b0aa;
  background: #fff5f3;
  color: var(--danger);
}

.study-answer-explanation {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid #c8dce6;
  border-radius: 13px;
  background: #fff;
}
.study-answer-explanation h3 { margin: 0; font-size: 16px; }
.study-answer-explanation img {
  width: 100%;
  max-height: min(48dvh, 520px);
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
}
.study-answer-explanation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.study-answer-explanation .button {
  min-height: 44px;
  margin: 0;
}
.study-answer-explanation-delete {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #d79a93;
  border-radius: 10px;
  background: #fff;
  color: #a53b31;
  font-weight: 850;
}
.study-answer-explanation-delete:hover:not(:disabled) {
  border-color: #bd5146;
  background: #fff3f1;
}

.study-explanation-video-dialog,
.study-explanation-preview-dialog,
.study-explanation-delete-dialog {
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(26, 53, 76, .3);
}
.study-explanation-video-dialog { width: min(880px, calc(100vw - 28px)); }
.study-explanation-preview-dialog { width: min(1040px, calc(100vw - 28px)); }
.study-explanation-delete-dialog { width: min(520px, calc(100vw - 28px)); }
.study-explanation-video-dialog::backdrop,
.study-explanation-preview-dialog::backdrop,
.study-explanation-delete-dialog::backdrop {
  background: rgba(17, 34, 50, .48);
  backdrop-filter: blur(4px);
}
.study-explanation-delete-panel {
  padding: 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.study-explanation-delete-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0ed;
  color: #aa3b31;
  font-size: 22px;
  font-weight: 950;
}
.study-explanation-delete-panel h2 { margin: 0; font-size: 20px; }
.study-explanation-delete-panel > div:nth-child(2) > p {
  margin: 0 0 3px;
  color: #aa3b31;
  font-size: 11px;
  font-weight: 900;
}
.study-explanation-delete-copy,
.study-explanation-delete-message,
.study-explanation-delete-actions {
  grid-column: 1 / -1;
}
.study-explanation-delete-copy {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}
.study-explanation-delete-message {
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  text-align: center;
}
.study-explanation-delete-message:empty { display: none; }
.study-explanation-delete-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.study-explanation-delete-actions button {
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
}
.study-explanation-delete-actions .study-explanation-delete-confirm {
  border-color: #b43b2f;
  background: #b43b2f;
  color: #fff;
}
.study-explanation-delete-actions .study-explanation-delete-confirm:hover:not(:disabled) {
  border-color: #933027;
  background: #933027;
}
.study-explanation-delete-actions button:disabled {
  cursor: wait;
  opacity: .58;
}
.study-explanation-video-panel,
.study-explanation-preview-panel {
  max-height: min(90dvh, 940px);
  padding: 20px;
  display: grid;
  gap: 14px;
}
.study-explanation-video-head,
.study-explanation-preview-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.study-explanation-video-head p,
.study-explanation-preview-head p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.study-explanation-video-head h2,
.study-explanation-preview-head h2 { margin: 0; }
.study-explanation-video-close {
  min-width: 64px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 800;
}
.study-explanation-video-panel > video {
  width: 100%;
  max-height: min(70dvh, 720px);
  border-radius: 13px;
  background: #111;
}
.study-explanation-video-message,
.study-explanation-preview-message {
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.study-explanation-video-message:empty,
.study-explanation-preview-message:empty { display: none; }
.study-explanation-upload-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
}
.study-explanation-upload-progress[hidden] { display: none; }
.study-explanation-upload-progress progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: var(--accent);
}
.study-explanation-upload-progress span {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: right;
}
.study-explanation-preview-head > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}
.study-explanation-preview-media {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
}
.study-explanation-preview-media figure {
  min-width: 0;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f4f7f8;
}
.study-explanation-preview-media img,
.study-explanation-preview-media video {
  width: 100%;
  height: 100%;
  max-height: 54dvh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.study-explanation-preview-media video { background: #111; }
.study-explanation-preview-snapshots {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
}
.study-explanation-preview-snapshots img { height: auto; }
.study-explanation-preview-media figcaption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.study-explanation-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.study-explanation-preview-actions button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}
.study-explanation-preview-actions .study-explanation-save {
  min-width: 132px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.study-explanation-preview-actions .study-explanation-cancel {
  margin-right: auto;
  border-color: #cbd8de;
  background: #f6f9fa;
  color: var(--ink-soft);
}
.study-explanation-preview-actions .study-explanation-save:hover:not(:disabled) {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}
.study-explanation-preview-actions button:disabled {
  cursor: wait;
  opacity: .58;
}
.answer-registration {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.answer-registration-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.answer-registration-head h1 { margin: 0; }
.answer-registration-head p:last-child { max-width: 660px; margin: 8px 0 0; color: var(--muted); }
.answer-registration-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.answer-management-stack {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.answer-problem-card,
.answer-registration-form,
.answer-registration-locked {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.answer-problem-card { padding: 14px; display: grid; gap: 5px; }
.answer-problem-image {
  min-height: 180px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
}
.answer-problem-image img { width: 100%; max-height: 300px; object-fit: contain; background: #fff; }
.answer-problem-card > span { color: var(--muted); font-size: 12px; }
.answer-registration-form { overflow: hidden; }
.answer-management-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.answer-management-card-head {
  min-height: 78px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #fbfdfd 0%, #f2f8f8 100%);
}
.answer-management-card-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
}
.answer-management-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}
.answer-management-state {
  min-height: 30px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid #d4dde2;
  border-radius: 999px;
  background: #f5f7f8;
  color: #687980;
  font-size: 11px;
  font-weight: 900;
}
.answer-management-state.is-ready {
  border-color: #88c4b5;
  background: #e7f6f1;
  color: #126652;
}
.answer-management-card .answer-registration-form {
  border: 0;
  border-radius: 0;
}
.answer-input-section {
  padding: 22px;
  display: grid;
  gap: 15px;
}
.answer-input-section + .answer-input-section { border-top: 1px solid var(--line); }
.answer-input-section > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
}
.answer-input-step {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}
.answer-input-section h2,
.answer-input-section h3 { margin: 0; font-size: 18px; }
.answer-input-section h2 small,
.answer-input-section h3 small { color: var(--muted); font-size: 11px; }
.answer-input-section > div:first-child > p:last-child {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.answer-file-field {
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #8eb8ce;
  border-radius: 13px;
  background: #f3f9fc;
}
.answer-file-field > span { color: var(--accent-dark); font-weight: 850; }
.answer-file-field input { min-width: 0; }
.answer-file-name {
  margin: -7px 2px 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.answer-source-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.answer-source-choice {
  min-height: 112px;
  padding: 14px 10px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #b9d2df;
  border-radius: 14px;
  background: #f7fbfd;
  color: var(--accent-dark);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.answer-source-choice:hover,
.answer-source-choice:focus-within {
  border-color: #4f94b6;
  box-shadow: 0 7px 18px rgb(34 96 126 / 12%);
  transform: translateY(-1px);
}
.answer-source-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.answer-source-choice-icon {
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #dceff6;
  font-size: 11px;
  font-weight: 950;
}
.answer-source-choice strong { font-size: 13px; }
.answer-source-choice small { color: var(--muted); font-size: 10px; }
.answer-current-pages,
.answer-crop-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.answer-crop-workspace,
.answer-crop-results {
  padding: 16px;
  display: grid;
  gap: 12px;
  border: 1px solid #c9d9df;
  border-radius: 15px;
  background: #f8fbfc;
}
.answer-crop-workspace[hidden],
.answer-crop-results[hidden] { display: none; }
.answer-crop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.answer-crop-head > div:first-child,
.answer-crop-results > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
}
.answer-crop-head h3,
.answer-crop-results h3 { margin: 0; }
.answer-crop-results > div:first-child > p:last-child {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.answer-page-nav { display: flex; align-items: center; gap: 7px; }
.answer-page-nav[hidden] { display: none; }
.answer-page-nav label { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.answer-page-nav input { width: 58px; min-height: 36px; padding: 5px; text-align: center; }
.answer-crop-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #afbec5;
  border-radius: 10px;
  background: #dfe7ea;
  touch-action: none;
}
.answer-crop-stage canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 68vh; }
.answer-crop-box {
  position: absolute;
  border: 3px solid #e75f3c;
  border-radius: 4px;
  background: rgb(231 95 60 / 8%);
  box-shadow: 0 0 0 200vmax rgb(20 36 43 / 38%);
  cursor: move;
  touch-action: none;
}
.answer-crop-box:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.answer-crop-box [data-handle] {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e75f3c;
}
.answer-crop-box [data-handle="nw"] { top: -10px; left: -10px; cursor: nwse-resize; }
.answer-crop-box [data-handle="ne"] { top: -10px; right: -10px; cursor: nesw-resize; }
.answer-crop-box [data-handle="sw"] { bottom: -10px; left: -10px; cursor: nesw-resize; }
.answer-crop-box [data-handle="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.answer-crop-preview-list figure { margin: 0; position: relative; }
.answer-crop-preview-list img { width: 100%; height: 190px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.answer-crop-preview-list figcaption { margin-top: 5px; color: var(--muted); font-size: 10px; }
.answer-crop-preview-list .button { position: absolute; top: 7px; right: 7px; min-height: 32px; padding: 4px 9px; background: rgb(255 255 255 / 92%); }
.answer-current-image { margin: 0; }
.answer-current-image img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.answer-current-image figcaption { margin-top: 6px; color: var(--muted); font-size: 11px; }
.answer-registration-actions {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.answer-registration-actions p { margin: 0; color: var(--muted); font-size: 11px; }
.answer-registration-status { margin-top: 4px !important; font-weight: 800; }
.answer-registration-status:empty { display: none; }
.answer-registration-status[data-state="error"] { color: var(--danger); }
.answer-registration-status[data-state="success"] { color: var(--ok); }
.answer-registration-actions .button { flex: 0 0 auto; min-width: 140px; }
.answer-delete-row {
  grid-column: 2;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #ead0cc;
  border-radius: 15px;
  background: #fffafa;
}
.answer-delete-row strong { color: var(--danger); }
.answer-delete-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.answer-delete-row .button { flex: 0 0 auto; }
.answer-management-card .answer-delete-row {
  grid-column: auto;
  margin: 0 20px 20px;
}
.answer-recording-media {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.answer-recording-media figure {
  min-width: 0;
  margin: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}
.answer-recording-media a,
.answer-recording-media video {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #111;
}
.answer-recording-media a { display: grid; place-items: center; background: #f5f7f8; }
.answer-recording-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.answer-recording-media video { display: block; object-fit: contain; }
.answer-recording-media figcaption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.answer-recording-actions {
  padding: 0 20px 16px;
  display: flex;
  justify-content: flex-end;
}
.answer-recording-empty {
  min-height: 180px;
  padding: 28px 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}
.answer-recording-empty p {
  max-width: 480px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.answer-registration-locked { padding: 32px; }
.answer-registration-locked h2 { margin-top: 0; }
.answer-registration-locked p { color: var(--muted); }

@media (max-width: 900px) {
  .study-selection-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .study-selection-method--auto,
  .study-selection-method--flash { grid-column: auto; }
  .study-selection-method--manual { grid-column: 1 / -1; }
  .study-mode-grid { grid-template-columns: 1fr; }
  .study-mode-card--flash {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .study-mode-card--flash .study-mode-actions { grid-column: 1 / -1; }
  .study-mode-card--flash .study-mode-actions .button { width: 100%; }
  .study-decision {
    right: 8px;
    bottom: 60px;
    left: 8px;
    gap: 6px;
  }
  .study-decision .study-check-actions { grid-row: 1; }
  .study-decision .study-check-actions {
    width: min(560px, 100%);
    max-width: 180px;
  }
  .study-check-actions { justify-content: center; }
  .answer-registration-layout { grid-template-columns: 1fr; }
  .answer-delete-row { grid-column: auto; }
  .answer-problem-card {
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
  }
  .answer-problem-image { grid-row: 1 / span 2; min-height: 110px; margin: 0; }
}

@media (max-width: 760px) {
  .answer-source-choices { grid-template-columns: 1fr; }
  .answer-source-choice { min-height: 76px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .answer-source-choice-icon { grid-row: 1 / span 2; }
  .answer-current-pages,
  .answer-crop-preview-list { grid-template-columns: 1fr; }
  .answer-crop-head { align-items: stretch; flex-direction: column; }
  .answer-page-nav { justify-content: center; }
  .today-task--paper { margin-inline: 4px; }
  .today-paper-tools { margin-left: 4px; }
  .card-study-start { min-width: 112px; }
  .study-selection-tray {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    gap: 8px;
  }
  .study-selection-tray .print-tray-info {
    justify-content: flex-start;
    white-space: normal;
  }
  .study-selection-tray .print-tray-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .study-selection-tray .study-selection-start {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .study-selection-tray .study-selection-review {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .study-selection-methods { grid-template-columns: minmax(0, 1fr); }
  .study-selection-method--auto,
  .study-selection-method--flash,
  .study-selection-method--manual {
    grid-column: 1;
    min-height: 0;
  }
  .study-selection-method--manual {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .study-selection-method--manual .study-selection-method-actions {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .study-landing { gap: 16px; }
  .study-landing-head { padding-top: 2px; }
  .study-resume-note,
  .study-start-options,
  .study-start-panel {
    align-items: stretch;
    flex-direction: column;
    padding: 18px 16px;
  }
  .study-resume-note .button,
  .study-start-options .button,
  .study-start-panel .button { width: 100%; justify-content: center; }
  .study-mode-card { min-height: 0; padding: 19px 16px; }
  .learning-history-kinds { width: 100%; }
  .work-record-grid { grid-template-columns: 1fr; }
  .app-body.study-focus-body { padding-bottom: 0 !important; }
  .study-workspace {
    grid-template-rows: 46px 3px minmax(0, 1fr);
  }
  .study-workspace .study-workspace-head {
    width: calc(100% - 12px);
    min-height: 46px;
    grid-template-columns: 44px minmax(0, 1fr) 92px;
    gap: 6px;
  }
  .study-workspace:not(.guest-study) .study-workspace-head {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 104px) 76px;
    gap: 4px;
  }
  .study-workspace-head .flash-progress-copy {
    width: 92px;
    justify-content: flex-end;
    gap: 0;
  }
  .study-workspace:not(.guest-study) .study-workspace-head .flash-progress-copy {
    width: 76px;
  }
  .study-workspace-head .study-previous-result {
    width: 100%;
    max-width: 104px;
    padding: 0;
    font-size: 10px;
  }
  .study-workspace-head .flash-progress-copy > span:first-child { display: none; }
  .study-workspace .study-head-navigation {
    width: 100%;
    max-width: 224px;
    justify-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .study-workspace .study-head-navigation .flash-previous-button,
  .study-workspace .study-head-navigation .flash-next-button {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    gap: 5px;
  }
  .study-workspace .flash-problem-stage {
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    margin-bottom: 4px;
    border-radius: 12px;
  }
  .study-workspace .study-stage-tools {
    min-height: 54px;
    padding: 4px;
    flex-wrap: nowrap;
    align-content: center;
    gap: 3px;
  }
  .study-workspace .flash-auto-save-toggle,
  .study-workspace .flash-drawing-save,
  .study-workspace .flash-drawing-history {
    padding-inline: 7px;
    font-size: 10px;
  }
  .study-workspace .flash-draw-mode {
    width: 84px;
    flex-basis: 84px;
    margin-left: 0;
  }
  .study-decision { bottom: 60px; }
  .study-decision .study-check-actions {
    width: auto;
    max-width: 180px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .study-answer-open {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    font-size: 11px;
    white-space: normal;
    line-height: 1.15;
  }
  .study-skip-button {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    line-height: 1.15;
  }
  .study-decision .flash-save-status {
    max-width: calc(100% - 16px);
    margin-top: 0;
  }
  .study-answer-panel { padding: 16px; }
  .answer-registration-head { align-items: stretch; flex-direction: column; }
  .answer-registration-head .button { width: 100%; }
  .answer-problem-card { grid-template-columns: 110px minmax(0, 1fr); }
  .answer-input-section { padding: 18px 15px; }
  .answer-management-card-head { min-height: 70px; padding: 15px; }
  .answer-recording-media { grid-template-columns: 1fr; padding: 15px; }
  .answer-recording-actions { padding-inline: 15px; }
  .answer-recording-actions .button { width: 100%; }
  .answer-management-card .answer-delete-row {
    margin: 0 15px 15px;
    align-items: stretch;
    flex-direction: column;
  }
  .answer-management-card .answer-delete-row .button { width: 100%; }
  .answer-registration-actions { align-items: stretch; flex-direction: column; padding: 15px; }
  .answer-registration-actions .button { width: 100%; }
}

@media (max-width: 420px) {
  .catalog-card .card-primary-actions {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
  }
  .study-mode-card { gap: 13px; }
  .study-navigation-wide { display: none; }
  .study-navigation-compact { display: inline; }
  .study-head-navigation .flash-previous-button strong,
  .study-head-navigation .flash-next-button strong { font-size: 12px; }
  .study-decision .study-check-actions { max-width: 180px; }
  .study-selection-method {
    padding: 17px 15px;
    gap: 14px;
  }
  .study-selection-method-result {
    min-width: 72px;
    padding-inline: 8px;
  }
  .study-selection-method-result strong span { font-size: 23px; }
  .study-selection-method-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .study-selection-method-actions .button { width: 100%; }
  .answer-problem-card { grid-template-columns: 1fr; }
  .answer-problem-image { grid-row: auto; }
}

@media (max-width: 520px) {
  .study-list-dialog {
    width: calc(100vw - 20px);
    max-height: 94dvh;
  }
  .study-list-panel { padding: 16px; gap: 10px; }
  .study-list-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .study-list-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .study-list-complete { width: 100%; }
}

/* 390px phones: every core pen and navigation action remains visible; navigation stays in the
   fixed header while the pen rail uses two rows. */
@media (max-width: 480px) {
  .study-page-stack {
    min-width: 100%;
    max-width: 100%;
    padding-block: 0;
    gap: 12px;
  }
  .study-page-action {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    padding-inline: 8px;
    font-size: 11px;
  }
  .study-page-head { padding-inline: 10px 6px; gap: 6px; }
  .study-page-head-actions { gap: 4px; }
  .study-page-count { font-size: 10px; }
  .study-tool-pages { gap: 3px; }
  .study-workspace .flash-study-head,
  .study-workspace .study-head-navigation,
  .study-workspace .flash-problem-stage,
  .study-workspace .study-stage-tools,
  .study-workspace .study-check-actions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* ページ操作を右端へ足した分、2行の固定gridでは3行目へこぼれて`overflow: hidden`に切られる。
     1行のままにして左右スクロールで全部へ届かせ、縦は書き込み領域へ返す。 */
  .study-workspace .study-stage-tools {
    min-height: 54px;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .study-workspace .flash-problem-stage {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .study-workspace .study-stage-tools { grid-row: 2; }
  .study-workspace.is-explanation-recording .study-decision { display: none; }
  .study-workspace .flash-record-tools {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .study-workspace .flash-auto-save-toggle,
  .study-workspace .flash-drawing-save,
  .study-workspace .flash-drawing-history,
  .study-workspace .study-explanation-create,
  .study-workspace .flash-draw-mode,
  .study-workspace .flash-draw-tool,
  .study-workspace .flash-zoom-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .study-workspace .flash-draw-mode {
    margin: 0;
    padding-right: 18px;
  }
  /* 1行になったツール列の高さに合わせる。 */
  .study-decision { bottom: 60px; }
  .study-decision .study-check-actions {
    width: auto;
    max-width: 180px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .study-check-actions .study-answer-open {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    font-size: 12px;
    line-height: 1.2;
  }
  .study-explanation-recording-controls {
    position: static;
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
  }
  .study-workspace.is-explanation-recording .flash-record-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .study-explanation-recording-state {
    padding-inline: 7px;
    gap: 5px;
    overflow: hidden;
    font-size: 11px;
  }
  .study-explanation-recording-state strong { font-size: 11px; }
  .study-explanation-recording-state time { min-width: 38px; }
  .study-explanation-snapshot-state {
    max-width: 52px;
    font-size: 10px;
  }
  .study-explanation-recording-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }
  .study-explanation-recording-actions button {
    width: 52px;
    padding-inline: 4px;
  }
  .study-explanation-action-wide { display: none; }
  .study-explanation-action-compact { display: inline; }
  .study-explanation-recording-message {
    right: 6px;
    bottom: 106px;
    width: calc(100% - 12px);
  }
  .study-explanation-delete-panel { padding: 18px; }
  .study-explanation-delete-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .study-explanation-preview-panel,
  .study-explanation-video-panel {
    max-height: 94dvh;
    padding: 14px;
  }
  .study-explanation-preview-media {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
  .study-explanation-preview-media img,
  .study-explanation-preview-media video {
    height: auto;
    max-height: 34dvh;
  }
  .study-explanation-preview-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .study-explanation-preview-actions button { width: 100%; }
}