/* =============================================================
 * Leafy — Articles Content Studio
 * 緑×白を基調とした徹底的にモダンなUIスタイル
 * ============================================================= */

:root {
  --brand-50:  #F0FDF4;
  --brand-100: #DCFCE7;
  --brand-200: #BBF7D0;
  --brand-300: #86EFAC;
  --brand-400: #4ADE80;
  --brand-500: #22C55E;
  --brand-600: #16A34A;
  --brand-700: #15803D;
  --brand-800: #166534;
  --brand-900: #14532D;

  --ink-50:  #F8FAFC;
  --ink-100: #F1F5F9;
  --ink-200: #E2E8F0;
  --ink-300: #CBD5E1;
  --ink-400: #94A3B8;
  --ink-500: #64748B;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1E293B;
  --ink-900: #0F172A;

  --bg: #F7FBF8;
  --card: rgba(255,255,255,0.78);
  --border: rgba(15,23,42,0.06);
  --border-strong: rgba(22,163,74,0.18);
  --shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.08);
  --shadow-ring: 0 0 0 1px rgba(34,197,94,0.12), 0 20px 40px -20px rgba(34,197,94,0.35);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--ink-800); }
[x-cloak] { display: none !important; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
  font-variant-ligatures: common-ligatures contextual;
  background:
    radial-gradient(1000px 600px at -5% -10%, #E8FBEF 0%, transparent 55%),
    radial-gradient(900px 600px at 105% 110%, #EBF7EF 0%, transparent 55%),
    #FAFCFB;
  min-height: 100vh;
}

/* ─── Ambient ─── */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:9999px; filter: blur(80px); opacity: .45; }
.orb-a { width: 520px; height: 520px; left: -120px; top: -140px; background: radial-gradient(circle, #A7F3D0 0%, transparent 65%); animation: float 14s ease-in-out infinite; }
.orb-b { width: 620px; height: 620px; right: -180px; top: 30%; background: radial-gradient(circle, #BBF7D0 0%, transparent 65%); animation: float 18s ease-in-out infinite reverse; }
.orb-c { width: 480px; height: 480px; left: 40%; bottom: -160px; background: radial-gradient(circle, #D1FAE5 0%, transparent 65%); animation: float 22s ease-in-out infinite; }

/* Respect prefers-reduced-motion (#13) — kill the looping float animations
   for users who set "reduce motion" in their OS. The orbs still render
   statically so the brand look is preserved; we just stop the GPU work. */
@media (prefers-reduced-motion: reduce) {
  .orb-a, .orb-b, .orb-c { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* On small screens, the ambient layer is mostly behind cards anyway and
   the constant blur+animation hits battery on phones. Hide it. */
@media (max-width: 720px) {
  .ambient { display: none; }
}
.grid-fade {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(22,163,74,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,163,74,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 75%);
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

/* ─── Sidebar ─── */
.sidebar {
  position: sticky; top: 0;
  width: 280px; min-width: 280px;
  height: 100vh;
  height: 100dvh;
  padding: 22px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.6));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--border);
  display:flex; flex-direction: column;
  z-index: 20;
}
.brand-row { display:flex; align-items:center; gap: 12px; padding: 6px 4px 20px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.brand-mark {
  width: 42px; height:42px; border-radius: 14px;
  background: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%);
  display:grid; place-items:center;
  box-shadow: 0 8px 20px -10px rgba(22,163,74,.5), inset 0 -2px 0 rgba(22,163,74,.12);
}
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-900); }
.brand-sub  { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); font-weight: 600; }

.nav-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 12px; scrollbar-width: thin; }
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }

.nav-item {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-600); font-weight: 500; font-size: 13.5px;
  cursor: pointer; transition: all .2s ease; text-align: left;
}
.nav-item:hover { background: rgba(240,253,244,0.8); color: var(--ink-900); }
.nav-item .nav-chev { opacity: 0; transform: translateX(-4px); transition: .2s; }
.nav-item:hover .nav-chev { opacity: .5; transform: translateX(0); }
.nav-item.is-active {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  color: var(--brand-800);
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.15), 0 6px 16px -10px rgba(22,163,74,.4);
}
.nav-item.is-active .nav-chev { opacity: 1; transform: translateX(0); color: var(--brand-600); }

.nav-index { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-400); width: 28px; }
.nav-item.is-active .nav-index { color: var(--brand-500); }
.nav-index.is-data { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--brand-700); text-transform: uppercase; }
.nav-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(22,163,74,.06); color: var(--brand-700); }
.nav-icon svg { width: 14px; height: 14px; }
.nav-item.is-active .nav-icon { background: white; color: var(--brand-600); box-shadow: 0 4px 10px -4px rgba(22,163,74,.4); }
.nav-chev svg { width: 14px; height: 14px; }

.side-footer { padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.side-chip {
  display: flex; align-items:center; gap:10px; justify-content: flex-start;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: white; color: var(--ink-700); font-weight: 500; font-size: 13px;
  cursor: pointer; transition: .2s;
}
.side-chip:hover { border-color: var(--border-strong); background: var(--brand-50); color: var(--brand-800); }
.side-chip svg { width: 16px; height: 16px; }

a.side-chip { text-decoration: none; }
.side-chip-admin {
  border-color: #FCD34D; background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E; font-weight: 600;
}
.side-chip-admin:hover { border-color: #F59E0B; background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%); color: #78350F; }

.side-user {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 2px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--brand-50);
}
.side-user-meta {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
  color: var(--ink-700); font-size: 12px;
}
.side-user-meta svg { width: 14px; height: 14px; flex: none; color: var(--brand-600); }
.side-user-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.side-user-out {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: white; color: var(--ink-600); cursor: pointer; transition: .15s;
}
.side-user-out:hover { background: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; }
.side-user-out svg { width: 14px; height: 14px; }

.status-pills { display: flex; gap: 6px; }
.pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 999px;
  background: #F1F5F9; color: var(--ink-600);
}
.pill.ok   { background: #DCFCE7; color: #166534; }
.pill.warn { background: #FEF3C7; color: #92400E; }
.pill svg  { width: 10px; height: 10px; }

/* ─── Main area ─── */
.main-area { flex: 1; min-width: 0; position: relative; z-index: 1; }
.topbar {
  position: sticky; top: 0; z-index: 15;
  display:flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-500); }
.crumb svg { color: var(--ink-300); }

.metric-dot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--ink-700);
  transition: .2s;
}
.metric-dot svg { width: 14px; height: 14px; color: var(--brand-600); }
.metric-dot .metric-label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-500);
  letter-spacing: .02em;
}
.metric-dot .metric-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--ink-900);
  padding-left: 2px;
}
.metric-dot.highlight {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  color: var(--brand-800); border-color: var(--border-strong);
}
.metric-dot.highlight .metric-label { color: var(--brand-700); }
.metric-dot.highlight .metric-num   { color: var(--brand-800); }
/* On narrow widths (< 720px), drop the label text and keep the icon
   + number so the header doesn't wrap into two rows. */
@media (max-width: 720px) {
  .metric-dot .metric-label { display: none; }
}
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display:grid; place-items:center; background: white; border: 1px solid var(--border);
  color: var(--ink-600); cursor: pointer; transition: .2s;
}
.icon-btn:hover { color: var(--brand-700); border-color: var(--border-strong); background: var(--brand-50); }
.icon-btn svg { width: 16px; height: 16px; }

.page { padding: 28px 32px 80px; max-width: 1400px; margin: 0 auto; }

/* ─── Hero ─── */
.hero {
  display: block;
  margin-bottom: 22px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 10px;
}
.eyebrow svg { width: 14px; height: 14px; }
.hero-title {
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; color: var(--ink-900);
  letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px;
  background: linear-gradient(135deg, #0F172A 0%, #166534 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc { color: var(--ink-500); font-size: 15px; max-width: 720px; line-height: 1.6; margin: 0; }

/* ─── Card ─── */
.card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s ease;
}
.card:hover { box-shadow: 0 2px 6px rgba(15,23,42,.03), 0 24px 48px -24px rgba(22,163,74,.25); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.card-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-600); }
.card-title { font-size: 20px; font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; margin: 4px 0 6px; }
.card-sub { color: var(--ink-500); font-size: 13.5px; line-height: 1.6; max-width: 70ch; }

