/* ————————————————————————————————————————
   短视频爆款知识库 · 设计令牌
   ———————————————————————————————————————— */
:root {
  /* 色彩 */
  --bg-canvas: oklch(0.985 0.004 85);
  --bg-panel: #ffffff;
  --bg-muted: oklch(0.965 0.006 85);
  --bg-sunken: oklch(0.945 0.008 85);

  --sidebar-bg: oklch(0.22 0.025 255);
  --sidebar-hover: oklch(0.28 0.03 255);
  --sidebar-active: oklch(0.32 0.05 255);
  --sidebar-text: oklch(0.78 0.02 255);
  --sidebar-text-strong: oklch(0.98 0.005 255);
  --sidebar-border: oklch(0.3 0.03 255);

  --ink-1: oklch(0.2 0.015 255);      /* 主文 */
  --ink-2: oklch(0.42 0.012 255);     /* 次文 */
  --ink-3: oklch(0.6 0.01 255);       /* 弱文 */
  --ink-4: oklch(0.78 0.008 255);     /* 禁用 */

  --line: oklch(0.9 0.006 255);
  --line-strong: oklch(0.84 0.008 255);

  --accent: oklch(0.52 0.16 258);
  --accent-hover: oklch(0.46 0.17 258);
  --accent-weak: oklch(0.94 0.035 258);
  --accent-ink: oklch(0.38 0.17 258);

  --success: oklch(0.58 0.13 150);
  --success-weak: oklch(0.94 0.04 150);
  --warning: oklch(0.68 0.13 65);
  --warning-weak: oklch(0.95 0.04 70);
  --danger: oklch(0.55 0.18 27);
  --danger-weak: oklch(0.95 0.035 27);
  --info: oklch(0.55 0.13 230);
  --info-weak: oklch(0.94 0.035 230);
  --purple: oklch(0.52 0.17 300);
  --purple-weak: oklch(0.94 0.035 300);

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);

  --font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ———————————— App shell ———————————— */
.app-shell { display: flex; min-height: 100vh; min-width: 1280px; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  border-right: 1px solid oklch(0.18 0.025 255);
}
.sidebar-brand {
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, oklch(0.62 0.18 258), oklch(0.5 0.2 288));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.2);
}
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-brand-title { color: var(--sidebar-text-strong); font-weight: 600; font-size: 13.5px; letter-spacing: 0.02em; }
.sidebar-brand-sub { color: oklch(0.55 0.03 255); font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }

.sidebar-nav { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar-section-label {
  padding: 10px 10px 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.5 0.02 255);
  font-weight: 600;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sidebar-text);
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sidebar-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.sidebar-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-strong);
  box-shadow: inset 2px 0 0 oklch(0.7 0.14 258);
}
.sidebar-item .chip {
  margin-left: auto;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: oklch(0.4 0.08 258);
  color: oklch(0.88 0.04 258);
  font-family: var(--font-mono);
}
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.sidebar-footer .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: oklch(0.38 0.05 258);
  color: var(--sidebar-text-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.sidebar-footer .who { line-height: 1.3; }
.sidebar-footer .who strong { color: var(--sidebar-text-strong); display: block; font-weight: 500; font-size: 12.5px; }
.sidebar-footer .who span { color: oklch(0.55 0.02 255); font-size: 11px; }

/* ———————————— Main ———————————— */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 52px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.topbar .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3);
}
.topbar .crumbs .sep { color: var(--ink-4); }
.topbar .crumbs .cur { color: var(--ink-1); font-weight: 500; }
.topbar .spacer { flex: 1; }
.topbar .env-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 4px;
  background: var(--success-weak);
  color: var(--success);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.topbar .env-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success);
}
.topbar .topbar-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar .topbar-btn:hover { background: var(--bg-muted); color: var(--ink-1); }

