:root {
  --app-bg: #f7f2ea;
  --app-surface: #ffffff;
  --app-soft: #f5efe6;
  --app-border: #e6ded3;
  --app-text: #1f1b16;
  --app-muted: #6f6457;
  --app-accent: #0f766e;
  --app-accent-strong: #0b5f59;
  --app-accent-soft: #e6f4f2;
}

html.dark {
  --app-bg: #15110d;
  --app-surface: #1d1813;
  --app-soft: #251f19;
  --app-border: #322a22;
  --app-text: #f1e8dd;
  --app-muted: #b8a99a;
  --app-accent: #2bb9a6;
  --app-accent-strong: #239987;
  --app-accent-soft: rgba(43, 185, 166, 0.16);
}

body {
  background: var(--app-bg);
  color: var(--app-text);
}

.app-surface {
  background: var(--app-surface);
}

.app-soft {
  background: var(--app-soft);
}

.app-border {
  border-color: var(--app-border);
}

.app-muted {
  color: var(--app-muted);
}

.app-accent {
  color: var(--app-accent);
}

.app-accent-soft {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

.app-accent-solid {
  background: var(--app-accent);
  color: #ffffff;
}

.app-accent-solid:hover {
  background: var(--app-accent-strong);
}

/* Shared legacy components (re-skinned to theme variables) */
nav a {
  text-decoration: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--app-surface);
  border-spacing: 0;
}
th, td {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--app-border);
  vertical-align: top;
}
th {
  background: var(--app-soft);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: inset 0 -1px 0 var(--app-border);
  color: var(--app-text);
}
img { border-radius: 6px; }
.snippet { font-size: 0.85rem; color: var(--app-muted); white-space: pre-wrap; }
.meta { font-size: 0.8rem; color: var(--app-muted); }
.pagination { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; }
.btn { padding: 0.5rem 1rem; background: var(--app-accent); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; font-size: 0.9rem; }
.btn:hover { background: var(--app-accent-strong); }
.btn-secondary { background: #6c6b68; }
.btn-secondary:hover { background: #5a5956; }
.btn-danger { background: #d14343; }
.btn-danger:hover { background: #b73636; }
.status-bar { background: var(--app-soft); padding: 0.5rem; font-size: 0.8rem; margin-bottom: 1rem; border-radius: 8px; border: 1px solid var(--app-border); }
.toast { position: fixed; bottom: 1rem; right: 1rem; background: #1f1b16; color: white; padding: 1rem; border-radius: 8px; display: none; z-index: 1000; }
.score-badge { display: inline-block; padding: 2px 6px; border-radius: 6px; font-weight: bold; background: var(--app-soft); margin-bottom: 4px; }
.score-high { background: #22c55e; color: white; }
.score-med { background: #f59e0b; color: black; }
.score-low { background: #ef4444; color: white; }
.stats-extra { white-space: nowrap; font-size: 0.8rem; margin-top: 4px; line-height: 1.2; }
.btn-xs { padding: 2px 6px; font-size: 0.7rem; border-radius: 6px; }
.chart-wrapper { background: var(--app-surface); border: 1px solid var(--app-border); padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; }
.chart-header { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 220px; overflow-x: auto; padding: 0.5rem 0; }
.chart-bar { width: 14px; min-height: 4px; background: #8fd0c7; border-radius: 4px 4px 0 0; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; flex-shrink: 0; }
.chart-bar:hover { background: var(--app-accent); transform: translateY(-2px); }
.chart-tooltip { position: fixed; background: #111; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; pointer-events: none; display: none; z-index: 2000; max-width: 260px; }
.chart-tooltip strong { display: block; margin-bottom: 2px; }
.chart-tooltip img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 0.5rem; display: block; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 1rem; }
.modal.open { display: flex; }
.modal-content { background: var(--app-surface); width: 500px; max-width: 95vw; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid var(--app-border); }
.modal-content img { width: 100%; border-radius: 8px; margin-bottom: 0.75rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.row-short { background: rgba(15, 118, 110, 0.08) !important; }
.row-old { background: #fff5e3 !important; }
.yt-link { margin-left: 6px; font-weight: bold; text-decoration: none; }
.channel-ext { margin-left: 6px; font-size: 0.8rem; }
.thumb-wrapper { position: relative; display: inline-block; }
.duration-pill { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.75); color: white; padding: 2px 6px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.sortable { cursor: pointer; user-select: none; }
.sort-indicator { font-size: 0.8rem; color: var(--app-muted); margin-left: 4px; }
.date-cell { white-space: nowrap; }
.no-wrap { white-space: nowrap; }
.tag-actions { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin-top: 0.35rem; }
.tag-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--app-border); background: var(--app-surface); border-radius: 6px; cursor: pointer; color: var(--app-muted); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.tag-btn:hover { border-color: var(--app-muted); }
.tag-btn .tag-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.tag-btn .tag-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.tag-btn.active .tag-icon svg { fill: currentColor; }
.tag-btn.thumb-up.active { background: #e8f5e9; border-color: #2e7d32; color: #2e7d32; }
.tag-btn.thumb-down.active { background: #ffebee; border-color: #c62828; color: #c62828; }
.tag-btn.star-btn.active, .tag-btn.interest-btn.starred { background: #e8f5e9; border-color: #2e7d32; color: #2e7d32; }
.tag-btn.flag-btn.active { background: #fffde7; border-color: #f9a825; color: #f9a825; }
.tag-btn.interest-btn.weak { background: #fffde7; border-color: #fbc02d; color: #fbc02d; }
.tag-btn.interest-btn.irrelevant { background: #ffebee; border-color: #d32f2f; color: #d32f2f; }
.discovery-nav { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; padding: 0.5rem; background: var(--app-soft); border-radius: 10px; border: 1px solid var(--app-border); }
.discovery-nav a { text-decoration: none; font-weight: bold; color: white !important; }
.discovery-nav .btn { color: white !important; }
.tag-dates { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2px; }
.tag-date { font-size: 0.75rem; color: var(--app-muted); }
.rel-time-badge { background: #e3f2fd; color: #1976d2; padding: 2px 6px; border-radius: 6px; font-weight: bold; font-size: 0.75rem; border: 1px solid #bbdefb; display: inline-block; margin-left: 0.5rem; }
.cursor-help { cursor: help; }
.help-label { border-bottom: 1px dotted var(--app-border); cursor: help; }
.kpi-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; padding: 1rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 0.75rem; color: var(--app-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.kpi-value { font-size: 1.1rem; font-weight: 700; color: var(--app-text); }
.card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.toolbar-group { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--app-soft); border-radius: 10px; }
.btn-link { background: none; border: none; color: var(--app-accent); text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 0; }
.btn-link:hover { color: var(--app-accent-strong); }
.advanced-controls { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--app-border); width: 100%; }
.advanced-controls.open { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

@media (max-width: 768px) {
  table { display: block; }
  thead { display: none; }
  tbody { display: flex; flex-direction: column; gap: 1rem; }
  tr { display: flex; flex-direction: column; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
  td { border: none; padding: 0.35rem 0; display: flex; flex-direction: column; }
  td:empty { display: none; }
  td:first-child { order: -2; margin-bottom: 0.5rem; }
  td:first-child img { width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
  td:first-child .thumb-wrapper { margin-bottom: 0; }
  td:nth-child(2) { order: -1; }
  td:nth-child(2) strong { font-size: 1rem; }
  .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .btn-xs { padding: 4px 8px; font-size: 0.75rem; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-group { flex-wrap: wrap; justify-content: center; }
  .kpi-strip { padding: 0.75rem; gap: 0.75rem; }
  .kpi { flex: 1 1 80px; min-width: 80px; }
  .kpi-label { font-size: 0.65rem; }
  .kpi-value { font-size: 0.9rem; }
  .chart-wrapper { padding: 0.75rem; }
  .chart-bars { height: 150px; }
  .discovery-nav { flex-direction: column; padding: 0.75rem; gap: 0.75rem; }
  .discovery-nav > div { width: 100%; text-align: center; }
  .discovery-nav a.btn { padding: 0.5rem 0.75rem; font-size: 0.9rem; display: block; }
  .tag-btn { width: 36px; height: 36px; }
  .tag-actions { gap: 0.5rem; }
  .modal-content { width: 95vw; max-width: 95vw; padding: 1rem; }
  .snippet { font-size: 0.8rem; max-height: 4rem; overflow: hidden; }
  .score-badge { font-size: 0.75rem; padding: 2px 6px; }
  .meta { font-size: 0.75rem; }
}

@media (max-width: 480px) {
  .btn { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
  .kpi-strip { padding: 0.5rem; }
  .kpi { flex: 1 1 70px; }
}