.section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.section-title svg { width: 18px; height: 18px; color: var(--brand-600); }
.count-badge {
  display: inline-block; background: var(--brand-100); color: var(--brand-800);
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}

.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* ─── Form ─── */
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-600); margin-bottom: 6px; letter-spacing: .01em; }
.input {
  width: 100%; padding: 10px 12px;
  background: white; border: 1px solid var(--ink-200); border-radius: 10px;
  color: var(--ink-900); font-size: 14px; font-family: inherit;
  transition: all .18s ease;
  outline: none;
}
.input.compact { padding: 8px 10px; font-size: 13px; }
.input.textarea { resize: vertical; line-height: 1.6; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.input:hover:not(:focus) { border-color: var(--ink-300); }

/* range */
.range {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--ink-100); border-radius: 999px; outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 999px;
  background: white; border: 2px solid var(--brand-500);
  box-shadow: 0 4px 10px -2px rgba(22,163,74,.35); cursor: pointer;
  transition: .15s;
}
.range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: white; border: 2px solid var(--brand-500); box-shadow: 0 4px 10px -2px rgba(22,163,74,.35); cursor: pointer; }
.range-val { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--brand-700); font-weight: 600; }

/* Range slider with bubble tooltip pinned above the thumb (#20).
   Uses --range-pct (set inline by Alpine) to colour the active portion
   of the track and keep the bubble in sync with the thumb. */
.range-wrap {
  position: relative; padding-top: 22px; padding-bottom: 6px;
}
.range-wrap .range {
  background: linear-gradient(
    to right,
    var(--brand-500) 0%, var(--brand-500) var(--range-pct, 0%),
    var(--ink-100) var(--range-pct, 0%), var(--ink-100) 100%
  );
}
.range-bubble {
  position: absolute; top: 0;
  transform: translateX(-50%);
  background: var(--brand-700); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 10px -4px rgba(22,163,74,.5);
}
.range-bubble::after {
  content: ""; position: absolute;
  left: 50%; bottom: -4px; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--brand-700);
  border-bottom: 0;
}

/* toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: white; border: 1px solid var(--ink-200); border-radius: 12px; cursor: pointer; font-size: 13.5px; color: var(--ink-700); transition: .2s; }
.toggle-row:hover { border-color: var(--border-strong); }
.toggle-row.compact { padding: 6px 10px; font-size: 12.5px; }
.switch { position: relative; width: 40px; height: 22px; background: var(--ink-200); border-radius: 999px; transition: .25s; flex: none; }
.switch.small { width: 32px; height: 18px; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 999px; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .25s; }
.switch.small::after { width: 14px; height: 14px; }
.switch.on { background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); }
.switch.on::after { transform: translateX(18px); }
.switch.small.on::after { transform: translateX(14px); }

/* buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: white; font-weight: 600; font-size: 13.5px;
  border: none; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(22,163,74,.55), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(22,163,74,.65), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-primary svg { width: 16px; height: 16px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  background: white; border: 1px solid var(--ink-200); color: var(--ink-700);
  font-weight: 500; font-size: 13px; cursor: pointer; transition: .18s;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--border-strong); background: var(--brand-50); color: var(--brand-800); }
/* Danger buttons get a permanent visual delta — not just on hover —
   so they don't sit invisibly next to "全選択 / 全解除" until the user
   hovers and finds out which is which. The thicker left border doubles
   as a visual stop-bar that interrupts the row of ghost buttons. */
.btn-ghost.danger {
  color: #B91C1C; border-color: #FCA5A5; background: #FEF2F2;
  box-shadow: inset 3px 0 0 #DC2626;
}
.btn-ghost.danger:hover {
  background: #FEE2E2; color: #991B1B; border-color: #F87171;
  box-shadow: inset 3px 0 0 #B91C1C;
}
.btn-ghost.danger:disabled {
  opacity: .55; cursor: not-allowed;
  background: #FAFAFA; color: #9CA3AF; border-color: #E5E7EB;
  box-shadow: inset 3px 0 0 #D1D5DB;
}
.btn-ghost.success { color: var(--brand-700); border-color: var(--brand-200); }
.btn-ghost.success:hover { background: var(--brand-50); }
.btn-ghost svg { width: 15px; height: 15px; }

.mini-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: white; border: 1px solid var(--ink-200); color: var(--ink-600);
  cursor: pointer; transition: .18s; text-decoration: none;
}
.mini-btn:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--border-strong); }
.mini-btn svg { width: 14px; height: 14px; }

/* spinner */
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner.big { width: 36px; height: 36px; border-width: 3px; border-color: rgba(22,163,74,.2); border-top-color: var(--brand-600); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Source option (radio-as-card) ─── */
.source-grid { display: grid; gap: 8px; }
.source-option {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--ink-200); border-radius: 12px;
  background: white; cursor: pointer; transition: .18s;
}
.source-option:hover { border-color: var(--border-strong); background: #FAFDFB; }
.source-option.is-active {
  border-color: var(--brand-400);
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1);
}
.so-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-100); display: grid; place-items: center; color: var(--brand-700); }
.so-icon svg { width: 16px; height: 16px; }
.source-option.is-active .so-icon { background: var(--brand-500); color: white; }
.so-title { font-weight: 600; font-size: 13.5px; color: var(--ink-900); }
.so-desc { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

/* ─── Chips ─── */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-800);
  font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--brand-100);
}
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: 0; color: var(--brand-700);
  cursor: pointer; font-size: 14px; line-height: 1;
  font-family: inherit;
  padding: 0;
  transition: .12s;
}
.chip-x:hover { background: rgba(22,163,74,.18); color: var(--brand-900); }

/* "未保存" badge in editor toolbars (#21). Distinct amber tone so it
   reads as a status warning rather than a dressed-up button. */
.dirty-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #FEF3C7; border: 1px solid #FCD34D;
  color: #92400E; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.dirty-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 3px rgba(217,119,6,.18);
  animation: dirty-pulse 1.6s ease-in-out infinite;
}
@keyframes dirty-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6,.10); }
}

.chip-info {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1px solid var(--brand-100);
}
.chip-info svg { width: 22px; height: 22px; color: var(--brand-600); flex: none; }

/* ─── Seg tabs ─── */
.seg-tabs {
  display: inline-flex; padding: 4px; border-radius: 12px;
  background: var(--ink-100); gap: 2px;
}
.seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 9px;
  background: transparent; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-600); transition: .18s;
}
.seg svg { width: 14px; height: 14px; }
.seg:hover { color: var(--ink-900); }
.seg.is-active { background: white; color: var(--brand-700); box-shadow: 0 2px 6px rgba(15,23,42,.08); font-weight: 600; }

/* ─── Data table ─── */
.table-wrap {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: white;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; background: var(--ink-50); color: var(--ink-500);
  font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--ink-100); color: var(--ink-700); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--brand-50); color: var(--ink-900); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.row-limit { padding: 10px 16px; font-size: 12px; color: var(--ink-400); background: var(--ink-50); border-top: 1px solid var(--border); text-align: center; }

