/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0f1117;
  --bg1: #161922;   /* dark surface 1 (between --bg and --bg2) — Round 12 hotfix / vs --text contrast 13.21:1 */
  --bg2: #1a1d27;
  --bg3: #252833;
  --bg4: #2f3340;   /* dark surface 4 (above --bg3, modal overlay) — Round 12 hotfix / vs --text 9.20:1 */
  --border: #333648;
  --text: #e1e4ed;
  --text1: #cfd3df; /* slightly dimmer than --text — Round 12 hotfix / vs --bg1 11.78:1 */
  --text2: #a0a4b8;
  --text3: #7a7f93; /* dimmer than --text2 (meta/caption) — Round 12 hotfix / vs --bg 5.21:1 */
  --text4: #5a5f73; /* decorative dim (placeholder/disabled) — Round 12 hotfix / vs --bg 3.05:1 large only */
  --accent: #6366f1;
  --accent2: #818cf8;
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --orange: #f97316;
  --blue: #3b82f6;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);

  /* === Round 12 hotfix: legacy alias vars (dark-theme integrity) === */
  /* contrast: 全 fg/bg 組合せを :root 定義値で WCAG 検査済み (vs --bg/--bg2) */
  --bg-darker: #0a0c12;          /* darker than --bg */
  --bg-panel: #161922;            /* alias of --bg1 (panel surface) */
  --bg-secondary: #1a1d27;        /* alias of --bg2 */
  --bg-tertiary: #252833;         /* alias of --bg3 */
  --bg-subtle: #1f2230;           /* between --bg2 and --bg3 (subtle) */
  --bg-hover: rgba(99,102,241,0.08); /* accent-tinted hover */
  --border-color: #333648;        /* alias of --border */
  --card: #1a1d27;                /* alias of --bg2 (card body) */
  --card-bg: #1a1d27;             /* alias of --bg2 */
  --card-bg-hover: #252833;       /* alias of --bg3 */
  --surface: #1e2230;             /* generic surface */
  --fg: #e1e4ed;                  /* alias of --text */
  --text-primary: #e1e4ed;        /* alias of --text */
  --text-secondary: #a0a4b8;      /* alias of --text2 */
  --text-sub: #a0a4b8;            /* alias of --text2 */
  --text-muted: #7a7f93;          /* alias of --text3 */
  --muted: #7a7f93;               /* alias of --text3 */
  --primary: #6366f1;             /* alias of --accent */
  --accent-color: #6366f1;        /* alias of --accent */
  --accent-dark: #4f46e5;         /* darker accent */
  --accent-dim: #4a3fc0;          /* dimmer accent */
  --accent-subtle: rgba(99,102,241,0.15); /* accent tint background */
  --accent-green: #22c55e;        /* alias of --green */
  --accent-yellow: #eab308;       /* alias of --yellow */
  --accent-red: #ef4444;          /* alias of --red */
  --purple: #8b5cf6;              /* purple accent */
  --success: #22c55e;             /* alias of --green */
  --warning: #f97316;             /* alias of --orange */
  --danger: #ef4444;              /* alias of --red */
  --error: #ef4444;               /* alias of --red */
  --info: #3b82f6;                /* alias of --blue */
  --step-active-color: #6366f1;   /* alias of --accent */
  --step-done-color: #22c55e;     /* alias of --green */
  --step-pending-color: #5a5f73;  /* alias of --text4 (dim) */
}
body { font-family: 'Segoe UI', 'Noto Sans JP', sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; min-height: 100vh; }
h1, h2, h3, h4 { font-weight: 600; }
a { color: var(--accent2); text-decoration: none; }
small, sub, sup, code, kbd, samp { font-size: 0.875rem; }

/* === Login === */
.screen { min-height: 100vh; }
#login-screen { display: flex; align-items: center; justify-content: center; }
.login-box { background: var(--bg2); padding: 2rem; border-radius: var(--radius); border: 1px solid var(--border); width: 360px; text-align: center; }
.login-box h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.login-box .subtitle { color: var(--text2); font-size: 0.875rem; margin-bottom: 1.5rem; }
.login-box input { width: 100%; padding: 0.6rem; margin-bottom: 0.8rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; }
.login-box button { width: 100%; padding: 0.6rem; background: var(--accent); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 1rem; }
.login-box button:hover { background: var(--accent2); }
.error-msg { color: var(--red); font-size: 0.875rem; margin-top: 0.5rem; min-height: 1.2rem; }

/* === Header === */
#app-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 0.8rem; }
#app-title { font-size: 1rem; }
.work-badge { background: var(--bg3); padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.875rem; color: var(--text2); }
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.btn-icon { background: none; border: none; color: var(--text2); font-size: 1.2rem; cursor: pointer; padding: 0.3rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.btn-icon:hover { color: var(--text); }

/* === Badges === */
.badge { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.875rem; font-weight: 600; }
.badge-green { background: rgba(34,197,94,0.2); color: var(--green); }
.badge-yellow { background: rgba(234,179,8,0.2); color: var(--yellow); }
.badge-red { background: rgba(239,68,68,0.2); color: var(--red); }

/* === AUTO/REVIEW/MANUAL Labels === */
.label-auto { background: rgba(34,197,94,0.2); color: var(--green); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.875rem; font-weight: 700; }
.label-review { background: rgba(234,179,8,0.2); color: var(--yellow); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.875rem; font-weight: 700; }
.label-manual { background: rgba(239,68,68,0.2); color: var(--red); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.875rem; font-weight: 700; }

/* === Regeneration Buttons === */
.btn-regen { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); font-size: 0.875rem; padding: 0.2rem 0.6rem; vertical-align: middle; min-height: 44px; min-width: 44px; }
.btn-regen:hover { background: var(--yellow); color: var(--bg1); border-color: var(--yellow); }
.btn-regen .label-manual { font-size: 0.875rem; margin-left: 2px; }
.btn-regen-step { background: var(--bg3); color: var(--cyan, #22d3ee); border: 1px solid var(--cyan, #22d3ee); font-size: 0.875rem; padding: 0.3rem 0.7rem; margin-top: 6px; border-radius: var(--radius, 4px); cursor: pointer; transition: all 0.2s; }
.btn-regen-step:hover { background: var(--cyan, #22d3ee); color: var(--bg1, #0f1117); }
.btn-regen-step:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Phase Stepper === */
#phase-stepper { display: flex; align-items: center; gap: 0; background: var(--bg2); padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 42px; z-index: 100; }
.phase-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; border-radius: var(--radius); cursor: pointer; transition: all 0.2s; flex: 1; min-width: 0; }
.phase-step:hover { background: var(--bg3); }
.phase-step.active { background: rgba(99,102,241,0.15); }
.phase-step.active .phase-icon { background: var(--accent); color: white; }
.phase-step.completed .phase-icon { background: var(--green); color: white; }
.phase-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: var(--text2); flex-shrink: 0; transition: all 0.2s; }
.phase-info { display: flex; flex-direction: column; min-width: 0; }
.phase-name { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.phase-desc { font-size: 0.875rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-step.active .phase-name { color: var(--accent2); }
.phase-arrow { color: var(--border); font-size: 0.875rem; flex-shrink: 0; padding: 0 0.2rem; }
.phase-progress { height: 3px; background: var(--bg3); border-radius: 2px; flex-shrink: 0; width: 100%; margin-top: 2px; }
.phase-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.5s; }
.phase-step.completed .phase-progress-fill { background: var(--green); }

/* === Tab Nav === */
#tab-nav { display: flex; gap: 2px; background: var(--bg2); padding: 0.3rem 0.5rem; overflow-x: auto; border-bottom: 1px solid var(--border); position: sticky; top: 96px; z-index: 99; }
.tab-btn { background: transparent; border: none; color: var(--text2); padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.875rem; border-radius: 4px 4px 0 0; white-space: nowrap; transition: 0.2s; display: flex; align-items: center; gap: 0.3rem; min-height: 44px; min-width: 44px; }
.tab-btn:hover { color: var(--text); background: var(--bg3); }
.tab-btn.active { color: var(--accent2); background: var(--bg); border-bottom: 2px solid var(--accent); }
.tab-divider { width: 1px; background: var(--border); margin: 0.3rem 0.3rem; flex-shrink: 0; }

/* Tab Status Badges */
.tab-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tab-status[data-status="none"] { background: var(--bg3); border: 1px solid var(--border); }
.tab-status[data-status="todo"] { background: var(--red); box-shadow: 0 0 4px rgba(239,68,68,0.4); }
.tab-status[data-status="wip"] { background: var(--yellow); box-shadow: 0 0 4px rgba(234,179,8,0.4); }
.tab-status[data-status="done"] { background: var(--green); box-shadow: 0 0 4px rgba(34,197,94,0.4); }

/* === Tab Content === */
#tab-content { padding: 1rem; margin-right: 260px; /* space for core panel */ min-height: calc(100vh - 140px); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane h2 { font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* === Next Step Hint === */
.next-step-hint { margin-top: 2rem; padding: 1rem; background: rgba(99,102,241,0.08); border: 1px dashed var(--accent); border-radius: var(--radius); display: flex; align-items: center; gap: 1rem; }
.next-step-hint.phase-complete { background: rgba(34,197,94,0.08); border-color: var(--green); }
.next-step-hint .hint-label { font-size: 0.875rem; font-weight: 600; color: var(--accent2); white-space: nowrap; }
.next-step-hint.phase-complete .hint-label { color: var(--green); }
.btn-next { background: var(--accent); color: white; border: none; padding: 0.5rem 1.2rem; border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: 0.2s; }
.btn-next:hover { background: var(--accent2); transform: translateX(3px); }

/* === Dashboard (Home Tab) === */
.dashboard { max-width: 960px; margin: 0 auto; }
.dashboard-title { font-size: 1.3rem; margin-bottom: 0.2rem; border: none; padding-bottom: 0; }
.dashboard-subtitle { color: var(--text2); font-size: 0.9rem; margin-bottom: 1.2rem; }
.dash-overall { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; }
.dash-overall-bar { flex: 1; height: 10px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.dash-overall-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 5px; transition: width 0.5s; }
.dash-overall-pct { font-size: 1.1rem; font-weight: 700; color: var(--accent2); min-width: 3rem; text-align: right; }
/* Phase 7: grid → flex wrap で arrow を同じ行に挟めるように変更 */
.dash-phases { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin-bottom: 1.5rem; --step-done-color: #10b981; --step-active-color: #6366f1; --step-pending-color: #4b5060; }
.dash-phase-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: border-color 0.2s; flex: 1 1 calc(50% - 2.5rem); min-width: 260px; }
.dash-phase-card:hover { border-color: var(--accent); }
/* Phase 7: active / done / pending 状態 */
.dash-phase-card.is-active { border-color: var(--step-active-color); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25); }
.dash-phase-card.is-done { opacity: 0.85; }
.dash-phase-card.is-pending { opacity: 0.65; }
/* Phase 7: フロー矢印 (6 個 step間) */
.dash-phase-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.5rem; font-size: 1.5rem; font-weight: 700; color: var(--step-pending-color); user-select: none; }
.dash-phase-card.is-done + .dash-phase-arrow { color: var(--step-done-color); }
.dash-phase-card.is-active + .dash-phase-arrow { color: var(--step-active-color); }
/* Phase 7: 各カードの「このステップを進める」CTA */
.dash-phase-next-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding: 0.5rem 0.9rem; min-height: 44px; min-width: 44px; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9375rem; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; }
.dash-phase-next-cta:hover { background: var(--bg2); color: var(--text); border-color: var(--accent2); }
.dash-phase-next-cta:active { transform: translateY(1px); }
.dash-phase-card.is-active .dash-phase-next-cta { background: var(--accent); color: #ffffff; border-color: var(--accent); font-weight: 600; }
.dash-phase-card.is-active .dash-phase-next-cta:hover { background: var(--accent2); }
.dash-phase-cta-arrow { font-size: 1rem; transition: transform 0.15s; }
.dash-phase-next-cta:hover .dash-phase-cta-arrow { transform: translateX(2px); }
/* Phase 7: step1 の主 CTA — 初期生成ウィザード入口 */
.btn-launch-wizard { display: block; width: 100%; margin-top: 0.75rem; padding: 0.75rem 1rem; min-height: 48px; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; background: var(--accent); color: #ffffff; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.1s; }
.btn-launch-wizard:hover { background: var(--accent2); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.btn-launch-wizard:active { transform: translateY(1px); }
.btn-launch-wizard:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
@media (max-width: 900px) {
  .dash-phases { flex-direction: column; }
  .dash-phase-card { flex: 1 1 100%; }
  .dash-phase-arrow { width: 100%; height: 1.5rem; transform: rotate(90deg); }
}
.dash-phase-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.dash-phase-num { width: 26px; height: 26px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: var(--text2); flex-shrink: 0; }
.dash-phase-header h3 { font-size: 0.95rem; margin: 0; }
.dash-phase-items { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.dash-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--bg3); border-radius: 4px; font-size: 0.875rem; cursor: pointer; transition: 0.15s; }
.dash-item:hover { background: var(--bg); outline: 1px solid var(--accent); }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0; }
.dash-dot[data-status="done"] { background: var(--green); border-color: var(--green); }
.dash-dot[data-status="wip"] { background: var(--yellow); border-color: var(--yellow); }
.dash-dot[data-status="todo"] { background: var(--red); border-color: var(--red); }
.dash-item-hint { margin-left: auto; font-size: 0.875rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.dash-phase-bar { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.dash-phase-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.5s; }
.dash-next-action { background: rgba(99,102,241,0.08); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.5rem; }
.dash-next-action h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--accent2); }
.dash-next-action p { font-size: 0.9rem; color: var(--text2); margin-bottom: 0.8rem; }
.btn-lg { padding: 0.7rem 1.5rem; font-size: 0.95rem; }
.dash-core-summary { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.dash-core-summary h3 { font-size: 0.95rem; margin-bottom: 0.8rem; color: var(--accent2); }
.dash-core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.dash-core-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem; background: var(--bg3); border-radius: 4px; }
.dash-core-label { font-size: 0.875rem; color: var(--text2); }
.dash-core-val { font-size: 0.875rem; }
.tab-home { font-weight: 600; color: var(--accent2) !important; }

/* === Core Panel (right sidebar) === */
.core-panel { position: fixed; top: 42px; right: 0; width: 250px; height: calc(100vh - 42px); background: var(--bg2); border-left: 1px solid var(--border); padding: 0.8rem; overflow-y: auto; z-index: 50; transition: 0.3s; }
.core-panel.collapsed { width: 30px; padding: 0.3rem; overflow: hidden; }
.core-panel h3 { font-size: 0.9rem; margin-bottom: 0.8rem; color: var(--accent2); }
.core-item { margin-bottom: 0.6rem; }
.core-item label { font-size: 0.875rem; color: var(--text2); display: block; }
.core-val { font-size: 0.875rem; padding: 0.3rem; background: var(--bg3); border-radius: 4px; min-height: 1.5rem; }
#btn-toggle-core { position: absolute; left: -12px; top: 50%; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }

/* === Sub Tabs === */
.sub-tabs { display: flex; gap: 4px; margin-bottom: 1rem; }
.sub-tab { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.875rem; }
.sub-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.sub-pane { display: none; }
.sub-pane.active { display: block; }

/* === Buttons === */
/* Phase 7: .btn 基底に 44x44 touch target を強制 (WCAG 2.5.5 / Apple HIG / Material MD3)
   - integrity_first: 既存プロパティは保持し min-height/min-width + flex 中央寄せを追加
   - .btn-sm / .btn-xs は派生ルールで min-height:auto に戻し ::before で透明ヒット拡張 */
.btn { padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; background: var(--bg3); color: var(--text); transition: 0.2s; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.btn:hover { background: var(--bg2); border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.875rem; min-height: auto; min-width: auto; position: relative; }
.btn-xs { padding: 0.2rem 0.4rem; font-size: 0.875rem; min-height: auto; min-width: auto; position: relative; }
/* Phase 7: .btn-sm/.btn-xs は視覚サイズを保ちつつ ::before で 44x44 ヒット領域を確保 */
.btn-sm::before,
.btn-xs::before { content: ''; position: absolute; inset: -8px; min-height: 44px; min-width: 44px; pointer-events: auto; }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent2); }
.btn-success { background: var(--green); color: white; border-color: var(--green); }
.btn-auto { border-left: 3px solid var(--green); }
.btn-review { border-left: 3px solid var(--yellow); }
.btn-manual { border-left: 3px solid var(--red); }

/* === Forms === */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.875rem; color: var(--text2); margin-bottom: 0.3rem; }
textarea, input[type="text"], input[type="password"], select {
  width: 100%; padding: 0.5rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; resize: vertical;
}
textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
:focus:not(:focus-visible) { outline: none; }
button:focus-visible, .tab-btn:focus-visible, .sub-tab:focus-visible, .cand-tab:focus-visible, .preset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* === Panels / Cards === */
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.panel h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }
.placeholder { color: var(--text2); font-size: 0.875rem; font-style: italic; padding: 1rem; text-align: center; }

/* === Progress Bar === */
.progress-bar-wrap { background: var(--bg3); border-radius: var(--radius); height: 24px; margin-bottom: 1rem; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); color: white; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; transition: width 0.5s; }

/* === Toolbar === */
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* === Audit Cards === */
.audit-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; }
.audit-card.hard { border-left: 3px solid var(--red); }
.audit-card.soft { border-left: 3px solid var(--yellow); }
.audit-card strong { display: block; margin-bottom: 0.3rem; }
.audit-card p { font-size: 0.875rem; color: var(--text2); }
.gate-badge { font-size: 0.875rem; padding: 0.1rem 0.3rem; border-radius: 3px; font-weight: 700; float: right; }
.gate-badge.hard { background: rgba(239,68,68,0.2); color: var(--red); }
.gate-badge.soft { background: rgba(234,179,8,0.2); color: var(--yellow); }

/* === Writing Layout === */
.writing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.writing-area { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.writing-area h3 { font-size: 0.95rem; margin-bottom: 0.8rem; }

/* === Candidate Tabs === */
.candidate-tabs { display: flex; gap: 4px; margin-bottom: 0.5rem; }
.cand-tab { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 0.3rem 0.8rem; cursor: pointer; border-radius: 4px; font-size: 0.875rem; min-height: 44px; min-width: 44px; }
.cand-tab.active { background: var(--accent); color: white; }
.candidate-view { min-height: 150px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; font-size: 0.875rem; overflow-y: auto; max-height: 400px; }

/* === Strike #50: Manual Edit Mode === */
.manual-edit-container { margin-top: 0.3rem; }
.manual-edit-textarea { width: 100%; min-height: 300px; max-height: 500px; background: var(--bg); border: 2px solid var(--primary); border-radius: var(--radius); padding: 0.8rem; font-size: 0.875rem; font-family: 'Noto Sans JP', sans-serif; line-height: 1.8; resize: vertical; color: var(--text); white-space: pre-wrap; }
.manual-edit-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.manual-edit-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; justify-content: flex-end; }
.manual-edit-charcount { font-size: 0.875rem; color: var(--text2); margin-right: auto; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg-hover, rgba(99,102,241,0.08)); border-color: var(--primary); }
.btn-active-edit { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; animation: editPulse 2s ease-in-out infinite; }
@keyframes editPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* === Strike #53: Manual Edit Autosave Indicator === */
.autosave-indicator { font-size: 0.875rem; color: var(--success, #22c55e); opacity: 0.8; white-space: nowrap; animation: autosaveFade 0.5s ease-in; }
@keyframes autosaveFade { from { opacity: 0; } to { opacity: 0.8; } }

/* === Preset Buttons === */
.preset-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.preset-group h4 { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.3rem; }
.preset-btn { display: inline-block; background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.875rem; margin: 2px; transition: 0.2s; min-height: 44px; min-width: 44px; }
.preset-btn:hover { border-color: var(--accent); background: var(--bg); }

/* === Human Actions === */
.human-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* === Publish === */
.publish-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }
.publish-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; }
.publish-card h4 { font-size: 0.875rem; margin-bottom: 0.5rem; }
.output-area { min-height: 40px; background: var(--bg3); border-radius: 4px; margin-top: 0.5rem; padding: 0.5rem; font-size: 0.875rem; }
.publish-output { white-space: pre-wrap; word-wrap: break-word; font-size: 0.875rem; line-height: 1.7; max-height: 400px; overflow-y: auto; }
.loading-inline { color: var(--text2); font-size: 0.875rem; padding: 0.5rem; }
.card-desc { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.5rem; }
.publish-card-wide { grid-column: span 2; }
.product-fit-run-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.product-fit-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.product-fit-score-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.55rem; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.2rem; }
.product-fit-score-card strong { font-size: 0.95rem; }
.product-fit-section { margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.product-fit-section h5 { margin: 0 0 0.4rem; font-size: 0.875rem; }
.product-fit-subtitle { margin-top: 0.4rem; margin-bottom: 0.3rem; font-size: 0.875rem; color: var(--text2); }
.product-fit-list { margin: 0; padding-left: 1rem; font-size: 0.875rem; }
.product-fit-text { font-size: 0.875rem; color: var(--text2); }
.product-fit-row { margin-bottom: 0.55rem; }
.product-fit-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.2rem; }
.product-fit-bar { width: 100%; height: 7px; background: #1f2937; border-radius: 999px; overflow: hidden; margin-bottom: 0.25rem; }
.product-fit-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%); }
.product-fit-fix { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.55rem; font-size: 0.875rem; margin-bottom: 0.4rem; }
.product-fit-route-list { display: grid; gap: 0.45rem; }
.product-fit-route-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.55rem; font-size: 0.875rem; }
.product-fit-route-head { display: flex; justify-content: space-between; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.product-fit-route-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; }
.product-fit-chip { display: inline-block; font-size: 0.875rem; padding: 0.1rem 0.35rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(99,102,241,0.12); color: #c7d2fe; }
.product-fit-memo { width: 100%; min-height: 180px; white-space: pre-wrap; font-size: 0.875rem; line-height: 1.7; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.5rem; }
.product-fit-memo-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.score-good { color: #34d399; }
.score-mid { color: #fbbf24; }
.score-low { color: #f87171; }
.card-actions { float: right; display: inline-flex; gap: 2px; }
.chapter-actions { float: right; display: inline-flex; gap: 2px; }
.btn-danger-text { color: var(--danger, #e74c3c) !important; }
.btn-xs { font-size: 0.875rem; padding: 0.1rem 0.45rem; min-width: 0; border-radius: 4px; }
.relation-list { margin-top: 0.5rem; }
.relation-item { padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.diff-compare { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.diff-col { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; }
.diff-col h4 { font-size: 0.875rem; margin-bottom: 0.3rem; color: var(--accent); }
.diff-col pre { white-space: pre-wrap; font-size: 0.875rem; max-height: 400px; overflow-y: auto; }
/* Strike #55: Word-Level Diff View */
.diff-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.4rem; }
.diff-pair-selector { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.diff-pair-label { font-size: 0.875rem; color: var(--muted); align-self: center; margin-right: 0.2rem; }
.diff-pair-btn { font-size: 0.875rem; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2); color: var(--fg); cursor: pointer; transition: all 0.15s; }
.diff-pair-btn:hover { border-color: var(--accent); color: var(--accent); }
.diff-pair-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.diff-legend { font-size: 0.875rem; display: flex; gap: 0.6rem; align-items: center; }
.diff-legend .diff-ins { background: rgba(16,185,129,0.18); color: #6ee7b7; padding: 0.1rem 0.4rem; border-radius: 3px; }
.diff-legend .diff-del { background: rgba(239,68,68,0.18); color: #fca5a5; padding: 0.1rem 0.4rem; border-radius: 3px; text-decoration: line-through; }
.diff-stats { display: flex; gap: 0.8rem; margin-bottom: 0.4rem; font-size: 0.875rem; }
.diff-stat-add { color: #6ee7b7; }
.diff-stat-del { color: #fca5a5; }
.diff-stat-eq { color: var(--muted); }
.diff-inline-view { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.diff-inline-header { font-size: 0.875rem; padding: 0.3rem 0.6rem; background: var(--bg3); border-bottom: 1px solid var(--border); color: var(--accent); }
.diff-inline-content { white-space: pre-wrap; font-size: 0.875rem; padding: 0.6rem; max-height: 500px; overflow-y: auto; line-height: 1.7; margin: 0; }
.diff-ins { background: rgba(16,185,129,0.18); color: #d1fae5; border-radius: 2px; padding: 0 1px; }
.diff-del { background: rgba(239,68,68,0.18); color: #fee2e2; text-decoration: line-through; border-radius: 2px; padding: 0 1px; }
.diff-version-panel { margin-top: 0.3rem; }
.diff-version-selectors { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0.5rem; }
.diff-version-selectors label { font-size: 0.875rem; color: var(--muted); display: block; margin-bottom: 0.15rem; }
.diff-version-selectors select { font-size: 0.875rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2); color: var(--fg); min-width: 180px; }
.diff-ver-result { margin-top: 0.4rem; }
.diff-ver-history { margin-top: 0.3rem; font-size: 0.875rem; color: var(--muted); }
.fix-prompt-output { white-space: pre-wrap; font-size: 0.875rem; background: var(--bg3); padding: 0.8rem; border-radius: var(--radius); }
.fix-prompt-meta { margin: 0.55rem 0 0.45rem; font-size: 0.875rem; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); }
.fix-prompt-meta.fit-on { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); color: #a7f3d0; }
.fix-prompt-meta.fit-off { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.32); color: #cbd5e1; }
.fix-prompt-sources { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.3rem 0 0.45rem; }
.fix-source-chip { font-size: 0.875rem; padding: 0.1rem 0.35rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(148,163,184,0.15); color: #cbd5e1; }
.fix-source-chip.on { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); color: #a7f3d0; }
.fix-source-chip.off { background: rgba(107,114,128,0.15); border-color: rgba(148,163,184,0.25); color: #cbd5e1; }
.fix-prompt-ref { margin: 0 0 0.45rem; border: 1px solid var(--border); border-radius: 6px; background: rgba(15,23,42,0.45); }
.fix-prompt-ref pre { margin: 0; white-space: pre-wrap; font-size: 0.875rem; color: var(--text2); padding: 0.45rem 0.55rem; }
.fix-prompt-log-hint { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.45rem; }
.fix-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.audit-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.editorial-note { padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.editorial-note .note-text { flex: 1; min-width: 150px; }
.editorial-note .note-actions { display: flex; gap: 2px; }
.version-accepted { border-left: 3px solid var(--success, #4caf50) !important; }
.core-item { cursor: pointer; }
.core-item:hover { background: rgba(255,255,255,0.05); border-radius: 4px; }

.ip-core-panel { margin-bottom: 1rem; padding: 0.9rem; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.35); border-radius: var(--radius); }
.ip-core-panel h3 { margin: 0 0 0.35rem; color: var(--accent2); font-size: 0.95rem; }
.ip-core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

.writing-core-reference { margin-bottom: 0.8rem; padding: 0.7rem; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.35); border-radius: var(--radius); }
.writing-core-reference-title { font-size: 0.875rem; font-weight: 700; color: #93c5fd; margin-bottom: 0.5rem; }
.writing-core-reference-grid { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.writing-core-item label { display: block; font-size: 0.875rem; color: var(--text2); margin-bottom: 0.15rem; }
.writing-core-val { background: var(--bg3); border-radius: 4px; padding: 0.28rem 0.4rem; font-size: 0.875rem; min-height: 1.5rem; }

/* === Version Actions === */
.version-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.version-filter { margin-bottom: 1rem; }
.version-filter label { font-size: 0.875rem; color: var(--text2); margin-right: 0.5rem; }
.version-filter select { width: auto; }

/* === Impact === */
.impact-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* === Wizard === */
.wizard-overview { margin-bottom: 1rem; padding: 0.7rem 1rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius); }
.wizard-overview h3 { margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--accent2); }
.wizard-effect-map { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.wizard-effect-target { font-size: 0.875rem; padding: 2px 8px; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); border-radius: 3px; color: var(--accent); }
.wizard-effect-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; margin-top: 0.5rem; }
.wizard-effect-table th { text-align: left; padding: 3px 8px; background: rgba(99,102,241,0.1); color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(99,102,241,0.2); }
.wizard-effect-table td { padding: 3px 8px; border-bottom: 1px solid var(--border); color: var(--text2); }
.wizard-effect-table td:first-child { font-weight: 600; color: var(--accent2); width: 40px; text-align: center; }
.wizard-effect-table td:nth-child(2) { width: 80px; color: var(--text); }
.wizard-nav { display: flex; gap: 0.5rem; margin-top: 1rem; }
.wizard-step-effect { font-size: 0.875rem; color: var(--text2); margin: 0 0 0.5rem; padding: 4px 8px; background: rgba(99,102,241,0.06); border-left: 2px solid var(--accent2); border-radius: 0 4px 4px 0; line-height: 1.7; }
.wizard-step-effect strong { color: var(--accent); }
.engine-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

/* === IP Core Required Fields === */
.ip-core-effect { display: block; font-size: 0.875rem; color: var(--text2); margin-top: 2px; padding-left: 2px; }
.ip-core-effect strong { color: var(--accent); }
.ip-core-empty-warn { display: none; font-size: 0.875rem; color: #f59e0b; margin-top: 2px; padding: 3px 6px; background: rgba(245,158,11,0.08); border-radius: 3px; }
.ip-core-required textarea:placeholder-shown ~ .ip-core-empty-warn { display: block; }
.ip-core-required-badge { font-size: 0.875rem; vertical-align: middle; }
.ip-core-sync-badge { display: inline-block; font-size: 0.875rem; color: #60a5fa; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25); padding: 1px 6px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.ip-core-readonly-val { background: var(--bg3); border-radius: 4px; padding: 0.35rem 0.5rem; font-size: 0.875rem; min-height: 1.8rem; color: var(--text); line-height: 1.7; border: 1px solid var(--border); }
.ip-core-edit-link { display: inline-block; font-size: 0.875rem; color: #60a5fa; cursor: pointer; margin-left: 4px; text-decoration: underline; vertical-align: middle; }
.ip-core-edit-link:hover { color: #93c5fd; }
.core-item-highlight { animation: core-highlight-pulse 2s ease-out; }
@keyframes core-highlight-pulse {
  0% { background: rgba(99,102,241,0.35); }
  100% { background: transparent; }
}

/* === Design Tool Details (folding) === */
.design-tool-details { margin-top: 0.7rem; }
.design-tool-details summary { cursor: pointer; font-size: 0.875rem; padding: 6px 10px; background: var(--bg2); border-radius: var(--radius); color: var(--text2); border: 1px solid var(--border); }
.design-tool-details summary:hover { color: var(--text); background: var(--bg3); }
.design-tool-details[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.design-tool-details > .concept-addition-panel,
.design-tool-details > .genre-strength-panel { margin-top: 0; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }

/* === Pitch Template === */
.pitch-template { margin-bottom: 0.7rem; padding: 0.5rem 0.8rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.18); border-radius: var(--radius); }
.pitch-template-title { font-size: 0.875rem; font-weight: 600; color: var(--accent2); margin: 0 0 0.3rem; }
.pitch-template ul { margin: 0; padding-left: 1.2rem; font-size: 0.875rem; color: var(--text2); line-height: 1.7; }
.pitch-template li { margin-bottom: 0.15rem; }
.pitch-template strong { color: var(--text); }

/* === Genre Fit Table === */
.genre-fit-table-area { margin-top: 0.5rem; }
.genre-fit-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.genre-fit-table th { text-align: left; padding: 4px 8px; background: rgba(99,102,241,0.1); color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(99,102,241,0.2); }
.genre-fit-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text2); }
.fit-badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-weight: 700; font-size: 0.875rem; }
.fit-S { background: rgba(34,197,94,0.2); color: #4ade80; }
.fit-A { background: rgba(59,130,246,0.2); color: #60a5fa; }
.fit-B { background: rgba(245,158,11,0.2); color: #fbbf24; }
.fit-C { background: rgba(239,68,68,0.15); color: #f87171; }

/* === Concept Adopt Button === */
.concept-adopt-btn { font-size: 0.875rem; background: var(--primary, #6366f1) !important; color: #fff !important; font-weight: 600; border: none !important; padding: 4px 14px !important; }

/* === Design Helper Section === */
.design-helper-toggle { cursor: pointer; font-size: 0.875rem; padding: 6px 10px; background: var(--bg2); border-radius: var(--radius); color: var(--text2); }
.design-helper-toggle:hover { color: var(--text); }
.design-helper-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.design-helper-card { padding: 8px 12px; background: var(--bg2); border-radius: var(--radius); border: 1px solid var(--border); }
.design-helper-intro { padding: 6px 10px; background: var(--bg2); border-radius: var(--radius); border: 1px solid var(--border); }
.design-helper-purpose { font-size: 0.875rem; color: var(--text2); font-style: italic; }
.ip-core-empty-critical { font-size: 0.875rem; color: #ef4444; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); padding: 4px 8px; border-radius: 4px; }

/* === Engine 4-Layer Guide === */
.engine-layer-guide { margin-bottom: 12px; padding: 8px 14px; background: var(--bg2); border-radius: var(--radius); font-size: 0.875rem; line-height: 1.7; border: 1px solid var(--border); }
.engine-layer-item { display: inline-block; padding: 1px 7px; border-radius: 3px; font-weight: 600; font-size: 0.875rem; }
.engine-layer-part { background: rgba(168,85,247,0.18); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.engine-layer-arc { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.engine-layer-chapter { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.engine-layer-scene { background: rgba(251,191,36,0.15); color: #fcd34d; border: 1px solid rgba(251,191,36,0.3); }
.engine-layer-desc { font-size: 0.875rem; color: var(--text2); }
.engine-layer-flow { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.engine-flow-step { display: flex; align-items: center; gap: 5px; }
.engine-flow-label { font-size: 0.875rem; color: var(--text2); line-height: 1.7; }
.engine-flow-arrow { color: var(--text2); font-size: 1.1rem; font-weight: 700; }
.engine-panel-primary { border: 2px solid rgba(168,85,247,0.45); background: rgba(168,85,247,0.06); }
.engine-panel-primary h3 { color: #c084fc; }
.engine-panel-arcs { border: 1px solid rgba(59,130,246,0.3); background: rgba(59,130,246,0.03); }
.engine-panel-arcs h3 { color: #93c5fd; }
.engine-step-flow-hint { font-size: 0.875rem; color: var(--text2); padding: 4px 8px; margin: 6px 0; background: rgba(99,102,241,0.06); border-radius: 3px; border-left: 2px solid var(--accent2); }
.engine-step-flow-hint strong { color: var(--accent); }

/* === Engine Arc Empty Warnings === */
.arc-empty-field { color: #f59e0b; font-size: 0.875rem; padding: 2px 6px; background: rgba(245,158,11,0.08); border-radius: 3px; display: inline-block; margin-top: 2px; }
.arc-completeness-warn { margin-top: 4px; padding: 4px 8px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: 4px; font-size: 0.875rem; color: #fca5a5; }

/* === Modal === */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-content { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; width: 420px; max-height: 80vh; overflow-y: auto; }
.modal-content h3 { margin-bottom: 1rem; }
.status-indicator { padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.875rem; }

/* === Checklist === */
.checklist { background: var(--bg2); border-radius: var(--radius); padding: 1rem; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* === Responsive === */
@media (max-width: 1200px) {
  .core-panel { width: 200px; }
  #tab-content { margin-right: 210px; }
  .ip-core-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .core-panel { display: none; }
  #tab-content, #tab-content.core-collapsed { margin-right: 0; }
  .writing-layout { grid-template-columns: 1fr; }
  .preset-groups { grid-template-columns: 1fr; }
  .phase-desc { display: none; }
  .phase-step { padding: 0.3rem 0.4rem; }
  #phase-stepper { padding: 0.4rem 0.5rem; }
  .diff-compare { grid-template-columns: 1fr; }
  .diff-toolbar { flex-direction: column; align-items: flex-start; }
  .diff-version-selectors { flex-direction: column; }
  .diff-version-selectors select { min-width: 100%; }
  .trend-detail-layout { flex-direction: column; }
  .trend-panel { flex: none; max-height: 40vh; }
  .publish-card-wide { grid-column: span 1; }
}

/* === Loading Overlay === */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; }
.loading-overlay p { color: var(--text); margin-top: 1rem; font-size: 0.9rem; }
.loading-phase-bar-container { width: 280px; height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; margin-top: 0.8rem; }
.loading-phase-fill { height: 100%; background: #4caf50; border-radius: 4px; transition: width 0.4s ease; width: 0%; }
.loading-phase-text { color: var(--text2); font-size: 0.875rem; margin-top: 0.4rem; }
.loading-elapsed { color: var(--text2); font-size: 0.875rem; margin-top: 0.2rem; opacity: 0.7; }
.loading-eta { color: #4caf50; font-size: 0.875rem; margin-top: 0.15rem; opacity: 0.85; font-weight: 600; }
.btn-cancel-loading { margin-top: 0.8rem; padding: 0.3rem 1.2rem; background: rgba(239,68,68,0.85); color: #fff; border: 1px solid rgba(239,68,68,0.5); border-radius: var(--radius); font-size: 0.875rem; cursor: pointer; transition: background 0.2s; }
.btn-cancel-loading:hover { background: rgba(239,68,68,1); }

/* === Proposal Evaluation Scores === */
.proposal-eval-section { margin-top: 0.6rem; padding: 0.5rem; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); }
.proposal-eval-section.eval-auto-recommended { border-color: #4caf50; border-width: 2px; }
.proposal-eval-section h5 { font-size: 0.875rem; color: var(--accent); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.proposal-eval-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; font-size: 0.875rem; }
.proposal-eval-row.eval-row-best { background: rgba(76,175,80,0.08); border-radius: 3px; padding: 1px 2px; }
.proposal-eval-row.eval-row-weak { background: rgba(244,67,54,0.08); border-radius: 3px; padding: 1px 2px; }
.proposal-eval-label { width: 140px; color: var(--text2); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval-weight { font-size: 0.875rem; opacity: 0.6; margin-left: 2px; }
.eval-axis-best { color: #4caf50; font-size: 0.875rem; }
.eval-axis-weak { color: #f44336; font-size: 0.875rem; }
.proposal-eval-bar { flex: 1; height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.proposal-eval-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.proposal-eval-num { width: 32px; text-align: right; color: var(--text); font-weight: 600; }
.proposal-eval-total { display: flex; justify-content: space-between; padding-top: 0.3rem; border-top: 1px solid var(--border); margin-top: 0.3rem; font-size: 0.875rem; font-weight: 700; }
.proposal-eval-total .eval-label { color: var(--text2); }
.proposal-eval-total .eval-score { color: var(--accent); }
.eval-auto-recommend { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.875rem; font-weight: 700; background: #4caf50; color: #fff; margin-left: 0.3rem; }
.eval-analysis { font-size: 0.875rem; color: var(--text2); margin-top: 0.3rem; }
.eval-details { font-size: 0.875rem; margin-top: 0.3rem; }
.eval-details summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.eval-detail-list { margin-top: 0.2rem; }
.eval-detail-list ul { margin: 0.15rem 0 0.3rem 1rem; padding: 0; }
.eval-detail-list li { color: var(--text2); margin-bottom: 0.1rem; }
.eval-strengths strong { color: #4caf50; }
.eval-improvements strong { color: #ff9800; }
.proposal-eval-rank { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.875rem; font-weight: 700; margin-left: 0.3rem; }
.proposal-eval-rank.rank-1 { background: #ffd700; color: #000; }
.proposal-eval-rank.rank-2 { background: #c0c0c0; color: #000; }
.proposal-eval-rank.rank-3 { background: #cd7f32; color: #fff; }
.btn-evaluate { background: var(--accent); color: #fff; border: none; padding: 0.3rem 0.6rem; border-radius: var(--radius); font-size: 0.875rem; cursor: pointer; }
.btn-evaluate:hover { opacity: 0.85; }
.btn-evaluate:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Toast Notifications === */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { padding: 0.6rem 1rem; border-radius: var(--radius); font-size: 0.875rem; box-shadow: var(--shadow); pointer-events: auto; animation: slideIn 0.3s ease; max-width: 380px; }
.toast-success { background: rgba(34,197,94,0.9); color: white; }
.toast-error { background: rgba(239,68,68,0.9); color: white; }
.toast-info { background: rgba(99,102,241,0.9); color: white; }
.toast-warn { background: rgba(234,179,8,0.9); color: #1a1d27; }
.toast.fade-out { animation: fadeOut 0.4s ease forwards; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* === Error Toast (persistent, with retry button) === */
.toast-error-persistent { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; max-width: 420px; }
.toast-error-msg { flex: 1 1 auto; }
.toast-error-id { font-size: 0.75rem; opacity: 0.8; }
.toast-retry-btn { background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.toast-retry-btn:hover { background: rgba(255,255,255,0.4); }
.toast-close-btn { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 0 0.2rem; line-height: 1; opacity: 0.7; }
.toast-close-btn:hover { opacity: 1; }

/* === Help Button === */
.btn-help { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: white; border: none; font-size: 0.875rem; font-weight: 700; cursor: pointer; vertical-align: middle; margin-left: 0.5rem; }
.btn-help:hover { background: var(--accent2); }

/* === Help Modal === */
.modal-help { width: 600px; max-width: 95vw; max-height: 85vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.help-body h4 { color: var(--accent2); margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.help-body p, .help-body .help-text { font-size: 0.875rem; line-height: 1.7; margin-bottom: 0.8rem; white-space: pre-line; }
.help-item { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; background: var(--bg3); border-radius: 4px; }
.help-item-label { font-weight: 600; font-size: 0.875rem; min-width: 140px; flex-shrink: 0; }
.help-item-desc { font-size: 0.875rem; color: var(--text2); }

/* === Core collapsed class === */
#tab-content.core-collapsed { margin-right: 40px; }

/* === Works Screen (Dashboard) === */
#works-screen { min-height: 100vh; background: var(--bg); }
#works-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.works-main { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.works-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.works-toolbar h2 { font-size: 1.3rem; }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.works-empty { text-align: center; padding: 3rem 1rem; color: var(--text2); }
.works-empty p:first-child { font-size: 1.1rem; margin-bottom: 0.5rem; }

/* Work Card */
.work-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; position: relative; transition: border-color 0.2s; }
.work-card:hover { border-color: var(--accent); }
.work-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.work-card-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.creation-source-badge { font-size: 0.875rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 500; white-space: nowrap; }
.badge-tbs { background: #22c55e22; color: #16a34a; border: 1px solid #22c55e55; }
.badge-ai-proposal { background: #f59e0b22; color: #d97706; border: 1px solid #f59e0b55; }
.badge-ai-shift { background: #f59e0b44; color: #b45309; border: 1px solid #f59e0b88; }
.badge-manual { background: #94a3b822; color: #64748b; border: 1px solid #94a3b855; }
/* Stage バッジ (Phase 2 stage-gate) — work-card-title に creation-source-badge と並べて表示 */
.stage-badge { font-size: 0.875rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.stage-badge-planning  { background: #f59e0b22; color: #d97706; border-color: #f59e0b55; }
.stage-badge-structure { background: #fb923c22; color: #ea580c; border-color: #fb923c55; }
.stage-badge-writing   { background: #22c55e22; color: #16a34a; border-color: #22c55e55; }
.stage-badge-published { background: #3b82f622; color: #2563eb; border-color: #3b82f655; }
.stage-badge-unknown   { background: #94a3b822; color: #64748b; border-color: #94a3b855; }
/* Phase 3: 品質不足バッジ — work-card-title に stage-badge と並列表示。stage-badge とは独立。 */
.quality-badge { font-size: 0.875rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; cursor: help; }
.quality-badge-critical { background: #ef444422; color: #b91c1c; border-color: #ef444455; }
.quality-badge-warn     { background: #eab30822; color: #a16207; border-color: #eab30855; }
/* Phase 3: Stage 1 リセット モーダル説明ボックス */
.reset-stage1-explain { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0.75rem 1rem; margin: 0.75rem 0; font-size: 0.875rem; line-height: 1.7; color: #334155; }
.reset-stage1-explain p { margin: 0.3rem 0; }
.work-menu-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1.2rem; padding: 0 0.3rem; }
.work-menu-btn:hover { color: var(--text); }
.work-card-meta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text2); margin-bottom: 0.8rem; flex-wrap: wrap; }
.work-card-actions { display: flex; gap: 0.5rem; }
.work-card-dropdown { position: absolute; top: 2.5rem; right: 0.5rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.3rem 0; box-shadow: var(--shadow); z-index: 10; min-width: 100px; }
.dropdown-item { display: block; width: 100%; text-align: left; padding: 0.4rem 0.8rem; background: none; border: none; color: var(--text); cursor: pointer; font-size: 0.875rem; }
.dropdown-item:hover { background: var(--bg2); }
.work-delete-btn { color: var(--red) !important; }

/* === Episodes Modal === */
.modal-wide { width: 700px; max-width: 95vw; }
.episodes-body { max-height: 60vh; overflow-y: auto; }
.episodes-summary { font-size: 0.875rem; color: var(--text2); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.episode-chapter { margin-bottom: 1rem; background: var(--bg3); border-radius: var(--radius); padding: 0.8rem; }
.episode-chapter-header { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.episode-scenes { list-style: none; padding-left: 1rem; }
.episode-scenes li { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; font-size: 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.episode-scenes li.done { color: var(--text2); }
.status-done { background: rgba(34,197,94,0.2); color: var(--green); }
.status-pending { background: rgba(234,179,8,0.2); color: var(--yellow); }

/* === Delete Modal === */
.warn-text { color: var(--yellow); font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.7; }
.warn-box { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.3); border-radius: var(--radius); padding: 0.75rem; margin-top: 0.75rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.warn-box .warn-icon { font-size: 1.2rem; flex-shrink: 0; }
.warn-box p { color: var(--yellow); font-size: 0.875rem; line-height: 1.7; margin: 0; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.btn-danger { background: var(--red); color: white; border-color: var(--red); }
.btn-danger:hover { opacity: 0.85; }

/* === Settings Modal Enhanced === */
.settings-info-box { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; margin-bottom: 1.2rem; }
.settings-info-box h4 { font-size: 0.875rem; color: var(--accent2); margin-bottom: 0.5rem; }
.provider-routing-info { display: flex; flex-direction: column; gap: 0.5rem; }
.route-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; }
.route-item small { color: var(--text2); font-size: 0.875rem; }
.settings-note { font-size: 0.875rem; color: var(--text2); margin-top: 0.5rem; font-style: italic; }
.settings-section { margin-bottom: 1.2rem; padding: 0.8rem; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border); }
.settings-section h4 { font-size: 0.9rem; color: var(--accent2); margin-bottom: 0.8rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.input-row { display: flex; gap: 0.5rem; }
.input-row input { flex: 1; }
.credit-display .credit-value { display: flex; align-items: center; gap: 0.5rem; }
.credit-number { font-size: 1rem; font-weight: 600; }
.btn-ghost { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1.1rem; padding: 0.2rem; }
.btn-ghost:hover { color: var(--accent2); }
.model-recommended { font-weight: 600; }
/* V2 model routing panel */
.v2-routing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.v2-routing-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; }
.v2-routing-card.v2-sub { border-left: 3px solid var(--accent2); }
.v2-routing-header { font-weight: 600; font-size: 0.875rem; color: var(--accent2); margin-bottom: 0.4rem; }
.v2-slot-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.25rem; }
.v2-slot-label { font-size: 0.875rem; color: var(--text2); min-width: 2.2em; }
.v2-slot-provider { font-size: 0.875rem; padding: 0.15rem 0.2rem; flex: 0 0 5.5em; }
.v2-slot-model { font-size: 0.875rem; padding: 0.15rem 0.25rem; flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text); }
.v2-options-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.875rem; color: var(--text2); }
.v2-options-row label { display: flex; align-items: center; gap: 0.2rem; }
.v2-options-row input[type="number"] { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text); }
.v2-routing-help { margin-bottom: 0.8rem; }
.v2-routing-help summary { font-size: 0.875rem; font-weight: 600; color: var(--accent2); cursor: pointer; padding: 0.3rem 0; }
.v2-help-dl { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.7; }
.v2-help-dl dt { font-weight: 600; color: var(--text); margin-top: 0.4rem; }
.v2-help-dl dd { margin: 0.15rem 0 0 1rem; color: var(--text2); }
.v2-help-dl dd strong { color: var(--accent2); }
.model-orphan { color: var(--yellow); font-style: italic; }
.form-hint { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.5rem; }

/* === Settings nav tabs === */
.settings-nav { display: flex; gap: 0.3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.settings-nav-btn { background: none; border: 1px solid transparent; color: var(--text2); cursor: pointer; padding: 0.4rem 0.8rem; font-size: 0.875rem; border-radius: var(--radius); transition: 0.2s; }
.settings-nav-btn:hover { background: var(--bg3); color: var(--text); }
.settings-nav-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.settings-panel { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* === Provider badge inline === */
.provider-badge-inline { font-size: 0.875rem; padding: 0.15rem 0.5rem; border-radius: 3px; margin-left: 0.5rem; font-weight: 400; }
.provider-badge-inline.badge-ok { background: rgba(34,197,94,0.15); color: var(--green); }
.provider-badge-inline.badge-ng { background: rgba(239,68,68,0.15); color: var(--red); }

/* === Settings description text === */
.settings-desc { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.6rem; line-height: 1.7; }

/* === Recommendation table === */
.settings-recommend-table { margin: 0.5rem 0; }
.settings-recommend-table table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.settings-recommend-table th { background: var(--bg3); color: var(--text2); padding: 0.3rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); font-weight: 500; }
.settings-recommend-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.load-heavy { color: var(--red); font-weight: 600; }
.load-medium { color: var(--yellow); font-weight: 600; }
.load-light { color: var(--green); font-weight: 600; }
.load-badge { font-size: 0.875rem; padding: 0.1rem 0.35rem; border-radius: 3px; font-weight: 600; vertical-align: middle; }
.load-badge.load-heavy { background: rgba(239,68,68,0.15); }
.load-badge.load-medium { background: rgba(234,179,8,0.15); }
.load-badge.load-light { background: rgba(34,197,94,0.15); }

/* === Task routing grid === */
.task-routing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.task-routing-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; }
.task-routing-card h5 { font-size: 0.875rem; color: var(--accent2); margin-bottom: 0.3rem; }

/* === Clickable work badge === */
.work-badge.clickable { cursor: pointer; transition: 0.2s; }
.work-badge.clickable:hover { background: var(--accent); color: white; }

/* === Chapter Progress Dashboard (Phase γ) === */
.chapter-progress-dashboard { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.chapter-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.chapter-progress-header h3 { font-size: 1rem; margin: 0; }
.chapter-progress-summary { display: flex; gap: 8px; align-items: center; font-size: 0.875rem; }
.chapter-progress-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; }
.ch-prog-card { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.875rem; cursor: pointer; transition: 0.15s; background: var(--bg3); }
.ch-prog-card:hover { border-color: var(--accent); background: rgba(99,102,241,0.1); }
.ch-prog-card.active { border-color: var(--accent); background: rgba(99,102,241,0.15); box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
.ch-prog-card .ch-num { font-weight: 700; min-width: 24px; }
.ch-prog-card .ch-status { margin-left: auto; }
.ch-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ch-status-dot.finalized { background: var(--green); }
.ch-status-dot.candidates { background: var(--yellow); }
.ch-status-dot.brief { background: var(--blue); }
.ch-status-dot.empty { background: var(--text2); opacity: 0.4; }
.ch-status-dot.review { background: var(--orange); }
.ch-status-dot.failed { background: var(--red); }
.ch-prog-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 2px; overflow: hidden; }
.ch-prog-bar-fill { height: 100%; background: var(--green); transition: width 0.3s; }
.ch-prog-auto-btn { font-size: 0.875rem; padding: 2px 8px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ch-prog-auto-btn:hover { background: var(--accent2); }
.deprecated-area { opacity: 0.7; }
.deprecated-area:hover { opacity: 1; }

/* === Writing Navigation === */
.writing-nav { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.writing-nav-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.writing-nav-row .form-group { margin-bottom: 0; flex: 1; min-width: 180px; }
.form-inline { display: flex; flex-direction: column; }
.writing-nav-status { display: flex; align-items: flex-end; padding-bottom: 0.3rem; }
.writing-nav-info { margin-top: 0.8rem; }
.badge-dim { background: rgba(160,164,184,0.2); color: var(--text2); }
/* episode_role バッジ */
.badge-episode-hook { background: rgba(239,68,68,0.2); color: #dc2626; font-weight: 700; }
.badge-episode-setup { background: rgba(59,130,246,0.2); color: #2563eb; }
.badge-episode-fun { background: rgba(34,197,94,0.2); color: #16a34a; }
.badge-episode-crisis { background: rgba(249,115,22,0.2); color: #ea580c; font-weight: 700; }
.badge-episode-turn { background: rgba(139,92,246,0.2); color: #7c3aed; }
.badge-episode-section { background: rgba(107,114,128,0.25); color: #4b5563; }

/* 部グルーピング区切り線 */
.section-divider { text-align: center; margin: 16px 0 8px; position: relative; }
.section-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border, #333648); }
.section-divider-label { position: relative; background: var(--bg2, #1a1d27); padding: 0 12px; font-size: 0.875em; color: var(--text2, #a0a4b8); font-weight: 600; }
.section-group-0 { border-left: 3px solid rgba(99,102,241,0.4); }
.section-group-1 { border-left: 3px solid rgba(34,197,94,0.4); }
.section-group-2 { border-left: 3px solid rgba(249,115,22,0.4); }
.section-group-3 { border-left: 3px solid rgba(139,92,246,0.4); }
.info-ready { color: var(--green); font-size: 0.875rem; }
.error-text { color: var(--red); }

/* === Responsive extras === */
@media (max-width: 700px) {
  .works-grid { grid-template-columns: 1fr; }
  .work-card-actions { flex-direction: column; }
  .writing-nav-row { flex-direction: column; }
  .modal-wide { width: 95vw; }
  .model-selector-3tier { grid-template-columns: 1fr; }
  .concept-custom-input { flex-wrap: wrap; }
}

/* === Small modal & new work modal === */
.modal-sm { width: 380px; max-width: 95vw; }
.modal-desc { color: var(--text2); font-size: 0.88rem; margin: -0.3rem 0 1rem; line-height: 1.7; }
.required { color: var(--red); font-size: 0.875rem; }

/* === Settings: save footer & model refresh === */
.settings-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 0.8rem 0 0; border-top: 1px solid var(--border); margin-top: 0.5rem; }
.save-status-text { font-size: 0.875rem; color: var(--green); }
.text-muted-small { font-size: 0.875rem; color: var(--text2); margin-left: 0.4rem; font-weight: 400; }
.modal-header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* === Spec modal === */
.modal-spec { width: 860px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.spec-body { flex: 1; overflow-y: auto; padding: 1rem 0; font-size: 0.9rem; line-height: 1.7; }
.spec-body h2 { font-size: 1.1rem; color: var(--accent2); margin: 1.2rem 0 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.spec-body h3 { font-size: 0.95rem; color: var(--yellow); margin: 1rem 0 0.4rem; }
.spec-body h4 { font-size: 0.88rem; color: var(--text); margin: 0.8rem 0 0.3rem; }
.spec-body p { margin: 0.4rem 0; }
.spec-body ul { margin: 0.3rem 0 0.3rem 1.2rem; }
.spec-body li { margin: 0.15rem 0; }
.spec-body code { background: var(--bg3); border: 1px solid var(--border); padding: 0.1rem 0.3rem; border-radius: 3px; font-family: monospace; font-size: 0.875rem; }
.spec-body pre { background: var(--bg3); border: 1px solid var(--border); padding: 0.8rem; border-radius: var(--radius); overflow-x: auto; margin: 0.5rem 0; }
.spec-body pre code { background: none; border: none; padding: 0; }
.spec-body hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.spec-table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.875rem; }
.spec-table td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; }
.spec-table tr:nth-child(even) td { background: var(--bg3); }
.spec-tabs { display: flex; gap: 0.3rem; }
.spec-tab-btn { padding: 0.3rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg3); color: var(--text2); font-size: 0.875rem; cursor: pointer; transition: all 0.15s; }
.spec-tab-btn.active, .spec-tab-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* === Audit Results === */
.audit-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; margin: 0.5rem 0; }
.audit-card.audit-pass { border-left: 3px solid var(--green); }
.audit-card.audit-fail { border-left: 3px solid var(--red); }
.audit-card.audit-error { border-left: 3px solid var(--orange); color: var(--text2); }
.audit-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.audit-section { margin: 0.4rem 0; font-size: 0.875rem; }
.audit-item { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0; padding: 0.2rem 0; }
.audit-name { min-width: 100px; color: var(--text2); }
.score-bar { flex: 1; background: var(--bg); border-radius: 4px; height: 12px; overflow: hidden; max-width: 200px; }
.score-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.score-num { font-weight: bold; min-width: 30px; text-align: right; }
.loading-audit { padding: 1rem; color: var(--text2); text-align: center; }
#audit-results-area h3 { margin-bottom: 0.5rem; }

/* === Batch Generation === */
.batch-progress { padding: 0.5rem; }
.batch-header { font-size: 0.9rem; margin-bottom: 0.3rem; color: var(--text); }
.batch-progress-bar { background: var(--bg); border-radius: 4px; height: 16px; overflow: hidden; margin: 0.3rem 0; }
.batch-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; }
.batch-status-item { font-size: 0.875rem; padding: 0.15rem 0; color: var(--text2); }

/* === Chapter Cards === */
.chapter-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; margin: 0.4rem 0; }
.chapter-card-header { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.3rem; }
.chapter-number { font-weight: bold; color: var(--accent); }
.chapter-title { color: var(--text); }
.chapter-card-body { font-size: 0.875rem; color: var(--text2); }
.chapter-card-body p { margin-bottom: 0.3rem; }

/* === Character Cards === */
.character-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; gap: 0.5rem; }
.char-traits { font-size: 0.875rem; color: var(--accent2); margin-bottom: 0.2rem; }
.char-desc { font-size: 0.875rem; color: var(--text2); }

/* 2026-04-18 (Round 5 D-10): subpane purpose banner — owner が
   サブタブを開いた瞬間に「このタブは何をする画面か」を視認できる
   1 行説明帯。font-size 0.875rem (14px) で WCAG 床確保。
   line-height: 1.7 (frontend.md: 日本語 1.7 統一 / phase6-typography-reset 整合) */
.subpane-purpose {
  display: block;
  margin: 0 0 0.75rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg2, #f5f7fa);
  border-left: 3px solid var(--accent2, #2563eb);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text2, #4b5563);
  line-height: 1.7;
}

/* Round 4 (2026-04-18): compact card grid — 3 cols @ 1024px, max-height 220px */
/* T-A fix: #character-grid.card-grid becomes single-column so subpane-purpose
   and .character-card-grid stack vertically at full width. The inner
   .character-card-grid then handles the 3-col auto-fill layout. */
#character-grid.card-grid {
  grid-template-columns: 1fr;
}
.character-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .character-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Round 5 (2026-04-18 T-10 fix): dark-theme alignment.
   旧: background: var(--bg1, #ffffff) → 未定義変数で白fallback → 薄灰文字でコントラスト破綻 (1.13:1)
   新: var(--bg2) でアプリ全体のカード規範色に統一。
   char-name/catchphrase は var(--text) で AA-AAA contrast (12.42:1) 確保。 */
.character-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 6px;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  /* Round 10 T-4: Tier 1 field 5 常時表示のため max-height を撤廃し,
     代わりに min-height を確保。overflow: hidden も解除してカード内容を
     すべて visible にする。 */
  min-height: 220px;
  overflow: visible;
}
/* Round 10 T-4: 一覧カード Tier 1 field 5 常時表示
   魅力の核 / 動機 / 話し方 / 秘密 / 経歴 を 2 列 grid で配置。
   空 field は .character-card-field-empty で淡色表示。 */
.character-card-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1rem;
  margin-top: 0.25rem;
}
.character-card-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.character-card-field-label {
  font-size: 0.875rem;
  color: var(--text2);
  font-weight: 700;
  line-height: 1.6;
}
.character-card-field-value {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.character-card-field-empty .character-card-field-value {
  color: var(--muted, #9ca3af);
  font-style: italic;
}
.character-card .char-name {
  color: var(--text);
}
/* archetype 別に 2px ボーダー色を変える */
.character-card.archetype-protagonist {
  border-color: #facc15; /* gold */
  background: var(--bg2);
  color: var(--text);
}
.character-card.archetype-heroine {
  border-color: #ec4899; /* pink */
  background: var(--bg2);
  color: var(--text);
}
.character-card.archetype-villain {
  border-color: #ef4444; /* red */
  background: var(--bg2);
  color: var(--text);
}
.character-card.archetype-companion {
  border-color: #06b6d4; /* cyan */
  background: var(--bg2);
  color: var(--text);
}
.character-card.archetype-ally {
  border-color: #22c55e; /* green */
  background: var(--bg2);
  color: var(--text);
}

.character-card .card-actions .btn {
  min-height: 44px;
  min-width: 44px;
}

.char-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: var(--bg3, #e6edf3);
  color: var(--text, #1f2328);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--border, #d1d9e0);
}
.char-avatar.archetype-protagonist { background: #fef3c7; color: #92400e; border-color: #facc15; }
.char-avatar.archetype-heroine     { background: #fce7f3; color: #9d174d; border-color: #ec4899; }
.char-avatar.archetype-villain     { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
.char-avatar.archetype-companion   { background: #cffafe; color: #155e75; border-color: #06b6d4; }
.char-avatar.archetype-ally        { background: #dcfce7; color: #166534; border-color: #22c55e; }

.char-header-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.25rem;
}
.char-header-main .char-name { font-size: 1.0625rem; line-height: 1.6; font-weight: 700; }
.char-badges {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Round 5 (T-10 fix): catchphrase color を accent2(薄青) → text(白) に変更
   ダーク背景 #1a1d27 × #e1e4ed = 12.42:1 (AAA) */
.char-catchphrase {
  font-style: normal;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
  line-height: 1.6;
  font-weight: 600;
}
/* Round 5 新規: 未設定 placeholder は薄く識別可能に (#1a1d27 × #a0a4b8 = 5.59:1 AA) */
.char-catchphrase-empty {
  color: var(--text2);
  font-style: italic;
}
/* Round 4 (2026-04-18): obsolete long-text rows hidden (moved to modal) */
.char-icon-action, .char-motivation, .char-charm {
  display: none !important;
}
.character-card .card-footer {
  display: flex;
  justify-content: stretch;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.char-next-action {
  min-height: 44px;
  min-width: 44px;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}
.char-next-action:hover { filter: brightness(1.08); }
.char-next-action:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }

/* T6 (2026-04-18 Round 3): relations empty-state hero CTA */
.crg-empty-lead {
  margin: 0.5rem 0 0.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text, #1f2328);
}
.crg-empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  margin: 0.5rem 0;
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 8px;
}
.crg-empty-hero-btn, .btn.btn-lg {
  min-height: 52px;
  min-width: 240px;
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.crg-empty-hero-btn:hover, .btn.btn-lg:hover { filter: brightness(1.08); }
.crg-empty-hero-btn:active, .btn.btn-lg:active { transform: translateY(1px); }
.crg-empty-hero-btn:focus-visible, .btn.btn-lg:focus-visible {
  outline: 3px solid var(--accent2, #2563eb);
  outline-offset: 2px;
}
.crg-empty-hero-hint {
  font-size: 0.875rem;
  color: var(--text2, #656d76);
  margin: 0;
}
.crg-empty-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* T4 (2026-04-18 Round 3): overlap_pair card 3 CTAs */
.overlap-pair-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border, #d1d9e0);
  flex-wrap: wrap;
}
.overlap-pair-actions .btn { min-height: 36px; font-size: 0.875rem; }

/* T3 (2026-04-18 Round 3): gate-status breakdown CTA */
.gate-breakdown-row { padding: 4px 6px; border-radius: 4px; }
.gate-breakdown-row:hover { background: rgba(0, 0, 0, 0.03); }
.gate-breakdown-cta {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.875rem;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.gate-breakdown-cta:hover { background: var(--accent2, #2563eb); filter: brightness(1.05); }
.gate-breakdown-cta:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }

/* === TBS Trend Briefs === */
.badge-blue { background: var(--blue); color: #fff; font-size: 0.875rem; padding: 0.15rem 0.5rem; border-radius: 10px; vertical-align: middle; }

.trend-brief-card {
  background: var(--bg2); border: 1px solid var(--blue); border-radius: var(--radius);
  padding: 1rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.trend-brief-card:hover { border-color: var(--accent2); box-shadow: 0 0 12px rgba(99,102,241,0.3); }
.trend-brief-card .brief-status { font-size: 0.875rem; padding: 0.1rem 0.4rem; border-radius: 4px; }
.brief-status.received { background: var(--blue); color: #fff; }
.brief-status.reviewing { background: var(--yellow); color: #000; }
.brief-status.registered { background: var(--green); color: #fff; }
.trend-brief-card h4 { margin: 0.5rem 0 0.3rem; font-size: 0.95rem; }
.trend-brief-card .brief-meta { font-size: 0.875rem; color: var(--text2); }
.trend-brief-card .brief-proposals-preview { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.5rem; }
.brief-proposals-preview span { background: var(--bg3); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
.trend-brief-card .btn-delete-brief { margin-top: 0.5rem; width: 100%; }

/* Trend detail modal */
.modal-fullwidth { width: 95vw; max-width: 1400px; max-height: 90vh; overflow-y: auto; }
.trend-detail-layout { display: flex; gap: 1.5rem; margin-top: 1rem; }
.trend-panel { flex: 0 0 320px; background: var(--bg3); border-radius: var(--radius); padding: 1rem; overflow-y: auto; max-height: 70vh; }
.trend-panel h4 { color: var(--accent2); font-size: 0.875rem; margin: 0.8rem 0 0.4rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.trend-panel h4:first-child { margin-top: 0; }
.trend-tag { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.875rem; margin: 0.15rem; }
.trend-tag.strong { background: var(--red); color: #fff; }
.trend-tag.medium { background: var(--orange); color: #fff; }
.trend-tag.weak { background: var(--bg2); color: var(--text2); border: 1px solid var(--border); }
.trend-tag.keyword { background: var(--accent); color: #fff; }
.trend-tag.avoid { background: #4a1c1c; color: var(--red); border: 1px solid var(--red); }
.trend-tag.hook { background: #1c3a4a; color: var(--blue); }
.trend-tag.reward { background: #1c4a2a; color: var(--green); }
.trend-info-item { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.2rem; }

.proposals-area { flex: 1; min-width: 0; }
#proposals-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.proposal-card {
  background: var(--bg2); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1rem; transition: border-color 0.2s, box-shadow 0.2s; position: relative; cursor: pointer;
}
.proposal-card:hover:not(.editing) { border-color: var(--accent2); }
.proposal-card.selected { border-color: var(--accent); box-shadow: 0 0 12px rgba(99,102,241,0.4); }
.proposal-card.selected::after { content: '✓ 選択中'; position: absolute; top: 8px; right: 8px; background: var(--accent); color: #fff; font-size: 0.875rem; padding: 2px 8px; border-radius: 4px; }
.btn-pulse { animation: btnPulse 0.6s ease; }
@keyframes btnPulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.btn-select-proposal { transition: background 0.2s; }
.proposal-card .proposal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.proposal-card .proposal-name { font-weight: bold; color: var(--accent2); font-size: 0.95rem; }
.proposal-card .proposal-genre { font-size: 0.875rem; background: var(--bg3); padding: 0.1rem 0.4rem; border-radius: 4px; }
.proposal-card .logline { font-size: 0.875rem; color: var(--text); margin-bottom: 0.5rem; font-style: italic; }
.proposal-card .proposal-section { margin-bottom: 0.5rem; }
.proposal-card .proposal-section h5 { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.2rem; }
.proposal-card .proposal-section p, .proposal-card .proposal-section li { font-size: 0.875rem; color: var(--text); }
.proposal-card .proposal-section ul { list-style: none; padding: 0; }
.proposal-card .proposal-section li { padding: 0.1rem 0; }
.proposal-card .proposal-section li::before { content: "▸ "; color: var(--accent2); }
.proposal-card .proposal-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.proposal-card .proposal-actions .btn { font-size: 0.875rem; padding: 0.3rem 0.7rem; }
.proposal-card .market-fit { font-size: 0.875rem; color: var(--text); margin-top: 0.5rem; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 8px; padding: 0.5rem 0.6rem; }
.proposal-card .market-fit > strong { color: var(--green); display: block; margin-bottom: 0.3rem; font-size: 0.875rem; }
.market-fit-row { padding: 0.2rem 0; line-height: 1.7; }
.market-fit-label { color: var(--accent2); font-weight: 600; font-size: 0.875rem; }
.market-fit-keyword { display: inline-block; background: rgba(34, 197, 94, 0.15); color: var(--green); border-radius: 4px; padding: 0.1rem 0.4rem; margin: 0.1rem 0.2rem; font-size: 0.875rem; font-weight: 500; }
.proposal-rich-fields { display: grid; gap: 0.35rem; margin-bottom: 0.55rem; }
.proposal-rich-field { font-size: 0.875rem; color: var(--text); background: var(--bg3); border-radius: 6px; padding: 0.4rem 0.5rem; }
.proposal-rich-field strong { color: var(--accent2); }
.proposal-risk { border: 1px solid rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.08); border-radius: 8px; padding: 0.5rem 0.6rem; }
.proposal-risk h5 { color: #fca5a5; }
.proposal-risk p { margin: 0; font-size: 0.875rem; color: var(--text); }

/* Proposal source badges */
.proposal-source-badge { font-size: 0.875rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.badge-tbs { background: var(--green); color: var(--bg); }
.badge-shift { background: var(--yellow); color: var(--bg); }
.badge-independent { background: var(--accent); color: #fff; }
/* Proposal shift info */
.proposal-shift-info { background: rgba(255,193,7,0.08); border-left: 3px solid var(--yellow); padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; border-radius: 0 4px 4px 0; font-size: 0.875rem; }
.proposal-shift-info .shift-axis { color: var(--yellow); margin-bottom: 0.15rem; }
.proposal-shift-info .shift-base { color: var(--text2); margin-bottom: 0.15rem; }
.proposal-shift-info .shift-desc { color: var(--text); font-style: italic; }

/* Proposal inline editing */
.proposal-card.editing { border-color: var(--yellow); }
.proposal-card.editing textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem; font-size: 0.875rem; resize: vertical; margin-bottom: 0.3rem; }

/* Action bar */
.trend-action-bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.episode-selector { display: flex; align-items: center; gap: 0.5rem; }
.episode-selector label { font-size: 0.875rem; color: var(--text2); }
.episode-selector select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.5rem; }
.btn-register-story { font-size: 1rem !important; padding: 0.6rem 1.5rem !important; }
.btn-register-story:disabled { opacity: 0.5; cursor: not-allowed; }

/* Model 3-tier selector */
.model-usage-filter { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.usage-btn { padding: 4px 10px; font-size: 0.875rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text2); cursor: pointer; transition: all 0.2s; }
.usage-btn:hover { border-color: var(--accent); color: var(--accent); }
.usage-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.model-selector-3tier { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 6px; margin-bottom: 4px; }
.model-selector-3tier select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 0.875rem; }
#model-count-info { font-size: 0.875rem; color: var(--text2); }

/* Chapter action buttons */
.chapter-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chapter-toolbar-actions .btn { font-size: 0.875rem; }
.chapter-card-actions-bar { display: flex; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.chapter-card-actions-bar .btn { font-size: 0.875rem; padding: 2px 8px; }

/* Audit explanation */
.audit-explanation { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
.audit-verdict { font-size: 1.1rem; font-weight: bold; margin-bottom: 8px; }
.audit-verdict.verdict-good { color: var(--green); }
.audit-verdict.verdict-caution { color: var(--orange); }
.audit-verdict.verdict-bad { color: var(--red); }
.audit-next-action { background: rgba(249,115,22,0.1); border-left: 3px solid var(--orange); padding: 8px 12px; margin-top: 8px; font-size: 0.875rem; }
.auditor-tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--text2); }
.auditor-tooltip .tooltip-text { visibility: hidden; position: absolute; bottom: 100%; left: 0; background: var(--bg2); border: 1px solid var(--border); padding: 6px 10px; border-radius: 4px; font-size: 0.875rem; white-space: nowrap; z-index: 50; }
.auditor-tooltip:hover .tooltip-text { visibility: visible; }
.severity-icon { margin-right: 4px; }

/* Tab navigation phase labels */
.tab-phase-label { display: block; font-size: 0.875rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px 2px; font-weight: bold; pointer-events: none; }
.tab-guidance { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.03)); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px; font-size: 0.875rem; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.tab-guidance .guidance-icon { font-size: 1.2rem; }
.tab-guidance .guidance-text { flex: 1; }

/* Episode Analysis Panel */
#episode-analysis-panel h4, #related-trends-panel h4 { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.tension-bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 100px; padding: 4px 0; overflow-x: auto; }
.tension-bar { flex: 1; min-width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; position: relative; cursor: pointer; transition: filter 0.2s; }
.tension-bar:hover { filter: brightness(1.2); }
.tension-bar .bar-tooltip { display: none; position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 0.875rem; white-space: nowrap; z-index: 20; min-width: 120px; pointer-events: none; }
.tension-bar:first-child .bar-tooltip { left: 0; transform: none; }
.tension-bar:last-child .bar-tooltip { left: auto; right: 0; transform: none; }
.tension-bar:hover .bar-tooltip { display: block; }
.tension-bar-labels { display: flex; gap: 2px; font-size: 0.875rem; color: var(--text2); overflow-x: auto; }
.tension-bar-labels span { flex: 1; min-width: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emotion-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.emotion-tag { padding: 3px 8px; border-radius: 12px; font-size: 0.875rem; font-weight: 500; background: rgba(99,102,241,0.1); color: var(--accent); }
.emotion-tag.期待 { background: rgba(99,102,241,0.15); color: #818cf8; }
.emotion-tag.驚き { background: rgba(245,158,11,0.15); color: #f59e0b; }
.emotion-tag.共感 { background: rgba(16,185,129,0.15); color: #10b981; }
.emotion-tag.怒り { background: rgba(239,68,68,0.15); color: #ef4444; }
.emotion-tag.爽快感 { background: rgba(59,130,246,0.15); color: #3b82f6; }
.emotion-tag.不安 { background: rgba(168,85,247,0.15); color: #a855f7; }
.emotion-tag.感動 { background: rgba(236,72,153,0.15); color: #ec4899; }
.emotion-tag.緊張 { background: rgba(249,115,22,0.15); color: #f97316; }
.ep-info-block { background: var(--bg2); border-radius: var(--radius); padding: 8px 12px; margin: 6px 0; font-size: 0.875rem; line-height: 1.7; }
.ep-info-block strong { color: var(--text); }
.ep-list { list-style: none; padding: 0; margin: 4px 0; }
.ep-list li { padding: 3px 0; font-size: 0.875rem; color: var(--text2); }
.ep-list li::before { content: '▸ '; color: var(--accent); }
.ep-sentiment-good { color: #10b981; }
.ep-sentiment-bad { color: #ef4444; }
.ep-curve-meta { display: flex; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.ep-curve-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; background: rgba(99,102,241,0.12); color: var(--accent); }
.related-trend-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.related-trend-item:last-child { border-bottom: none; }
.related-trend-point { font-weight: 600; color: var(--accent); }
.kw-freq-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); margin-left: 6px; vertical-align: middle; max-width: 100px; }

/* Progress overlay */
.progress-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,17,23,0.9); display: flex; align-items: center; justify-content: center; z-index: 100; border-radius: var(--radius); }
.progress-content { text-align: center; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === コンセプト足し算 === */
.concept-addition-panel, .genre-strength-panel { margin-top: 2rem; padding: 1.5rem; background: var(--bg2); border-radius: var(--radius); border: 1px solid var(--border); }
.concept-addition-panel h3, .genre-strength-panel h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.concept-preset-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.75rem 0; }
.concept-tag-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--text2); cursor: pointer; font-size: 0.875rem; transition: all 0.2s; }
.concept-tag-btn:hover { border-color: var(--accent); color: var(--accent); }
.concept-tag-btn.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.concept-custom-input { display: flex; gap: 8px; margin: 0.5rem 0; }
.concept-custom-input input { flex: 1; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875rem; }
.concept-selected-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0; min-height: 32px; }
.concept-selected-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(99,102,241,0.15); color: var(--accent); border-radius: 14px; font-size: 0.875rem; }
.concept-selected-tag button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 1rem; padding: 0 2px; }
.concept-actions { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0.5rem; }
.concept-count { font-size: 0.875rem; color: var(--text2); }

/* === ジャンル強度マッピング === */
.genre-map-options { margin: 0.75rem 0; }
.genre-platform-checks { display: flex; gap: 1rem; margin: 0.5rem 0; }
.genre-platform-checks label { display: flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--text2); cursor: pointer; }

/* === 打ち切り判定 === */
.discontinue-inputs { display: grid; gap: 0.75rem; margin: 1rem 0; }
.discontinue-row label { display: block; font-size: 0.875rem; color: var(--text2); margin-bottom: 4px; }
.discontinue-row input, .discontinue-row select { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875rem; }

/* === キャラ設計支援 === */
.obsession-target { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; flex-wrap: wrap; }
.obsession-target label { font-size: 0.875rem; color: var(--text2); }
.obsession-target select { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875rem; }

/* === 一括編集パネル === */
.batch-edit-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.5rem 0; }
.batch-edit-controls label { font-size: 0.875rem; color: var(--text2); }
.batch-edit-controls select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875rem; }

/* === 一括編集パネル拡張 (Strike #77) === */
.bep-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.bep-panel h4 { margin: 0 0 8px 0; font-size: 0.95em; color: var(--text); }
.bep-custom-section { margin-top: 10px; }
.bep-custom-label { font-size: 0.875em; font-weight: 600; color: var(--text); margin-bottom: 4px; display: block; }
.bep-custom-textarea { width: 100%; min-height: 60px; max-height: 150px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875em; resize: vertical; font-family: inherit; }
.bep-custom-textarea::placeholder { color: var(--text2); opacity: 0.7; }
.bep-custom-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.bep-history-select { flex: 1; min-width: 150px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875em; }
.bep-btn-save { font-size: 0.875em; padding: 4px 10px; }
.bep-btn-apply-custom { font-size: 0.875em; padding: 5px 14px; }
.bep-preset-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bep-preset-buttons .btn { font-size: 0.875em; padding: 3px 8px; }

/* Per-scene progress table */
.bep-progress-panel { margin-top: 10px; }
.bep-progress-summary { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.bep-progress-stat { font-size: 0.875em; padding: 3px 10px; border-radius: 12px; background: var(--bg); color: var(--text2); }
.bep-progress-stat.bep-stat-success { background: rgba(40,167,69,0.15); color: #28a745; }
.bep-progress-stat.bep-stat-fail { background: rgba(220,53,69,0.15); color: #dc3545; }
.bep-progress-stat.bep-stat-pending { background: rgba(108,117,125,0.15); color: #6c757d; }
.bep-progress-stat.bep-stat-processing { background: rgba(0,123,255,0.15); color: #007bff; }
.bep-progress-table { width: 100%; border-collapse: collapse; font-size: 0.875em; max-height: 250px; overflow-y: auto; display: block; }
.bep-progress-table th { position: sticky; top: 0; background: var(--surface); padding: 4px 8px; text-align: left; border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text2); }
.bep-progress-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.bep-progress-table tr.bep-row-success td { background: rgba(40,167,69,0.05); }
.bep-progress-table tr.bep-row-fail td { background: rgba(220,53,69,0.05); }
.bep-progress-table tr.bep-row-processing td { background: rgba(0,123,255,0.05); }
.bep-status-icon { display: inline-block; width: 18px; text-align: center; }
.bep-progress-bar-mini { width: 100%; height: 4px; background: var(--bg); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.bep-progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }

/* === Strike #78: 再生成戦略パネル (rsp-prefix) === */
.rsp-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface); }
.rsp-panel h4 { margin: 0 0 4px 0; font-size: 0.95em; color: var(--text); }
.rsp-desc { font-size: 0.875em; color: var(--text2); margin: 0 0 12px 0; }
.rsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rsp-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--bg); transition: border-color 0.2s; }
.rsp-card:hover { border-color: var(--accent); }
.rsp-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rsp-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.875em; flex-shrink: 0; }
.rsp-card-title { font-weight: 600; font-size: 0.88em; color: var(--text); flex: 1; }
.rsp-card-desc { font-size: 0.875em; color: var(--text2); margin: 0 0 8px 0; line-height: 1.7; }
.rsp-card-options { margin-bottom: 8px; }
.rsp-opt { display: block; font-size: 0.875em; color: var(--text2); margin-bottom: 4px; }
.rsp-opt select { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.9em; width: 100%; }
.rsp-textarea { width: 100%; min-height: 48px; max-height: 120px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 0.875em; resize: vertical; font-family: inherit; }
.rsp-textarea::placeholder { color: var(--text2); opacity: 0.7; }
.rsp-exec { width: 100%; margin-top: 4px; }
.rsp-progress { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--bg); }
.rsp-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rsp-progress-header strong { font-size: 0.875em; color: var(--text); }
.rsp-step { font-size: 0.875em; padding: 3px 0; color: var(--text2); }
.rsp-step.rsp-step-done { color: #28a745; }
.rsp-step.rsp-step-active { color: var(--accent); font-weight: 600; }
.rsp-step.rsp-step-fail { color: #dc3545; }

/* === カクヨム戦略カード === */
.kakuyomu-card { border-left: 3px solid var(--accent); }
.kurekure-options, .schedule-options, .redirect-options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0; font-size: 0.875rem; }
.kurekure-options label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--text2); }
.schedule-options label, .redirect-options label { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.schedule-options input, .schedule-options select, .redirect-options input { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.875rem; }

/* 構造の出自パネル */
.structure-notes-panel { margin-top: 1.5rem; padding: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.structure-notes-panel h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--accent); }
.structure-note-item { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.structure-note-item:last-child { border-bottom: none; }
.structure-note-name { font-weight: 600; margin-right: 0.5rem; color: var(--text); }

/* === Reader Feedback Table === */
.rf-controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.rf-controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.rf-controls select { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 0.3rem 0.5rem; font-size: 0.875rem; }
.rf-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.rf-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rf-table th { background: var(--bg3); padding: 0.4rem 0.5rem; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; }
.rf-table td { padding: 0.25rem 0.3rem; border-bottom: 1px solid var(--border); }
.rf-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 0.3rem 0.4rem; font-size: 0.875rem; }
.rf-input:focus { border-color: var(--accent); outline: none; }
.rf-ep, .rf-pv, .rf-bm, .rf-st { width: 70px; text-align: right; }
.rf-date { width: 130px; }
.rf-notes { min-width: 120px; }

/* === Reader Feedback Bar Chart === */
.rf-chart { margin-top: 1rem; }
.rf-chart h4 { font-size: 0.9rem; margin: 0.75rem 0 0.4rem; color: var(--text2); }
.rf-bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 0 4px; background: var(--bg3); border-radius: var(--radius); overflow-x: auto; }
.rf-bar-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.rf-bar-dual { gap: 1px; }
.rf-bar { border-radius: 2px 2px 0 0; min-height: 2px; width: 80%; transition: height 0.3s; }
.rf-bar-label { font-size: 0.875rem; color: var(--text2); margin-top: 2px; }
.rf-chart-legend { display: flex; gap: 1rem; margin: 0.4rem 0; font-size: 0.875rem; color: var(--text2); }
.rf-legend-item { display: flex; align-items: center; gap: 4px; }
.rf-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* === Shift Quality Evaluation === */
#shift-quality-results { margin-top: 1rem; padding: 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
#shift-quality-results h3 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--accent); }
.shift-origin { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.75rem; padding: 0.5rem; background: var(--bg3); border-radius: 4px; }
.shift-ranking { margin-bottom: 1rem; }
.shift-rank-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.shift-rank-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--bg3); border-radius: 4px; font-size: 0.875rem; }
.shift-rank-top { border: 1px solid var(--accent); background: rgba(99,102,241,0.1); }
.shift-medal { font-size: 1.1rem; }
.shift-rank-score { margin-left: auto; font-weight: 600; }
.shift-rank-detail { font-size: 0.875rem; color: var(--text2); }
.shift-card { margin-bottom: 0.75rem; padding: 0.75rem; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border); }
.shift-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.shift-axes { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.shift-axis { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.shift-axis-name { width: 90px; flex-shrink: 0; }
.shift-analysis { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.5rem; line-height: 1.7; }
.shift-list { font-size: 0.875rem; margin-top: 0.4rem; }
.shift-list ul { margin: 4px 0 0 16px; }
.shift-list li { margin-bottom: 2px; }

/* === 品質アナリティクス BI === */
.analytics-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.analytics-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; text-align: center; }
.analytics-card-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.analytics-card-value small { font-size: 0.875rem; font-weight: 400; }
.analytics-card-label { font-size: 0.875rem; color: var(--text2); margin-top: 2px; }
.analytics-improving { border-color: var(--green); }
.analytics-improving .analytics-card-value { color: var(--green); }
.analytics-declining { border-color: var(--red); }
.analytics-declining .analytics-card-value { color: var(--red); }
.analytics-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; }
.analytics-section h4 { font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--text1); }
.analytics-chart { display: flex; flex-direction: column; gap: 3px; }
.analytics-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.analytics-bar-date { width: 100px; flex-shrink: 0; color: var(--text2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-auditor-grid { display: flex; flex-direction: column; gap: 4px; }
.analytics-auditor-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.analytics-auditor-name { width: 110px; flex-shrink: 0; }
.analytics-patterns { list-style: none; padding: 0; font-size: 0.875rem; }
.analytics-patterns li { padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; gap: 0.5rem; align-items: baseline; }
.analytics-patterns li:last-child { border-bottom: none; }
.batch-summary { margin-top: 8px; padding: 8px; background: var(--bg2); border-radius: 6px; font-size: 0.875rem; }

/* X-3: 先読み設計パネル */
.forward-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.forward-plan-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.forward-plan-card h4 { margin: 0 0 8px 0; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fp-row { font-size: 0.875rem; margin-bottom: 4px; }
.fp-actions { margin-top: 8px; display: flex; gap: 6px; }
.forward-plan-placeholder { border-style: dashed; opacity: 0.6; }
.forward-plan-placeholder .placeholder-text { font-size: 0.875rem; color: var(--text2); text-align: center; padding: 16px 0; }

/* ============================================================
   ステップ式UI — 7ステップインジケーター & AI生成ボタン
   ============================================================ */

/* --- 7ステップインジケーター --- */
#step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, var(--bg2) 0%, #161922 100%);
  padding: 0.5rem 0.8rem;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 42px;
  z-index: 100;
  overflow-x: auto;
  scrollbar-width: thin;
}
.step-indicator-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
  position: relative;
}
.step-indicator-item:hover { background: rgba(99,102,241,0.1); }
.step-indicator-item.active {
  background: rgba(99,102,241,0.18);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.step-indicator-item.completed .step-num {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.step-indicator-item.active .step-num {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(99,102,241,0.4);
}
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
  color: var(--text2);
  transition: all 0.25s;
  flex-shrink: 0;
}
.step-icon { font-size: 0.875rem; flex-shrink: 0; }
.step-label-group { display: flex; flex-direction: column; min-width: 0; }
.step-label { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.step-sublabel { font-size: 0.875rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.step-indicator-item.active .step-label { color: var(--accent2); }
.step-arrow { color: var(--border); font-size: 0.875rem; flex-shrink: 0; padding: 0 0.15rem; }

/* ステップ全体進捗バー */
.step-overall-progress {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.step-overall-progress-bar {
  flex: 1; height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}
.step-overall-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.step-overall-progress-text {
  color: var(--text2); font-size: 0.875rem; white-space: nowrap;
}

/* --- ステップ内コンテキストヒント --- */
.step-context-hint {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: rgba(99,102,241,0.06);
  border-bottom: 1px solid rgba(99,102,241,0.12);
  font-size: 0.875rem; color: var(--text2);
}
.step-context-hint-icon { font-size: 1rem; }
.step-context-hint-text { flex: 1; }

/* --- AI生成ボタン（共通コンポーネント） --- */
.ai-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #2d2f45 0%, #1e2030 100%);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.5rem 0.9rem;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.ai-gen-btn::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0) 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.ai-gen-btn:hover::before { opacity: 1; }
.ai-gen-btn:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 12px rgba(99,102,241,0.25);
  transform: translateY(-1px);
}
.ai-gen-btn:active { transform: translateY(0); }
.ai-gen-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ai-gen-btn-sm { font-size: 0.875rem; padding: 0.35rem 0.65rem; }
.ai-gen-btn-lg { font-size: 0.95rem; padding: 0.6rem 1.2rem; }
.ai-gen-icon { font-size: 1em; flex-shrink: 0; }
.ai-gen-label { font-weight: 500; }
.ai-gen-model-badge {
  font-size: 0.875rem;
  background: rgba(99,102,241,0.2);
  color: var(--accent2);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
/* 生成中アニメーション */
.ai-gen-loading .ai-gen-icon {
  animation: ai-spin 1s linear infinite;
}
.ai-gen-loading {
  border-color: var(--yellow);
}
.ai-gen-loading .ai-gen-model-badge {
  background: rgba(234,179,8,0.2);
  color: var(--yellow);
}
@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- AI結果ヘッダー --- */
.ai-result-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 4px;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.ai-result-model {
  font-weight: 600; color: var(--accent2);
}
.ai-result-provider {
  color: var(--text2);
}
.ai-result-tokens, .ai-result-elapsed {
  color: var(--text2);
}
.ai-result-fallback {
  color: var(--yellow);
  font-weight: 500;
}

/* --- 静的HTMLのAI生成ボタン用モデルタグ --- */
.ai-model-tag {
  font-size: 0.875rem;
  background: rgba(99,102,241,0.2);
  color: var(--accent2);
  padding: 0.08rem 0.35rem;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* --- ステップ式の「次のステップへ」ボタン強化 --- */
.step-next-action {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(34,197,94,0.06) 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.step-next-action .step-next-label {
  font-size: 0.875rem; font-weight: 600;
  color: var(--accent2);
}
.step-next-action .btn-step-next {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}
.step-next-action .btn-step-next:hover {
  background: var(--accent2);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

/* --- タブフェーズラベル更新（ステップ対応） --- */
.tab-phase-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  padding: 0.4rem 0.3rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
  opacity: 0.8;
  display: flex;
  align-items: center;
}

/* === Emotion Curve Selector === */
.emotion-curve-selector { margin: 8px 0; }
.emotion-curve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.emotion-curve-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.emotion-curve-card:hover { border-color: var(--accent); }
.emotion-curve-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(108, 92, 231, 0.4);
}
.ec-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ec-id {
  font-size: 0.875rem;
  color: var(--text2);
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.ec-name { font-weight: 600; font-size: 0.875rem; }
.ec-graph-label { margin-left: auto; font-size: 1.1rem; opacity: 0.6; }
.ec-preview { min-height: 60px; }
.ec-description { font-size: 0.875rem; color: var(--text2); margin-top: 4px; }
.ec-genre-hint {
  font-size: 0.875rem;
  color: var(--accent);
  opacity: 0.7;
  margin-top: 2px;
}

/* === Part Stepwise Dialog === */
.modal-dialog {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-dialog::backdrop { background: rgba(0,0,0,0.6); }
.psd-step { display: none; }
.psd-step.active { display: block; }
.psd-step label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}
.psd-step input, .psd-step textarea, .psd-step select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
}
.psd-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#psd-step-indicator {
  font-size: 0.875rem;
  color: var(--text2);
  font-weight: 600;
}

/* === Part Check Result === */
.part-check-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}
.part-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.875rem;
}
.part-check-item .check-icon { font-size: 1rem; }
.check-pass { color: var(--success, #2ecc71); }
.check-fail { color: var(--error, #e74c3c); }
.check-warn { color: var(--warning, #f39c12); }

/* === Part Detail Cards (enriched) === */
.part-detail-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}
.part-detail-section .detail-row {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.part-detail-section .detail-label {
  color: var(--text2);
  min-width: 80px;
}
.part-emotion-preview { margin-top: 6px; }
.arc-emotion-preview { margin-top: 6px; }

/* === D-5: Emotion Curve Visualizer Enhancements === */
.ec-composite-detail,
.ec-rec-detail,
.ec-expand-detail {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ec-composite-toggle,
.ec-rec-toggle,
.ec-expand-toggle {
  padding: 6px 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent, #6c5ce7);
  cursor: pointer;
  background: var(--bg2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ec-composite-toggle::before,
.ec-rec-toggle::before,
.ec-expand-toggle::before {
  content: '▸';
  transition: transform 0.2s;
}
details[open] > .ec-composite-toggle::before,
details[open] > .ec-rec-toggle::before,
details[open] > .ec-expand-toggle::before {
  transform: rotate(90deg);
}
.ec-composite-body,
.ec-rec-body,
.ec-expand-body {
  padding: 8px 10px;
  overflow-x: auto;
}

/* Recommendation Panel */
.ec-rec-panel { margin-top: 4px; }
.ec-rec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ec-rec-part-label {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--accent, #6c5ce7);
}
.ec-rec-desc {
  font-size: 0.875rem;
  color: var(--text2);
}
.ec-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.ec-rec-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  transition: border-color 0.2s;
}
.ec-rec-card:hover { border-color: var(--accent); }
.ec-rec-match { border-color: #00b894; background: rgba(0, 184, 148, 0.06); }
.ec-rec-mismatch { border-color: #fdcb6e; background: rgba(253, 203, 110, 0.06); }
.ec-rec-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  margin-bottom: 4px;
}
.ec-rec-position {
  font-weight: 700;
  color: var(--text);
}
.ec-rec-arrow {
  color: var(--text2);
  opacity: 0.5;
}
.ec-rec-pattern {
  font-weight: 600;
  color: var(--accent, #6c5ce7);
  font-size: 0.875rem;
}
.ec-rec-card-preview { min-height: 50px; }
.ec-rec-reason {
  font-size: 0.875rem;
  color: var(--text2);
  margin-top: 2px;
}
.ec-rec-current {
  font-size: 0.875rem;
  color: var(--text2);
  opacity: 0.7;
  margin-top: 2px;
  font-style: italic;
}

/* Draggable point hover */
.ec-draggable-point:hover {
  r: 7;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(108, 92, 231, 0.5));
}

/* === Chapter Drama Dialog (cdd) === */
.cdd-step { display: none; }
.cdd-step.active { display: block; }
.cdd-step h4 { margin-bottom: 8px; }
.cdd-step label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 0.875rem; }
.cdd-step input, .cdd-step textarea, .cdd-step select {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
}
.cdd-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* === Toggle Switch (Feature Flags) === */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 26px;
  transition: 0.3s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
  border-color: var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
  background: #fff;
}

/* === Check Result Actionable Badges === */
.check-action-hint {
  font-size: 0.875rem;
  color: var(--text2);
  margin-top: 2px;
  padding-left: 24px;
}
.check-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 6px 10px;
  background: var(--bg2);
  border-radius: 6px;
  font-size: 0.875rem;
}
.check-summary-bar .score-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.check-summary-bar .score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.pattern-dup-warning {
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(253, 203, 110, 0.1);
  border: 1px solid rgba(253, 203, 110, 0.3);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--yellow, #fdcb6e);
}

/* === Strike #34: Regeneration Preflight & Quality Gate Styles === */

/* Lock status indicator in scene info area */
.scene-lock-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 0;
}
.scene-lock-hint {
  font-size: 0.875rem;
  color: var(--text2);
  font-style: italic;
}
.badge-red {
  background: var(--red);
  color: #fff;
}

/* Preflight summary panel (shown in confirmation dialogs / inline) */
.preflight-summary {
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.preflight-lock-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.preflight-lock-icon {
  font-size: 1.1rem;
}
.preflight-blocked {
  color: var(--red);
  padding: 6px 0;
  font-weight: 500;
}
.preflight-warnings {
  color: var(--yellow);
  padding: 4px 0;
}
.preflight-warnings ul {
  margin: 4px 0 0 18px;
  padding: 0;
}
.preflight-warnings li {
  margin-bottom: 2px;
}
.preflight-impact {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text2);
}
.preflight-impact div {
  margin: 2px 0;
}

/* Quality Gate Summary panel */
.gate-summary {
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.gate-summary-empty {
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text2);
}
.gate-summary-header {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.gate-hard-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}
.gate-hard-badge.gate-pass {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.gate-hard-badge.gate-fail {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.gate-score-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}
.gate-score-high {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}
.gate-score-mid {
  background: rgba(234, 179, 8, 0.12);
  color: var(--yellow);
}
.gate-score-low {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}
.gate-auto-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent2);
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.gate-next-step {
  padding: 6px 0 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text2);
}
.gate-guidance-fail {
  color: var(--red);
}
.gate-guidance-warn {
  color: var(--orange);
}
.gate-guidance-review {
  color: var(--yellow);
}
.gate-guidance-ok {
  color: var(--green);
}

/* ============================================================
   第35打: 左サイドバーステップナビゲーション + サブタブピル + コンテキストヒント
   ============================================================ */

/* --- メインレイアウト（サイドバー + コンテンツ） --- */
#main-layout {
  display: flex;
  min-height: calc(100vh - 42px);
}

/* --- 左サイドバー --- */
#step-sidebar {
  width: 200px;
  min-width: 200px;
  background: linear-gradient(180deg, var(--bg2) 0%, #0e1018 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 42px;
  height: calc(100vh - 42px);
  z-index: 80;
  transition: width 0.3s ease, min-width 0.3s ease;
  overflow: hidden;
}
#step-sidebar.collapsed {
  width: 52px;
  min-width: 52px;
}
#step-sidebar.collapsed .step-sidebar-info,
#step-sidebar.collapsed .step-sidebar-badge,
#step-sidebar.collapsed .step-sidebar-title,
#step-sidebar.collapsed .step-sidebar-progress-text {
  display: none;
}
#step-sidebar.collapsed .step-sidebar-header {
  justify-content: center;
  padding: 0.5rem 0.3rem;
}
#step-sidebar.collapsed .step-sidebar-item {
  padding: 0.45rem 0;
  justify-content: center;
}
#step-sidebar.collapsed .step-sidebar-connector {
  display: none;
}

.step-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.step-sidebar-home {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent2);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: 0.2s;
}
.step-sidebar-home:hover {
  background: var(--bg3);
  border-color: var(--accent);
}
.step-sidebar-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 進捗バー */
.step-sidebar-progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.step-sidebar-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}
.step-sidebar-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.step-sidebar-progress-text {
  font-size: 0.875rem;
  color: var(--text2);
  font-weight: 600;
  white-space: nowrap;
}

/* ステップ項目 */
.step-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem 0;
}
.step-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  min-height: 44px;
  flex-wrap: wrap;
}
.step-sidebar-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.step-sidebar-item:hover {
  background: rgba(99,102,241,0.08);
}
.step-sidebar-item.active {
  background: rgba(99,102,241,0.15);
  border-left: 3px solid var(--accent);
}
.step-sidebar-item.completed .step-sidebar-num {
  background: var(--green);
  color: white;
  border-color: var(--green);
  box-shadow: 0 0 6px rgba(34,197,94,0.3);
}
.step-sidebar-item.active .step-sidebar-num {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(99,102,241,0.5);
}

/* ステップ番号 */
.step-sidebar-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text2);
  flex-shrink: 0;
  transition: all 0.25s;
}

/* コネクタライン */
.step-sidebar-connector {
  position: absolute;
  left: 22px;
  top: -6px;
  width: 2px;
  height: 12px;
}
.step-sidebar-item:first-child .step-sidebar-connector {
  display: none;
}
.step-connector-line {
  display: block;
  width: 2px;
  height: 100%;
  background: var(--border);
}
.step-sidebar-item.completed .step-connector-line,
.step-sidebar-item.completed + .step-sidebar-item .step-connector-line {
  background: var(--green);
}
.step-sidebar-item.active .step-connector-line {
  background: linear-gradient(180deg, var(--green) 0%, var(--accent) 100%);
}

/* ステップ情報 */
.step-sidebar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.step-sidebar-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.step-sidebar-item.active .step-sidebar-label {
  color: var(--accent2);
}
.step-sidebar-desc {
  font-size: 0.875rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ステップバッジ（完了チェック等） */
.step-sidebar-badge {
  font-size: 0.875rem;
  flex-shrink: 0;
}
.step-sidebar-badge[data-badge="done"]::after {
  content: "✓";
  color: var(--green);
  font-weight: 700;
}
.step-sidebar-badge[data-badge="wip"]::after {
  content: "●";
  color: var(--yellow);
  font-size: 0.875rem;
}

/* サイドバー折り畳みボタン */
.step-sidebar-toggle {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  padding: 0.3rem;
  margin: 0.5rem;
  font-size: 0.875rem;
  transition: 0.2s;
}
.step-sidebar-toggle:hover {
  color: var(--text);
  background: var(--bg);
}
#step-sidebar.collapsed .step-sidebar-toggle {
  transform: rotate(180deg);
}

/* --- コンテンツエリア --- */
#content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* tab-content の margin-right は既存の #tab-content ルールで維持 (core-panel用) */

/* --- サブタブ・ピルナビ --- */
.step-subtab-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.step-subtab-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.step-subtab-pills {
  display: flex;
  gap: 0.3rem;
}
.step-subtab-pill {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.25rem 0.8rem;
  font-size: 0.875rem;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step-subtab-pill:hover {
  background: rgba(99,102,241,0.1);
  border-color: var(--accent);
  color: var(--text);
}
.step-subtab-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.step-subtab-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}
.step-subtab-pill .pill-status {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
.step-subtab-pill .pill-status[data-status="done"] {
  background: var(--green);
}
.step-subtab-pill .pill-status[data-status="wip"] {
  background: var(--yellow);
}

/* --- コンテキストヒントバナー --- */
.step-context-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 1rem 0;
  background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(99,102,241,0.06));
  border: 1px solid rgba(6,182,212,0.25);
  border-left: 3px solid #06b6d4;
  border-radius: 0 6px 6px 0;
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.7;
}
.context-hint-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.context-hint-text {
  flex: 1;
}
.context-hint-dismiss {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0 0.2rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.context-hint-dismiss:hover {
  opacity: 1;
}

/* --- 第36打: 空状態ガイダンス --- */
.step-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  margin: 1rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(6,182,212,0.04) 100%);
  border: 1px dashed rgba(99,102,241,0.3);
  border-radius: 12px;
  text-align: center;
  animation: fadeInUp 0.4s ease-out;
}
.step-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  opacity: 0.8;
}
.step-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.5rem;
}
.step-empty-body {
  font-size: 0.875rem;
  color: var(--text2);
  max-width: 420px;
  line-height: 1.7;
}
.btn-step-empty-action {
  margin-top: 1rem;
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-step-empty-action:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

/* --- PDR-2: タブ空状態ガイダンス --- */
.tab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  margin: 1rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(6,182,212,0.04) 100%);
  border: 1px dashed rgba(99,102,241,0.3);
  border-radius: 12px;
  text-align: center;
  animation: fadeInUp 0.4s ease-out;
}
.tab-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  opacity: 0.8;
}
.tab-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.5rem;
}
.tab-empty-body {
  font-size: 0.875rem;
  color: var(--text2);
  max-width: 420px;
  line-height: 1.7;
}
.btn-tab-empty-action {
  margin-top: 1rem;
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-tab-empty-action:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

/* --- 第36打: 完了セレブレーション・トースト --- */
#step-toast-container {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}
.step-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  animation: slideInRight 0.3s ease-out, fadeOutRight 0.4s ease-in 4.6s forwards;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.step-toast-success {
  background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.08) 100%);
  border: 1px solid rgba(34,197,94,0.4);
  color: var(--text);
}
.step-toast-icon {
  font-size: 1.1rem;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}
.step-toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.step-toast-content strong {
  color: var(--green);
}
.step-toast-next {
  font-size: 0.875rem;
  color: var(--text2);
}
.step-toast-dismiss {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.875rem;
  opacity: 0.5;
  padding: 0 0.2rem;
}
.step-toast-dismiss:hover { opacity: 1; }

/* サイドバー項目の完了パルスアニメーション */
.step-sidebar-item.step-celebrate .step-sidebar-num {
  animation: celebratePulse 0.6s ease-out 2;
}
@keyframes celebratePulse {
  0% { transform: scale(1); box-shadow: 0 0 6px rgba(34,197,94,0.3); }
  50% { transform: scale(1.3); box-shadow: 0 0 18px rgba(34,197,94,0.6); }
  100% { transform: scale(1); box-shadow: 0 0 6px rgba(34,197,94,0.3); }
}

/* 全ステップ完了時のサイドバーグロー */
#step-sidebar.all-complete {
  border-right-color: var(--green);
  box-shadow: inset -2px 0 12px rgba(34,197,94,0.1);
}

/* --- 第36打: コンテキストヘルプバッジ&ツールチップ --- */
.step-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(6,182,212,0.15);
  border: 1px solid rgba(6,182,212,0.4);
  color: #06b6d4;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  transition: all 0.2s;
}
.step-help-badge:hover {
  background: rgba(6,182,212,0.3);
  box-shadow: 0 0 8px rgba(6,182,212,0.3);
}
.step-help-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  padding: 0.8rem 1rem;
  background: var(--bg2);
  border: 1px solid rgba(6,182,212,0.3);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.7;
  animation: fadeInUp 0.2s ease-out;
}
.step-help-tooltip strong {
  color: #06b6d4;
  display: block;
  margin-bottom: 0.3rem;
}
.step-help-tooltip p {
  color: var(--text2);
  margin: 0;
}

/* --- Phase 9-B: コンテキストヘルプツールチップ --- */
[data-help] {
  cursor: help;
  transition: background-color 0.15s;
}
[data-help]:hover {
  background-color: rgba(99,102,241,0.08);
}
.help-tooltip {
  position: absolute;
  z-index: 10000;
  max-width: 280px;
  min-width: 160px;
  padding: 0.6rem 0.8rem;
  background: var(--bg2, #1a1d27);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: var(--radius, 8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.7;
  animation: fadeInUp 0.15s ease-out;
  pointer-events: none;
}
.help-tooltip::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(99,102,241,0.3);
}
.help-tooltip-below::before {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid rgba(99,102,241,0.3);
}
.help-tooltip strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
  font-size: 0.875rem;
}
.help-tooltip p {
  color: var(--text2);
  margin: 0;
  font-weight: 400;
  font-size: 0.875rem;
}
.help-tooltip-link {
  color: var(--accent2, #818cf8);
  text-decoration: underline;
  font-size: 0.875rem;
}

/* --- 第36打: アニメーション --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* --- Bootstrap (AI初期生成) --- */
.btn-bootstrap {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn-bootstrap:hover { background: linear-gradient(135deg, #818cf8, #a78bfa); }
.bootstrap-desc { margin: 0 0 1rem; line-height: 1.7; }
.bootstrap-progress-bar {
  height: 8px;
  background: var(--bg2, #1a1a2e);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.bootstrap-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}
.bootstrap-progress-fill.bootstrap-complete {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.bootstrap-progress-label {
  font-size: 0.875rem;
  color: var(--text-sub, #a0a0c0);
  margin: 0.25rem 0 0.75rem;
}
.bootstrap-phase-log {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.875rem;
  background: var(--bg2, #0d0d1a);
}
.bootstrap-phase-item {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bootstrap-phase-item:last-child { border-bottom: none; }
.bootstrap-phase-item.phase-ok { color: #4ade80; }
.bootstrap-phase-item.phase-warn { color: #fbbf24; }
.bootstrap-done {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.bootstrap-done-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.bootstrap-done-text { font-size: 1.1rem; font-weight: 700; color: #4ade80; margin: 0.5rem 0; }
.bootstrap-done-sub { font-size: 0.875rem; color: var(--text-sub, #a0a0c0); margin-bottom: 1rem; line-height: 1.7; }
.bootstrap-done-actions { display: flex; gap: 0.5rem; justify-content: center; }
.bootstrap-error-area { text-align: center; padding: 1rem; color: #f87171; }
.badge-bootstrap { background: #6366f1; color: #fff; }
.creation-source-badge.badge-bootstrap { background: #6366f1; }

/* --- レスポンシブ: サイドバー --- */
/* === appConfirm カスタム確認モーダル === */
.app-confirm-content { text-align: left; }
.app-confirm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.app-confirm-header h3 { margin: 0; font-size: 1.05rem; }
.app-confirm-icon { font-size: 1.4rem; flex-shrink: 0; }
.app-confirm-icon-danger { filter: hue-rotate(-20deg); }
.app-confirm-icon-warn { filter: hue-rotate(30deg); }
.app-confirm-msg { line-height: 1.7; color: var(--text); font-size: 0.9rem; margin-bottom: 8px; white-space: pre-line; }
.app-confirm-detail { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 0.875rem; color: var(--text2); line-height: 1.7; margin-bottom: 8px; max-height: 200px; overflow-y: auto; white-space: pre-line; }

/* === カスタム入力モーダル (appPrompt) === */
.app-prompt-content { text-align: left; }
.app-prompt-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.app-prompt-header h3 { margin: 0; font-size: 1.05rem; }
.app-prompt-icon { font-size: 1.4rem; flex-shrink: 0; }
.app-prompt-msg { line-height: 1.7; color: var(--text); font-size: 0.9rem; margin-bottom: 10px; white-space: pre-line; }
.app-prompt-input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.9rem; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.app-prompt-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.app-prompt-textarea { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.9rem; outline: none; transition: border-color 0.2s; resize: vertical; min-height: 80px; box-sizing: border-box; font-family: inherit; }
.app-prompt-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.app-prompt-error { color: #ef4444; font-size: 0.875rem; margin-top: 4px; margin-bottom: 4px; }
.app-prompt-content .modal-actions { margin-top: 14px; }

/* === オンボーディングパネル === */
.onboarding-panel { background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.08) 100%); border: 1px solid rgba(99,102,241,0.3); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; animation: fadeInUp 0.4s ease-out; }
.onboarding-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.onboarding-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1.7; }
.onboarding-header-text h3 { font-size: 1rem; color: var(--accent); margin: 0 0 2px; }
.onboarding-header-text p { font-size: 0.875rem; color: var(--text2); margin: 0; }
.onboarding-dismiss { margin-left: auto; opacity: 0.5; }
.onboarding-dismiss:hover { opacity: 1; }
.onboarding-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.onboarding-step-chip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.875rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.onboarding-step-chip:hover { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.onboarding-step-chip .chip-icon { font-size: 1rem; }
.onboarding-step-chip .chip-status { margin-left: auto; font-size: 0.875rem; }
.onboarding-step-chip .chip-status.ready { color: #22c55e; }
.onboarding-step-chip .chip-status.empty { color: var(--text2); }
.onboarding-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* === ダッシュボード クイックスタートカード === */
.dash-quickstart { background: linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(16,185,129,0.08) 100%); border: 1px solid rgba(34,197,94,0.3); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; animation: fadeInUp 0.4s ease-out; }
.dash-quickstart-icon { font-size: 2rem; flex-shrink: 0; }
.dash-quickstart-text { flex: 1; }
.dash-quickstart-text h4 { font-size: 0.95rem; margin: 0 0 3px; color: #22c55e; }
.dash-quickstart-text p { font-size: 0.875rem; color: var(--text2); margin: 0; }
.dash-quickstart-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 1200px) {
  #step-sidebar { width: 170px; min-width: 170px; }
  #content-area #tab-content { margin-right: 210px; }
}
@media (max-width: 900px) {
  #step-sidebar { display: none; }
  #content-area #tab-content { margin-right: 0; }
  /* 旧タブナビを復活 */
  #tab-nav { display: flex !important; }
  .step-empty-state { margin: 0.5rem; padding: 1.5rem 1rem; }
  #step-toast-container { right: 8px; max-width: 280px; }
  .onboarding-steps { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .dash-quickstart { flex-direction: column; text-align: center; }
  .dash-quickstart-actions { justify-content: center; }
  .scene-quick-nav { flex-wrap: wrap; gap: 4px; }
  .scene-nav-divider { display: none; }
}

/* === Phase 6: モバイル 375px 専用 — 3 カラム破綻修正 + 横スクロール タブナビ === */
@media (max-width: 375px) {
  /* タブナビを横スクロール化（折り返し禁止・タッチターゲット 44x44 維持） */
  #tab-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.3rem 0.3rem;
    gap: 4px;
    scrollbar-width: thin;
  }
  #tab-nav .tab-btn {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 0.4rem 0.6rem;
  }
  /* step-subtab-bar もパンくずと pills を縦積みで 3 カラム破綻を防ぐ */
  .step-subtab-bar {
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    gap: 0.4rem;
  }
  .step-subtab-pills {
    flex-wrap: wrap;
    width: 100%;
  }
  .step-breadcrumb-text {
    width: 100%;
    white-space: normal;
  }
  /* コンテンツエリアパディング縮小（body scrollWidth を 375 以下に） */
  #tab-content {
    padding: 0.6rem;
    margin-right: 0;
  }
  /* core-panel は 375px では非表示 or 最下部へ送る（レイアウト崩れ防止） */
  #core-panel {
    position: static;
    width: 100%;
  }
  /* タッチターゲット最低保証 */
  .preset-btn,
  .btn-regen,
  .cand-tab,
  .step-subtab-pill {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === Phase 6: step-sidebar accordion subtabs (左サイドバー責務明確化) === */
.step-sidebar-subtabs {
  list-style: none;
  margin: 0.3rem 0 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.step-sidebar-subtabs[hidden] {
  display: none;
}
.step-sidebar-subtab {
  padding: 0.35rem 0.6rem 0.35rem 2.2rem;
  font-size: 0.875rem;
  color: var(--text2);
  border-radius: 4px;
  cursor: pointer;
  transition: 0.15s;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
}
.step-sidebar-subtab:hover {
  background: rgba(99,102,241,0.12);
  color: var(--text);
}
.step-sidebar-subtab.active {
  background: rgba(99,102,241,0.2);
  color: var(--accent2);
  font-weight: 600;
}
.step-sidebar-subtab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* === Phase 6: step-breadcrumb-text (パンくず表示) === */
.step-breadcrumb-text {
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Strike #39: Scene Quick Navigation === */
.scene-quick-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border, #e0e0e0);
  margin-top: 6px;
}
.scene-nav-btn { font-size: 0.875rem; padding: 3px 10px; min-width: auto; }
.scene-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.scene-nav-position { font-size: 0.875rem; color: var(--text2, #888); min-width: 70px; text-align: center; }
.scene-nav-divider { color: var(--border, #ccc); font-size: 0.9rem; margin: 0 2px; }
#btn-jump-incomplete { font-weight: 600; }

/* === Strike #39: Writing Session Mini-Dashboard === */
.writing-session-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--bg2, #f8f9fa);
  border-radius: 6px;
  margin-top: 6px;
  border: 1px solid var(--border, #e0e0e0);
}
.ws-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border, #e0e0e0);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.ws-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #66bb6a);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ws-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
}
.ws-stat { font-weight: 600; color: var(--text1, #333); }
.ws-stat-dim { color: var(--text2, #888); font-weight: 400; }
.ws-stat-pct { color: var(--primary, #6366f1); font-weight: 700; }
.ws-stat-current { color: var(--text2, #888); font-size: 0.875rem; margin-left: 4px; }

/* === Strike #39: Audit-Guided Preset Recommendations === */
.audit-preset-recs {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border: 1px solid #ffe0b2;
  border-radius: 8px;
}
.audit-preset-recs h4 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #e65100;
}
.audit-recs-desc {
  font-size: 0.875rem;
  color: #795548;
  margin: 0 0 8px;
}
.audit-recs-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-rec-btn {
  background: #fff;
  border: 1px solid #ffcc80;
  color: #e65100;
  font-size: 0.875rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.preset-rec-btn:hover {
  background: #fff3e0;
  border-color: #ff9800;
}
.preset-rec-reason {
  font-size: 0.875rem;
  color: #9e9e9e;
  margin-left: 4px;
}

/* === Strike #39: Preset Category Collapsible Groups === */
.preset-group-details {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}
.preset-group-details[open] {
  border-color: var(--primary, #6366f1);
}
.preset-group-summary {
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text1, #333);
  background: var(--bg2, #f8f9fa);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.preset-group-summary::-webkit-details-marker { display: none; }
.preset-group-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s;
  font-size: 0.875rem;
  color: var(--text2, #888);
}
.preset-group-details[open] > .preset-group-summary::before {
  transform: rotate(90deg);
}
.preset-group-summary:hover {
  background: var(--bg-hover, #eef);
}
.preset-group-count {
  font-size: 0.875rem;
  color: var(--text2, #888);
  font-weight: 400;
  margin-left: auto;
}
.preset-group-body {
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.preset-count-badge {
  font-size: 0.875rem;
  color: var(--text2, #888);
  font-weight: 400;
  margin-left: 6px;
}

/* === Strike #40: Auto-Advance Panel === */
.auto-advance-panel {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #66bb6a;
  border-radius: 10px;
  padding: 12px 16px;
  animation: autoAdvanceSlideIn 0.3s ease-out;
}
@keyframes autoAdvanceSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.auto-advance-header {
  font-weight: 700;
  font-size: 0.95rem;
  color: #2e7d32;
  margin-bottom: 8px;
}
.auto-advance-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.auto-advance-btn {
  font-size: 0.875rem !important;
}
.auto-advance-hint {
  font-size: 0.875rem;
  color: var(--text2, #888);
  margin-left: 4px;
}

/* === Strike #40: Revision Cycle Counter === */
#revision-cycle-display {
  padding: 6px 12px;
  background: #fff3e0;
  border-left: 3px solid #ff9800;
  border-radius: 6px;
}
.revision-cycle-badge {
  display: inline-block;
  background: #ff9800;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 2px 10px;
  border-radius: 10px;
}
.revision-cycle-hint {
  display: inline-block;
  font-size: 0.875rem;
  color: #e65100;
  margin-left: 8px;
  font-weight: 600;
}

/* === Strike #40: One-Click Fix Button === */
.fix-actions-oneclick {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}
.fix-actions-oneclick .btn-auto {
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
}

@media (max-width: 900px) {
  .auto-advance-actions { flex-direction: column; }
}

/* === Strike #41: Chapter Completion Panel === */
.chapter-completion-panel {
  background: linear-gradient(135deg, #1b3a2a 0%, #1a2630 100%);
  border: 1.5px solid var(--green, #4caf50);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 12px;
  animation: chCompleteSlideIn 0.4s ease-out;
}
@keyframes chCompleteSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ch-complete-header {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green, #4caf50);
  margin-bottom: 4px;
}
.ch-complete-title {
  font-size: 0.875rem;
  color: var(--text2, #aaa);
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-complete-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ch-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.ch-stat-label {
  font-size: 0.875rem;
  color: var(--text2, #888);
  margin-bottom: 2px;
}
.ch-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #eee);
}
.ch-complete-issues {
  font-size: 0.875rem;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ch-issues-label {
  color: var(--text2, #aaa);
  font-weight: 600;
  margin-right: 4px;
}
.ch-issue-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}
.ch-issue-critical { background: #f44336; color: #fff; }
.ch-issue-high { background: #ff9800; color: #fff; }
.ch-issue-info { background: var(--bg2, #333); color: var(--text2, #aaa); }
.ch-complete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ch-complete-btn {
  position: relative;
}
.ch-complete-hint {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-left: 4px;
}

@media (max-width: 900px) {
  .ch-complete-stats { gap: 10px; }
  .ch-complete-actions { flex-direction: column; }
}

/* ====================================================================
   Strike #42: Chapter Kickoff Panel
   ==================================================================== */
.chapter-kickoff-panel {
  border: 2px solid var(--blue, #2196f3);
  border-radius: 10px;
  background: linear-gradient(135deg, #1a237e11 0%, #1565c011 100%);
  padding: 16px 20px;
  margin: 10px 0;
  animation: kickoffSlideIn 0.35s ease-out;
}
@keyframes kickoffSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.kickoff-header {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue, #2196f3);
  margin-bottom: 2px;
}
.kickoff-title {
  font-size: 0.9rem;
  color: var(--text2, #888);
  margin-bottom: 12px;
}
.kickoff-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.kickoff-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  padding: 3px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.kickoff-check-ok {
  border-color: var(--green, #4caf50);
  color: var(--green, #4caf50);
}
.kickoff-check-ok .kickoff-check-icon {
  color: var(--green, #4caf50);
  font-weight: 700;
}
.kickoff-check-pending {
  border-color: var(--text3, #666);
  color: var(--text2, #888);
}
.kickoff-check-pending .kickoff-check-icon {
  color: var(--text3, #666);
}
.kickoff-check-label {
  font-weight: 600;
}
.kickoff-check-detail {
  opacity: 0.7;
  font-size: 0.875rem;
}
.kickoff-prev-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 3px solid var(--text3, #666);
  font-size: 0.875rem;
}
.kickoff-prev-label {
  font-weight: 600;
  color: var(--text2, #888);
}
.kickoff-prev-summary {
  color: var(--text3, #666);
  font-size: 0.875rem;
  line-height: 1.7;
}
.kickoff-hint {
  font-size: 0.875rem;
  color: var(--text2, #888);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(33,150,243,0.06);
  border-radius: 6px;
}
.kickoff-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.kickoff-btn {
  position: relative;
}

@media (max-width: 900px) {
  .kickoff-checklist { flex-direction: column; gap: 4px; }
  .kickoff-actions { flex-direction: column; }
}

/* === Strike #43: Scene Progress Grid === */
.scene-progress-grid {
  background: var(--bg2, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  margin: 8px 0;
  overflow: hidden;
}
.spg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg3, #252535);
  border-bottom: 1px solid var(--border, #333);
}
.spg-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text1, #e0e0e0);
  white-space: nowrap;
}
.spg-summary {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}
.spg-badge {
  font-size: 0.875rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.spg-badge-done {
  background: var(--green, #2ecc71);
  color: #000;
}
.spg-badge-words {
  background: var(--bg4, #333);
  color: var(--text2, #aaa);
}
.spg-badge-pct {
  background: transparent;
  color: var(--text2, #aaa);
  font-weight: 500;
}
.spg-toggle {
  font-size: 0.875rem;
  padding: 2px 6px;
  min-width: 24px;
}
.spg-body {
  max-height: 200px;
  overflow-y: auto;
}
.spg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border, #222);
  font-size: 0.875rem;
}
.spg-row:last-child {
  border-bottom: none;
}
.spg-row:hover {
  background: var(--bg3, #252535);
}
.spg-row-active {
  background: rgba(52, 152, 219, 0.15);
  border-left: 3px solid var(--primary, #3498db);
  padding-left: 9px;
}
/* Strike #54: Scene Reorder buttons */
.spg-reorder {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.spg-row:hover .spg-reorder { opacity: 1; }
.btn-reorder {
  background: none;
  border: none;
  color: var(--text2, #888);
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 1px 3px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.btn-reorder:hover:not(:disabled) {
  color: var(--primary, #3498db);
  background: rgba(52, 152, 219, 0.15);
}
.btn-reorder-disabled, .btn-reorder:disabled {
  color: var(--text2, #444);
  cursor: default;
  opacity: 0.3;
}
.spg-num {
  color: var(--text2, #888);
  font-size: 0.875rem;
  min-width: 18px;
  text-align: right;
}
.spg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.spg-dot-finalized { background: var(--green, #2ecc71); }
.spg-dot-review { background: var(--yellow, #f1c40f); }
.spg-dot-candidates { background: var(--primary, #3498db); }
.spg-dot-brief { background: #8e44ad; }
.spg-dot-empty { background: var(--text2, #555); }
.spg-scene-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text1, #e0e0e0);
}
.spg-words {
  font-size: 0.875rem;
  color: var(--text2, #888);
  min-width: 48px;
  text-align: right;
}
.spg-words-empty {
  color: var(--text2, #555);
}
.spg-score {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}
.spg-score-high { color: var(--green, #2ecc71); }
.spg-score-mid { color: var(--yellow, #f1c40f); }
.spg-score-low { color: var(--red, #e74c3c); }
.spg-hard-fail {
  font-size: 0.875rem;
  background: var(--red, #e74c3c);
  color: #fff;
  padding: 0 3px;
  border-radius: 3px;
  margin-left: 2px;
}
.spg-no-score {
  font-size: 0.875rem;
  color: var(--text2, #555);
  min-width: 32px;
  text-align: right;
}

@media (max-width: 900px) {
  .spg-body { max-height: 150px; }
  .spg-scene-title { max-width: 120px; }
  .spg-words { display: none; }
}

/* ──────────────────────────────────────────
   Strike #44: Work Health Dashboard
   ────────────────────────────────────────── */
.work-health-dashboard {
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.whd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(66,135,245,0.12), rgba(120,80,220,0.08));
  border-bottom: 1px solid var(--border, #333);
}
.whd-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text1, #eee);
}
.whd-toggle {
  background: none;
  border: none;
  color: var(--text2, #999);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 2px 6px;
}
.whd-body {
  padding: 10px 12px;
}
.whd-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.whd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.whd-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text1, #eee);
}
.whd-stat-label {
  font-size: 0.875rem;
  color: var(--text2, #888);
  margin-top: 2px;
}
.whd-score-high { color: var(--green, #4caf50); }
.whd-score-mid { color: var(--yellow, #ffc107); }
.whd-score-low { color: var(--red, #f44336); }

/* Heatmap */
.whd-heatmap-wrap {
  margin-bottom: 8px;
}
.whd-heatmap-label {
  font-size: 0.875rem;
  color: var(--text2, #888);
  display: block;
  margin-bottom: 4px;
}
.whd-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.whd-heat-cell {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
  color: #fff;
}
.whd-heat-cell:hover {
  transform: scale(1.3);
  z-index: 1;
}
.whd-heat-high { background: var(--green, #4caf50); }
.whd-heat-mid { background: var(--yellow, #ffc107); color: #000; }
.whd-heat-low { background: var(--red, #f44336); }
.whd-heat-empty { background: var(--bg3, #2a2a3e); color: var(--text2, #666); }
.whd-heat-done { background: rgba(66,135,245,0.3); color: var(--text2, #aaa); }

.whd-heatmap-legend {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--text2, #888);
}
.whd-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
}

/* Alerts */
.whd-alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.whd-alert {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}
.whd-alert:hover {
  filter: brightness(1.2);
}
.whd-alert-critical {
  background: rgba(244,67,54,0.15);
  color: var(--red, #f44336);
  border-left: 3px solid var(--red, #f44336);
}
.whd-alert-warn {
  background: rgba(255,193,7,0.12);
  color: var(--yellow, #ffc107);
  border-left: 3px solid var(--yellow, #ffc107);
}
.whd-alert-info {
  background: rgba(66,135,245,0.1);
  color: var(--blue, #4287f5);
  border-left: 3px solid var(--blue, #4287f5);
}

@media (max-width: 900px) {
  .whd-stats { gap: 8px; }
  .whd-stat { min-width: 50px; }
  .whd-stat-value { font-size: 0.9rem; }
  .whd-heat-cell { width: 18px; height: 18px; font-size: 0.875rem; }
}

/* ── Strike #45: Smart Action Queue ── */
.action-queue-panel {
  background: var(--bg2, #1a1d27);
  border: 1px solid var(--border, #2a2d37);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.aq-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(66, 135, 245, 0.06);
  border-bottom: 1px solid var(--border, #2a2d37);
  gap: 8px;
}
.aq-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue, #4287f5);
}
.aq-summary {
  display: flex;
  gap: 6px;
  flex: 1;
}
.aq-toggle {
  background: none;
  border: none;
  color: var(--text2, #888);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 2px 6px;
}
.aq-toggle:hover { color: var(--text, #eee); }
.aq-badge {
  font-size: 0.875rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.aq-badge-urgent { background: rgba(239,68,68,0.15); color: var(--red, #ef4444); }
.aq-badge-quality { background: rgba(245,158,11,0.15); color: var(--yellow, #f59e0b); }
.aq-badge-progress { background: rgba(66,135,245,0.15); color: var(--blue, #4287f5); }
.aq-badge-setup { background: rgba(139,92,246,0.15); color: var(--purple, #8b5cf6); }
.aq-body {
  max-height: 320px;
  overflow-y: auto;
}
.aq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #2a2d37);
  transition: background 0.15s;
}
.aq-item:last-child { border-bottom: none; }
.aq-item:hover { background: rgba(255,255,255,0.04); }
.aq-item-urgent { border-left: 3px solid var(--red, #ef4444); }
.aq-item-quality { border-left: 3px solid var(--yellow, #f59e0b); }
.aq-item-progress { border-left: 3px solid var(--blue, #4287f5); }
.aq-item-setup { border-left: 3px solid var(--purple, #8b5cf6); }
.aq-item-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
.aq-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aq-item-label { font-size: 0.875rem; font-weight: 600; color: var(--text, #eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-item-detail { font-size: 0.875rem; color: var(--text2, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-item-btn {
  flex-shrink: 0;
  background: rgba(66,135,245,0.12);
  color: var(--blue, #4287f5);
  border: 1px solid rgba(66,135,245,0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.aq-item-btn:hover {
  background: rgba(66,135,245,0.25);
  border-color: var(--blue, #4287f5);
}
.aq-item-urgent .aq-item-btn {
  background: rgba(239,68,68,0.12);
  color: var(--red, #ef4444);
  border-color: rgba(239,68,68,0.25);
}
.aq-item-urgent .aq-item-btn:hover {
  background: rgba(239,68,68,0.25);
  border-color: var(--red, #ef4444);
}
.aq-item-quality .aq-item-btn {
  background: rgba(245,158,11,0.12);
  color: var(--yellow, #f59e0b);
  border-color: rgba(245,158,11,0.25);
}
.aq-item-quality .aq-item-btn:hover {
  background: rgba(245,158,11,0.25);
  border-color: var(--yellow, #f59e0b);
}
.aq-all-done {
  padding: 16px;
  text-align: center;
  color: var(--green, #22c55e);
  font-weight: 600;
  font-size: 0.9rem;
}
/* Strike #46: Action Queue Direct Execution feedback */
.aq-item-executing {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}
.aq-item-executing::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 6px,
    rgba(66,135,245,0.08) 6px, rgba(66,135,245,0.08) 12px
  );
  border-radius: 8px;
  animation: aqExecPulse 1.2s ease-in-out infinite;
}
@keyframes aqExecPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.aq-item-btn-exec {
  transition: background 0.15s, transform 0.1s;
}
.aq-item-btn-exec:active {
  transform: scale(0.95);
}

/* Strike #47: Action Completion Feedback Loop */
.aq-completion-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 8px 6px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: opacity 0.3s, transform 0.3s;
  animation: aqBannerSlideIn 0.35s ease-out;
}
.aq-completion-icon {
  font-size: 1.1rem;
  color: var(--green, #22c55e);
  font-weight: 700;
  flex-shrink: 0;
}
.aq-completion-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aq-completion-text strong {
  color: var(--green, #22c55e);
  font-size: 0.875rem;
}
.aq-completion-next {
  color: var(--text2, #94a3b8);
  font-size: 0.875rem;
}
@keyframes aqBannerSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aq-item-new {
  animation: aqItemNew 0.5s ease-out;
  box-shadow: 0 0 0 2px rgba(66,135,245,0.4);
}
@keyframes aqItemNew {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.aq-item-upgraded {
  animation: aqItemUpgrade 0.6s ease-out;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.4);
}
@keyframes aqItemUpgrade {
  0%   { background: rgba(245,158,11,0.15); }
  100% { background: transparent; }
}

@media (max-width: 900px) {
  .aq-item-detail { display: none; }
  .aq-item-btn { padding: 3px 8px; font-size: 0.875rem; }
  .aq-completion-banner { margin: 0 4px 4px; padding: 8px 10px; }
}

/* === Strike #48: Keyboard Shortcut Help Overlay === */
.shortcut-help-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: skOverlayFadeIn 0.15s ease-out;
}
@keyframes skOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

.shortcut-help-panel {
  background: var(--surface, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 12px; width: 520px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: skPanelSlideIn 0.2s ease-out;
}
@keyframes skPanelSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.shortcut-help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border, #333);
}
.shortcut-help-header h3 { margin: 0; font-size: 1.1rem; color: var(--text, #eee); }

.shortcut-help-body {
  padding: 12px 20px 16px; overflow-y: auto; flex: 1;
}

.shortcut-help-footer {
  padding: 10px 20px; border-top: 1px solid var(--border, #333);
  text-align: center; font-size: 0.875rem; color: var(--text2, #888);
}

.sk-group { margin-bottom: 14px; }
.sk-group-label {
  font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
  color: var(--accent, #7c6fff); letter-spacing: 0.05em;
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(124,111,255,0.2);
}

.sk-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 0.875rem;
}
.sk-keys { display: flex; align-items: center; gap: 4px; }
.sk-label { color: var(--text2, #aaa); }

.sk-kbd {
  display: inline-block; padding: 2px 7px; font-size: 0.875rem;
  font-family: 'Orbitron', monospace; font-weight: 500;
  background: var(--bg, #12121a); border: 1px solid var(--border, #444);
  border-radius: 4px; color: var(--text, #ddd); min-width: 22px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Key hint badges on action buttons */
.key-hint {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  font-size: 0.875rem; font-family: 'Orbitron', monospace; font-weight: 500;
  background: rgba(124,111,255,0.15); border: 1px solid rgba(124,111,255,0.3);
  border-radius: 3px; color: var(--accent, #7c6fff); vertical-align: middle;
  opacity: 0.7; pointer-events: none;
}

@media (max-width: 900px) {
  .shortcut-help-panel { width: 95vw; }
  .key-hint { display: none; }
}

/* === Export Panel (Strike #51) === */
.export-panel { background: var(--bg2, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.export-panel h3 { margin: 0 0 4px; font-size: 1.1rem; }
.export-desc { color: var(--text2, #888); font-size: 0.875rem; margin: 0 0 12px; }
.export-stats { margin-bottom: 12px; }
.export-stat-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 6px; }
.export-stat { font-size: 0.875rem; color: var(--text1, #ccc); }
.export-pct-good { color: #4caf50; }
.export-pct-mid { color: #ff9800; }
.export-pct-low { color: #f44336; }
.export-platform-hints { font-size: 0.875rem; }
.export-hint { padding: 2px 8px; border-radius: 4px; background: var(--bg3, #2a2a3a); color: var(--text2, #aaa); cursor: help; }
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.export-chapters-detail summary { cursor: pointer; font-size: 0.9rem; color: var(--text2, #aaa); margin-bottom: 8px; }
.export-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.export-ch-card { background: var(--bg3, #2a2a3a); border-radius: 6px; padding: 10px; border-left: 3px solid var(--border, #444); }
.export-ch-card.export-ch-done { border-left-color: #4caf50; }
.export-ch-card.export-ch-wip { border-left-color: #ff9800; }
.export-ch-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.export-ch-num { font-weight: bold; color: var(--accent, #7c6fff); min-width: 24px; }
.export-ch-title { font-size: 0.875rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-ch-badge { font-size: 0.875rem; padding: 1px 6px; border-radius: 3px; }
.export-ch-done .export-ch-badge { background: rgba(76,175,80,0.2); color: #4caf50; }
.export-ch-wip .export-ch-badge { background: rgba(255,152,0,0.2); color: #ff9800; }
.export-ch-meta { font-size: 0.875rem; color: var(--text2, #888); margin-bottom: 4px; }
.export-ch-actions { display: flex; gap: 4px; }
.btn-xs { padding: 2px 8px; font-size: 0.875rem; }

/* === Work Search Panel (Ctrl+K) === */
.ws-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: wsOverlayIn 0.12s ease-out;
}
@keyframes wsOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.ws-panel {
  background: var(--surface, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 12px; width: 640px; max-width: 94vw; max-height: 70vh;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  animation: wsPanelIn 0.15s ease-out;
}
@keyframes wsPanelIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ws-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border, #333);
}
.ws-input-row {
  display: flex; align-items: center; gap: 8px;
}
.ws-icon { font-size: 1.2rem; opacity: 0.6; }
.ws-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text, #eee); font-size: 1rem; padding: 4px 0;
  font-family: inherit;
}
.ws-input::placeholder { color: var(--text2, #666); }
.ws-scope {
  background: var(--bg2, #252535); color: var(--text, #ccc);
  border: 1px solid var(--border, #444); border-radius: 4px;
  padding: 3px 6px; font-size: 0.875rem; cursor: pointer;
}
.ws-results {
  flex: 1; overflow-y: auto; padding: 8px 0; min-height: 100px; max-height: 50vh;
}
.ws-empty {
  text-align: center; color: var(--text2, #666); padding: 32px 16px; font-size: 0.9rem;
}
.ws-result-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px;
  cursor: pointer; transition: background 0.1s;
}
.ws-result-item:hover { background: rgba(124,111,255,0.1); }
.ws-result-badge {
  font-size: 0.875rem; font-weight: 600; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.ws-badge-scene { background: rgba(100,181,246,0.2); color: #64b5f6; }
.ws-badge-chapter { background: rgba(129,199,132,0.2); color: #81c784; }
.ws-badge-character { background: rgba(255,183,77,0.2); color: #ffb74d; }
.ws-badge-fact { background: rgba(186,104,200,0.2); color: #ba68c8; }
.ws-result-body { flex: 1; min-width: 0; }
.ws-result-title {
  font-size: 0.875rem; color: var(--text, #eee); margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-result-excerpt {
  font-size: 0.875rem; color: var(--text2, #999); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-result-meta {
  font-size: 0.875rem; color: var(--text2, #666); margin-top: 2px;
}
.ws-highlight { color: #ffeb3b; font-weight: 600; }
.ws-footer {
  padding: 8px 16px; border-top: 1px solid var(--border, #333);
  text-align: center; font-size: 0.875rem; color: var(--text2, #666);
}
.ws-loading { text-align: center; padding: 24px; color: var(--text2, #888); }
.ws-count { font-size: 0.875rem; color: var(--text2, #666); padding: 4px 16px; }

/* =============================================================================
   通し読みプレビュー (Read-through Preview) — Strike #56
   ============================================================================= */
.rt-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: rtOverlayIn 0.15s ease-out;
}
@keyframes rtOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.rt-panel {
  background: var(--bg, #0e0e16); border: 1px solid var(--border, #333);
  border-radius: 12px; width: 820px; max-width: 96vw; height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: rtPanelIn 0.18s ease-out;
}
@keyframes rtPanelIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.rt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.rt-header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.rt-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rt-title { font-size: 1rem; font-weight: 600; color: var(--text, #eee); white-space: nowrap; }
.rt-stats-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.rt-stat {
  font-size: 0.875rem; color: var(--text2, #999);
  padding: 2px 8px; background: rgba(255,255,255,0.05); border-radius: 4px;
}
.rt-jump-input {
  width: 60px; padding: 4px 8px; border: 1px solid var(--border, #444);
  border-radius: 6px; background: var(--surface, #1e1e2e); color: var(--text, #eee);
  font-size: 0.875rem; text-align: center;
}
.rt-jump-input:focus { border-color: var(--accent, #6c5ce7); outline: none; }

.rt-body {
  flex: 1; overflow-y: auto; padding: 32px 48px;
  scroll-behavior: smooth;
  line-height: 1.9; font-size: 1rem; color: var(--text, #ddd);
}
.rt-body::-webkit-scrollbar { width: 6px; }
.rt-body::-webkit-scrollbar-thumb { background: var(--border, #444); border-radius: 3px; }

.rt-footer {
  padding: 8px 20px; border-top: 1px solid var(--border, #333);
  text-align: center; font-size: 0.875rem; color: var(--text2, #666); flex-shrink: 0;
}

/* アーク（章）ヘッダー */
.rt-arc-header {
  font-size: 1.2rem; font-weight: 700; color: var(--accent, #6c5ce7);
  padding: 24px 0 8px; margin-top: 32px; border-bottom: 2px solid var(--accent, #6c5ce7);
  letter-spacing: 0.05em;
}
.rt-chapter:first-child .rt-arc-header,
.rt-body > .rt-arc-header:first-child { margin-top: 0; }

/* 話ヘッダー */
.rt-chapter { margin-bottom: 40px; }
.rt-chapter-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rt-chapter-header.rt-ch-done { border-bottom-color: rgba(46,213,115,0.3); }
.rt-chapter-header.rt-ch-wip { border-bottom-color: rgba(255,165,0,0.3); }
.rt-ch-num {
  font-size: 0.875rem; font-weight: 600; color: var(--accent, #6c5ce7);
  background: rgba(108,92,231,0.12); padding: 2px 8px; border-radius: 4px;
  white-space: nowrap;
}
.rt-ch-title { font-size: 1.05rem; font-weight: 600; color: var(--text, #eee); flex: 1; min-width: 0; }
.rt-ch-chars { font-size: 0.875rem; color: var(--text2, #888); white-space: nowrap; }
.rt-jump-btn { opacity: 0.5; transition: opacity 0.15s; }
.rt-jump-btn:hover { opacity: 1; }

/* テキスト本体 */
.rt-chapter-text { padding: 0 4px; }
.rt-paragraph {
  margin: 0 0 1em 0; text-indent: 1em;
  line-height: 1.9; letter-spacing: 0.02em;
}
.rt-no-text {
  padding: 16px; color: var(--text2, #666); font-style: italic;
  text-align: center; background: rgba(255,255,255,0.02); border-radius: 8px;
}

.rt-loading { text-align: center; padding: 48px; color: var(--text2, #888); font-size: 1.1rem; }
.rt-empty { text-align: center; padding: 48px; color: var(--text2, #666); }

/* レスポンシブ */
@media (max-width: 900px) {
  .rt-panel { width: 100vw; height: 100vh; border-radius: 0; }
  .rt-body { padding: 20px 16px; }
  .rt-header { flex-direction: column; gap: 8px; }
  .rt-stats-bar { justify-content: center; }
}

/* === Publishing Readiness Dashboard（投稿準備チェックリスト） === */
.readiness-panel { background: var(--card-bg, #1a1d23); border: 1px solid var(--border, #333); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.readiness-desc { color: var(--text2, #999); font-size: 0.875rem; margin-bottom: 8px; }

/* スコアリング概要 */
.rd-overview { display: flex; gap: 24px; align-items: flex-start; padding: 16px 0; flex-wrap: wrap; }
.rd-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--border, #444); flex-shrink: 0; }
.rd-score-ring.rd-score-good { border-color: var(--accent-green, #4caf50); }
.rd-score-ring.rd-score-mid { border-color: var(--accent-yellow, #ff9800); }
.rd-score-ring.rd-score-low { border-color: var(--accent-red, #f44336); }
.rd-score-num { font-size: 2rem; font-weight: 700; line-height: 1.7; }
.rd-score-label { font-size: 0.875rem; color: var(--text2, #999); }

.rd-score-breakdown { flex: 1; min-width: 200px; }
.rd-score-breakdown h4 { margin: 0 0 8px; font-size: 0.875rem; color: var(--text2, #aaa); }
.rd-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rd-bar-label { width: 100px; font-size: 0.875rem; text-align: right; color: var(--text2, #ccc); flex-shrink: 0; }
.rd-bar-track { flex: 1; height: 8px; background: var(--bg2, #2a2d35); border-radius: 4px; overflow: hidden; }
.rd-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.rd-bar-fill.rd-bar-good { background: var(--accent-green, #4caf50); }
.rd-bar-fill.rd-bar-mid { background: var(--accent-yellow, #ff9800); }
.rd-bar-fill.rd-bar-low { background: var(--accent-red, #f44336); }
.rd-bar-value { width: 40px; font-size: 0.875rem; color: var(--text2, #999); text-align: right; }

.rd-summary-stats { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.rd-stat { display: flex; flex-direction: column; align-items: center; }
.rd-stat-num { font-size: 1.2rem; font-weight: 700; }
.rd-stat-label { font-size: 0.875rem; color: var(--text2, #999); }

/* ブロッカー */
.rd-blockers { margin-top: 12px; }
.rd-blockers h4 { margin: 0 0 8px; font-size: 0.875rem; color: var(--accent-red, #f44336); }
.rd-blocker { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 4px; border-radius: 6px; background: rgba(244,67,54,0.08); border: 1px solid rgba(244,67,54,0.2); font-size: 0.875rem; }
.rd-blocker-icon { font-size: 1rem; }
.rd-blocker-chapters { color: var(--text2, #999); font-size: 0.875rem; }

/* プラットフォーム適合度 */
.rd-platform-fit { margin-top: 16px; }
.rd-platform-fit h4 { margin: 0 0 8px; font-size: 0.875rem; color: var(--text2, #aaa); }
.rd-platform-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-platform-name { width: 70px; font-size: 0.875rem; text-align: right; flex-shrink: 0; }
.rd-platform-bar { flex: 1; height: 10px; background: var(--bg2, #2a2d35); border-radius: 5px; overflow: hidden; }
.rd-platform-fill { display: block; height: 100%; background: var(--accent-green, #4caf50); border-radius: 5px; transition: width 0.4s ease; }
.rd-platform-count { width: 110px; font-size: 0.875rem; color: var(--text2, #999); }

/* 話別チェックリスト */
.rd-chapter-details { margin-top: 16px; }
.rd-chapter-details summary { cursor: pointer; font-size: 0.9rem; padding: 8px 0; color: var(--accent, #7c4dff); }
.rd-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding-top: 8px; }
.rd-arc-header { grid-column: 1 / -1; font-size: 0.875rem; font-weight: 600; color: var(--accent, #7c4dff); padding: 8px 0 4px; border-bottom: 1px solid var(--border, #333); }

.rd-ch-card { border: 1px solid var(--border, #333); border-radius: 6px; padding: 8px 10px; background: var(--bg2, #1e2128); }
.rd-ch-card.rd-ch-ready { border-left: 3px solid var(--accent-green, #4caf50); }
.rd-ch-card.rd-ch-partial { border-left: 3px solid var(--accent-yellow, #ff9800); }
.rd-ch-card.rd-ch-empty { border-left: 3px solid var(--accent-red, #f44336); }
.rd-ch-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rd-ch-num { background: var(--bg3, #333); border-radius: 3px; padding: 1px 6px; font-size: 0.875rem; font-weight: 700; }
.rd-ch-title { flex: 1; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-ch-chars { font-size: 0.875rem; color: var(--text2, #999); }
.rd-ch-score { font-size: 0.875rem; padding: 1px 4px; border-radius: 3px; background: rgba(124,77,255,0.15); color: var(--accent, #7c4dff); }

.rd-ch-checks { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-check { font-size: 0.875rem; padding: 1px 5px; border-radius: 3px; }
.rd-check.rd-check-ok { background: rgba(76,175,80,0.12); color: var(--accent-green, #4caf50); }
.rd-check.rd-check-ng { background: rgba(244,67,54,0.1); color: var(--accent-red, #f44336); }

/* レスポンシブ */
@media (max-width: 900px) {
  .rd-overview { flex-direction: column; align-items: center; }
  .rd-summary-stats { flex-direction: row; }
  .rd-chapter-grid { grid-template-columns: 1fr; }
  .rd-bar-label { width: 80px; }
}

/* === Batch Finalize (Strike #58) === */
.bf-action-panel { background: var(--bg-darker, #1a1a2e); border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.bf-action-panel h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary, #e0e0e0); }
.bf-action-desc { font-size: 14px; color: var(--text-secondary, #999); margin: 0 0 12px; }
.bf-result { margin-top: 12px; }
.bf-result-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bf-count { font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 4px; }
.bf-count-ok { background: rgba(76, 175, 80, 0.2); color: #81c784; }
.bf-count-skip { background: rgba(255, 193, 7, 0.15); color: #ffd54f; }
.bf-count-fail { background: rgba(244, 67, 54, 0.2); color: #ef9a9a; }
.bf-skip-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.bf-skip-tag { font-size: 14px; padding: 2px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary, #999); }
.bf-impact-note { font-size: 14px; color: var(--text-secondary, #999); margin-top: 4px; }

/* === Writing Stats Panel (Strike #59) === */
.ws-panel { background: var(--bg-darker, #1a1a2e); border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.ws-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ws-header h3 { margin: 0; font-size: 15px; color: var(--text-primary, #e0e0e0); }
.ws-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.ws-metric { text-align: center; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px 6px; }
.ws-metric-num { display: block; font-size: 20px; font-weight: 700; color: var(--text-primary, #e0e0e0); }
.ws-metric-label { display: block; font-size: 14px; color: var(--text-secondary, #999); margin-top: 2px; }
.ws-progress-section { margin-bottom: 14px; }
.ws-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-bar-label { width: 60px; font-size: 14px; color: var(--text-secondary, #999); text-align: right; }
.ws-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
.ws-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }
.ws-bar-fill.ws-good { background: linear-gradient(90deg, #4caf50, #66bb6a); }
.ws-bar-fill.ws-mid { background: linear-gradient(90deg, #ffc107, #ffca28); }
.ws-bar-fill.ws-low { background: linear-gradient(90deg, #f44336, #ef5350); }
.ws-bar-value { width: 36px; font-size: 14px; font-weight: 600; color: var(--text-primary, #e0e0e0); }
.ws-quality { margin-bottom: 14px; }
.ws-quality h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-secondary, #999); }
.ws-quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ws-q-item { text-align: center; padding: 8px 4px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.ws-q-num { display: block; font-size: 18px; font-weight: 700; color: var(--text-primary, #e0e0e0); }
.ws-q-num.ws-good { color: #81c784; }
.ws-q-num.ws-mid { color: #ffd54f; }
.ws-q-num.ws-low { color: #ef9a9a; }
.ws-q-label { display: block; font-size: 14px; color: var(--text-secondary, #999); margin-top: 2px; }
.ws-distribution { margin-bottom: 14px; }
.ws-distribution h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-secondary, #999); }
.ws-dist-bars { display: flex; flex-direction: column; gap: 4px; }
.ws-dist-row { display: flex; align-items: center; gap: 6px; }
.ws-dist-label { width: 36px; font-size: 14px; color: var(--text-secondary, #999); text-align: right; }
.ws-dist-track { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.ws-dist-fill { height: 100%; border-radius: 4px; background: rgba(100, 181, 246, 0.6); }
.ws-dist-fill.ws-dist-ok { background: rgba(76, 175, 80, 0.6); }
.ws-dist-fill.ws-dist-warn { background: rgba(255, 152, 0, 0.6); }
.ws-dist-val { width: 24px; font-size: 14px; color: var(--text-secondary, #999); }
.ws-arcs { margin-bottom: 14px; }
.ws-arcs h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-secondary, #999); }
.ws-arc-list { display: flex; flex-direction: column; gap: 6px; }
.ws-arc-row { display: flex; align-items: center; gap: 8px; }
.ws-arc-title { width: 140px; font-size: 14px; color: var(--text-primary, #e0e0e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-arc-eps { font-size: 14px; color: var(--text-secondary, #999); margin-left: 4px; }
.ws-arc-bar { flex: 1; }
.ws-arc-pct { width: 36px; font-size: 14px; font-weight: 600; color: var(--text-primary, #e0e0e0); }
.ws-arc-detail { font-size: 14px; color: var(--text-secondary, #999); white-space: nowrap; }
.ws-velocity { display: flex; gap: 16px; font-size: 14px; color: var(--text-secondary, #999); padding-top: 8px; border-top: 1px solid var(--border-color, #333); }
.ws-vel-item strong { color: var(--text-primary, #e0e0e0); }
@media (max-width: 900px) {
  .ws-metrics { grid-template-columns: repeat(2, 1fr); }
  .ws-quality-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-arc-title { width: 80px; }
  .ws-arc-detail { display: none; }
}

/* === Strike #79: Terminology Mapping Panel === */
.tm-panel { background: var(--card-bg, #1a1d23); border: 1px solid var(--border, #333); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.tm-desc { color: var(--text2, #999); font-size: 0.875rem; margin-bottom: 12px; }
.tm-structure-summary { margin-bottom: 16px; }
.tm-structure-summary h4 { font-size: 0.875rem; color: var(--text2, #aaa); margin-bottom: 8px; }
.tm-layer-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-secondary, #252535); border: 1px solid var(--border, #444); border-radius: 20px; font-size: 0.875rem; }
.tm-chip-icon { font-size: 1rem; }
.tm-chip-count { color: var(--text2, #999); font-size: 0.875rem; }
.tm-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tm-table th, .tm-table td { padding: 10px 12px; border: 1px solid var(--border, #333); text-align: left; vertical-align: top; }
.tm-th-app { background: var(--bg-secondary, #252535); color: var(--text-primary, #e0e0e0); font-weight: 600; min-width: 120px; }
.tm-th-platform { background: var(--bg-secondary, #252535); color: var(--accent, #7c6fff); font-weight: 600; min-width: 180px; }
.tm-cell-app { font-weight: 500; white-space: nowrap; }
.tm-cell-icon { margin-right: 6px; }
.tm-platform-label { display: block; font-weight: 500; color: var(--text-primary, #e0e0e0); }
.tm-platform-note { display: block; font-size: 0.875rem; color: var(--text2, #888); margin-top: 2px; }
.tm-fit-section { margin-bottom: 16px; }
.tm-fit-section h4 { font-size: 0.875rem; color: var(--text2, #aaa); margin-bottom: 8px; }
.tm-fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tm-fit-card { padding: 12px; border-radius: 6px; border: 1px solid var(--border, #444); background: var(--bg-secondary, #252535); }
.tm-fit-card.tm-fit-good { border-color: var(--accent-green, #4caf50); }
.tm-fit-card.tm-fit-mid { border-color: var(--accent-yellow, #ff9800); }
.tm-fit-card.tm-fit-low { border-color: var(--accent-red, #f44336); }
.tm-fit-header { font-weight: 600; margin-bottom: 6px; }
.tm-fit-bar { height: 6px; background: var(--bg-tertiary, #333); border-radius: 3px; margin-bottom: 4px; overflow: hidden; }
.tm-fit-fill { display: block; height: 100%; background: var(--accent, #7c6fff); border-radius: 3px; transition: width 0.3s ease; }
.tm-fit-card.tm-fit-good .tm-fit-fill { background: var(--accent-green, #4caf50); }
.tm-fit-card.tm-fit-mid .tm-fit-fill { background: var(--accent-yellow, #ff9800); }
.tm-fit-card.tm-fit-low .tm-fit-fill { background: var(--accent-red, #f44336); }
.tm-fit-stats { font-size: 0.875rem; font-weight: 500; }
.tm-fit-range { font-size: 0.875rem; color: var(--text2, #888); margin-bottom: 6px; }
.tm-preview-details { margin-top: 8px; }
.tm-preview-details summary { font-size: 0.875rem; cursor: pointer; color: var(--text2, #aaa); }
.tm-preview-tree { padding: 8px 0; }
.tm-tree-part { padding: 8px 0 4px; font-size: 0.9rem; border-bottom: 1px solid var(--border, #333); margin-bottom: 4px; }
.tm-tree-part.tm-tree-orphan { opacity: 0.65; }
.tm-tree-arc { padding: 6px 0; font-size: 0.875rem; }
.tm-tree-arc.tm-tree-nested-1 { padding-left: 20px; }
.tm-tree-chapter { padding: 3px 0 3px 24px; font-size: 0.875rem; color: var(--text2, #bbb); }
.tm-tree-chapter.tm-tree-nested-2 { padding-left: 40px; }
.tm-tree-indent { display: inline-block; width: 16px; }
.tm-tree-icon { margin-right: 4px; }
.tm-tree-meta { color: var(--text2, #888); font-size: 0.875rem; margin-left: 8px; }

/* === Strike #62: Publication Schedule Panel === */
.ps-panel { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ps-desc { font-size: 14px; color: var(--text-secondary, #999); margin: 0 0 10px; }
.ps-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ps-platform-select { background: var(--bg-secondary, #252535); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #444); border-radius: 4px; padding: 4px 8px; font-size: 14px; }
.ps-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ps-stat { text-align: center; padding: 8px 12px; border-radius: 6px; background: var(--bg-secondary, #252535); min-width: 80px; }
.ps-stat-num { font-size: 22px; font-weight: 700; line-height: 1.7; }
.ps-stat-label { font-size: 14px; color: var(--text-secondary, #999); }
.ps-stat-draft .ps-stat-num { color: #888; }
.ps-stat-finalized .ps-stat-num { color: #2196f3; }
.ps-stat-scheduled .ps-stat-num { color: #ffc107; }
.ps-stat-published .ps-stat-num { color: #4caf50; }
.ps-timeline { display: flex; flex-direction: column; gap: 4px; max-height: 500px; overflow-y: auto; }
.ps-row { display: grid; grid-template-columns: 60px 1fr 120px 120px 100px 90px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 4px; font-size: 14px; background: var(--bg-secondary, #252535); }
.ps-row:hover { background: var(--bg-hover, #2a2a3e); }
.ps-row-header { font-weight: 700; color: var(--text-secondary, #999); font-size: 14px; text-transform: uppercase; background: transparent; }
.ps-ep { font-weight: 600; color: var(--text-primary, #e0e0e0); }
.ps-title { color: var(--text-primary, #e0e0e0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-date { font-size: 14px; color: var(--text-secondary, #999); }
.ps-date input[type="date"] { background: var(--bg-secondary, #252535); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #444); border-radius: 3px; padding: 2px 4px; font-size: 14px; width: 100%; }
.ps-chars { font-size: 14px; color: var(--text-secondary, #999); text-align: right; }
.ps-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.ps-badge-draft { background: rgba(136,136,136,0.15); color: #888; }
.ps-badge-finalized { background: rgba(33,150,243,0.15); color: #2196f3; }
.ps-badge-scheduled { background: rgba(255,193,7,0.15); color: #ffc107; }
.ps-badge-published { background: rgba(76,175,80,0.15); color: #4caf50; }
.ps-badge-empty { background: rgba(136,136,136,0.1); color: #666; }
.ps-badge-partial { background: rgba(255,152,0,0.15); color: #ff9800; }
.ps-row-actions { display: flex; gap: 4px; }
.ps-row-actions button { font-size: 14px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border-color, #444); background: transparent; color: var(--text-secondary, #999); cursor: pointer; }
.ps-row-actions button:hover { background: var(--bg-hover, #2a2a3e); color: var(--text-primary, #e0e0e0); }
.ps-row-actions button.ps-act-publish { border-color: #4caf50; color: #4caf50; }
.ps-row-actions button.ps-act-publish:hover { background: rgba(76,175,80,0.15); }
.ps-row-actions button.ps-act-unschedule { border-color: #ff9800; color: #ff9800; }
.ps-row-actions button.ps-act-unschedule:hover { background: rgba(255,152,0,0.15); }
.bs-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.bs-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-primary, #e0e0e0); }
.bs-form input, .bs-form select { background: var(--bg-secondary, #252535); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #444); border-radius: 4px; padding: 6px 8px; font-size: 14px; }
.bs-hint { font-size: 14px; color: var(--text-secondary, #999); margin: 0; }
@media (max-width: 800px) {
  .ps-row { grid-template-columns: 50px 1fr 100px 80px; }
  .ps-date:nth-child(4), .ps-chars, .ps-row-header .ps-date:nth-child(4), .ps-row-header .ps-chars { display: none; }
}
@media (max-width: 500px) {
  .ps-row { grid-template-columns: 40px 1fr 80px; }
  .ps-date, .ps-row-header .ps-date { display: none; }
  .ps-stats { gap: 8px; }
  .ps-stat { min-width: 60px; padding: 6px 8px; }
}

/* === Strike #61: Chapter Quality Gate Panel === */
.cqg-panel { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.cqg-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cqg-score { width: 56px; height: 56px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.cqg-score-num { font-size: 20px; line-height: 1.7; }
.cqg-score-label { font-size: 14px; opacity: 0.7; }
.cqg-excellent { background: rgba(76,175,80,0.15); color: #4caf50; border: 2px solid #4caf50; }
.cqg-good { background: rgba(33,150,243,0.15); color: #2196f3; border: 2px solid #2196f3; }
.cqg-warning { background: rgba(255,193,7,0.15); color: #ffc107; border: 2px solid #ffc107; }
.cqg-critical { background: rgba(244,67,54,0.15); color: #f44336; border: 2px solid #f44336; }
.cqg-title { flex: 1; min-width: 0; }
.cqg-title h4 { margin: 0 0 4px; font-size: 14px; color: var(--text-primary, #e0e0e0); }
.cqg-grade-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 14px; font-weight: 600; }
.cqg-pass-count { font-size: 14px; color: var(--text-secondary, #999); margin-left: 8px; }
.cqg-summary-stats { display: flex; gap: 12px; font-size: 14px; color: var(--text-secondary, #999); }
.cqg-summary-stats span { white-space: nowrap; }
.cqg-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; }
.cqg-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; font-size: 14px; background: var(--bg-secondary, #252535); }
.cqg-icon { width: 16px; text-align: center; font-weight: 700; flex-shrink: 0; }
.cqg-pass .cqg-icon { color: #4caf50; }
.cqg-fail .cqg-icon { color: #ff9800; }
.cqg-fail-critical .cqg-icon { color: #f44336; }
.cqg-info .cqg-icon { color: #2196f3; }
.cqg-label { font-weight: 600; color: var(--text-primary, #e0e0e0); white-space: nowrap; }
.cqg-value { color: var(--text-secondary, #999); }
.cqg-detail { color: #ff9800; font-size: 14px; margin-left: auto; }
.cqg-alert { margin-top: 8px; padding: 6px 10px; background: rgba(244,67,54,0.12); color: #f44336; border-radius: 4px; font-size: 14px; font-weight: 600; }
@media (max-width: 700px) {
  .cqg-checklist { grid-template-columns: 1fr; }
  .cqg-header { flex-direction: column; align-items: flex-start; }
  .cqg-summary-stats { flex-wrap: wrap; }
}

/* === Editorial Notes Overview (Strike #63) === */
.eno-panel { background: var(--bg2, #1a1d27); border-radius: 10px; padding: 16px; margin-top: 16px; border: 1px solid var(--border, #2a2d37); }
.eno-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.eno-header h3 { font-size: 16px; color: var(--text-primary, #e0e0e0); }
.eno-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.eno-stat { background: var(--bg, #0f1117); border-radius: 8px; padding: 10px 14px; text-align: center; min-width: 80px; border: 1px solid var(--border, #2a2d37); }
.eno-stat-num { display: block; font-size: 22px; font-weight: 700; color: var(--text-primary, #e0e0e0); }
.eno-stat-label { display: block; font-size: 14px; color: var(--text-secondary, #999); margin-top: 2px; }
.eno-stat-open .eno-stat-num { color: #ff9800; }
.eno-alert .eno-stat-num { color: #f44336; }
.eno-types { margin-bottom: 12px; }
.eno-types h4 { font-size: 14px; color: var(--text-secondary, #999); margin-bottom: 6px; }
.eno-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eno-type-chip { background: var(--bg, #0f1117); border: 1px solid var(--border, #2a2d37); border-radius: 14px; padding: 4px 10px; font-size: 14px; color: var(--text-secondary, #999); cursor: pointer; transition: background 0.15s; }
.eno-type-chip:hover { background: var(--accent, #4a6cf7); color: #fff; }
.eno-type-chip strong { margin-left: 4px; color: var(--text-primary, #e0e0e0); }
.eno-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.eno-filters select { background: var(--bg, #0f1117); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border, #2a2d37); border-radius: 6px; padding: 5px 8px; font-size: 14px; }
.eno-table-wrap { overflow-x: auto; }
.eno-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.eno-table thead th { background: var(--bg, #0f1117); color: var(--text-secondary, #999); padding: 8px 10px; text-align: left; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--border, #2a2d37); white-space: nowrap; }
.eno-table tbody tr { border-bottom: 1px solid var(--border, #2a2d37); transition: background 0.1s; }
.eno-table tbody tr:hover { background: rgba(74,108,247,0.06); }
.eno-table td { padding: 7px 10px; color: var(--text-primary, #e0e0e0); vertical-align: middle; }
.eno-note-text { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.eno-prio-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.eno-p1 .eno-prio-badge, .eno-prio-badge.eno-p1 { background: rgba(244,67,54,0.15); color: #f44336; }
.eno-p2 .eno-prio-badge, .eno-prio-badge.eno-p2 { background: rgba(255,152,0,0.15); color: #ff9800; }
.eno-p3 .eno-prio-badge, .eno-prio-badge.eno-p3 { background: rgba(158,158,158,0.15); color: #9e9e9e; }
.eno-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.eno-status-open { background: rgba(255,152,0,0.12); color: #ff9800; }
.eno-status-applied { background: rgba(76,175,80,0.12); color: #4caf50; }
.eno-status-dismissed { background: rgba(158,158,158,0.12); color: #9e9e9e; }
.eno-nav-btn { font-size: 14px; padding: 2px 8px; }
.eno-count { text-align: right; font-size: 14px; color: var(--text-secondary, #999); margin-top: 6px; }
@media (max-width: 700px) {
  .eno-summary { flex-direction: column; }
  .eno-filters { flex-direction: column; }
  .eno-note-text { max-width: 150px; }
}
/* === Strike #64: Audit Issues Overview (aio-) === */
.aio-panel { background: var(--bg2, #1a1d27); border-radius: 10px; padding: 16px; margin-top: 16px; border: 1px solid var(--border, #2a2d37); }
.aio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.aio-header h3 { font-size: 16px; color: var(--text-primary, #e0e0e0); }
.aio-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.aio-stat { background: var(--bg, #0f1117); border-radius: 8px; padding: 10px 14px; text-align: center; min-width: 80px; border: 1px solid var(--border, #2a2d37); }
.aio-stat-num { display: block; font-size: 22px; font-weight: 700; color: var(--text-primary, #e0e0e0); }
.aio-stat-label { display: block; font-size: 14px; color: var(--text-secondary, #999); margin-top: 2px; }
.aio-stat-unresolved .aio-stat-num { color: #ff9800; }
.aio-stat-resolved .aio-stat-num { color: #4caf50; }
.aio-sev-critical .aio-stat-num { color: #f44336; }
.aio-sev-high .aio-stat-num { color: #ff5722; }
.aio-alert .aio-stat-num { color: #f44336; }
.aio-dist { margin-bottom: 12px; }
.aio-dist h4 { font-size: 14px; color: var(--text-secondary, #999); margin-bottom: 6px; }
.aio-dist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aio-dist-chip { background: var(--bg, #0f1117); border: 1px solid var(--border, #2a2d37); border-radius: 14px; padding: 4px 10px; font-size: 14px; color: var(--text-secondary, #999); cursor: pointer; transition: background 0.15s; }
.aio-dist-chip:hover { background: var(--accent, #4a6cf7); color: #fff; }
.aio-dist-chip strong { margin-left: 4px; color: var(--text-primary, #e0e0e0); }
.aio-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.aio-filters select { background: var(--bg, #0f1117); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border, #2a2d37); border-radius: 6px; padding: 5px 8px; font-size: 14px; }
.aio-table-wrap { overflow-x: auto; }
.aio-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aio-table thead th { background: var(--bg, #0f1117); color: var(--text-secondary, #999); padding: 8px 10px; text-align: left; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--border, #2a2d37); white-space: nowrap; }
.aio-table tbody tr { border-bottom: 1px solid var(--border, #2a2d37); transition: background 0.1s; }
.aio-table tbody tr:hover { background: rgba(74,108,247,0.06); }
.aio-table td { padding: 7px 10px; color: var(--text-primary, #e0e0e0); vertical-align: middle; }
.aio-desc-text { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.aio-auditor-cell { font-size: 14px; white-space: nowrap; }
.aio-sev-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.aio-sev-badge.aio-sev-critical { background: rgba(244,67,54,0.15); color: #f44336; }
.aio-sev-badge.aio-sev-high { background: rgba(255,87,34,0.15); color: #ff5722; }
.aio-sev-badge.aio-sev-medium { background: rgba(255,152,0,0.15); color: #ff9800; }
.aio-sev-badge.aio-sev-low { background: rgba(158,158,158,0.15); color: #9e9e9e; }
.aio-sev-badge.aio-sev-info { background: rgba(33,150,243,0.12); color: #2196f3; }
.aio-resolved-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.aio-resolved { background: rgba(76,175,80,0.12); color: #4caf50; }
.aio-unresolved { background: rgba(255,152,0,0.12); color: #ff9800; }
.aio-nav-btn { font-size: 14px; padding: 2px 8px; }
.aio-count { text-align: right; font-size: 14px; color: var(--text-secondary, #999); margin-top: 6px; }
@media (max-width: 700px) {
  .aio-summary { flex-direction: column; }
  .aio-filters { flex-direction: column; }
  .aio-desc-text { max-width: 150px; }
}

/* ============================================================
   Strike #65: Scene Version Auto-Archive (sva- prefix)
   ============================================================ */
.sva-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sva-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: var(--bg3, #252833); border-radius: var(--radius, 8px); margin-bottom: 8px; font-size: 14px; }
.sva-stat { color: var(--text, #e1e4ed); }
.sva-branch-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; font-size: 14px; background: rgba(99,102,241,0.12); color: var(--accent2, #818cf8); cursor: default; }
.sva-branch-chip b { font-weight: 700; }
.sva-version-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.sva-version-card { background: var(--bg2, #1a1d27); border: 1px solid var(--border, #333648); border-radius: var(--radius, 8px); padding: 8px 10px; transition: border-color 0.15s; }
.sva-version-card:hover { border-color: var(--accent, #6366f1); }
.sva-version-accepted { border-left: 3px solid var(--green, #22c55e); }
.sva-version-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.sva-branch-label { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 14px; font-weight: 600; background: rgba(99,102,241,0.15); color: var(--accent2, #818cf8); }
.sva-branch-auto { background: rgba(59,130,246,0.12); color: var(--blue, #3b82f6); }
.sva-branch-manual { background: rgba(234,179,8,0.12); color: var(--yellow, #eab308); }
.sva-accepted { font-size: 14px; color: var(--green, #22c55e); font-weight: 700; }
.sva-version-date { font-size: 14px; color: var(--text2, #a0a4b8); margin-left: auto; }
.sva-version-chars { font-size: 14px; color: var(--text2, #a0a4b8); }
.sva-version-preview { font-size: 14px; color: var(--text2, #a0a4b8); margin: 4px 0; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-version-actions { display: flex; gap: 6px; margin-top: 4px; }
.sva-btn-restore { font-size: 14px; }
.sva-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.sva-preview-modal { background: var(--bg2, #1a1d27); border: 1px solid var(--border, #333648); border-radius: var(--radius, 8px); width: 90%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; }
.sva-preview-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border, #333648); font-size: 14px; }
.sva-preview-header .sva-preview-close { margin-left: auto; }
.sva-preview-body { padding: 14px; flex: 1; overflow-y: auto; white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: var(--text, #e1e4ed); }
.sva-preview-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border, #333648); font-size: 14px; color: var(--text2, #a0a4b8); }
@media (max-width: 700px) {
  .sva-summary { flex-direction: column; align-items: flex-start; }
  .sva-preview-modal { width: 98%; max-height: 90vh; }
}

/* ============================================================
   Strike #66: Canon Facts Management Panel (cfo-prefix)
   ============================================================ */
.cfo-panel { margin-top: 16px; }
.cfo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cfo-header h3 { margin: 0; font-size: 15px; }
.cfo-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cfo-summary-card { background: var(--bg2, #1a1d27); border: 1px solid var(--border, #333648); border-radius: var(--radius, 8px); padding: 10px 14px; display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.cfo-summary-card.cfo-locked { border-color: var(--accent, #6c5ce7); }
.cfo-summary-num { font-size: 22px; font-weight: 700; color: var(--accent, #6c5ce7); }
.cfo-summary-label { font-size: 14px; color: var(--text2, #a0a4b8); margin-top: 2px; }
.cfo-distribution { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cfo-dist-label { font-size: 14px; color: var(--text2, #a0a4b8); font-weight: 600; }
.cfo-chip { font-size: 14px; padding: 3px 8px; border-radius: 12px; background: var(--bg3, #23263a); border: 1px solid var(--border, #333648); cursor: pointer; transition: background 0.15s; }
.cfo-chip:hover { background: var(--accent, #6c5ce7); color: #fff; }
.cfo-chip strong { margin-left: 3px; }
.cfo-chip-chapter { border-color: var(--accent-dim, #4a3fc0); }
.cfo-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cfo-filters select { font-size: 14px; padding: 4px 8px; background: var(--bg2, #1a1d27); color: var(--text, #e1e4ed); border: 1px solid var(--border, #333648); border-radius: 4px; }
.cfo-result-count { font-size: 14px; color: var(--text2, #a0a4b8); margin-left: auto; }
.cfo-table-wrap { overflow-x: auto; }
.cfo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cfo-table th { background: var(--bg3, #23263a); padding: 6px 8px; text-align: left; font-weight: 600; color: var(--text2, #a0a4b8); border-bottom: 1px solid var(--border, #333648); white-space: nowrap; }
.cfo-table td { padding: 6px 8px; border-bottom: 1px solid var(--bg3, #23263a); vertical-align: top; }
.cfo-table tr:hover { background: rgba(108,92,231,0.06); }
.cfo-imp-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.cfo-imp-high { background: rgba(255,71,87,0.18); color: #ff4757; }
.cfo-imp-mid { background: rgba(255,165,2,0.18); color: #ffa502; }
.cfo-imp-low { background: rgba(46,213,115,0.18); color: #2ed573; }
.cfo-type-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--bg3, #23263a); font-size: 14px; }
.cfo-chapter-cell a { color: var(--accent, #6c5ce7); text-decoration: none; }
.cfo-chapter-cell a:hover { text-decoration: underline; }
.cfo-fact-text { max-width: 350px; line-height: 1.7; }
.cfo-lock-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; transition: transform 0.15s; }
.cfo-lock-btn:hover { transform: scale(1.2); }
.cfo-lock-on { opacity: 1; }
.cfo-lock-off { opacity: 0.5; }
.cfo-actions { white-space: nowrap; }
.cfo-inline-edit { width: 100%; font-size: 14px; padding: 4px; background: var(--bg2, #1a1d27); color: var(--text, #e1e4ed); border: 1px solid var(--accent, #6c5ce7); border-radius: 4px; resize: vertical; }
.cfo-edit-btns { display: flex; gap: 4px; margin-top: 4px; }
@media (max-width: 700px) {
  .cfo-summary { flex-direction: column; }
  .cfo-fact-text { max-width: 200px; }
}

/* ============================================================ */
/* Strike #67: Foreshadowing Tracker Dashboard                   */
/* ============================================================ */
.fto-panel { background: var(--bg2, #1a1d27); border-radius: 10px; padding: 16px; margin-top: 16px; }
.fto-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fto-header h3 { margin: 0; font-size: 16px; }
.fto-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fto-summary-card { background: var(--bg1, #0f1117); border-radius: 8px; padding: 10px 16px; text-align: center; min-width: 90px; }
.fto-summary-num { display: block; font-size: 22px; font-weight: bold; color: var(--text, #e1e4ed); }
.fto-summary-label { display: block; font-size: 14px; color: var(--text-muted, #8b8fa3); margin-top: 2px; }
.fto-active .fto-summary-num { color: #6c5ce7; }
.fto-resolved .fto-summary-num { color: #00cec9; }
.fto-major .fto-summary-num { color: #fdcb6e; }
.fto-overdue { border: 1px solid #d63031; }
.fto-overdue .fto-summary-num { color: #d63031; }
.fto-distribution { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.fto-dist-label { font-size: 14px; color: var(--text-muted, #8b8fa3); margin-right: 4px; }
.fto-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 14px; background: var(--bg1, #0f1117); cursor: pointer; transition: background 0.2s; }
.fto-chip:hover { background: var(--accent, #6c5ce7); color: #fff; }
.fto-chip strong { font-weight: 700; }
.fto-chip-planted { border-left: 3px solid #6c5ce7; }
.fto-chip-partially_resolved { border-left: 3px solid #fdcb6e; }
.fto-chip-resolved { border-left: 3px solid #00cec9; }
.fto-chip-planned { border-left: 3px solid #8b8fa3; }
.fto-chip-abandoned { border-left: 3px solid #636e72; }
.fto-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.fto-filters select { padding: 4px 8px; border-radius: 6px; background: var(--bg1, #0f1117); color: var(--text, #e1e4ed); border: 1px solid var(--border, #2a2d3a); font-size: 14px; }
.fto-result-count { font-size: 14px; color: var(--text-muted, #8b8fa3); margin-left: auto; }
.fto-table-wrap { overflow-x: auto; }
.fto-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fto-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #2a2d3a); font-size: 14px; color: var(--text-muted, #8b8fa3); text-transform: uppercase; }
.fto-table td { padding: 6px 8px; border-bottom: 1px solid var(--border, #2a2d3a); vertical-align: top; }
.fto-table tbody tr:hover { background: rgba(108,92,231,0.07); }
.fto-imp-badge { display: inline-block; min-width: 36px; text-align: center; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.fto-imp-major { background: rgba(253,203,110,0.2); color: #fdcb6e; }
.fto-imp-medium { background: rgba(108,92,231,0.15); color: #a29bfe; }
.fto-imp-minor { background: rgba(139,143,163,0.15); color: #8b8fa3; }
.fto-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; background: var(--bg1, #0f1117); }
.fto-title-cell { max-width: 280px; }
.fto-desc { font-size: 14px; color: var(--text-muted, #8b8fa3); }
.fto-chapter-cell { white-space: nowrap; }
.fto-chapter-link { color: var(--accent, #6c5ce7); text-decoration: none; }
.fto-chapter-link:hover { text-decoration: underline; }
.fto-payoff-cell { text-align: center; }
.fto-urgency-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.fto-urg-overdue { background: rgba(214,48,49,0.2); color: #ff7675; font-weight: bold; }
.fto-urg-urgent { background: rgba(253,203,110,0.2); color: #fdcb6e; }
.fto-urg-soon { background: rgba(0,206,201,0.15); color: #00cec9; }
.fto-urg-needs { background: rgba(139,143,163,0.15); color: #8b8fa3; font-style: italic; }
.fto-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; }
.fto-st-planted { background: rgba(108,92,231,0.2); color: #a29bfe; }
.fto-st-partially_resolved { background: rgba(253,203,110,0.2); color: #fdcb6e; }
.fto-st-resolved { background: rgba(0,206,201,0.2); color: #00cec9; }
.fto-st-planned { background: rgba(139,143,163,0.15); color: #8b8fa3; }
.fto-st-abandoned { background: rgba(99,110,114,0.2); color: #636e72; }
@media (max-width: 700px) {
  .fto-summary { flex-direction: column; }
  .fto-title-cell { max-width: 160px; }
}

/* === 変更波及概要ダッシュボード (Strike #68) cio- prefix === */
.cio-panel { margin-top: 18px; background: var(--card-bg, #23243a); border-radius: 10px; padding: 18px 16px 14px; }
.cio-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cio-header h3 { margin: 0; font-size: 1.08em; }
.cio-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cio-summary-card { background: var(--bg-darker, #181926); border-radius: 8px; padding: 10px 16px; min-width: 80px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cio-summary-num { font-size: 1.5em; font-weight: bold; color: var(--text, #e0e0e0); }
.cio-summary-label { font-size: 0.875em; color: var(--text-muted, #888); }
.cio-pending .cio-summary-num { color: #fdcb6e; }
.cio-done .cio-summary-num { color: #00cec9; }
.cio-failed .cio-summary-num { color: #ff7675; }
.cio-reaudit .cio-summary-num { color: #fab1a0; }
.cio-human .cio-summary-num { color: #e17055; }
.cio-distribution { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cio-dist-label { font-size: 0.875em; color: var(--text-muted, #888); margin-right: 4px; }
.cio-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 0.875em; cursor: pointer; background: rgba(108,92,231,0.12); transition: background 0.15s; }
.cio-chip:hover { background: rgba(108,92,231,0.25); }
.cio-chip strong { font-weight: 700; }
.cio-chip-queued { background: rgba(253,203,110,0.15); color: #fdcb6e; }
.cio-chip-running { background: rgba(116,185,255,0.15); color: #74b9ff; }
.cio-chip-done { background: rgba(0,206,201,0.15); color: #00cec9; }
.cio-chip-failed { background: rgba(214,48,49,0.15); color: #ff7675; }
.cio-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.cio-filters select { background: var(--bg-darker, #181926); color: var(--text, #e0e0e0); border: 1px solid var(--border, #333); border-radius: 6px; padding: 4px 8px; font-size: 0.875em; }
.cio-result-count { font-size: 0.875em; color: var(--text-muted, #888); margin-left: auto; }
.cio-table-wrap { overflow-x: auto; }
.cio-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.cio-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-muted, #888); font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.cio-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cio-target-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.875em; background: rgba(108,92,231,0.15); color: #a29bfe; }
.cio-target-link { color: var(--accent, #6c5ce7); text-decoration: none; font-size: 0.875em; margin-left: 4px; }
.cio-target-link:hover { text-decoration: underline; }
.cio-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.875em; }
.cio-st-queued { background: rgba(253,203,110,0.2); color: #fdcb6e; }
.cio-st-running { background: rgba(116,185,255,0.2); color: #74b9ff; }
.cio-st-done { background: rgba(0,206,201,0.2); color: #00cec9; }
.cio-st-failed { background: rgba(214,48,49,0.2); color: #ff7675; }
.cio-affected-cell { text-align: center; }
.cio-aff-high { color: #ff7675; font-weight: bold; }
.cio-aff-medium { color: #fdcb6e; font-weight: 600; }
.cio-flag-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.875em; font-weight: 600; }
.cio-flag-reaudit { background: rgba(250,177,160,0.2); color: #fab1a0; }
.cio-flag-human { background: rgba(225,112,85,0.2); color: #e17055; }
.cio-flag-ok { color: var(--text-muted, #666); font-size: 0.875em; }
.cio-date-cell { white-space: nowrap; font-size: 0.875em; color: var(--text-muted, #888); }
@media (max-width: 700px) {
  .cio-summary { flex-direction: column; }
  .cio-table th:nth-child(3), .cio-table td:nth-child(3) { display: none; }
}

/* === Work Bible Export (Strike #69) === */
.wbe-panel { background: var(--bg-secondary, #1a1a2e); border-radius: 12px; padding: 20px; margin-top: 18px; border: 1px solid var(--border-color, #333); }
.wbe-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.wbe-header h3 { margin: 0; font-size: 1.15em; }
.wbe-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wbe-summary-card { background: var(--bg-tertiary, #16213e); border-radius: 8px; padding: 10px 14px; text-align: center; min-width: 80px; border: 1px solid var(--border-color, #333); }
.wbe-summary-num { display: block; font-size: 1.5em; font-weight: 700; color: var(--accent-color, #6c5ce7); }
.wbe-summary-label { display: block; font-size: 0.875em; color: var(--text-muted, #888); margin-top: 2px; }
.wbe-summary-card.wbe-locked .wbe-summary-num { color: #fdcb6e; }
.wbe-summary-card.wbe-progress .wbe-summary-num { color: #00b894; }
.wbe-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.wbe-section { margin-bottom: 10px; border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: hidden; }
.wbe-section-title { padding: 10px 14px; background: var(--bg-tertiary, #16213e); cursor: pointer; font-weight: 600; font-size: 0.95em; list-style: none; }
.wbe-section-title::before { content: '\25B6 '; font-size: 0.875em; margin-right: 6px; }
details[open] > .wbe-section-title::before { content: '\25BC '; }
.wbe-section-body { padding: 12px 14px; }
.wbe-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.wbe-field { background: var(--bg-tertiary, #16213e); border-radius: 6px; padding: 8px 12px; }
.wbe-field-label { display: block; font-size: 0.875em; color: var(--text-muted, #888); margin-bottom: 3px; }
.wbe-field-value { display: block; font-size: 0.92em; line-height: 1.7; }
.wbe-tag { display: inline-block; background: rgba(108,92,231,0.15); color: #a29bfe; padding: 1px 6px; border-radius: 4px; font-size: 0.875em; margin-right: 4px; }
.wbe-arc-card, .wbe-char-card, .wbe-plot-card, .wbe-scene-card { background: var(--bg-tertiary, #16213e); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--accent-color, #6c5ce7); }
.wbe-arc-title, .wbe-char-name, .wbe-plot-title, .wbe-scene-title { font-weight: 600; margin-bottom: 4px; }
.wbe-arc-detail, .wbe-char-detail, .wbe-plot-desc, .wbe-scene-desc, .wbe-scene-detail { font-size: 0.88em; margin-top: 3px; line-height: 1.7; color: var(--text-secondary, #ccc); }
.wbe-char-role { font-size: 0.875em; background: rgba(253,203,110,0.15); color: #fdcb6e; padding: 1px 6px; border-radius: 4px; }
.wbe-plot-status { font-size: 0.875em; color: var(--text-muted, #888); margin-top: 4px; }
.wbe-world-item { padding: 6px 0; border-bottom: 1px solid var(--border-color, #2a2a3e); font-size: 0.9em; line-height: 1.7; }
.wbe-world-item:last-child { border-bottom: none; }
.wbe-subsection { font-size: 0.9em; margin: 12px 0 8px; color: var(--text-secondary, #ccc); }
.wbe-table { width: 100%; border-collapse: collapse; font-size: 0.875em; }
.wbe-table th { background: var(--bg-tertiary, #16213e); padding: 6px 8px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border-color, #444); }
.wbe-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-color, #2a2a3e); vertical-align: top; }
.wbe-table tr:hover td { background: rgba(108,92,231,0.05); }
@media (max-width: 700px) {
  .wbe-summary { flex-direction: column; }
  .wbe-fields { grid-template-columns: 1fr; }
  .wbe-actions { flex-direction: column; }
}

/* ===== Strike #70: Character Relationship Graph (crg-) ===== */
.crg-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.crg-toggle-btn { font-size: 0.875rem; }
.crg-graph-wrap { background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 8px; padding: 12px; }
.crg-svg { width: 100%; max-height: 520px; display: block; }
.crg-node { cursor: pointer; }
.crg-node-circle { opacity: 0.9; stroke: rgba(255,255,255,0.2); stroke-width: 2; transition: opacity 0.15s, stroke-width 0.15s; }
.crg-node:hover .crg-node-circle { opacity: 1; stroke-width: 3; stroke: #fff; }
.crg-node-name { fill: #fff; font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.crg-node-role { fill: rgba(255,255,255,0.55); font-size: 14px; text-anchor: middle; pointer-events: none; }
.crg-edge { opacity: 0.7; transition: opacity 0.15s; }
.crg-edge:hover { opacity: 1; }
.crg-edge-label { font-size: 14px; text-anchor: middle; font-weight: 500; pointer-events: none; }
.crg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; padding: 8px 0; border-top: 1px solid var(--border-color, #2a2a3e); }
.crg-legend-title { font-size: 0.875rem; color: rgba(255,255,255,0.5); font-weight: 600; }
.crg-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.crg-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.crg-legend-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.crg-tension-badge { font-size: 0.875rem; padding: 1px 5px; border-radius: 8px; color: #fff; font-weight: 600; margin-left: 4px; }
.crg-tension-1 { background: #4caf50; }
.crg-tension-2 { background: #8bc34a; }
.crg-tension-3 { background: #ffc107; color: #333; }
.crg-tension-4 { background: #ff9800; }
.crg-tension-5 { background: #f44336; }
.crg-list-view { margin-top: 8px; }
/* 2026-04-18 (Round 5 T-5 verification fix): AI 推論結果のインライン埋め込みコンテナ。
   初期 hidden 属性で非表示。loadRelationSuggestions() が成功した時点で hidden=false にし可視化。 */
.crg-suggestions-inline { margin-top: 12px; padding: 12px; background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 8px; }
.crg-suggestions-inline[hidden] { display: none; }
.crg-suggestions-inline h4 { margin: 0 0 10px 0; font-size: 1rem; }
.crg-suggestions-inline .placeholder { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin: 0; }
.crg-suggestions-inline .placeholder.error { color: #ff6b6b; }
@media (max-width: 700px) {
  .crg-svg { max-height: 350px; }
  .crg-legend { gap: 4px 8px; }
}

/* === Phase 4-β T4 + T5-d: relation filter bar / suggestion card / active badge === */
.crg-filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color, #2a2a3e);
  border-radius: 6px;
}
.crg-filter-bar .crg-filter-opt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.875rem; color: rgba(255,255,255,0.78); cursor: pointer;
}
.crg-filter-bar input[type="radio"] { accent-color: #4a90e2; }
.crg-filter-warning {
  padding: 6px 10px; margin-bottom: 8px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.4);
  border-radius: 4px; color: #ffc107; font-size: 0.875rem;
}
.relation-suggestion-card {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a3e);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
}
.relation-suggestion-card .rsc-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.88rem; }
.relation-suggestion-card .rsc-rel { background: rgba(74,144,226,0.18); color: #4a90e2; padding: 1px 8px; border-radius: 10px; font-size: 0.875rem; }
.relation-suggestion-card .rsc-conf { font-size: 0.875rem; color: rgba(255,255,255,0.55); }
.relation-suggestion-card .rsc-src { font-size: 0.875rem; color: rgba(255,255,255,0.45); font-style: italic; }
.relation-suggestion-card .rsc-evidence { margin-top: 6px; padding: 6px 8px; background: rgba(255,255,255,0.03); border-left: 2px solid #4a90e2; font-size: 0.875rem; color: rgba(255,255,255,0.72); }
.relation-suggestion-card .rsc-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Phase 4-β T6: character active-state badge (5 variants) */
.active-badge {
  display: inline-block; font-size: 0.875rem; padding: 1px 6px;
  border-radius: 10px; font-weight: 600; margin-left: 4px;
  vertical-align: middle;
}
.active-badge-present { background: rgba(76,175,80,0.18); color: #81c784; }
.active-badge-mentioned_only { background: rgba(33,150,243,0.16); color: #64b5f6; }
.active-badge-inactive { background: rgba(158,158,158,0.18); color: #bdbdbd; }
.active-badge-future_only { background: rgba(255,152,0,0.16); color: #ffb74d; }
.active-badge-retired { background: rgba(121,85,72,0.22); color: #a1887f; }

/* === Strike #71: 監査スコアトレンドダッシュボード (ast-) === */
.ast-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-top: 12px; }
.ast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.ast-header h3 { margin: 0; font-size: 1.1em; }
.ast-header-actions { display: flex; gap: 8px; align-items: center; }
.ast-filter-select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.875em; }
.ast-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ast-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 10px; text-align: center; }
.ast-card-val { font-size: 1.4em; font-weight: 700; color: #333; }
.ast-card-label { font-size: 0.875em; color: #666; margin-top: 2px; }
.ast-good { color: #2e7d32; }
.ast-mid { color: #f57f17; }
.ast-low { color: #c62828; }
.ast-section { margin-top: 16px; }
.ast-section h4 { font-size: 0.95em; margin: 0 0 8px; color: #444; }
.ast-dist { display: flex; flex-direction: column; gap: 4px; }
.ast-dist-row { display: flex; align-items: center; gap: 8px; }
.ast-dist-label { width: 55px; font-size: 0.875em; text-align: right; color: #555; }
.ast-dist-bar-bg { flex: 1; height: 18px; background: #eee; border-radius: 3px; overflow: hidden; }
.ast-dist-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.ast-dist-cnt { width: 30px; font-size: 0.875em; color: #555; }
.ast-bar-excellent { background: #1b5e20; }
.ast-bar-good { background: #43a047; }
.ast-bar-ok { background: #fdd835; }
.ast-bar-mid { background: #ff9800; }
.ast-bar-low { background: #e53935; }
.ast-table-wrap { overflow-x: auto; }
.ast-table { width: 100%; border-collapse: collapse; font-size: 0.875em; }
.ast-table th { background: #f5f5f5; padding: 6px 8px; text-align: left; border-bottom: 2px solid #ddd; white-space: nowrap; }
.ast-table td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.ast-table tr:hover { background: #f8f9fa; }
.ast-title-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-collapse-toggle { cursor: pointer; user-select: none; }
.ast-collapse-toggle:hover { color: #1976d2; }
.ast-collapse-body { margin-top: 8px; }
@media (max-width: 700px) {
  .ast-summary { grid-template-columns: repeat(2, 1fr); }
  .ast-table { font-size: 0.875em; }
}

/* === Strike #72: 執筆アラートセンター (wac-) === */
.wac-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-top: 12px; }
.wac-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.wac-header h3 { margin: 0; font-size: 1.1em; }
.wac-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wac-filter-select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.875em; background: #fff; }
.wac-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.wac-summary-card { background: #f8f9fa; border-radius: 6px; padding: 12px; text-align: center; border: 1px solid #e8e8e8; }
.wac-card-value { display: block; font-size: 1.6em; font-weight: 700; color: #333; }
.wac-card-label { display: block; font-size: 0.875em; color: #888; margin-top: 2px; }
.wac-card-critical { border-left: 3px solid #e53935; }
.wac-card-warning { border-left: 3px solid #ff9800; }
.wac-card-info { border-left: 3px solid #42a5f5; }
.wac-card-total { border-left: 3px solid #7e57c2; }
.wac-count-critical { color: #e53935; }
.wac-count-warning { color: #ff9800; }
.wac-count-zero { color: #4caf50; }
.wac-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wac-cat-chip { background: #f0f0f0; padding: 4px 10px; border-radius: 12px; font-size: 0.875em; color: #555; white-space: nowrap; }
.wac-empty { text-align: center; color: #aaa; padding: 24px; font-style: italic; }
.wac-alerts-list { max-height: 420px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; }
.wac-alert-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.15s; }
.wac-alert-row:hover { background: #f5f5ff; }
.wac-alert-row:last-child { border-bottom: none; }
.wac-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.875em; font-weight: 600; color: #fff; flex-shrink: 0; }
.wac-sev-critical .wac-badge, .wac-badge.wac-sev-critical { background: #e53935; }
.wac-sev-warning .wac-badge, .wac-badge.wac-sev-warning { background: #ff9800; }
.wac-sev-info .wac-badge, .wac-badge.wac-sev-info { background: #42a5f5; }
.wac-sev-critical { border-left: 3px solid #e53935; }
.wac-sev-warning { border-left: 3px solid #ff9800; }
.wac-sev-info { border-left: 3px solid #42a5f5; }
.wac-cat-badge { background: #e8eaf6; color: #3f51b5; padding: 2px 6px; border-radius: 3px; font-size: 0.875em; flex-shrink: 0; }
.wac-message { flex: 1; font-size: 0.88em; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wac-date { font-size: 0.875em; color: #999; flex-shrink: 0; min-width: 70px; text-align: right; }
@media (max-width: 700px) {
  .wac-summary { grid-template-columns: repeat(2, 1fr); }
  .wac-alert-row { flex-wrap: wrap; }
  .wac-message { white-space: normal; }
}

/* === Strike #73: 一括監査リランパネル (bar-) === */
.bar-panel { margin-top: 18px; background: var(--card-bg, #23243a); border-radius: 10px; padding: 18px 16px 14px; }
.bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.bar-header h3 { margin: 0; font-size: 1.1em; }
.bar-header-actions { display: flex; gap: 8px; align-items: center; }
.bar-loading { text-align: center; color: #aaa; padding: 24px; font-style: italic; }
.bar-empty { text-align: center; color: #aaa; padding: 24px; font-style: italic; }
.bar-error { text-align: center; color: #e53935; padding: 16px; background: rgba(229,57,53,0.08); border-radius: 6px; }
.bar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.bar-select-actions { display: flex; gap: 6px; }
.bar-selection-count { font-size: 0.88em; color: #aaa; }
.bar-scene-list { max-height: 380px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; margin-bottom: 12px; }
.bar-chapter-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.bar-chapter-group:last-child { border-bottom: none; }
.bar-chapter-header { background: rgba(255,255,255,0.04); padding: 6px 12px; font-weight: 600; font-size: 0.9em; color: #b0b0c0; position: sticky; top: 0; z-index: 1; }
.bar-scene-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 20px; cursor: pointer; transition: background 0.12s; }
.bar-scene-row:hover { background: rgba(126,87,194,0.08); }
.bar-scene-row input[type="checkbox"] { accent-color: #7e57c2; }
.bar-scene-label { font-size: 0.88em; }
.bar-badge { font-size: 0.875em; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.bar-badge-impact { background: rgba(255,152,0,0.18); color: #ff9800; }
.bar-scene-chars { font-size: 0.875em; color: #888; margin-left: auto; }
.bar-footer { text-align: center; padding: 8px 0; }
.bar-progress { padding: 16px; text-align: center; }
.bar-progress-text { font-size: 0.9em; color: #b0b0c0; margin-bottom: 8px; }
.bar-progress-bar { background: rgba(255,255,255,0.08); border-radius: 4px; height: 8px; overflow: hidden; }
.bar-progress-fill { background: linear-gradient(90deg, #7e57c2, #42a5f5); height: 100%; transition: width 0.3s ease; }
.bar-results-panel { margin-top: 12px; }
.bar-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
.bar-summary-card { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px; text-align: center; border: 1px solid rgba(255,255,255,0.06); }
.bar-summary-label { display: block; font-size: 0.875em; color: #888; }
.bar-summary-value { display: block; font-size: 1.5em; font-weight: 700; }
.bar-summary-total .bar-summary-value { color: #b0b0c0; }
.bar-summary-pass .bar-summary-value { color: #4caf50; }
.bar-summary-fail .bar-summary-value { color: #e53935; }
.bar-summary-error .bar-summary-value { color: #ff9800; }
.bar-summary-score .bar-summary-value { color: #42a5f5; }
.bar-results-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.bar-results-table th { text-align: left; padding: 6px 10px; background: rgba(255,255,255,0.04); color: #aaa; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); }
.bar-results-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.bar-status-badge { font-size: 0.875em; padding: 2px 8px; border-radius: 3px; font-weight: 600; }
.bar-status-pass { background: rgba(76,175,80,0.15); color: #4caf50; }
.bar-status-fail { background: rgba(229,57,53,0.15); color: #e53935; }
.bar-status-skip { background: rgba(158,158,158,0.15); color: #9e9e9e; }
.bar-status-error { background: rgba(255,152,0,0.15); color: #ff9800; }
@media (max-width: 700px) {
  .bar-summary { grid-template-columns: repeat(2, 1fr); }
  .bar-controls { flex-direction: column; align-items: flex-start; }
}

/* ====================================================================
   Strike #74: Start Next Part Wizard (snp- prefix)
   ==================================================================== */
.snp-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.snp-wizard {
  background: var(--bg-panel, #1a1a2e); border-radius: 12px; width: 640px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.snp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.snp-header h3 { margin: 0; font-size: 16px; color: var(--text-primary, #e0e0e0); }
.snp-close {
  background: none; border: none; color: var(--text-secondary, #999); font-size: 24px; cursor: pointer;
}
.snp-close:hover { color: #fff; }
.snp-steps {
  display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.snp-step {
  flex: 1; padding: 10px 12px; text-align: center; font-size: 14px;
  color: var(--text-secondary, #888); background: rgba(255,255,255,0.02);
  transition: background 0.2s, color 0.2s;
}
.snp-step-active { background: rgba(99,102,241,0.15); color: #818cf8; font-weight: 600; }
.snp-step-done { background: rgba(76,175,80,0.1); color: #4caf50; }
.snp-step-num {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.1); margin-right: 4px;
}
.snp-step-active .snp-step-num { background: #6366f1; color: #fff; }
.snp-step-done .snp-step-num { background: #4caf50; color: #fff; }
.snp-body { padding: 20px; }
.snp-hidden { display: none !important; }
.snp-section { margin-bottom: 16px; }
.snp-section h4 { margin: 0 0 12px; font-size: 15px; color: var(--text-primary, #e0e0e0); }
.snp-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.snp-info-item {
  background: rgba(255,255,255,0.04); border-radius: 6px; padding: 8px 10px;
}
.snp-info-full { grid-column: 1 / -1; }
.snp-label { display: block; font-size: 14px; color: var(--text-secondary, #888); margin-bottom: 2px; }
.snp-value { font-size: 14px; color: var(--text-primary, #e0e0e0); }
.snp-warn { color: #ff9800; font-style: italic; }
.snp-hint { font-size: 14px; color: var(--text-secondary, #888); margin-bottom: 12px; }
.snp-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.snp-field { display: flex; flex-direction: column; gap: 3px; }
.snp-field span { font-size: 14px; color: var(--text-secondary, #aaa); }
.snp-field input, .snp-field textarea {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 8px 10px; color: var(--text-primary, #e0e0e0);
  font-size: 14px; font-family: inherit;
}
.snp-field input:focus, .snp-field textarea:focus {
  border-color: #6366f1; outline: none;
}
.snp-row { display: flex; gap: 10px; }
.snp-half { flex: 1; }
.snp-ai-status {
  margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 14px;
  background: rgba(99,102,241,0.1); color: #818cf8;
}
.snp-ai-done { background: rgba(76,175,80,0.1); color: #4caf50; }
.snp-ai-warn { background: rgba(255,152,0,0.1); color: #ff9800; }
.snp-actions {
  display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.snp-confirm-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.snp-confirm-table th {
  text-align: left; padding: 6px 10px; color: var(--text-secondary, #aaa); width: 100px;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.snp-confirm-table td {
  padding: 6px 10px; color: var(--text-primary, #e0e0e0);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.snp-confirm-note {
  margin-top: 10px; font-size: 14px; color: var(--text-secondary, #888); font-style: italic;
}
.snp-progress {
  margin-top: 12px; padding: 12px; border-radius: 6px;
  background: rgba(99,102,241,0.1); color: #818cf8; font-size: 14px; text-align: center;
}
.snp-result { margin-top: 12px; }
.snp-result-success {
  padding: 16px; border-radius: 8px; background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.3);
}
.snp-result-success h4 { margin: 0 0 10px; color: #4caf50; }
.snp-result-details p { margin: 4px 0; font-size: 14px; color: var(--text-primary, #e0e0e0); }
.snp-next-hint { margin-top: 8px !important; color: #818cf8 !important; font-style: italic; }
.snp-result-actions { display: flex; gap: 8px; margin-top: 12px; }
.snp-result-error {
  padding: 12px; border-radius: 8px; background: rgba(229,57,53,0.1);
  border: 1px solid rgba(229,57,53,0.3); color: #e53935; font-size: 14px;
}

/* === クロスプラットフォーム投稿トラッカー (Strike #81) === */
.cp-panel { margin-bottom: 24px; }
.cp-desc { color: var(--text-secondary, #aaa); font-size: 14px; margin-bottom: 10px; }
.cp-summary { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.cp-summary-card {
  flex: 1; min-width: 180px; padding: 14px; border-radius: 10px;
  background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333);
}
.cp-summary-label { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--text-primary, #e0e0e0); }
.cp-summary-bar-wrap {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-bottom: 8px; overflow: hidden;
}
.cp-summary-bar { height: 100%; border-radius: 3px; background: #4caf50; transition: width 0.3s; }
.cp-summary-nums { display: flex; gap: 10px; font-size: 14px; }
.cp-num-published { color: #4caf50; }
.cp-num-scheduled { color: #42a5f5; }
.cp-num-not-posted { color: #999; }
.cp-gap-alert {
  margin: 12px 0; padding: 12px 16px; border-radius: 8px;
  background: rgba(255,152,0,0.08); border: 1px solid rgba(255,152,0,0.3);
}
.cp-gap-header { font-weight: 600; color: #ff9800; margin-bottom: 8px; font-size: 14px; }
.cp-gap-list { display: flex; flex-direction: column; gap: 4px; }
.cp-gap-row { display: flex; gap: 10px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.cp-gap-ep { font-weight: 600; min-width: 60px; color: var(--text-primary, #e0e0e0); }
.cp-gap-title { flex: 1; min-width: 100px; color: var(--text-secondary, #aaa); }
.cp-gap-posted { color: #4caf50; }
.cp-gap-missing { color: #e53935; }
.cp-gap-more { color: #999; font-size: 14px; font-style: italic; margin-top: 4px; }
.cp-table-wrap { overflow-x: auto; margin-top: 16px; }
.cp-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--card-bg, #1e1e2e); border-radius: 8px; overflow: hidden;
}
.cp-table th, .cp-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border, #333); }
.cp-table thead th { background: rgba(255,255,255,0.04); font-weight: 600; color: var(--text-secondary, #aaa); font-size: 14px; }
.cp-th-ep { width: 70px; }
.cp-th-chars { width: 70px; }
.cp-td-ep { font-weight: 600; white-space: nowrap; color: var(--text-primary, #e0e0e0); }
.cp-td-title { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, #aaa); }
.cp-td-pf { white-space: nowrap; }
.cp-td-chars { color: #999; text-align: right; }
.cp-empty { text-align: center; color: #666; padding: 24px; }
.cp-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.cp-badge-published { background: rgba(76,175,80,0.15); color: #4caf50; }
.cp-badge-scheduled { background: rgba(66,165,245,0.15); color: #42a5f5; }
.cp-badge-not-posted { background: rgba(255,255,255,0.05); color: #666; }
.cp-badge-partial { background: rgba(255,152,0,0.15); color: #ff9800; }
.cp-base-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.cp-base-published { background: rgba(76,175,80,0.15); color: #4caf50; }
.cp-base-scheduled { background: rgba(66,165,245,0.15); color: #42a5f5; }
.cp-base-finalized { background: rgba(129,140,248,0.15); color: #818cf8; }
.cp-base-partial { background: rgba(255,152,0,0.15); color: #ff9800; }
.cp-base-draft { background: rgba(255,255,255,0.05); color: #666; }
.cp-base-empty { background: rgba(255,255,255,0.03); color: #555; }
.cp-date { display: block; font-size: 14px; color: #888; margin-top: 2px; }

/* ─── Release Calendar (Strike #82) ─── */
.rc-panel { margin-bottom: 24px; }
.rc-desc { color: var(--text-secondary, #aaa); font-size: 14px; margin-bottom: 10px; }
.rc-stats { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.rc-stat-card {
  background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 6px; padding: 10px 14px; min-width: 120px; flex: 1;
}
.rc-stat-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-bottom: 4px; }
.rc-stat-value { font-size: 14px; font-weight: 600; color: var(--text-primary, #e0e0e0); }
.rc-cadence-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.rc-cadence-excellent { background: rgba(76,175,80,0.2); color: #4caf50; }
.rc-cadence-good { background: rgba(33,150,243,0.2); color: #42a5f5; }
.rc-cadence-regular { background: rgba(255,193,7,0.2); color: #ffc107; }
.rc-cadence-irregular { background: rgba(244,67,54,0.2); color: #f44336; }
.rc-cadence-unknown { background: rgba(255,255,255,0.05); color: #666; }
.rc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0; }
.rc-nav-label { font-size: 16px; font-weight: 600; color: var(--text-primary, #e0e0e0); min-width: 120px; text-align: center; }
.rc-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 8px 0 16px; }
.rc-day-header {
  text-align: center; font-size: 14px; font-weight: 600; padding: 6px 0;
  color: var(--text-secondary, #aaa); background: var(--card-bg, #1e1e2e);
}
.rc-day {
  min-height: 72px; background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #2a2a3a);
  border-radius: 4px; padding: 4px; position: relative;
}
.rc-day-empty { background: transparent; border-color: transparent; min-height: 0; }
.rc-day-today { border-color: #42a5f5; box-shadow: 0 0 4px rgba(66,165,245,0.3); }
.rc-day-has-events { background: var(--card-bg-hover, #252540); }
.rc-day-num { font-size: 14px; font-weight: 600; color: var(--text-secondary, #aaa); margin-bottom: 2px; }
.rc-day-today .rc-day-num { color: #42a5f5; }
.rc-event {
  display: flex; align-items: center; gap: 3px; font-size: 14px; padding: 1px 3px;
  margin-bottom: 1px; border-radius: 2px; background: rgba(255,255,255,0.03);
  overflow: hidden; white-space: nowrap;
}
.rc-event-icon { font-size: 14px; flex-shrink: 0; }
.rc-event-label { overflow: hidden; text-overflow: ellipsis; color: var(--text-primary, #ccc); }
.rc-event-more { font-size: 14px; color: var(--text-secondary, #888); text-align: center; }
.rc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font-size: 14px; color: var(--text-secondary, #aaa); }
.rc-legend-item { display: flex; align-items: center; gap: 4px; }
.rc-legend-icon { font-size: 14px; }
.rc-legend-color { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* ─── Writing Velocity (Strike #83) ─── */
.wv-stats { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.wv-stat-card { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px 16px; min-width: 130px; flex: 1; }
.wv-stat-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-bottom: 4px; }
.wv-stat-value { font-size: 16px; font-weight: 600; color: var(--text-primary, #eee); }
.wv-pace-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.wv-pace-accelerating { background: rgba(76,175,80,0.2); color: #4caf50; }
.wv-pace-steady { background: rgba(33,150,243,0.2); color: #42a5f5; }
.wv-pace-slowing { background: rgba(255,193,7,0.2); color: #ffc107; }
.wv-pace-stalled { background: rgba(244,67,54,0.2); color: #f44336; }
.wv-pace-unknown { background: rgba(255,255,255,0.05); color: #666; }
.wv-forecast { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 16px; margin: 12px 0; }
.wv-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #eee); margin: 0 0 12px; }
.wv-forecast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.wv-forecast-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border, #333); }
.wv-forecast-label { font-size: 14px; color: var(--text-secondary, #aaa); }
.wv-forecast-value { font-size: 14px; font-weight: 600; color: var(--text-primary, #eee); }
.wv-forecast-date { color: #42a5f5; }
.wv-daily { margin-top: 16px; }
.wv-bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 8px 0 16px; padding: 0 4px; background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; }
.wv-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.wv-bar { width: 80%; background: linear-gradient(180deg, #42a5f5, #1565c0); border-radius: 2px 2px 0 0; transition: height 0.3s ease; min-height: 2px; }
.wv-bar-label { font-size: 14px; color: var(--text-secondary, #888); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wv-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; }
.wv-table td { padding: 5px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #ccc); }
.wv-table tr:hover td { background: rgba(255,255,255,0.03); }
/* ── Pacing Heatmap (ph-) Strike #84 ── */
.ph-summary { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.ph-card { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px 16px; min-width: 110px; flex: 1; text-align: center; }
.ph-card-value { font-size: 18px; font-weight: 700; color: var(--text-primary, #eee); }
.ph-card-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 4px; }
.ph-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 12px 0; padding: 8px 12px; background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; }
.ph-legend-title { font-size: 14px; font-weight: 600; color: var(--text-secondary, #aaa); }
.ph-legend-item { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-secondary, #ccc); }
.ph-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); }
.ph-swatch.ph-excellent { background: rgba(76,175,80,0.7); }
.ph-swatch.ph-good { background: rgba(33,150,243,0.6); }
.ph-swatch.ph-moderate { background: rgba(255,193,7,0.5); }
.ph-swatch.ph-low { background: rgba(244,67,54,0.5); }
.ph-swatch.ph-high { background: rgba(255,152,0,0.6); }
.ph-swatch.ph-none { background: rgba(255,255,255,0.05); }
.ph-grid-wrapper { overflow-x: auto; margin: 12px 0; }
.ph-grid { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.ph-grid th, .ph-grid td { padding: 4px 6px; text-align: center; border: 1px solid var(--border, #333); }
.ph-dim-header { min-width: 80px; }
.ph-ch-header { font-weight: 600; color: var(--text-secondary, #aaa); writing-mode: horizontal-tb; min-width: 32px; background: var(--card-bg, #1e1e2e); }
.ph-dim-label { text-align: left; font-weight: 600; color: var(--text-primary, #ccc); background: var(--card-bg, #1e1e2e); white-space: nowrap; position: sticky; left: 0; z-index: 3; }
.ph-cell { cursor: pointer; font-size: 14px; color: var(--text-primary, #eee); transition: transform 0.15s, box-shadow 0.15s; }
.ph-cell:hover { transform: scale(1.15); box-shadow: 0 0 6px rgba(255,255,255,0.2); z-index: 2; position: relative; }
.ph-excellent { background: rgba(76,175,80,0.35); }
.ph-good { background: rgba(33,150,243,0.3); }
.ph-moderate { background: rgba(255,193,7,0.25); }
.ph-low { background: rgba(244,67,54,0.25); }
.ph-high { background: rgba(255,152,0,0.3); }
.ph-none { background: rgba(255,255,255,0.03); color: #555; }
.ph-thresholds { margin: 12px 0; }
.ph-thresholds summary { font-size: 14px; color: var(--text-secondary, #aaa); cursor: pointer; padding: 6px 0; }
.ph-threshold-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.ph-threshold-table th { text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; }
.ph-threshold-table td { padding: 4px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #ccc); }
/* ── Dialogue/Narration Ratio (dr-) Strike #85 ── */
.dr-summary { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.dr-card { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px 16px; min-width: 100px; flex: 1; text-align: center; }
.dr-card-value { font-size: 18px; font-weight: 700; color: var(--text-primary, #eee); }
.dr-card-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 4px; }
.dr-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 12px 0; padding: 8px 12px; background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; }
.dr-legend-title { font-size: 14px; font-weight: 600; color: var(--text-secondary, #aaa); }
.dr-legend-item { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-secondary, #ccc); }
.dr-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); }
.dr-swatch.dr-balanced { background: rgba(76,175,80,0.7); }
.dr-swatch.dr-acceptable { background: rgba(33,150,243,0.6); }
.dr-swatch.dr-dialogue-heavy { background: rgba(255,152,0,0.7); }
.dr-swatch.dr-narration-heavy { background: rgba(156,39,176,0.6); }
.dr-swatch.dr-none { background: rgba(255,255,255,0.05); }
.dr-chart-wrapper { overflow-x: auto; margin: 16px 0; }
.dr-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 8px 0; border-bottom: 1px solid var(--border, #444); }
.dr-bar-col { display: flex; flex-direction: column; align-items: center; min-width: 24px; flex: 1; max-width: 40px; cursor: pointer; height: 100%; justify-content: flex-end; }
.dr-bar-col:hover { opacity: 0.8; }
.dr-bar-stack { display: flex; flex-direction: column; width: 100%; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; }
.dr-bar-dialogue { background: rgba(255,193,7,0.7); }
.dr-bar-narration { background: rgba(100,181,246,0.5); }
.dr-bar-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 4px; }
.dr-bar-ratio { font-size: 14px; font-weight: 600; }
.dr-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 14px; font-weight: 600; }
.dr-badge.dr-balanced { background: rgba(76,175,80,0.2); color: #4caf50; }
.dr-badge.dr-acceptable { background: rgba(33,150,243,0.15); color: #42a5f5; }
.dr-badge.dr-dialogue-heavy { background: rgba(255,152,0,0.2); color: #ff9800; }
.dr-badge.dr-narration-heavy { background: rgba(156,39,176,0.2); color: #ab47bc; }
.dr-badge.dr-none { background: rgba(255,255,255,0.05); color: #555; }
.dr-table-wrapper { overflow-x: auto; margin: 16px 0; }
.dr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dr-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; }
.dr-table td { padding: 5px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #ccc); }
.dr-table tr:hover td { background: rgba(255,255,255,0.03); }
.dr-thresholds { margin: 12px 0; }
.dr-thresholds summary { font-size: 14px; color: var(--text-secondary, #aaa); cursor: pointer; padding: 6px 0; }
.dr-threshold-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.dr-threshold-table th { text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; }
.dr-threshold-table td { padding: 4px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #ccc); }

/* === Character Appearances Tracker (Strike #86) === */
.ca-summary { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.ca-card { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px 16px; min-width: 100px; flex: 1; text-align: center; }
.ca-card-value { font-size: 18px; font-weight: 700; color: var(--text-primary, #eee); }
.ca-card-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 4px; }
.ca-gap-warn { color: #f44336 !important; }
.ca-gap-alerts { background: rgba(255,152,0,0.08); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.ca-gap-title { font-size: 14px; font-weight: 600; color: #ff9800; margin: 0 0 8px 0; }
.ca-gap-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; flex-wrap: wrap; }
.ca-gap-char { font-weight: 600; color: var(--text-primary, #eee); }
.ca-gap-role { font-size: 14px; color: var(--text-secondary, #aaa); }
.ca-gap-range { color: var(--text-secondary, #ccc); }
.ca-gap-len { font-weight: 600; }
.ca-gap-overflow { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 4px; }
.ca-severity-critical { color: #f44336; }
.ca-severity-critical .ca-gap-len { color: #f44336; }
.ca-severity-warning { color: #ff9800; }
.ca-severity-warning .ca-gap-len { color: #ff9800; }
.ca-severity-info { color: #2196f3; }
.ca-severity-info .ca-gap-len { color: #2196f3; }
.ca-legend { display: flex; gap: 16px; margin: 12px 0; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary, #aaa); }
.ca-legend-item { display: flex; align-items: center; gap: 4px; }
.ca-heatmap-wrap { overflow-x: auto; margin: 12px 0; }
.ca-heatmap { border-collapse: collapse; font-size: 14px; width: 100%; }
.ca-heatmap th { padding: 4px 6px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; white-space: nowrap; }
.ca-char-header { text-align: left; position: sticky; left: 0; background: var(--bg, #121212); z-index: 2; min-width: 80px; }
.ca-ch-header { text-align: center; cursor: pointer; font-size: 14px; }
.ca-ch-header:hover { color: var(--accent, #7c4dff); }
.ca-char-name { font-weight: 600; color: var(--text-primary, #eee); position: sticky; left: 0; background: var(--bg, #121212); z-index: 1; padding: 4px 8px; white-space: nowrap; border-bottom: 1px solid var(--border, #333); }
.ca-cell { text-align: center; padding: 4px 4px; border-bottom: 1px solid var(--border, #222); cursor: pointer; font-size: 14px; min-width: 28px; }
.ca-cell:hover { outline: 2px solid var(--accent, #7c4dff); }
.ca-absent { background: rgba(100,100,100,0.15); color: transparent; }
.ca-low { background: rgba(33,150,243,0.25); color: #90caf9; }
.ca-medium { background: rgba(76,175,80,0.3); color: #a5d6a7; }
.ca-high { background: rgba(255,152,0,0.35); color: #ffcc80; }
.ca-total { text-align: center; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #eee); }
.ca-details { margin: 12px 0; }
.ca-details summary { font-size: 14px; color: var(--text-secondary, #aaa); cursor: pointer; padding: 6px 0; }
.ca-detail-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.ca-detail-table th { text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--border, #444); color: var(--text-secondary, #aaa); font-weight: 600; }
.ca-detail-table td { padding: 4px 8px; border-bottom: 1px solid var(--border, #333); color: var(--text-primary, #ccc); }
.ca-detail-table tr:hover td { background: rgba(255,255,255,0.03); }
.ca-status-badge { padding: 2px 8px; border-radius: 4px; font-size: 14px; font-weight: 600; }
.ca-status-badge.ca-severity-critical { background: rgba(244,67,54,0.15); }
.ca-status-badge.ca-severity-warning { background: rgba(255,152,0,0.15); }
.ca-status-badge.ca-severity-info { background: rgba(33,150,243,0.15); }

/* Work Health Summary (wh-) */
.wh-overall { padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 16px; }
.wh-overall-grade { font-size: 28px; font-weight: 800; }
.wh-overall-title { font-size: 14px; margin-top: 4px; opacity: 0.8; }
.wh-excellent { background: rgba(76,175,80,0.15); color: #4caf50; }
.wh-good { background: rgba(33,150,243,0.15); color: #2196f3; }
.wh-fair { background: rgba(255,152,0,0.15); color: #ff9800; }
.wh-poor { background: rgba(244,67,54,0.15); color: #f44336; }
.wh-none { background: rgba(158,158,158,0.1); color: #9e9e9e; }
.wh-issues { margin-bottom: 16px; }
.wh-section-title { font-size: 14px; font-weight: 700; margin: 12px 0 8px; color: var(--text-primary, #eee); }
.wh-issue { padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 14px; }
.wh-sev-critical { background: rgba(244,67,54,0.12); color: #f44336; }
.wh-sev-warning { background: rgba(255,152,0,0.12); color: #ff9800; }
.wh-sev-info { background: rgba(33,150,243,0.12); color: #2196f3; }
.wh-issue-sev { font-weight: 700; text-transform: uppercase; font-size: 14px; }
.wh-dimensions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wh-dim-card { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 14px; }
.wh-dim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wh-dim-label { font-size: 14px; font-weight: 700; color: var(--text-primary, #eee); }
.wh-badge { padding: 2px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; }
.wh-dim-value { font-size: 22px; font-weight: 800; color: var(--text-primary, #eee); margin-bottom: 6px; }
.wh-dim-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.wh-dim-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.wh-dim-bar-fill.wh-excellent { background: #4caf50; }
.wh-dim-bar-fill.wh-good { background: #2196f3; }
.wh-dim-bar-fill.wh-fair { background: #ff9800; }
.wh-dim-bar-fill.wh-poor { background: #f44336; }
.wh-dim-detail { font-size: 14px; color: var(--text-secondary, #aaa); margin-top: 2px; }
.wh-scene-status { margin-bottom: 16px; }
.wh-status-bars { display: flex; flex-direction: column; gap: 4px; }
.wh-status-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wh-status-label { min-width: 80px; color: var(--text-secondary, #aaa); text-align: right; }
.wh-status-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.wh-status-bar-fill { height: 100%; background: var(--accent, #7c4dff); border-radius: 4px; }
.wh-status-count { min-width: 80px; font-size: 14px; color: var(--text-secondary, #aaa); }
.wh-meta { font-size: 14px; color: var(--text-secondary, #888); text-align: right; margin-top: 8px; }

/* === Strike #88: Foreshadow Timeline (ftl-) === */
.ftl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ftl-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 10px; text-align: center; }
.ftl-card-label { font-size: 14px; color: var(--text-secondary, #aaa); margin-bottom: 4px; }
.ftl-card-value { font-size: 18px; font-weight: 700; color: var(--text-primary, #eee); }
.ftl-card-warn .ftl-card-value { color: #ff9800; }
.ftl-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 14px; color: var(--text-secondary, #aaa); }
.ftl-legend-item { display: flex; align-items: center; gap: 4px; }
.ftl-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ftl-legend-dot.ftl-resolved { background: #4caf50; }
.ftl-legend-dot.ftl-active { background: #42a5f5; }
.ftl-legend-dot.ftl-overdue { background: #ff9800; }
.ftl-legend-dot.ftl-abandoned { background: #666; }
.ftl-legend-marker { font-size: 14px; }
.ftl-chart { margin-bottom: 16px; overflow-x: auto; }
.ftl-chart-header { display: flex; align-items: flex-end; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 4px; }
.ftl-chart-label-col { min-width: 160px; max-width: 160px; font-size: 14px; color: var(--text-secondary, #aaa); padding-right: 8px; }
.ftl-chart-bar-col { flex: 1; position: relative; height: 18px; min-width: 300px; }
.ftl-tick { position: absolute; bottom: 0; font-size: 14px; color: var(--text-secondary, #888); transform: translateX(-50%); }
.ftl-arc-row { display: flex; align-items: center; padding: 2px 0; min-height: 22px; }
.ftl-arc-row:hover { background: rgba(255,255,255,0.03); }
.ftl-arc-label { min-width: 160px; max-width: 160px; font-size: 14px; color: var(--text-primary, #ddd); padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftl-arc-importance { font-size: 14px; padding: 1px 4px; border-radius: 3px; }
.ftl-imp-major { background: rgba(244,67,54,0.2); color: #ef5350; }
.ftl-imp-normal { background: rgba(66,165,245,0.15); color: #90caf9; }
.ftl-imp-minor { background: rgba(255,255,255,0.06); color: #999; }
.ftl-arc-track { flex: 1; position: relative; height: 14px; min-width: 300px; background: rgba(255,255,255,0.02); border-radius: 2px; }
.ftl-arc-bar { position: absolute; top: 1px; height: 12px; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; font-size: 14px; transition: opacity 0.15s; }
.ftl-arc-bar:hover { opacity: 0.85; }
.ftl-arc-bar.ftl-resolved { background: rgba(76,175,80,0.5); border: 1px solid #4caf50; }
.ftl-arc-bar.ftl-active { background: rgba(66,165,245,0.4); border: 1px solid #42a5f5; }
.ftl-arc-bar.ftl-overdue { background: rgba(255,152,0,0.4); border: 1px solid #ff9800; }
.ftl-arc-bar.ftl-abandoned { background: rgba(100,100,100,0.3); border: 1px solid #666; }
.ftl-bar-start { color: #fff; font-size: 14px; }
.ftl-bar-end { color: #fff; font-size: 14px; }
.ftl-bar-partial { position: absolute; top: -2px; font-size: 14px; color: #ffeb3b; transform: translateX(-50%); }
.ftl-bar-target { position: absolute; top: -3px; font-size: 14px; color: #ff9800; transform: translateX(-50%); }
.ftl-arc-status { min-width: 60px; text-align: center; font-size: 14px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.ftl-arc-status.ftl-resolved { background: rgba(76,175,80,0.15); color: #4caf50; }
.ftl-arc-status.ftl-active { background: rgba(66,165,245,0.15); color: #42a5f5; }
.ftl-arc-status.ftl-overdue { background: rgba(255,152,0,0.15); color: #ff9800; }
.ftl-arc-status.ftl-abandoned { background: rgba(100,100,100,0.15); color: #999; }
.ftl-section-title { font-size: 14px; color: var(--text-primary, #ddd); margin: 12px 0 8px; }
.ftl-density { margin-bottom: 16px; }
.ftl-density-chart { display: flex; align-items: flex-end; gap: 2px; height: 60px; padding: 0 0 16px; position: relative; }
.ftl-density-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; cursor: pointer; }
.ftl-density-col:hover .ftl-density-bar { opacity: 0.8; }
.ftl-density-bar { width: 100%; min-width: 3px; background: var(--accent, #7c4dff); border-radius: 2px 2px 0 0; transition: height 0.2s; }
.ftl-density-label { font-size: 14px; color: var(--text-secondary, #888); margin-top: 2px; position: absolute; bottom: 0; }
.ftl-details { margin-top: 8px; }
.ftl-details summary { cursor: pointer; font-size: 14px; color: var(--text-secondary, #aaa); padding: 4px 0; }
.ftl-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.ftl-table th { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary, #aaa); font-weight: 600; }
.ftl-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-primary, #ddd); }
.ftl-table td[data-ftl-chapter] { cursor: pointer; color: var(--accent, #7c4dff); }
.ftl-table td[data-ftl-chapter]:hover { text-decoration: underline; }
.ftl-resolved-row { }
.ftl-active-row { }
.ftl-overdue-row td { color: #ff9800; }
.ftl-abandoned-row td { color: #999; }
.ftl-badge { font-size: 14px; padding: 1px 6px; border-radius: 3px; }
.ftl-badge.ftl-resolved { background: rgba(76,175,80,0.15); color: #4caf50; }
.ftl-badge.ftl-active { background: rgba(66,165,245,0.15); color: #42a5f5; }
.ftl-badge.ftl-overdue { background: rgba(255,152,0,0.15); color: #ff9800; }
.ftl-badge.ftl-abandoned { background: rgba(100,100,100,0.15); color: #999; }

/* === Word Repetition (wr-) Strike #89 === */
.wr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.wr-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
.wr-card-value { font-size: 20px; font-weight: bold; color: var(--accent); }
.wr-card-label { font-size: 14px; color: #999; margin-top: 2px; }
.wr-card.wr-warn .wr-card-value { color: #ff9800; }
.wr-card.wr-good .wr-card-value { color: #4caf50; }
.wr-section { margin-bottom: 16px; }
.wr-section-title { font-size: 14px; font-weight: bold; color: var(--text); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.wr-table-wrap { overflow-x: auto; }
.wr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wr-table th { background: var(--bg2); color: #999; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); font-weight: normal; }
.wr-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); }
.wr-table tr:hover td { background: rgba(255,255,255,0.03); }
.wr-word { font-weight: bold; color: #e0e0e0; }
.wr-count { color: #ff9800; font-weight: bold; }
.wr-freq { color: #42a5f5; font-size: 14px; }
.wr-chapters { font-size: 14px; color: #888; }
.wr-starter { font-style: italic; color: #ce93d8; }
.wr-bar-wrap { display: flex; align-items: center; gap: 6px; }
.wr-bar { height: 14px; background: var(--accent); border-radius: 3px; min-width: 2px; transition: width 0.3s; }
.wr-bar-label { font-size: 14px; color: #999; white-space: nowrap; }
.wr-diversity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.wr-diversity-item { display: flex; align-items: center; gap: 8px; background: var(--bg2); border-radius: 4px; padding: 6px 10px; font-size: 14px; }
.wr-diversity-num { color: #999; min-width: 40px; }
.wr-diversity-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.wr-diversity-score { font-weight: bold; min-width: 36px; text-align: right; }
.wr-diversity-excellent { color: #4caf50; }
.wr-diversity-good { color: #8bc34a; }
.wr-diversity-fair { color: #ff9800; }
.wr-diversity-poor { color: #f44336; }
.wr-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #999; margin-bottom: 10px; }
.wr-legend-item { display: flex; align-items: center; gap: 4px; }
.wr-legend-dot { width: 10px; height: 10px; border-radius: 2px; }
.wr-legend-dot.wr-diversity-excellent { background: #4caf50; }
.wr-legend-dot.wr-diversity-good { background: #8bc34a; }
.wr-legend-dot.wr-diversity-fair { background: #ff9800; }
.wr-legend-dot.wr-diversity-poor { background: #f44336; }

/* === Chapter Quality Scorecard (cs-) Strike #90 === */
.cs-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.cs-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
.cs-card-value { font-size: 20px; font-weight: bold; color: var(--accent); }
.cs-card-label { font-size: 14px; color: #999; margin-top: 2px; }
.cs-card.cs-excellent .cs-card-value { color: #4caf50; }
.cs-card.cs-good .cs-card-value { color: #8bc34a; }
.cs-card.cs-fair .cs-card-value { color: #ff9800; }
.cs-card.cs-poor .cs-card-value { color: #f44336; }
.cs-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #999; margin-bottom: 10px; }
.cs-legend-item { display: flex; align-items: center; gap: 4px; }
.cs-legend-dot { width: 10px; height: 10px; border-radius: 2px; }
.cs-legend-dot.cs-excellent { background: #4caf50; }
.cs-legend-dot.cs-good { background: #8bc34a; }
.cs-legend-dot.cs-fair { background: #ff9800; }
.cs-legend-dot.cs-poor { background: #f44336; }
.cs-table-wrap { overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs-table th { background: var(--bg2); color: #999; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); font-weight: normal; white-space: nowrap; }
.cs-table th.cs-sortable { cursor: pointer; user-select: none; }
.cs-table th.cs-sortable:hover { color: var(--text); background: var(--bg3); }
.cs-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); text-align: center; }
.cs-table tr:hover td { background: rgba(255,255,255,0.03); cursor: pointer; }
.cs-table .cs-num { text-align: left; white-space: nowrap; color: #999; }
.cs-table .cs-title { text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 14px; }
.cs-badge.cs-excellent { background: rgba(76,175,80,0.2); color: #4caf50; }
.cs-badge.cs-good { background: rgba(139,195,58,0.2); color: #8bc34a; }
.cs-badge.cs-fair { background: rgba(255,152,0,0.2); color: #ff9800; }
.cs-badge.cs-poor { background: rgba(244,67,54,0.2); color: #f44336; }
.cs-dim-cell { display: inline-block; min-width: 28px; padding: 1px 4px; border-radius: 3px; font-size: 14px; font-weight: bold; }
.cs-dim-cell.cs-excellent { color: #4caf50; }
.cs-dim-cell.cs-good { color: #8bc34a; }
.cs-dim-cell.cs-fair { color: #ff9800; }
.cs-dim-cell.cs-poor { color: #f44336; }
.cs-weakness { font-size: 14px; color: #ff9800; font-weight: bold; }
.cs-notes-badge { background: rgba(255,152,0,0.2); color: #ff9800; padding: 1px 6px; border-radius: 3px; font-size: 14px; font-weight: bold; }
/* === Strike #91: Audit Score Trend (ast- prefix) === */
.ast-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ast-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
.ast-card-value { font-size: 20px; font-weight: bold; color: var(--accent); }
.ast-card-label { font-size: 14px; color: #999; margin-top: 2px; }
.ast-card.ast-excellent .ast-card-value { color: #4caf50; }
.ast-card.ast-good .ast-card-value { color: #8bc34a; }
.ast-card.ast-fair .ast-card-value { color: #ff9800; }
.ast-card.ast-poor .ast-card-value { color: #f44336; }
.ast-card.ast-warn .ast-card-value { color: #ff9800; }
.ast-section { margin-bottom: 16px; }
.ast-section-title { font-size: 14px; font-weight: bold; color: var(--text); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; cursor: pointer; }
.ast-dist { display: flex; flex-direction: column; gap: 4px; }
.ast-dist-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ast-dist-label { min-width: 50px; text-align: right; color: #999; font-family: monospace; }
.ast-dist-bar-wrap { flex: 1; height: 16px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; }
.ast-dist-bar { height: 100%; border-radius: 3px; min-width: 2px; transition: width 0.3s; }
.ast-dist-count { min-width: 30px; text-align: right; color: var(--text); font-weight: bold; }
.ast-chart-wrap { overflow-x: auto; margin-bottom: 8px; }
.ast-svg { width: 100%; max-width: 700px; height: auto; display: block; }
.ast-table-wrap { overflow-x: auto; }
.ast-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ast-table th { background: var(--bg2); color: #999; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); font-weight: normal; white-space: nowrap; }
.ast-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); }
.ast-table tr:hover td { background: rgba(255,255,255,0.03); }
.ast-score-badge { display: inline-block; min-width: 32px; padding: 1px 6px; border-radius: 4px; font-weight: bold; font-size: 14px; text-align: center; }
.ast-score-badge.ast-excellent { background: rgba(76,175,80,0.2); color: #4caf50; }
.ast-score-badge.ast-good { background: rgba(139,195,58,0.2); color: #8bc34a; }
.ast-score-badge.ast-fair { background: rgba(255,152,0,0.2); color: #ff9800; }
.ast-score-badge.ast-poor { background: rgba(244,67,54,0.2); color: #f44336; }
.ast-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888; }
.ast-date { font-size: 14px; color: #888; white-space: nowrap; }

/* ── Canon Fact Conflict Detector (cfc-) ── */
.cfc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.cfc-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 10px; text-align: center; }
.cfc-card-value { font-size: 1.4em; font-weight: 700; color: #333; }
.cfc-card-label { font-size: 0.875em; color: #888; margin-top: 2px; }
.cfc-card.cfc-warn { border-color: #ff9800; background: rgba(255,152,0,0.08); }
.cfc-card.cfc-warn .cfc-card-value { color: #e65100; }
.cfc-card.cfc-critical { border-color: #f44336; background: rgba(244,67,54,0.08); }
.cfc-card.cfc-critical .cfc-card-value { color: #c62828; }
.cfc-card.cfc-info { border-color: #2196f3; background: rgba(33,150,243,0.08); }
.cfc-card.cfc-info .cfc-card-value { color: #1565c0; }
.cfc-section-title { font-size: 1em; margin: 16px 0 8px; color: #333; border-bottom: 1px solid #e9ecef; padding-bottom: 4px; }
.cfc-table { width: 100%; border-collapse: collapse; font-size: 0.875em; margin-bottom: 12px; }
.cfc-table th { background: #f5f5f5; padding: 6px 8px; text-align: left; border-bottom: 2px solid #ddd; font-weight: 600; white-space: nowrap; }
.cfc-table td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.cfc-table tr:hover td { background: #fafafa; }
.cfc-entity { font-weight: 600; color: #1a237e; white-space: nowrap; }
.cfc-fact-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfc-chapter { color: #1565c0; cursor: pointer; white-space: nowrap; text-decoration: underline; }
.cfc-chapter:hover { color: #0d47a1; }
.cfc-lock { font-size: 0.875em; }
.cfc-severity-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.875em; font-weight: 600; }
.cfc-severity-badge.cfc-high { background: rgba(244,67,54,0.15); color: #c62828; }
.cfc-severity-badge.cfc-medium { background: rgba(255,152,0,0.15); color: #e65100; }
.cfc-severity-badge.cfc-low { background: rgba(76,175,80,0.15); color: #2e7d32; }
.cfc-similarity { font-weight: 600; color: #1565c0; }
.cfc-reason { font-size: 0.875em; color: #666; max-width: 280px; }
.cfc-no-issues { padding: 12px; color: #4caf50; font-size: 0.9em; text-align: center; }
.cfc-details { margin: 8px 0; }
.cfc-details summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: #333; }
.cfc-details summary:hover { color: #1565c0; }
/* ── Chapter Readiness Matrix (crm-) ── */
.crm-panel { padding: 0; }
.crm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.crm-header h3 { margin: 0; }
.crm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.crm-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 10px; text-align: center; }
.crm-card-value { font-size: 1.4em; font-weight: 700; color: #333; }
.crm-card-label { font-size: 0.875em; color: #888; margin-top: 2px; }
.crm-card-ready { border-color: #4caf50; background: rgba(76,175,80,0.08); }
.crm-card-ready .crm-card-value { color: #2e7d32; }
.crm-card-warn { border-color: #ff9800; background: rgba(255,152,0,0.08); }
.crm-card-warn .crm-card-value { color: #e65100; }
.crm-card-critical { border-color: #f44336; background: rgba(244,67,54,0.08); }
.crm-card-critical .crm-card-value { color: #c62828; }
.crm-progress-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; background: #e9ecef; }
.crm-progress-ready { background: #4caf50; }
.crm-progress-review { background: #ff9800; }
.crm-progress-blocked { background: #f44336; }
.crm-legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 0.875em; color: #666; flex-wrap: wrap; }
.crm-legend-item { display: flex; align-items: center; gap: 4px; }
.crm-dot { font-size: 0.9em; }
.crm-dot.crm-ready { color: #4caf50; }
.crm-dot.crm-review { color: #ff9800; }
.crm-dot.crm-blocked { color: #f44336; }
.crm-dot.crm-na { color: #bdbdbd; }
.crm-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 0.875em; }
.crm-table th { background: #f5f5f5; padding: 6px 8px; border-bottom: 2px solid #ddd; white-space: nowrap; font-size: 0.875em; }
.crm-table td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.crm-sortable { cursor: pointer; user-select: none; }
.crm-sortable:hover { background: #e8e8e8; }
.crm-chapter-num { cursor: pointer; color: #1565c0; font-weight: 600; }
.crm-chapter-num:hover { text-decoration: underline; }
.crm-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cell { text-align: center; white-space: nowrap; }
.crm-icon { margin-right: 3px; font-size: 0.875em; }
.crm-cell-label { font-size: 0.875em; }
.crm-ready { color: #2e7d32; }
.crm-ready .crm-icon { color: #4caf50; }
.crm-review { color: #e65100; }
.crm-review .crm-icon { color: #ff9800; }
.crm-blocked { color: #c62828; }
.crm-blocked .crm-icon { color: #f44336; }
.crm-na { color: #9e9e9e; }
.crm-overall { font-weight: 600; }
.crm-row-blocked { background: rgba(244,67,54,0.04); }
.crm-row-needs_review { background: rgba(255,152,0,0.04); }
.crm-dim-summary { margin-top: 8px; }
.crm-dim-summary summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: #333; }
.crm-dim-summary summary:hover { color: #1565c0; }
.crm-dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 8px 0; }
.crm-dim-card { border: 1px solid #e9ecef; border-radius: 6px; padding: 8px; }
.crm-dim-name { font-weight: 600; font-size: 0.875em; margin-bottom: 4px; }
.crm-dim-bars { display: flex; height: 20px; border-radius: 4px; overflow: hidden; font-size: 0.875em; line-height: 1.7; text-align: center; color: #fff; }
.crm-bar-ready { background: #4caf50; }
.crm-bar-review { background: #ff9800; }
.crm-bar-blocked { background: #f44336; }
.crm-bar-na { background: #bdbdbd; }

/* ============================================================
   Strike #94: Scene Activity Log — シーン活動ログ
   ============================================================ */
.sal-loading { color: #888; font-style: italic; }
.sal-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sal-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 8px 12px; min-width: 70px; text-align: center; }
.sal-card-val { font-size: 1.3em; font-weight: 700; color: #1565c0; }
.sal-card-label { font-size: 0.875em; color: #666; margin-top: 2px; }
.sal-card-warn { border-color: #ff9800; background: rgba(255,152,0,0.06); }
.sal-card-warn .sal-card-val { color: #e65100; }
.sal-score-high { color: #2e7d32; }
.sal-score-mid { color: #f57f17; }
.sal-score-low { color: #c62828; }
.sal-timeline { position: relative; padding-left: 24px; }
.sal-timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: #dee2e6; }
.sal-date-sep { font-size: 0.875em; font-weight: 600; color: #555; margin: 12px 0 6px -24px; padding: 2px 8px; background: #f1f3f5; border-radius: 4px; display: inline-block; }
.sal-event { display: flex; gap: 8px; margin-bottom: 8px; position: relative; }
.sal-event-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 0.95em; margin-top: 1px; position: relative; z-index: 1; }
.sal-event-body { flex: 1; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; padding: 6px 10px; font-size: 0.875em; }
.sal-event-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.sal-event-type { font-weight: 600; color: #333; }
.sal-event-time { font-size: 0.875em; color: #999; }
.sal-event-detail { color: #555; line-height: 1.7; }
.sal-type-audit .sal-event-body { border-left: 3px solid #1565c0; }
.sal-type-note .sal-event-body { border-left: 3px solid #ff9800; }
.sal-type-version .sal-event-body { border-left: 3px solid #4caf50; }
.sal-type-candidate .sal-event-body { border-left: 3px solid #9c27b0; }
.sal-type-impact .sal-event-body { border-left: 3px solid #607d8b; }
.sal-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.875em; font-weight: 600; margin: 0 2px; }
.sal-badge-pass { background: #e8f5e9; color: #2e7d32; }
.sal-badge-fail { background: #ffebee; color: #c62828; }
.sal-badge-auto { background: #e3f2fd; color: #1565c0; }
.sal-badge-high { background: #fff3e0; color: #e65100; }
.sal-badge-low { background: #f5f5f5; color: #999; }
.sal-badge-open { background: #fff3e0; color: #e65100; }
.sal-badge-applied { background: #e8f5e9; color: #2e7d32; }
.sal-badge-dismissed { background: #f5f5f5; color: #888; }
.sal-badge-accepted { background: #e8f5e9; color: #2e7d32; }
.sal-badge-selected { background: #f3e5f5; color: #7b1fa2; }
.sal-badge-pending { background: #fff8e1; color: #f57f17; }
.sal-note-preview { display: inline-block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: #777; font-style: italic; }

/* === Editorial Pipeline Funnel (epf-) — Strike #95 === */
.epf-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.epf-card { flex: 1; min-width: 100px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; text-align: center; }
.epf-card-value { font-size: 1.4em; font-weight: bold; color: #e0e0e0; }
.epf-card-label { font-size: 0.875em; color: #888; margin-top: 2px; }
.epf-card-warn .epf-card-value { color: #f59e0b; }
.epf-card-info .epf-card-value { color: #3b82f6; }
.epf-card-ok .epf-card-value { color: #10b981; }
.epf-section-title { font-size: 0.95em; color: #aaa; margin: 12px 0 8px; }
.epf-funnel { background: #12121f; border: 1px solid #292940; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.epf-funnel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.epf-funnel-label { width: 140px; font-size: 0.875em; color: #ccc; text-align: right; white-space: nowrap; }
.epf-funnel-bar-wrap { flex: 1; background: #1a1a30; border-radius: 4px; height: 28px; overflow: hidden; }
.epf-funnel-bar { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: width 0.3s ease; min-width: 28px; }
.epf-funnel-count { font-size: 0.875em; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.epf-funnel-pct { width: 50px; font-size: 0.875em; color: #888; text-align: left; }
.epf-funnel-arrow { text-align: center; color: #555; font-size: 0.875em; margin: 0 0 2px 148px; }
.epf-table { width: 100%; border-collapse: collapse; font-size: 0.875em; margin-bottom: 12px; }
.epf-table th { background: #1a1a2e; color: #aaa; padding: 6px 8px; text-align: left; border-bottom: 1px solid #333; }
.epf-table td { padding: 5px 8px; border-bottom: 1px solid #222; color: #ccc; }
.epf-table tbody tr:hover { background: rgba(59,130,246,0.08); }
.epf-stage-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.epf-critical { color: #ef4444 !important; font-weight: bold; }
.epf-warning { color: #f59e0b !important; }
.epf-bottlenecks { margin-bottom: 16px; }
.epf-bn-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; border-left: 4px solid #555; }
.epf-bn-critical { border-left-color: #ef4444; background: rgba(239,68,68,0.08); }
.epf-bn-warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.08); }
.epf-bn-info { border-left-color: #3b82f6; background: rgba(59,130,246,0.08); }
.epf-bn-severity { font-size: 0.875em; font-weight: bold; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,0.08); color: #ddd; }
.epf-bn-label { color: #ccc; font-size: 0.875em; }
.epf-bn-detail { color: #888; font-size: 0.875em; margin-left: auto; }
.epf-details-section { margin-top: 8px; }
.epf-clickable { cursor: pointer; }
.epf-clickable:hover { color: #60a5fa; text-decoration: underline; }
.epf-sortable { cursor: pointer; user-select: none; }
.epf-sortable:hover { color: #60a5fa; }
.epf-stage-badge { display: inline-block; padding: 2px 8px; border: 1px solid; border-radius: 10px; font-size: 0.875em; }
.epf-score-high { color: #10b981; }
.epf-score-low { color: #ef4444; }
.epf-hg-fail { background: #fecaca; color: #b91c1c; padding: 1px 4px; border-radius: 3px; font-size: 0.875em; }
.epf-issue-badge { background: #fff3e0; color: #e65100; padding: 1px 6px; border-radius: 3px; font-size: 0.875em; }
.epf-more { text-align: center; color: #666; font-style: italic; }
.epf-metrics { margin-bottom: 12px; }
.epf-detail-table th { cursor: pointer; }

/* === Strike #96: Smart Next Action Panel (nxa-) === */
.nxa-wrapper { margin-top: 8px; }
.nxa-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.nxa-card { flex: 1; min-width: 90px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; text-align: center; }
.nxa-card-value { font-size: 1.4em; font-weight: bold; color: #e0e0e0; }
.nxa-card-label { font-size: 0.875em; color: #888; margin-top: 2px; }
.nxa-card-critical .nxa-card-value { color: #ef4444; }
.nxa-card-high .nxa-card-value { color: #f59e0b; }
.nxa-card-medium .nxa-card-value { color: #eab308; }
.nxa-card-ok .nxa-card-value { color: #10b981; }
.nxa-pipeline-bar { margin-bottom: 14px; }
.nxa-bar-label { font-size: 0.875em; color: #aaa; margin-bottom: 4px; }
.nxa-bar-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #222; }
.nxa-bar-done { background: #10b981; }
.nxa-bar-prog { background: #3b82f6; }
.nxa-bar-none { background: #444; }
.nxa-filters { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
.nxa-filters label { font-size: 0.875em; color: #aaa; }
.nxa-filters select { background: #1a1a2e; color: #ccc; border: 1px solid #444; border-radius: 4px; padding: 3px 6px; font-size: 0.875em; }
.nxa-table { width: 100%; border-collapse: collapse; font-size: 0.875em; margin-bottom: 12px; }
.nxa-table th { background: #1a1a2e; color: #aaa; padding: 6px 8px; text-align: left; border-bottom: 1px solid #333; }
.nxa-table td { padding: 5px 8px; border-bottom: 1px solid #222; color: #ccc; }
.nxa-table tbody tr:hover { background: rgba(59,130,246,0.08); }
.nxa-sortable { cursor: pointer; user-select: none; }
.nxa-sortable:hover { color: #60a5fa; }
.nxa-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.875em; font-weight: 600; }
.nxa-critical { background: #3b1111; color: #ef4444; }
.nxa-high { background: #3b2a11; color: #f59e0b; }
.nxa-medium { background: #3b3511; color: #eab308; }
.nxa-low { background: #113b1a; color: #10b981; }
.nxa-critical-row { border-left: 3px solid #ef4444; }
.nxa-high-row { border-left: 3px solid #f59e0b; }
.nxa-medium-row { border-left: 3px solid #eab308; }
.nxa-low-row { border-left: 3px solid #10b981; }
.nxa-cat-badge { font-size: 0.875em; color: #aaa; }
.nxa-link { color: #60a5fa; cursor: pointer; text-decoration: underline; }
.nxa-link:hover { color: #93bbfc; }
.nxa-action-label { font-weight: 600; color: #e0e0e0; white-space: nowrap; }
.nxa-desc { color: #999; font-size: 0.9em; }
.nxa-empty { text-align: center; color: #888; padding: 24px; font-style: italic; }
.nxa-filter-note { text-align: center; color: #666; font-size: 0.875em; margin-top: 4px; }
.nxa-overflow { text-align: center; color: #666; font-style: italic; font-size: 0.875em; margin-top: 4px; }
.nxa-list { overflow-x: auto; }

/* === Manuscript Search (ms-) === */
.ms-search-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ms-input { flex: 1; padding: 8px 12px; border: 1px solid #444; border-radius: 6px; background: #1a1a2e; color: #e0e0e0; font-size: 1em; }
.ms-input:focus { border-color: #60a5fa; outline: none; box-shadow: 0 0 0 2px rgba(96,165,250,0.2); }
.ms-scope-bar { display: flex; gap: 16px; margin-bottom: 12px; }
.ms-scope-label { display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 0.9em; cursor: pointer; }
.ms-scope-label input[type="checkbox"] { accent-color: #60a5fa; }
.ms-wrapper { display: flex; flex-direction: column; gap: 12px; }
.ms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.ms-card { background: #1e1e2f; border: 1px solid #333; border-radius: 8px; padding: 10px 8px; text-align: center; }
.ms-card-value { font-size: 1.2em; font-weight: 700; color: #e0e0e0; }
.ms-card-label { font-size: 0.875em; color: #888; margin-top: 2px; }
.ms-card-ok { border-color: #10b981; }
.ms-results-header { font-size: 0.9em; color: #aaa; }
.ms-truncated { color: #f59e0b; }
.ms-list { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.ms-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid #333; color: #aaa; white-space: nowrap; }
.ms-table td { padding: 8px; border-bottom: 1px solid #2a2a3a; vertical-align: top; }
.ms-table tbody tr:hover { background: rgba(96,165,250,0.05); }
.ms-sortable { cursor: pointer; user-select: none; }
.ms-sortable:hover { color: #60a5fa; }
.ms-type-badge { font-size: 0.875em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.ms-type-content { background: rgba(96,165,250,0.15); color: #60a5fa; }
.ms-type-brief { background: rgba(249,115,22,0.15); color: #f97316; }
.ms-type-notes { background: rgba(168,85,247,0.15); color: #a855f7; }
.ms-type-content-row { border-left: 3px solid #60a5fa; }
.ms-type-brief-row { border-left: 3px solid #f97316; }
.ms-type-notes-row { border-left: 3px solid #a855f7; }
.ms-match-count { text-align: center; font-weight: 600; color: #e0e0e0; }
.ms-snippets { max-width: 500px; }
.ms-snippet { margin-bottom: 4px; color: #999; font-size: 0.92em; line-height: 1.7; word-break: break-all; }
.ms-highlight { background: rgba(250,204,21,0.3); color: #fde047; font-weight: 700; border-radius: 2px; padding: 0 1px; }
.ms-no-snippet { color: #666; font-style: italic; }
.ms-link { color: #60a5fa; cursor: pointer; text-decoration: underline; }
.ms-link:hover { color: #93bbfc; }
.ms-empty { text-align: center; color: #888; padding: 24px; font-style: italic; }

/* ===== Part Diagnostics Dashboard (Strike #98) — pd- prefix ===== */
.pd-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pd-card { background: var(--bg2, #1a1a2e); border-radius: 8px; padding: 10px 12px; text-align: center; border: 1px solid rgba(255,255,255,0.06); }
.pd-card-label { font-size: 0.875rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.pd-card-value { font-size: 1.4rem; font-weight: 700; margin-top: 2px; }
.pd-card-ok .pd-card-value { color: #00b894; }
.pd-card-warn .pd-card-value { color: #fdcb6e; }
.pd-card-critical .pd-card-value { color: #e17055; }
.pd-card-info .pd-card-value { color: #74b9ff; }
.pd-card-dim .pd-card-value { color: #888; }
.pd-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.875rem; color: #999; }
.pd-legend-item { display: flex; align-items: center; gap: 4px; }
.pd-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pd-table th { background: var(--bg2, #1a1a2e); padding: 8px 6px; text-align: left; border-bottom: 2px solid rgba(255,255,255,0.1); cursor: pointer; user-select: none; white-space: nowrap; }
.pd-table th:hover { color: #74b9ff; }
.pd-table td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.pd-table tr:hover td { background: rgba(255,255,255,0.03); }
.pd-row-excellent { border-left: 3px solid #00b894; }
.pd-row-good { border-left: 3px solid #55efc4; }
.pd-row-fair { border-left: 3px solid #fdcb6e; }
.pd-row-poor { border-left: 3px solid #e17055; }
.pd-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.875rem; font-weight: 600; }
.pd-badge-excellent { background: rgba(0,184,148,0.2); color: #00b894; }
.pd-badge-good { background: rgba(85,239,196,0.2); color: #55efc4; }
.pd-badge-fair { background: rgba(253,203,110,0.2); color: #fdcb6e; }
.pd-badge-poor { background: rgba(225,112,85,0.2); color: #e17055; }
.pd-badge-hard { background: rgba(225,112,85,0.2); color: #e17055; font-size: 0.875rem; }
.pd-badge-soft { background: rgba(253,203,110,0.2); color: #fdcb6e; font-size: 0.875rem; }
.pd-badge-data { background: rgba(116,185,255,0.2); color: #74b9ff; font-size: 0.875rem; }
.pd-badge-human { background: rgba(162,155,254,0.2); color: #a29bfe; font-size: 0.875rem; }
.pd-check-icon { display: inline-block; width: 16px; text-align: center; font-weight: 700; }
.pd-check-pass { color: #00b894; }
.pd-check-fail { color: #e17055; }
.pd-score-bar { display: inline-block; width: 60px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.pd-score-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.pd-detail { margin-top: 8px; }
.pd-detail-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 4px; }
.pd-detail-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pd-human-toggle { cursor: pointer; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #888; font-size: 0.875rem; transition: all 0.2s; }
.pd-human-toggle.pd-active { background: rgba(0,184,148,0.15); color: #00b894; border-color: rgba(0,184,148,0.3); }
.pd-human-toggle:hover { border-color: rgba(255,255,255,0.2); }
.pd-dup-warning { margin: 8px 0; padding: 8px 12px; background: rgba(253,203,110,0.08); border-left: 3px solid #fdcb6e; border-radius: 4px; font-size: 0.875rem; color: #fdcb6e; }
.pd-empty { text-align: center; color: #888; padding: 24px; font-style: italic; }
.pd-sort-arrow { font-size: 0.875rem; margin-left: 2px; }

/* ===== Strike #99: Chapter Transition Checker — 話間遷移チェッカー ===== */
.ct-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ct-card { padding: 10px 14px; background: rgba(255,255,255,0.04); border-radius: 6px; text-align: center; min-width: 80px; }
.ct-card-value { font-size: 1.4rem; font-weight: 700; color: #dfe6e9; }
.ct-card-label { font-size: 0.875rem; color: #888; margin-top: 2px; }
.ct-card.ct-critical { border-left: 3px solid #e17055; }
.ct-card.ct-critical .ct-card-value { color: #e17055; }
.ct-card.ct-warning { border-left: 3px solid #fdcb6e; }
.ct-card.ct-warning .ct-card-value { color: #fdcb6e; }
.ct-card.ct-info { border-left: 3px solid #74b9ff; }
.ct-card.ct-info .ct-card-value { color: #74b9ff; }
.ct-card.ct-clean { border-left: 3px solid #00b894; }
.ct-card.ct-clean .ct-card-value { color: #00b894; }
.ct-filter-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ct-filter-label { font-size: 0.875rem; color: #aaa; }
.ct-filter-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: #dfe6e9; padding: 4px 8px; font-size: 0.875rem; }
.ct-table-wrap { overflow-x: auto; margin-top: 8px; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ct-table th { padding: 8px 10px; background: rgba(255,255,255,0.04); text-align: left; color: #aaa; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ct-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: top; }
.ct-sortable { cursor: pointer; user-select: none; }
.ct-sortable:hover { color: #dfe6e9; }
.ct-row { transition: background 0.2s; }
.ct-row:hover { background: rgba(255,255,255,0.03); }
.ct-critical-row { border-left: 3px solid #e17055; }
.ct-warning-row { border-left: 3px solid #fdcb6e; }
.ct-info-row { border-left: 3px solid #74b9ff; }
.ct-clean-row { border-left: 3px solid #00b894; }
.ct-transition-cell { white-space: nowrap; }
.ct-chapter-link { cursor: pointer; color: #74b9ff; text-decoration: underline; }
.ct-chapter-link:hover { color: #a29bfe; }
.ct-status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.875rem; font-weight: 600; }
.ct-status-badge.ct-critical { background: rgba(225,112,85,0.15); color: #e17055; }
.ct-status-badge.ct-warning { background: rgba(253,203,110,0.15); color: #fdcb6e; }
.ct-status-badge.ct-info { background: rgba(116,185,255,0.12); color: #74b9ff; }
.ct-status-badge.ct-clean { background: rgba(0,184,148,0.12); color: #00b894; }
.ct-num { text-align: center; }
.ct-critical-count { color: #e17055; font-weight: 700; }
.ct-issues-cell { max-width: 500px; }
.ct-issue { margin-bottom: 4px; padding: 3px 0; }
.ct-issue-type-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.875rem; font-weight: 600; background: rgba(255,255,255,0.06); color: #aaa; margin-right: 4px; }
.ct-type-character_state { background: rgba(225,112,85,0.12); color: #e17055; }
.ct-type-hook_resolution { background: rgba(253,203,110,0.12); color: #fdcb6e; }
.ct-type-foreshadow_overload { background: rgba(253,203,110,0.12); color: #fdcb6e; }
.ct-type-fact_conflict { background: rgba(225,112,85,0.12); color: #e17055; }
.ct-type-duplicate_event { background: rgba(116,185,255,0.08); color: #74b9ff; }
.ct-type-tone_whiplash { background: rgba(162,155,254,0.12); color: #a29bfe; }
.ct-type-arc_boundary { background: rgba(116,185,255,0.08); color: #74b9ff; }
.ct-issue-detail { font-size: 0.875rem; color: #bbb; }
.ct-critical-issue .ct-issue-detail { color: #e17055; }
.ct-warning-issue .ct-issue-detail { color: #fdcb6e; }
.ct-clean-label { color: #00b894; font-size: 0.875rem; font-style: italic; }

/* ── Completion Dashboard (cd-) ── */
.cd-overview { display: flex; align-items: center; gap: 2rem; padding: 1rem 0; flex-wrap: wrap; }
.cd-ring-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.cd-ring { width: 100%; height: 100%; }
.cd-ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.6rem; font-weight: 700; color: var(--text); }
.cd-overview-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cd-stat { display: flex; flex-direction: column; align-items: center; }
.cd-stat-val { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.cd-stat-lbl { font-size: 0.875rem; color: var(--text2); }
.cd-section-title { font-size: 0.875rem; font-weight: 600; color: var(--text2); margin: 0.8rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cd-blockers { margin: 0.5rem 0 1rem; }
.cd-blocker { padding: 0.35rem 0.6rem; border-radius: 4px; margin-bottom: 0.3rem; font-size: 0.875rem; }
.cd-blocker-badge { display: inline-block; font-size: 0.875rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 3px; text-transform: uppercase; }
.cd-sev-critical { background: rgba(225,112,85,0.10); color: #e17055; }
.cd-sev-critical .cd-blocker-badge { background: #e17055; color: #1a1a2e; }
.cd-sev-warning { background: rgba(253,203,110,0.08); color: #fdcb6e; }
.cd-sev-warning .cd-blocker-badge { background: #fdcb6e; color: #1a1a2e; }
.cd-sev-info { background: rgba(116,185,255,0.06); color: #74b9ff; }
.cd-sev-info .cd-blocker-badge { background: #74b9ff; color: #1a1a2e; }
.cd-areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.5rem; }
.cd-area-card { background: var(--bg2, #1e1e3a); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
.cd-area-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cd-area-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.cd-area-icon { font-size: 1.1rem; }
.cd-area-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.cd-area-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 0.3rem; }
.cd-area-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.cd-area-score { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.2rem; }
.cd-area-detail { font-size: 0.875rem; color: var(--text2); line-height: 1.7; }
.cd-area-detail small { color: var(--text2); opacity: 0.8; }
.cd-warn { color: var(--danger, #f44336); }

/* === Pre-Publish Report (ppr-) === */
.ppr-desc { color: var(--text2); font-size: 0.875rem; margin-bottom: 0.8rem; }
.ppr-controls { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ppr-range-input { width: 4rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text); font-size: 0.875rem; }
.ppr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.ppr-summary-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; text-align: center; }
.ppr-card-num { font-size: 1.6rem; font-weight: 700; }
.ppr-card-label { font-size: 0.875rem; color: var(--text2); margin-top: 0.2rem; }
.ppr-go .ppr-card-num { color: var(--success, #4caf50); }
.ppr-caution .ppr-card-num { color: var(--warning, #ff9800); }
.ppr-nogo .ppr-card-num { color: var(--danger, #f44336); }
.ppr-issues .ppr-card-num { color: var(--text); }
.ppr-critical .ppr-card-num { color: var(--danger, #f44336); }
.ppr-foreshadow .ppr-card-num { color: var(--info, #2196f3); }
.ppr-work-issues { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; margin-bottom: 1rem; }
.ppr-work-issues h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.ppr-work-issue { padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.875rem; margin-bottom: 0.3rem; }
.ppr-sev-critical { background: rgba(244,67,54,0.12); color: var(--danger, #f44336); border-left: 3px solid var(--danger, #f44336); }
.ppr-sev-warning { background: rgba(255,152,0,0.12); color: var(--warning, #ff9800); border-left: 3px solid var(--warning, #ff9800); }
.ppr-sev-info { background: rgba(33,150,243,0.12); color: var(--info, #2196f3); border-left: 3px solid var(--info, #2196f3); }
.ppr-filter { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.ppr-filter label { font-size: 0.875rem; color: var(--text2); }
.ppr-filter select { padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text); font-size: 0.875rem; }
.ppr-table-wrap { overflow-x: auto; }
.ppr-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ppr-table th { background: var(--card); border-bottom: 2px solid var(--border); padding: 0.5rem; text-align: left; font-weight: 600; white-space: nowrap; }
.ppr-table td { padding: 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ppr-row.ppr-v-nogo { border-left: 3px solid var(--danger, #f44336); }
.ppr-row.ppr-v-caution { border-left: 3px solid var(--warning, #ff9800); }
.ppr-row.ppr-v-go { border-left: 3px solid var(--success, #4caf50); }
.ppr-verdict-badge { font-weight: 700; font-size: 0.875rem; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.ppr-verdict-badge.ppr-v-go { background: rgba(76,175,80,0.15); color: var(--success, #4caf50); }
.ppr-verdict-badge.ppr-v-caution { background: rgba(255,152,0,0.15); color: var(--warning, #ff9800); }
.ppr-verdict-badge.ppr-v-nogo { background: rgba(244,67,54,0.15); color: var(--danger, #f44336); }
.ppr-ch-link { cursor: pointer; color: var(--accent, #7c4dff); text-decoration: underline; }
.ppr-ch-link:hover { opacity: 0.8; }
.ppr-pf-badge { font-size: 0.875rem; padding: 0.1rem 0.3rem; border-radius: 3px; margin-left: 0.2rem; }
.ppr-pf-ok { background: rgba(76,175,80,0.15); color: var(--success, #4caf50); }
.ppr-pf-ng { background: rgba(244,67,54,0.15); color: var(--danger, #f44336); }
.ppr-issue-count { background: var(--danger, #f44336); color: #fff; padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.875rem; font-weight: 600; }
.ppr-no-issue { color: var(--text2); }
.ppr-issue-list { display: flex; flex-direction: column; gap: 0.25rem; }
.ppr-issue { font-size: 0.875rem; padding: 0.2rem 0.4rem; border-radius: 3px; }
.ppr-issue-badge { font-weight: 600; font-size: 0.875rem; opacity: 0.8; }

/* === Batch Publication Export (bpe-) — Strike #102 === */
.bpe-panel { margin-top: 1.5rem; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.bpe-panel h3 { margin: 0 0 0.4rem; }
.bpe-desc { color: var(--text2); font-size: 0.875rem; margin-bottom: 0.8rem; }
.bpe-controls { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bpe-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text); font-size: 0.875rem; }
.bpe-range-input { width: 4rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text); font-size: 0.875rem; }
.bpe-checkbox-label { font-size: 0.875rem; display: flex; align-items: center; gap: 0.3rem; }
.bpe-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.bpe-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; text-align: center; }
.bpe-card-value { font-size: 1.5rem; font-weight: 700; }
.bpe-card-label { font-size: 0.875rem; color: var(--text2); margin-top: 0.2rem; }
.bpe-card-go .bpe-card-value { color: var(--success, #4caf50); }
.bpe-card-caution .bpe-card-value { color: var(--warning, #ff9800); }
.bpe-card-nogo .bpe-card-value { color: var(--danger, #f44336); }
.bpe-hint { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.8rem; padding: 0.4rem 0.6rem; background: rgba(33,150,243,0.08); border-radius: 4px; }
.bpe-actions { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.bpe-table-wrap { overflow-x: auto; }
.bpe-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.bpe-table th { background: var(--card); border-bottom: 2px solid var(--border); padding: 0.5rem; text-align: left; font-weight: 600; white-space: nowrap; cursor: pointer; }
.bpe-table th:hover { color: var(--accent, #7c4dff); }
.bpe-th-check { width: 2rem; cursor: default; }
.bpe-table td { padding: 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bpe-sort-icon { font-size: 0.875rem; opacity: 0.4; }
.bpe-row.bpe-verdict-go { border-left: 3px solid var(--success, #4caf50); }
.bpe-row.bpe-verdict-caution { border-left: 3px solid var(--warning, #ff9800); }
.bpe-row.bpe-verdict-nogo { border-left: 3px solid var(--danger, #f44336); }
.bpe-badge { font-weight: 700; font-size: 0.875rem; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.bpe-badge.bpe-verdict-go { background: rgba(76,175,80,0.15); color: var(--success, #4caf50); }
.bpe-badge.bpe-verdict-caution { background: rgba(255,152,0,0.15); color: var(--warning, #ff9800); }
.bpe-badge.bpe-verdict-nogo { background: rgba(244,67,54,0.15); color: var(--danger, #f44336); }
.bpe-char-ok { color: var(--text); }
.bpe-char-warn { color: var(--warning, #ff9800); font-weight: 600; }
.bpe-issue-critical { font-size: 0.875rem; background: rgba(244,67,54,0.12); color: var(--danger, #f44336); padding: 0.1rem 0.4rem; border-radius: 3px; display: inline-block; margin: 0.1rem; }
.bpe-issue-warning { font-size: 0.875rem; background: rgba(255,152,0,0.12); color: var(--warning, #ff9800); padding: 0.1rem 0.4rem; border-radius: 3px; display: inline-block; margin: 0.1rem; }
.bpe-no-issue { color: var(--text2); }

/* === 企画書データダッシュボード (Strike #103) === */
.pdoc-desc { color: var(--text2); font-size: 0.88rem; margin-bottom: 0.8rem; }
.pdoc-controls { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.pdoc-divider { border: none; border-top: 1px solid var(--border, #333); margin: 1.5rem 0; }
.pdoc-completeness { background: var(--bg2, #1a1a2e); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.pdoc-completeness-label { font-size: 0.95rem; margin-bottom: 0.5rem; }
.pdoc-completeness-bar { height: 8px; background: var(--bg3, #252540); border-radius: 4px; overflow: hidden; }
.pdoc-completeness-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.pdoc-completeness-items { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.pdoc-missing-badge { font-size: 0.875rem; background: rgba(255,152,0,0.12); color: var(--warning, #ff9800); padding: 0.15rem 0.5rem; border-radius: 3px; }
.pdoc-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.pdoc-section { background: var(--bg2, #1a1a2e); border-radius: 8px; padding: 1rem; margin-bottom: 0.8rem; }
.pdoc-section-title { margin: 0 0 0.7rem 0; font-size: 1rem; border-bottom: 1px solid var(--border, #333); padding-bottom: 0.4rem; }
.pdoc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pdoc-field { display: flex; flex-direction: column; gap: 0.15rem; }
.pdoc-field-wide { grid-column: 1 / -1; }
.pdoc-field-label { font-size: 0.875rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; }
.pdoc-field-value { font-size: 0.9rem; }
.pdoc-pitch { font-size: 1.05rem; font-weight: 600; color: var(--accent, #7c5cff); }
.pdoc-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.pdoc-char-grid-sub { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pdoc-char-card { background: var(--bg3, #252540); border-radius: 6px; padding: 0.7rem; }
.pdoc-char-main { border-left: 3px solid var(--accent, #7c5cff); }
.pdoc-char-name { font-weight: 700; font-size: 0.95rem; }
.pdoc-char-role { font-size: 0.875rem; color: var(--text2); margin-bottom: 0.3rem; }
.pdoc-char-traits { font-size: 0.875rem; color: var(--accent, #7c5cff); }
.pdoc-char-desc { font-size: 0.875rem; color: var(--text2); margin-top: 0.3rem; }
.pdoc-sub-chars { margin-top: 0.5rem; }
.pdoc-sub-chars summary { cursor: pointer; color: var(--text2); font-size: 0.875rem; }
.pdoc-tag { display: inline-block; font-size: 0.875rem; background: rgba(124,92,255,0.15); color: var(--accent, #7c5cff); padding: 0.15rem 0.5rem; border-radius: 3px; margin-bottom: 0.5rem; }
.pdoc-world-desc { font-size: 0.88rem; line-height: 1.7; white-space: pre-wrap; }
.pdoc-empty { color: var(--text2); font-style: italic; font-size: 0.875rem; }
.pdoc-plot-item { margin-bottom: 0.5rem; padding: 0.5rem; background: var(--bg3, #252540); border-radius: 6px; }
.pdoc-plot-main { border-left: 3px solid var(--accent, #7c5cff); }
.pdoc-plot-badge { font-size: 0.875rem; font-weight: 700; background: rgba(124,92,255,0.2); color: var(--accent, #7c5cff); padding: 0.1rem 0.4rem; border-radius: 3px; }
.pdoc-plot-badge.pdoc-plot-sub { background: rgba(100,100,140,0.2); color: var(--text2); }
.pdoc-plot-desc { font-size: 0.875rem; color: var(--text2); margin-top: 0.3rem; }
.pdoc-foreshadow-stat { font-size: 0.875rem; color: var(--text2); margin-top: 0.5rem; }
.pdoc-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; text-align: center; }
.pdoc-stat { background: var(--bg3, #252540); border-radius: 6px; padding: 0.6rem 0.4rem; }
.pdoc-stat-value { font-size: 1.3rem; font-weight: 700; }
.pdoc-stat-label { font-size: 0.875rem; color: var(--text2); margin-top: 0.2rem; }
.pdoc-visual-list { display: flex; flex-direction: column; gap: 0.4rem; }
.pdoc-visual-item { font-size: 0.875rem; padding: 0.4rem; background: var(--bg3, #252540); border-radius: 4px; }
.pdoc-visual-type { font-size: 0.875rem; font-weight: 700; background: rgba(255,152,0,0.15); color: var(--warning, #ff9800); padding: 0.1rem 0.3rem; border-radius: 3px; margin-right: 0.3rem; }
.pdoc-synopsis { max-height: 400px; overflow-y: auto; }
.pdoc-synopsis-ch { font-size: 0.875rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border, #222); }

/* --- Phase 1: Tab 2 情報設計改善 --- */

/* STEP C 背景を薄める */
.ip-core-panel { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.20); }

/* 導線リンク */
.design-hint-link {
  display: block;
  font-size: 0.875rem;
  color: var(--text2);
  margin-top: 8px;
  cursor: pointer;
  text-align: right;
}
.design-hint-link span {
  color: var(--accent2);
  text-decoration: underline;
}

/* 空欄ガイダンスバナー */
.empty-guidance {
  background: rgba(234,179,8,0.06);
  border: 1px solid rgba(234,179,8,0.15);
  color: var(--text2);
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: opacity 0.3s;
}
.empty-guidance.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

/* 補助ツールセクション上余白 */
.design-helper-section {
  margin-top: 24px;
}

/* 任意バッジ */
.badge-optional {
  display: inline-block;
  font-size: 0.875rem;
  padding: 1px 6px;
  background: rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 設計完成度インジケーター */
.design-completeness-bar {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.design-completeness-bar .completeness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text2);
  margin-bottom: 4px;
}
.design-completeness-bar .completeness-track {
  height: 6px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 3px;
  overflow: hidden;
}
.design-completeness-bar .completeness-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.design-completeness-bar .completeness-detail {
  font-size: 0.875rem;
  color: var(--text2);
  margin-top: 4px;
}

/* 設計フローオーバーレイ */
.design-flow-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.design-flow-overlay .flow-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 520px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.design-flow-overlay .flow-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--accent);
}
.design-flow-overlay .flow-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.design-flow-overlay .flow-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}
.design-flow-overlay .flow-step-item:hover {
  background: var(--bg3);
  border-color: var(--accent);
}
.design-flow-overlay .flow-step-item .flow-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
}
.design-flow-overlay .flow-step-item .flow-arrow {
  color: var(--text2);
  font-size: 0.875rem;
  margin-left: auto;
}
.design-flow-overlay .flow-close-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Sprint 3: ゴールバッジ + 確認待ち状態 */
.checklist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.checklist-item:hover { background: rgba(255,255,255,0.04); }
.checklist-item.ai-generated { background: rgba(234,179,8,0.06); border-left: 3px solid var(--yellow); }
.checklist-item.completed { opacity: 0.7; }
.goal-badge-done, .goal-badge-review, .goal-badge-todo {
  font-size: 0.875rem;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.goal-badge-review { animation: pulse-yellow 2s ease-in-out infinite; }
@keyframes pulse-yellow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Sprint 3: ソフトゲート警告トースト */
.toast-warn {
  background: rgba(234,179,8,0.9);
  color: #1a1a1a;
}

/* === Phase 1 stage-gate: タブロック + Stage 1 タスクリスト === */
.tab-btn.tab-locked {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.tab-btn.tab-locked:hover {
  background: var(--bg3);
  color: var(--text2);
}
.tab-btn .tab-lock-icon {
  font-size: 0.75rem;
  margin-left: 0.2rem;
  filter: grayscale(0.3);
}

.stage-task-list-container {
  margin: 1rem 0 1.5rem;
}
.stage-task-list {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.stage-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.stage-task-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent2);
}
.stage-task-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 200px;
}
.stage-task-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
}
.stage-task-progress-fill {
  height: 100%;
}
/* === Phase 1 stage-gate: タブロック + Stage 1 タスクリスト === */
.tab-btn.tab-locked {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.tab-btn.tab-locked:hover {
  background: var(--bg3);
  color: var(--text2);
}
.tab-btn .tab-lock-icon {
  font-size: 0.75rem;
  margin-left: 0.2rem;
  filter: grayscale(0.3);
}

.stage-task-list-container {
  margin: 1rem 0 1.5rem;
}
.stage-task-list {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.stage-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.stage-task-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent2);
}
.stage-task-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 200px;
}
.stage-task-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
}
.stage-task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width 0.4s;
}
.stage-task-progress-text {
  font-size: 0.875rem;
  color: var(--text2);
  white-space: nowrap;
}
.stage-task-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stage-task-item {
  display: block;
}
.stage-task-item-btn {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--bg3);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.15s;
  font-size: 0.9rem;
}
.stage-task-item-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg3);
}
.stage-task-item-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.stage-task-item[data-priority="1"] .stage-task-item-btn {
  border-left: 3px solid #ef4444;
}
.stage-task-item[data-priority="2"] .stage-task-item-btn {
  border-left: 3px solid #eab308;
}
.stage-task-item[data-priority="3"] .stage-task-item-btn {
  border-left: 3px solid #3b82f6;
}
.stage-task-icon {
  font-size: 1rem;
}
.stage-task-label {
  flex: 1;
}
.stage-task-arrow {
  color: var(--text2);
  font-size: 0.875rem;
}
.stage-task-advance-ready {
  margin-top: 1rem;
  padding: 0.8rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 4px;
  text-align: center;
}
.stage-task-advance-ready p {
  margin: 0 0 0.5rem 0;
  color: var(--green);
}
.stage-task-done, .stage-task-empty {
  color: var(--text2);
  text-align: center;
  padding: 0.5rem;
  margin: 0;
}

/* === Phase 1 character-system-redesign: Character Visibility Panel === */
/* Visibility First 最軽量版。キャラ一覧タブの btn-add-char と character-grid の間に
   loadCharacterVisibilityPanel() が動的挿入する。グラフライブラリは使わず
   CSS 横棒 + テキストリストで主役3名の見える化を行う。 */
#char-visibility-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0 14px 0;
  font-size: 0.9rem;
}
#char-visibility-panel .cvp-note {
  color: var(--text2);
  font-size: 0.875rem;
  margin: 0 0 10px 0;
  line-height: 1.7;
}
#char-visibility-panel .cvp-block {
  margin-bottom: 14px;
}
#char-visibility-panel .cvp-block:last-child { margin-bottom: 0; }
#char-visibility-panel .cvp-block-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
#char-visibility-panel .cvp-empty {
  color: var(--text2);
  font-style: italic;
  font-size: 0.875rem;
  padding: 6px 4px;
}

/* --- 花形ロスター --- */
#cvp-roster .cvp-roster-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  margin-bottom: 4px;
  background: var(--bg3);
  border-radius: 4px;
  border-left: 4px solid var(--text2);
  position: relative;
}
#cvp-roster .cvp-accent-yellow { border-left-color: var(--yellow); }
#cvp-roster .cvp-accent-pink   { border-left-color: var(--pink); }
#cvp-roster .cvp-accent-cyan   { border-left-color: var(--cyan); }
#cvp-roster .cvp-roster-role {
  font-size: 0.875rem;
  color: var(--text2);
  min-width: 64px;
}
#cvp-roster .cvp-roster-name {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
#cvp-roster .cvp-roster-reason {
  color: var(--text2);
  font-size: 0.875rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cvp-roster .cvp-voice-missing {
  background: rgba(239,68,68,0.15);
  color: var(--red);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 600;
}
#cvp-roster .cvp-lock-slots {
  display: inline-flex;
  gap: 3px;
  font-size: 0.875rem;
  color: var(--text2);
  opacity: 0.5;
}

/* --- 登場頻度 (CSS 横棒) --- */
#cvp-frequency .cvp-freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.875rem;
}
#cvp-frequency .cvp-freq-name {
  min-width: 110px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cvp-frequency .cvp-freq-bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}
#cvp-frequency .cvp-freq-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
#cvp-frequency .cvp-freq-count {
  min-width: 32px;
  text-align: right;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* --- 関係サマリ --- */
#cvp-relations .cvp-rel-item {
  padding: 4px 6px;
  margin-bottom: 3px;
  background: var(--bg3);
  border-radius: 3px;
  font-size: 0.875rem;
  color: var(--text);
}
#cvp-relations .cvp-rel-empty-hint {
  color: var(--text2);
  font-size: 0.875rem;
  font-style: italic;
}

/* ============================================================
   Phase 2 (character-system-redesign)
   (A) 欠損アラート / (B) レイヤー2 / (C) 4種ロック UI
   ============================================================ */

/* --- (A) 欠損アラートブロック --- */
#cvp-missing-alerts .cvp-ma-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: var(--bg3);
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.7;
}
#cvp-missing-alerts .cvp-ma-row:last-child { margin-bottom: 0; }
#cvp-missing-alerts .cvp-ma-name {
  font-weight: 600;
  color: var(--text);
  min-width: 88px;
  flex-shrink: 0;
}
#cvp-missing-alerts .cvp-ma-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
#cvp-missing-alerts .cvp-ma-empty {
  color: var(--text2);
  font-style: italic;
  font-size: 0.875rem;
  padding: 6px 4px;
}

.cvp-missing-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7;
  border: 1px solid transparent;
}
.cvp-missing-badge.is-required {
  background: rgba(239,68,68,0.15);
  color: var(--red);
  border-color: rgba(239,68,68,0.35);
}
.cvp-missing-badge.is-recommended {
  background: rgba(234,179,8,0.15);
  color: var(--yellow);
  border-color: rgba(234,179,8,0.35);
}
.cvp-missing-badge.is-thin {
  background: rgba(249,115,22,0.15);
  color: var(--orange);
  border-color: rgba(249,115,22,0.35);
}

/* --- (B) レイヤー2: 魅力の核 --- */
#cvp-layer2 .cvp-layer2-item {
  padding: 6px 8px 6px 12px;
  margin-bottom: 4px;
  background: var(--bg3);
  border-radius: 4px;
  border-left: 4px solid var(--text2);
}
#cvp-layer2 .cvp-layer2-item:last-child { margin-bottom: 0; }
#cvp-layer2 .cvp-layer2-item.cvp-accent-yellow { border-left-color: var(--yellow); }
#cvp-layer2 .cvp-layer2-item.cvp-accent-pink   { border-left-color: var(--pink); }
#cvp-layer2 .cvp-layer2-item.cvp-accent-cyan   { border-left-color: var(--cyan); }
#cvp-layer2 .cvp-l2-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
#cvp-layer2 .cvp-l2-slot {
  font-size: 0.875rem;
  color: var(--text2);
  min-width: 64px;
}
#cvp-layer2 .cvp-l2-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.875rem;
}
#cvp-layer2 .cvp-l2-row {
  display: flex;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.7;
  margin-top: 2px;
}
#cvp-layer2 .cvp-l2-label {
  color: var(--text2);
  min-width: 70px;
  flex-shrink: 0;
}
#cvp-layer2 .cvp-l2-value {
  color: var(--text);
  flex: 1;
  word-break: break-word;
}
#cvp-layer2 .cvp-l2-value.is-missing {
  color: var(--text2);
  font-style: italic;
  opacity: 0.7;
}

/* --- (C) 4種ロック UI --- */
#cvp-roster .cvp-lock-slots {
  opacity: 1;
}
.cvp-lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.875rem;
  line-height: 1.7;
}
.cvp-lock-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 0.875rem;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
}
.cvp-lock-toggle:hover {
  background: var(--bg3);
  color: var(--text);
}
.cvp-lock-toggle[aria-expanded="true"] {
  background: var(--bg3);
  color: var(--text);
}
.cvp-lock-edit {
  margin: 4px 0 6px 16px;
  padding: 6px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
}
.cvp-lock-edit .cvp-lock-edit-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 10px;
  margin-bottom: 2px;
  color: var(--text);
  cursor: pointer;
}
.cvp-lock-edit .cvp-lock-edit-row input[type="checkbox"] {
  margin: 0;
}
.cvp-lock-saved {
  color: var(--cyan);
  font-size: 0.875rem;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cvp-lock-saved.is-visible { opacity: 1; }

/* ═══ Phase 3 (character-system-redesign): Wizard + Layer 3 ═══ */

/* --- Step Indicator --- */
.ciw-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text2);
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.2s;
}
.ciw-step-dot.is-active {
  background: var(--yellow);
  color: #000;
  border-color: var(--yellow);
  box-shadow: 0 0 8px rgba(234,179,8,0.4);
}
.ciw-step-dot.is-done {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.ciw-step-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--border);
}

/* --- Layer 3: Voice Badge --- */
.cvp-l3-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.cvp-l3-slot {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text2);
  min-width: 60px;
}
.cvp-l3-name {
  font-weight: 600;
  font-size: 0.875rem;
}
.cvp-voice-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
}
.cvp-voice-badge.is-ok {
  background: rgba(34,197,94,0.15);
  color: var(--green);
}
.cvp-voice-badge.is-ng {
  background: rgba(239,68,68,0.15);
  color: var(--red);
}

/* ============================================================
   2026-04-17 Character Panel Owner-View Redesign
   サマリー帯 / 次にやること CTA / 畳むブロック / 件数表示
   ============================================================ */

/* --- サマリー帯 (owner が 0.5 秒で件数 + 主要人物名を把握) --- */
.cvp-summary {
  background: var(--bg2);
  border-left: 4px solid var(--accent, #0969da);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 12px 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}
.cvp-summary-count {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--accent, #0969da);
  margin: 0 2px;
}
.cvp-summary-name {
  font-weight: 700;
  color: var(--text);
}

/* --- 次にやること CTA ブロック (常設) --- */
.cvp-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 14px 0;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 6px;
}
.cvp-next-primary {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  background: var(--accent, #0969da);
  color: #fff;
  border: 1px solid var(--accent, #0969da);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.7;
}
.cvp-next-primary:hover {
  background: var(--accent-dark, #054aa1);
}
.cvp-next-secondary {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  background: var(--bg, #fff);
  color: var(--text, #1f2328);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.7;
}
.cvp-next-secondary:hover {
  background: var(--bg2, #f6f8fa);
}
.cvp-next-ok {
  margin: 0;
  padding: 8px 4px;
  font-size: 0.9375rem;
  color: var(--green, #1a7f37);
  font-weight: 600;
}

/* --- 主要人物ブロック 件数バッジ --- */
.cvp-star-count {
  font-size: 0.875rem;
  color: var(--text2);
  margin-left: 6px;
  font-weight: 400;
}

/* --- 登場の多さ + 関係性 の <details> 畳み --- */
.cvp-fold {
  margin: 0 0 14px 0;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: var(--bg2);
}
.cvp-fold-summary {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1.7;
  list-style: none;
}
.cvp-fold-summary::-webkit-details-marker { display: none; }
.cvp-fold-summary::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 8px;
  color: var(--text2);
  transition: transform 0.2s ease;
}
.cvp-fold[open] > .cvp-fold-summary::before {
  transform: rotate(90deg);
}
.cvp-fold-body {
  padding: 4px 14px 14px 14px;
  border-top: 1px solid var(--border, #d0d7de);
}

/* --- レスポンシブ (モバイル) --- */
@media (max-width: 480px) {
  .cvp-next-actions {
    flex-direction: column;
  }
  .cvp-next-primary,
  .cvp-next-secondary {
    width: 100%;
  }
}

/* ============================================================
   Phase 4-α (character-system-redesign) NC-1
   archetype 5-value enum badge classes (+ unknown fallback)
   ============================================================ */
.archetype-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.7;
  vertical-align: middle;
}
.archetype-protagonist { background: #ffd43b; color: #333; }
.archetype-heroine     { background: #f783ac; color: #fff; }
.archetype-companion   { background: #4dabf7; color: #fff; }
.archetype-ally        { background: #adb5bd; color: #fff; }
.archetype-villain     { background: #ff6b6b; color: #fff; }
.archetype-unknown     { background: #dee2e6; color: #666; }

/* ============================================================
   Phase 4-α T11: character change_impact panel
   ============================================================ */
.p4a-impact-panel { margin-top: 14px; padding: 10px 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; }
.p4a-impact-panel h4 { margin: 0 0 8px; font-size: 0.88rem; color: #495057; }
.p4a-impact-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e9ecef; font-size: 0.875rem; }
.p4a-impact-row:last-child { border-bottom: none; }
.p4a-impact-empty { color: #868e96; font-size: 0.875rem; font-style: italic; }
.p4a-impact-actions { margin-left: auto; display: flex; gap: 6px; }

/* ============================================================
   Phase 4-α T1: voice layer3 editor (character modal)
   ============================================================ */
.p4a-voice-editor { margin-top: 12px; padding: 10px 12px; background: #fff9db; border: 1px solid #ffe066; border-radius: 6px; }
.p4a-voice-editor h4 { margin: 0 0 8px; font-size: 0.88rem; color: #5c4400; }
.p4a-voice-row { margin-bottom: 8px; }
.p4a-voice-row label { display: block; font-size: 0.875rem; color: #5c4400; font-weight: 700; margin-bottom: 2px; }
.p4a-voice-row textarea { width: 100%; min-height: 40px; font-size: 0.875rem; padding: 4px 6px; border: 1px solid #ffe066; border-radius: 4px; resize: vertical; box-sizing: border-box; }
.p4a-voice-saved { font-size: 0.875rem; color: #2f9e44; margin-left: 6px; display: none; }
.p4a-voice-saved.is-visible { display: inline; }

/* ============================================================
   Phase 4-α T2-prep: batch infer button + progress summary
   ============================================================ */
.p4a-infer-toolbar { margin: 10px 0; padding: 8px 12px; background: #e7f5ff; border: 1px solid #74c0fc; border-radius: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p4a-infer-summary { font-size: 0.875rem; color: #1864ab; }
.p4a-infer-progress { font-weight: 700; }
.p4a-next-action-btn { background: #37b24d; color: #fff; border: none; padding: 4px 10px; border-radius: 4px; font-size: 0.875rem; cursor: pointer; }
.p4a-next-action-btn:hover { background: #2f9e44; }


/* ─── Phase 4-γ-main internal-A: キャラ再生成パネル ─────────────── */
.cvp-regen-panel { margin-top: 16px; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; background: #fafbfc; }
.cvp-regen-panel h4 { margin: 0 0 8px 0; font-size: 0.95rem; color: #495057; }
.cvp-regen-buttons { display: flex; gap: 8px; margin-bottom: 8px; }
.cvp-regen-status { font-size: 0.875rem; color: #1864ab; margin: 8px 0; }
.cvp-regen-diff { font-size: 0.875rem; margin-top: 8px; }
.cvp-regen-diff-table { width: 100%; border-collapse: collapse; }
.cvp-regen-diff-table th, .cvp-regen-diff-table td { border: 1px solid #dee2e6; padding: 4px 6px; text-align: left; }
.cvp-regen-diff-table th { background: #f1f3f5; }
.cvp-regen-empty { color: #868e96; font-style: italic; }

/* Round 8 T-F8: 再生成結果テーブル row 折りたたみ UI */
.cvp-regen-row-expandable { cursor: pointer; }
.cvp-regen-row-expandable:hover { background: #f8f9fa; }
.cvp-regen-row-expandable[data-expanded="true"] { background: #e7f5ff; }
.cvp-regen-row-detail { background: #fefefe; }
.cvp-regen-row-detail .cvp-regen-before,
.cvp-regen-row-detail .cvp-regen-after { padding: 4px 8px; font-size: 0.875rem; }
.cvp-regen-row-detail .cvp-regen-before { color: #868e96; }
.cvp-regen-row-detail .cvp-regen-after { color: #1864ab; }
.cvp-regen-toggle-hint { font-size: 0.75rem; color: #adb5bd; margin-left: 6px; }

/* ============================================================
   Phase 7 — writing tab .btn 派生 44x44 touch target
   ============================================================
   design §4.1: .chapter-card-actions-bar / .chapter-toolbar-actions /
   .bep-preset-buttons 配下の .btn は padding が狭いため、明示的に
   min-height 44 を付与してヒット領域を保証する。
   これにより phase6 visual-qa の "writing タブ 35/89" を 0/89 へ。
   ============================================================ */
#tab-writing .chapter-card-actions-bar .btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
}
#tab-writing .chapter-toolbar-actions .btn {
  min-height: 44px;
  min-width: 44px;
}
#tab-writing .bep-preset-buttons .btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
}

/* ============================================================
   Phase 7 — state-tab-groups (6 groups accordion)
   design §2.4: Miller 7±2 準拠の折り畳み
   ============================================================ */
.state-tab-groups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.state-tab-group {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.state-tab-group[open] {
  border-color: var(--accent);
}
.state-tab-group-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.625rem 1rem;
  background: var(--bg2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.state-tab-group-summary::-webkit-details-marker {
  display: none;
}
.state-tab-group-summary:hover {
  background: #222636;
}
.state-tab-group-summary:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: -3px;
}
.state-tab-group-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.state-tab-group-name {
  flex: 1 1 auto;
  min-width: 0;
}
.state-tab-group-count {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  min-width: 1.75rem;
  background: var(--bg3);
  color: var(--text2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border-radius: 999px;
}
.state-tab-group[open] .state-tab-group-count {
  background: var(--accent);
  color: #ffffff;
}
.state-tab-group-chevron {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--text2);
  transition: transform 0.2s;
}
.state-tab-group[open] .state-tab-group-chevron {
  transform: rotate(180deg);
  color: var(--accent2);
}
.sub-tabs-grouped {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.sub-tabs-grouped .sub-tab {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .state-tab-group-summary { padding: 0.75rem 0.875rem; }
  .sub-tabs-grouped { padding: 0.625rem 0.75rem 0.875rem; }
  .sub-tabs-grouped .sub-tab { flex: 1 1 calc(50% - 0.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .state-tab-group-chevron { transition: none; }
}

/* ============================================================
   Phase 7 — plot-flow-diagram (部 → 設計 → 章 → 話)
   design §3: 4 node + 3 arrow, mobile で縦積み
   ============================================================ */
.plot-flow-diagram {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
  padding: 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.plot-flow-node {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.875rem 0.625rem;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.plot-flow-node:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.plot-flow-node-icon {
  font-size: 1.75rem;
}
.plot-flow-node-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.plot-flow-node-sub {
  font-size: 0.875rem;
  color: var(--text2);
}
.plot-flow-node-multi .plot-flow-node-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.plot-flow-node-multi .plot-flow-node-list li {
  font-size: 0.875rem;
  color: var(--text);
  letter-spacing: 0.02em;
}
.plot-flow-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent2);
  padding: 0 0.25rem;
  user-select: none;
}
@media (max-width: 900px) {
  .plot-flow-diagram {
    flex-direction: column;
    padding: 0.75rem;
    overflow-x: visible;
  }
  .plot-flow-node { min-width: auto; }
  .plot-flow-arrow {
    font-size: 1.5rem;
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plot-flow-node { transition: none; }
  .plot-flow-node:hover { transform: none; }
}

/* === Phase 8: dashboard 10 hidden panels → 3 group <details> === */
.dash-panel-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}
.dash-panel-group {
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  background: var(--bg-subtle, #f6f8fa);
  overflow: hidden;
}
.dash-panel-group-summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  min-height: 44px;
  box-sizing: border-box;
  user-select: none;
}
.dash-panel-group-summary::-webkit-details-marker { display: none; }
.dash-panel-group-summary::before {
  content: '▶';
  font-size: 0.875rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.dash-panel-group[open] > .dash-panel-group-summary::before {
  transform: rotate(90deg);
}
.dash-panel-group-icon { font-size: 1.1rem; }
.dash-panel-group-title { flex: 1; }
.dash-panel-group-count {
  background: var(--accent, #0969da);
  color: #fff;
  border-radius: 999px;
  font-size: 0.875rem;
  padding: 0.1rem 0.5rem;
  font-weight: 500;
}
.dash-panel-group-body {
  padding: 0.75rem;
  background: var(--bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* === Phase 8: writing mode selector (個別 / 話単位自動 / 一括自動) === */
.writing-mode-selector {
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: var(--bg-subtle, #f6f8fa);
}
.writing-mode-selector legend {
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0 0.4rem;
  color: var(--text, #1f2328);
}
.writing-mode-selector .writing-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.writing-mode-selector label.writing-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: var(--bg, #fff);
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.9375rem;
}
.writing-mode-selector label.writing-mode-option:has(input:checked) {
  border-color: var(--accent, #0969da);
  background: var(--accent-subtle, #ddf4ff);
}
.writing-mode-selector .writing-mode-help {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--text2, #656d76);
}

/* Phase 9-A: Emotion Curve Widget (writing tab) */
.emotion-curve-widget { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.emotion-curve-label { font-size: 0.875rem; color: var(--text2); white-space: nowrap; }
.emotion-curve-svg { flex-shrink: 0; }
.emotion-curve-name { font-size: 0.875rem; font-weight: 600; color: var(--accent2); cursor: pointer; white-space: nowrap; text-decoration: none; }
.emotion-curve-name:hover { text-decoration: underline; }
.emotion-curve-unset { font-size: 0.875rem; color: var(--text2); white-space: nowrap; }
.emotion-curve-set-link { font-size: 0.875rem; color: var(--yellow); cursor: pointer; text-decoration: none; font-weight: 600; }
.emotion-curve-set-link:hover { text-decoration: underline; }

/* Active-mode-based area visibility.
 * Elements with data-mode-visibility list the modes in which they are visible.
 * If the body's data-writing-mode does not match, hide them.
 * Areas without data-mode-visibility remain always visible (shared). */
body[data-writing-mode="individual"] [data-mode-visibility]:not([data-mode-visibility~="individual"]) { display: none; }
body[data-writing-mode="per-episode"] [data-mode-visibility]:not([data-mode-visibility~="per-episode"]) { display: none; }
body[data-writing-mode="batch"] [data-mode-visibility]:not([data-mode-visibility~="batch"]) { display: none; }

/* ========== PDR-1: 5段階ステッパー ========== */

/* 推奨ステップカード（大） */
.stepper-recommend {
  border-left: 3px solid var(--accent, #0969da);
  background: rgba(99,102,241,0.06);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.stepper-recommend-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.stepper-recommend-badge {
  background: var(--accent, #0969da);
  color: white;
  padding: 0.15rem 0.6rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.stepper-recommend-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text, #1f2328);
}
.stepper-recommend-desc {
  font-size: 0.9375rem;
  color: var(--text2, #656d76);
  margin: 0 0 0.75rem 0;
  line-height: 1.7;
}
.stepper-recommend-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stepper-confirm-btn {
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text, #1f2328);
}
.stepper-confirm-btn:hover {
  background: var(--bg3, #eaeef2);
}

/* コンパクトステッパー */
.stepper-compact {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.stepper-compact-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  background: var(--bg3, #eaeef2);
  color: var(--text2, #656d76);
  cursor: pointer;
  font-size: 0.875rem;
  min-height: 44px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.stepper-compact-item:hover {
  background: var(--bg2, #f6f8fa);
  border-color: var(--accent, #0969da);
}
.stepper-compact-item.completed {
  background: rgba(34,197,94,0.15);
  border-color: var(--green, #1a7f37);
  color: var(--green, #1a7f37);
}
.stepper-compact-item.needs-check {
  background: rgba(99,102,241,0.12);
  border-color: var(--accent2, #6366f1);
  color: var(--accent2, #6366f1);
}
.stepper-compact-item.recommended {
  font-weight: 600;
}
.stepper-compact-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: currentColor;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.stepper-compact-item.completed .stepper-compact-num {
  background: var(--green, #1a7f37);
}
.stepper-compact-item.needs-check .stepper-compact-num {
  background: var(--accent2, #6366f1);
}
.stepper-compact-label {
  white-space: nowrap;
}
.stepper-compact-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text2, #656d76);
  flex-shrink: 0;
}
.stepper-compact-badge[data-status="done"] {
  background: var(--green, #1a7f37);
}
.stepper-compact-badge[data-status="needs-check"] {
  background: var(--accent2, #6366f1);
}
.stepper-compact-badge[data-status="pending"] {
  background: var(--text2, #656d76);
}

/* ========== PDR-1: パンくず ========== */

.writing-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #fff);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, #d0d7de);
  margin-bottom: 0.75rem;
}
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.breadcrumb-link {
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
  color: var(--accent, #0969da);
  cursor: pointer;
  font-size: inherit;
  border-radius: 4px;
}
.breadcrumb-link:hover {
  background: var(--bg2, #f6f8fa);
  text-decoration: underline;
}
.breadcrumb-sep {
  color: var(--text2, #656d76);
  user-select: none;
}
.breadcrumb-current {
  color: var(--text, #1f2328);
  font-weight: 600;
}

/* PDR-1 レスポンシブ */
@media (max-width: 900px) {
  .stepper-compact { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .stepper-compact { flex-direction: column; }
  .stepper-recommend { padding: 0.75rem; }
}
@media (max-width: 480px) {
  .stepper-compact-label { display: none; }
  .breadcrumb-list { font-size: 0.875rem; }
}

/* === PDR-4: Feature Flag Readonly Banner === */
.ff-readonly-banner { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.ff-readonly-banner-item { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--yellow, #eab308); border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.875rem; color: var(--text2); }
.ff-readonly-banner-item strong { color: var(--text1); }
.ff-banner-icon { margin-right: 0.3rem; }

/* === 2026-04-18 Character Panel Grandmother Redesign (Tier 1/2/3 + E1/E2/E4/E5) === */
/* Tier 1: name + role + current_status — always visible */
.cvp-tier-1-block { margin-top: 1rem; }
.cvp-tier-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--bg1, #ffffff);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.7;
  min-height: 44px;
}
.cvp-tier-1.cvp-accent-yellow { border-left-color: #eab308; }
.cvp-tier-1.cvp-accent-pink { border-left-color: #ec4899; }
.cvp-tier-1.cvp-accent-cyan { border-left-color: #06b6d4; }
.cvp-tier1-slot {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text2, #656d76);
  min-width: 3rem;
}
.cvp-tier1-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text, #1f2328);
}
.cvp-tier1-status {
  flex: 1 1 12rem;
  font-size: 0.9375rem;
  color: var(--text, #1f2328);
}

/* Tier 2: expand to see charm_core + motivation + skills preview + recent history */
.cvp-tier-2-block { margin-top: 1rem; }
.cvp-tier-2 {
  margin-bottom: 0.5rem;
  padding: 0;
  background: var(--bg1, #ffffff);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-radius: 6px;
}
.cvp-tier-2.cvp-accent-yellow { border-left-color: #eab308; }
.cvp-tier-2.cvp-accent-pink { border-left-color: #ec4899; }
.cvp-tier-2.cvp-accent-cyan { border-left-color: #06b6d4; }
.cvp-tier2-summary {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.cvp-tier2-body {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cvp-tier2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.cvp-tier2-label {
  min-width: 7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text2, #656d76);
}
.cvp-tier2-value { color: var(--text, #1f2328); }
.cvp-tier2-skills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cvp-tier2-empty { color: var(--text2, #656d76); font-style: italic; font-size: 0.875rem; }
.cvp-tier2-recent {
  font-size: 0.875rem;
  color: var(--text2, #656d76);
  border-top: 1px dashed var(--border, #d1d9e0);
  padding-top: 0.375rem;
}
.cvp-tier2-recent-when { font-weight: 600; }

/* Tier 3: full detail modal/expand */
.cvp-tier-3-block { margin-top: 1rem; }
.cvp-tier-3 {
  margin-bottom: 0.5rem;
  padding: 0;
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-radius: 6px;
}
.cvp-tier-3.cvp-accent-yellow { border-left-color: #eab308; }
.cvp-tier-3.cvp-accent-pink { border-left-color: #ec4899; }
.cvp-tier-3.cvp-accent-cyan { border-left-color: #06b6d4; }
.cvp-tier3-summary {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.cvp-tier3-body { padding: 0.5rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cvp-tier3-section { border-top: 1px solid var(--border, #d1d9e0); padding-top: 0.5rem; }
.cvp-tier3-section-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.375rem; color: var(--text, #1f2328); }
.cvp-tier3-persona-value { font-size: 0.9375rem; color: var(--text, #1f2328); line-height: 1.7; }
.cvp-tier3-voice { display: flex; flex-direction: column; gap: 0.25rem; }
.cvp-tier3-voice-row { display: flex; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.7; }
.cvp-tier3-voice-label { min-width: 7rem; font-weight: 600; color: var(--text2, #656d76); font-size: 0.875rem; }
.cvp-tier3-voice-value { color: var(--text, #1f2328); }

/* Round 6 T-F1..F4: voice 6-field 2-col card grid */
.cvp-tier3-voice-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
.cvp-tier3-voice-card { background: var(--bg2, #f6f8fa); border: 1px solid var(--border, #d1d9e0); border-radius: 8px; padding: 12px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.cvp-tier3-voice-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text, #1f2328); line-height: 1.7; }
.cvp-tier3-voice-card-value { font-size: 0.875rem; color: var(--text, #1f2328); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
@media (min-width: 1024px) {
  .cvp-tier3-voice-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cvp-tier3-voice-card-grid { grid-template-columns: 1fr; }
}

/* E2 skill block */
.cvp-skill-char { padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; border-left: 3px solid var(--border, #d1d9e0); }
.cvp-skill-char.cvp-accent-yellow { border-left-color: #eab308; }
.cvp-skill-char.cvp-accent-pink { border-left-color: #ec4899; }
.cvp-skill-char.cvp-accent-cyan { border-left-color: #06b6d4; }
.cvp-skill-charname { font-weight: 700; font-size: 0.9375rem; margin-right: 0.5rem; }
.cvp-skill-empty { font-size: 0.875rem; color: var(--text2, #656d76); font-style: italic; }
.cvp-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.375rem; }
.cvp-skill-card {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d1d9e0);
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.7;
}
.cvp-skill-name { font-weight: 600; color: var(--text, #1f2328); }
.cvp-skill-lv { font-size: 0.875rem; color: var(--text2, #656d76); }
.cvp-skill-prof { font-size: 0.875rem; color: var(--text2, #656d76); }
.cvp-skill-chip {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--bg2, #f6f8fa);
  border-radius: 8px;
  font-size: 0.875rem;
}

/* E1 + E8: relation cards with temperature color */
.cvp-relation-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.375rem;
  background: var(--bg1, #ffffff);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.cvp-rel-friend { border-left-color: #22c55e; background: #f0fdf4; }
.cvp-rel-enemy { border-left-color: #ef4444; background: #fef2f2; }
.cvp-rel-neutral { border-left-color: #94a3b8; }
.cvp-rel-a, .cvp-rel-b { font-weight: 600; }
.cvp-rel-arrow { color: var(--text2, #656d76); }
.cvp-rel-label {
  padding: 0.125rem 0.5rem;
  background: var(--bg2, #f6f8fa);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text, #1f2328);
}
.cvp-rel-tension { font-size: 0.875rem; color: var(--text2, #656d76); }
.cvp-rel-desc { font-size: 0.875rem; color: var(--text2, #656d76); flex-basis: 100%; }

/* E4 history timeline */
.cvp-history { display: flex; flex-direction: column; gap: 0.25rem; }
.cvp-timeline { border-left: 2px solid var(--border, #d1d9e0); padding-left: 0.75rem; }
.cvp-history-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 0.25rem 0;
}
.cvp-history-when { font-weight: 600; color: var(--text2, #656d76); min-width: 5.5rem; }
.cvp-history-what { color: var(--text, #1f2328); }
.cvp-history-why { color: var(--text2, #656d76); font-size: 0.875rem; }
.cvp-history-empty { font-size: 0.875rem; color: var(--text2, #656d76); font-style: italic; }

/* Responsive */
@media (max-width: 600px) {
  .cvp-tier-1 { flex-direction: column; align-items: flex-start; }
  .cvp-tier1-status { flex-basis: 100%; }
  .cvp-tier2-label, .cvp-tier3-voice-label { min-width: 100%; }
}

/* === 2026-04-18 Overlap check + Obsession proposal result cards (BUG-8 / BUG-9 / BUG-10) === */

/* Overlap check result */
.overlap-result { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.overlap-summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d1d9e0);
  border-left: 4px solid #06b6d4;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.overlap-balance strong { font-size: 1.0625rem; color: #0369a1; }
.overlap-priority {
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  color: var(--text, #1f2328);
}
.overlap-pairs { gap: 0.5rem; }
.overlap-pair-card,
.overlap-card {
  padding: 0.625rem 0.875rem;
  background: var(--bg1, #ffffff);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-left-color: #eab308;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.overlap-pair-card .card-header,
.overlap-card .card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9375rem;
}
.overlap-pair-card .card-body p { margin: 0; font-size: 0.9375rem; color: var(--text, #1f2328); }
.overlap-unique {
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: var(--bg2, #f6f8fa);
  border-radius: 6px;
}
.overlap-unique ul { margin: 0.375rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.overlap-missing {
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: #fef3c7;
  border-left: 4px solid #eab308;
  border-radius: 6px;
  color: var(--text, #1f2328);
}
.overlap-result-fallback {
  white-space: pre-wrap;
  font-size: 0.875rem;
  padding: 0.75rem;
  background: var(--bg2, #f6f8fa);
  border: 1px dashed var(--border, #d1d9e0);
  border-radius: 6px;
}

/* Obsession proposal result */
.obsession-result { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.obsession-howto {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  border-radius: 6px;
  color: var(--text, #1f2328);
}
.obsession-howto strong { color: #15803d; }
/* T7: 採用後の使用箇所 3 件の縦並びリスト */
.obsession-usage-howto {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #bbf7d0;
}
.obsession-usage-list {
  list-style: none;
  margin: 0.375rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.obsession-usage-list li {
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text, #1f2328);
}
.obsession-usage-label {
  display: inline-block;
  font-weight: 600;
  color: #15803d;
  margin-right: 0.375rem;
}
.obsession-recommendation {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  background: #fef3c7;
  border-left: 4px solid #eab308;
  border-radius: 6px;
}
.obsession-cases { gap: 0.625rem; }
.obsession-case-card,
.obsession-card {
  padding: 0.75rem 0.875rem;
  background: var(--bg1, #ffffff);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-left-color: #ec4899;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.obsession-card-recommended {
  border-left-color: #eab308;
  background: #fffbeb;
  box-shadow: 0 1px 3px rgba(234, 179, 8, 0.25);
}
.obsession-case-card .card-header,
.obsession-card .card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 1rem;
}
.obsession-case-card .card-body p {
  margin: 0.125rem 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text, #1f2328);
}
.obsession-case-card .card-body strong { color: var(--text2, #656d76); font-weight: 600; }
.obsession-case-card .card-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px dashed var(--border, #d1d9e0);
}
.obsession-case-card .card-actions button {
  min-height: 36px;
  font-size: 0.875rem;
}
.obsession-result-fallback {
  white-space: pre-wrap;
  font-size: 0.875rem;
  padding: 0.75rem;
  background: var(--bg2, #f6f8fa);
  border: 1px dashed var(--border, #d1d9e0);
  border-radius: 6px;
}


/* ============================================================
 * Round 4 (2026-04-18): Character Panel Compact Redesign
 * ============================================================
 */

/* hidden wrap — 既存テストの grep contract を維持しつつ画面占有ゼロ */
.cvp-moved-to-modal {
  display: none !important;
}

/* catchphrase empty-state */
.char-catchphrase-empty {
  color: var(--text3, #9ca3af);
  font-style: italic;
  font-size: 0.9375rem;
}

/* Missing alerts — CTA 行形式 */
.cvp-ma-row-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  margin: 0.375rem 0;
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d1d9e0);
  border-left-width: 4px;
  border-radius: 6px;
  font-size: 0.9375rem;
}
.cvp-ma-row-new.critical { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.cvp-ma-row-new.important { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.05); }
.cvp-ma-row-new.soft { border-left-color: #f97316; background: rgba(249, 115, 22, 0.04); }
.cvp-ma-row-left {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}
.cvp-ma-row-new .cvp-ma-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text, #1f2328);
}
.cvp-ma-row-new .cvp-ma-missing {
  font-size: 0.875rem;
  color: var(--text2, #656d76);
}
/* Round 5 (T-9): 編集 CTA は character-card 側に集約。alerts には
   「↓ 下のカードから編集できます」ヒント文 14px を表示するだけ。 */
.cvp-ma-hint {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text2);
  font-style: italic;
}
.cvp-ma-edit-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.cvp-ma-edit-btn:hover { filter: brightness(1.08); }
.cvp-ma-edit-btn:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
.cvp-ma-extra {
  font-size: 0.875rem;
  color: var(--text2, #656d76);
  margin: 0.5rem 0;
  font-style: italic;
}

/* Summary band wrap + next-actions wrap (Round 4 visible sections) */
.cvp-summary-band-wrap,
.cvp-next-actions-wrap {
  margin: 0.5rem 0;
}

/* ============================================================
 * Character Detail Modal Dialog
 * ============================================================
 */
#char-detail-modal {
  border: 1px solid var(--border, #d1d9e0);
  border-radius: 8px;
  padding: 0;
  /* Round 10 T-5: 表示領域拡大 (owner: テキスト羅列で読みにくい → 2 列 grid / タブ化) */
  width: min(1200px, 92vw);
  min-width: 900px;
  max-width: 85vw;
  max-height: 86vh;
  background: var(--bg1, #ffffff);
  color: var(--text, #1f2328);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
/* Round 11 T-7 hotfix: narrow breakpoint 1023→899px.
   owner viewport (865px) で fallback 発火し min-width:900px が無効化される問題の修復。
   900px 以上では base rule の min-width: 900px を必ず効かせる。 */
@media (max-width: 899px) {
  #char-detail-modal {
    min-width: 0;
    width: 95vw;
    max-width: 95vw;
  }
}
/* Round 10 T-5: 詳細モーダルのタブ UI */
.char-detail-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.char-detail-tab-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border, #d1d9e0);
  background: var(--bg2, #f6f8fa);
  padding: 0.375rem 0.5rem;
}
.char-detail-tab-btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--text, #1f2328);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.char-detail-tab-btn:hover {
  background: var(--bg3, #e6edf3);
}
.char-detail-tab-btn.active {
  background: var(--bg1, #ffffff);
  border-color: var(--border, #d1d9e0);
  border-bottom-color: var(--accent, #3b82f6);
  font-weight: 600;
}
.char-detail-tab-body {
  padding: 0.75rem 0.5rem;
}
.char-detail-tab-body[hidden] { display: none; }
.char-detail-section {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border, #d1d9e0);
}
.char-detail-section:last-child { border-bottom: none; }
.char-detail-section h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
  color: var(--text, #1f2328);
}
.char-detail-section p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}
/* Round 10 T-6: tooltip icon (話し方 / 音声辞書) */
.char-detail-tooltip-icon {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--accent, #3b82f6);
  cursor: help;
  margin-left: 0.25rem;
  user-select: none;
}
.char-detail-speech-section,
.char-detail-voice-dict-section {
  /* T-6: 2 section を別物として並置 */
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d1d9e0);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.625rem;
}
#char-detail-modal::backdrop {
  background: rgba(15, 17, 23, 0.55);
}
#char-detail-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border, #d1d9e0);
  background: var(--bg2, #f6f8fa);
}
#char-detail-modal .modal-header .char-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  font-size: 1.0625rem;
}
#char-detail-modal .modal-title-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
#char-detail-modal .modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.7;
}
#char-detail-modal .modal-role {
  font-size: 0.875rem;
  color: var(--text2, #656d76);
}
.modal-close-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: 1px solid var(--border, #d1d9e0);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--text, #1f2328);
  cursor: pointer;
}
.modal-close-btn:hover { background: var(--bg3, #e6edf3); }
.modal-close-btn:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
#char-detail-modal .modal-body {
  padding: 0.75rem 1rem;
  max-height: calc(86vh - 160px);
  overflow-y: auto;
}
#char-detail-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--border, #d1d9e0);
  background: var(--bg2, #f6f8fa);
}
#char-detail-modal .modal-footer button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

/* Modal sections (accordion) */
#char-detail-modal .modal-section {
  border-bottom: 1px dashed var(--border, #d1d9e0);
  padding: 0.5rem 0;
}
#char-detail-modal .modal-section:last-child { border-bottom: none; }
#char-detail-modal .modal-section summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.375rem 0.25rem;
  min-height: 36px;
  color: var(--accent2, #2563eb);
}
#char-detail-modal .modal-section summary:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
#char-detail-modal .modal-section p,
#char-detail-modal .modal-section ul,
#char-detail-modal .modal-section div {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0.375rem 0.25rem;
  color: var(--text, #1f2328);
}
.cvp-detail-empty {
  color: var(--text3, #9ca3af);
  font-style: italic;
  font-size: 0.9375rem;
}
.cvp-detail-skill-list,
.cvp-detail-rel-list,
.cvp-detail-history-list {
  list-style: none;
  padding-left: 0;
}
.cvp-detail-skill-list li,
.cvp-detail-rel-list li,
.cvp-detail-history-list li {
  padding: 0.25rem 0;
  border-bottom: 1px dotted var(--border, #d1d9e0);
  font-size: 0.9375rem;
}
.cvp-detail-lv {
  color: var(--text2, #656d76);
  font-size: 0.875rem;
}
.cvp-detail-voice-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px dotted var(--border, #d1d9e0);
}
.cvp-detail-voice-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text2, #656d76);
}
.cvp-detail-voice-value {
  font-size: 0.9375rem;
  color: var(--text, #1f2328);
}
.cvp-detail-history-when {
  color: var(--accent2, #2563eb);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ============================================================
 * Role color chip palettes (additional archetype colors)
 * ============================================================
 */
.role-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.role-chip.archetype-protagonist { background: #fef3c7; color: #92400e; }
.role-chip.archetype-heroine { background: #fce7f3; color: #9d174d; }
.role-chip.archetype-villain { background: #fee2e2; color: #991b1b; }
.role-chip.archetype-companion { background: #cffafe; color: #155e75; }
.role-chip.archetype-ally { background: #dcfce7; color: #166534; }
.role-chip.archetype-default { background: #e5e7eb; color: #1f2937; }

/* Round 6 E-7/E-8: silent 禁止 — relation re-infer inline banner */
.relation-reinfer-banner {
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem 0;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.6;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.relation-reinfer-banner.banner-loading {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}
.relation-reinfer-banner.banner-success {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.relation-reinfer-banner.banner-empty {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.relation-reinfer-banner.banner-error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* ============================================================
 * Round 7 T-1 / T-5 / T-8 / T-10 / T-11 / T-12 CSS
 * owner 可視 CTA + 編集モーダル empty notice + 関係性推論 empty + filter 折り畳み + voice card grid
 * ============================================================ */

/* T-1: .cvp-setup-cta — 未設定 field を「＋ X を設定する」button に置き換える CTA */
.cvp-setup-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0366d6;
  background: #f1f8ff;
  border: 1px dashed #0366d6;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cvp-setup-cta:hover {
  background: #dbedff;
  color: #044289;
  border-color: #044289;
}
.cvp-setup-cta:focus {
  outline: 2px solid #0366d6;
  outline-offset: 2px;
}

/* T-5: .p4a-empty-notice — 編集モーダル冒頭に N 項目未設定の帯を表示 */
.p4a-empty-notice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
}
.p4a-empty-notice[hidden] {
  display: none;
}
.p4a-empty-notice-title {
  font-weight: 700;
}
.p4a-empty-notice-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.p4a-empty-notice-actions button {
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  font-size: 0.9375rem;
  border-radius: 4px;
  cursor: pointer;
}
.p4a-empty-notice-actions .p4a-fill-ai-btn {
  background: #0366d6;
  color: #fff;
  border: 1px solid #0366d6;
}
.p4a-empty-notice-actions .p4a-fill-ai-btn:hover {
  background: #044289;
}

/* T-8: .crg-empty-hint (関係性 AI 推論 0 件時の reason + next 2 行 UI) */
.crg-empty-hint {
  padding: 0.875rem 1rem;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #1f2937;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.crg-empty-title {
  font-weight: 700;
  color: #111827;
  font-size: 1rem;
}
.crg-empty-reason {
  color: #4b5563;
}
.crg-empty-next {
  color: #0366d6;
  font-weight: 600;
}

/* T-10: .crg-filter-advanced — フィルタ条件の詳細を <details> で折り畳み */
.crg-filter-advanced {
  margin: 0.5rem 0 0.75rem 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
}
.crg-filter-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: #0366d6;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
}
.crg-filter-advanced[open] > summary {
  margin-bottom: 0.5rem;
}

/* T-11: .crg-empty-graph-hint — グラフ edges=0 時の hint */
.crg-empty-graph-hint {
  padding: 1rem;
  margin: 0.75rem 0;
  font-size: 0.9375rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  text-align: center;
}

/* T-12: .p4a-voice-card-grid / .p4a-voice-card — 音声 6 項目を 2 列 card grid */
.p4a-voice-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0.5rem 0 1rem 0;
}
@media (max-width: 640px) {
  .p4a-voice-card-grid {
    grid-template-columns: 1fr;
  }
}
.p4a-voice-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
}
.p4a-voice-card label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #24292f;
}
.p4a-voice-card textarea {
  width: 100%;
  min-height: 56px;
  padding: 0.375rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #1f2328;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}

/* Round 7 T-9: .p4a-impact-lead — 編集モーダル impact panel 冒頭の 3 行常時表示 lead */
.p4a-impact-lead {
  background: #f6f8fa;
  border-left: 3px solid #0969da;
  padding: 10px 14px;
  margin: 8px 0 12px 0;
  border-radius: 4px;
}
.p4a-impact-explain-lead {
  margin: 0 0 6px 0;
  font-size: 0.9375rem;
  color: #1f2328;
  font-weight: 600;
}
.p4a-impact-explain-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.875rem;
  color: #1f2328;
  line-height: 1.6;
}
.p4a-impact-explain-list li {
  margin: 2px 0;
}
.p4a-impact-empty-hint {
  margin: 8px 0 0 0;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #57606a;
  background: #f6f8fa;
  border-radius: 4px;
}

/* ========== Round 8 T-A1 / T-A2: existence_reason empty state card ========== */
.p4a-empty-field {
  margin: 8px 0 12px 0;
  padding: 12px 16px;
  background: var(--bg2, #1a1d27);
  border: 1px dashed var(--border, #2d3140);
  border-radius: 6px;
  color: var(--text, #e1e4ed);
  font-size: 0.875rem;
}
.p4a-empty-field-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text, #e1e4ed);
}
.p4a-empty-field-desc {
  font-size: 0.8125rem;
  color: var(--text2, #a8adbb);
  margin-bottom: 8px;
  line-height: 1.5;
}
/* Round 8 common AI action CTA (used by T-A2, T-C4, T-D5) */
.char-action-cta {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 4px;
  cursor: pointer;
}
.char-action-cta[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}
.char-action-cta--primary {
  background: var(--accent, #6366f1);
  color: #ffffff;
  border: 1px solid var(--accent, #6366f1);
}
.char-action-cta--primary:hover:not([aria-busy="true"]) {
  filter: brightness(1.1);
}
.p4a-ai-generate-cta {
  /* alias retained for planner doc compatibility (§7 token) */
}
/* Round 8 T-E6: updated field visual highlight (3s fade) */
.char-field-updated {
  background-color: rgba(34, 197, 94, 0.12) !important;
  transition: background-color 3s ease-out;
}
/* Round 8 T-H11 voice dictionary card grid (2-col / label+value structure) */
.p4a-voice-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0;
}
@media (max-width: 768px) {
  .p4a-voice-card-grid {
    grid-template-columns: 1fr;
  }
}
.p4a-voice-card {
  padding: 12px;
  background: var(--bg2, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  font-size: 0.875rem;
}
.p4a-voice-card-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text2, #a8adbb);
  margin-bottom: 4px;
}
.p4a-voice-card-value {
  color: var(--text, #e1e4ed);
  line-height: 1.5;
}
/* Round 8 T-I12 obsession card grid + intensity dots */
.obsession-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0;
}
@media (max-width: 768px) {
  .obsession-card-grid {
    grid-template-columns: 1fr;
  }
}
.obsession-card {
  padding: 12px;
  background: var(--bg2, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text, #e1e4ed);
}
.obsession-card-role {
  font-weight: 600;
  margin-bottom: 4px;
}
.obsession-intensity-dots {
  display: inline-block;
  letter-spacing: 2px;
  color: var(--accent, #6366f1);
}
/* Round 8 T-F7 / T-F8 / T-F9: audit diff sticky split pane */
.audit-diff-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  margin: 8px 0;
}
@media (max-width: 768px) {
  .audit-diff-split {
    grid-template-columns: 1fr;
  }
}
.audit-diff-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-diff-list-item {
  padding: 8px 12px;
  background: var(--bg2, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}
.audit-diff-list-item.is-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent, #6366f1);
}
.audit-diff-detail {
  position: sticky;
  top: 16px;
  padding: 12px;
  background: var(--bg2, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text, #e1e4ed);
}
.audit-diff-meta {
  font-size: 0.8125rem;
  color: var(--text2, #a8adbb);
  margin-bottom: 8px;
}
.char-card-updated {
  border-left: 3px solid var(--accent2, #22c55e) !important;
  animation: r8-fade-highlight 3s ease-out;
}
@keyframes r8-fade-highlight {
  0% { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .char-card-updated { animation: none; }
  .char-field-updated { transition: none; }
}

/* ============================================================
   Round 8 T-H11: 音声辞書カード 2 列 grid + label/value 構造
   ============================================================
   owner 「テキスト羅列」指摘への修復。旧 <dl><dt><dd> の縦リストから
   2 列 grid + card 型 item に再設計。1 画面に 6 項目をコンパクト表示。
   ============================================================ */
.char-voice-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0;
}
.char-voice-field-item {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  background: var(--bg2, #1f2230);
  min-height: 44px;
}
.char-voice-field-item.char-voice-empty {
  border-style: dashed;
  opacity: 0.75;
}
.char-voice-field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text2, #a8adbb);
  margin-bottom: 4px;
}
.char-voice-field-value {
  font-size: 0.875rem;
  color: var(--text, #e1e4ed);
  word-break: break-word;
}
@media (max-width: 640px) {
  .char-voice-field-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Round 10 T-7: 音声辞書タブ側 card grid 2 列適用 (系統 B 再発防止)
   ============================================================
   .p4a-voice-card-grid (編集モーダル側) と parallel に char-voice-tab-*
   を新設。別描画経路 (loadCharVoiceList) にも同規約で 2 列 grid を
   物理的に強制することで、描画経路追加時の grid 未適用再発を防ぐ。
   ============================================================ */
.char-voice-tab-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0;
}
.char-voice-tab-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  background: var(--bg2, #1f2230);
}
.char-voice-tab-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
@media (max-width: 1024px) {
  .char-voice-tab-card-grid { grid-template-columns: 1fr; }
  .char-voice-tab-field-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Round 10 T-8: 執着ポイント card grid 化
   ============================================================
   owner 指摘「執着ポイント テキストばかりでみにくいのは治ってない 何回目でしょうか」
   table 縦羅列から card grid 2-3 列に再設計。1 card にキャラ名 + 役割 badge
   + 執着タグ + 強度 bar (%) を 4 要素構造で表示する。

   Round 11 T-8 hotfix: browser-evaluator Session 3 で
   getComputedStyle.display === 'block' FAIL。specificity battle で他 rule に
   負けている可能性があるため display:grid + grid-template-columns に
   !important を付与して physical に強制する。
   ============================================================ */
.obsession-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem;
  margin: 0.5rem 0;
}
@media (min-width: 1024px) {
  .obsession-card-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .obsession-card-grid { grid-template-columns: 1fr !important; }
}
.obsession-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  background: var(--bg2, #1f2230);
  min-height: 44px;
}
.obsession-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.obsession-card-name {
  font-size: 0.9375rem;
  color: var(--text, #e1e4ed);
}
.obsession-card-role-badge {
  font-size: 0.8125rem;
}
.obsession-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.obsession-card-intensity-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.obsession-card-intensity-label {
  font-size: 0.8125rem;
  color: var(--text2, #a8adbb);
}
.obsession-card-intensity-bar {
  width: 100%;
  height: 6px;
  background: var(--bg3, #131520);
  border-radius: 3px;
  overflow: hidden;
}
.obsession-card-intensity-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transition: width 0.3s ease;
}

/* =========================================================================
   Round 10 T-9: POPUP 全体のテキスト羅列解消 — 共通モーダル幅拡張 + section grid
   ========================================================================= */
.popup-wide-modal {
  max-width: 85vw;
  min-width: 900px;
  padding: 20px;
}
.popup-section {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg2, #1a1d27);
  border-radius: 6px;
  border: 1px solid var(--border, #2a2e3a);
}
.popup-section-header {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text1, #e5e7eb);
  margin-bottom: 0.5rem;
}
.popup-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .popup-section-grid {
    grid-template-columns: 1fr;
  }
  .popup-wide-modal {
    min-width: auto;
    max-width: 95vw;
  }
}