/* ============================================================
   Maillard Lab — 料理サイエンス・エンジン
   デザイン方針（2026-07 全面刷新）:
   - カラー: Cookpad / Retty 研究に基づく「食欲のわく」暖色ライトテーマ。
     クリーム地 × 白サーフェス × ロースト・オレンジ（メイラードの焼き色）。
     補助色はトマト赤（注意・熱）とハーブ緑（成功・チェック）。
   - タイポ: JetBrains Mono 13px をベースサイズに採用（公式推奨 size:13）。
     和文は Noto Sans JP へフォールバック。見出しは Zen Maru Gothic で
     「おいしそうな丸み」を出す。
   - レイアウト: PCは広幅（最大1240px）+ SOP 2カラムの広大表示。
     スマホは1カラムに畳む。8pxグリッド / コントラストAA準拠。
   ============================================================ */
:root {
  /* 3層構造: bg → surface → ink */
  --bg: #faf3e7;            /* 温かいクリーム（皿の上の生成り） */
  --bg-deep: #f3e8d5;
  --surface: #fffdf9;       /* 白い皿 */
  --surface-2: #fbf1e2;     /* 薄いきつね色 */
  --border: #eadfcd;
  --border-strong: #d9c9ae;
  --ink: #33261b;           /* 焦げ茶のインク */
  --ink-muted: #71604f;
  --ink-faint: #a08c74;

  /* 主役: ロースト・オレンジ（メイラードの焼き色） */
  --accent: #e8630a;
  --accent-hover: #c95206;
  --accent-soft: #fdeadb;
  --accent-ink: #ffffff;

  /* 補助色 */
  --tomato: #d2401e;        /* 熱・注意 */
  --herb: #3e8e4f;          /* 成功・チェックポイント */
  --herb-soft: #e9f4e6;
  --info: #2f7fa3;          /* 論文・科学 */
  --info-soft: #e8f2f7;
  --experiment: #6f2442;    /* ひらめき・仮説 */
  --experiment-deep: #43152b;
  --experiment-soft: #f5e8ee;
  --experiment-border: #a95f7d;

  /* コンソール（ダーク端末） */
  --term-bg: #1d1611;
  --term-border: #3c2f22;
  --term-ink: #e9dcc8;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(120, 72, 20, 0.09);
  --shadow-lg: 0 14px 40px rgba(120, 72, 20, 0.14);

  --font: "JetBrains Mono", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Segoe UI", sans-serif;
  --font-display: "Zen Maru Gothic", "JetBrains Mono", "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

/* ============================================================
   Owner control room — 厨房のパス（注文票）を模した監視画面
   一般画面へ影響しない owner 名前空間。8pxグリッド / AAコントラスト。
   ============================================================ */
.owner-page {
  --owner-bg: #18130f;
  --owner-surface: #251d17;
  --owner-surface-raised: #30251d;
  --owner-border: #514033;
  --owner-text: #fff4df;
  --owner-muted: #c9b79f;
  --owner-accent: #f0a04b;
  --owner-ok: #8bcf7a;
  --owner-danger: #ff7b6e;
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(240, 160, 75, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 160, 75, 0.025) 1px, transparent 1px),
    var(--owner-bg);
  background-size: 32px 32px;
  color: var(--owner-text);
}

.owner-shell {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 32px 32px 64px;
}

.owner-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 0 4px 20px;
  border-bottom: 1px solid var(--owner-border);
}

.owner-eyebrow {
  margin: 0 0 4px;
  color: var(--owner-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.owner-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.25;
}

.owner-subtitle {
  margin: 6px 0 0;
  color: var(--owner-muted);
}

.owner-connection {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  padding: 10px 14px;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface);
}

.owner-connection-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--owner-danger);
  box-shadow: 0 0 0 4px rgba(255, 123, 110, 0.12);
}

.owner-connection-dot.is-online {
  background: var(--owner-ok);
  box-shadow: 0 0 0 4px rgba(139, 207, 122, 0.12);
}

.owner-connection strong,
.owner-connection span {
  display: block;
}

.owner-connection strong {
  font-size: 12px;
}

.owner-connection span {
  color: var(--owner-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.owner-alert {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--owner-danger);
  border-radius: var(--radius-sm);
  background: rgba(255, 123, 110, 0.1);
  color: var(--owner-text);
}

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

.owner-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius);
  background: var(--owner-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.owner-card-wide {
  grid-column: 1 / -1;
}

.owner-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--owner-border);
  background: var(--owner-surface-raised);
}

.owner-card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
}

.owner-count {
  min-width: 28px;
  padding: 2px 8px;
  border: 1px solid var(--owner-border);
  border-radius: 999px;
  color: var(--owner-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.owner-card-body {
  padding: 16px;
}

.owner-empty {
  margin: 0;
  padding: 32px 16px;
  color: var(--owner-muted);
  text-align: center;
}

.owner-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
}

.owner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.owner-table th,
.owner-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--owner-border);
  text-align: left;
  vertical-align: middle;
}

.owner-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--owner-surface-raised);
  color: var(--owner-muted);
  font-weight: 700;
  white-space: nowrap;
}

.owner-table tbody tr:last-child td {
  border-bottom: none;
}

.owner-table tbody tr:hover td {
  background: rgba(240, 160, 75, 0.05);
}

.owner-table tr.is-incomplete td {
  background: rgba(240, 160, 75, 0.1);
}

.owner-table tr.is-incomplete td:first-child {
  box-shadow: inset 3px 0 var(--owner-accent);
}

.owner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.owner-badge-waiting,
.owner-badge-warning {
  color: var(--owner-accent);
}

.owner-badge-running {
  color: #8dbfeb;
}

.owner-badge-done {
  color: var(--owner-ok);
}

.owner-badge-failed {
  color: var(--owner-danger);
}

.owner-metrics,
.owner-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-billing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface-raised);
}

.owner-metric-label,
.owner-metric-value {
  display: block;
}

.owner-metric-label {
  margin-bottom: 6px;
  color: var(--owner-muted);
  font-size: 10px;
}

.owner-metric-value {
  overflow: hidden;
  color: var(--owner-text);
  font-family: var(--font-mono);
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.2;
  text-overflow: ellipsis;
}

.owner-metric-ok .owner-metric-value {
  color: var(--owner-ok);
}

.owner-metric-danger .owner-metric-value {
  color: var(--owner-danger);
}

.owner-link {
  color: var(--owner-text);
  font-weight: 700;
  text-decoration-color: var(--owner-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.owner-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--owner-accent);
  outline-offset: 3px;
}

.owner-board-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow-y: auto;
}

.owner-board-item {
  padding: 12px;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface-raised);
}

.owner-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.owner-board-body {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 4px;
  color: var(--owner-text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.owner-board-meta {
  margin: 0;
  color: var(--owner-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.owner-heat-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 8px;
  margin-bottom: 16px;
}

.owner-heat-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
}

.owner-heat-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.owner-heat-table th,
.owner-heat-table td {
  min-width: 50px;
  padding: 6px;
  border-right: 1px solid var(--owner-border);
  border-bottom: 1px solid var(--owner-border);
  text-align: center;
  white-space: nowrap;
}

.owner-heat-table thead th {
  background: var(--owner-surface-raised);
  color: var(--owner-muted);
}

.owner-heat-table .owner-heat-label {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 170px;
  background: var(--owner-surface-raised);
  color: var(--owner-text);
  text-align: left;
}

.owner-heat-cell {
  display: grid;
  width: 36px;
  min-height: 30px;
  margin: auto;
  place-items: center;
  border-radius: 4px;
  color: var(--owner-muted);
}

.owner-heat-cell.is-warm,
.owner-heat-cell.is-hot {
  color: #21170e;
  font-weight: 900;
}

.owner-heat-total {
  color: var(--owner-accent);
  font-weight: 900;
}

.owner-visitors {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  color: var(--owner-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.owner-visitors strong,
.owner-visitors span {
  padding: 6px 8px;
  border: 1px solid var(--owner-border);
  border-radius: 4px;
}

.owner-coupon-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.owner-coupon-form label {
  display: grid;
  gap: 8px;
  color: var(--owner-muted);
  font-size: 11px;
  font-weight: 700;
}

.owner-coupon-form input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--owner-border);
  border-radius: 8px;
  background: var(--owner-surface-raised);
  color: var(--owner-text);
  font: 500 12px/1.4 var(--font-mono);
}

.owner-coupon-form input:focus-visible,
.owner-coupon-form button:focus-visible {
  outline: 3px solid var(--owner-accent);
  outline-offset: 2px;
}

.owner-coupon-note { grid-column: span 2; }
.owner-invite-form { grid-template-columns: minmax(120px, .35fr) minmax(160px, .45fr) minmax(240px, 1fr) auto; }
.owner-invite-form .owner-coupon-note { grid-column: auto; }
.owner-coupon-message { min-height: 24px; margin: 12px 0 4px; color: var(--owner-muted); }
.owner-coupon-list { margin-top: 12px; }
.owner-connection .owner-request-alert {
  padding: 6px 10px;
  border: 1px solid var(--owner-accent);
  border-radius: 999px;
  background: var(--owner-accent);
  color: var(--owner-bg);
  font: 900 10px/1.2 var(--font-mono);
  white-space: nowrap;
}
.owner-request-actions { display: flex; gap: 8px; }
.owner-request-button {
  min-width: 64px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--owner-border);
  border-radius: 8px;
  background: var(--owner-surface-raised);
  color: var(--owner-text);
  cursor: pointer;
  font-weight: 900;
}
.owner-request-approve { border-color: var(--owner-ok); color: var(--owner-ok); }
.owner-request-reject { border-color: var(--owner-danger); color: var(--owner-danger); }
.owner-request-button:hover { background: var(--owner-bg); }
.owner-request-button:focus-visible { outline: 3px solid var(--owner-accent); outline-offset: 2px; }
.owner-request-button:disabled { cursor: wait; opacity: .55; }

.owner-review-card {
  border-color: color-mix(in srgb, var(--owner-ok) 40%, var(--owner-border));
}
.owner-review-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--owner-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}
.owner-review-findings,
.owner-review-history {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--owner-border);
}
.owner-review-findings h3,
.owner-review-history h3 {
  margin: 0 0 10px;
  color: var(--owner-text);
  font-size: 13px;
}
.owner-review-findings ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--owner-muted);
}
.owner-review-proposals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.owner-review-proposal {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface-raised);
}
.owner-review-proposal h4 {
  margin: 0 0 12px;
  color: var(--owner-text);
  font-size: 13px;
  line-height: 1.55;
}
.owner-review-detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 10px;
}
.owner-review-detail dt { color: var(--owner-accent); font-weight: 900; }
.owner-review-detail dd { min-width: 0; margin: 0; color: var(--owner-muted); overflow-wrap: anywhere; }
.owner-review-history-list { display: grid; gap: 8px; }
.owner-review-history-item {
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface-raised);
}
.owner-review-history-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.owner-review-history-item summary::-webkit-details-marker { display: none; }
.owner-review-history-item[open] summary { border-bottom: 1px solid var(--owner-border); }
.owner-review-history-item > .owner-review-proposals { padding: 0 12px 12px; }
.owner-review-history-item > .owner-empty { padding: 0 12px 12px; }
.owner-review-history-item summary:focus-visible { outline: 3px solid var(--owner-accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .owner-shell {
    padding: 16px 12px 40px;
  }

  .owner-header {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .owner-connection {
    width: 100%;
  }

  .owner-grid {
    grid-template-columns: 1fr;
  }

  .owner-card-wide {
    grid-column: auto;
  }

  .owner-card-body {
    padding: 12px;
  }

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

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

  .owner-heat-summary {
    grid-template-columns: 1fr;
  }

  .owner-coupon-form,
  .owner-invite-form { grid-template-columns: 1fr; }
  .owner-coupon-note { grid-column: auto; }
  .owner-request-actions { flex-direction: column; }
  .owner-request-button { width: 100%; }
  .owner-review-proposals { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .owner-metrics,
  .owner-stats-grid,
  .owner-billing-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-page *,
  .owner-page *::before,
  .owner-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background:
    radial-gradient(1100px 500px at 80% -12%, #ffe9cf 0%, rgba(255, 233, 207, 0) 60%),
    radial-gradient(900px 480px at -10% 8%, #fff5e2 0%, rgba(255, 245, 226, 0) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px; /* JetBrains Mono 公式推奨サイズ */
  line-height: 1.75;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App shell（左サイドバー + メイン） ---------- */
.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.nav-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
}
.nav-label {
  flex: 1;
}
.nav-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 8px;
}
.nav-item.active .nav-count {
  background: #fff;
  color: var(--accent-hover);
}
.nav-new-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  animation: blogNewGlow 3.2s ease-in-out infinite;
}
@keyframes blogNewGlow {
  0%, 72%, 100% { box-shadow: 0 0 0 0 transparent; }
  82% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-new-badge { animation: none; }
}
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.language-switcher {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}
.language-switcher-icon { flex: 0 0 auto; font-size: 15px; }
.language-switcher select {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 800 10px/1.2 var(--font);
  cursor: pointer;
}
.sidebar-legal {
  display: grid;
  gap: 4px;
  margin: 10px 2px 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sidebar-legal button,
.sidebar-legal a {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: 700 9px/1.55 var(--font);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.sidebar-legal button:hover,
.sidebar-legal a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.sidebar-legal button:focus-visible,
.sidebar-legal a:focus-visible { border-radius: 3px; outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-shell {
  margin-bottom: 8px;
}
.auth-login {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.auth-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.auth-login:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.auth-email {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent-hover);
  font-family: var(--font-display);
  font-weight: 900;
}
.auth-logout {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-top-color: var(--border);
  background: transparent;
  color: var(--tomato);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.auth-login:focus-visible,
.auth-logout:focus-visible,
.sidebar-profile-main:focus-visible,
.profile-types input:focus-visible + span {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
.sidebar-profile {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
@property --profile-premium-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.sidebar-profile.profile-premium {
  --profile-premium-angle: 0deg;
  position: relative;
  isolation: isolate;
  border-color: transparent;
}
.sidebar-profile.profile-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--profile-premium-angle),
    #ffb199,
    #ffd76e,
    #a8e6a3,
    #8ec9ff,
    #d9a7ff,
    #ffb199
  );
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: profilePremiumAurora 8s linear infinite;
}
@keyframes profilePremiumAurora {
  to { --profile-premium-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-profile.profile-premium::before,
  .premium-hero::before { animation: none; }
}
.sidebar-profile-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-profile:hover { border-color: var(--accent); }
.sidebar-profile-main:hover { background: var(--accent-soft); }
.sidebar-profile .auth-logout:hover { background: color-mix(in srgb, var(--tomato) 8%, var(--surface)); }
.sidebar-profile-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  font-size: 18px;
}
.sidebar-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-profile-copy { display: grid; min-width: 0; line-height: 1.25; }
.sidebar-profile-copy strong,
.sidebar-profile-copy span,
.sidebar-profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-copy strong { font-size: 11px; }
.sidebar-profile-copy span { color: var(--ink-muted); font-size: 9px; }
.sidebar-profile-copy small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }
.sidebar-profile-copy .sidebar-profile-premium-badge {
  justify-self: start;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, #ffd76e 64%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #ffd76e 20%, var(--surface));
  color: var(--ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.25;
}
.sidebar-profile-edit { color: var(--accent-hover); font-size: 9px; font-weight: 900; }

/* ---------- 共有範囲の注意 ---------- */
.studio-share-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--tomato) 48%, var(--border));
  border-left: 4px solid var(--tomato);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tomato) 6%, var(--surface));
}
.studio-share-notice-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--tomato);
  color: #fff;
  font-weight: 900;
}
.studio-share-notice p { display: grid; gap: 2px; margin: 0; line-height: 1.45; }
.studio-share-notice strong { color: var(--ink); font-size: 12px; }
.studio-share-notice p span { color: var(--info); font-size: 10px; font-weight: 800; }
.studio-share-confirm {
  margin: 0 0 8px;
  color: var(--tomato);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

/* ---------- レシピ開発レーン ---------- */
.studio-lane-picker {
  display: grid;
  gap: 12px;
  margin: 22px 0 20px;
}
.studio-lane-heading { display: grid; gap: 2px; }
.studio-lane-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.studio-lane-option {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 52px; /* 佐藤指示: 縦を半分に */
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.studio-lane-option strong { font-family: var(--font-display); font-size: 15px; line-height: 1.45; }
.studio-lane-option span { color: var(--ink-muted); font-size: 10.5px; line-height: 1.55; }
.studio-lane-option small {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--experiment-soft);
  color: var(--experiment-deep);
  font-size: 8px;
  font-weight: 900;
}
.studio-lane-option:hover { transform: translateY(-1px); }
.studio-lane-option.is-standard.active {
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--surface), var(--accent-soft));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.studio-lane-option.is-experiment {
  border: 2px dashed var(--experiment-border);
  background: linear-gradient(145deg, var(--surface), var(--experiment-soft));
}
.studio-lane-option.is-experiment strong { color: var(--experiment-deep); }
.studio-lane-option.is-experiment.active {
  border-color: var(--experiment);
  background: linear-gradient(145deg, #fffafd, var(--experiment-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--experiment) 13%, transparent);
}
.studio-lane-option:focus-visible,
.tachometer-levels button:focus-visible,
.tachometer-input:focus-visible,
.draft-save-control:focus-within {
  outline: 3px solid color-mix(in srgb, var(--experiment) 30%, transparent);
  outline-offset: 3px;
}
.card.intro.is-experiment-lane {
  border-color: color-mix(in srgb, var(--experiment) 42%, var(--border));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--experiment) 10%, transparent);
}
.tachometer-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 20px 16px 16px;
  border: 1px dashed var(--experiment-border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--experiment) 12%, transparent), transparent 56%),
    var(--experiment-soft);
  color: var(--experiment-deep);
}
.tachometer-panel.hidden { display: none; }
.queue-help-button.tachometer-help-button {
  position: absolute;
  top: 12px;
  right: 12px;
  border-color: var(--experiment);
  color: var(--experiment-deep);
}
.queue-help-button.tachometer-help-button:hover {
  background: var(--experiment);
  color: var(--surface);
}
.queue-help-button.tachometer-help-button:focus-visible {
  outline-color: color-mix(in srgb, var(--experiment) 45%, transparent);
}
.tachometer-copy { display: grid; justify-items: center; gap: 2px; text-align: center; }
.experiment-kicker,
.drafts-kicker {
  color: var(--experiment);
  font: 800 9px/1.2 var(--font-mono);
  letter-spacing: .14em;
}
.tachometer-copy h3 { margin: 0; font: 900 18px/1.4 var(--font-display); }
.tachometer-shell {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 304px);
  min-height: 152px;
  isolation: isolate;
}
.tachometer-gauge {
  position: relative;
  width: 280px;
  max-width: 100%;
  height: 132px;
  overflow: hidden;
}
.tachometer-gauge::before {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 252px;
  height: 252px;
  border-radius: 50%;
  background: conic-gradient(from 270deg, #d8b4c3 0 28deg, #a95f7d 28deg 60deg, #6f2442 60deg 90deg, transparent 90deg 360deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--experiment) 34%, transparent);
  content: '';
  transform: translateX(-50%);
}
.tachometer-gauge::after {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--surface);
  content: '';
  transform: translateX(-50%);
}
.tachometer-needle {
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 2;
  width: 94px;
  height: 4px;
  border-radius: 999px 3px 3px 999px;
  background: var(--experiment-deep);
  box-shadow: 0 1px 3px rgba(67, 21, 43, .28);
  transform: translateX(-100%) rotate(var(--tachometer-angle));
  transform-origin: 100% 50%;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.tachometer-hub {
  position: absolute;
  left: 50%;
  bottom: -1px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--experiment);
  box-shadow: 0 0 0 1px var(--experiment);
  transform: translateX(-50%);
}
.tachometer-tick {
  position: absolute;
  z-index: 4;
  color: var(--experiment-deep);
  font: 900 11px/1 var(--font-mono);
}
.tick-one { left: 17px; bottom: 7px; }
.tick-two { top: 10px; left: 50%; transform: translateX(-50%); }
.tick-three { right: 8px; bottom: 7px; }
.tachometer-input {
  position: relative;
  z-index: 5;
  width: 272px;
  max-width: calc(100% - 16px);
  height: 28px;
  margin-top: -8px;
  accent-color: var(--experiment);
  cursor: grab;
}
.tachometer-input:active { cursor: grabbing; }
.tachometer-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 360px); }
.tachometer-levels button {
  min-height: 38px;
  border: 1px solid var(--experiment-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--experiment-deep);
  cursor: pointer;
  font: 800 10px/1.2 var(--font);
}
.tachometer-levels button.active { background: var(--experiment); color: #fff; }
.tachometer-description { min-height: 42px; margin: 0; color: var(--experiment-deep); font-size: 11px; font-weight: 800; line-height: 1.7; text-align: center; }
.experiment-caution { margin: 0; color: var(--experiment); font-size: 9.5px; font-weight: 700; line-height: 1.6; text-align: center; }

/* 全開時のメラメラ炎アニメ。動きはここだけに集中させる。 */
.tachometer-flames { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tachometer-shell.is-full-throttle .tachometer-flames { opacity: 1; }
.tachometer-flames i {
  position: absolute;
  bottom: 6px;
  width: 38px;
  height: 76px;
  border-radius: 52% 48% 58% 42%;
  background: linear-gradient(0deg, rgba(210,64,30,.88), rgba(245,132,35,.7) 48%, rgba(255,211,91,.15) 82%, transparent);
  filter: blur(1px);
  transform-origin: 50% 100%;
  animation: experimentFlameFlicker .74s ease-in-out infinite alternate;
}
.tachometer-flames i:nth-child(1) { left: 2px; animation-delay: -.12s; }
.tachometer-flames i:nth-child(2) { left: 50px; height: 58px; animation-delay: -.42s; }
.tachometer-flames i:nth-child(3) { left: 50%; height: 68px; transform: translateX(-50%); animation-delay: -.25s; }
.tachometer-flames i:nth-child(4) { right: 50px; height: 60px; animation-delay: -.54s; }
.tachometer-flames i:nth-child(5) { right: 2px; animation-delay: -.34s; }
@keyframes experimentFlameFlicker {
  0% { opacity: .5; scale: .88 1; translate: 0 5px; rotate: -3deg; }
  55% { opacity: .9; scale: 1.04 1.12; translate: 2px -3px; rotate: 4deg; }
  100% { opacity: .68; scale: .94 1.2; translate: -2px -6px; rotate: -2deg; }
}
.draft-save-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.draft-save-control input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--experiment); }
.draft-save-control span { display: grid; gap: 2px; }
.draft-save-control strong { color: var(--ink); font-size: 12px; }
.draft-save-control small { color: var(--ink-muted); font-size: 9.5px; }
.dialogue-draft-save { margin-top: 12px; }

.studio-drafts {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--experiment) 32%, var(--border));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.studio-drafts.hidden { display: none; }
.studio-drafts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.studio-drafts-head h2 { margin: 3px 0 2px; font: 900 20px/1.4 var(--font-display); }
.studio-drafts-head p { margin: 0; color: var(--ink-muted); font-size: 11px; }
.drafts-limit { padding: 4px 9px; border-radius: 999px; background: var(--experiment-soft); color: var(--experiment-deep); font: 800 10px/1.4 var(--font-mono); }
.studio-drafts-list { display: grid; gap: 8px; }
.studio-draft-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.studio-draft-item.is-experiment { border-style: dashed; border-color: var(--experiment-border); background: var(--experiment-soft); }
.studio-draft-item h3 { margin: 3px 0; font: 900 15px/1.4 var(--font-display); }
.studio-draft-item small { color: var(--ink-faint); font-size: 9px; }
.draft-item-meta { color: var(--experiment); font-size: 9.5px; font-weight: 900; }
.app-version,
.share-version {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0;
}
.main {
  padding: 26px 30px 100px;
  min-width: 0;
}
.view-head {
  margin-bottom: 18px;
}
.view-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
}
.view-lead {
  color: var(--ink-muted);
  margin: 0;
  font-size: 13px;
  max-width: 720px;
}