/* ─── Plan cards ─── */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.plan-card {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 16px; border: 1px solid var(--border);
  background: white; transition: .22s;
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-ring); }
.plan-card.is-selected {
  background: linear-gradient(180deg, #FAFDFB 0%, #F0FDF4 100%);
  border-color: var(--brand-300);
}
.plan-check { position: absolute; top: 14px; right: 14px; cursor: pointer; }
.plan-check input { position: absolute; opacity: 0; pointer-events: none; }
.check-mark {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--ink-300);
  background: white; transition: .2s;
}
.check-mark::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) scale(0); transition: .2s;
  margin-top: -3px;
}
.plan-card.is-selected .check-mark {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  border-color: var(--brand-500);
  box-shadow: 0 6px 14px -4px rgba(22,163,74,.5);
}
.plan-card.is-selected .check-mark::after { transform: rotate(-45deg) scale(1); }
.plan-card.is-generated {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}
.plan-card.is-generated .plan-title { color: var(--ink-700); }
.plan-card.is-generated .check-mark {
  opacity: .35; cursor: not-allowed;
}
.plan-date-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.plan-date {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--brand-700);
  background: var(--brand-50); padding: 3px 8px; border-radius: 999px;
}
.plan-generated-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: #15803d;
  background: #dcfce7; border: 1px solid #86efac;
  padding: 3px 8px; border-radius: 999px;
}
.plan-generated-badge svg { width: 12px; height: 12px; }
.plan-title { font-weight: 700; font-size: 14.5px; color: var(--ink-900); line-height: 1.45; padding-right: 30px; }
.plan-keyword { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-500); margin-top: 8px; }
.plan-keyword svg { width: 12px; height: 12px; }
.plan-angle { font-size: 12.5px; color: var(--ink-600); margin-top: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-reader { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-500); margin-top: 6px; }
.plan-reader svg { width: 12px; height: 12px; }
.plan-outline summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--brand-700); cursor: pointer;
  margin-top: 10px; user-select: none;
  list-style: none;
}
.plan-outline summary::-webkit-details-marker { display: none; }
.plan-outline-chev {
  width: 12px; height: 12px;
  transition: transform .15s ease;
  color: var(--brand-600);
}
.plan-outline[open] .plan-outline-chev { transform: rotate(90deg); }
.plan-outline ul { margin: 8px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-600); line-height: 1.7; }
.plan-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.plan-delete { padding: 4px 10px; font-size: 11.5px; }
.plan-delete svg { width: 13px; height: 13px; }

/* Knowledge listing rows: title + size/mtime + actions only — no preview
   line, so the card can be much shorter. Checkbox lives on the LEFT
   here (overriding plan-card's top-right default) so it doesn't fight
   the action buttons for the right edge of the row. */
.knowledge-row { padding: 10px 14px 10px 44px; }
.knowledge-row .plan-check {
  top: 50%; left: 12px; right: auto;
  transform: translateY(-50%);
}
.knowledge-row .plan-title { font-size: 13.5px; padding-right: 0; line-height: 1.35; }
.knowledge-row .plan-keyword { margin-top: 2px; font-size: 11px; }
.knowledge-row .plan-actions { margin-top: 6px; }
.knowledge-row .plan-actions .btn-ghost { padding: 4px 10px; font-size: 11.5px; }
.knowledge-row .plan-actions .btn-ghost svg { width: 13px; height: 13px; }
@media (min-width: 768px) {
  .knowledge-row { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 2px; column-gap: 12px; }
  .knowledge-row .plan-title { grid-column: 1; padding-right: 0; }
  .knowledge-row .plan-keyword { grid-column: 1; }
  .knowledge-row .plan-actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ─── Drop zone ─── */
.drop-zone {
  border: 2px dashed var(--brand-200);
  border-radius: 16px; background: var(--brand-50);
  padding: 32px; text-align: center; transition: .2s;
}
.drop-zone:hover { background: var(--brand-100); border-color: var(--brand-300); }
.drop-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.drop-icon { width: 56px; height: 56px; border-radius: 14px; background: white; display: grid; place-items: center; color: var(--brand-600); box-shadow: 0 8px 20px -8px rgba(22,163,74,.35); }
.drop-icon svg { width: 22px; height: 22px; }
.drop-title { font-weight: 600; color: var(--ink-900); }
.drop-sub { font-size: 12.5px; color: var(--ink-500); }

/* ─── Action hint ─── */
.action-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 14px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--ink-700); font-size: 13.5px;
}
.action-hint code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--brand-800); background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 4px; }

/* ─── List compact ─── */
.list-compact { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.list-compact::-webkit-scrollbar { width: 6px; }
.list-compact::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: .15s; }
.list-row:hover { background: var(--brand-50); }
.list-title { font-size: 13px; color: var(--ink-900); font-weight: 500; }
.list-sub { font-size: 11.5px; color: var(--ink-500); }

.empty { padding: 20px; text-align: center; color: var(--ink-400); font-size: 13px; }

/* ─── Result banner ─── */
.result-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.result-banner.ok { background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-100); }
.result-banner.warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.result-banner svg { width: 22px; height: 22px; }

/* ─── Source rows ─── */
.source-row { padding: 10px 12px; border-radius: 10px; background: var(--ink-50); border: 1px solid var(--border); transition: .15s; }
.source-row:hover { background: white; border-color: var(--border-strong); }
.source-row--with-actions { display: flex; align-items: flex-start; gap: 8px; }
.source-row-main { flex: 1 1 auto; min-width: 0; }
.source-row-delete { flex: 0 0 auto; padding: 6px 8px; }
.source-row-delete svg { width: 14px; height: 14px; }
.source-title { display: block; font-weight: 600; font-size: 13px; color: var(--brand-700); text-decoration: none; }
.source-title:hover { text-decoration: underline; }
.source-url { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-400); margin-top: 2px; word-break: break-all; }
.source-snippet { font-size: 12.5px; color: var(--ink-600); margin-top: 4px; line-height: 1.5; }

/* ─── Packet expansion ─── */
.pkt { border: 1px solid var(--border); border-radius: 12px; background: white; overflow: hidden; }
.pkt summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
.pkt summary::-webkit-details-marker { display: none; }
.pkt[open] summary { border-bottom: 1px solid var(--border); background: var(--ink-50); }
.pkt-title { font-weight: 600; color: var(--ink-900); font-size: 13.5px; }
.pkt-kw { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.pkt-kw svg { width: 11px; height: 11px; }
.pkt-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--brand-700); background: var(--brand-50); padding: 3px 8px; border-radius: 6px; }
.pkt-delete { padding: 4px 8px; flex: 0 0 auto; }
.pkt-delete svg { width: 14px; height: 14px; }
.pkt-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }

/* ─── Stat tiles ─── */
.stat-tile { padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #FAFDFB 0%, #F0FDF4 100%); border: 1px solid var(--brand-100); }
.stat-label { font-size: 10.5px; font-weight: 700; color: var(--brand-700); letter-spacing: .1em; text-transform: uppercase; }
.stat-val { font-size: 28px; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ─── Article editor ─── */
.editor-split { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-top: 4px; }
.art-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.art-bulk-toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.art-bulk-toolbar .btn-ghost.compact { padding: 4px 9px; font-size: 11px; }
.art-bulk-toolbar .btn-ghost.compact svg { width: 12px; height: 12px; }
.art-row { position: relative; display: flex; align-items: stretch; }
.art-row .art-row-check { position: absolute; top: 12px; left: 10px; cursor: pointer; z-index: 2; }
.art-row .art-row-check input { position: absolute; opacity: 0; pointer-events: none; }
.art-row .art-row-check .check-mark { width: 18px; height: 18px; border-radius: 5px; }
.art-row.is-checked .art-row-check .check-mark {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  border-color: var(--brand-500);
}
.art-row.is-checked .art-row-check .check-mark::after { transform: rotate(-45deg) scale(.85); }
.art-row .art-item { width: 100%; padding-left: 36px; }
.art-list { max-height: 640px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--ink-50); border-radius: 14px; }
.art-list::-webkit-scrollbar { width: 6px; }
.art-list::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.art-item {
  text-align: left; padding: 10px 12px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-700); cursor: pointer; transition: .18s;
}
.art-item:hover { background: white; }
.art-item.is-active { background: white; border-color: var(--brand-200); box-shadow: var(--shadow-ring); }
.art-date { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--brand-700); }
.art-title { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-top: 2px; line-height: 1.4; }
.art-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-500); margin-top: 4px; }
.art-meta svg { width: 11px; height: 11px; }

.art-editor { display: flex; flex-direction: column; gap: 10px; }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-body { border: 1px solid var(--border); border-radius: 14px; background: white; overflow: hidden; min-height: 620px; display: grid; }
.editor-body.split { grid-template-columns: 1fr 1fr; }
.editor-body.edit { grid-template-columns: 1fr; }
.editor-body.preview { grid-template-columns: 1fr; }
.editor-area {
  width: 100%; min-height: 620px;
  padding: 18px 22px; border: none; outline: none;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7;
  color: var(--ink-800); resize: none;
  background: #FDFEFD;
}
.editor-body.split .editor-area { border-right: 1px solid var(--border); }