.page { flex: 1; padding: 24px 28px; overflow: auto; }
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.page-title { font-size: 22px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; margin: 0; }
.page-subtitle { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ———————————— Common widgets ———————————— */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.card-subtitle { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.card-body { padding: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-1);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.1s, border-color 0.1s;
}
.btn:hover { background: var(--bg-muted); border-color: var(--line-strong); }
.btn:disabled { color: var(--ink-4); background: var(--bg-muted); cursor: not-allowed; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(37, 54, 130, 0.25);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:disabled { background: var(--ink-4); border-color: var(--ink-4); color: #fff; box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-muted); color: var(--ink-1); }
.btn.danger { color: var(--danger); border-color: var(--line); }
.btn.danger:hover { background: var(--danger-weak); border-color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
.btn.lg { padding: 10px 18px; font-size: 14px; }
.btn-row { display: flex; gap: 8px; align-items: center; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-1);
}
.field-label .req { color: var(--danger); font-weight: 400; }
.field-label .optional { color: var(--ink-3); font-size: 11.5px; font-weight: 400; }
.field-help { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.field-help code { font-family: var(--font-mono); background: var(--bg-muted); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; color: var(--ink-2); }

.input, .textarea, .select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-panel);
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.52 0.16 258 / 0.15);
}
.input.mono { font-family: var(--font-mono); font-size: 12.5px; }
.textarea { resize: vertical; min-height: 80px; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.neutral { background: var(--bg-muted); color: var(--ink-2); border-color: var(--line); }
.badge.info    { background: var(--info-weak); color: var(--info); }
.badge.success { background: var(--success-weak); color: var(--success); }
.badge.warning { background: var(--warning-weak); color: oklch(0.5 0.13 65); }
.badge.danger  { background: var(--danger-weak); color: var(--danger); }
.badge.accent  { background: var(--accent-weak); color: var(--accent-ink); }
.badge.purple  { background: var(--purple-weak); color: var(--purple); }
.badge.solid-dark { background: oklch(0.22 0.02 255); color: #fff; }
.badge.platform { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.03em; padding: 2px 6px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }

/* Platform styling — neutral abstract (not logos) */
.platform-yt { color: oklch(0.54 0.2 25); background: oklch(0.96 0.03 25); }
.platform-tt { color: #1e2024; background: oklch(0.94 0.005 255); border: 1px solid oklch(0.88 0.005 255); }
.platform-bl { color: oklch(0.52 0.15 230); background: oklch(0.95 0.04 230); }

/* Spinner */
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Progress */
.progress { height: 6px; background: var(--bg-sunken); border-radius: 3px; overflow: hidden; position: relative; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.progress-bar.warning { background: var(--warning); }
.progress-bar.success { background: var(--success); }
.progress-bar.danger { background: var(--danger); }
.progress-bar.striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%);
  background-size: 14px 14px;
  animation: stripe 1s linear infinite;
}
@keyframes stripe { to { background-position: 28px 0; } }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tab {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.tab:hover { color: var(--ink-1); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.seg {
  display: inline-flex;
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.seg-item {
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  border-radius: 4px;
  border: none;
  background: transparent;
  font-weight: 500;
}
.seg-item.active { background: #fff; color: var(--ink-1); box-shadow: var(--shadow-sm); }

/* Login */
.login-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 800px 500px at 20% 10%, oklch(0.94 0.04 258 / 0.5), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 90%, oklch(0.94 0.04 300 / 0.4), transparent 60%),
    var(--bg-canvas);
}
.login-card {
  width: 420px;
  background: var(--bg-panel);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  overflow: hidden;
}
.login-logo-area { padding: 36px 36px 8px; text-align: center; }
.login-logo {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 11px;
  background: linear-gradient(135deg, oklch(0.62 0.18 258), oklch(0.48 0.2 295));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px;
  letter-spacing: -0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 16px oklch(0.5 0.18 270 / 0.25);
}
.login-title { font-size: 18px; font-weight: 600; color: var(--ink-1); margin: 0; }
.login-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; font-family: var(--font-mono); letter-spacing: -0.01em; }
.login-body { padding: 20px 36px 32px; }

/* Utilities */
.row { display: flex; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.stack-4 > * + * { margin-top: 4px; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }

/* ———————————— Settings ———————————— */
.settings-grid { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.settings-side {
  position: sticky; top: 24px;
  font-size: 13px;
}
.settings-side-item {
  display: block; padding: 7px 10px; border-radius: 5px; color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.settings-side-item.active { background: var(--accent-weak); color: var(--accent-ink); font-weight: 500; }
.settings-side-item:hover { background: var(--bg-muted); }

.section-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 20px; }
.section-header { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.section-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); display: flex; align-items: center; gap: 8px; }
.section-header .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}
.section-header p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.section-body { padding: 18px 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.status-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-muted);
  margin-bottom: 8px;
}
.status-row:last-child { margin-bottom: 0; }
.status-row .svc { display: flex; align-items: center; gap: 10px; }
.status-row .svc-name { font-weight: 500; color: var(--ink-1); font-size: 13px; }
.status-row .svc-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }

/* ———————————— Collect ———————————— */
.collect-grid { display: grid; grid-template-columns: minmax(360px, 1fr) 2fr; gap: 20px; align-items: start; }
.collect-input-card { position: sticky; top: 20px; }

.job-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.job-row:last-child { border-bottom: none; }
.job-row:hover { background: var(--bg-muted); }
.job-thumb {
  width: 44px; height: 44px; border-radius: 6px;
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 10px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.job-title { font-size: 13.5px; font-weight: 500; color: var(--ink-1); line-height: 1.35; }
.job-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); }
.job-progress { grid-column: 1 / -1; margin-top: 10px; }
.job-progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); }
.job-error {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--danger-weak);
  border-left: 2px solid var(--danger);
  border-radius: 3px;
  font-size: 12px;
  color: oklch(0.35 0.15 27);
  font-family: var(--font-mono);
}
.job-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ———————————— Library ———————————— */
.filter-bar {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; }