/* 生成スタジオ: 入力(左) + ライブモニター(右) の常設2カラム */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(380px, 7fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 24px;
}
.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.run-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 12px;
}
.dbg-hb {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #61c454;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(232, 99, 10, 0.3));
}
.brand-text h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--accent-hover);
}
.brand-text p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.topbar-actions {
  display: flex;
  gap: 8px;
}

/* ---------- Layout（PC広幅 + 2カラム） ---------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 入力パネルは読みやすい幅でセンタリング */
.card.intro {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
.section-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--ink);
}
.section-lead {
  color: var(--ink-muted);
  margin: 0 0 20px;
  font-size: 13px;
}
.hidden {
  display: none !important;
}

/* ---------- Dropzone ---------- */
.dropzone {
  display: block;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  margin-bottom: 16px;
}
.dropzone:hover,
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 38px 16px;
  text-align: center;
}
.dz-icon {
  font-size: 42px;
}
.dz-title {
  font-weight: 700;
  font-size: 15px;
}
.dz-hint {
  color: var(--ink-faint);
  font-size: 12px;
}
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(51, 38, 27, 0.75);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

/* ---------- Fields ---------- */
.field {
  margin-bottom: 16px;
}
.field-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ink);
}
.field-sub {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.text-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 11px 14px;
  font-size: 13px;
  font-family: var(--font);
}
.text-input::placeholder {
  color: var(--ink-faint);
}
.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 99, 10, 0.16);
}
select.text-input {
  appearance: none;
}
.genre-field {
  margin-bottom: 18px;
}
.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.genre-chip {
  flex: 0 1 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 12px/1.35 var(--font);
  padding: 8px 11px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.genre-chip:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}
.genre-chip.active {
  background: var(--accent-soft);
  border-color: rgba(232, 99, 10, 0.42);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px rgba(232, 99, 10, 0.12);
}
.genre-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 99, 10, 0.16);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s, border-color 0.15s, box-shadow 0.15s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: linear-gradient(180deg, #f57224, var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(232, 99, 10, 0.35);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ef6716, var(--accent-hover));
}
.btn-primary:disabled {
  background: var(--border);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink-muted);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.btn-icon {
  padding: 7px 11px;
}
.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}
.btn-block {
  width: 100%;
  margin-top: 4px;
  padding: 14px 20px;
  font-size: 14px;
}
.engine-badge {
  text-align: center;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  margin: 10px 0 0;
}

/* ---------- 統計ストリップ ---------- */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 1240px;
  padding: 0 24px;
}
.stat-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  box-shadow: var(--shadow);
}
.stat-pill strong {
  color: var(--accent-hover);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Progress（進捗パネル全幅） ---------- */
.progress-card {
  --fastpass-gold: #c88d15;
  --fastpass-gold-deep: #76500a;
  --fastpass-gold-soft: #fff3c7;
  width: 100%;
  position: relative;
  isolation: isolate;
}
.fastpass-badge {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--fastpass-gold) 68%, var(--border));
  border-radius: 999px;
  background: linear-gradient(110deg, #ffe59a 0%, #f4bd42 32%, #aee1ec 58%, #d9b8f5 76%, #ffe59a 100%);
  background-size: 220% 100%;
  box-shadow: 0 4px 16px rgba(159, 103, 8, 0.2);
  color: #3d2800;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.4;
  animation: fastpassBadgeShimmer 3.2s linear infinite;
}
.progress-card.is-fastpass .run-clock { display: none; }
.progress-card.fastpass-spark::after {
  position: absolute;
  inset: -10px;
  z-index: 4;
  border-radius: calc(var(--radius) + 10px);
  background:
    radial-gradient(circle at 9% 15%, rgba(255, 205, 73, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 3%, rgba(255, 245, 186, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 5%, rgba(174, 225, 236, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 18%, rgba(217, 184, 245, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 74%, rgba(255, 205, 73, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 92%, rgba(255, 237, 154, 0.9) 0 2px, transparent 3px);
  content: '';
  pointer-events: none;
  animation: fastpassSpark 1s ease-out both;
}
@keyframes fastpassBadgeShimmer {
  to { background-position: -220% 0; }
}
@keyframes fastpassSpark {
  0% { opacity: 0; transform: scale(0.985); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.025); }
}
.progress-note {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 4px 0 0;
  min-height: 1.5em;
  font-family: var(--font-mono);
}
.queue-status-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.queue-status-window.is-generating {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.queue-status-window.is-fastpass {
  border-color: color-mix(in srgb, var(--fastpass-gold) 72%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(174, 225, 236, 0.42), transparent 42%),
    linear-gradient(120deg, var(--fastpass-gold-soft), #fffdf4 62%, #f8edff);
  box-shadow: 0 8px 24px rgba(145, 94, 8, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}
.queue-status-window.is-fastpass .queue-status-copy strong { color: var(--fastpass-gold-deep); }
.queue-status-window.is-fastpass .queue-status-copy span { color: #664d1f; }
.queue-status-window.is-fastpass .queue-help-button {
  border-color: var(--fastpass-gold);
  color: var(--fastpass-gold-deep);
}
.queue-status-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.queue-status-copy strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.queue-status-copy span {
  color: var(--ink-muted);
  font-size: 12px;
}
.queue-help-button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-hover);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.queue-help-button:hover {
  background: var(--accent);
  color: var(--surface);
  transform: translateY(-1px);
}
.queue-help-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.queue-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px dashed #d79952;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(253, 234, 219, 0.74)),
    var(--accent-soft);
  color: var(--ink);
}
.queue-card.is-running {
  border-style: solid;
  border-color: rgba(62, 142, 79, 0.5);
  background: var(--herb-soft);
}
.queue-card.is-fastpass,
.queue-card.is-fastpass.is-running {
  border: 1px solid color-mix(in srgb, var(--fastpass-gold) 76%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 184, 245, 0.32), transparent 38%),
    linear-gradient(110deg, #fff0b8, #fffaf0 58%, #edf9fb);
  box-shadow: 0 10px 28px rgba(145, 94, 8, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.queue-card.is-fastpass .queue-stub-hole { background: color-mix(in srgb, var(--fastpass-gold) 64%, transparent); }
.queue-card.is-fastpass .queue-copy strong,
.queue-card.is-fastpass.is-running .queue-copy strong { color: var(--fastpass-gold-deep); }
.queue-card.is-fastpass .queue-copy span { color: #664d1f; }
.queue-card.is-fastpass .queue-state {
  border: 1px solid color-mix(in srgb, var(--fastpass-gold) 58%, transparent);
  background: rgba(255, 249, 226, 0.88);
  color: var(--fastpass-gold-deep);
  font-weight: 900;
}
.queue-stub {
  display: grid;
  gap: 5px;
}
.queue-stub-hole {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(201, 82, 6, 0.28);
}
.queue-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.queue-copy strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--accent-hover);
}
.queue-card.is-running .queue-copy strong {
  color: #245f31;
}
.queue-copy span {
  color: var(--ink-muted);
  font-size: 12.5px;
}
.queue-state {
  justify-self: end;
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 253, 249, 0.8);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* コンソール(左) + Tips(右) の2カラム */
.progress-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

/* ---------- リアルタイム・デバッグコンソール ---------- */
.debug-console {
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4);
}
.dbg-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: #16110c;
  border-bottom: 1px solid var(--term-border);
  flex-shrink: 0;
}
.dbg-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dbg-dot.r { background: #f4695c; }
.dbg-dot.y { background: #f5bd4f; }
.dbg-dot.g { background: #61c454; }
.dbg-title {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8f7f68;
  letter-spacing: 0.04em;
}
.fastpass-terminal-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(245, 189, 79, 0.42);
  border-radius: 999px;
  background: rgba(245, 189, 79, 0.1);
  color: #f7cf76;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dbg-clock {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #f5bd4f;
  font-variant-numeric: tabular-nums;
}
.dbg-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  max-height: 380px;
  scrollbar-width: thin;
  scrollbar-color: #4b3b28 transparent;
}
.dbg-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  white-space: pre-wrap;
  word-break: break-word;
  animation: dbgIn 0.15s ease;
}
@keyframes dbgIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}
.dbg-time {
  color: #6d5c46;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dbg-msg {
  color: var(--term-ink);
}
.dbg-line.info .dbg-msg { color: #b8a488; }
.dbg-line.debug .dbg-msg { color: #7e8f6f; }
.dbg-line.run .dbg-msg { color: #f5bd4f; }
.dbg-line.ok .dbg-msg { color: #7fd06f; }
.dbg-line.warn .dbg-msg { color: #f4a15c; }
.dbg-line.err .dbg-msg { color: #f4695c; }
/* LLMトークンの生ストリーム */
.dbg-stream {
  color: #9b8a70;
  white-space: pre-wrap;
  word-break: break-all;
  border-left: 2px solid #4b3b28;
  padding-left: 10px;
  margin: 4px 0 6px 52px;
  font-size: 11px;
  line-height: 1.5;
  max-height: 7.5em;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.dbg-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #f5bd4f;
  vertical-align: text-bottom;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- SVGパイプライン ---------- */
.pipeline-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 8px 0 4px;
}
#pipelineSvg {
  width: 100%;
  min-width: 620px;
  height: auto;
}
.pl-edge {
  stroke: var(--border-strong);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke 0.4s ease;
}
.pl-edge.flowing {
  stroke: url(#edgeFlow);
  stroke-dasharray: 8 6;
  animation: dash 0.8s linear infinite;
}
.progress-card.is-fastpass #edgeFlow stop:first-child,
.progress-card.is-fastpass #edgeFlow stop:last-child { stop-color: #c88d15; }
.progress-card.is-fastpass #edgeFlow stop:nth-child(2) { stop-color: #fff1a8; }
.progress-card.is-fastpass .pl-edge.flowing {
  stroke-width: 4;
  stroke-dasharray: 4 7 18 7;
  filter: drop-shadow(0 0 4px rgba(232, 179, 49, 0.72));
  animation: fastpassLaneFlow 0.72s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: -14;
  }
}
.pl-circle {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 2;
  transition: all 0.35s ease;
}
.pl-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
}
.pl-icon {
  font-size: 22px;
}
.pl-label {
  fill: var(--ink-faint);
  font-size: 11px;
  font-family: var(--font-mono);
  transition: fill 0.3s ease;
}
.pl-node.active .pl-circle {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.pl-node.active .pl-halo {
  opacity: 1;
  animation: pulse 1.4s ease-in-out infinite;
}
.pl-node.active .pl-label {
  fill: var(--accent-hover);
  font-weight: 700;
}
.progress-card.is-fastpass .pl-node.active .pl-circle {
  fill: #fff6d7;
  stroke: var(--fastpass-gold);
  animation: fastpassNodeGlow 1.35s ease-in-out infinite;
}
.progress-card.is-fastpass .pl-node.active .pl-halo { stroke: #e4b43d; }
.progress-card.is-fastpass .pl-node.active .pl-label { fill: var(--fastpass-gold-deep); }
.pl-node.done .pl-circle {
  fill: var(--herb-soft);
  stroke: var(--herb);
}
.pl-node.done .pl-label {
  fill: var(--herb);
  font-weight: 700;
}
@keyframes pulse {
  0%,
  100% {
    r: 32px;
    opacity: 0.7;
  }
  50% {
    r: 36px;
    opacity: 0.15;
  }
}
@keyframes fastpassLaneFlow {
  to { stroke-dashoffset: -36; }
}
@keyframes fastpassNodeGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(211, 153, 24, 0.48)); }
  50% { filter: drop-shadow(0 0 11px rgba(255, 205, 73, 0.96)); }
}

/* ---------- ひらめきメイラード: 住人審査シアター ---------- */
.resident-review-theater {
  --resident-review-gold: #a86f08;
  --resident-review-gold-soft: #fff1bc;
  position: relative;
  overflow: hidden;
  margin: 12px 0 8px;
  padding: 16px;
  border: 1px solid var(--experiment-border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--experiment) 7%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--experiment) 7%, transparent) 1px, transparent 1px),
    linear-gradient(145deg, var(--surface), var(--experiment-soft));
  background-size: 16px 16px, 16px 16px, auto;
  isolation: isolate;
}
.resident-review-theater-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.resident-review-kicker {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--experiment-deep);
  color: var(--surface);
  font: 800 9px/1.4 var(--font-mono);
  letter-spacing: .1em;
}
.resident-review-theater-head strong {
  color: var(--experiment-deep);
  font: 900 15px/1.3 var(--font-display);
}
.resident-review-theater-head > span:last-child {
  color: var(--experiment);
  font: 700 10px/1.4 var(--font-mono);
}
.resident-review-swarm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}
.resident-review-theater.is-revealing .resident-review-swarm { display: none; }
.resident-review-pop {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: end;
  min-width: 0;
  transform: rotate(var(--resident-pop-tilt));
  animation: residentReviewPop .44s cubic-bezier(.2, .9, .25, 1.25) both;
  animation-delay: calc(var(--resident-pop-index) * 45ms);
}
.resident-review-avatar,
.resident-review-score-avatar,
.resident-review-panel-avatar-shell {
  display: grid;
  overflow: hidden;
  place-items: end center;
  background: color-mix(in srgb, var(--surface) 82%, var(--experiment-soft));
}
.resident-review-avatar {
  width: 48px;
  height: 64px;
  border-radius: 24px 24px 10px 10px;
}
.resident-review-avatar img,
.resident-review-score-avatar img,
.resident-review-panel-avatar-shell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.resident-review-avatar > span,
.resident-review-score-avatar > span,
.resident-review-panel-avatar-shell > span {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
}
.resident-review-avatar > span.is-visible,
.resident-review-score-avatar > span.is-visible,
.resident-review-panel-avatar-shell > span.is-visible { display: grid; }
.resident-review-bubble {
  position: relative;
  min-width: 0;
  margin: 0 0 12px -2px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--experiment) 34%, var(--border));
  border-radius: 10px 10px 10px 2px;
  background: var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--experiment) 9%, transparent);
}
.resident-review-bubble strong,
.resident-review-bubble span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resident-review-bubble strong {
  color: var(--experiment-deep);
  font-size: 9px;
  white-space: nowrap;
}
.resident-review-bubble span {
  margin-top: 2px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}
.resident-review-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--experiment-border);
}
.resident-review-score {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  animation: residentScoreIn .34s cubic-bezier(.2, .85, .25, 1.2) both;
}
.resident-review-score.is-gold {
  border-color: var(--resident-review-gold);
  background: linear-gradient(145deg, var(--surface), var(--resident-review-gold-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--resident-review-gold) 20%, transparent);
}
.resident-review-score-avatar {
  width: 36px;
  height: 42px;
  border-radius: 18px 18px 8px 8px;
}
.resident-review-score-label {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.resident-review-score-label strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resident-review-score-label small { color: var(--ink-faint); font-size: 8px; }
.resident-review-score b {
  color: var(--experiment-deep);
  font: 900 18px/1 var(--font-mono);
}
.resident-review-score.is-gold b { color: var(--resident-review-gold); }
.resident-review-score b small { margin-left: 1px; font-size: 8px; }
.resident-review-total {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--experiment-deep);
  color: var(--surface);
  text-align: center;
  animation: residentTotalBang .5s cubic-bezier(.2, .9, .2, 1.25) both;
}
.resident-review-total > span { justify-self: end; font-size: 10px; font-weight: 800; }
.resident-review-total > strong { font: 900 38px/1 var(--font-display); }
.resident-review-total > strong small { margin-left: 3px; font-size: 14px; }
.resident-review-total > b { justify-self: start; font: 900 15px/1.2 var(--font-display); }
.resident-review-theater.is-celebration::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 8% 18%, var(--resident-review-gold) 0 3px, transparent 4px),
    radial-gradient(circle at 24% 5%, var(--experiment) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 12%, var(--herb) 0 3px, transparent 4px),
    radial-gradient(circle at 69% 6%, var(--resident-review-gold) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 20%, var(--experiment) 0 3px, transparent 4px),
    radial-gradient(circle at 81% 84%, var(--herb) 0 3px, transparent 4px),
    radial-gradient(circle at 13% 88%, var(--resident-review-gold) 0 3px, transparent 4px);
  content: '';
  pointer-events: none;
  animation: residentConfetti 1.25s ease-out both;
}
@keyframes residentReviewPop {
  from { opacity: 0; transform: translateY(20px) scale(.82) rotate(var(--resident-pop-tilt)); }
  to { opacity: 1; transform: rotate(var(--resident-pop-tilt)); }
}
@keyframes residentScoreIn {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@keyframes residentTotalBang {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}
@keyframes residentConfetti {
  0% { opacity: 0; transform: translateY(-18px) scale(.96); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateY(28px) scale(1.03); }
}

/* ---------- 実験作詳細: 住人審査パネル ---------- */
.resident-review-panel {
  --resident-review-gold: #a86f08;
  --resident-review-gold-soft: #fff4cf;
  border-color: var(--experiment-border);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--experiment) 12%, transparent), transparent 38%),
    var(--surface);
}
.resident-review-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--experiment) 24%, var(--border));
}
.resident-review-panel-head > div:first-child > span {
  color: var(--experiment);
  font: 800 9px/1.4 var(--font-mono);
  letter-spacing: .12em;
}
.resident-review-panel-head .block-title { margin: 2px 0 0; }
.resident-review-panel-total {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 112px;
  padding: 8px 12px;
  border: 1px solid var(--resident-review-gold);
  border-radius: var(--radius-sm);
  background: var(--resident-review-gold-soft);
  color: var(--resident-review-gold);
}
.resident-review-panel-total small { color: var(--experiment-deep); font-size: 10px; font-weight: 900; }
.resident-review-panel-total strong { margin-left: auto; font: 900 30px/1 var(--font-display); }
.resident-review-panel-total span { font-size: 11px; font-weight: 900; }
.resident-review-panel-lead { margin: 12px 0 16px; color: var(--ink-muted); font-size: 11px; }
.resident-review-panel-items { display: grid; gap: 8px; }
.resident-review-panel-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.resident-review-panel-item.is-gold {
  border-color: color-mix(in srgb, var(--resident-review-gold) 56%, var(--border));
  background: linear-gradient(90deg, var(--resident-review-gold-soft), var(--surface));
}
.resident-review-panel-avatar {
  display: grid;
  width: 48px;
  height: 56px;
  overflow: hidden;
  border-radius: 24px 24px 10px 10px;
  background: var(--experiment-soft);
  place-items: center;
  font-size: 22px;
}
.resident-review-panel-avatar-shell { width: 100%; height: 100%; }
.resident-review-panel-copy { min-width: 0; }
.resident-review-panel-label {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}
.resident-review-panel-label strong { color: var(--experiment-deep); font: 900 12px/1.4 var(--font-display); }
.resident-review-panel-label > span { overflow: hidden; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.resident-review-panel-label b { color: var(--experiment-deep); font: 900 18px/1 var(--font-mono); }
.resident-review-panel-item.is-gold .resident-review-panel-label b { color: var(--resident-review-gold); }
.resident-review-panel-label b small { margin-left: 2px; font-size: 8px; }
.resident-review-bar {
  display: block;
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--experiment) 12%, var(--border));
}
.resident-review-bar > span {
  display: block;
  width: var(--resident-review-score);
  height: 100%;
  border-radius: inherit;
  background: var(--experiment);
}
.resident-review-panel-item.is-gold .resident-review-bar > span { background: var(--resident-review-gold); }
.resident-review-panel-copy p { margin: 5px 0 0; color: var(--ink-muted); font-size: 10px; line-height: 1.55; }

@media (max-width: 900px) {
  .resident-review-swarm,
  .resident-review-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .resident-review-theater-head { grid-template-columns: 1fr auto; }
  .resident-review-kicker { grid-column: 1 / -1; justify-self: start; }
  .resident-review-swarm,
  .resident-review-results { grid-template-columns: 1fr; }
  .resident-review-total { grid-template-columns: 1fr; gap: 4px; }
  .resident-review-total > span,
  .resident-review-total > b { justify-self: center; }
  .resident-review-panel-item { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .resident-review-panel-avatar { width: 40px; height: 48px; }
  .resident-review-panel-label { grid-template-columns: 1fr auto; }
  .resident-review-panel-label > span { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .fastpass-badge,
  .progress-card.is-fastpass .pl-edge.flowing,
  .progress-card.is-fastpass .pl-node.active .pl-circle,
  .resident-review-pop,
  .resident-review-score,
  .resident-review-total { animation: none; }
  .progress-card.fastpass-spark::after { display: none; }
  .resident-review-theater.is-celebration::after { display: none; }
}

/* ---------- 今日のTips 小窓 ---------- */
.tips-window {
  background: linear-gradient(150deg, #fff7ea, var(--accent-soft));
  border: 1px solid #f3c99a;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
}
.tips-window.fade-in {
  animation: tipFade 0.5s ease;
}
@keyframes tipFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tips-window-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tips-badge {
  font-weight: 700;
  color: var(--accent-hover);
  font-size: 12px;
}
.tips-counter {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.tips-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
  flex: 1;
}
.tips-cat {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--info);
  font-family: var(--font-mono);
}

/* ---------- Result（PCは2カラムの広大レイアウト） ---------- */
.result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recipe-head {
  border-left: 5px solid var(--accent);
  padding: 6px 0 6px 20px;
  background: linear-gradient(90deg, var(--accent-soft), rgba(253, 234, 219, 0));
  border-radius: 0 var(--radius) var(--radius) 0;
}
.recipe-head h1,
.recipe-head h2 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  margin: 0 0 4px;
  color: var(--ink);
}
.recipe-head .subtitle {
  color: var(--accent-hover);
  font-size: 13.5px;
  margin: 0 0 8px;
}
.recipe-head.is-experiment {
  border-left-color: var(--experiment);
  background: linear-gradient(90deg, var(--experiment-soft), rgba(245, 232, 238, 0));
}
.recipe-head.is-draft { border-left-style: dashed; }
.draft-detail-badge,
.experiment-recipe-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border: 1px dashed var(--experiment-border);
  border-radius: 999px;
  background: var(--experiment-soft);
  color: var(--experiment-deep);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.35;
}
.draft-detail-badge { margin: 0 6px 8px 0; border-color: var(--border-strong); background: var(--surface-2); color: var(--ink); }
.recipe-detail-experiment-badge { margin: 0 6px 8px 0; }
.experiment-detail-note { display: inline-block; margin: 0 0 8px; color: var(--experiment); font-size: 10px; font-weight: 800; }
.draft-image-placeholder {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: repeating-linear-gradient(-45deg, var(--surface) 0 14px, var(--surface-2) 14px 28px);
  color: var(--ink-muted);
  text-align: center;
}
.draft-image-placeholder > span { font-size: 36px; }
.draft-image-placeholder strong { color: var(--ink); font-family: var(--font-display); font-size: 18px; }
.draft-image-placeholder small { font-size: 11px; }
.step-visual.placeholder.is-draft-placeholder {
  animation: none;
  border-color: var(--experiment-border);
  background: var(--experiment-soft);
  color: var(--experiment-deep);
}
.publish-draft-button { background: var(--experiment); border-color: var(--experiment); }
.publish-draft-button:hover { background: var(--experiment-deep); border-color: var(--experiment-deep); }
.draft-image-note { color: var(--experiment); font-size: 10px; font-weight: 800; }
.recipe-translation-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.recipe-translation-bar.is-prominent {
  border-color: var(--info);
  background: linear-gradient(90deg, var(--info-soft), var(--surface));
  box-shadow: 0 8px 26px rgba(47, 127, 163, 0.14);
}
.recipe-translation-copy {
  display: grid;
  gap: 2px;
}
.recipe-translation-copy strong {
  color: var(--ink);
  font: 900 14px/1.4 var(--font-display);
}
.recipe-translation-copy span {
  color: var(--ink-muted);
  font-size: 11.5px;
}
.recipe-translation-select {
  display: grid;
  gap: 3px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
}
.recipe-translation-select select {
  min-width: 132px;
  min-height: 38px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 800 13px/1.2 var(--font-sans);
}
.recipe-translation-select select:focus-visible,
.recipe-translation-bar [data-translation-action]:focus-visible {
  outline: 3px solid rgba(47, 127, 163, 0.28);
  outline-offset: 2px;
}
.recipe-translation-bar [data-translation-action] {
  min-width: 190px;
}
.recipe-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: 12px;
  font-family: var(--font-mono);
}
.recipe-meta span strong {
  color: var(--ink);
}