/* markdown */
.markdown-body {
  padding: 20px 26px; overflow-y: auto; max-height: 620px;
  font-size: 14px; line-height: 1.75; color: var(--ink-800);
  overflow-wrap: anywhere; word-break: break-word;
}
.markdown-body h1 { font-size: 26px; font-weight: 800; color: var(--ink-900); margin: 0 0 16px; letter-spacing: -.02em; }
.markdown-body h2 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); letter-spacing: -.01em; }
.markdown-body h3 { font-size: 16px; font-weight: 700; color: var(--brand-800); margin: 22px 0 8px; }
.markdown-body p { margin: 10px 0; }
.markdown-body ul, .markdown-body ol { margin: 10px 0; padding-left: 24px; }
.markdown-body li { margin: 4px 0; }
.markdown-body blockquote { border-left: 3px solid var(--brand-400); background: var(--brand-50); margin: 12px 0; padding: 8px 14px; color: var(--ink-700); border-radius: 0 8px 8px 0; }
.markdown-body code { background: var(--ink-100); color: var(--ink-800); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; }
.markdown-body pre { background: var(--ink-900); color: #E2E8F0; padding: 16px; border-radius: 10px; overflow-x: auto; font-size: 12.5px; }
.markdown-body pre code { background: transparent; color: inherit; padding: 0; }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.markdown-body th, .markdown-body td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }
.markdown-body th { background: var(--ink-50); font-weight: 600; }
.markdown-body a { color: var(--brand-700); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }

/* ─── Verdict pills ─── */
.verdict-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--ink-100); color: var(--ink-700);
}
.verdict-pill.ok { background: var(--brand-100); color: var(--brand-800); }
.verdict-pill.warn { background: #FEF3C7; color: #92400E; }
.verdict-pill.bad { background: #FEE2E2; color: #B91C1C; }
.verdict-pill.info { background: #DBEAFE; color: #1E40AF; }
.verdict-pill.mute { background: var(--ink-100); color: var(--ink-600); }

/* ─── Factcheck result cards (Step 7 tab) ─── */
.fc-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; margin-top: 14px;
  background: var(--ink-50); border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11.5px; color: var(--ink-600);
}
.fc-target-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; background: var(--ink-50);
}
.fc-target-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: white; border: 1px solid var(--border);
  cursor: pointer; transition: .12s;
}
.fc-target-row:hover { border-color: var(--border-strong); background: var(--brand-50); }
.fc-target-row.is-checked {
  border-color: var(--brand-500);
  background: linear-gradient(135deg, var(--brand-50) 0%, #fff 60%);
}
.fc-target-row input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--brand-600); flex: none;
}
.fc-target-meta { min-width: 0; flex: 1; }
.fc-target-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--brand-700);
}
.fc-target-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink-900);
  line-height: 1.4; margin-top: 2px; word-break: break-word;
  display: flex; align-items: center; flex-wrap: wrap;
}