.multi-dropdown {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  padding: 6px 28px 6px 10px;
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-dropdown::after {
  content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-top-color: var(--ink-3); margin-top: 2px;
}
.multi-dropdown .count {
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  font-family: var(--font-mono);
}

.range-slider { padding: 4px 0; }
.range-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-values { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

.platform-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.platform-chip {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.platform-chip.active {
  background: var(--ink-1); color: #fff; border-color: var(--ink-1);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.video-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  display: flex; flex-direction: column;
}
.video-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.video-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background: linear-gradient(135deg, oklch(0.86 0.02 255), oklch(0.78 0.03 258));
  overflow: hidden;
}
.video-thumb-overlay {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 10px);
}
.video-thumb-label {
  position: absolute; bottom: 8px; left: 8px;
  color: #fff; font-family: var(--font-mono);
  font-size: 10.5px; padding: 2px 6px;
  background: rgba(0,0,0,0.6); border-radius: 3px;
}
.video-thumb .plat-corner {
  position: absolute; top: 8px; right: 8px;
}
.video-duration {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10.5px;
}
.video-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.video-title {
  font-size: 13.5px; font-weight: 500; color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
  min-height: 38px;
}
.video-channel {
  font-size: 11.5px; color: var(--ink-3); margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
}
.video-mechs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.video-stats {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-2);
  font-family: var(--font-mono);
}
.video-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
.video-stats .stat .val { color: var(--ink-1); font-weight: 500; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  margin: 28px 0 8px;
}
.page-btn {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-family: var(--font-mono);
}
.page-btn:hover { background: var(--bg-muted); color: var(--ink-1); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-info { margin-left: 12px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }

/* Drawer */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.22 0.025 255 / 0.35);
  z-index: 50;
  animation: fade-in 0.15s ease-out;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px;
  background: #fff;
  box-shadow: -16px 0 32px rgba(15,23,42,0.12);
  z-index: 51;
  display: flex; flex-direction: column;
  animation: slide-in 0.22s cubic-bezier(.2,.7,.3,1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } }

.drawer-header {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.drawer-close {
  border: 1px solid var(--line); background: #fff; border-radius: 5px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.drawer-body { flex: 1; overflow: auto; padding: 20px; }

.drawer-hero-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(135deg, oklch(0.8 0.04 258), oklch(0.65 0.06 288));
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.drawer-subsection { margin-top: 22px; }
.drawer-subsection h4 {
  margin: 0 0 10px; font-size: 12px;
  color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.kv-grid { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: 13px; }
.kv-grid dt { color: var(--ink-3); font-size: 12.5px; }
.kv-grid dd { margin: 0; color: var(--ink-1); font-family: var(--font-mono); font-size: 12.5px; }

.blob-paragraph {
  font-size: 13px; line-height: 1.65;
  color: var(--ink-2);
  padding: 12px 14px;
  background: var(--bg-muted);
  border-radius: 6px;
  border-left: 2px solid var(--accent);
}

.emotion-path {
  display: flex; align-items: stretch;
  background: var(--bg-muted); border-radius: 6px;
  padding: 4px; gap: 4px;
}
.emotion-step {
  flex: 1; text-align: center;
  padding: 8px 6px;
  background: #fff;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--ink-2);
  position: relative;
  border: 1px solid var(--line);
}
.emotion-step .step-num { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; display: block; margin-bottom: 2px;}
.emotion-step .step-ink { font-weight: 500; color: var(--ink-1); font-size: 12px; }

.conflict-ladder { display: flex; flex-direction: column; gap: 6px; }
.conflict-rung {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 12px;
  background: var(--bg-muted); border-radius: 5px;
  font-size: 12.5px;
}
.conflict-rung .rung-num { font-family: var(--font-mono); color: var(--ink-3); font-weight: 600; }
.conflict-rung .rung-meter {
  display: inline-block;
  width: 60px; height: 4px;
  background: var(--line);
  border-radius: 2px;
  position: relative;
}
.conflict-rung .rung-meter::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent); border-radius: 2px;
  width: var(--w, 40%);
}

/* Radar + line charts: inline SVG; no layout rules needed */
.chart-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  margin-top: 12px; font-size: 12px;
}
.chart-legend .li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.chart-legend .li .sw { width: 10px; height: 10px; border-radius: 2px; }
.chart-legend .li .val { margin-left: auto; font-family: var(--font-mono); color: var(--ink-1); font-weight: 500; }