.block-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.block-title-row .block-title {
  margin-bottom: 0;
}
.recipe-top-tools {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recipe-print-help {
  flex-basis: 100%;
  color: var(--ink-muted);
  font-size: 12px;
}
.parent-recipe-link {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
}
.link-button {
  border: 0;
  padding: 0;
  color: var(--accent-hover);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.recipe-tool-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #f0d4b6;
  border-radius: var(--radius-sm);
  background: #fff8ee;
}
.recipe-tool-panel textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font: inherit;
  line-height: 1.6;
  background: #fffdf8;
  color: var(--ink);
}
.recipe-tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.recipe-tool-actions .btn,
.block-title-row .btn,
.recipe-top-tools .btn {
  min-height: 44px;
}
.recipe-tool-msg {
  min-height: 20px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.recipe-tool-msg.ok {
  color: var(--success);
}
.recipe-tool-msg.err {
  color: var(--error);
}
.consult-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #efc99e;
  border-radius: var(--radius-sm);
  background: #fffdf8;
}
.consult-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 900;
  font-size: 12px;
}
.consult-card p {
  margin: 10px 0;
}
.consult-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.consult-line strong {
  color: var(--ink);
}
.consult-line.caution strong {
  color: var(--error);
}
.alternatives-card {
  border-left: 4px solid #f0a23a;
}
.alternatives-list {
  display: grid;
  gap: 10px;
}
.alternative-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fffdf8;
}
.alternative-target {
  color: var(--accent-hover);
  font-weight: 900;
  font-size: 13px;
}
.alternative-item p {
  margin: 8px 0;
}
.alternative-tradeoff {
  font-size: 12px;
  color: var(--ink-muted);
}

/* 食材テーブル */
.ing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ing-table th,
.ing-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ing-table th {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}
.ing-table .amount {
  white-space: nowrap;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ing-table .note {
  color: var(--ink-muted);
  font-size: 12px;
}

/* ---------- SOP: 各工程 = 左(作業写真/AIスケッチ) × 右(テキスト) の2カラム ---------- */
.sop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.sop-card {
  overflow: hidden;
}
.sop-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.easy-mode-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #b8d9b4;
  border-radius: 999px;
  background: var(--herb-soft);
  color: #245f31;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
}
.easy-mode-badge.hidden {
  display: none;
}
.sop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 6px;
  margin: 0 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
}
.sop-tab {
  display: grid;
  place-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: var(--ink);
  font: 800 14px/1.25 var(--font-sans);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.sop-tab-label,
.sop-tab-help {
  display: block;
}
.sop-tab-label {
  font-size: 15px;
  font-weight: 900;
}
.sop-tab-help {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}
.sop-tab:hover {
  color: var(--ink);
}
.sop-tab:focus-visible {
  outline: 3px solid rgba(245, 114, 36, 0.28);
  outline-offset: 2px;
}
.sop-tab.active {
  background: var(--surface);
  color: var(--accent-hover);
  box-shadow: 0 2px 10px rgba(84, 54, 24, 0.12);
}
.sop-tab.active .sop-tab-help {
  color: var(--accent-hover);
}
.easy-nudge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 10px;
  padding: 10px 12px 10px 14px;
  border: 1px solid #b8d9b4;
  border-radius: 12px;
  background: var(--herb-soft);
  color: #245f31;
  font-size: 12px;
}
.easy-nudge::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 22%;
  width: 12px;
  height: 12px;
  border-right: 1px solid #b8d9b4;
  border-bottom: 1px solid #b8d9b4;
  background: var(--herb-soft);
  transform: rotate(45deg);
}
.easy-nudge button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 95, 49, 0.1);
  color: #245f31;
  cursor: pointer;
  font: 900 13px/1 var(--font-sans);
}
.recipe-mode-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 8px 0 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--accent-hover);
  cursor: pointer;
  font: 900 12px/1.6 var(--font-sans);
}
.recipe-mode-link:focus-visible,
.easy-nudge button:focus-visible {
  outline: 3px solid rgba(245, 114, 36, 0.28);
  outline-offset: 2px;
}
.easy-pending {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed #efb76f;
  border-radius: var(--radius-sm);
  background: #fff7e8;
  color: #74440e;
}
.easy-pending strong {
  font-size: 16px;
}
.easy-pending span {
  color: #8a622f;
}
.easy-version {
  display: grid;
  gap: 16px;
}
.easy-intro {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #efcf9b;
  border-radius: var(--radius-sm);
  background: #fff8ea;
}
.easy-intro p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
  color: #69410e;
}
.easy-total-hack {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #2f210d;
  color: #fff5dc;
  line-height: 1.65;
}
.easy-total-hack span,
.easy-note span {
  display: block;
  margin-bottom: 4px;
  font: 800 11px/1.2 var(--font-mono);
  letter-spacing: 0.04em;
}
.easy-step {
  border-color: #efcf9b;
}
.easy-talk {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.85;
}
.easy-notes {
  display: grid;
  gap: 8px;
}
.easy-note {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.65;
}
.easy-note.science {
  background: var(--info-soft);
  border: 1px solid #c4dde9;
  color: #274756;
}
.easy-note.range {
  background: #f7f1e6;
  border: 1px solid #e7d5b8;
  color: #5e4a2e;
}
.easy-note.substitute {
  background: #eef5e8;
  border: 1px solid #c8dfbc;
  color: #36572b;
}
.easy-note.hack {
  background: #fff0d0;
  border: 1px solid #f2b44f;
  color: #743b03;
  box-shadow: inset 4px 0 0 #f57224;
}
.sop-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.step-left {
  position: sticky;
  top: 16px;
}
.step-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 左カラムの画像。SOP工程は4:3固定、r169/r11は既存メタ互換の別名として扱う */
.step-visual {
  margin: 0;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.step-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #f6efe4;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.step-visual img:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.step-visual.r169 img {
  aspect-ratio: 4 / 3;
}
.step-visual.r11 img {
  aspect-ratio: 4 / 3;
}
.step-visual figcaption {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.5;
}
.step-visual.placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed var(--border);
  background: linear-gradient(120deg, #fbf5ea, #f4e8d4, #fbf5ea);
  background-size: 200% 100%;
  animation: thumbPulse 2.4s ease-in-out infinite;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.7;
  padding: 12px;
}
.step-visual.placeholder small {
  font-size: 10.5px;
}
.sop-step:hover {
  border-color: #f3c99a;
  box-shadow: var(--shadow-lg);
}
.sop-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.step-no {
  background: linear-gradient(180deg, #f57224, var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(232, 99, 10, 0.35);
}
.step-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
}
.step-action {
  margin: 0 0 10px;
  font-size: 13px;
}
.step-params {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.param-chip {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.param-chip strong {
  color: var(--accent-hover);
}

/* talk / science 対比表示（ステップカード内は縦積み） */
.step-dual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}
.step-talk,
.step-science {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.75;
}
.step-talk {
  background: #fff4e3;
  border: 1px solid #f3c99a;
  color: #6b4415;
}
.step-science {
  background: var(--info-soft);
  border: 1px solid #c4dde9;
  color: #2c4a58;
  margin-bottom: 0;
}
.talk-label,
.sci-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.talk-label {
  color: var(--accent-hover);
}
.sci-label {
  color: var(--info);
}
.step-checkpoint {
  font-size: 12.5px;
  color: var(--herb);
  margin-top: 10px;
}
.step-checkpoint strong {
  color: var(--herb);
}

/* 工程の静止画（動画からの自動はめ込み） */
.step-media {
  margin: 12px 0 0;
}
.step-media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.step-media figcaption {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* 引用チップ */
.cite {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 8px;
  margin: 0 2px;
  cursor: pointer;
  border: none;
  vertical-align: middle;
  text-decoration: none;
}
.cite:hover {
  background: var(--accent-hover);
}
.cite-list {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* 用語チップ */
.term {
  border-bottom: 2px dotted var(--info);
  cursor: help;
  color: var(--ink);
}

/* 参考文献 */
.ref {
  border-top: 1px solid var(--border);
  padding: 12px 0;
  font-size: 12px;
}
.ref:first-child {
  border-top: none;
}
.ref .ref-id {
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 6px;
}
.ref a {
  color: var(--info);
  word-break: break-all;
}
.ref .ref-meta {
  color: var(--ink-faint);
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.badge-oa {
  background: var(--herb-soft);
  color: var(--herb);
  border-radius: 4px;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* 用語集 */
.glossary dt {
  font-weight: 700;
  color: var(--accent-hover);
  margin-top: 10px;
}
.glossary dd {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.pitfalls li {
  margin-bottom: 6px;
  color: var(--ink-muted);
}
.logic-check {
  background: var(--herb-soft);
  border: 1px solid #c4dfc0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
}
.logic-check .lc-label {
  color: var(--herb);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

/* ローカル知見カード */
.local-tips-card {
  border-left: 4px solid var(--info);
}
.local-tips {
  margin: 0;
  padding-left: 20px;
}
.local-tips li {
  margin: 6px 0;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.recipe-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(51, 38, 27, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.onboarding-backdrop {
  z-index: 130;
  background: rgba(51, 38, 27, 0.62);
}
.modal.onboarding-modal {
  max-width: 520px;
  padding: 32px;
  overflow: hidden;
  border-top: 4px solid var(--info);
  text-align: center;
}
.onboarding-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 20px;
  background: var(--info-soft);
  font-size: 32px;
  transform: rotate(-3deg);
}
.onboarding-modal h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.4;
}
.onboarding-copy { display: grid; gap: 16px; }
.onboarding-copy > p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.8; }
.onboarding-private {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--info) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--info-soft);
}
.onboarding-private strong { color: var(--ink); }
.onboarding-private span { color: var(--info); font-size: 11px; font-weight: 800; }
.onboarding-start { width: 100%; margin-top: 24px; }
.onboarding-start:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  max-height: 88vh;
  overflow-y: auto;
}
.modal-wide {
  max-width: 760px;
  width: 94%;
}
.recipe-dev-modal { max-width: 560px; border-top: 5px solid var(--experiment); }
.recipe-dev-modal-body { display: grid; gap: 16px; }
.recipe-dev-modal-body > p { margin: 0; color: var(--ink-muted); line-height: 1.7; }
.draft-conflict-item {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px dashed var(--experiment-border);
  border-radius: var(--radius-sm);
  background: var(--experiment-soft);
}
.draft-conflict-item span { color: var(--experiment); font-size: 9px; font-weight: 900; }
.draft-conflict-item strong { color: var(--experiment-deep); font-family: var(--font-display); font-size: 16px; }
.recipe-dev-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.publish-experiment-note {
  padding: 10px 12px;
  border: 1px dashed var(--experiment-border);
  border-radius: var(--radius-sm);
  background: var(--experiment-soft);
  color: var(--experiment-deep) !important;
  font-weight: 900;
}
.publish-experiment-note.hidden { display: none; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
}
.modal-close {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 22px/1 var(--font);
}
.modal-close:hover { border-color: var(--accent); color: var(--accent-hover); }
.modal-close:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.legal-backdrop { z-index: 160; }
.legal-modal-body { max-height: min(70vh, 720px); overflow-y: auto; }
.legal-table-wrap { width: 100%; overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.legal-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table-wrap th,
.legal-table-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal-table-wrap th { width: 30%; background: var(--surface-2); color: var(--ink); font-size: 11px; }
.legal-table-wrap td { color: var(--ink-muted); font-size: 12px; line-height: 1.75; }
.legal-table-wrap tbody tr:last-child th,
.legal-table-wrap tbody tr:last-child td { border-bottom: 0; }
.delete-account-backdrop { z-index: 165; }
.delete-account-modal { max-width: 540px; border-top: 4px solid var(--tomato); }
.delete-account-body { display: grid; gap: 14px; }
.delete-account-warning { display: grid; gap: 8px; padding: 16px; border: 1px solid color-mix(in srgb, var(--tomato) 45%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tomato) 7%, var(--surface)); }
.delete-account-warning p { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.75; }
.delete-account-warning p:last-child { color: var(--tomato); font-weight: 900; }
.delete-account-submit { min-height: 46px; border: 1px solid var(--tomato); background: var(--tomato); color: #fff; font-weight: 900; }
.delete-account-submit:hover:not(:disabled) { filter: brightness(.92); }
.delete-account-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--tomato) 24%, transparent); outline-offset: 2px; }
.delete-account-submit:disabled { cursor: not-allowed; opacity: .45; }
.modal-body {
  padding: 22px;
}
.queue-help-modal {
  max-width: 560px;
}
.queue-help-body {
  display: grid;
  gap: 16px;
}
.queue-help-body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.9;
}
.queue-help-close {
  width: 100%;
  margin-top: 4px;
}
.tachometer-help-modal {
  max-width: 640px;
  border-top: 4px solid var(--experiment);
}
.tachometer-help-body {
  display: grid;
  gap: 16px;
}
.tachometer-help-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tachometer-help-steps li {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--experiment-border);
  border-radius: var(--radius-sm);
  background: var(--experiment-soft);
}
.tachometer-help-steps strong {
  color: var(--experiment-deep);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
}
.tachometer-help-steps p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.75;
}
.tachometer-help-steps p b {
  color: var(--experiment-deep);
  font-weight: 900;
}
.tachometer-help-closing {
  margin: 0;
  color: var(--experiment-deep);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}
.settings-lead {
  color: var(--ink-muted);
  font-size: 12.5px;
  margin: 0 0 18px;
}
.profile-modal {
  max-width: 560px;
}
.profile-modal-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
.profile-modal-body {
  display: grid;
  gap: 24px;
}
.profile-eyebrow {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.profile-form {
  display: grid;
  gap: 16px;
}
.profile-form .field {
  margin: 0;
}
.profile-avatar-editor {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.profile-avatar-preview {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 38px;
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-controls { display: grid; justify-items: start; gap: 6px; }
.profile-avatar-controls .field-label { margin: 0; }
.profile-avatar-ai { display: grid; grid-column: 1 / -1; gap: 6px; }
.profile-avatar-ai-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.profile-avatar-status { grid-column: 1 / -1; min-height: 18px; margin: 0; }
.profile-avatar-editor button:focus-visible,
.profile-avatar-editor input:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.profile-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
}
.profile-types legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.profile-types label {
  cursor: pointer;
}
.profile-types input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.profile-types span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}
.profile-types input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.profile-bio {
  min-height: 84px;
  resize: vertical;
}
.profile-submit {
  width: 100%;
  min-height: 44px;
}
.profile-account-settings {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.profile-account-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
}
.profile-account-head > p:last-child {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.7;
}
.account-setting-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.account-setting-card h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
}
.account-setting-card .field,
.account-setting-card .verify-msg {
  margin: 0;
}
.account-current-email {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.6;
}
.account-current-email strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}
.account-setting-submit {
  width: 100%;
  min-height: 44px;
}
.account-setting-card .btn:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
@media (max-width: 680px) {
  .profile-avatar-editor { grid-template-columns: 72px minmax(0, 1fr); padding: 12px; }
  .profile-avatar-preview { width: 72px; height: 72px; font-size: 30px; }
  .profile-avatar-ai-row { grid-template-columns: 1fr; }
  .profile-avatar-ai-row .btn { width: 100%; }
  .profile-modal-body { gap: 20px; }
  .profile-account-settings { padding-top: 20px; }
  .account-setting-card { padding: 12px; }
}
.email-auth-modal {
  max-width: 460px;
}
.email-auth-form {
  display: grid;
  gap: 16px;
}
.email-auth-form .field {
  margin: 0;
}
.email-auth-hint {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.6;
}
.email-auth-invite {
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.email-auth-submit {
  width: 100%;
  min-height: 44px;
}
.email-auth-resend {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-hover);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.email-auth-resend:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.email-auth-resend:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
.email-auth-resend:disabled {
  cursor: wait;
  opacity: 0.62;
}
.email-auth-forgot {
  min-height: 44px;
  margin: -8px 0;
  padding: 8px 4px;
  border: 0;
  justify-self: end;
  background: transparent;
  color: var(--accent-hover);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.email-auth-forgot:hover:not(:disabled) {
  color: var(--accent);
}
.email-auth-forgot:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}
.email-auth-forgot:disabled {
  cursor: wait;
  opacity: 0.62;
}
.email-auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
}
.email-auth-switch button {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.email-auth-switch button:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}
.password-recovery-backdrop {
  z-index: 140;
}
.password-recovery-modal {
  max-width: 460px;
  border-top: 4px solid var(--accent);
}
.password-recovery-form {
  display: grid;
  gap: 16px;
}
.password-recovery-form .field,
.password-recovery-form .settings-lead,
.password-recovery-form .verify-msg {
  margin: 0;
}
.password-recovery-submit {
  width: 100%;
  min-height: 44px;
}
.access-gate-open {
  overflow: hidden;
}
.terms-wall {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 99, 10, 0.13), transparent 42%),
    var(--bg);
}
.terms-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 720px);
  max-height: min(88dvh, 820px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.terms-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.terms-head h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.35;
}
.terms-head > div > p:last-child {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}
.terms-version {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font: 700 11px/1 var(--font-mono);
}
.terms-scroll {
  min-height: 200px;
  overflow-y: auto;
  padding: 24px;
  background: var(--surface-2);
  -webkit-overflow-scrolling: touch;
}
.terms-scroll:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: -3px;
}
.terms-content {
  margin: 0;
  color: var(--ink);
  font: 500 13px/1.85 var(--font);
  white-space: normal;
  overflow-wrap: anywhere;
}
.terms-content h2,
.terms-content h3,
.terms-content h4 {
  margin: 28px 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.45;
}
.terms-content h2:first-child,
.terms-content h3:first-child,
.terms-content h4:first-child {
  margin-top: 0;
}
.terms-content h2 {
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(232, 118, 42, 0.28);
  font-size: 20px;
}
.terms-content h3 {
  font-size: 16px;
}
.terms-content h4 {
  font-size: 14px;
}
.terms-content p {
  margin: 0 0 14px;
  line-height: 1.85;
}
.terms-content ul,
.terms-content ol {
  margin: 0 0 18px;
  padding-inline-start: 1.75em;
}
.terms-content ul {
  list-style: disc;
}
.terms-content ol {
  list-style: decimal;
}
.terms-content li {
  margin: 5px 0;
  padding-inline-start: 0.25em;
  line-height: 1.8;
}
.terms-content li::marker {
  color: #e8762a;
  font-weight: 800;
}
.terms-content strong {
  color: var(--ink);
  font-weight: 800;
}
.terms-content code {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: #b94f17;
  font: 600 0.92em/1.5 var(--font-mono);
}
.terms-content blockquote {
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 3px solid #e8762a;
  background: var(--surface);
  color: var(--ink-muted);
}
.terms-content hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--border-strong);
}
.terms-actions {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.terms-read-hint {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
}
.terms-actions .verify-msg {
  margin-top: 6px;
}
.terms-agree {
  width: 100%;
  margin-top: 12px;
}
.login-wall {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 99, 10, 0.13), transparent 42%),
    var(--bg);
}
.login-wall-card {
  width: min(100%, 480px);
  padding: 32px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.login-wall-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-wall-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.login-wall-name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
}
.login-wall-copy {
  margin-bottom: 24px;
}
.login-wall-copy h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.35;
}
.login-wall-copy p,
.login-wall-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.7;
}
.login-wall-form {
  margin-bottom: 16px;
}
.login-wall-note {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.login-wall .verify-msg.ok,
.email-auth-modal .verify-msg.ok {
  color: var(--info);
}
.key-row {
  display: flex;
  gap: 8px;
}
.settings-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.verify-msg {
  font-size: 12.5px;
  margin: 12px 0 0;
  min-height: 1.2em;
}
.verify-msg.ok {
  color: var(--herb);
}
.verify-msg.err {
  color: var(--tomato);
}

/* Codex（ChatGPTサブスク）設定 */
.codex-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.codex-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.codex-dot.ok {
  background: var(--herb);
  box-shadow: 0 0 0 3px var(--herb-soft);
}
.codex-dot.err {
  background: var(--tomato);
}
.codex-actions {
  display: flex;
  gap: 8px;
  margin: -4px 0 12px;
  flex-wrap: wrap;
}
.btn-sm {
  font-size: 12px;
  padding: 6px 10px;
}
.field-hint {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin: 8px 0 0;
  line-height: 1.6;
}
.field-hint code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 履歴 */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.hi-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hi-title {
  font-weight: 700;
  color: var(--ink);
}
.hi-meta {
  font-size: 12px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hi-sub {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.hi-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* 動画取り込み */
.ingest-result {
  margin-top: 14px;
}
.ingest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}
.ingest-table th,
.ingest-table td {
  border: 1px solid var(--border);
  padding: 7px 9px;
  text-align: left;
}
.ingest-table th {
  background: var(--surface-2);
  color: var(--ink-muted);
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 300px;
  background: var(--ink);
  border: 1px solid var(--accent);
  color: #fff7ec;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.tooltip .tt-term {
  color: #ffb877;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.error-banner {
  background: #fdecea;
  border: 1px solid var(--tomato);
  color: #9c2f14;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
}

/* ---------- ビュー切替 ---------- */
.view.hidden {
  display: none !important;
}

/* ---------- レシピ帳ブラウザー ---------- */
.recipes-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 16px;
  padding: 16px;
}
.recipe-book-tabs {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(180px, 230px);
  align-items: stretch;
  gap: 10px;
  margin: 16px 0;
}
.recipe-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 680px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
}
.recipe-mode-option {
  display: grid;
  place-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-sans);
}
.recipe-mode-option.active {
  background: var(--surface);
  color: var(--accent-hover);
  box-shadow: 0 2px 10px rgba(84, 54, 24, 0.12);
}
.recipe-mode-option:focus-visible {
  outline: 3px solid rgba(245, 114, 36, 0.28);
  outline-offset: 2px;
}
.recipe-mode-label {
  font-size: 14px;
  font-weight: 900;
}
.recipe-mode-help {
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 700;
}
.recipe-mode-option.active .recipe-mode-help {
  color: var(--accent-hover);
}
.recipe-experiment-tab {
  display: grid;
  place-content: center;
  gap: 3px;
  min-height: 72px;
  padding: 10px 14px;
  border: 2px dashed var(--experiment-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--surface), var(--experiment-soft));
  color: var(--experiment-deep);
  cursor: pointer;
  font: inherit;
}
.recipe-experiment-tab.active {
  border-style: solid;
  border-color: var(--experiment);
  background: var(--experiment);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--experiment) 24%, transparent);
}
.recipe-experiment-tab .recipe-mode-help { color: var(--experiment); }
.recipe-experiment-tab.active .recipe-mode-help { color: #f8dce8; }
.recipe-experiment-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--experiment) 30%, transparent); outline-offset: 3px; }
.recipe-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}
.recipe-search-box {
  position: relative;
  min-width: 0;
}
.recipe-search-box .text-input {
  padding-right: 42px;
}
.help-dot {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 12px/1 var(--font);
}
.recipe-search-submit {
  min-width: 48px;
}
.recipe-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.category-row {
  margin-bottom: 8px;
}
.filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 12px/1.4 var(--font);
  padding: 7px 11px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.filter-chip span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-weight: 700;
}
.filter-chip:hover,
.filter-chip.active {
  background: var(--accent-soft);
  border-color: #f2bd84;
  color: var(--accent-hover);
}
.filter-chip.active {
  transform: translateY(-1px);
}
.recipe-tags-panel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 10px 0 12px;
  padding: 8px 0;
}
.recipe-tags-panel summary {
  color: var(--ink-muted);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  margin-bottom: 8px;
}
.recipe-tags-panel summary::-webkit-details-marker {
  display: none;
}
.recipe-tags-panel summary span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}
.tag-empty {
  color: var(--ink-faint);
  font-size: 12px;
}
.recipe-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.recipe-count {
  color: var(--ink-muted);
  font-weight: 900;
  margin-right: auto;
}
.recipe-sort-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}
.recipe-sort-select {
  min-height: 36px;
  padding-block: 6px;
}
.view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 12px/1 var(--font);
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}
.view-toggle-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.recipes-empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px;
}
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.12s, opacity 0.24s;
}
.recipe-card.is-experiment,
.recipe-list-row.is-experiment {
  border: 2px dashed var(--experiment-border);
  background: linear-gradient(180deg, var(--experiment-soft) 0 7px, var(--surface) 7px 100%);
}
.recipe-card.is-experiment:hover,
.recipe-list-row.is-experiment:hover { border-color: var(--experiment); }

