/* Prism — dark theme with ljg-card taste principles */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:            #0a0a0f;
  --bg-subtle:     #0f0f14;
  --card:          #0f0f14;
  --card-hover:    #141419;

  --text:          #ebebf0;
  --text-secondary:#8a8f98;
  --text-tertiary: #5a5a6e;

  --border:        rgba(255,255,255,0.06);
  --border-hover:  rgba(255,255,255,0.12);
  --border-accent: rgba(29,155,240,0.2);

  --accent:        #1d9bf0;
  --accent-soft:   #8ecdf7;
  --accent-glow:   rgba(29,155,240,0.08);

  --success:  #34d399;
  --warning:  #fbbf24;
  --error:    #f87171;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: none;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Typography — ljg-card: no Inter, use serif for headings */
  --font-sans:  'Outfit', 'PingFang SC', system-ui, sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;

  /* Tone sensing — content-driven accent colors */
  --tone-tech:   #3D5A80;
  --tone-biz:    #A68B5B;
  --tone-sci:    #2D6A4F;
  --tone-social: #6E6E80;
  --tone-default:#4A4A5A;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background: var(--bg);
  background: radial-gradient(ellipse at top center, #10101e 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 100px; }

a { color: inherit; text-decoration: none; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
@media (min-width: 768px) {
  .container { max-width: 860px; }
}

/* ── Header ───────────────────────────────────────────────── */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 53px;
}

.top-nav .logo {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--text);
  flex-shrink: 0;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; flex: 1; }

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  padding: 0 12px;
}

.tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
}

.tab.active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* ── Channel Bar ───────────────────────────────────────────── */
.channel-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.channel-chip {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}
.channel-chip:hover {
  color: var(--text);
  border-color: var(--border-hover);
  text-decoration: none;
}
.channel-chip.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 700;
}

/* ── Feed Card ─────────────────────────────────────────────── */
.card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

.card:hover { background: var(--card-hover); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Icon ─────────────────────────────────────────────── */
.card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}

.card-icon.actionable { background: rgba(29,155,240,0.08); border-color: rgba(29,155,240,0.15); color: var(--accent); }
.card-icon.strategic  { background: rgba(0,186,124,0.08);  border-color: rgba(0,186,124,0.15);  color: var(--success); }
.card-icon.noise      { background: rgba(255,255,255,0.03); }

.avatar-letter { font-weight: 700; font-size: 15px; color: var(--text); }

/* ── Card Content ──────────────────────────────────────────── */
.card-body { flex: 1; min-width: 0; }

.card-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

.card-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.card-meta .sep::before { content: "\00b7"; }

.card-summary {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.55;
  white-space: pre-line;
}

/* ── Card Links ────────────────────────────────────────────── */
.card-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.original-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  transition: all var(--transition-fast);
}
.original-link:hover {
  background: var(--accent-glow);
  border-color: var(--border-accent);
  text-decoration: none;
}

/* ── Source Pill ────────────────────────────────────────────── */
.card-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

.source-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}
.source-pill:hover { color: var(--accent); border-color: var(--border-accent); text-decoration: none; }

/* ── Action Bar ────────────────────────────────────────────── */
.actions { display: flex; gap: 4px; margin-top: 6px; }
.action-form { display: inline; }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.action-btn:hover { background: var(--accent-glow); color: var(--accent); }
.action-btn.liked    { color: var(--accent); }
.action-btn.disliked { color: var(--error); }
.action-btn.saved    { color: var(--warning); }

/* ── Channel Header ────────────────────────────────────────── */
.channel-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.channel-header h2 { font-size: 18px; font-weight: 700; color: var(--text); }
.channel-header .channel-meta { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

/* ── Follow / Unfollow ─────────────────────────────────────── */
.follow-btn, .unfollow-btn { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all var(--transition-fast); }
.follow-btn { background: var(--text); color: var(--bg); }
.follow-btn:hover { opacity: 0.9; }
.unfollow-btn { background: transparent; color: var(--text); border: 1px solid var(--border-hover); }
.unfollow-btn:hover { border-color: var(--error); color: var(--error); background: rgba(244,33,46,0.06); }

/* ── Back Link ─────────────────────────────────────────────── */
.back-link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 16px; font-weight: 700; color: var(--text); }
.back-link:hover { text-decoration: none; background: var(--card-hover); }

/* ── Loading / Empty ───────────────────────────────────────── */
.loading { text-align: center; padding: 32px; color: var(--text-tertiary); font-size: 14px; }
.empty { text-align: center; padding: 64px 16px; color: var(--text-tertiary); font-size: 15px; }

/* ── HTMX indicator ────────────────────────────────────────── */
.htmx-request .loading { display: block; }