/* ———————————— Search ———————————— */
.search-hero {
  background: linear-gradient(180deg, #fff, var(--bg-canvas));
  padding: 36px 32px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: 20px;
  text-align: center;
}
.search-hero-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.search-hero-sub { color: var(--ink-3); font-size: 13px; margin-bottom: 20px; }
.search-big-input-wrap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.search-big-input {
  width: 100%;
  padding: 14px 130px 14px 44px;
  font-size: 14.5px;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 10px;
  color: var(--ink-1);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.search-big-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.52 0.16 258 / 0.15); }
.search-big-input-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
}
.search-big-submit {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 8px 18px;
}
.search-mode-tabs { display: inline-flex; margin-top: 14px; }

.insight-card {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.insight-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.insight-icon {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, oklch(0.62 0.18 258), oklch(0.48 0.2 295));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
}
.insight-title { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.insight-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); margin-left: auto; }
.insight-body { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.insight-body strong { color: var(--ink-1); font-weight: 600; }
.insight-body code { font-family: var(--font-mono); font-size: 12px; background: var(--accent-weak); padding: 1px 5px; border-radius: 3px; color: var(--accent-ink); }
.insight-body ul { padding-left: 18px; margin: 8px 0; }
.insight-body li { margin-bottom: 3px; }

.skeleton-line {
  height: 10px; background: linear-gradient(90deg, var(--bg-sunken), var(--bg-muted), var(--bg-sunken));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 3px;
  margin-bottom: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-row {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
}
.result-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.result-thumb {
  aspect-ratio: 16/9;
  border-radius: 5px;
  background: linear-gradient(135deg, oklch(0.82 0.03 258), oklch(0.7 0.05 288));
  position: relative;
  overflow: hidden;
}
.result-title { font-size: 14px; font-weight: 500; color: var(--ink-1); line-height: 1.4; margin-bottom: 5px; }
.result-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: 8px; }
.result-score {
  text-align: right;
}
.result-score .num {
  font-size: 28px; font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.result-score .unit { font-size: 12px; color: var(--ink-3); }
.result-score .source { margin-top: 6px; }
.result-score .breakdown {
  margin-top: 8px; font-size: 10.5px; color: var(--ink-3);
  font-family: var(--font-mono);
  display: flex; gap: 6px; justify-content: flex-end;
}
.result-score .breakdown span { background: var(--bg-muted); padding: 1px 5px; border-radius: 3px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.empty-illus {
  width: 120px; height: 120px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-muted);
  border: 2px dashed var(--line-strong);
  color: var(--ink-4);
}
.empty-title { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.empty-sub { font-size: 12.5px; color: var(--ink-3); }

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  z-index: 100;
  font-size: 12.5px;
}
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tweaks-head h4 { margin: 0; font-size: 13px; font-weight: 600; }
.tweaks-head .hint { font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }
.tweaks-row { margin-bottom: 10px; }
.tweaks-label { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; font-weight: 500; letter-spacing: 0.02em; }
.tweaks-seg { width: 100%; display: flex; background: var(--bg-sunken); border-radius: 5px; padding: 2px; gap: 2px; }
.tweaks-seg button {
  flex: 1; padding: 4px 6px; font-size: 11.5px;
  background: transparent; border: none; border-radius: 3px; color: var(--ink-2);
}
.tweaks-seg button.active { background: #fff; box-shadow: var(--shadow-sm); color: var(--ink-1); }