/* マイページ: 自分の料理履歴をひと目で追える個人台帳 */
.mypage-view { max-width: 1180px; margin: 0 auto; }
.mypage-gate { min-height: 58vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--ink-muted); }
.mypage-gate-icon { font-size: 48px; }
.mypage-gate h2 { color: var(--ink); font-family: var(--font-display); margin: 0; }
.premium-hero { --profile-premium-angle: 0deg; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(380px, 1.1fr); gap: 28px; align-items: center; min-height: 184px; margin-bottom: 16px; overflow: hidden; padding: 30px 32px; border: 1px solid transparent; border-radius: var(--radius); background: radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 40%), var(--ink); box-shadow: var(--shadow-lg); color: var(--surface); }
.premium-hero::before { position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--profile-premium-angle), #ffb199, #ffd76e, #a8e6a3, #8ec9ff, #d9a7ff, #ffb199); content: ''; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: profilePremiumAurora 8s linear infinite; }
.premium-hero::after { position: absolute; top: 0; right: 0; left: 0; height: 7px; background: linear-gradient(90deg, #ffb199, #ffd76e, #a8e6a3, #8ec9ff, #d9a7ff); content: ''; opacity: .9; }
.premium-hero > * { position: relative; z-index: 1; }
.premium-hero-eyebrow { margin: 0 0 7px; color: var(--accent); font: 900 10px/1 var(--font-mono); letter-spacing: .14em; }
.premium-hero h2 { margin: 0; color: var(--surface); font: 900 31px/1.25 var(--font-display); }
.premium-hero-copy > p:not(.premium-hero-eyebrow) { margin: 7px 0 0; color: var(--border-strong); font-size: 12px; font-weight: 700; }
.premium-hero-copy #mypagePremiumHeroRenewal { color: var(--accent); }
.premium-hero-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.premium-hero-benefits > div { display: grid; place-items: center; gap: 7px; min-height: 82px; padding: 12px 8px; border: 1px solid color-mix(in srgb, var(--surface) 20%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 7%, transparent); text-align: center; }
.premium-hero-benefits span { font-size: 24px; line-height: 1; }
.premium-hero-benefits strong { color: var(--surface); font-size: 10px; white-space: nowrap; }
.premium-hero-benefits .premium-hero-pr { display: grid; width: 32px; height: 24px; border-radius: 999px; background: var(--surface); color: var(--ink); font: 900 9px/1 var(--font-mono); letter-spacing: .08em; place-items: center; }
.mypage-profile { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.mypage-avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); font-size: 32px; border: 2px solid var(--accent); }
.mypage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mypage-profile-copy h2 { margin: 2px 0; font: 900 26px/1.25 var(--font-display); color: var(--ink); }
.mypage-type { color: var(--accent-hover); font-weight: 900; margin: 3px 0; }
.mypage-bio { color: var(--ink-muted); margin: 3px 0 0; }
.mypage-counts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.mypage-counts div { display: grid; justify-items: center; gap: 2px; color: #fff; padding: 18px; border-right: 1px solid rgba(255,255,255,.13); }
.mypage-counts div:last-child { border-right: 0; }
.mypage-counts strong { font: 900 28px/1 var(--font-mono); color: var(--accent); }
.mypage-counts span { font-size: 12px; font-weight: 700; }
.mypage-inbox { margin: 16px 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.mypage-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.mypage-inbox-head h3 { margin: 2px 0 0; color: var(--ink); font: 900 20px/1.3 var(--font-display); }
.mypage-inbox-list { display: grid; }
.mypage-inbox-empty { margin: 0; padding: 24px; color: var(--ink-muted); font-size: 12px; text-align: center; }
.mypage-inbox-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.mypage-inbox-item:last-child { border-bottom: 0; }
.mypage-inbox-item.needs-attention { background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }
.mypage-inbox-mark { display: grid; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 900 11px/1 var(--font-mono); place-items: center; }
.mypage-inbox-item:not(.needs-attention) .mypage-inbox-mark { background: var(--surface-2); }
.mypage-inbox-body { min-width: 0; }
.mypage-inbox-body > header { display: grid; grid-template-columns: auto minmax(120px, auto) 1fr auto; align-items: center; gap: 8px; }
.mypage-inbox-kind { font-size: 18px; }
.mypage-inbox-recipe { width: fit-content; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--accent-hover); cursor: pointer; font: 900 13px/1.5 var(--font); text-align: left; text-decoration: underline; text-overflow: ellipsis; text-underline-offset: 3px; white-space: nowrap; }
.mypage-inbox-recipe:focus-visible { border-radius: 3px; outline: 3px solid var(--accent); outline-offset: 3px; }
.mypage-inbox-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mypage-inbox-tag { padding: 3px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-muted); font-size: 9px; font-weight: 900; }
.mypage-inbox-tag.is-unread { background: var(--ink); color: var(--accent); }
.mypage-inbox-tag.is-reply { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.mypage-inbox-body time { color: var(--ink-faint); font: 700 10px/1 var(--font-mono); white-space: nowrap; }
.mypage-inbox-author { margin: 7px 0 0; color: var(--ink-muted); font-size: 10px; font-weight: 900; }
.mypage-inbox-message { margin: 5px 0 12px; color: var(--ink); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.mypage-inbox-reply { display: grid; gap: 5px; }
.mypage-inbox-reply label { color: var(--ink-muted); font-size: 10px; font-weight: 900; }
.mypage-inbox-reply > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.mypage-inbox-reply textarea { min-height: 44px; max-height: 132px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 500 12px/1.6 var(--font); }
.mypage-inbox-reply textarea:focus-visible { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.mypage-course-card { margin: 16px 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.mypage-course-loading, .mypage-course-error { min-height: 96px; display: grid; place-content: center; gap: 4px; color: var(--ink-muted); text-align: center; }
.mypage-course-error strong { color: var(--ink); }
.mypage-course-error span { font-size: 12px; }
.mypage-course-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mypage-course-head h3 { margin: 2px 0 4px; color: var(--ink); font: 900 22px/1.3 var(--font-display); }
.mypage-course-head p:not(.profile-eyebrow) { margin: 0; color: var(--ink-muted); font-size: 12px; }
.mypage-course-year-badge { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); font-size: 11px; font-weight: 900; }
.mypage-course-overall { flex: 0 0 auto; display: grid; justify-items: end; }
.mypage-course-overall strong { color: var(--ink); font: 900 38px/1 var(--font-mono); }
.mypage-course-overall small { color: var(--accent-hover); font-size: 15px; }
.mypage-course-overall span { margin-top: 4px; color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.mypage-course-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.mypage-course-choice { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.mypage-course-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.mypage-course-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mypage-course-choice:disabled { cursor: wait; opacity: .65; transform: none; }
.mypage-course-choice.is-active { border-color: var(--accent); background: var(--accent-soft); }
.mypage-course-choice-icon { font-size: 24px; }
.mypage-course-choice strong, .mypage-course-choice small { display: block; }
.mypage-course-choice strong { font-size: 13px; }
.mypage-course-choice small { margin-top: 3px; color: var(--ink-muted); font-size: 10px; line-height: 1.5; }
.mypage-course-choice-mark { color: var(--accent-hover); font-size: 10px; font-weight: 900; }
.mypage-course-yearline { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 22px 0 8px; color: var(--ink-faint); font: 700 9px/1 var(--font-mono); letter-spacing: .05em; }
.mypage-course-yearline i { height: 1px; background: var(--border-strong); }
.mypage-course-overall-track, .mypage-course-track { overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.mypage-course-overall-track { height: 8px; }
.mypage-course-track { height: 6px; margin-top: 7px; }
.mypage-course-overall-track i, .mypage-course-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
.mypage-course-route { display: grid; gap: 16px; margin-top: 18px; }
.mypage-course-tier { display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.mypage-course-tier > header span { color: var(--accent-hover); font-size: 11px; font-weight: 900; }
.mypage-course-tier > header h4 { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; }
.mypage-course-milestones { display: grid; gap: 10px; }
.mypage-course-milestone { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.mypage-course-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink-faint); font-weight: 900; }
.mypage-course-milestone.is-done .mypage-course-check { border-color: var(--herb); background: var(--herb); color: var(--surface); }
.mypage-course-milestone.is-done .mypage-course-track i { background: var(--herb); }
.mypage-course-milestone-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mypage-course-milestone-copy strong { color: var(--ink); font-size: 12px; }
.mypage-course-milestone-copy span { flex: 0 0 auto; color: var(--ink-muted); font: 700 10px/1 var(--font-mono); }

/* GG4 健康コンパニオン: PFCと食材多様性だけを、住人と一緒に見守る。 */
.health-companion-card { margin: 16px 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.health-companion-loading, .health-companion-error { min-height: 144px; display: grid; place-content: center; gap: 4px; padding: 24px; color: var(--ink-muted); text-align: center; }
.health-companion-error strong { color: var(--ink); }
.health-companion-error span { font-size: 12px; }
.health-companion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.health-companion-head h3 { margin: 2px 0 4px; color: var(--ink); font: 900 22px/1.3 var(--font-display); }
.health-companion-head p:not(.profile-eyebrow) { margin: 0; color: var(--ink-muted); font-size: 12px; }
.health-care-badge { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink-muted); font-size: 11px; font-weight: 900; }
.health-care-badge.is-good { border-color: var(--herb); background: var(--herb-soft); color: var(--herb); }
.health-care-badge.is-needs_care { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.health-companion-body { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.65fr); }
.health-companion-resident { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-right: 1px solid var(--border); background: var(--surface-2); }
.health-companion-resident img, .health-companion-placeholder { width: 88px; height: 104px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); object-fit: contain; }
.health-companion-placeholder { display: grid; place-items: center; font-size: 36px; }
.health-companion-resident > div { min-width: 0; }
.health-companion-resident strong, .health-companion-resident small { display: block; }
.health-companion-resident strong { color: var(--ink); font: 900 18px/1.3 var(--font-display); }
.health-companion-resident small { margin-top: 4px; color: var(--accent-hover); font: 900 11px/1 var(--font-mono); }
.health-companion-resident p { margin: 12px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 1.7; }
.health-balance { display: grid; gap: 18px; padding: 24px; }
.health-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.health-metric { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.health-metric > span { display: block; color: var(--ink-muted); font-size: 10px; font-weight: 700; }
.health-metric strong { display: block; margin-top: 5px; overflow: hidden; color: var(--ink); font: 900 22px/1 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.health-metric small { margin-left: 3px; color: var(--ink-muted); font-size: 10px; }
.health-pfc { display: grid; gap: 9px; }
.health-pfc > div { display: grid; grid-template-columns: 112px 1fr 38px; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 10px; }
.health-pfc span strong { color: var(--ink); font-family: var(--font-mono); }
.health-pfc i { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.health-pfc b { display: block; height: 100%; border-radius: inherit; background: var(--herb); transition: width .35s ease; }
.health-pfc em { color: var(--ink); font: normal 900 10px/1 var(--font-mono); text-align: right; }
.health-gap-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.health-gap { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.health-gap > span { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-muted); font-size: 9px; font-weight: 900; }
.health-gap strong { color: var(--ink); font-size: 10px; }
.health-gap small { color: var(--ink-muted); font-size: 9px; }
.health-gap.is-good > span { background: var(--herb); color: var(--surface); }
.health-gap.is-low, .health-gap.is-high { border-color: var(--accent); background: var(--accent-soft); }
.health-gap.is-low > span, .health-gap.is-high > span { background: var(--accent); color: var(--accent-ink); }
.health-suggestions { display: grid; gap: 12px; padding: 24px; border-top: 1px solid var(--border); }
.health-suggestions > h4 { margin: 0; color: var(--ink); font: 900 14px/1.4 var(--font-display); }
.health-suggestion { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr) auto; gap: 8px 18px; align-items: start; padding: 16px; border: 1px solid var(--border); border-left: 4px solid var(--herb); border-radius: var(--radius-sm); background: var(--surface-2); }
.health-suggestion header span, .health-suggestion header strong { display: block; }
.health-suggestion header span { color: var(--accent-hover); font-size: 10px; font-weight: 900; }
.health-suggestion header strong { margin-top: 4px; color: var(--ink); font-size: 13px; }
.health-suggestion > p { margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.7; }
.health-suggestion-empty { align-self: center; }
.health-studio-button { align-self: center; white-space: nowrap; }
.health-recipe-list { display: grid; gap: 6px; }
.health-recipe { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.health-recipe:hover { border-color: var(--accent); }
.health-recipe:focus-visible, .health-studio-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.health-recipe img, .health-recipe-placeholder { width: 48px; height: 48px; border-radius: calc(var(--radius-sm) - 2px); background: var(--surface-2); object-fit: cover; }
.health-recipe-placeholder { display: grid; place-items: center; font-size: 20px; }
.health-recipe strong, .health-recipe small { display: block; }
.health-recipe strong { font-size: 11px; line-height: 1.4; }
.health-recipe small { margin-top: 3px; color: var(--accent-hover); font-size: 9px; font-weight: 900; }
.health-all-good, .health-empty { margin: 0; padding: 18px 24px; border-top: 1px solid var(--border); color: var(--herb); font-size: 12px; font-weight: 900; }
.health-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink-muted); }
.health-empty p { margin: 0; font-weight: 700; }
.health-disclaimer { margin: 0; padding: 10px 24px; border-top: 1px dashed var(--border); color: var(--ink-faint); font-size: 9px; line-height: 1.6; }
.points-card { margin: 16px 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.points-loading, .points-error { min-height: 144px; display: grid; place-content: center; gap: 4px; padding: 24px; color: var(--ink-muted); text-align: center; }
.points-error strong { color: var(--ink); }
.points-error span { font-size: 12px; }
.points-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px; background: var(--ink); color: var(--surface); }
.points-card-head h3 { margin: 2px 0 4px; color: var(--surface); font: 900 22px/1.35 var(--font-display); }
.points-card-head p:not(.profile-eyebrow) { max-width: 640px; margin: 0; color: var(--border-strong); font-size: 12px; line-height: 1.7; }
.points-card-head .profile-eyebrow { color: var(--accent); }
.points-balance { flex: 0 0 auto; display: grid; justify-items: end; }
.points-balance > span { color: var(--border-strong); font-size: 11px; font-weight: 900; }
.points-balance strong { color: var(--accent); font: 900 40px/1 var(--font-mono); }
.points-balance small { margin-left: 4px; font-size: 14px; }
.points-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px dashed var(--border-strong); background: var(--surface-2); }
.points-ledger > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.points-ledger > div + div { border-left: 1px dashed var(--border-strong); }
.points-ledger span { color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.points-ledger strong { color: var(--ink); font: 900 13px/1 var(--font-mono); }
.points-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 0; }
.points-body h4 { margin: 0; color: var(--ink); font: 900 14px/1.4 var(--font-display); }
.points-breakdown { padding: 24px; }
.points-breakdown > div { display: grid; gap: 0; margin-top: 12px; }
.points-breakdown-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.points-breakdown-row:last-child { border-bottom: 0; }
.points-breakdown-row span { color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
.points-breakdown-row strong { flex: 0 0 auto; color: var(--accent-hover); font: 900 12px/1 var(--font-mono); }
.points-exchange { display: grid; align-content: start; gap: 12px; padding: 24px; border-left: 1px solid var(--border); background: var(--surface-2); }
.points-exchange-ticket { width: fit-content; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); color: var(--accent-hover); font: 900 10px/1.35 var(--font-mono); letter-spacing: .12em; }
.points-exchange p { margin: 4px 0 0; color: var(--ink-muted); font-size: 11px; line-height: 1.7; }
.points-exchange p strong { color: var(--ink); }
.points-exchange-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border); }
.points-exchange-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
.points-redeem-button { width: 100%; min-height: 44px; justify-content: center; }
.points-redeem-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.points-exchange-message { min-height: 19px; text-align: center; }
.mypage-skill-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.premium-card { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr); gap: 16px; align-items: start; margin: 16px 0; padding: 20px 24px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.premium-card h3 { margin: 2px 0 4px; color: var(--ink); font-family: var(--font-display); }
.premium-status { margin: 0; color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.premium-status.is-active { color: var(--herb); }
.coupon-redeem-form > div { display: flex; gap: 8px; }
.coupon-redeem-form .text-input { min-width: 0; }
.premium-billing { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); }
.premium-billing > div { display: grid; gap: 4px; }
.premium-billing strong { color: var(--ink); font-size: 13px; }
.premium-billing small, .premium-billing-renewal { margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.5; }
.premium-billing-renewal { color: var(--herb); font-weight: 800; }
.premium-billing.is-active-management { width: fit-content; justify-self: start; padding: 9px 12px; border-style: dashed; border-color: var(--border-strong); background: var(--surface-2); }
.premium-billing.is-active-management .btn { min-height: 34px; padding: 7px 12px; }
.private-share-placeholder { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); cursor: pointer; text-align: left; }
.private-share-placeholder strong, .private-share-placeholder small { display: block; }
.private-share-placeholder small { margin-top: 2px; color: var(--ink-faint); font-size: 10px; }
.private-share-placeholder:focus-visible, .private-share-recipe:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.premium-pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.premium-pillars > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.premium-pillars > div > span { grid-row: 1 / 3; font-size: 22px; }
.premium-pillars strong, .premium-pillars small { display: block; }
.premium-pillars small { color: var(--ink-muted); font-size: 11px; }
.premium-pr-setting { grid-column: 1 / -1; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.premium-pr-setting-copy { display: grid; gap: 4px; }
.premium-pr-setting-title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.premium-pr-setting-copy small { color: var(--ink-muted); font-size: 11px; line-height: 1.5; }
.premium-pr-preview { display: inline-grid; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 900 9px/1 var(--font-mono); letter-spacing: .1em; place-items: center; }
.premium-toggle { position: relative; display: inline-flex; flex: 0 0 auto; }
.premium-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.premium-toggle span { position: relative; display: block; width: 48px; height: 28px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--border); transition: background .2s ease, border-color .2s ease; }
.premium-toggle span::after { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); content: ''; transition: transform .2s ease; }
.premium-toggle input:checked + span { border-color: var(--accent); background: var(--accent); }
.premium-toggle input:checked + span::after { transform: translateX(20px); }
.premium-toggle input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.premium-pr-setting.is-locked { border-style: dashed; }
.premium-auto-note { grid-column: 1 / -1; margin: 0; color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.points-redemption-history { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.points-redemption-history h5, .points-redemption-history p { margin: 0; }
.points-redemption-history > div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-muted); font-size: 12px; }
.points-redemption-history strong { color: var(--ink); }
.private-recipe-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 8px; border-radius: 999px; background: #3d2b1f; color: #fff4df; font-size: 11px; font-weight: 800; }
.recipe-card.is-private, .recipe-list-row.is-private { border-style: dashed; }
.first-prompt-locked { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); font-weight: 700; }
.private-share-recipe[aria-disabled="true"] { border-style: dashed; color: var(--ink-faint); }
.invite-card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr); gap: 16px 24px; margin: 16px 0; padding: 20px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.invite-card h3 { margin: 2px 0 4px; color: var(--ink); font-family: var(--font-display); }
.invite-rank { width: fit-content; margin: 8px 0 4px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 12px; font-weight: 900; }
.invite-remaining { margin: 0; color: var(--accent-hover); font-size: 12px; font-weight: 900; }
.invite-next-rank { margin: 4px 0 0; color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.invite-code-row { display: flex; align-items: center; gap: 8px; }
.invite-code-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--accent); font: 700 15px/1.4 var(--font-mono); letter-spacing: .04em; }
.invite-reward-note { grid-column: 1 / -1; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: 12px; font-weight: 900; line-height: 1.6; }
.invite-expansion { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.invite-expansion-status { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.invite-expansion-button { min-height: 44px; flex: 0 0 auto; }
.invite-expansion-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.invite-expansion-button:disabled { cursor: wait; opacity: .7; }
.invite-history { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); }
.invite-history h4 { margin: 0 0 8px; color: var(--ink); font-size: 12px; }
.invitee-list { display: grid; gap: 8px; }
.invitee-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); font-size: 12px; }
.invitee-item time { color: var(--ink-faint); white-space: nowrap; }
.invite-empty { margin: 0; color: var(--ink-muted); font-size: 12px; }
.mypage-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.mypage-section-head h3 { margin: 2px 0 0; font-family: var(--font-display); }
.mypage-section-head > span { color: var(--ink-muted); font-weight: 700; font-size: 12px; }
.mypage-skill-bars { display: grid; gap: 11px; margin-top: 18px; }
.mypage-skill-row { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 10px; font-size: 12px; font-weight: 900; }
.mypage-skill-track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.mypage-skill-track i { display: block; min-width: 2px; height: 100%; border-radius: inherit; transition: width .35s ease; }
.mypage-tabs { display: flex; gap: 4px; margin: 22px 0 14px; border-bottom: 1px solid var(--border); }
.mypage-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; font: 900 14px/1 var(--font); padding: 12px 16px; }
.mypage-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.mypage-reports { display: grid; gap: 12px; }
.mypage-mealplans { display: grid; gap: 10px; }
.mypage-mealplan { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.mypage-mealplan:hover { border-color: var(--accent); }
.mypage-mealplan strong, .mypage-mealplan small { display: block; }
.mypage-mealplan small { margin-top: 5px; color: var(--ink-muted); }
.mypage-report { cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.mypage-report:hover { border-color: var(--accent); }
.mypage-report > div { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 11px; }
.mypage-report > div span { color: var(--accent-hover); font-weight: 900; }
.mypage-report h3 { margin: 8px 0 4px; font-family: var(--font-display); }
.mypage-report p { margin: 0; color: var(--ink-muted); white-space: pre-wrap; }
.mypage-report img { max-width: 220px; max-height: 160px; object-fit: cover; border-radius: 8px; margin-top: 12px; }
.mypage-account-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 18px 20px; border-top: 1px solid var(--border); color: var(--ink-muted); }
.mypage-account-footer h3 { margin: 2px 0 6px; color: var(--ink); font: 900 15px/1.4 var(--font-display); }
.mypage-account-footer p { margin: 0; font-size: 11px; }
.mypage-account-footer a { color: var(--accent-hover); }
.mypage-account-footer nav { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.mypage-account-footer nav button { padding: 0; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font: 700 10px/1.5 var(--font); text-decoration: underline; text-underline-offset: 2px; }
.mypage-account-footer nav button:hover { color: var(--accent-hover); }
.mypage-account-footer nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mypage-delete-account { flex: 0 0 auto; padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink-faint); cursor: pointer; font: 700 10px/1.4 var(--font); }
.mypage-delete-account:hover { border-bottom-color: var(--tomato); color: var(--tomato); }
.mypage-delete-account:focus-visible { border-radius: 3px; outline: 2px solid var(--tomato); outline-offset: 3px; }
@media (max-width: 680px) {
  .premium-hero { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 24px 18px 18px; }
  .premium-hero h2 { font-size: 25px; }
  .premium-hero-benefits { gap: 5px; }
  .premium-hero-benefits > div { min-height: 68px; padding: 10px 4px; }
  .premium-hero-benefits span { font-size: 20px; }
  .premium-hero-benefits strong { font-size: 8px; }
  .mypage-profile { grid-template-columns: auto 1fr; }
  .mypage-profile > .btn { grid-column: 1 / -1; width: 100%; }
  .mypage-counts div { padding: 14px 6px; }
  .mypage-inbox-head { padding: 16px; }
  .mypage-inbox-item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px; }
  .mypage-inbox-mark { width: 32px; height: 32px; font-size: 9px; }
  .mypage-inbox-body > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mypage-inbox-tags { grid-column: 2 / -1; }
  .mypage-inbox-body time { grid-column: 3; grid-row: 1; }
  .mypage-inbox-reply > div { grid-template-columns: 1fr; }
  .mypage-inbox-reply .btn { width: 100%; justify-content: center; }
  .mypage-account-footer { align-items: stretch; flex-direction: column; padding: 18px 8px; }
  .mypage-delete-account { width: fit-content; }
  .mypage-course-card { padding: 16px; }
  .mypage-course-head { align-items: center; }
  .mypage-course-head h3 { font-size: 20px; }
  .mypage-course-choices { grid-template-columns: 1fr; }
  .mypage-course-choice { min-height: 64px; }
  .mypage-course-yearline { grid-template-columns: auto 1fr auto 1fr auto; }
  .mypage-course-yearline span:nth-of-type(2), .mypage-course-yearline i:nth-of-type(2) { display: none; }
  .mypage-course-tier { grid-template-columns: 1fr; gap: 10px; }
  .health-companion-head { align-items: stretch; flex-direction: column; padding: 20px 16px; }
  .health-care-badge { width: fit-content; }
  .health-companion-body { grid-template-columns: 1fr; }
  .health-companion-resident { padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .health-balance, .health-suggestions { padding: 20px 16px; }
  .health-metrics { grid-template-columns: 1fr 1fr; }
  .health-metric:first-child { grid-column: 1 / -1; }
  .health-pfc > div { grid-template-columns: 96px 1fr 34px; }
  .health-suggestion { grid-template-columns: 1fr; padding: 14px; }
  .health-studio-button { width: 100%; justify-content: center; }
  .health-empty { align-items: stretch; flex-direction: column; padding: 16px; }
  .health-empty .btn { width: 100%; }
  .health-disclaimer { padding-inline: 16px; }
  .points-card-head { align-items: stretch; flex-direction: column; gap: 16px; padding: 20px 16px; }
  .points-balance { justify-items: start; }
  .points-ledger, .points-body { grid-template-columns: 1fr; }
  .points-ledger > div { padding: 12px 16px; }
  .points-ledger > div + div { border-top: 1px dashed var(--border-strong); border-left: 0; }
  .points-breakdown, .points-exchange { padding: 20px 16px; }
  .points-exchange { border-top: 1px solid var(--border); border-left: 0; }
  .mypage-tab { flex: 1; padding-inline: 5px; }
  .premium-card { grid-template-columns: 1fr; padding: 16px; }
  .premium-billing { align-items: stretch; flex-direction: column; }
  .premium-billing .btn { width: 100%; justify-content: center; }
  .premium-billing.is-active-management { width: 100%; }
  .invite-card { grid-template-columns: 1fr; padding: 16px; }
  .invite-code-row { align-items: stretch; flex-direction: column; }
  .invite-code-row .btn { width: 100%; }
  .invite-expansion { align-items: stretch; flex-direction: column; }
  .invite-expansion-button { width: 100%; }
  .invitee-item { align-items: flex-start; flex-direction: column; }
  .coupon-redeem-form > div { align-items: stretch; flex-direction: column; }
  .coupon-redeem-form .btn, .private-share-placeholder { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mypage-skill-track i, .mypage-course-choice, .mypage-course-overall-track i, .mypage-course-track i, .health-pfc b, .points-exchange-track i, .premium-toggle span, .premium-toggle span::after { transition: none; }
}

/* H2 コミュニティ称号: 研究所の規模と分野ごとの第一人者を静かな勲章として見せる。 */
.community-overview {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.community-overview-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.community-overview-head h3 { margin: 2px 0 0; color: var(--ink); font: 900 20px/1.4 var(--font-display); }
.community-overview-head > strong { color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.community-overview-head > strong span { margin-right: 4px; color: var(--accent); font: 900 28px/1 var(--font-mono); }
.community-titles { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.community-titles > span { flex: 0 0 auto; color: var(--accent-hover); font-size: 11px; font-weight: 900; }
.community-titles > div { display: flex; flex-wrap: wrap; gap: 8px; }
.community-titles p { margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
.community-title-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent-hover); font-size: 12px; }
.community-master-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 8px; margin-top: 16px; }
.community-master-item { display: grid; min-width: 0; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.community-master-item > div { display: grid; min-width: 0; gap: 2px; }
.community-master-item strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.community-master-item span:not(.community-master-avatar) { overflow: hidden; color: var(--accent-hover); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.community-master-item small { color: var(--ink-muted); font-size: 10px; }
.community-master-item.is-vacant { opacity: .68; }
.community-master-avatar { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-weight: 900; }
.community-master-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 680px) {
  .community-overview { padding: 16px; }
  .community-overview-head { align-items: flex-start; flex-direction: column; }
  .community-overview-head h3 { font-size: 17px; }
  .community-titles { align-items: flex-start; flex-direction: column; }
  .community-master-grid { grid-template-columns: 1fr; }
}

/* D7 貢献標本棚: レシピが研究室へ連れてきた住人を、進捗と立ち絵で可視化する。 */
.unlock-dashboard {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.unlock-dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.unlock-dashboard-head h3 { max-width: 720px; margin: 2px 0 0; color: var(--ink); font: 900 20px/1.4 var(--font-display); }
.unlock-dashboard-head > strong { flex: 0 0 auto; color: var(--accent); font: 900 32px/1 var(--font-mono); }
.unlock-dashboard-head > strong small { color: var(--ink-muted); font-size: 13px; }
.unlock-progress-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.unlock-progress-pair > div > span { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); font-size: 12px; font-weight: 800; }
.unlock-progress-pair strong { color: var(--ink); font-family: var(--font-mono); }
.unlock-progress-track { height: 10px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-deep); }
.unlock-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .45s ease; }
.unlock-progress-pair > div:first-child .unlock-progress-track i { background: var(--info); }
.unlock-family-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--ink-muted); font-size: 11px; }
.unlock-family-counts strong { color: var(--ink); font-family: var(--font-mono); }
.unlock-character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-top: 18px; }
.unlock-character {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.unlock-character { cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
button.unlock-character:hover { transform: translateY(-2px); border-color: var(--border-strong); }
button.unlock-character:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 2px; }
.unlock-character.family-element { border-top-color: var(--info); }
.unlock-character.family-nutrient { border-top-color: var(--herb); }
.unlock-character.family-force { border-top-color: var(--tomato); }
.unlock-character.family-elder { border-top-color: var(--ink-muted); }
.unlock-character.family-ingredient_fairy { border-top-color: var(--herb); }
.unlock-character-visual .character-portrait,
.unlock-character-visual .character-placeholder,
.unlock-character.is-locked > .character-placeholder { width: 48px; height: 56px; border-radius: 14px; font-size: 20px; }
.unlock-character > span:last-child { display: grid; min-width: 0; gap: 3px; }
.unlock-character strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unlock-character small { color: var(--ink-muted); font-size: 10px; }
.unlock-character.is-locked { border-top-color: var(--border-strong); opacity: .56; filter: grayscale(1); }
.unlock-dashboard-empty { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.unlock-dashboard-empty > span { font-size: 32px; }
.unlock-dashboard-empty strong { color: var(--ink); }
.unlock-dashboard-empty p,
.unlock-dashboard-note { margin: 4px 0 0; color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
.unlock-dashboard-note { margin-top: 12px; }

@media (max-width: 680px) {
  .unlock-dashboard { padding: 16px; }
  .unlock-dashboard-head { align-items: flex-start; flex-direction: column; }
  .unlock-dashboard-head h3 { font-size: 17px; }
  .unlock-progress-pair { grid-template-columns: 1fr; gap: 12px; }
  .unlock-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .unlock-character { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .unlock-progress-track i,
  button.unlock-character { transition: none; }
}
/* 公開プロフィール: 作者の人柄と提供レシピだけを見せる公開面 */
.public-profile-view { max-width: 1180px; margin: 0 auto; }
.public-profile-back { margin-bottom: 16px; }
.public-profile-loading { min-height: 42vh; display: grid; place-items: center; color: var(--ink-muted); }
.public-profile-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.public-profile-avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 38px;
}
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-profile-header h2 { margin: 2px 0; color: var(--ink); font: 900 28px/1.25 var(--font-display); }
.public-profile-bio { max-width: 680px; margin: 6px 0 0; color: var(--ink-muted); white-space: pre-wrap; }
.public-profile-recipes-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 28px 0 14px; }
.public-profile-recipes-head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.public-profile-recipes-head > span { color: var(--accent-hover); font-family: var(--font-mono); font-weight: 900; }
.public-profile-recipe:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
@media (max-width: 680px) {
  .public-profile-header { grid-template-columns: 1fr; justify-items: center; padding: 20px 16px; text-align: center; }
  .public-profile-avatar { width: 76px; height: 76px; }
  .public-profile-header h2 { font-size: 24px; }
}

/* スケッチ水彩サムネイル（gpt-image-2 自動生成） */
.rc-thumb {
  margin: -18px -20px 8px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.rc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rc-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(0, 0, 0, 0.025) 10px 20px),
    var(--surface-2);
  animation: thumbPulse 2.2s ease-in-out infinite;
}
.rc-thumb-err {
  animation: none;
  color: var(--tomato);
  cursor: pointer;
}
@keyframes thumbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.recipe-card:hover {
  border-color: #f3c99a;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.recipe-card.is-shared {
  border-color: #b9d8bc;
}
.recipe-card.auto-developed,
.recipe-list-row.auto-developed,
.recipe-head.auto-developed {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow);
}
.recipe-card.auto-developed,
.recipe-list-row.auto-developed {
  background: linear-gradient(180deg, var(--accent-soft) 0 6px, var(--surface) 6px 100%);
}
.auto-developed-badge {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  padding: 3px 8px;
}
.recipe-detail-research-badge {
  display: inline-flex;
  margin-bottom: 8px;
}
.skill-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  padding: 3px 8px;
}
.skill-beginner { background: var(--success-soft, #e8f5e9); color: var(--success, #2e7d32); }
.skill-basic { background: var(--info-soft, #e3f2fd); color: var(--info, #1565c0); }
.skill-intermediate { background: var(--accent-soft); color: var(--accent-strong, #a65300); }
.skill-advanced { background: var(--danger-soft, #ffebee); color: var(--tomato); }
.recipe-detail-skill-badge { margin-bottom: 8px; margin-left: 8px; }
.cost-nutrition {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}
.cost-nutrition-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cost-nutrition-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.cost-nutrition small {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .cost-nutrition-badges { display: grid; }
  .cost-nutrition-badge { width: 100%; }
  .recipe-translation-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .recipe-translation-select select,
  .recipe-translation-bar [data-translation-action] {
    width: 100%;
  }
}
.recipe-card.is-deleting {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.rc-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
}
.rc-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}
.rc-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.rc-category,
.rc-tag,
.rc-easy {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  padding: 3px 8px;
}
.rc-category {
  background: var(--ink);
  color: #fff7ec;
}
.rc-tag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-muted);
}
.rc-easy {
  background: var(--herb-soft);
  border: 1px solid #b8d9b4;
  color: #245f31;
}
.rc-easy.is-emphasized {
  box-shadow: 0 0 0 2px rgba(66, 128, 72, 0.12);
  transform: scale(1.03);
}
.rc-badges .experiment-recipe-badge { order: -1; }
.share-badge {
  align-self: flex-start;
  background: var(--herb-soft);
  border: 1px solid #bfddbe;
  border-radius: 999px;
  color: var(--herb);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
}
.rc-ing {
  font-size: 12px;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: auto;
}
.rc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.rc-like {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font: 700 12px/1 var(--font-mono);
  min-height: 30px;
  padding: 5px 10px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.18s;
}
.rc-like:hover,
.rc-like.is-liked {
  background: #fff0f0;
  border-color: #efb5ad;
  color: var(--tomato);
}
.rc-like.is-bumping {
  transform: scale(1.08);
}
.rc-like:disabled {
  cursor: wait;
  opacity: 0.7;
}
.rc-favorite {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font: 900 17px/1 var(--font);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.rc-favorite:hover,
.rc-favorite.is-favorited,
.recipe-favorite.is-favorited {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}
.rc-favorite:hover { transform: translateY(-1px); }
.rc-favorite:focus-visible,
.recipe-favorite:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rc-favorite:disabled,
.recipe-favorite:disabled { cursor: wait; opacity: 0.7; }
.rc-comment,
.rc-paper {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
}
.rc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rc-delete {
  appearance: none;
  align-self: center;
  background: transparent;
  border: none;
  color: var(--tomato);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 2px;
  opacity: 0.78;
}
.rc-delete:hover {
  opacity: 1;
  text-decoration: underline;
}
.rc-delete:focus-visible {
  outline: 3px solid var(--danger-soft, var(--accent-soft));
  outline-offset: 2px;
}
.rc-delete:disabled {
  cursor: wait;
  opacity: 0.45;
}
.share-stop {
  align-self: flex-start;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 0;
  text-decoration: underline;
}
.share-stop:hover {
  color: var(--tomato);
}
.recipes-list {
  display: grid;
  gap: 10px;
}
.recipe-list-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 10px 12px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.12s, opacity 0.24s;
}
.recipe-list-row:hover {
  border-color: #f3c99a;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.recipe-list-row.is-shared {
  border-color: #b9d8bc;
}
.recipe-list-row .rc-thumb {
  border-radius: 10px;
  height: 48px;
  margin: 0;
  width: 48px;
}
.recipe-list-row .rc-thumb-empty {
  animation: none;
  font-size: 9px;
  line-height: 1.3;
  padding: 4px;
  text-align: center;
}
.recipe-list-main {
  min-width: 0;
}
.recipe-list-main .rc-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-list-main .rc-badges {
  margin: 3px 0;
  overflow: hidden;
  max-height: 24px;
}
.recipe-list-row .rc-meta {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-list-row .rc-actions {
  justify-content: flex-end;
  min-width: 216px;
}
.recipe-list-row .share-stop {
  grid-column: 4;
}

/* ---------- 限定公開ページ / 共有トースト ---------- */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  color: var(--term-ink);
  font-size: 12px;
  padding: 10px 14px;
}
.share-page {
  background:
    linear-gradient(90deg, rgba(232, 99, 10, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232, 99, 10, 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px;
}
.share-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 72px;
}
.share-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.share-kicker {
  color: var(--accent-hover);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 2px;
}
.share-note {
  color: var(--ink-muted);
  font-size: 12px;
  margin: 0;
}
.share-loading {
  color: var(--ink-muted);
}
.share-version {
  position: fixed;
  right: 14px;
  bottom: 10px;
  z-index: 10;
  margin: 0;
  opacity: 0.78;
  pointer-events: none;
}
.share-hero {
  margin-top: -4px;
}
.share-cite-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.share-cite {
  display: inline-flex;
  align-items: center;
  background: var(--info);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  text-decoration: none;
}
.share-cite:hover {
  background: #236780;
}

/* ---------- Tipsライブラリ ---------- */
.wisdom-lab {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(232, 99, 10, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232, 99, 10, 0.06) 1px, transparent 1px),
    var(--surface);
  background-size: 22px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}
.wisdom-lab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #f2aa42, var(--herb));
}
.wisdom-lab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.wisdom-kicker {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.wisdom-lab h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
}
.wisdom-lab p {
  margin: 0;
  color: var(--ink-muted);
}
.wisdom-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent-hover);
  background: rgba(255, 253, 249, 0.76);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
}
.wisdom-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.wisdom-textarea {
  min-height: 102px;
  resize: vertical;
}
.wisdom-submit-group {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}
.wisdom-submit {
  min-width: 132px;
  align-self: stretch;
}
.wisdom-submit.is-loading::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
.wisdom-research {
  min-width: 152px;
  color: var(--info);
  background: var(--info-soft);
  border-color: #bdd9e5;
}
.wisdom-research:hover {
  color: #1d6685;
  border-color: #8bbdd1;
}
.wisdom-research.is-loading::before {
  border-color: rgba(47, 127, 163, 0.25);
  border-top-color: var(--info);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.wisdom-msg {
  min-height: 20px;
  margin-top: 10px !important;
  font-size: 12px;
  font-weight: 700;
}
.wisdom-msg.ok {
  color: var(--herb);
}
.wisdom-msg.err {
  color: var(--tomato);
}
.wisdom-result {
  margin-top: 14px;
}
.wisdom-card {
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.wisdom-card-head,
.wisdom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.wisdom-card-head {
  margin-bottom: 10px;
}
.wisdom-card h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
}
.wisdom-claim {
  color: var(--ink) !important;
  font-weight: 700;
  margin-bottom: 10px !important;
}
.wisdom-explanation {
  color: var(--ink-muted);
  margin-bottom: 12px !important;
}
.verdict-badge,
.wisdom-category,
.tip-wisdom {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 900;
}
.verdict-sound {
  color: #245f31;
  background: var(--herb-soft);
  border: 1px solid #b8d9b4;
}
.verdict-partial {
  color: #7c5200;
  background: #fff3ca;
  border: 1px solid #edcf79;
}
.verdict-myth {
  color: #8a2b18;
  background: #fde4dc;
  border: 1px solid #ebb2a3;
}
.wisdom-category {
  color: var(--info);
  background: var(--info-soft);
  border: 1px solid #bdd9e5;
}
.wisdom-mechanism {
  border: 1px solid rgba(47, 127, 163, 0.24);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.wisdom-mechanism span,
.wisdom-practical span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.wisdom-mechanism strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}
.wisdom-practical {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-bottom: 14px;
}
.wisdom-practical p {
  color: var(--ink-muted);
}
.paper-inline-link {
  color: var(--info);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 127, 163, 0.42);
}
.paper-inline-link:hover {
  border-bottom-color: var(--info);
}
.paper-evidence {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-bottom: 14px;
}
.paper-evidence h5 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.paper-evidence-list {
  display: grid;
  gap: 8px;
}
.paper-evidence-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  background: #f6fbfd;
  border: 1px solid #cde2ea;
  border-radius: var(--radius-sm);
  transition: border-color 0.12s, transform 0.12s;
}
.paper-evidence-card:hover {
  border-color: var(--info);
  transform: translateY(-1px);
}
.paper-label {
  grid-row: span 2;
  align-self: start;
  color: var(--info);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  background: var(--info-soft);
  border: 1px solid #bdd9e5;
  border-radius: 999px;
  padding: 2px 7px;
}
.paper-title {
  min-width: 0;
  font-weight: 900;
  line-height: 1.45;
}
.paper-meta {
  min-width: 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.45;
}
.paper-open {
  grid-row: span 2;
  color: var(--info);
}
.wisdom-save-msg {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
}
.wisdom-save-msg.ok {
  color: var(--herb);
}
.wisdom-save-msg.err {
  color: var(--tomato);
}
.tips-search-row {
  display: flex;
  gap: 10px;
  max-width: 760px;
}
.tips-browser-controls {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.tips-facet-group {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.tips-facet-label {
  padding-top: 7px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.tips-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.tips-toolbar .recipe-count {
  margin-right: auto;
}
.tips-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tips-export-actions .btn {
  min-height: 36px;
  padding: 7px 12px;
}
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.tip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.8;
}
.tip-card .tip-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--info);
  margin-top: 8px;
}
.tip-card .tip-body {
  line-height: 1.7;
}
.tip-card .kv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tip-card .kv-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tip-card .tip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.tip-card .tip-domain {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
}
.tip-card .tip-layer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border-radius: 6px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  color: var(--ink-muted);
}
.tip-card .tip-layer.layer-talk {
  color: var(--tomato);
  border-color: var(--tomato);
}
.tip-card .tip-layer.layer-science {
  color: var(--info);
  border-color: var(--info);
}
.tip-card .tip-layer.layer-glossary {
  color: var(--herb);
  border-color: var(--herb);
}
.tip-card .tip-wisdom {
  color: #7c5200;
  background: #fff3ca;
  border: 1px solid #edcf79;
}
.tip-card .tip-cite {
  font-size: 11px;
  color: var(--info);
  text-decoration: none;
  margin-left: auto;
}
.tip-card .tip-cite:hover {
  text-decoration: underline;
}