.fc-result-list { display: flex; flex-direction: column; gap: 14px; }
.fc-result {
  border: 1px solid var(--border);
  background: white;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.fc-result-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.fc-result-meta { min-width: 0; }
.fc-result-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-500); font-weight: 600;
}
.fc-result-title {
  font-size: 15px; font-weight: 700; color: var(--ink-900);
  line-height: 1.4; margin-top: 2px; word-break: break-word;
}
.fc-reviewer-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.fc-reviewer {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--ink-50);
}
.fc-reviewer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.fc-reviewer-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13.5px; color: var(--ink-800);
}
.fc-reviewer-name svg { width: 14px; height: 14px; color: var(--brand-600); }
.fc-reviewer-summary {
  font-size: 12.5px; color: var(--ink-700); line-height: 1.65;
  background: white; border-left: 3px solid var(--brand-300);
  padding: 8px 10px; border-radius: 0 8px 8px 0; margin: 0 0 10px;
}
.fc-count-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.fc-count {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px; background: white; border: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-700);
}
.fc-count-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 12.5px; line-height: 1;
}
.fc-count-label { font-weight: 600; }
.fc-count--ok   { background: #F0FDF4; border-color: var(--brand-200); color: var(--brand-800); }
.fc-count--warn { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.fc-count--bad  { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.fc-count--info { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.fc-count--mute { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-600); }

.fc-detail-toggle,
.fc-sources-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  cursor: pointer; transition: .15s;
  font-family: inherit;
}
.fc-detail-toggle:hover,
.fc-sources-toggle:hover {
  background: white; border-color: var(--brand-300); color: var(--brand-800);
}
.fc-detail-toggle svg,
.fc-sources-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.fc-detail-toggle svg.is-open,
.fc-sources-toggle svg.is-open { transform: rotate(180deg); }

.fc-claim-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fc-claim {
  background: white; border: 1px solid var(--border); border-left: 3px solid var(--ink-300);
  border-radius: 10px; padding: 10px 12px;
}
.fc-claim--ok   { border-left-color: var(--brand-500); }
.fc-claim--warn { border-left-color: #FBBF24; }
.fc-claim--bad  { border-left-color: #F87171; }
.fc-claim--info { border-left-color: #60A5FA; }
.fc-claim--mute { border-left-color: var(--ink-300); }
.fc-claim-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.fc-claim-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-500); font-weight: 600;
}
.fc-claim-body {
  font-size: 13px; color: var(--ink-900); font-weight: 600;
  line-height: 1.55; margin-bottom: 6px;
}
.fc-claim-row {
  display: flex; gap: 8px; font-size: 12px; color: var(--ink-700);
  line-height: 1.55; margin-top: 3px;
}
.fc-claim-label {
  flex-shrink: 0;
  background: var(--ink-100); color: var(--ink-600);
  padding: 1px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  height: fit-content; margin-top: 1px;
}

.fc-sources {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.fc-sources-count {
  background: var(--ink-100); color: var(--ink-700);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
}
.fc-sources-list {
  margin: 10px 0 0; padding: 10px 12px; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto;
  background: var(--ink-50); border: 1px solid var(--border); border-radius: 10px;
}
.fc-sources-list li {
  display: flex; gap: 8px; font-size: 12px; line-height: 1.55;
}
.fc-source-id {
  font-family: 'JetBrains Mono', monospace;
  background: var(--brand-50); color: var(--brand-800);
  padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700;
  height: fit-content; margin-top: 1px; flex-shrink: 0;
}
.fc-sources-list a {
  color: var(--brand-700); text-decoration: none; word-break: break-all;
}
.fc-sources-list a:hover { text-decoration: underline; }

.empty-fc {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 4px;
}
.empty-fc svg { width: 36px; height: 36px; color: var(--brand-500); flex-shrink: 0; }
.empty-fc-title { font-weight: 700; font-size: 14px; color: var(--ink-800); }
.empty-fc-sub { font-size: 12.5px; color: var(--ink-600); margin-top: 3px; line-height: 1.6; }

.btn-ghost.compact {
  padding: 6px 10px; font-size: 12px;
}

/* ─── Status badges ─── */
.badge {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--ink-100); color: var(--ink-700);
}
.badge.small { font-size: 10px; padding: 2px 6px; }
.badge.drafting  { background: #FEF3C7; color: #92400E; }
.badge.pending   { background: #DBEAFE; color: #1E40AF; }
.badge.approved  { background: var(--brand-100); color: var(--brand-800); }
.badge.published { background: linear-gradient(135deg, #86EFAC, #22C55E); color: #052E16; }
.badge.revise    { background: #FFEDD5; color: #9A3412; }
.badge.rejected  { background: #FEE2E2; color: #B91C1C; }

/* ─── File grid ─── */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.file-card { position: relative; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: white; transition: .2s; }
.file-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-ring); transform: translateY(-1px); }
.file-head { margin-bottom: 8px; }
.file-title { font-weight: 600; font-size: 13px; color: var(--ink-900); line-height: 1.4; }
.file-name { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-400); margin-top: 4px; word-break: break-all; }
.file-actions { display: flex; gap: 4px; margin-top: 10px; }

/* ─── Viewer split ─── */
.viewer-split { display: grid; grid-template-columns: 280px 1fr; gap: 14px; margin-top: 4px; }
.viewer-list { max-height: 720px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--ink-50); border-radius: 14px; }
.viewer-list::-webkit-scrollbar { width: 6px; }
.viewer-list::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.viewer-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px; background: transparent;
  border: 1px solid transparent; cursor: pointer; transition: .18s;
  text-align: left;
}
.viewer-item:hover { background: white; }
.viewer-item.is-active { background: white; border-color: var(--brand-200); box-shadow: var(--shadow-ring); }
.viewer-title { font-size: 12.5px; font-weight: 500; color: var(--ink-900); line-height: 1.4; }

.viewer-main { display: flex; flex-direction: column; gap: 10px; min-height: 620px; min-width: 0; }
.viewer-main.placeholder { align-items: center; justify-content: center; color: var(--ink-400); background: var(--ink-50); border-radius: 14px; gap: 12px; }
.viewer-main.placeholder svg { width: 48px; height: 48px; color: var(--ink-300); }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer-body { border: 1px solid var(--border); border-radius: 14px; background: white; overflow: hidden; min-height: 600px; display: grid; }
.viewer-body.edit, .viewer-body.preview { grid-template-columns: 1fr; }
.viewer-body.split { grid-template-columns: 1fr 1fr; }
.viewer-body.split .editor-area { border-right: 1px solid var(--border); }

/* ─── Factcheck highlight + comments ─── */
.markdown-body mark.fc-flag,
mark.fc-flag {
  background: var(--brand-100);
  color: inherit;
  padding: 0 3px;
  border-radius: 4px;
  border-bottom: 2px solid var(--brand-300);
  box-shadow: 0 0 0 1px rgba(34,197,94,.18);
  cursor: help;
  scroll-margin-top: 80px;
  transition: background .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.markdown-body mark.fc-flag:hover,
mark.fc-flag:hover {
  background: var(--brand-200);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(34,197,94,.28);
}

/* Custom hover tooltip. The visual card is rendered by a singleton
   floating element (`.fc-flag-tip--floating`) that JS appends directly to
   <body> on hover. This is critical: ancestors of the mark (`.card`) use
   `backdrop-filter`, which creates a containing block for `position:fixed`.
   If the tip lived inside the mark, `position:fixed` would resolve relative
   to that containing block instead of the viewport — and the surrounding
   `.viewer-body { overflow:hidden }` would clip the right edge of the tip
   when the mark sits near the right side of the screen (notably in the
   split view). Hoisting the tip to <body> bypasses both issues, and JS in
   app.js writes top/left so the card always stays inside the viewport.

   The original child <.fc-flag-tip> inside each <mark> is kept solely as a
   data carrier (it holds the formatted innerHTML that JS clones to the
   floating element). It must never render — hence `display:none` here. */
.markdown-body mark.fc-flag .fc-flag-tip,
mark.fc-flag .fc-flag-tip {
  display: none !important;
}
.fc-flag-tip--floating {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: none;
  width: max-content;
  max-width: min(420px, calc(100vw - 24px));
  background: white;
  color: var(--ink-800);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,.18), 0 0 0 1px rgba(34,197,94,.08);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  user-select: none;
  pointer-events: none;
}
.fc-flag-tip-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
}
.fc-flag-tip-verdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  background: var(--ink-100);
  color: var(--ink-700);
}
.fc-flag-tip-verdict--bad  { background: #FEE2E2; color: #B91C1C; }
.fc-flag-tip-verdict--warn { background: #FEF3C7; color: #92400E; }
.fc-flag-tip-verdict--info { background: #DBEAFE; color: #1E40AF; }
.fc-flag-tip-reviewer {
  font-size: 11px; color: var(--ink-500); font-weight: 600;
}
.fc-flag-tip-row {
  display: block;
  margin-top: 4px;
}
.fc-flag-tip-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.fc-flag-tip-value {
  color: var(--ink-700);
}
.fc-flag-tip-empty {
  color: var(--ink-500);
  font-style: italic;
}
.markdown-body mark.fc-flag.fc-flag--bad,
mark.fc-flag.fc-flag--bad { border-bottom-color: #F87171; box-shadow: 0 0 0 1px rgba(248,113,113,.22); }
.markdown-body mark.fc-flag.fc-flag--warn,
mark.fc-flag.fc-flag--warn { border-bottom-color: #FBBF24; box-shadow: 0 0 0 1px rgba(251,191,36,.22); }
.markdown-body mark.fc-flag.fc-flag--info,
mark.fc-flag.fc-flag--info { border-bottom-color: #60A5FA; box-shadow: 0 0 0 1px rgba(96,165,250,.22); }
.markdown-body mark.fc-flag.is-pulsing,
mark.fc-flag.is-pulsing {
  animation: fc-flag-pulse 1.4s ease-out 1;
}
@keyframes fc-flag-pulse {
  0%   { background: var(--brand-300); box-shadow: 0 0 0 4px rgba(34,197,94,.45); }
  100% { background: var(--brand-100); box-shadow: 0 0 0 1px rgba(34,197,94,.18); }
}

.fc-comments {
  margin-top: 12px;
  border: 1px solid var(--brand-200);
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border-radius: 14px;
  padding: 14px 16px;
}
.fc-comments-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--brand-800); font-size: 13.5px;
}
.fc-comments-head svg { width: 16px; height: 16px; }
.fc-comments-count {
  margin-left: auto;
  background: var(--brand-100); color: var(--brand-800);
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.fc-comments-hint {
  font-size: 12px; color: var(--ink-600);
  margin: 8px 0 12px; line-height: 1.6;
}
.fc-comments-hint mark.fc-flag--demo { font-weight: 600; }
.fc-comment-list {
  display: flex; flex-direction: column; gap: 8px;
}
.fc-comment {
  display: block; width: 100%; text-align: left;
  background: white; border: 1px solid var(--border);
  border-left: 3px solid var(--brand-400);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
}
.fc-comment:hover {
  border-color: var(--brand-300);
  border-left-color: var(--brand-600);
  box-shadow: var(--shadow-ring);
  transform: translateY(-1px);
}
.fc-comment--bad  { border-left-color: #F87171; }
.fc-comment--warn { border-left-color: #FBBF24; }
.fc-comment--info { border-left-color: #60A5FA; }
.fc-comment-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.fc-comment-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-500); font-weight: 600;
}
.fc-comment-reviewer {
  margin-left: auto;
  font-size: 11.5px; color: var(--ink-500); font-weight: 500;
}
.fc-comment-claim {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  line-height: 1.5; margin-bottom: 6px;
}
.fc-comment-row {
  display: flex; gap: 8px;
  font-size: 12px; color: var(--ink-700);
  line-height: 1.55; margin-top: 3px;
}
.fc-comment-label {
  flex-shrink: 0;
  background: var(--ink-100); color: var(--ink-600);
  padding: 1px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  height: fit-content; margin-top: 1px;
}
.fc-comment-tag {
  background: #FEF3C7; color: #92400E;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 1.5;
  border: 1px solid #FDE68A;
}
.fc-comment.is-unmatched {
  background: #FAFAF9;
  border-left-color: #D6D3D1;
  opacity: .85;
}
.fc-comment.is-unmatched:hover {
  border-left-color: #A8A29E;
}

/* ─── Review panel ─── */
.review-panel { padding: 20px; background: white; border: 1px solid var(--border); border-radius: 14px; }
.current-status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 10px; background: var(--ink-50);
  color: var(--ink-800); font-weight: 600; font-size: 13px; min-height: 40px;
}
.publish-box {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid var(--brand-200);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ─── Metric row ─── */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.metric-card { padding: 14px 16px; border-radius: 14px; background: white; border: 1px solid var(--border); transition: .2s; }
.metric-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-ring); }
.metric-card.approved { background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); border-color: var(--brand-200); }
.metric-card.published { background: linear-gradient(135deg, #86EFAC 0%, #22C55E 100%); border-color: var(--brand-500); color: #052E16; }
.metric-card.published .metric-label, .metric-card.published .metric-value { color: #052E16; }
.metric-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500);
}
.metric-label svg { width: 13px; height: 13px; color: var(--ink-400); }

/* Review status chip row — gives the dropdown a visual companion so the
   approval / reject states are recognisable without reading the menu. */
.status-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: white; border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink-600);
  cursor: pointer; transition: .15s;
  font-family: inherit;
}
.status-chip:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--border-strong); }
.status-chip svg { width: 13px; height: 13px; color: currentColor; }
.status-chip.is-active.is-drafting  { background: #F1F5F9; color: var(--ink-800); border-color: var(--ink-300); }
.status-chip.is-active.is-pending   { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.status-chip.is-active.is-approved  { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.status-chip.is-active.is-revise    { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
.status-chip.is-active.is-rejected  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.metric-card.approved .metric-label svg { color: var(--brand-700); }
.metric-card.published .metric-label svg { color: #052E16; }
.metric-value { font-size: 26px; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Inline field-level errors (#13). Used by setFieldError(field, msg) — the
   message renders directly under the offending input via x-show / x-text,
   so the user doesn't have to scroll up looking for a banner. */
.field-error {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 12px; font-weight: 500; color: #B91C1C;
  line-height: 1.5;
}
.field-error::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.input.has-error,
textarea.input.has-error,
.input.has-error:focus {
  border-color: #FCA5A5;
  background: #FEF2F2;
  box-shadow: 0 0 0 3px rgba(252,165,165,.18);
}

/* Confirm modal (#6) — replaces window.confirm(). Tighter, friendlier
   than the OS dialog and lets us style destructive actions in red. */
.confirm-backdrop { z-index: 130; }
.confirm-modal {
  width: min(420px, calc(100vw - 24px));
  padding: 26px 28px;
  text-align: center;
}
.confirm-modal .text-center { text-align: center; }
.confirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 14px;
  background: #DBEAFE; color: #1D4ED8;
}
.confirm-icon.danger { background: #FEE2E2; color: #B91C1C; }
.confirm-icon svg { width: 26px; height: 26px; }
.confirm-body {
  color: var(--ink-600); font-size: 13.5px; line-height: 1.65;
  margin: 8px 0 18px; white-space: pre-line;
}
.confirm-actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
}
.confirm-actions .btn-primary,
.confirm-actions .btn-ghost {
  min-width: 120px; justify-content: center;
}
/* Destructive primary — same shape as btn-primary but red gradient so the
   confirm button reads as "this is the dangerous one" at a glance. */
.btn-primary.is-danger {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  box-shadow: 0 10px 30px -12px rgba(185,28,28,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary.is-danger:hover {
  box-shadow: 0 16px 40px -12px rgba(185,28,28,.65), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Cost-estimate chip (#14) — anchored next to a primary action button so
   the user has a rough $ figure before committing to a metered run. */
.cost-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  font-size: 11.5px; font-weight: 600;
  color: var(--brand-800);
  font-variant-numeric: tabular-nums;
}
.cost-chip svg { width: 13px; height: 13px; color: var(--brand-700); }

/* Inline help-circle icon used inside body copy (e.g. wizard callout)
   so the text reference matches the actual topbar icon (#26). */
.inline-help-icon {
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px;
  color: #B45309;
}

/* ─── Modal ─── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 24px;
}
.modal {
  width: 100%; max-width: 560px;
  background: white; border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.3);
  border: 1px solid var(--border);
}

/* ─── Toasts ─── */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: white; border: 1px solid var(--border);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.2);
  font-size: 13px; font-weight: 500;
  min-width: 240px; max-width: 400px;
}
.toast.success { border-color: var(--brand-200); color: var(--brand-800); }
.toast.success svg { color: var(--brand-600); }
.toast.error { border-color: #FCA5A5; color: #B91C1C; background: #FFF5F5; }
.toast.error svg { color: #DC2626; }
.toast.warn { border-color: #FDE68A; color: #92400E; }
.toast.warn svg { color: #D97706; }
.toast svg { width: 16px; height: 16px; flex: none; }
.toast .toast-msg { flex: 1; min-width: 0; line-height: 1.5; }
.toast .toast-close {
  background: transparent; border: 0; padding: 0 4px; cursor: pointer;
  color: inherit; opacity: .55; font-size: 18px; line-height: 1;
  flex: none; align-self: flex-start;
}
.toast .toast-close:hover { opacity: 1; }
.toast.error .toast-close { opacity: .7; }

/* ─── Job dock (#10) — non-modal in-flight progress widget ─── */
/* Floats at the bottom-right; doesn't block navigation. The user can
   switch tabs while a long-running job runs and still see progress. */
.job-dock {
  position: fixed; bottom: 16px; right: 16px;
  width: min(360px, calc(100vw - 24px));
  z-index: 90;
  font-size: 13px;
}
.job-dock-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(15,23,42,.25);
  overflow: hidden;
}
.job-dock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
}
.job-dock-title { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.job-dock-msg {
  font-weight: 600; color: var(--ink-900); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-dock-sub {
  font-size: 11.5px; color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-dock-toggle {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
  background: white; border: 1px solid var(--border); color: var(--ink-600);
  cursor: pointer; transition: .15s;
}
.job-dock-toggle:hover { border-color: var(--border-strong); color: var(--brand-700); background: var(--brand-50); }
.job-dock-toggle svg { width: 14px; height: 14px; }
.job-dock-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.job-dock-progress { display: flex; align-items: center; gap: 10px; }
.job-dock-bar { flex: 1; height: 6px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.job-dock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width .25s ease;
}
.job-dock-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: right;
}
.job-dock-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-600);
}
.job-dock-meta svg { width: 13px; height: 13px; color: var(--brand-600); }
.job-dock-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 6px; border-top: 1px dashed var(--border);
}
.job-dock-hint {
  font-size: 11px; color: var(--ink-400); line-height: 1.4;
  flex: 1; min-width: 0;
}
.job-dock.is-collapsed .job-dock-card {
  /* Header alone — body collapses away. */
  box-shadow: 0 12px 24px -12px rgba(15,23,42,.2);
}
@media (max-width: 560px) {
  .job-dock { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ─── Focus visible (#25 a11y) ───
   Keyboard focus deserves a clearly-visible ring on every interactive
   surface — even ones that override outline themselves. Using the
   double-ring shadow technique so the indicator survives elements with
   their own border / box-shadow (.btn-primary etc). */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--brand-500);
}
/* Authenticated footer (#23). Lives at the end of <main> so every
   logged-in screen carries legal/operator links. */
.app-footer {
  border-top: 1px solid var(--border);
  padding: 18px 32px 28px;
  margin-top: 32px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-footer-row {
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  font-size: 12px; color: var(--ink-500);
}
.app-footer-row a {
  color: var(--ink-600); text-decoration: none;
  border-bottom: 1px dotted var(--ink-300);
}
.app-footer-row a:hover { color: var(--brand-700); border-color: var(--brand-500); }
.app-footer-brand { font-weight: 600; color: var(--ink-700); margin-right: auto; }
.app-footer-sep { color: var(--ink-300); }
@media (max-width: 560px) {
  .app-footer { padding: 14px 12px 20px; }
  .app-footer-brand { margin-right: 0; flex-basis: 100%; margin-bottom: 4px; }
}

/* Skip-link (off-screen until focused) for keyboard users. */
.skip-link {
  position: absolute; top: -40px; left: 12px;
  background: var(--brand-700); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: 13px;
  z-index: 200; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ─── Hamburger & backdrop (mobile drawer trigger) ─── */
.hamburger {
  display: none;
  width: 44px; height: 44px; border-radius: 10px;
  place-items: center;
  background: white; border: 1px solid var(--border); color: var(--ink-700);
  cursor: pointer; transition: .18s; flex: none;
  -webkit-tap-highlight-color: rgba(22,163,74,.18);
  touch-action: manipulation;
  -webkit-appearance: none; appearance: none;
}
.hamburger:hover { color: var(--brand-700); border-color: var(--border-strong); background: var(--brand-50); }
.hamburger:active { transform: scale(.96); background: var(--brand-50); }
.hamburger svg { width: 20px; height: 20px; pointer-events: none; }
.hamburger * { pointer-events: none; }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 25;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 860px) {
  .sidebar-backdrop.is-visible { display: block; opacity: 1; }
}
.metrics-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.crumb-root { white-space: nowrap; }
.crumb .truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .sidebar { width: 240px; min-width: 240px; }
  .page { padding: 20px; }
  .editor-split, .viewer-split { grid-template-columns: 1fr; }
  .editor-body.split, .viewer-body.split { grid-template-columns: 1fr; }
  .art-list, .viewer-list { max-height: 280px; }
}

@media (max-width: 860px) {
  /* Sidebar becomes a slide-in drawer */
  .hamburger { display: grid; }
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; min-width: 280px;
    height: 100vh;
    height: 100dvh;
    /* iOS Safari: backdrop-filter + transform on the same element breaks rendering,
       leaving the drawer invisible after it slides in. Use an opaque background
       on mobile and drop the blur so the drawer is reliably visible. */
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    z-index: 30;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,.2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.is-open {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  .main-area { width: 100%; }

  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar .crumb { font-size: 12.5px; }
  .crumb .truncate { max-width: 40vw; }

  /* Metrics row: horizontally scrollable on small screens */
  .metrics-row {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 60vw;
  }
  .metrics-row::-webkit-scrollbar { display: none; }
  .metric-dot { flex: none; }

  .page { padding: 18px; }

  .card { padding: 18px 18px; border-radius: 16px; }
  .card-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .card-head .btn-primary, .card-head .btn-ghost { width: 100%; justify-content: center; }
  .card-head .flex.gap-2 { flex-wrap: wrap; }

  .editor-toolbar, .viewer-toolbar { flex-direction: column; align-items: stretch; }
  .editor-toolbar > div, .viewer-toolbar > div { width: 100%; }
  .seg-tabs { overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .editor-toolbar .flex.gap-2, .viewer-toolbar .flex.gap-2 { justify-content: flex-start; flex-wrap: wrap; }

  .editor-body, .viewer-body { min-height: 420px; }
  .editor-area { min-height: 420px; font-size: 12.5px; padding: 14px 16px; }
  .markdown-body { padding: 16px 18px; max-height: 520px; }

  .grid.md\:grid-cols-2, .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .topbar { padding: 8px 12px; }
  .crumb .truncate { max-width: 48vw; }
  .metrics-row { max-width: 48vw; }
  .metric-dot { padding: 5px 8px; font-size: 12px; }
  .metric-dot svg { width: 12px; height: 12px; }
  .icon-btn { width: 30px; height: 30px; }

  .page { padding: 14px 12px 60px; }
  .hero-title { font-size: 24px; }
  .hero-desc { font-size: 13.5px; }
  .card { padding: 16px 14px; border-radius: 14px; }
  .card-title { font-size: 17px; }
  .card-sub { font-size: 12.5px; }

  .plan-grid { grid-template-columns: 1fr; }
  .file-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }

  .seg-tabs { width: 100%; }
  .seg { padding: 7px 10px; font-size: 11.5px; }

  .source-option { grid-template-columns: auto 1fr; padding: 10px 12px; }
  .so-title { font-size: 12.5px; }

  /* tables stay readable via horizontal scroll */
  .table-wrap { overflow-x: auto; }
  .data-table { min-width: 520px; }

  .publish-box { flex-direction: column; align-items: stretch; }
  .publish-box .btn-primary { width: 100%; justify-content: center; }

  .action-hint { flex-direction: column; align-items: stretch; gap: 10px; }
  .action-hint .btn-primary { width: 100%; justify-content: center; }

  .modal { padding: 20px 18px; border-radius: 16px; }
  .modal .grid.grid-cols-2 { grid-template-columns: 1fr !important; }

  .toast-stack { top: 12px; right: 12px; left: 12px; }
  .toast { min-width: 0; width: 100%; max-width: 100%; }

  .drop-zone { padding: 22px 16px; }
}

@media (max-width: 400px) {
  .metrics-row { max-width: 42vw; }
  .crumb .truncate { max-width: 40vw; }
  .file-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 22px; }
}

/* ──────────────────────────────────────────────────────────────
 * Onboarding wizard
 * ────────────────────────────────────────────────────────────── */
.wizard-backdrop { z-index: 110; }
.wizard {
  width: 100%; max-width: 640px;
  padding: 28px 30px;
  max-height: 92vh; overflow-y: auto;
}
.wizard-head { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.wizard-head .card-title { margin-top: 6px; }
.wizard-head .card-sub { margin: 8px auto 0; max-width: 50ch; }
.wizard-progress {
  display: flex; gap: 12px; justify-content: center; margin-top: 18px;
}
.wizard-progress-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-100); color: var(--ink-500);
  font-weight: 700; font-size: 13px;
  border: 1px solid var(--border);
  cursor: pointer; transition: .15s;
}
.wizard-progress-dot:hover { background: var(--brand-50); border-color: var(--border-strong); }
.wizard-progress-dot.is-active { background: var(--brand-500); color: #fff; border-color: var(--brand-600); box-shadow: 0 6px 14px -6px rgba(22,163,74,.5); }
.wizard-progress-dot.is-done { background: var(--brand-100); color: var(--brand-700); border-color: var(--border-strong); }
.wizard-progress-dot.is-done svg { width: 12px; height: 12px; }

.wizard-step { padding: 22px 6px 8px; }
.wizard-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%);
  color: var(--brand-700);
  box-shadow: 0 12px 24px -8px rgba(22,163,74,.3);
}
.wizard-icon svg { width: 26px; height: 26px; }
.wizard-title { font-size: 17px; font-weight: 700; color: var(--ink-900); text-align: center; margin: 0 0 8px; }
.wizard-desc { color: var(--ink-600); font-size: 13.5px; line-height: 1.65; text-align: center; max-width: 50ch; margin: 0 auto 16px; }

.wizard-bullets {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--brand-50);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px 14px;
  margin: 0 auto 14px; max-width: 460px;
}
.wizard-bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-700); line-height: 1.55; }
.wizard-bullet svg { width: 14px; height: 14px; color: var(--brand-600); flex: none; margin-top: 3px; }

.wizard-help-callout {
  display: flex; align-items: center; gap: 10px;
  margin: 14px auto 0; max-width: 50ch;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  color: #92400E; font-size: 12.5px; line-height: 1.55;
}
.wizard-help-callout svg { width: 16px; height: 16px; color: #B45309; flex: none; }

.wizard-flow {
  margin: 0 auto 14px; max-width: 460px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: #FFFFFF;
}
.wizard-flow-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-800);
  margin-bottom: 8px;
}
.wizard-flow-title svg { width: 14px; height: 14px; color: var(--brand-600); }
.wizard-flow-list {
  list-style: decimal; padding-left: 22px; margin: 0;
  font-size: 12.5px; color: var(--ink-700); line-height: 1.7;
}
.wizard-flow-list ul, .wizard-flow ul.wizard-flow-list { list-style: disc; }
.wizard-flow-list li strong { color: var(--ink-900); font-weight: 700; }

.wizard-keys { display: flex; flex-direction: column; gap: 8px; margin: 0 auto 14px; max-width: 460px; }
.wizard-key {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: white; border: 1px solid var(--border);
}
.wizard-key.is-set { background: var(--brand-50); border-color: var(--border-strong); }
.wizard-key svg { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.wizard-key.is-set svg { color: var(--brand-600); }
.wizard-key-name { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.wizard-key-state { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.wizard-key.is-set .wizard-key-state { color: var(--brand-700); font-weight: 600; }

.wizard-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 600;
  margin: 4px auto 12px; justify-self: center;
}
.wizard-status svg { width: 14px; height: 14px; }

.wizard-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }

.wizard-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; margin-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.wizard-nav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 8px;
  background: transparent; border: 0;
  color: var(--ink-600); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: .15s;
}
.wizard-nav:hover:not(:disabled) { color: var(--brand-700); background: var(--brand-50); }
.wizard-nav:disabled { opacity: .35; cursor: not-allowed; }
.wizard-nav svg { width: 14px; height: 14px; }
.wizard-skip {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  color: var(--ink-500); font-size: 12px;
  cursor: pointer; transition: .15s;
}
.wizard-skip:hover { color: var(--ink-700); background: var(--ink-100); border-radius: 8px; }
.wizard-skip svg { width: 13px; height: 13px; }

/* ──────────────────────────────────────────────────────────────
 * Progress overlay (replaces the spinner-only loading card)
 * ────────────────────────────────────────────────────────────── */
.loading-card.progress-card {
  flex-direction: column; align-items: stretch; gap: 10px;
  min-width: 360px; max-width: 480px;
}
.progress-head { display: flex; align-items: center; gap: 14px; }
.progress-sub { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.progress-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.progress-bar {
  height: 6px; background: var(--ink-100); border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.progress-cost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
.progress-cost svg { width: 13px; height: 13px; color: var(--brand-600); }

/* ──────────────────────────────────────────────────────────────
 * Empty-state CTAs (used in plan / article / viewer empty cards)
 * ────────────────────────────────────────────────────────────── */
.empty-cta {
  text-align: center; padding: 28px 16px 24px;
  color: var(--ink-500);
}
.empty-cta-title { font-size: 14px; font-weight: 700; color: var(--ink-700); margin-bottom: 4px; }
.empty-cta-sub { font-size: 12.5px; line-height: 1.5; }
.btn-primary.compact, .btn-ghost.compact {
  padding: 6px 12px; font-size: 12.5px; border-radius: 9px;
}
.btn-primary.compact svg, .btn-ghost.compact svg { width: 14px; height: 14px; }

/* ──────────────────────────────────────────────────────────────
 * Failed-article banner + badge
 * ────────────────────────────────────────────────────────────── */
.failed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin: 10px 6px 4px;
  border-radius: 10px;
  background: #FEF3C7; border: 1px solid #FDE68A;
  color: #92400E; font-size: 12px; font-weight: 600;
}
.failed-bar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.badge.small.failed {
  background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A;
  font-size: 10px;
}

/* ──────────────────────────────────────────────────────────────
 * Plan-card inline editing (title + outline)
 * ────────────────────────────────────────────────────────────── */
.plan-card.is-editing {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(34,197,94,.18), var(--shadow-ring);
}
.plan-card.is-editing .plan-keyword,
.plan-card.is-editing .plan-angle,
.plan-card.is-editing .plan-reader {
  opacity: .55;
}
.plan-title-input {
  font-weight: 700; font-size: 14.5px; color: var(--ink-900);
  line-height: 1.45; padding: 8px 10px;
}
.plan-outline-edit { margin-top: 10px; }
.plan-outline-textarea {
  font-family: inherit; font-size: 12.5px; line-height: 1.65;
  resize: vertical; min-height: 110px;
}

/* ──────────────────────────────────────────────────────────────
 * Service-managed keys: sidebar status + profile modal info
 * ────────────────────────────────────────────────────────────── */
.service-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--border-strong);
  font-size: 11px; font-weight: 600;
}
.service-status svg { width: 12px; height: 12px; }

/* ──────────────────────────────────────────────────────────────
 * Billing — sidebar plan chip + plans modal
 * ────────────────────────────────────────────────────────────── */
.side-chip-plan {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px;
  align-items: center; text-align: left;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  border: 1px solid var(--border-strong);
}
.side-chip-plan svg { color: var(--brand-700); width: 16px; height: 16px; }
.side-chip-plan .plan-chip-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.side-chip-plan .plan-chip-name {
  font-weight: 700; color: var(--ink-900); font-size: 12.5px;
  letter-spacing: .01em;
}
.side-chip-plan .plan-chip-usage {
  font-size: 11px; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
.side-chip-plan .plan-chip-bar {
  grid-column: 1 / -1;
  height: 4px; border-radius: 999px; background: var(--ink-100); overflow: hidden;
}
.side-chip-plan .plan-chip-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width .3s ease;
}
.side-chip-plan.is-warn .plan-chip-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.side-chip-plan.is-over .plan-chip-bar-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.side-chip-plan.is-warn .plan-chip-usage { color: #b45309; font-weight: 600; }
.side-chip-plan.is-over .plan-chip-usage { color: #b91c1c; font-weight: 700; }

.billing-backdrop { z-index: 105; }
.billing-modal {
  width: 100%; max-width: 920px;
  max-height: 92vh; overflow-y: auto;
  padding: 26px 28px;
}

.billing-usage {
  margin: 18px 0 22px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  border: 1px solid var(--border-strong);
}
.billing-usage.is-warn { background: linear-gradient(180deg, #fff 0%, #fef3c7 100%); border-color: #fcd34d; }
.billing-usage.is-over { background: linear-gradient(180deg, #fff 0%, #fee2e2 100%); border-color: #fca5a5; }
.billing-usage-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.billing-usage-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 700; margin-bottom: 4px;
}
.billing-usage-num { display: flex; align-items: baseline; gap: 6px; }
.billing-usage-count {
  font-size: 36px; font-weight: 800; color: var(--ink-900);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.billing-usage-sep { color: var(--ink-300); font-size: 22px; }
.billing-usage-limit { font-size: 14px; color: var(--ink-500); font-weight: 600; }
.billing-usage-plan { text-align: right; }
.billing-usage-plan-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 700;
}
.billing-usage-plan-name { font-size: 18px; font-weight: 700; color: var(--brand-700); }
.billing-usage-bar {
  height: 8px; border-radius: 999px; background: rgba(15,23,42,.06); overflow: hidden;
}
.billing-usage-bar-fill {
  height: 100%; transition: width .3s ease;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
}
.billing-usage.is-warn .billing-usage-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.billing-usage.is-over .billing-usage-bar-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.billing-usage-hint {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #b91c1c; background: #fee2e2;
}
.billing-usage-hint.warn { color: #b45309; background: #fef3c7; }
.billing-usage-hint svg { width: 16px; height: 16px; }

.plan-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 720px) {
  .plan-cards { grid-template-columns: 1fr; }
}
.plan-card-billing {
  position: relative;
  display: flex; flex-direction: column;
  padding: 18px 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: white;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease;
}
.plan-card-billing.is-recommended {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 1px rgba(34,197,94,.18), 0 16px 30px -16px rgba(22,163,74,.32);
}
.plan-card-billing.is-recommended::before {
  content: "おすすめ";
  position: absolute; top: -10px; right: 14px;
  background: var(--brand-600); color: white;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 10px; border-radius: 999px;
}
.plan-card-billing.is-current {
  border-color: var(--ink-300); background: var(--ink-50);
}
.plan-card-head { margin-bottom: 10px; }
.plan-card-name {
  font-size: 18px; font-weight: 700; color: var(--ink-900);
  letter-spacing: -.01em;
}
.plan-card-tagline { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.plan-card-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 4px 0 12px;
  font-size: 28px; font-weight: 800; color: var(--ink-900);
  letter-spacing: -0.02em;
}
.plan-card-price-sub {
  font-size: 12px; font-weight: 500; color: var(--ink-500);
  letter-spacing: 0;
}
.plan-card-quota {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-800);
  border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 600; align-self: flex-start;
  margin-bottom: 12px;
}
.plan-card-quota svg { width: 13px; height: 13px; }
.plan-card-features {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.plan-card-features li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-700);
}
.plan-card-features svg {
  flex: none; width: 14px; height: 14px; color: var(--brand-600); margin-top: 3px;
}
.plan-card-actions {
  display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.plan-card-current {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 10px 12px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px dashed var(--border-strong);
  font-size: 13px; font-weight: 600;
}
.plan-card-current svg { width: 14px; height: 14px; }
.plan-card-cta { width: 100%; justify-content: center; }
.plan-card-soon {
  font-size: 11px; color: var(--ink-500); text-align: center;
}

.billing-foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.billing-foot-note { font-size: 11.5px; color: var(--ink-500); }
.billing-foot-note a { color: var(--brand-700); text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
 * Sidebar mini-footer with always-visible legal links (#15)
 * ────────────────────────────────────────────────────────────── */
.side-legal {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--ink-400);
  line-height: 1.4;
}
.side-legal a { color: var(--ink-500); text-decoration: none; }
.side-legal a:hover { color: var(--brand-700); text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
 * Retry dock (#14) — surfaces a "再試行" button after a failed job
 * ────────────────────────────────────────────────────────────── */
.retry-dock {
  position: fixed; bottom: 16px; right: 16px;
  width: min(380px, calc(100vw - 24px));
  z-index: 95;
}
.retry-dock-card {
  display: flex; align-items: center; gap: 12px;
  background: white;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px -12px rgba(220,38,38,.25);
}
.retry-dock-icon { width: 18px; height: 18px; color: #dc2626; flex: none; }
.retry-dock-title { font-weight: 700; color: #991b1b; font-size: 13px; }
.retry-dock-sub { font-size: 11.5px; color: var(--ink-600); margin-top: 1px; }
.retry-dock-dismiss {
  background: transparent; border: 0; padding: 0 4px; cursor: pointer;
  color: var(--ink-400); font-size: 18px; line-height: 1;
  flex: none;
}
.retry-dock-dismiss:hover { color: var(--ink-700); }
@media (max-width: 560px) {
  .retry-dock { left: 12px; right: 12px; width: auto; }
}