/* === Pairwise Comparison === */
.pair-container { max-width: 600px; margin: 0 auto; padding: 0; }
.pair-cards { display: flex; flex-direction: column; gap: 0; }
.pair-card {
  background: var(--bg);
  padding: 16px;
  border-bottom: 1px solid var(--border);
  min-height: auto;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast);
}
.pair-card:hover { background: var(--card-hover); }
.pair-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.pair-actions { text-align: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pair-buttons { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.btn {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all var(--transition-fast);
}
.btn:hover { background: rgba(255,255,255,0.06); }
.btn:active { transform: scale(0.93); opacity: 0.7; transition: transform 50ms ease, opacity 50ms ease; }
.btn-pick { min-width: 72px; border-color: var(--accent); color: var(--accent); }
.btn-pick:hover { background: var(--accent-glow); }
.btn-pick:active { background: var(--accent); color: #fff; }
.btn-both, .btn-neither { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.btn-both:active, .btn-neither:active { background: rgba(255,255,255,0.1); color: var(--text); }
.btn-feed { background: var(--accent); color: #fff; border: none; font-weight: 700; }
.btn-feed:hover { opacity: 0.9; background: var(--accent); }
.comment-input, .feed-input, .feed-note {
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 0;
  transition: border-color var(--transition-fast);
}
.comment-input:focus, .feed-input:focus, .feed-note:focus { border-color: var(--accent); }
.feed-form { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.feed-toast { text-align: center; color: var(--success); font-size: 14px; padding: 8px 0; }
.pair-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.tag-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  margin: 2px;
  border: 1px solid var(--border);
}
.card-tags { margin-top: 8px; }

/* Card enhancements */
.pair-card .card-summary { font-size: 15px; line-height: 1.55; color: var(--text); margin: 8px 0; flex: 1; }
.pair-card .card-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; font-family: var(--font-serif); letter-spacing: -0.01em; }
.pair-card .card-author { font-size: 14px; color: var(--accent); margin-bottom: 4px; font-weight: 700; }
.author-name { margin-right: 6px; }
.card-original-link { display: inline-block; color: var(--accent); font-size: 13px; text-decoration: none; margin-top: 6px; }
.card-original-link:hover { text-decoration: underline; }
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: transparent; }
.badge-hot { color: #ff6b35; border-color: rgba(255,107,53,0.3); }
.badge-source { color: var(--text-secondary); }
.badge-strength { color: var(--success); border-color: rgba(0,186,124,0.3); }
.card-why { font-size: 14px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }

/* === Skip / Refresh === */
.pair-skip { text-align: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.btn-skip { background: transparent; border: none; color: var(--text-tertiary); font-size: 13px; padding: 6px 16px; cursor: pointer; }
.btn-skip:hover { color: var(--text-secondary); }

/* === Engagement Metrics === */
.card-engagement { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-tertiary); }
.eng-item { display: inline-flex; align-items: center; gap: 4px; }

/* === Card Header (universal) === */
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-header-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--card-hover); flex-shrink: 0; }
.card-header-avatar-fallback { width: 40px; height: 40px; border-radius: 50%; background: rgba(29,155,240,0.15); color: var(--accent); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-header-info { display: flex; flex-direction: column; min-width: 0; }
.card-header-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.card-header-name:hover { color: var(--accent); }
.verified { color: var(--accent); font-size: 13px; }
.card-header-channel { font-size: 13px; color: var(--text-secondary); }

/* === Tweet Translation === */
.tweet-translation-label { font-size: 13px; color: var(--accent); margin: 4px 0 2px; }
.tweet-zh { color: var(--text); }

/* === Quoted Tweet === */
.quoted-tweet { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin: 10px 0; }
.quoted-tweet-author { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.quoted-tweet-avatar { width: 20px; height: 20px; border-radius: 50%; }
.quoted-tweet-name { font-weight: 700; font-size: 13px; color: var(--text); }
.quoted-tweet-handle { font-size: 13px; color: var(--text-secondary); }
.quoted-tweet-text { font-size: 14px; line-height: 1.5; color: var(--text); }

/* === Tweet Media === */
.tweet-media { margin: 10px 0; border-radius: var(--radius-md); overflow: hidden; }
.tweet-media-img { width: 100%; max-height: 280px; object-fit: cover; display: block; border-radius: var(--radius-md); border: 1px solid var(--border); }

/* === Button Selected State === */
.btn-selected.btn-pick { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-selected.btn-both { background: var(--success); color: #fff; border-color: var(--success); }
.btn-selected.btn-neither { background: var(--text-tertiary); color: #fff; border-color: var(--text-tertiary); }

/* === Tweet Text === */
.tweet-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === Liked / Saved === */
.liked-list { max-width: 600px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 0; }
.liked-card { min-height: auto; border-radius: 0; border-bottom: 1px solid var(--border); border-left: none; border-right: none; border-top: none; }

/* === Video Info Card === */
/* === Full Text Collapse === */
.card-fulltext { margin: 10px 0; }
.card-fulltext-toggle {
  font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer;
  padding: 6px 0; list-style: none; user-select: none;
  transition: color var(--transition-fast);
}
.card-fulltext-toggle:hover { color: var(--accent-soft); }
.card-fulltext-toggle::marker, .card-fulltext-toggle::-webkit-details-marker { display: none; }
.card-fulltext-toggle::before { content: '▶ '; font-size: 10px; margin-right: 4px; }
.card-fulltext[open] > .card-fulltext-toggle::before { content: '▼ '; }
.card-fulltext-body {
  font-size: 14px; line-height: 1.75; color: #d0d6e0;
  font-family: var(--font-serif);
  padding: 12px 0 4px;
  white-space: pre-line;
  max-height: 60vh; overflow-y: auto;
}

/* Notion export button */
.btn-notion {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 5px 14px;
  cursor: pointer; margin-top: 10px;
  transition: all var(--transition-fast); font-family: var(--font-sans);
}
.btn-notion:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--border-hover); }
.btn-notion:disabled { opacity: 0.6; cursor: wait; }
.btn-notion-done { color: var(--success); border-color: rgba(52,211,153,0.2); }

.video-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin: 8px 0; }
.video-badge { font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 6px; letter-spacing: 0.5px; }
.video-summary { font-size: 15px; line-height: 1.65; color: var(--text); white-space: pre-line; font-family: var(--font-serif); }
.video-why { font-size: 13px; color: #d0d6e0; margin-top: 10px; line-height: 1.6; padding-left: 10px; border-left: 2px solid rgba(255,255,255,0.08); }
.video-insight { font-size: 14px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; }

/* ══════════════════════════════════════════════════════════
   Daily Briefing — Linear-inspired
   ══════════════════════════════════════════════════════════ */
@keyframes brIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.br { max-width: 620px; margin: 0 auto; padding: 0 20px 56px; }
.br-anim { opacity: 0; animation: brIn .35s ease forwards; animation-delay: calc(var(--i,0) * .08s); }

/* ── Hero ── */
.br-hero { padding: 20px 0 24px; margin-bottom: 8px; }
.br-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: #f7f8f8; margin: 0 0 8px; font-family: var(--font-serif); }
.br-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-date { font-size: 12px; font-weight: 500; color: #62666d; letter-spacing: 0.3px; }
.br-count { font-size: 12px; font-weight: 500; color: #8a8f98; }
.br-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.12); }

/* ── Section ── */
.br-sect { margin-bottom: 32px; }
.br-sect-label {
  font-size: 11px; font-weight: 600; color: #8a8f98;
  text-transform: uppercase; letter-spacing: 1.4px;
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.br-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.br-dot-err { background: var(--error); box-shadow: 0 0 6px rgba(244,33,46,0.4); }
.br-dot-warn { background: var(--warning); box-shadow: 0 0 6px rgba(255,217,61,0.3); }
.br-badge-count {
  font-size: 10px; font-weight: 600; color: #62666d;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  padding: 1px 7px; border-radius: 9999px; margin-left: 2px;
}

/* ── Narrative ── */
.br-narrative {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 20px 22px;
}
.br-narrative p {
  font-size: 15px; line-height: 1.75; color: #d0d6e0;
  margin: 0 0 14px; font-family: var(--font-serif);
}
.br-narrative p:last-child { margin-bottom: 0; }
.br-narrative p:first-child::first-letter {
  font: 700 3.2em/0.82 var(--font-serif);
  float: left; margin: 4px 10px 0 -2px;
  color: var(--accent);
}

/* ── List ── */
.br-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: br-idx; }

/* ── Item (card) ── */
.br-item {
  counter-increment: br-idx;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px 20px;
  transition: border-color .2s ease, background .2s ease;
}
.br-item:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.035); }

/* Actionable variant */
.br-item--act {
  border-left: 3px solid var(--error);
  background: rgba(244,33,46,0.02);
}
.br-item--act:hover { background: rgba(244,33,46,0.035); }

/* Item head: title + stars */
.br-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.br-item-title {
  font-size: 17px; font-weight: 600; color: #f7f8f8;
  line-height: 1.4; letter-spacing: -0.15px; margin: 0;
  font-family: var(--font-serif);
  flex: 1;
}
.br-item-title::before {
  content: counter(br-idx) ". ";
  color: #62666d; font-weight: 500;
}
.br-stars { font-size: 11px; color: var(--warning); letter-spacing: -1px; white-space: nowrap; flex-shrink: 0; padding-top: 2px; }

/* Item body */
.br-item-body { font-size: 15px; line-height: 1.7; color: #8a8f98; margin: 0 0 8px; }

/* Why it matters */
.br-item-why { font-size: 14px; line-height: 1.6; color: #d0d6e0; margin: 0 0 6px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,0.08); }

/* Action */
.br-item-act { font-size: 12px; font-weight: 600; color: var(--success); margin: 0 0 6px; }

/* Tags */
.br-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.br-tag {
  font-size: 10px; font-weight: 500; color: #62666d;
  padding: 2px 9px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent; letter-spacing: 0.2px;
}

/* ── Narrative links ── */
.br-ref {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--accent); text-decoration: none;
  width: 16px; height: 16px; border-radius: 4px;
  background: rgba(29,155,240,0.08); border: 1px solid rgba(29,155,240,0.15);
  margin: 0 1px; vertical-align: middle; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.br-ref:hover { background: rgba(29,155,240,0.18); border-color: rgba(29,155,240,0.3); }

/* Item title links */
.br-item-title a {
  color: #f7f8f8; text-decoration: none;
  transition: color .15s ease;
}
.br-item-title a:hover { color: var(--accent); }
.br-extlink {
  font-size: 12px; color: var(--accent); opacity: 0.5;
  transition: opacity .15s ease; margin-left: 2px;
}
.br-item-title a:hover .br-extlink { opacity: 1; }

/* ── Mobile ── */
@media (max-width: 480px) {
  .br { padding: 0 14px 40px; }
  .br-title { font-size: 20px; }
  .br-item { padding: 14px 16px; }
  .br-item-title { font-size: 14px; }
  .br-narrative { padding: 16px 16px; }
}

/* === Vote Confirmation === */
.vote-confirmed { text-align: center; padding: 24px 16px; }
.vote-label { display: block; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.vote-comment { display: block; font-size: 14px; color: var(--text-secondary); font-style: italic; margin-bottom: 16px; }
.btn-next { padding: 8px 24px; font-size: 15px; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; transition: opacity var(--transition-fast); }
.btn-next:hover { opacity: 0.9; }

/* === History (legacy, kept for compatibility) === */
.history-list { max-width: 600px; margin: 0 auto; padding: 0; }
.history-item { padding: 16px; border-bottom: 1px solid var(--border); }
.history-pair { display: flex; align-items: center; gap: 12px; }
.history-signal { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); }
.history-signal.winner { border-left: 2px solid var(--accent); }
.history-vs { font-size: 13px; color: var(--text-tertiary); font-weight: 700; }
.history-label { font-weight: 700; color: var(--accent); margin-right: 4px; }
.history-meta { margin-top: 8px; font-size: 13px; color: var(--text-tertiary); display: flex; gap: 12px; flex-wrap: wrap; }
.history-winner { color: var(--accent); font-weight: 600; }
.history-comment { font-style: italic; }

/* === Sources === */
.sources-page { max-width: 600px; margin: 0 auto; padding: 0; }
.sources-summary { padding: 16px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-secondary); }
.sources-summary .stat-num { font-weight: 800; color: var(--text); }
.sources-sep { margin: 0 6px; color: var(--text-tertiary); }

/* Source group (file-tree style) */
.source-group { border-bottom: 1px solid var(--border); }
.source-group-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; }
.source-group-header::-webkit-details-marker { display: none; }
.source-group-header::before { content: "▸"; font-size: 12px; color: var(--text-tertiary); transition: transform 0.15s; }
details[open] > .source-group-header::before { content: "▾"; }
.source-group-icon { font-size: 18px; flex-shrink: 0; }
.source-group-name { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.source-group-count { font-size: 13px; color: var(--text-tertiary); flex-shrink: 0; }
.source-group-list { padding-left: 0; }

.source-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 10px 48px; border-top: 1px solid rgba(255,255,255,0.04); }
.source-row:active { background: var(--card-hover); }
.source-disabled { opacity: 0.35; }
.source-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.source-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--card-hover); }
.source-avatar-fallback { width: 28px; height: 28px; border-radius: 50%; background: rgba(29,155,240,0.12); color: var(--accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.source-handle { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-stats { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.source-count { font-size: 14px; font-weight: 600; color: var(--text-secondary); min-width: 32px; text-align: right; }
.source-date { font-size: 12px; color: var(--text-tertiary); }

/* === Profile / Preferences === */
.profile-page { max-width: 600px; margin: 0 auto; padding: 16px; }
.profile-stats { display: flex; justify-content: space-around; padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.stat-item { text-align: center; }
.stat-num { display: block; font-size: 24px; font-weight: 800; color: var(--text); }
.stat-label { font-size: 13px; color: var(--text-secondary); }
.profile-section { margin-bottom: 20px; }
.profile-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-tag { padding: 6px 14px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; }
.profile-tag.liked { background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(29,155,240,0.2); }
.profile-tag.disliked { background: rgba(244,33,46,0.08); color: var(--error); border: 1px solid rgba(244,33,46,0.15); }
.profile-list { display: flex; flex-direction: column; gap: 0; }
.profile-list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.profile-list-name { font-size: 15px; color: var(--text); }
.profile-list-weight { font-size: 14px; font-weight: 600; color: var(--success); }
.profile-list-weight.dim { color: var(--error); }
.profile-list-right { display: flex; align-items: center; gap: 8px; }
.tag-del, .list-del { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; padding: 0 0 0 6px; opacity: 0.4; transition: opacity 0.2s; line-height: 1; }
.tag-del:hover, .list-del:hover { opacity: 1; color: var(--error); }
.tag-block, .list-block { background: none; border: 1px solid rgba(244,33,46,0.3); color: var(--error); cursor: pointer; font-size: 11px; padding: 1px 6px; border-radius: var(--radius-full); margin-left: 4px; opacity: 0.7; transition: opacity 0.2s; }
.tag-block:hover, .list-block:hover { opacity: 1; background: rgba(244,33,46,0.15); }
.blocked-badge { font-size: 11px; color: var(--error); background: rgba(244,33,46,0.15); padding: 1px 6px; border-radius: var(--radius-full); margin-left: 4px; }

/* ── Mobile Responsive ────────────────────────────────────── */
@media (max-width: 600px) {
  .container {
    border-left: none;
    border-right: none;
  }

  .top-nav {
    padding: 0 12px;
    gap: 8px;
    height: 48px;
  }
  .top-nav .logo { font-size: 16px; }
  .tab { font-size: 15px; height: 48px; padding: 0 8px; }

  .pair-card { padding: 16px; }
  .pair-card .card-title { font-size: 16px; }
  .pair-card .card-summary { font-size: 16px; line-height: 1.6; }

  .pair-buttons { gap: 6px; }
  .btn { padding: 10px 16px; font-size: 15px; }
  .btn-pick { min-width: 0; flex: 1; }
  .btn-both, .btn-neither { flex: 1; }

  .feed-form {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
  }
  .feed-input, .feed-note, .comment-input { max-width: none; }

  .card-meta { font-size: 13px; }
  .card-engagement { gap: 12px; font-size: 13px; }
  .badge { font-size: 12px; }
  .tag-pill { font-size: 13px; }
  .card-why { font-size: 15px; }
  .card-author { font-size: 15px; }
  .card-original-link { font-size: 14px; }

  .channel-header { padding: 14px; }
  .history-pair { flex-direction: column; gap: 8px; }

  /* Hide feed form on mobile */
  .feed-form { display: none; }
}

/* ── Creator List (Follow Tab) ─────────────────────────────── */
/* ── Follow Page ────────────────────────────────────────────── */
.follow-page { padding: 8px 16px 32px; }
.section-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; padding: 12px 0 8px; }

/* YouTube: horizontal scroll cards */
.yt-section { margin-bottom: 20px; }
.yt-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.yt-scroll::-webkit-scrollbar { height: 4px; }
.yt-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.yt-card { flex: 0 0 220px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; }
.yt-card:hover { border-color: var(--border-hover); background: var(--card-hover); }
.yt-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.yt-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.yt-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-meta { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.yt-item { font-size: 12px; color: var(--text-secondary); line-height: 1.4; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
.yt-item.has-article { color: var(--text); }
.yt-item:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

/* Timeline: compact message list */
.tl-section { margin-bottom: 20px; }
.tl-list { display: flex; flex-direction: column; }
.follow-section { margin: 18px 0 8px; }
.follow-section-group { margin: 0; }
.follow-section-group > summary.follow-section-title { cursor: pointer; list-style: none; user-select: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 14px 8px 8px; letter-spacing: 0.02em; text-transform: none; display: flex; align-items: center; }
.follow-section-group > summary.follow-section-title::-webkit-details-marker { display: none; }
.follow-section-group > summary.follow-section-title::before { content: "▸"; display: inline-block; width: 14px; color: var(--text-tertiary); transition: transform var(--transition-fast); }
.follow-section-group[open] > summary.follow-section-title::before { transform: rotate(90deg); }
.follow-section-group > summary.follow-section-title:hover { color: var(--text); }
.follow-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 14px 8px 8px; letter-spacing: 0.02em; text-transform: none; }
.follow-bucket { margin: 4px 0; border-bottom: 1px solid var(--border); }
.follow-bucket:last-child { border-bottom: none; }
.follow-bucket > summary { cursor: pointer; padding: 8px 8px; font-size: 13px; color: var(--text); list-style: none; user-select: none; }
.follow-bucket > summary::-webkit-details-marker { display: none; }
.follow-bucket > summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--text-tertiary); transition: transform var(--transition-fast); }
.follow-bucket[open] > summary::before { transform: rotate(90deg); }
.follow-bucket > summary:hover { color: var(--text); background: var(--card-hover); }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.tl-row:hover { background: var(--card-hover); }
.tl-row:last-child { border-bottom: none; }
.tl-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tl-avatar-fb { width: 36px; height: 36px; border-radius: 50%; background: rgba(29,155,240,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.tl-body { flex: 1; min-width: 0; }
.tl-header { display: flex; align-items: center; gap: 6px; }
.tl-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-icon { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.tl-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; flex-shrink: 0; }
.tl-preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tl-count { font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.tl-score { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tl-score.positive { color: #4caf50; background: rgba(76,175,80,0.1); }
.tl-score.negative { color: #999; background: rgba(255,255,255,0.03); }

/* ── Creator Profile Page ──────────────────────────────────── */
.creator-profile { padding: 0 16px; }
.course-notes { margin: 8px 0 24px; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.course-notes-body { font-size: 15px; line-height: 1.75; color: var(--text); }
.course-notes-body > h1 { font-size: 22px; margin: 0 0 10px; color: var(--text); }
.course-notes-body > h2 { font-size: 18px; margin: 28px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text); }
.course-notes-body > h2:first-of-type { border-top: none; padding-top: 0; }
.course-lesson { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.course-lesson:first-of-type { border-top: none; }
.course-lesson-summary { cursor: pointer; list-style: none; user-select: none; font-size: 17px; font-weight: 600; color: var(--text); padding: 6px 0; display: flex; align-items: center; }
.course-lesson-summary::-webkit-details-marker { display: none; }
.course-lesson-summary::before { content: "▸"; display: inline-block; width: 18px; color: var(--text-tertiary); transition: transform var(--transition-fast); flex-shrink: 0; }
.course-lesson[open] > .course-lesson-summary::before { transform: rotate(90deg); }
.course-lesson-summary:hover { color: var(--accent); }
.course-lesson-body { padding: 6px 0 14px 18px; }
.course-lesson-body > h3 { font-size: 13px; margin: 14px 0 6px; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.course-notes-body > h3 { font-size: 14px; margin: 14px 0 6px; color: var(--text-secondary); letter-spacing: 0.02em; }
.course-notes-body > blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid var(--border-hover); background: var(--card-hover); color: var(--text-secondary); font-size: 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.course-notes-body > hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.course-notes-body p { margin: 0 0 12px; }
.course-notes-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--card-hover); padding: 1px 5px; border-radius: 3px; }
.course-notes-body a { color: var(--accent); text-decoration: none; }
.course-notes-body a:hover { text-decoration: underline; }
/* Course TOC layout — sticky right sidebar on desktop, collapsible top on mobile */
.course-notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; margin: 8px 0 24px; }
.course-notes-layout > .course-notes { margin: 0; min-width: 0; }
.course-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; }
.course-toc-mobile { }
.course-toc-mobile > summary { list-style: none; cursor: pointer; }
.course-toc-mobile > summary::-webkit-details-marker { display: none; }
.course-toc-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.course-toc-title .muted { color: var(--text-tertiary); font-weight: 400; }
.course-toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.course-toc-list li { counter-increment: toc; margin: 0; }
.course-toc-list a { display: block; padding: 6px 8px 6px 28px; position: relative; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; transition: color var(--transition-fast), background var(--transition-fast); }
.course-toc-list a::before { content: counter(toc); position: absolute; left: 6px; top: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); width: 18px; text-align: right; }
.course-toc-list a:hover { color: var(--accent); background: var(--card-hover); }
@media (max-width: 900px) {
  .course-notes-layout { grid-template-columns: 1fr; }
  .course-toc { position: static; max-height: none; order: -1; }
  .course-toc-mobile:not([open]) .course-toc-list { display: none; }
  .course-toc-title::after { content: " ▸"; color: var(--text-tertiary); }
  .course-toc-mobile[open] .course-toc-title::after { content: " ▾"; }
}
.creator-header { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.creator-header .creator-avatar { width: 56px; height: 56px; }
.creator-header-info { flex: 1; }
.creator-header-info h1 { font-size: 20px; margin: 0; color: var(--text); }
.creator-source-link { font-size: 13px; color: var(--accent); text-decoration: none; transition: opacity var(--transition-fast); }
.creator-source-link:hover { opacity: 0.8; }
.creator-header-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.creator-header-actions .follow-btn, .creator-header-actions .unfollow-btn { padding: 5px 14px; font-size: 13px; }
.gh-pitch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; color: var(--text-secondary); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.gh-pitch:hover { color: var(--accent); border-color: var(--accent); background: var(--card-hover); }
.gh-pitch .gh-icon { color: #f5a623; font-size: 13px; line-height: 1; }
.gh-pitch:hover .gh-icon { color: #ffb84d; }
.back-link { display: inline-block; padding: 8px 0; font-size: 14px; color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.back-link:hover { color: var(--text); }
.back-link:hover { color: var(--text); }
.item-list { display: flex; flex-direction: column; gap: 10px; }
.item-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; text-decoration: none; color: inherit; transition: background var(--transition-fast), border-color var(--transition-fast); }
.item-card:hover { background: var(--card-hover); border-color: var(--border-hover); }
.item-card-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.item-card-subtitle { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
.item-card-meta { font-size: 12px; color: var(--text-tertiary); }
.item-card-status { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-full); }
.item-card-status.has-article { background: rgba(52,211,153,0.12); color: var(--success); }
.item-card-status.no-subtitle { background: rgba(251,191,36,0.12); color: var(--warning); }
.item-card-open { color: var(--text-secondary); text-decoration: none; }
.item-card-open:hover { color: var(--text); text-decoration: underline; }
.item-card-link { display: block; color: inherit; text-decoration: none; }
.item-card-actions { margin-top: 8px; }
.item-like { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 4px 10px; font-size: 12px; border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.item-like:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-hover); }
.item-like.liked { color: #e0245e; border-color: rgba(224,36,94,0.35); background: rgba(224,36,94,0.08); }
.item-like.liked:hover { background: rgba(224,36,94,0.15); }
/* old creator bullet — replaced by new dot style above */

/* Article detail page */
.article-page { padding: 0 16px; max-width: 780px; margin: 0 auto; }
.article-header { padding: 24px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.article-header h1 { font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; color: var(--text); }
.article-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
.article-meta { font-size: 13px; color: var(--text-tertiary); }
.article-meta a { color: var(--accent); text-decoration: none; transition: opacity var(--transition-fast); }
.article-meta a:hover { opacity: 0.8; }

/* Article body typography */
.article-body { font-size: 15px; line-height: 1.85; color: var(--text); }
.article-body h1 { font-size: 18px; font-weight: 700; color: var(--text); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.article-body h1:first-child { margin-top: 0; }
.article-body h2 { font-size: 16px; font-weight: 600; color: var(--text); margin: 28px 0 10px; }
.article-body h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 24px 0 8px; }
.article-body p { margin: 0 0 16px; }
.article-body strong { color: var(--accent-soft); font-weight: 600; }
.article-body ol, .article-body ul { margin: 0 0 16px; padding-left: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body li strong { color: var(--accent-soft); }
.article-body blockquote { border-left: 3px solid rgba(29,155,240,0.3); padding: 10px 16px; margin: 16px 0; color: var(--text-secondary); background: rgba(29,155,240,0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Article highlights */
.article-highlights { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.article-highlights h2 { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; }
.article-highlights blockquote { border-left: 3px solid var(--success); padding: 10px 16px; margin: 10px 0; color: var(--text); background: rgba(52,211,153,0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: normal; }

/* Article like button */
.article-actions { margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--border); text-align: center; }
.btn-article-like { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-full); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); font-family: inherit; }
.btn-article-like:hover { border-color: var(--accent); color: var(--accent); background: rgba(29,155,240,0.06); }
.btn-article-like.liked { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.06); }

/* ============ Feed (W2) ============ */
.feed-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
@media (min-width: 768px) {
  .feed-container { max-width: 860px; }
}

.feed-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  padding: 0 16px;
  height: 53px;
  align-items: stretch;
  overflow-x: auto;
}
.feed-nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.feed-nav a:hover { color: var(--text); }
.feed-nav a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }

.feed-submit {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--bg-subtle);
}
.feed-submit .feed-input,
.feed-submit .feed-note {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}
.feed-submit .feed-input { flex: 2; min-width: 200px; }
.feed-submit .feed-note  { flex: 1; min-width: 140px; }
.feed-submit .feed-input::placeholder,
.feed-submit .feed-note::placeholder { color: var(--text-tertiary); }
.feed-submit button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.feed-submit button:hover { opacity: 0.9; }

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed-card {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  transition: background var(--transition-fast);
}
.feed-card:hover { background: var(--card-hover); }

.feed-card-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.feed-avatar,
.feed-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 44px;
  object-fit: cover;
  background: var(--card-hover);
  border: 1px solid var(--border);
}
.feed-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 18px;
  text-transform: uppercase;
}
.feed-author-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.feed-author-name {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.feed-author-name:hover { color: var(--accent); }
.feed-author-sub {
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-author-sub time {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.feed-channel {
  font-weight: 600;
  color: var(--text-secondary);
}
.feed-channel-x { color: #1d9bf0; }
.feed-channel-youtube { color: #ff4d4d; }
.feed-channel-arxiv { color: #b31b1b; }
.feed-channel-hackernews,
.feed-channel-hn_search { color: #ff6600; }
.feed-channel-github_trending,
.feed-channel-github_releases { color: var(--text); }
.feed-channel-reddit { color: #ff4500; }
.feed-channel-producthunt { color: #da552f; }

.feed-topic-tag {
  margin-left: auto;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-meta {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.feed-topic {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.feed-source {
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 12px;
}
.feed-author {
  color: var(--text-secondary);
  font-weight: 500;
}

.feed-summary {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 6px 0;
}
.feed-why {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--border-accent);
}
.feed-links { margin: 8px 0 0; font-size: 13px; }
.feed-links a {
  color: var(--accent);
  font-weight: 500;
}
.feed-links a:hover { text-decoration: underline; }

.feed-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.feed-actions form { display: inline-flex; }
.feed-actions .btn {
  padding: 6px 14px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.feed-actions .btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border-color: var(--border-hover);
}
.feed-actions .btn-signin {
  border: 1px solid rgba(127,184,232,0.35);
  color: #7fb8e8;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  background: rgba(127,184,232,0.04);
}
.feed-actions .btn-signin:hover { background: rgba(127,184,232,0.10); }

/* Anonymous-visitor footer strip with GitHub star CTA */
.site-foot-anon {
  max-width: 900px;
  margin: 40px auto 24px;
  padding: 14px 20px;
  text-align: center;
  color: #888;
  font-size: 13px;
  border-top: 1px solid #1f1f26;
}
.site-foot-anon a {
  color: #e8c878;
  text-decoration: none;
  margin: 0 4px;
}
.site-foot-anon a:hover { text-decoration: underline; }
.feed-actions .btn-save {
  border-color: var(--accent);
  color: var(--accent);
}
.feed-actions .btn-save:hover {
  background: var(--accent-glow);
  color: var(--accent-soft);
}
.feed-actions .btn-follow {
  border-color: rgba(52,211,153,0.35);
  color: var(--success);
}
.feed-actions .btn-follow:hover { background: rgba(52,211,153,0.08); }
.feed-actions .btn-following {
  border: 1px solid rgba(52,211,153,0.25);
  color: var(--text-tertiary);
  background: rgba(52,211,153,0.04);
  cursor: default;
}
.feed-actions .btn-mute {
  border-color: rgba(251,191,36,0.35);
  color: var(--warning);
}
.feed-actions .btn-mute:hover { background: rgba(251,191,36,0.08); }
.feed-actions .btn-dismiss {
  min-width: 38px;
  text-align: center;
  color: var(--text-tertiary);
  margin-left: auto;
}
.feed-actions .btn-dismiss:hover {
  color: var(--error);
  border-color: rgba(248,113,113,0.4);
  background: rgba(248,113,113,0.06);
}
.feed-actions .btn-done {
  padding: 6px 14px;
  border: 1px solid var(--success);
  border-radius: var(--radius-full);
  color: var(--success);
  background: rgba(52,211,153,0.08);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.feed-done {
  padding: 20px;
  text-align: center;
  color: var(--success);
  background: rgba(52,211,153,0.06);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.feed-more-wrapper {
  text-align: center;
  padding: 24px 0 48px;
}
#feed-load-more {
  padding: 10px 28px;
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition-fast);
}
#feed-load-more:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.feed-loading {
  text-align: center;
  color: var(--text-tertiary);
  padding: 32px 16px;
  font-size: 13px;
}

.feed-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 48px 20px;
  font-size: 14px;
  line-height: 1.7;
}
.feed-empty code {
  background: var(--card-hover);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.feed-empty a { color: var(--accent); }
.feed-empty a:hover { text-decoration: underline; }

.saved-list { list-style: none; padding: 0; margin: 0; }
.saved-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  background: var(--card);
  transition: background var(--transition-fast);
}
.saved-item:hover { background: var(--card-hover); }
.saved-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.saved-summary {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 6px;
}
.saved-item a {
  color: var(--accent);
  font-size: 13px;
}
.saved-item a:hover { text-decoration: underline; }

/* ── Quality Watchdog ─────────────────────────────────────────────── */
.quality-summary {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}
.quality-stat {
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border, #2a2a35);
}
.quality-stat .stat-number { display: block; font-size: 2rem; font-weight: 600; }
.quality-stat .stat-label { display: block; font-size: 12px; text-transform: uppercase; opacity: 0.7; }
.quality-stat-critical { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.4); }
.quality-stat-warn { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.4); }
.quality-stat-info { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.4); }

.quality-list { display: flex; flex-direction: column; gap: 1rem; }
.quality-item {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2a35);
  background: var(--card-bg, #15151c);
}
.quality-sev-critical { border-left: 3px solid #dc2626; }
.quality-sev-warn { border-left: 3px solid #eab308; }
.quality-sev-info { border-left: 3px solid #3b82f6; }
.quality-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}
.quality-badge {
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}
.quality-badge-critical { background: #dc2626; color: #fff; }
.quality-badge-warn { background: #eab308; color: #000; }
.quality-badge-info { background: #3b82f6; color: #fff; }
.quality-title { margin: 0.25rem 0; font-size: 16px; }
.quality-detail { margin: 0.25rem 0 0.75rem 0; opacity: 0.85; font-size: 14px; }
.quality-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.quality-empty {
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--border, #2a2a35);
  border-radius: 10px;
}
.btn-small { padding: 4px 12px; font-size: 12px; }

/* ── Card style switcher ──────────────────────────────────── */
.card-style-switcher {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.card-style-switcher .css-label { margin-right: 4px; }
.card-style-switcher .css-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: all var(--transition-fast);
}
.card-style-switcher .css-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.card-style-switcher .css-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* Compact action bar shared by A/C/D/F (icon-only).
   Muted by default — grayscale + low opacity so the 4 emoji don't
   dominate the card. Lights up on card hover/tap. */
.feed-actions.compact {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}
.feed-card:hover .feed-actions.compact,
.feed-card:focus-within .feed-actions.compact { opacity: 1; }
/* Neutralize the big colored borders on btn-save/follow/mute/dismiss
   inside compact bars — they create the 4-colored-circles look. */
.feed-actions.compact .btn,
.feed-actions.compact .btn-save,
.feed-actions.compact .btn-follow,
.feed-actions.compact .btn-mute,
.feed-actions.compact .btn-dismiss,
.feed-actions.compact .btn-following {
  padding: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-tertiary) !important;
  font-size: 15px;
  filter: grayscale(100%);
  transition: filter var(--transition-fast), color var(--transition-fast);
}
.feed-actions.compact .btn:hover,
.feed-actions.compact .btn:focus {
  filter: none;
  color: var(--text) !important;
}
/* hover-reveal: kept as extra dimming layer (classes stay on templates) */
.feed-actions.hover-reveal { opacity: 0.4; }
.feed-card:hover .feed-actions.hover-reveal { opacity: 1; }

/* ── Variant: tweet (X 原推文) ─────────────────────────────── */
.feed-card.variant-tweet {
  padding: 14px 20px;
}
.feed-card.variant-tweet .tw-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.feed-card.variant-tweet .tw-avatar,
.feed-card.variant-tweet .tw-avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%;
  flex: 0 0 40px; object-fit: cover;
  background: var(--card-hover);
  border: 1px solid var(--border);
}
.feed-card.variant-tweet .tw-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--text-secondary); font-size: 16px;
}
.feed-card.variant-tweet .tw-author {
  display: flex; flex-direction: column; line-height: 1.3; min-width: 0;
}
.feed-card.variant-tweet .tw-name {
  color: var(--text); font-weight: 600; font-size: 14px;
}
.feed-card.variant-tweet .tw-name a { color: var(--text); text-decoration: none; }
.feed-card.variant-tweet .tw-name a:hover { color: var(--accent); }
.feed-card.variant-tweet .tw-verified {
  color: var(--accent); font-size: 12px; margin-left: 2px;
}
.feed-card.variant-tweet .tw-meta {
  color: var(--text-tertiary); font-size: 12px;
  font-family: var(--font-sans);
}
.feed-card.variant-tweet .tw-body {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-serif);
  margin-left: 52px;  /* align with avatar edge */
}
.feed-card.variant-tweet .tw-quoted {
  margin: 8px 0 0 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 13px;
  color: var(--text-secondary);
}
.feed-card.variant-tweet .tw-quoted-author {
  font-weight: 600; color: var(--text); font-size: 12px; margin-bottom: 4px;
}
.feed-card.variant-tweet .tw-quoted-author span { color: var(--text-tertiary); font-weight: 400; }
.feed-card.variant-tweet .tw-quoted-text { white-space: pre-wrap; }
.feed-card.variant-tweet .tw-link {
  display: inline-block; margin: 8px 0 0 52px;
  color: var(--accent); font-size: 13px; text-decoration: none;
}
.feed-card.variant-tweet .tw-link:hover { text-decoration: underline; }
.feed-card.variant-tweet .feed-actions { margin-left: 52px; }
.feed-card.variant-tweet .tw-original {
  margin: 6px 0 0 52px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.feed-card.variant-tweet .tw-original > summary {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 12px;
  user-select: none;
  list-style: none;
  padding: 2px 0;
}
.feed-card.variant-tweet .tw-original > summary::-webkit-details-marker { display: none; }
.feed-card.variant-tweet .tw-original > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.feed-card.variant-tweet .tw-original[open] > summary::before { content: "▾ "; }
.feed-card.variant-tweet .tw-original > summary:hover { color: var(--text-secondary); }
.feed-card.variant-tweet .tw-original-body {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-serif);
  line-height: 1.5;
}

/* ── Variant: video (YouTube) ─────────────────────────────── */
.feed-card.variant-video {
  padding: 0;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.feed-card.variant-video .vid-cover-link { display: block; text-decoration: none; }
.feed-card.variant-video .vid-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--card-hover);
  position: relative;
  transition: filter var(--transition-fast);
}
.feed-card.variant-video .vid-cover:hover { filter: brightness(1.1); }
.feed-card.variant-video .vid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}
.feed-card.variant-video .vid-body { padding: 12px 16px 0; }
.feed-card.variant-video .vid-meta-top {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.feed-card.variant-video .vid-meta-top a { color: var(--text-secondary); text-decoration: none; }
.feed-card.variant-video .vid-meta-top a:hover { color: var(--accent); }
.feed-card.variant-video .vid-title {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 8px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-video .vid-title a { color: var(--text); text-decoration: none; }
.feed-card.variant-video .vid-title a:hover { color: var(--accent); }
.feed-card.variant-video .vid-snippet {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-video .vid-why {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 4px;
  padding-left: 10px;
  border-left: 2px solid var(--border-accent);
  line-height: 1.5;
}
.feed-card.variant-video .vid-extra-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  margin: 6px 0 4px;
}
.feed-card.variant-video .vid-extra-links a { color: var(--text-secondary); }
.feed-card.variant-video .vid-extra-links a:first-child { color: var(--brand-accent, #e8c878); font-weight: 500; }
.feed-card.variant-video .feed-actions { padding: 0 16px 12px; margin-top: 6px; }
.feed-card.variant-article .art-extra-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 6px 0 4px; }
.feed-card.variant-article .art-extra-links a { color: var(--brand-accent, #e8c878); font-weight: 500; text-decoration: none; }
.feed-card.variant-article .art-extra-links a:hover { text-decoration: underline; }

/* ── Variant: article (HN / arxiv / GitHub / Reddit / PH …) ─ */
.feed-card.variant-article {
  padding: 12px 20px;
}
.feed-card.variant-article .art-meta-top {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.feed-card.variant-article .art-meta-top a { color: var(--text-secondary); text-decoration: none; }
.feed-card.variant-article .art-meta-top a:hover { color: var(--accent); }
.feed-card.variant-article .art-title {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 6px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-article .art-title a { color: var(--text); text-decoration: none; }
.feed-card.variant-article .art-title a:hover { color: var(--accent); }
.feed-card.variant-article .art-snippet {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-article .art-why {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--border-accent);
  line-height: 1.5;
}

/* Override default summary/why when headline replaces them */
.feed-card.variant-c .feed-summary {
  font-size: 15px;
  line-height: 1.5;
  margin: 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-c .feed-summary a { color: var(--text); text-decoration: none; }
.feed-card.variant-c .feed-summary a:hover { color: var(--accent); }
.feed-card.variant-c { padding: 10px 20px; }

/* ── Variant A: 极简一行流（单行） ────────────────────────── */
.feed-card.variant-a {
  padding: 6px 20px;
  border-bottom: 1px solid var(--border);
}
.feed-card.variant-a .a-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  min-height: 24px;
}
.feed-card.variant-a .a-meta {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-card.variant-a .a-meta .a-author { color: var(--text-secondary); font-weight: 500; }
.feed-card.variant-a .a-title {
  flex: 1 1 auto;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-card.variant-a .a-title a { color: var(--text); text-decoration: none; }
.feed-card.variant-a .a-title a:hover { color: var(--accent); }
.feed-card.variant-a .a-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

/* ── Variant D: 杂志封面式 ─────────────────────────────────── */
.feed-card.variant-d {
  padding: 0;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.feed-card.variant-d .d-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--card-hover);
}
.feed-card.variant-d .d-cover-gradient {
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feed-card.variant-d .d-cover-x        { background: linear-gradient(135deg, #0f1419 0%, #1d9bf0 100%); }
.feed-card.variant-d .d-cover-youtube  { background: linear-gradient(135deg, #2a0808 0%, #ff4d4d 100%); }
.feed-card.variant-d .d-cover-arxiv    { background: linear-gradient(135deg, #1a0a0a 0%, #b31b1b 100%); }
.feed-card.variant-d .d-cover-hackernews,
.feed-card.variant-d .d-cover-hn_search { background: linear-gradient(135deg, #1a0f00 0%, #ff6600 100%); }
.feed-card.variant-d .d-cover-github_trending,
.feed-card.variant-d .d-cover-github_releases { background: linear-gradient(135deg, #0d1117 0%, #30363d 100%); }
.feed-card.variant-d .d-cover-reddit   { background: linear-gradient(135deg, #1a0800 0%, #ff4500 100%); }
.feed-card.variant-d .d-cover-producthunt { background: linear-gradient(135deg, #1a0600 0%, #da552f 100%); }
.feed-card.variant-d .d-cover-other    { background: linear-gradient(135deg, #0f0f14 0%, #3D5A80 100%); }
.feed-card.variant-d .d-body { padding: 14px 16px 4px; }
.feed-card.variant-d .d-title {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 6px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-d .d-title a { color: var(--text); text-decoration: none; }
.feed-card.variant-d .d-title a:hover { color: var(--accent); }
.feed-card.variant-d .d-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.feed-card.variant-d .feed-actions { padding: 0 16px 14px; }

/* ── Variant F: 徽章式 ────────────────────────────────────── */
.feed-card.variant-f {
  position: relative;
  padding: 14px 20px 14px 20px;
}
.feed-card.variant-f .f-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  color: var(--accent);
  margin-bottom: 8px;
  font-family: var(--font-sans);
}
.feed-card.variant-f .f-badge-actionable { background: rgba(29,155,240,0.12); color: var(--accent); }
.feed-card.variant-f .f-badge-insight    { background: rgba(251,191,36,0.12); color: var(--warning); }
.feed-card.variant-f .f-badge-context    { background: rgba(138,143,152,0.12); color: var(--text-secondary); }
.feed-card.variant-f .f-badge-hackernews,
.feed-card.variant-f .f-badge-hn         { background: rgba(255,102,0,0.14);  color: #ff6600; }
.feed-card.variant-f .f-badge-youtube    { background: rgba(255,77,77,0.14);  color: #ff4d4d; }
.feed-card.variant-f .f-badge-x          { background: rgba(29,155,240,0.14); color: #1d9bf0; }
.feed-card.variant-f .f-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.feed-card.variant-f .f-title {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  margin: 4px 0 4px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card.variant-f .f-title a { color: var(--text); text-decoration: none; }
.feed-card.variant-f .f-title a:hover { color: var(--accent); }
.feed-card.variant-f .f-why {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* === Board (dashboard) === */
.board { padding: 16px 0 48px; }
.board-head { margin: 8px 0 24px; }
.board-h1 { font-size: 26px; font-weight: 700; margin: 0; color: var(--text); }
.board-sub { color: var(--text-tertiary); font-size: 13px; margin-top: 4px; }
.board-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.board-h2 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px; }
.board-badge {
  display: inline-block; min-width: 24px; padding: 1px 8px; text-align: center;
  background: var(--accent-glow); color: var(--accent);
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.board-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.015);
}
.board-tile-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.board-tile-emoji { font-size: 14px; }
.board-tile-label { font-weight: 500; }
.board-tile-num { font-size: 28px; font-weight: 800; color: var(--text); margin-top: 2px; line-height: 1.1; }
.board-tile-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.board-delta { margin-left: 6px; font-weight: 600; }
.board-delta-up { color: #34d399; }
.board-delta-down { color: #f87171; }

.board-empty { color: var(--text-tertiary); padding: 16px 0; font-size: 13px; }

.board-article-list { display: flex; flex-direction: column; gap: 8px; }
.board-article {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms;
}
.board-article:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.015); }
.board-article-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.board-tag { color: var(--text-tertiary); }
.board-article-meta { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.board-article-title { color: var(--text); font-weight: 600; font-size: 14px; margin-top: 4px; line-height: 1.4; }
.board-article-sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; line-height: 1.4; }

.board-pipeline {
  display: flex; align-items: stretch; gap: 10px;
  overflow-x: auto; padding-bottom: 4px;
}
.board-stage {
  flex: 1 1 120px; min-width: 110px;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.board-stage-label { font-size: 12px; color: var(--text-tertiary); }
.board-stage-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.board-stage-of { font-size: 13px; font-weight: 500; color: var(--text-tertiary); margin-left: 2px; }
.board-stage-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.board-pending { color: #f59e0b; }
.board-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); margin-top: 6px; overflow: hidden; }
.board-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 200ms; }
.board-arrow { color: var(--text-tertiary); align-self: center; font-size: 14px; }

.board-health-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.board-mini { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.board-mini-label { font-size: 11px; color: var(--text-tertiary); }
.board-mini-num { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.board-mini-num.warn { color: #f59e0b; }

.board-details { margin-top: 10px; }
.board-details summary { cursor: pointer; font-size: 13px; color: var(--text-secondary);
  padding: 6px 0; user-select: none; }
.board-details summary:hover { color: var(--text); }
.board-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.board-table th { text-align: left; color: var(--text-tertiary); font-weight: 500;
  padding: 6px 8px; border-bottom: 1px solid var(--border); }
.board-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.board-table td:first-child a { color: var(--text); text-decoration: none; }
.board-table td:first-child a:hover { color: var(--accent); }

.board-active-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.board-active-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--text-secondary); font-size: 13px;
}
.board-active-row:hover { border-color: var(--border-hover); color: var(--text); }
.board-active-key { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-active-num { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.board-xyz-list { display: flex; flex-direction: column; gap: 10px; }
.board-xyz-row {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.board-xyz-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.board-xyz-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  text-decoration: none;
}
.board-xyz-name:hover { color: var(--accent); }
.board-xyz-counts {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.board-xyz-counts b { color: var(--text); font-weight: 700; }
.board-xyz-meta {
  font-size: 11px; color: var(--text-tertiary); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.board-xyz-cand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.board-xyz-cand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02);
  text-decoration: none; color: var(--text);
  font-size: 13px;
}
.board-xyz-cand:hover { border-color: var(--accent); background: rgba(255,255,255,0.04); }
.board-xyz-cand-rank {
  font-size: 11px; color: var(--text-tertiary); font-weight: 600;
  min-width: 32px; font-variant-numeric: tabular-nums;
}
.board-xyz-cand-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-xyz-cand-name {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-xyz-cand-artist {
  font-size: 11px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-xyz-cand-go {
  font-size: 11px; color: var(--text-tertiary);
}


/* ---- Daily Brief card on /feed/following ------------------------------ */
/* Dark-only site — uses --accent / --text / --text-secondary / --border    */
/* directly. No fallbacks needed.                                            */
.brief-card {
  margin: .5rem .75rem .75rem;
  padding: .55rem .9rem .65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}
.brief-card-head {
  display: flex; align-items: baseline; gap: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .45rem;
}
.brief-card-title {
  font-weight: 600; font-size: 13px;
  letter-spacing: .02em;
  color: var(--text);
}
.brief-card-date {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.brief-card-link {
  margin-left: auto; font-size: 12px;
  color: var(--accent); text-decoration: none;
}
.brief-card-link:hover { color: var(--accent-soft); }
.brief-card-list {
  list-style: none;
  margin: 0; padding: 0;
}
.brief-card-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .6rem;
  padding: .42rem 0;
  font-size: 13.5px; line-height: 1.5;
}
.brief-card-source { font-size: 11.5px; }
.brief-card-why {
  flex-basis: 100%;
  margin-left: 3.4em;  /* badge width + gap */
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.brief-card-item + .brief-card-item {
  border-top: 1px solid var(--border);
}
.brief-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 3px;
  min-width: 2.8em; text-align: center;
  white-space: nowrap;
  text-transform: none;
}
/* Use the site's own accent / success tokens so badges sit in the same */
/* palette as the rest of the dark UI.                                  */
.brief-badge-strategic {
  background: var(--accent-glow);
  color: var(--accent-soft);
  border: 1px solid var(--border-accent);
}
.brief-badge-actionable {
  background: rgba(52, 211, 153, 0.08);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.18);
}
.brief-card-headline {
  color: var(--text);
  text-decoration: none;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.brief-card-headline:hover {
  color: var(--accent);
}
.brief-card-empty {
  font-size: 12.5px; color: var(--text-tertiary);
  padding: .2rem 0;
}
.brief-card-empty a { color: var(--accent); }

/* ---- Full brief page (/brief/YYYY-MM-DD) ------------------------------ */
.brief-page { max-width: 760px; margin: 0 auto; padding: 0 1rem 3rem; }
.brief-page-header {
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 1.25rem 0 1.5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.brief-page-date { font-size: 1.35rem; font-weight: 600; color: var(--text); }
.brief-page-gen { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.brief-page-nav { margin-left: auto; font-size: 12px; display: flex; gap: .9rem; align-items: center; }
.brief-page-nav a { color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.brief-page-nav a:hover { color: var(--accent-soft); }

.brief-section { margin-bottom: 1.8rem; }
.brief-section-title {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin: 0 0 .6rem;
}
.brief-section-narrative { margin-top: 2.2rem; }

.brief-empty {
  margin: 3rem auto; padding: 2rem;
  text-align: center; font-size: 14px;
  color: var(--text-tertiary);
}
.brief-empty code {
  display: inline-block;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.brief-body { color: var(--text); font-size: 15px; }
.brief-body h2 {
  font-size: 1.05rem; margin: 1.8rem 0 .5rem;
  color: var(--text); font-weight: 600;
}
.brief-body h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--text-secondary); }
.brief-body p { line-height: 1.85; margin: .8rem 0; color: var(--text); }
.brief-body ul { margin: .6rem 0; padding-left: 1.4rem; }
.brief-body li { margin: .25rem 0; line-height: 1.7; color: var(--text-secondary); }
.brief-body strong { color: var(--text); }
.brief-body hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 2rem 0 1rem;
}
.brief-body a { color: var(--accent); text-decoration: none; }
.brief-body a:hover { color: var(--accent-soft); text-decoration: underline; }

/* ── User highlights (iBooks-style) ───────────────────────────────── */
mark.user-hl {
  background: rgba(255, 214, 102, 0.28);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease;
}
mark.user-hl:hover { background: rgba(255, 214, 102, 0.42); }
mark.user-hl.hl-yellow { background: rgba(255, 214, 102, 0.28); }
mark.user-hl.hl-yellow:hover { background: rgba(255, 214, 102, 0.45); }
mark.user-hl.hl-green { background: rgba(120, 220, 160, 0.28); }
mark.user-hl.hl-green:hover { background: rgba(120, 220, 160, 0.45); }
mark.user-hl.hl-blue { background: rgba(120, 180, 255, 0.28); }
mark.user-hl.hl-blue:hover { background: rgba(120, 180, 255, 0.45); }
mark.user-hl.hl-pink { background: rgba(255, 150, 200, 0.28); }
mark.user-hl.hl-pink:hover { background: rgba(255, 150, 200, 0.45); }

@keyframes hlFlash {
  0%   { box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.0); }
  20%  { box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.55); }
  100% { box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.0); }
}
mark.user-hl.hl-flash { animation: hlFlash 1.8s ease; }

.hl-popover {
  position: absolute;
  z-index: 1000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  padding: 4px;
}
.hl-pop-btn {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 0.85rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.hl-pop-btn:hover { background: var(--accent-soft); color: #000; }
.hl-pop-btn:disabled { opacity: 0.6; cursor: wait; }

/* ── /highlights index page ───────────────────────────────────────── */
.highlights-page { max-width: 800px; margin: 0 auto; padding: 1rem; }
.highlights-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 1rem 0 1.4rem;
}
.highlights-title { font-size: 1.4rem; margin: 0; color: var(--text); }
.highlights-meta { font-size: 0.85rem; }
.highlights-empty {
  padding: 2rem; text-align: center; border: 1px dashed var(--border);
  border-radius: 8px; margin-top: 2rem;
}
.highlights-empty a { color: var(--accent); }
.highlights-list { list-style: none; padding: 0; margin: 0; }
.highlight-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  background: var(--card);
}
.highlight-snippet {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid rgba(255, 214, 102, 0.6);
  background: rgba(255, 214, 102, 0.06);
  border-radius: 0 4px 4px 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
}
.highlight-snippet.hl-green { border-left-color: rgba(120, 220, 160, 0.6); background: rgba(120, 220, 160, 0.06); }
.highlight-snippet.hl-blue  { border-left-color: rgba(120, 180, 255, 0.6); background: rgba(120, 180, 255, 0.06); }
.highlight-snippet.hl-pink  { border-left-color: rgba(255, 150, 200, 0.6); background: rgba(255, 150, 200, 0.06); }
.highlight-meta {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: var(--text-tertiary);
  flex-wrap: wrap;
}
.highlight-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.highlight-link:hover { text-decoration: underline; }
.highlight-delete {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.4rem;
  border-radius: 4px;
}
.highlight-delete:hover { color: #ff7676; background: rgba(255,118,118,0.08); }