/* Tips 2.0 — 「平文の壁」を、今日・テーマ・クイズの3入口に分ける */
.tips-reading-hidden {
  display: none !important;
}

.tips-daily-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 24px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.tips-daily-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 180px;
  height: 120px;
  border: 20px solid var(--accent-soft);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.tips-daily-flame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 34px;
}
.tips-daily-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.tips-daily-kicker,
.tips-quiz-kicker,
.tip-theme-kicker {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tips-daily-kicker span {
  margin-left: 8px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.tips-daily-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
}
.tips-daily-reveal {
  max-width: 900px;
  color: var(--ink-muted);
  line-height: 1.75;
}
.tips-daily-reveal.is-open {
  color: var(--ink);
  animation: tips-reveal 0.28s ease-out both;
}
.tips-daily-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.tips-daily-actions,
.tip-theme-footer,
.tips-ranking-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tips-daily-actions {
  margin-top: 16px;
}
.tips-point-note {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
}
@keyframes tips-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tips-experience-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tips-experience-tab {
  min-height: 40px;
  padding: 8px 16px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 4px);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.tips-experience-tab.active {
  color: var(--accent-hover);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.tips-quiz-panel {
  margin-bottom: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tips-quiz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tips-quiz-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
}
.tips-quiz-panel blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}
.tips-quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tips-quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.tips-quiz-option span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-radius: 50%;
  font-family: var(--font-mono);
}
.tips-quiz-option:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.tips-quiz-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tips-quiz-result.is-correct { border-left: 4px solid var(--herb); }
.tips-quiz-result.is-wrong { border-left: 4px solid var(--tomato); }
.tips-quiz-result .btn { margin-left: auto; }

.tip-theme-card {
  grid-column: span 1;
  padding: 0;
  overflow: hidden;
  border-left-width: 1px;
  border-top: 4px solid var(--accent);
}
.tip-theme-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 18px;
}
.tip-theme-head h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
}
.tip-theme-head p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}
.tip-theme-detail {
  border-top: 1px solid var(--border);
}
.tip-theme-detail summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.tip-theme-detail summary::-webkit-details-marker { display: none; }
.tip-theme-detail summary::after {
  content: "+";
  margin-left: auto;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 18px;
}
.tip-theme-detail[open] summary::after { content: "−"; }
.tip-theme-detail summary span {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
}
.tip-theme-answer {
  padding: 0 18px 16px 46px;
  color: var(--ink-muted);
  line-height: 1.75;
}
.tip-theme-talk { background: var(--surface-2); }
.tip-narrator {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 0 18px 16px;
}
.tip-single-card > .tip-narrator { padding: 0; }
.tip-narrator-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.tip-narrator-silhouette { font-size: 22px; }
.tip-speech {
  position: relative;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tip-speech::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.tip-speech strong {
  display: block;
  color: var(--accent-hover);
  font-size: 11px;
}
.tip-speech p { margin: 2px 0 0; line-height: 1.65; }
.tip-theme-footer {
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px dashed var(--border);
}
.tip-theme-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tip-evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  color: var(--info);
  background: var(--info-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.tip-evidence-badge span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9px;
}
.tip-hee-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.tip-hee-btn b {
  min-width: 18px;
  padding-left: 4px;
  border-left: 1px solid var(--border-strong);
  font-family: var(--font-mono);
}
.tip-hee-btn.is-pressed {
  color: var(--ink-muted);
  background: var(--surface-2);
  cursor: default;
}
.tips-experience-tab:focus-visible,
.tips-quiz-option:focus-visible,
.tip-theme-detail summary:focus-visible,
.tip-hee-btn:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
.tips-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
.tips-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
}
.tips-table th,
.tips-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tips-table th:last-child,
.tips-table td:last-child {
  border-right: 0;
}
.tips-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff0df;
}
.tips-table th button {
  width: 100%;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.tips-table th button:hover,
.tips-table th button:focus-visible {
  color: var(--accent-hover);
}
.tips-table tbody tr:nth-child(even) {
  background: #fffdfa;
}
.tips-table tbody tr:hover {
  background: var(--accent-soft);
}
.tips-table .tip-id {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tips-table .tip-text-cell {
  width: 360px;
  min-width: 300px;
}
.tip-text-expand {
  display: -webkit-box;
  width: 100%;
  max-height: 3.1em;
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tip-text-expand.expanded {
  display: block;
  max-height: none;
  -webkit-line-clamp: unset;
}
.tips-table .tip-keywords {
  max-width: 220px;
  color: var(--ink-muted);
}
.tips-table a {
  color: var(--info);
  text-decoration: none;
}
.tips-table a:hover {
  text-decoration: underline;
}
.tips-load-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tips-load-actions.hidden {
  display: none;
}
.tips-load-more,
.tips-load-all {
  min-width: 180px;
}
.tips-load-sentinel {
  width: 100%;
  height: 2px;
}

/* ---------- ラボ分析ダッシュボード ---------- */
.analytics-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  max-width: 1180px;
}
.analytics-card {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(255, 248, 239, 0.96)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.analytics-card-head {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}
.analytics-card-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
}
.analytics-card-head p {
  min-height: 38px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.6;
}
.analytics-chart {
  width: 100%;
  height: 380px;
  min-width: 0;
}
.analytics-card:nth-child(2) .analytics-chart,
.analytics-card:nth-child(5) .analytics-chart {
  height: 420px;
}
.analytics-card:nth-child(2) canvas,
.analytics-card:nth-child(5) canvas {
  touch-action: none;
}

/* ---------- ラボ統計 ---------- */
.community-pulse {
  max-width: 1180px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(110deg, rgba(232, 99, 10, 0.08), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow);
}
.community-pulse-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.community-pulse-kicker {
  margin: 0 0 4px;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.community-pulse h3,
.community-pulse h4,
.community-pulse p { margin: 0; }
.community-pulse h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
}
.community-pulse-head p:last-child {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
}
.pulse-active-total {
  min-width: 210px;
  text-align: right;
}
.pulse-active-total strong,
.pulse-active-total span,
.pulse-active-total small { display: block; }
.pulse-active-total strong {
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: clamp(42px, 6vw, 66px);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.pulse-active-total span { margin-top: 8px; font-weight: 900; }
.pulse-active-total small { margin-top: 2px; color: var(--ink-muted); }
.community-pulse-grid {
  display: grid;
  grid-template-columns: minmax(400px, 1.4fr) minmax(210px, .8fr) minmax(210px, .8fr);
}
.pulse-panel {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
}
.pulse-panel:last-child { border-right: 0; }
.pulse-panel h4 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 14px;
}
.pulse-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pulse-panel-head span { color: var(--ink-muted); font-size: 10px; white-space: nowrap; }
.pulse-key { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 2px; }
.pulse-key:first-child { margin-left: 0; }
.pulse-key-active { background: var(--accent); }
.pulse-key-generation { background: var(--herb); }
.pulse-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(24px, 1fr));
  gap: 4px;
  min-width: 520px;
  height: 136px;
}
.pulse-chart-panel { overflow-x: auto; }
.pulse-day { display: grid; grid-template-rows: 112px 18px; gap: 4px; min-width: 0; }
.pulse-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--border-strong);
}
.pulse-bar {
  width: min(9px, 42%);
  min-height: 3px;
  border-radius: 3px 3px 0 0;
}
.pulse-bar-active { background: var(--accent); }
.pulse-bar-generation { background: var(--herb); }
.pulse-day-label {
  overflow: hidden;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  text-align: center;
  white-space: nowrap;
}
.pulse-ranking { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pulse-ranking li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink-muted);
  font-size: 11px;
}
.pulse-ranking li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-ranking strong { color: var(--ink); font-family: var(--font-mono); }
.pulse-rank {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
}
.pulse-ranking .pulse-empty { grid-template-columns: 1fr; }
.pulse-creation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pulse-creation span {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 10px;
  text-align: center;
}
.pulse-creation strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 960px;
}

@media (max-width: 980px) {
  .community-pulse-grid { grid-template-columns: 1fr 1fr; }
  .pulse-chart-panel { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .community-pulse-head { align-items: flex-start; flex-direction: column; padding: 18px; }
  .pulse-active-total { min-width: 0; text-align: left; }
  .community-pulse-grid { grid-template-columns: 1fr; }
  .pulse-chart-panel { grid-column: auto; }
  .pulse-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .pulse-panel:last-child { border-bottom: 0; }
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.stat-card .stat-num {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--accent-hover);
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 700;
}

/* ---------- ナレッジ分析 / 仮説エンジン ---------- */
.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.knowledge-lab,
.knowledge-hints {
  min-width: 0;
}
.knowledge-lab-head,
.knowledge-collection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.knowledge-kicker {
  margin: 0 0 2px;
  color: var(--info);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.knowledge-lab h3,
.knowledge-hints h3,
.knowledge-collection h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
}
.knowledge-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.knowledge-slot {
  min-height: 72px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fffaf2;
  color: var(--ink-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.knowledge-slot.filled {
  display: grid;
  gap: 2px;
  position: relative;
  text-align: left;
  border-style: solid;
  border-color: #d7b57c;
  background: linear-gradient(135deg, #fff8ec, #f8ead4);
  color: var(--ink);
  padding: 10px 30px 10px 12px;
}
.knowledge-slot.filled span {
  color: var(--ink-faint);
  font-size: 11px;
}
.knowledge-slot.filled strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.knowledge-slot.filled em {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--tomato);
  font-style: normal;
}
.knowledge-tabs,
.knowledge-status-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.knowledge-tab,
.knowledge-status {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 12px;
  cursor: pointer;
}
.knowledge-tab.active,
.knowledge-status.active {
  border-color: var(--info);
  background: var(--info-soft);
  color: #165a78;
}
.knowledge-status-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(47, 127, 163, 0.14);
  font-variant-numeric: tabular-nums;
}
.knowledge-load-more {
  justify-self: center;
  min-width: 220px;
}
.knowledge-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 12px;
  margin-bottom: 10px;
}
.knowledge-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 11px;
  cursor: pointer;
}
.knowledge-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-chip em {
  color: var(--ink-faint);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.knowledge-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.knowledge-free {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 14px;
}
.knowledge-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.knowledge-latest {
  margin-top: 16px;
}
.knowledge-hint-list {
  display: grid;
  gap: 10px;
}
.knowledge-hint {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fffaf2;
  color: var(--ink);
  font: inherit;
  text-align: left;
  padding: 12px;
  cursor: pointer;
}
.knowledge-hint:hover {
  border-color: var(--info);
  background: var(--info-soft);
}
.knowledge-hint strong {
  line-height: 1.45;
}
.knowledge-hint span {
  color: var(--ink-muted);
  font-size: 12px;
}
.knowledge-collection {
  display: grid;
  gap: 14px;
}
.knowledge-cards {
  display: grid;
  gap: 14px;
}
.hypothesis-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(47, 127, 163, 0.08), rgba(47, 127, 163, 0) 42%),
    var(--surface);
  box-shadow: var(--shadow);
}
.hypothesis-card.latest {
  border-color: #a9cbda;
}
.hypothesis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.hypothesis-meta {
  margin: 0 0 2px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 800;
}
.hypothesis-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
}
.hypothesis-card-body--with-slide {
  display: grid;
  grid-template-columns:
    minmax(280px, var(--hypothesis-split-left, 58fr))
    8px
    minmax(220px, var(--hypothesis-split-right, 42fr));
  gap: 0;
  align-items: start;
  min-width: 0;
}
.hypothesis-card-copy {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding-right: 8px;
}
.hypothesis-splitter {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 8px;
  min-height: 160px;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: col-resize;
  touch-action: none;
  transition: background 160ms ease, color 160ms ease;
}
.hypothesis-splitter::before {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: var(--border-strong);
  content: "";
  transform: translateX(-50%);
  transition: background 160ms ease, width 160ms ease;
}
.hypothesis-splitter-grip {
  position: sticky;
  top: 48px;
  z-index: 1;
  display: block;
  width: 4px;
  height: 20px;
  margin: 48px auto 0;
  border-radius: 2px;
  background: radial-gradient(circle, currentColor 1.25px, transparent 1.5px) center / 4px 6px repeat-y;
}
.hypothesis-splitter:hover,
.hypothesis-splitter:focus-visible,
.hypothesis-splitter.is-dragging {
  background: var(--accent-soft);
  color: var(--accent);
}
.hypothesis-splitter:hover::before,
.hypothesis-splitter:focus-visible::before,
.hypothesis-splitter.is-dragging::before {
  width: 2px;
  background: var(--accent);
}
.hypothesis-splitter:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
body.hypothesis-splitting,
body.hypothesis-splitting * {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}
.hypothesis-slide {
  position: sticky;
  top: 16px;
  grid-column: 3;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: 8px;
}
.hypothesis-slide-thumb {
  display: grid;
  width: 100%;
  gap: 4px;
  justify-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.hypothesis-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.hypothesis-slide-hint {
  padding-left: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}
.hypothesis-slide-thumb:hover img {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.hypothesis-slide-thumb:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
@media (max-width: 720px) {
  .hypothesis-card-body--with-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hypothesis-card-copy {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
  }

  .hypothesis-splitter {
    display: none;
  }

  .hypothesis-slide {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding-left: 0;
  }

  .hypothesis-slide img {
    width: 100%;
    height: auto;
  }
}
.hypothesis-badges,
.hypothesis-elements,
.hypothesis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.confidence-badge,
.status-badge,
.hypothesis-elements span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 900;
}
.confidence-badge.conf-high {
  background: var(--herb-soft);
  color: var(--herb);
}
.confidence-badge.conf-mid {
  background: #fff1c7;
  color: #8a5d00;
}
.confidence-badge.conf-low {
  background: #eee9df;
  color: var(--ink-muted);
}
.status-badge {
  background: var(--surface-2);
  color: var(--ink-muted);
}
.status-badge.status-testing {
  background: var(--info-soft);
  color: var(--info);
}
.status-badge.status-verified {
  background: var(--herb-soft);
  color: var(--herb);
}
.status-badge.status-rejected {
  background: #fbe3dc;
  color: var(--tomato);
}
.hypothesis-body {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.hypothesis-elements span {
  background: #fff7eb;
  color: var(--accent-hover);
}
.hypothesis-rationale {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fffaf2;
  padding: 10px 12px;
}
.hypothesis-rationale summary {
  cursor: pointer;
  font-weight: 900;
}
.hypothesis-rationale ul {
  margin: 10px 0 0;
  padding-left: 18px;
}
.hypothesis-rationale li {
  margin-bottom: 8px;
}
.hypothesis-novelty {
  margin: 8px 0 0;
  color: var(--info);
  font-weight: 800;
}
.hypothesis-expected {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.hypothesis-expected span {
  color: var(--ink-faint);
  font-weight: 900;
}
.hypothesis-expected p {
  margin: 0;
  overflow-wrap: anywhere;
}
.hypothesis-run-link {
  justify-self: start;
  border: none;
  background: transparent;
  color: var(--info);
  font: inherit;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
}

/* ---------- レスポンシブ（PCエリア / スマホエリア） ---------- */
@media (max-width: 1180px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .sidebar .brand-text p {
    display: none;
  }
  .nav {
    flex-direction: row;
    flex: 1;
  }
  .nav-item {
    padding: 8px 10px;
    white-space: nowrap;
  }
  .nav-label {
    display: none;
  }
  .nav-count {
    display: none;
  }
  .sidebar-foot {
    border-top: none;
    padding-top: 0;
  }
  .sidebar-foot .engine-badge {
    display: none;
  }
  .sidebar-foot .language-switcher {
    width: 44px;
    height: 44px;
    margin: 0 0 0 6px;
    padding: 0;
    justify-content: center;
  }
  .sidebar-foot .language-switcher select {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 0;
  }
  .sidebar-foot .app-version {
    display: none;
  }
  .main {
    padding: 18px 14px 80px;
  }
  .share-shell {
    width: min(100% - 24px, 1120px);
    padding-top: 18px;
  }
  .sop-step {
    grid-template-columns: 1fr;
  }
  .step-left {
    position: static;
  }
}
@media (max-width: 560px) {
  .card {
    padding: 18px;
  }
  .recipes-controls {
    border-radius: 14px;
    padding: 12px;
  }
  .recipe-search-row {
    grid-template-columns: 1fr;
  }
  .recipe-search-submit {
    min-height: 42px;
    width: 100%;
  }
  .recipe-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .recipe-count {
    margin-right: 0;
  }
  .recipe-sort-label,
  .recipe-sort-select,
  .view-toggle,
  #clearRecipeFilters {
    width: 100%;
  }
  .knowledge-layout,
  .knowledge-slots,
  .hypothesis-expected {
    grid-template-columns: 1fr;
  }
  .knowledge-lab-head,
  .knowledge-collection-head,
  .hypothesis-head {
    flex-direction: column;
  }
  .knowledge-free {
    grid-template-columns: 1fr;
  }
  .recipe-sort-label {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }
  .recipe-list-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }
  .recipe-list-row .rc-stats,
  .recipe-list-row .rc-actions,
  .recipe-list-row .share-stop {
    grid-column: 1 / -1;
  }
  .recipe-list-row .rc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }
  .recipe-list-row .rc-actions .btn,
  .recipe-list-row .rc-delete,
  .recipe-list-row .share-stop {
    min-height: 44px;
    width: 100%;
  }
  .wisdom-lab {
    padding: 18px;
  }
  .wisdom-lab-head,
  .wisdom-input-row {
    grid-template-columns: 1fr;
  }
  .wisdom-lab-head {
    display: grid;
  }
  .wisdom-mark {
    display: none;
  }
  .wisdom-submit {
    min-height: 48px;
  }
  .wisdom-submit-group {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .paper-evidence-card {
    grid-template-columns: 1fr auto;
  }
  .paper-label {
    grid-row: auto;
    width: max-content;
  }
  .paper-title,
  .paper-meta {
    grid-column: 1 / -1;
  }
  .paper-open {
    grid-row: 1;
    grid-column: 2;
  }
  .recipe-head h2 {
    font-size: 21px;
  }
  .dbg-body {
    max-height: 260px;
  }
}

/* ---------- みんなの台所（掲示板） ---------- */
.board-section {
  display: grid;
  gap: 18px;
}
.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.board-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12.5px;
}
.board-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fffaf2;
}
.board-form.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgb(188 85 36 / 12%);
}
.board-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.board-tabs button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.board-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.board-fields {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.board-fields textarea {
  min-height: 86px;
  resize: vertical;
}
.board-photo-field {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.board-photo-picker {
  display: grid;
  gap: 6px;
}
.board-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-hover);
  font-weight: 800;
  cursor: pointer;
}
.board-file input {
  display: none;
}
.board-paste-hint {
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.45;
}
.board-preview {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.board-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.board-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.board-msg {
  min-height: 20px;
  font-size: 12px;
  color: var(--ink-faint);
}
.board-msg.ok {
  color: var(--herb);
}
.board-msg.err {
  color: var(--tomato);
}
.board-list {
  display: grid;
  gap: 14px;
}
.board-empty {
  margin: 0;
  color: var(--ink-muted);
}
.board-thread {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.board-post {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px;
}
.board-post.is-ai {
  border-color: #f0c99d;
  background: #fff3e3;
}

.board-post.is-character {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.board-character-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  background: var(--surface);
}

.board-character-avatar.is-emoji {
  display: inline-grid;
  place-items: center;
  font-size: 20px;
}
.board-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.board-post-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.board-post-head span {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 11.5px;
}
.attribution-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0;
  padding: 5px 10px;
  border: 1px solid #e8c891;
  border-radius: 999px;
  background: #fff8e8;
  color: #725019;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.master-recipe-badge {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.attribution-link {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.attribution-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.attribution-link:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.attribution-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  overflow: hidden;
  margin-right: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  font-size: 12px;
}
.attribution-avatar img { width: 100%; height: 100%; object-fit: cover; }
.recipe-delete {
  border-color: var(--tomato);
  color: var(--tomato);
}
.recipe-delete:hover { background: var(--danger-soft, var(--surface-2)); }
.recipe-delete:focus-visible { outline: 3px solid var(--danger-soft, var(--accent-soft)); outline-offset: 2px; }
.board-post-head .board-cooking-type {
  flex: 0 1 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: normal;
}
.board-post p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.board-chef {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffe2bd;
}
.board-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  max-width: 620px;
}
.board-photos .board-photo {
  width: 100%;
}
.board-photo {
  display: block;
  width: min(220px, 100%);
  margin-top: 10px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}
.board-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.board-replies {
  display: grid;
  gap: 8px;
  margin-left: 28px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.board-post.is-reply {
  padding: 10px 12px;
}
.board-thinking {
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 12px;
}
.board-reply-toggle {
  justify-self: start;
  border: none;
  background: transparent;
  color: var(--accent-hover);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 0;
}
.board-reply-form {
  display: grid;
  gap: 8px;
  margin-left: 28px;
}
.board-reply-form textarea {
  width: 100%;
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.board-reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- タイトル直下ヒーロー画像 ---------- */
.recipe-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}
.recipe-hero.loading {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  background: linear-gradient(120deg, #fbf5ea, #f4e8d4, #fbf5ea);
  background-size: 200% 100%;
  animation: thumbPulse 2.4s ease-in-out infinite;
}

/* ---------- ライトボックス（スケッチ拡大表示） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 18, 10, 0.86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.lightbox.hidden {
  display: none;
}
.lb-stage {
  max-width: 100%;
  max-height: calc(100% - 44px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  cursor: zoom-in; /* もう1クリックで等倍へ */
  background: #fff;
  touch-action: pan-x pan-y pinch-zoom;
}
/* 等倍（オリジナルサイズ）モード: はみ出す分はスクロールで見る */
.lightbox.full {
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  padding: 48px;
}
.lightbox.full .lb-stage {
  max-width: none;
  max-height: none;
  margin: auto;
}
.lightbox.full img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.lb-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  z-index: 201;
}
.lb-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.lb-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 201;
  width: 46px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.lb-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
}
.lb-nav:disabled {
  opacity: 0.24;
  cursor: default;
}
.lb-prev {
  left: 22px;
}
.lb-next {
  right: 22px;
}
/* 参考文献の日本語訳表示 */
.ref .ref-orig {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
}
.ref .ref-summary {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 3px 0;
  line-height: 1.6;
}

.lb-caption {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 14px;
  border-radius: 999px;
  max-width: 88vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 201;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 18px;
  }
  .lightbox img {
    max-width: 94vw;
    max-height: 78vh;
  }
  .lightbox.full {
    padding: 42px 18px;
  }
  .lb-close {
    top: 10px;
    right: 12px;
  }
  .lb-nav {
    width: 40px;
    height: 54px;
    font-size: 34px;
    background: rgba(0, 0, 0, 0.28);
  }
  .lb-prev {
    left: 10px;
  }
  .lb-next {
    right: 10px;
  }
  .lb-caption {
    bottom: 10px;
    max-width: 92vw;
    font-size: 11.5px;
    padding: 6px 10px;
  }
}

/* ---------- 本格モバイル最適化（375〜768px） ---------- */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
    line-height: 1.68;
  }

  .app {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: auto;
    min-height: 62px;
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 18px rgba(120, 72, 20, 0.08);
  }

  .sidebar-legal { display: none; }

  .brand {
    min-width: 0;
    flex: 1;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-text h1 {
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-text p {
    display: block;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-foot {
    margin-left: auto;
    padding: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
  }

  .sidebar-foot .auth-shell {
    margin: 0 6px 0 0;
  }

  .sidebar-foot .auth-login {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .sidebar-foot .auth-login-label {
    display: none;
  }

  .sidebar-foot .auth-shell.hidden,
  .sidebar-foot .auth-login.hidden,
  .sidebar-foot .sidebar-profile.hidden {
    display: none;
  }

  .sidebar-foot .sidebar-profile {
    display: flex;
    width: 76px;
    height: 44px;
    min-height: 44px;
    margin-left: 6px;
    padding: 0;
  }

  .sidebar-foot .sidebar-profile-main {
    width: 44px;
    min-height: 42px;
    padding: 4px;
    grid-template-columns: 1fr;
  }

  .sidebar-foot .sidebar-profile-avatar { width: 34px; height: 34px; }

  .sidebar-foot .sidebar-profile-copy,
  .sidebar-foot .sidebar-profile-edit { display: none; }

  .sidebar-foot .auth-logout {
    display: grid;
    width: 32px;
    min-height: 42px;
    padding: 0;
    place-items: center;
    border-top: 0;
    border-left: 1px solid var(--border);
    font-size: 0;
  }

  .sidebar-foot .auth-logout::before {
    content: '↪';
    font-size: 16px;
  }

  .onboarding-backdrop { padding: 12px; }
  .onboarding-modal { padding: 24px 20px; }
  .onboarding-mark { width: 56px; height: 56px; margin-bottom: 12px; font-size: 28px; }
  .studio-share-notice { align-items: flex-start; padding: 12px; }

  .sidebar-foot #openSettings {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
  }

  .sidebar-foot #openSettings .nav-icon {
    width: auto;
    font-size: 20px;
  }

  .sidebar-foot #openSettings .nav-label,
  .sidebar-foot .engine-badge,
  .sidebar-foot .app-version {
    display: none;
  }

  .sidebar-foot .language-switcher {
    width: 44px;
    height: 44px;
    margin: 0 0 0 6px;
    padding: 0;
    justify-content: center;
  }

  .sidebar-foot .language-switcher select {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 0;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    flex: none;
    padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    border-top: 1px solid var(--border);
    background: rgba(255, 253, 249, 0.96);
    box-shadow: 0 -8px 24px rgba(120, 72, 20, 0.12);
    backdrop-filter: blur(12px);
  }

  .nav-item {
    position: relative;
    min-width: 0;
    min-height: 56px;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 13px;
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    touch-action: manipulation;
  }

  .nav-icon {
    width: auto;
    font-size: 20px;
    line-height: 1;
  }

  .nav-label {
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-item[data-view="knowledge"] .nav-label {
    font-size: 0;
  }

  .nav-item[data-view="knowledge"] .nav-label::after {
    content: "分析";
    font-size: 10.5px;
  }

  .nav-count {
    position: absolute;
    top: 3px;
    right: 6px;
    display: block;
    min-width: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 16px;
  }

  .nav-new-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-height: 16px;
    padding: 2px 5px;
    font-size: 8px;
  }

  .nav-item.has-blog-new .nav-count {
    right: 39px;
  }

  .main {
    width: 100%;
    padding: 16px 14px calc(96px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }

  .view-head {
    margin-bottom: 16px;
  }

  .view-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .view-lead,
  .section-lead {
    max-width: none;
    font-size: 15px;
    line-height: 1.75;
  }

  .studio-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }

  .card,
  .wisdom-lab {
    border-radius: 14px;
    padding: 18px;
  }

  .card.intro {
    max-width: none;
    margin: 0;
  }

  .section-title {
    font-size: 21px;
    line-height: 1.35;
  }

  .field {
    margin-bottom: 18px;
  }

  .field-label {
    font-size: 15px;
    line-height: 1.55;
  }

  .field-sub,
  .field-hint {
    font-size: 13px;
    line-height: 1.55;
  }

  .text-input,
  select.text-input,
  textarea.text-input {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.55;
  }

  textarea.text-input {
    min-height: 132px;
  }

  .free-text {
    min-height: 148px;
  }

  .btn {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
  }

  .btn-sm {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 13px;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .btn-block {
    min-height: 52px;
    width: 100%;
    font-size: 16px;
  }

  .dropzone {
    margin-bottom: 18px;
  }

  .dropzone-inner {
    min-height: 150px;
    padding: 26px 16px;
  }

  .dz-title {
    font-size: 16px;
  }

  .dz-hint {
    font-size: 13px;
  }

  .thumb {
    width: 82px;
    height: 82px;
  }

  .thumb button {
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .progress-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .run-clock {
    font-size: 12px;
    padding: 4px 10px;
  }

  .pipeline-wrap {
    overflow-x: hidden;
    padding-top: 2px;
  }

  #pipelineSvg {
    min-width: 0;
  }

  .queue-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .queue-stub {
    display: none;
  }

  .queue-copy strong {
    font-size: 18px;
  }

  .queue-copy span,
  .queue-state {
    font-size: 13px;
  }

  .queue-state {
    justify-self: start;
    white-space: normal;
  }

  .debug-console {
    min-height: 250px;
  }

  .dbg-head {
    padding: 9px 10px;
  }

  .dbg-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dbg-body {
    max-height: 300px;
    padding: 12px;
    font-size: 12px;
  }

  .dbg-line {
    gap: 7px;
  }

  .dbg-stream {
    margin-left: 0;
    word-break: break-word;
  }

  .tips-window {
    padding: 15px;
  }

  .tips-window-head {
    align-items: flex-start;
    gap: 8px;
  }

  .tips-text {
    font-size: 15px;
  }

  .result {
    gap: 16px;
  }

  .recipe-head {
    padding: 14px 16px;
    border-left-width: 4px;
    border-radius: 14px;
  }

  .recipe-head h1,
  .recipe-head h2 {
    font-size: 23px;
    line-height: 1.32;
  }

  .recipe-head .subtitle,
  .recipe-meta,
  .block-title,
  .logic-check,
  .step-action {
    font-size: 15px;
  }

  .recipe-meta {
    gap: 8px 12px;
  }

  .recipe-actions {
    align-items: stretch;
  }

  .recipe-actions .btn {
    width: 100%;
  }

  .block-title-row,
  .recipe-tool-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .block-title-row .btn,
  .recipe-tool-actions .btn,
  .recipe-top-tools .btn {
    width: 100%;
  }

  .consult-line {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ing-table,
  .ing-table tbody,
  .ing-table tr,
  .ing-table td {
    display: block;
    width: 100%;
  }

  .ing-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .ing-table td {
    padding: 2px 0;
    border-bottom: none;
    word-break: break-word;
  }

  .ing-table .amount {
    white-space: normal;
    font-size: 14px;
  }

  .ing-table .note {
    font-size: 14px;
  }

  .sop-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
    padding: 5px;
    border-radius: 18px;
  }

  .sop-tab {
    width: 100%;
    min-height: 68px;
    padding: 8px 6px;
    border-radius: 14px;
    white-space: normal;
  }

  .sop-tab-label {
    font-size: 13px;
  }

  .sop-tab-help {
    font-size: 9.5px;
  }

  .recipe-mode-switch {
    width: 100%;
    margin: 14px 0;
    gap: 5px;
    padding: 5px;
    border-radius: 18px;
  }

  .recipe-mode-option {
    min-height: 64px;
    padding: 8px 6px;
    border-radius: 14px;
  }

  .recipe-mode-label {
    font-size: 13px;
  }

  .recipe-mode-help {
    font-size: 9.5px;
  }

  .easy-nudge {
    margin-inline: 0;
  }

  .sop-step {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .step-left {
    position: static;
  }

  .step-visual,
  .step-visual img,
  .step-visual.placeholder {
    width: 100%;
  }

  .step-visual figcaption {
    font-size: 12px;
  }

  .sop-step-head {
    align-items: flex-start;
    gap: 8px;
  }

  .step-no {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .step-title {
    min-width: 0;
    font-size: 17px;
    line-height: 1.45;
  }

  .step-talk,
  .step-science,
  .easy-talk,
  .easy-note,
  .step-checkpoint,
  .glossary dd,
  .pitfalls li,
  .local-tips li,
  .ref .ref-summary {
    font-size: 14px;
  }

  .easy-intro p {
    font-size: 15px;
  }

  .param-chip,
  .cite,
  .share-cite {
    min-height: 32px;
    align-items: center;
  }

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

  .recipe-card {
    min-width: 0;
    padding: 14px;
    border-radius: 14px;
  }

  .rc-thumb {
    margin: -14px -14px 8px;
    border-radius: 14px 14px 0 0;
  }

  .rc-title {
    font-size: 16px;
    line-height: 1.45;
  }

  .rc-ing,
  .rc-meta {
    font-size: 13px;
  }

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

  .rc-actions .btn,
  .rc-delete,
  .share-stop {
    width: 100%;
    min-height: 44px;
  }

  .rc-delete,
  .share-stop {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
    text-align: center;
  }

  .view-actions,
  .settings-actions,
  .codex-actions,
  .tips-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: none;
  }

  .view-actions .btn,
  .settings-actions .btn,
  .codex-actions .btn,
  .tips-search-row .btn {
    width: 100%;
  }

  .tips-browser-controls {
    padding: 12px;
  }

  .tips-facet-group {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tips-facet-label {
    padding-top: 0;
  }

  .tips-toolbar {
    align-items: stretch;
  }

  .tips-toolbar .recipe-count {
    width: 100%;
  }

  .tips-toolbar .recipe-sort-label,
  .tips-toolbar .view-toggle {
    flex: 1 1 100%;
  }

  .tips-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tips-export-actions .btn:last-child {
    grid-column: 1 / -1;
  }

  .tips-table-wrap {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }

  .import-msg,
  .verify-msg,
  .wisdom-msg {
    font-size: 13px;
  }

  .wisdom-lab-head,
  .wisdom-input-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wisdom-lab-head {
    gap: 10px;
  }

  .wisdom-mark {
    display: none;
  }

  .wisdom-lab h3 {
    font-size: 21px;
  }

  .wisdom-lab p {
    font-size: 15px;
  }

  .wisdom-submit-group {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .wisdom-submit,
  .wisdom-research {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .wisdom-card,
  .wisdom-mechanism,
  .paper-evidence-card {
    min-width: 0;
  }

  .wisdom-card h4 {
    font-size: 18px;
    line-height: 1.45;
  }

  .paper-evidence-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .paper-label {
    grid-row: auto;
    width: max-content;
  }

  .paper-title,
  .paper-meta {
    grid-column: 1 / -1;
    min-width: 0;
    word-break: break-word;
  }

  .paper-open {
    grid-row: 1;
    grid-column: 2;
  }

  .tips-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tip-card {
    padding: 14px;
    font-size: 15px;
  }

  .tip-card .tip-meta {
    align-items: flex-start;
  }

  .tip-card .tip-cite {
    margin-left: 0;
    width: 100%;
  }

  .stats-cards,
  .analytics-dashboard {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .analytics-card {
    padding: 14px 12px;
  }

  .analytics-card-head h3 {
    font-size: 16px;
  }

  .analytics-chart,
  .analytics-card:nth-child(2) .analytics-chart,
  .analytics-card:nth-child(5) .analytics-chart {
    height: 360px;
  }

  .modal-backdrop {
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
  }

  .modal,
  .modal-wide {
    width: calc(100vw - 32px);
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-head {
    flex: 0 0 auto;
    padding: 14px 16px;
  }

  .modal-head h2 {
    font-size: 18px;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .settings-lead {
    font-size: 14px;
  }

  .key-row {
    align-items: stretch;
  }

  .key-row .text-input {
    min-width: 0;
  }

  .history-list {
    max-height: none;
  }

  .history-item,
  .hi-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ingest-result {
    max-width: 100%;
    overflow-x: auto;
  }

  .ingest-table {
    min-width: 620px;
  }

  .tooltip {
    left: 16px !important;
    right: 16px;
    max-width: none;
    width: auto;
    font-size: 13px;
  }

  .toast {
    left: 14px;
    right: 14px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    text-align: center;
    font-size: 14px;
  }

  .share-page {
    overflow-x: hidden;
  }

  .share-shell {
    width: 100%;
    padding: 16px 14px 72px;
  }

  .share-header {
    display: block;
    margin-bottom: 16px;
  }

  .share-kicker {
    font-size: 19px;
    line-height: 1.35;
  }

  .share-note {
    font-size: 14px;
  }

  .share-version {
    right: 12px;
    bottom: 8px;
  }

  .board-section {
    gap: 14px;
  }

  .board-form {
    padding: 12px;
  }

  .board-fields,
  .board-photo-field {
    grid-template-columns: 1fr;
  }

  .board-preview {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .board-actions .btn {
    width: 100%;
  }

  .board-post-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .board-replies,
  .board-reply-form {
    margin-left: 10px;
  }

  .lightbox {
    padding: 18px 12px;
  }

  .lightbox img {
    max-width: 94vw;
    max-height: 76vh;
  }

  .lightbox.full {
    padding: 54px 12px 24px;
  }

  .lb-close {
    top: 10px;
    right: 12px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .lb-nav {
    width: 52px;
    height: 64px;
    font-size: 42px;
    background: rgba(0, 0, 0, 0.34);
  }

  .lb-prev {
    left: 8px;
  }

  .lb-next {
    right: 8px;
  }

  .lb-caption {
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: 92vw;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .terms-wall {
    place-items: stretch;
    padding: 0;
  }

  .terms-card {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .terms-head,
  .terms-scroll {
    padding: 20px;
  }

  .terms-actions {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .login-wall {
    align-items: start;
    padding: 16px;
  }

  .login-wall-card {
    padding: 24px 20px;
  }

  .login-wall-brand {
    margin-bottom: 20px;
  }

  .main {
    padding-inline: 12px;
  }

  .brand-text h1 {
    font-size: 17px;
  }

  .brand-text p {
    max-width: 210px;
  }

  .nav {
    gap: 2px;
    padding-inline: 6px;
  }

  .nav-item {
    min-height: 58px;
    padding-inline: 2px;
    font-size: 9.8px;
  }

  .nav-icon {
    font-size: 19px;
  }

  .recipes-grid {
    grid-template-columns: 1fr;
  }

  .filter-chip {
    font-size: 11px;
    padding: 7px 10px;
  }

  .rc-stats {
    flex-wrap: wrap;
  }

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

  .card,
  .wisdom-lab,
  .modal-body {
    padding: 16px;
  }

  .recipe-head h1,
  .recipe-head h2 {
    font-size: 21px;
  }

  .stat-card .stat-num {
    font-size: 30px;
  }

  .analytics-card-head p {
    min-height: 0;
  }
}

/* ---------- 動画スタジオ Coming Soon ---------- */
.nav-coming-soon { opacity: 0.45; }
.nav-coming-soon:hover { opacity: 0.65; }
.nav-soon {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  background: #d8cfc2; color: #7a6a55; border-radius: 999px;
  padding: 1px 7px; margin-left: 6px; text-transform: uppercase;
}
.coming-soon-badge {
  font-size: 0.7rem; font-weight: 700; vertical-align: middle;
  background: linear-gradient(135deg, #e8762a, #c5541a); color: #fff;
  border-radius: 999px; padding: 3px 12px; margin-left: 10px; letter-spacing: 0.05em;
}
.coming-soon-teaser .teaser-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.coming-soon-teaser .teaser-list li { line-height: 1.7; padding-left: 4px; }
.coming-soon-teaser .teaser-note { color: #a08b6f; font-size: 0.9rem; margin: 0; text-align: right; }

/* ---------- 初撃プロンプト小窓 ---------- */
.first-prompt { margin: 10px 0 4px; font-size: 0.88rem; }
.first-prompt summary { cursor: pointer; color: #a4703a; font-weight: 600; user-select: none; }
.first-prompt summary:hover { color: #e8762a; }
.first-prompt blockquote {
  margin: 8px 0 0; padding: 10px 14px; background: #faf3e8;
  border-left: 3px solid #e8b98a; border-radius: 0 10px 10px 0;
  color: #6b5b46; line-height: 1.7; white-space: pre-wrap;
}
.first-prompt-private-note {
  display: block;
  margin: 4px 0 8px;
  color: var(--ink-faint);
  font-size: 0.74rem;
}
.prod-status-line { color: #a08b6f; }

/* ================= 無人研究室（住人の自由研究ライブ） ================= */
.research-live {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 130%);
}
.research-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.research-live-head h3 { margin: 2px 0 0; font-size: 1.05rem; }
.research-live-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.research-pill {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  white-space: nowrap;
}
.research-pill.on { border-color: var(--herb); color: var(--herb); background: var(--herb-soft); }
.research-pill.off { color: var(--ink-faint); }
.research-ticker {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  font-size: 0.85rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.research-ticker.active {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.research-ticker-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: researchPulse 1.2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes researchPulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .35; transform: scale(.7);} }
.research-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}
.research-log-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px;
  font-size: 0.82rem;
}
.research-log-item.status-flagged { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.research-log-item.status-promoted { border-color: var(--herb); box-shadow: 0 0 0 1px var(--herb-soft); }
.research-log-item.status-failed { opacity: 0.65; }
.research-log-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.research-log-status { font-weight: 700; color: var(--ink); }
.research-log-time { color: var(--ink-faint); font-size: 0.72rem; }
.research-log-title { margin: 2px 0 6px; color: var(--ink); }
.research-log-elements {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.research-log-note { margin: 6px 0 0; color: var(--ink-muted); line-height: 1.5; }
.research-log-jump {
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--info);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.research-score-bar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-deep);
  overflow: hidden;
  margin: 6px 0;
}
.research-score-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent) 0%, #f2a54a 100%);
  border-radius: 999px;
  transition: width .6s ease;
}
.research-score-bar span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 0.7rem;
  line-height: 18px;
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hypothesis-card.auto { border-left: 3px solid var(--accent); }
.hypothesis-card .card-score { max-width: 340px; }
.research-assignees { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.research-assignees-label { color: var(--ink-faint); font-size: 0.7rem; font-weight: 800; }
.research-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.research-assignee { padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.research-assignee img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.hypothesis-card.flash { animation: hypoFlash 1.6s ease; }
@keyframes hypoFlash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.hypothesis-note {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.flag-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  white-space: nowrap;
}

/* ================= 住人コラム ================= */
.blog-automation-note {
  max-width: 880px;
  margin: -4px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.75;
}
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.blog-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover, .blog-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(51,38,27,.12);
  outline: none;
}
.blog-card-hero { width: 100%; height: 150px; object-fit: cover; display: block; }
.blog-card-hero.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  background: linear-gradient(135deg, var(--surface-2), var(--accent-soft));
}
.blog-card-body { padding: 14px 16px 16px; }
.blog-card-meta { font-size: 0.72rem; color: var(--ink-faint); margin: 0 0 6px; }
.blog-byline { margin: 0 0 8px; color: var(--accent-strong); font-size: 0.76rem; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.blog-byline-portrait { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.blog-byline-portrait.placeholder { display: inline-flex; align-items: center; justify-content: center; }
.blog-byline.article { margin-bottom: 10px; }
.blog-card-body h3 { margin: 0 0 8px; font-size: 0.98rem; line-height: 1.45; }
.blog-card-lead {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.blog-card-tags span {
  font-size: 0.7rem;
  color: var(--info);
  background: var(--info-soft);
  border-radius: 999px;
  padding: 2px 8px;
}
.blog-article {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px clamp(18px, 4vw, 44px) 36px;
}
.blog-back { margin-bottom: 14px; }
.blog-article-head h1 { font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.4; margin: 6px 0 12px; }
.blog-resident-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.blog-resident-head img, .blog-resident-placeholder { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.blog-resident-head p { margin: 0; color: var(--accent-strong); font-weight: 900; }
.blog-ai-credit {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
}
.blog-article-lead {
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.8;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin: 0 0 16px;
}
.blog-article-hero { width: 100%; border-radius: 12px; margin: 6px 0 10px; }
.blog-article-body { font-size: 0.95rem; line-height: 2.0; color: var(--ink); }
.blog-article-body h2 {
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-soft);
  font-size: 1.15rem;
}
.blog-article-body h3 { margin: 24px 0 8px; font-size: 1.0rem; color: var(--ink); }
.blog-article-body p { margin: 0 0 16px; }
.blog-illustration { margin: 8px 0 24px; }
.blog-illustration img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 14px; background: var(--surface-2); }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 16px; padding-left: 24px; }
.blog-article-body li { margin-bottom: 6px; }
.blog-article-body blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  color: var(--ink-muted);
}
.blog-article-body code {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
}
.blog-article-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.blog-article-note { font-size: 0.75rem; color: var(--ink-faint); margin: 0; }

/* ラボ統計: AI研究カード */
.stat-card-research { cursor: pointer; }
.stat-card-research:hover { border-color: var(--accent); }
.stat-card .stat-sub { display: block; font-size: 0.7rem; color: var(--ink-faint); margin-top: 4px; }

@media (max-width: 720px) {
  .premium-pillars { grid-template-columns: 1fr; }
  .research-feed { grid-template-columns: 1fr; max-height: 340px; }
  .blog-list { grid-template-columns: minmax(0, 1fr); }
  .blog-automation-note { padding-left: 10px; font-size: 0.74rem; }
  .blog-article { padding: 20px 16px 28px; }
  .blog-resident-head img, .blog-resident-placeholder { width: 56px; height: 56px; }
  .blog-ai-credit { width: 100%; border-radius: 10px; }
}

/* オーナー室: 研究ダイヤル */
.owner-research-note { font-size: 0.75rem; color: var(--ink-faint); margin: 0 0 10px; }
.owner-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.owner-research-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.owner-research-grid input,
.owner-research-grid select {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--ink);
}
.owner-research-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.owner-research-save {
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 16px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.owner-research-save:hover { background: var(--accent-hover); }
#researchConfigMsg { font-size: 0.75rem; color: var(--ink-muted); }

/* オーナー室: 住人観測 */
.owner-resident-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.owner-resident-detail {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 12px;
}
.owner-resident-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-sm);
  background: var(--owner-surface-raised);
}
.owner-resident-heading {
  margin: 0 0 12px;
  color: var(--owner-muted);
  font-size: 0.72rem;
}
.owner-dex-list,
.owner-discovery-list { display: grid; gap: 9px; }
.owner-dex-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.owner-dex-label span { color: var(--owner-muted); }
.owner-dex-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.owner-dex-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--owner-accent), #ffd08a);
}
.owner-discovery-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--owner-border);
}
.owner-discovery-item:last-child { padding-bottom: 0; border-bottom: none; }
.owner-discovery-identity { min-width: 0; }
.owner-discovery-identity > strong { display: block; margin-bottom: 5px; font-size: 0.82rem; }
.owner-discovery-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.owner-badge-resident { color: #b6a6f2; }
.owner-badge-district { color: #8dbfeb; }
.owner-discovery-date {
  flex: none;
  color: var(--owner-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}
@media (max-width: 720px) {
  .owner-resident-detail,
  .owner-resident-summary { grid-template-columns: 1fr; }
  .owner-discovery-item { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* 無人研究室: イシュードリブンの「取り組む課題」ブロック */
.hypothesis-issue {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--tomato);
  background: linear-gradient(180deg, #fff6f2 0%, var(--surface) 120%);
}
.hypothesis-issue-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.issue-tag { font-size: 0.72rem; font-weight: 700; color: var(--tomato); }
.issue-prev { font-size: 0.68rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--ink-muted); }
.issue-prev.prev-high { color: var(--tomato); border-color: var(--tomato); background: #fdece7; }
.issue-title { margin: 2px 0 4px; font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.issue-why { margin: 0; font-size: 0.78rem; color: var(--ink-muted); line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .hypothesis-issue { background: rgba(210,64,30,.08); }
}

/* ================= メイラード・タウン／住人ずかん ================= */
.town-view-head { margin-bottom: 16px; }
.town-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.town-section-tabs,
.dex-family-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.town-section-tab,
.dex-family-tab {
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 9px 16px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.town-section-tab:hover,
.dex-family-tab:hover { border-color: var(--accent); color: var(--ink); }
.town-section-tab.active,
.dex-family-tab.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.town-section-tab:focus-visible,
.dex-family-tab:focus-visible,
.character-card:focus-visible,
.town-resident:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}
.dex-progress-card {
  margin: 8px 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dex-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dex-progress-copy span { color: var(--ink-muted); font-size: 0.78rem; font-weight: 700; }
.dex-progress-copy strong { color: var(--accent); font-family: var(--font-display); font-size: 1.5rem; }
.dex-progress-track { height: 12px; margin: 10px 0 12px; overflow: hidden; border-radius: 999px; background: var(--bg-deep); }
.dex-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--tomato)); transition: width .5s ease; }
.dex-progress-families { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-muted); font-size: 0.72rem; }
.dex-progress-families strong { color: var(--ink); }
.town-panel-head,
.dex-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.town-panel-head h3,
.dex-panel-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.15rem; }
.town-panel-head p,
.dex-panel-head p { margin: 0; color: var(--ink-muted); font-size: 0.78rem; line-height: 1.6; }
.town-districts {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--border-strong) transparent;
}
.town-district-card {
  flex: 0 0 min(360px, calc(100vw - 56px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
}
.town-district-card > header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.town-district-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 1.25rem; }
.town-district-card h4 { margin: 0 0 2px; font-family: var(--font-display); font-size: 0.9rem; }
.town-district-card header p { margin: 0; color: var(--ink-muted); font-size: 0.68rem; }
.town-room {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  align-items: end;
  min-height: 224px;
  gap: 10px 6px;
  padding: 20px 12px 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--info-soft) 70%, transparent), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--border) 50%, transparent) 48px),
    var(--surface-2);
}
.town-resident {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  animation: townFloat 3.4s ease-in-out var(--float-delay, 0s) infinite;
}
.town-resident > span:last-child { width: 100%; overflow: hidden; font-size: 0.62rem; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.town-resident:hover { transform: translateY(-3px); }
.town-resident-locked { cursor: default; animation: none; opacity: .56; }
.town-elder { grid-column: span 2; }
.town-elder .character-placeholder,
.town-elder .character-portrait { width: 72px; height: 72px; }
@keyframes townFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.character-placeholder,
.character-portrait {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  object-fit: contain;
  font-size: 1.65rem;
}
.character-portrait + .character-placeholder { display: none; }
.character-portrait + .character-placeholder.is-visible { display: grid; }
.character-placeholder.family-element { background: var(--info-soft); }
.character-placeholder.family-nutrient { background: var(--herb-soft); }
.character-placeholder.family-force { background: var(--accent-soft); }
.character-placeholder.family-elder { background: var(--bg-deep); }
.character-placeholder.family-secret { background: color-mix(in srgb, var(--tomato) 12%, var(--surface)); }
.character-placeholder.family-ingredient_fairy { background: var(--herb-soft); }
.character-placeholder.is-silhouette { color: var(--ink-muted); filter: grayscale(1); opacity: .72; }
.dex-panel { margin-top: 4px; }
.dex-district-label { display: grid; min-width: 220px; gap: 5px; color: var(--ink-muted); font-size: 0.68rem; font-weight: 700; }
.dex-district-label select { padding: 8px 12px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; }
.character-card {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(120, 72, 20, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.character-card.family-element { border-top-color: var(--info); }
.character-card.family-nutrient { border-top-color: var(--herb); }
.character-card.family-force { border-top-color: var(--tomato); }
.character-card.family-elder { border-top-color: var(--ink-muted); }
.character-card.family-secret { border-top-color: var(--accent); }
.character-card.family-ingredient_fairy { border-top-color: var(--herb); }
.character-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.character-card.is-locked { background: color-mix(in srgb, var(--surface) 74%, var(--bg-deep)); }
.character-card.is-locked .character-placeholder { filter: grayscale(1); opacity: .62; }
.character-card-visual { flex: 0 0 auto; }
.character-card-visual .character-placeholder,
.character-card-visual .character-portrait { width: 64px; height: 80px; border-radius: 18px; font-size: 1.8rem; }
.character-card-body { display: flex; min-width: 0; flex: 1; overflow: hidden; flex-direction: column; align-items: flex-start; }
.character-card-title { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 1rem; font-weight: 900; }
.character-card-level-row { display: flex; min-height: 22px; align-items: center; margin: 5px 0 2px; }
.character-level-badge { display: inline-flex; padding: 2px 7px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: .6rem; font-weight: 900; }
.character-badges { display: flex; max-width: 100%; flex-wrap: wrap; gap: 5px; margin: 2px 0 5px; }
.character-badges span { padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--ink-muted); font-size: 0.6rem; }
.character-badges .character-level-badge { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fairy-evolution { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--ink-muted); font-size: .62rem; }
.fairy-evolution-dots { display: inline-flex; gap: 4px; color: var(--border-strong); letter-spacing: 0; }
.fairy-evolution-dots .is-active { color: var(--herb); }
.fairy-evolution-hint { font-weight: 700; }
.fairy-evolution.is-detail { margin-top: 4px; font-size: .7rem; }
.character-rarity { color: var(--accent); font-size: 0.72rem; letter-spacing: .06em; }
.character-level-progress { display: grid; width: 100%; gap: 5px; margin-top: 7px; }
.character-level-progress-meta { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 4px; color: var(--ink-muted); font-size: 0.6rem; line-height: 1.45; }
.character-level-progress-meta strong { flex: 0 0 auto; color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 900; }
.character-level-progress-meta strong::after { margin-left: 4px; color: var(--ink-faint); content: "・"; }
.character-level-progress-meta > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.character-level-track { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--bg-deep); }
.character-level-track > span { display: block; width: var(--character-level-progress, 0%); height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.character-level-progress.is-detail { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.character-level-progress.is-detail .character-level-track { height: 8px; background: var(--surface); }
.character-level-progress.is-detail .character-level-progress-meta { font-size: .7rem; }
.character-level-progress.is-detail .character-level-progress-meta strong { font-size: .82rem; }
.character-personality { display: -webkit-box; margin-top: 7px; overflow: hidden; color: var(--ink-muted); font-size: 0.7rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.character-date { margin-top: auto; padding-top: 7px; color: var(--ink-faint); font-size: 0.62rem; }
.character-locked-copy { margin-top: 7px; color: var(--ink-muted); font-size: 0.68rem; line-height: 1.45; }
.character-hint { margin-top: 6px; color: var(--info); font-size: 0.64rem; line-height: 1.45; }
.dex-empty,
.town-loading,
.town-error { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--ink-muted); text-align: center; }
.town-error { border-style: solid; border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 8%, var(--surface)); color: var(--tomato); }
.character-modal { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow-y: auto; }
.character-detail-head { display: flex; align-items: center; gap: 20px; }
.character-detail-visual .character-placeholder,
.character-detail-visual .character-portrait { width: 112px; height: 136px; border-radius: 28px; font-size: 2.8rem; }
.character-detail-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; }
.character-detail-voice { margin: 20px 0 12px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); line-height: 1.7; }
.character-detail-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.character-detail-stats span { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 0.75rem; }
.character-detail-stats strong { color: var(--ink); }
.character-detail-section { margin-top: 20px; }
.character-detail-section h4 { margin: 0 0 8px; font-size: .86rem; }
.character-detail-section ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.character-detail-section li { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.character-detail-section li strong { font-size: .72rem; }
.character-detail-section li span,
.character-detail-section > p { margin: 0; color: var(--ink-muted); font-size: .72rem; line-height: 1.6; }
.character-detail-locked { margin-top: 20px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.character-detail-locked p { margin: 8px 0 0; color: var(--info); font-size: .78rem; }
.character-discovery-toast {
  position: fixed;
  z-index: 1200;
  right: 24px;
  bottom: 24px;
  display: flex;
  width: min(420px, calc(100vw - 32px));
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: discoveryArrival .35s ease both;
}
.character-discovery-toast img,
.character-discovery-avatar { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; border-radius: 16px; background: var(--accent-soft); object-fit: contain; font-size: 1.7rem; }
.character-discovery-toast span:last-child { display: grid; gap: 3px; }
.character-discovery-toast small { color: var(--accent); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.character-discovery-toast strong { font-size: .8rem; line-height: 1.5; }
@keyframes discoveryArrival { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .dex-progress-card { padding: 14px 16px; }
  .dex-progress-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .town-panel-head,
  .dex-panel-head { align-items: stretch; flex-direction: column; }
  .dex-district-label { min-width: 0; width: 100%; }
  .dex-grid { grid-template-columns: 1fr; gap: 12px; }
  .town-district-card { flex-basis: calc(100vw - 48px); }
  .character-detail-head { align-items: flex-start; }
  .character-detail-visual .character-placeholder,
  .character-detail-visual .character-portrait { width: 88px; height: 108px; }
  .character-card { gap: 10px; padding: 12px; }
  .character-level-progress-meta { align-items: baseline; }
  .character-discovery-toast { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .town-resident,
  .character-discovery-toast { animation: none; }
  .dex-progress-track span,
  .character-level-track > span,
  .character-card { transition: none; }
}

@media (prefers-color-scheme: dark) {
  .town-room { background: linear-gradient(180deg, rgba(47,127,163,.12), transparent 54%), var(--surface-2); }
  .character-card.is-locked { background: var(--surface-2); }
  .town-error { background: rgba(210,64,30,.1); }
  .character-discovery-toast { box-shadow: 0 18px 46px rgba(0,0,0,.38); }
}
.studio-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0 16px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.04));
}

.studio-mode-tab {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.studio-mode-tab.active {
  background: var(--accent);
  color: #fff;
}

.studio-mode-tab:focus-visible,
.dialogue-compose textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.dialogue-panel { display: grid; gap: 16px; }
.dialogue-panel.hidden { display: none; }
.dialogue-intro, .dialogue-status { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
.dialogue-messages { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted, rgba(255, 255, 255, 0.04)); }
.dialogue-message { max-width: 88%; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; line-height: 1.6; }
.dialogue-message.is-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.dialogue-message.is-assistant { align-self: flex-start; background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.dialogue-message.is-typing { display: grid; gap: 6px; color: var(--ink-muted); }
.dialogue-typing-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dialogue-typing-dots { display: inline-flex; align-items: center; gap: 4px; min-width: 28px; }
.dialogue-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: dialogue-typing-dot 1.1s ease-in-out infinite; }
.dialogue-typing-dots i:nth-child(2) { animation-delay: 140ms; }
.dialogue-typing-dots i:nth-child(3) { animation-delay: 280ms; }
.dialogue-typing-queue { color: var(--accent-hover); font-size: 0.78rem; font-weight: 700; }
.dialogue-message.is-question { border-left: 3px solid var(--accent); }
.dialogue-message.is-error { border-color: color-mix(in srgb, var(--tomato) 48%, var(--border)); background: color-mix(in srgb, var(--tomato) 6%, var(--surface)); color: var(--tomato); }
.dialogue-message.is-streaming::after { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--accent); content: ''; animation: dialogue-stream-caret 700ms steps(2, end) infinite; }
.dialogue-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.dialogue-compose .btn { min-height: 44px; }
.dialogue-summary { padding: 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface, #fff); }
.dialogue-summary h3 { margin: 0 0 8px; font-size: 1rem; }
.dialogue-summary ul { margin: 0 0 16px; padding-left: 20px; }
.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; }

@keyframes dialogue-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes dialogue-stream-caret {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue-typing-dots i,
  .dialogue-message.is-streaming::after { animation: none; }
}

@media (max-width: 640px) {
  .dialogue-compose { grid-template-columns: 1fr; }
  .dialogue-message { max-width: 94%; }
  .dialogue-message.is-typing { max-width: 100%; }
}
/* ===== 週間献立 ===== */
.mealplan-view { max-width: 1440px; margin: 0 auto; }
.mealplan-head, .mealplan-section-head, .mealplan-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mealplan-hero { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow); }
.mealplan-hero-copy { min-width: 0; flex: 1; }
.mealplan-hero .view-title { max-width: 860px; margin: 8px 0; font-size: clamp(24px, 3.3vw, 42px); line-height: 1.35; }
.mealplan-hero .view-title em { color: var(--accent); font-style: normal; }
.mealplan-hero .view-lead { max-width: 800px; }
.mealplan-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.mealplan-steps li { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.mealplan-steps li > span { grid-row: span 2; color: var(--accent); font-family: var(--font-display); font-size: 20px; font-weight: 900; }
.mealplan-steps strong { color: var(--ink); font-size: 12px; }
.mealplan-steps small { color: var(--ink-muted); font-size: 10px; line-height: 1.5; }
.mealplan-saved-label { display: grid; width: min(300px, 100%); flex: 0 0 auto; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.mealplan-wizard, .mealplan-shopping { margin-top: 20px; }
.mealplan-section-head h3 { margin: 2px 0 0; }
.mealplan-kicker { margin: 0; color: var(--accent); font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; }
.mealplan-presets, .mealplan-routines { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.mealplan-choice-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mealplan-choice-heading h4 { margin: 0; font-family: var(--font-display); font-size: 14px; }
.mealplan-choice-heading p { margin: 0; color: var(--ink-muted); font-size: 11px; }
.mealplan-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mealplan-preset-card { position: relative; display: grid; min-width: 0; min-height: 104px; justify-items: start; gap: 4px; padding: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.mealplan-preset-card > span { font-size: 24px; }
.mealplan-preset-card strong { font-family: var(--font-display); font-size: 13px; }
.mealplan-preset-card small { color: var(--ink-muted); font-size: 10px; line-height: 1.45; }
.mealplan-preset-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.mealplan-preset-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.mealplan-preset-card.is-course-default:not(.is-selected) { border-color: var(--accent); }
.mealplan-course-recommendation { position: absolute; top: 8px; right: 8px; display: none; padding: 3px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 8px; font-style: normal; font-weight: 900; }
.mealplan-preset-card.is-course-default .mealplan-course-recommendation { display: inline-flex; }
.mealplan-routine-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mealplan-routine-chip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 11px/1.4 var(--font); cursor: pointer; }
.mealplan-routine-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.mealplan-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mealplan-form-grid .field { margin: 0; }
.mealplan-form-grid .mealplan-wide { grid-column: span 2; }
.mealplan-form-grid .mealplan-full { grid-column: 1 / -1; }
.mealplan-stepper { display: flex; min-height: 44px; align-items: center; gap: 6px; }
.mealplan-stepper button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--accent); font: 900 18px/1 var(--font); cursor: pointer; }
.mealplan-stepper input { width: 48px; border: 0; background: transparent; color: var(--ink); font: 900 18px/1 var(--font-mono); text-align: center; appearance: textfield; }
.mealplan-stepper input::-webkit-inner-spin-button, .mealplan-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.mealplan-stepper > span { color: var(--ink-muted); font-size: 11px; }
.mealplan-chip-row, .mealplan-toggle { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; gap: 6px; }
.mealplan-chip-row button, .mealplan-toggle button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font: 700 11px/1.3 var(--font); cursor: pointer; }
.mealplan-chip-row button.is-active, .mealplan-toggle button.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.mealplan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.mealplan-toggle button { width: 100%; border-color: transparent; }
#mealplanDaysValue { padding: 6px 8px; color: var(--accent); font: 900 11px/1 var(--font-mono); }
.mealplan-nutrition-chips { min-height: 0; }
.mealplan-selection-note { display: block; min-height: 18px; margin-top: 4px; color: var(--accent); font-size: 10px; font-weight: 700; }
.mealplan-kcal-field .field-label small { color: var(--ink-faint); font-size: 9px; }
.mealplan-kcal-input { position: relative; display: block; }
.mealplan-kcal-input input { padding-right: 54px; }
.mealplan-kcal-input > span { position: absolute; right: 12px; top: 50%; color: var(--ink-muted); font-size: 10px; transform: translateY(-50%); }
.mealplan-preset-card:focus-visible, .mealplan-routine-chip:focus-visible, .mealplan-stepper button:focus-visible, .mealplan-stepper input:focus-visible, .mealplan-chip-row button:focus-visible, .mealplan-toggle button:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.mealplan-actions { align-items: center; justify-content: flex-start; margin-top: 16px; }
.mealplan-actions .verify-msg { margin: 0; }
.mealplan-result { margin-top: 24px; }
.mealplan-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mealplan-cost-summary { margin-top: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mealplan-cost-summary-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mealplan-cost-summary-label { margin: 0 0 4px; color: var(--accent); font: 700 10px/1.2 var(--font-mono); letter-spacing: .12em; }
.mealplan-cost-summary h4 { margin: 0; color: var(--ink); font-size: clamp(16px, 2vw, 20px); }
.mealplan-cost-summary-main > p { display: grid; justify-items: end; gap: 5px; margin: 0; text-align: right; color: var(--accent); }
.mealplan-cost-summary-main > p span { color: var(--ink-muted); font-size: 11px; font-weight: 500; }
.mealplan-cost-summary-main > p .mealplan-kcal-badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; color: var(--surface); font-size: 10px; font-weight: 900; }
.mealplan-kcal-badge.is-within { background: var(--info); }
.mealplan-kcal-badge.is-over { background: var(--tomato); }
.mealplan-cost-days { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 8px; margin-top: 16px; }
.mealplan-cost-day { display: grid; gap: 4px; color: var(--ink-muted); font-size: 10px; }
.mealplan-cost-day i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mealplan-cost-day i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mealplan-cost-day strong { color: var(--ink); font-size: 11px; }
.mealplan-cost-note { margin: 12px 0 0; color: var(--ink-muted); font-size: 11px; }
.mealplan-calendar { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; overflow-x: auto; padding-bottom: 8px; }
.mealplan-day { min-width: 180px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.mealplan-day > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-bottom: 1px solid var(--border); }
.mealplan-day > header span { font-size: 11px; color: var(--ink-muted); }
.mealplan-day-slots { display: grid; gap: 1px; background: var(--border); }
.mealplan-cell { padding: 12px; background: var(--surface); min-height: 164px; }
.mealplan-cell-thumbnail { display: block; width: 112px; height: 72px; margin-top: 8px; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.mealplan-cell h4 { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.mealplan-cell p { margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.55; }
.mealplan-slot { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 10px; font-weight: 700; }
.mealplan-cell-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.mealplan-cell-actions .btn { padding: 5px 7px; font-size: 10px; }
.mealplan-shopping-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 16px; }
.mealplan-shopping-list section { padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.mealplan-shopping-list h4 { margin: 0 0 8px; }
.mealplan-shopping-list label { display: block; padding: 5px 0; font-size: 13px; }
.mealplan-shopping-list small { color: var(--ink-muted); }

@media (max-width: 800px) {
  .mealplan-head, .mealplan-section-head { flex-direction: column; }
  .mealplan-saved-label { width: 100%; }
  .mealplan-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mealplan-form-grid { grid-template-columns: 1fr 1fr; }
  .mealplan-form-grid .mealplan-wide, .mealplan-form-grid .mealplan-full { grid-column: 1 / -1; }
  .mealplan-cost-summary-main { align-items: flex-start; flex-direction: column; }
  .mealplan-cost-summary-main > p { justify-items: start; text-align: left; }
  .mealplan-cost-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mealplan-calendar { grid-template-columns: 1fr; overflow: visible; }
  .mealplan-day { min-width: 0; }
  .mealplan-cell-thumbnail { width: 120px; height: 80px; }
}

@media (max-width: 560px) {
  .mealplan-hero { padding: 16px; }
  .mealplan-steps, .mealplan-form-grid { grid-template-columns: 1fr; }
  .mealplan-form-grid .mealplan-wide, .mealplan-form-grid .mealplan-full { grid-column: auto; }
  .mealplan-result-actions { width: 100%; justify-content: stretch; }
  .mealplan-result-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .mealplan-preset-grid { grid-template-columns: 1fr; }
  .mealplan-preset-card { min-height: 88px; }
  .mealplan-nutrition-chips button { flex: 1 1 calc(50% - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .mealplan-preset-card { transition: none; }
  .tips-daily-reveal.is-open { animation: none; }
  .tachometer-flames i { animation: none; }
  .tachometer-shell.is-full-throttle .tachometer-flames { opacity: .72; }
  .tachometer-needle { transition: none; }
}

@media (max-width: 720px) {
  .studio-lane-options,
  .recipe-book-tabs { grid-template-columns: 1fr; }
  .studio-lane-option { min-height: 88px; }
  .tachometer-panel { padding-inline: 10px; }
  .tachometer-gauge { width: 260px; }
  .tachometer-gauge::before { width: 236px; height: 236px; }
  .tachometer-gauge::after { width: 186px; height: 186px; }
  .studio-drafts-head { align-items: flex-start; }
  .studio-draft-item { grid-template-columns: 1fr; }
  .studio-draft-item .btn { width: 100%; }
  .recipe-experiment-tab { min-height: 64px; }
  .recipe-dev-modal-actions { display: grid; grid-template-columns: 1fr; }
  .recipe-dev-modal-actions .btn { width: 100%; }
}

@media (max-width: 720px) {
  .tips-daily-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .tips-daily-flame {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .tips-daily-card h3 { font-size: 22px; }
  .tips-daily-actions .tips-point-note { width: 100%; }
  .tips-experience-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .tips-experience-tab { padding-inline: 8px; }
  .tips-quiz-panel { padding: 16px; }
  .tips-quiz-head { display: grid; }
  .tips-quiz-options { grid-template-columns: 1fr; }
  .tips-quiz-result .btn { width: 100%; margin-left: 0; }
  .tip-theme-head { grid-template-columns: 1fr; padding: 16px; }
  .tip-theme-detail summary { align-items: flex-start; padding: 12px 16px; }
  .tip-theme-detail summary span { display: none; }
  .tip-theme-answer { padding: 0 16px 16px; }
  .tip-narrator { grid-template-columns: 40px minmax(0, 1fr); padding-inline: 16px; }
  .tip-narrator-avatar { width: 40px; height: 40px; }
  .tip-theme-footer { align-items: flex-start; padding: 12px 16px; }
  .tip-theme-citations { width: 100%; }
  .tips-ranking-tabs { width: 100%; order: 2; }
  .tips-ranking-tabs .filter-chip { flex: 1 1 auto; }
}

@media print {
  body:has(#mealplanShopping:not(.hidden)) .sidebar,
  body:has(#mealplanShopping:not(.hidden)) .view > :not(#mealplanShopping) { display: none !important; }
  body:has(#mealplanShopping:not(.hidden)) #mealplanShopping { display: block !important; border: 0; box-shadow: none; }
  #mealplanShopping button { display: none; }
}

/* RS2: リアルスワームの実スコアバッジ */
.swarm-score { color: var(--accent, #e8762a); font-weight: 800; }
.swarm-score-gold { background: linear-gradient(90deg, #d4a017, #f5c542, #d4a017); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.studio-draft-actions { display: flex; gap: 6px; align-items: center; }
.studio-draft-actions .draft-delete { color: #b3402a; }

/* ================= 🔥 ひらめき燃焼バー（Fable5直接実装） =================
   三層構造: mp4住人世界(背景) × めらめらCSS(バー) × ドラッグノブ
   色の物理: 軽=深紅の熾火 → 中=赤橙 → 高=橙金 → 最大=青白(完全燃焼) */
.burnbar {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  width: 100%; /* 親グリッドのjustify-items:centerによる最小幅潰れを防ぐ */
  aspect-ratio: 16 / 9; /* 動画と一致させ歪みゼロ（原画・Seedanceとも16:9で再生成） */
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 14px 16px 10px;
  background: #2a1a14;
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 8px 28px rgba(63,44,29,.18);
}
.burnbar-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.burnbar-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,14,10,0) 40%, rgba(26,14,10,.55) 100%);
  pointer-events: none;
}
.burnbar-track {
  position: relative; z-index: 2; align-self: end;
  height: 34px;
  border-radius: 999px;
  background: rgba(20, 10, 8, .55);
  border: 1px solid rgba(255, 200, 150, .18);
  backdrop-filter: blur(6px);
  cursor: grab;
  touch-action: none;
}
.burnbar.is-dragging .burnbar-track { cursor: grabbing; }
.burnbar-fill {
  position: absolute; top: 3px; left: 3px; bottom: 3px;
  width: calc(var(--burn-percent, 25%) - 6px);
  border-radius: 999px;
  overflow: visible;
  transition: width .28s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(90deg, #7a1408, #c22b0c 45%, #e8641e 80%, #f59e2d 100%);
}
.burnbar[data-level="1"] .burnbar-fill { background: linear-gradient(90deg, #6b1206, #a82309 70%, #c53a10 100%); }
.burnbar[data-level="2"] .burnbar-fill { background: linear-gradient(90deg, #7a1408, #c22b0c 55%, #e8641e 100%); }
.burnbar[data-level="3"] .burnbar-fill { background: linear-gradient(90deg, #7a1408, #d0380e 40%, #ef7c1a 72%, #f7b32b 100%); }
.burnbar.is-max .burnbar-fill {
  background: linear-gradient(90deg, #8a1a0a, #e8641e 34%, #f7b32b 58%, #ffe9c9 78%, #bfe6ff 90%, #7fc4ff 100%);
  box-shadow: 0 0 18px rgba(140, 200, 255, .55), 0 0 34px rgba(120, 190, 255, .3);
}
/* 熱ゆらぎ: フィル表面を流れる陽炎 */
.burnbar-heat {
  position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 12px, rgba(255,236,200,.16) 12px 18px, rgba(255,255,255,0) 18px 30px);
  background-size: 220% 100%;
  animation: burnbar-heat 2.6s linear infinite;
  mix-blend-mode: screen;
}
.burnbar.is-max .burnbar-heat { animation-duration: 1.2s; }
@keyframes burnbar-heat { from { background-position: 0 0; } to { background-position: -220% 0; } }
/* 炎の舌: フィル先端でチロチロ */
.burnbar-tongue {
  position: absolute; right: -4px; bottom: 55%;
  width: 10px; height: 16px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 82%, #ffe9c9 0%, #f7b32b 42%, rgba(232,100,30,.85) 74%, rgba(232,100,30,0) 100%);
  transform-origin: 50% 100%;
  animation: burnbar-tongue 0.62s ease-in-out infinite alternate;
  filter: blur(.4px);
  pointer-events: none;
}
.burnbar-tongue.t2 { right: 4px; height: 12px; animation-duration: .48s; animation-delay: .12s; opacity: .85; }
.burnbar-tongue.t3 { right: -10px; height: 9px; animation-duration: .55s; animation-delay: .22s; opacity: .7; }
@keyframes burnbar-tongue {
  from { transform: scaleY(.72) scaleX(.92) rotate(-4deg); opacity: .75; }
  to   { transform: scaleY(1.18) scaleX(1.05) rotate(5deg); opacity: 1; }
}
.burnbar.is-max .burnbar-tongue {
  background: radial-gradient(circle at 50% 82%, #ffffff 0%, #bfe6ff 40%, rgba(127,196,255,.9) 72%, rgba(127,196,255,0) 100%);
  animation-duration: .34s;
}
/* 火の粉: フィル内から立ち上る燠 */
.burnbar-embers i {
  position: absolute; bottom: 4px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #ffd9a0;
  opacity: 0;
  animation: burnbar-ember 2.4s ease-in infinite;
  pointer-events: none;
}
.burnbar-embers i:nth-child(1) { left: 12%; animation-delay: 0s; }
.burnbar-embers i:nth-child(2) { left: 30%; animation-delay: .5s; }
.burnbar-embers i:nth-child(3) { left: 48%; animation-delay: 1.1s; }
.burnbar-embers i:nth-child(4) { left: 62%; animation-delay: .8s; }
.burnbar-embers i:nth-child(5) { left: 78%; animation-delay: 1.6s; }
.burnbar-embers i:nth-child(6) { left: 90%; animation-delay: .3s; }
@keyframes burnbar-ember {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-46px) scale(.4); opacity: 0; }
}
.burnbar.is-max .burnbar-embers i { background: #d7ecff; animation-duration: 1.5s; }
/* ノブ: 握る白丸・レベル色のグロー */
.burnbar-knob {
  position: absolute; top: 50%;
  left: calc(var(--burn-percent, 25%) - 15px);
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.14), 0 0 16px rgba(247,179,43,.7);
  transition: left .28s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  pointer-events: none;
}
.burnbar.is-max .burnbar-knob { box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 0 4px rgba(200,230,255,.25), 0 0 22px rgba(127,196,255,.95), 0 0 44px rgba(127,196,255,.5); }
.burnbar-input { position: absolute; inset: 0; opacity: 0; z-index: 3; cursor: grab; }
.burnbar-input:focus-visible ~ * { outline: none; }
.burnbar:has(.burnbar-input:focus-visible) { outline: 3px solid #f7b32b; outline-offset: 2px; }
/* 4段ラベル */
.burnbar-stops { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.burnbar-stops button {
  background: transparent; border: 0; padding: 4px 0;
  color: rgba(255, 238, 220, .78);
  font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; cursor: pointer;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  border-radius: 8px; transition: color .16s, text-shadow .2s;
}
.burnbar-stops button:hover { color: #fff; }
.burnbar-stops button.active { color: #fff; text-shadow: 0 0 10px rgba(247,179,43,.9), 0 1px 6px rgba(0,0,0,.6); }
.burnbar-stops button[data-tachometer="4"].active { color: #eaf6ff; text-shadow: 0 0 12px rgba(127,196,255,1), 0 1px 6px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) {
  .burnbar-heat, .burnbar-tongue, .burnbar-embers i { animation: none; }
  .burnbar-video { display: none; }
  .burnbar { background: linear-gradient(90deg, #3a1610, #52200f 60%, #1e2c3a 100%); }
}
@media (max-width: 720px) { .burnbar { min-height: 110px; } }