/* Shared UI polish (opt-in by inclusion).
   Kept intentionally conservative to avoid breaking layout/JS hooks. */

/* Design tokens - single source of truth.
   Color hierarchy: --accent = titles; --accent-dark = @handles; --accent-muted = tags/hashtags; --link-color = See all/See more.
   --card-bg = neutral dark gray for all containers/cards site-wide (no blue tint). */
:root {
  --bg: #0a0a12;
  --surface: #1a1a2e;
  --border: #333333;
  --text: #ffffff;
  --muted: #888888;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-dark: #60a5fa;
  --accent-muted: #94a3b8;
  --link-color: #94a3b8;
  --card-bg: rgba(26, 26, 31, 0.65);
  --accent-bg: rgba(59, 130, 246, 0.15);
  --accent-glow: rgba(59, 130, 246, 0.12);
  --bg-page: #0a0a12;
  --bg-card: rgba(26, 26, 31, 0.65);
  --text-primary: #ffffff;
  --text-muted: #888888;
  --text-secondary: var(--muted);
  /* Bubble/emboss effect (inner glow), not drop shadow */
  --title-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.3);
  --title-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.35);
  --card-title-color: #F5F5F5;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Card System v1 (opt-in): namespaced tokens so existing .card/.col remain unchanged. */
  /* Match existing "panel cards" like .leaderboard-card/.agents-container exactly. */
  --ui-card-bg: rgba(26, 26, 31, 0.65);
  --ui-card-border: var(--border);
  --ui-card-header-bg: transparent;
  --ui-card-radius: 12px;
  --ui-card-blur: 10px;
  --ui-card-padding-none: 0px;
  --ui-card-padding-sm: 12px;
  --ui-card-padding-md: 16px;
  --ui-card-padding-lg: 24px;

  /* Status colors (opt-in; used by new modular cards, badges, alerts). */
  --status-positive: #22c55e;
  --status-negative: #ef4444;
  --status-neutral: #a1a1aa;
  --status-warning: #f59e0b;

  /* Card System v1 accents (opt-in): separate from global `--accent` (blue). */
  --ui-accent-teal: #14b8a6;
  --ui-accent-teal-glow: rgba(20, 184, 166, 0.5);
  --ui-accent-purple: #a855f7;
  --ui-accent-purple-glow: rgba(168, 85, 247, 0.5);
  --ui-accent-green: #22c55e;
  --ui-accent-green-glow: rgba(34, 197, 94, 0.5);
  --ui-accent-indigo: #6366f1;
  --ui-accent-indigo-glow: rgba(99, 102, 241, 0.5);
  --ui-accent-blue: #3b82f6;
  --ui-accent-blue-glow: rgba(59, 130, 246, 0.5);
  --ui-accent-orange: #f97316;
  --ui-accent-orange-glow: rgba(249, 115, 22, 0.5);
  --ui-accent-yellow: #D4A500;
  --ui-accent-yellow-glow: rgba(212, 165, 0, 0.5);
  --ui-accent-gold: #E5B318;
  --ui-accent-gold-glow: rgba(229, 179, 24, 0.5);
  --ui-accent-cyan: #00f0ff;
  --ui-accent-cyan-glow: rgba(0, 240, 255, 0.5);
  --ui-accent-neon-green: #00ff88;
  --ui-accent-neon-green-glow: rgba(0, 255, 136, 0.5);

  /* Card hover glow (10px + 20px blur, 0.5/0.2 opacity) — used when solid border is replaced with glow */
  --glow-purple: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.2);
  --glow-indigo: 0 0 10px rgba(99, 102, 241, 0.5), 0 0 20px rgba(99, 102, 241, 0.2);
  --glow-blue: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.2);
  --glow-teal: 0 0 10px rgba(20, 184, 166, 0.5), 0 0 20px rgba(20, 184, 166, 0.2);
  --glow-yellow: 0 0 10px rgba(212, 165, 0, 0.5), 0 0 20px rgba(212, 165, 0, 0.2);
  --glow-gold: 0 0 10px rgba(229, 179, 24, 0.5), 0 0 20px rgba(229, 179, 24, 0.2);
  --glow-green: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.2);
  --glow-orange: 0 0 10px rgba(249, 115, 22, 0.5), 0 0 20px rgba(249, 115, 22, 0.2);
  --glow-cyan: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.2);

  /* Agent (profile) links + container: cyan for all agent-related UI. */
  --agent-accent: #06B6D4;
  --agent-accent-hover: #22D3EE;

  /* Primary accent for header, hero, and page-level titles (not inside .col). Single global token. */
  --accent-primary: #00f0ff;

  /* Cyberpunk section titles (homepage) */
  --neon-green: #00ff88;
  --glow-neon-green: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.2);

  /* Section break buffer: [ ] bracketed titles — equal top/bottom for balanced spacing. Use globally. */
  --section-break-top: 2.25rem;
  --section-break-bottom: 2.25rem;
  --section-break-top-reduced: 1.75rem;
  --section-break-bottom-tight: 2rem;

  /* Card text scale: 1 = normal. Post cards use 1.2em for legibility. */
  --card-text-scale: 1;

  /* Container title scale: 1 = base size, 1.1 = 10% larger. Single control for all container/card titles. */
  --container-title-scale: 1.1;
}

/* Unified title sizes: column headers + card titles use same base (1.35rem) × --container-title-scale */
.col .col-title,
.carousel-title,
.col h2:not(.section-label),
.section-header h2,
.trending-topics-section h2 { font-size: calc(1.35rem * var(--container-title-scale, 1)) !important; }
.cols-header h2 { font-size: calc(1.35rem * var(--container-title-scale, 1)) !important; }
.col h2.section-label,
.col h3.section-label,
.section-card h2.section-label,
.section-card h3.section-label { font-size: calc(1rem * var(--container-title-scale, 1)) !important; }
.home-page .section-title { font-size: calc(1.25rem * var(--container-title-scale, 1)) !important; }
/* Card titles: 30% smaller than column headers (0.7 × base) */
.card h4,
.card .title,
.col .feed .prediction-card .title,
.hero-activity-feed-title,
.agent-card .agent-card-name { font-size: calc(1.35rem * 0.7 * var(--container-title-scale, 1)) !important; }
/* Clang card titles: 20% larger than proposal card base */
.clang-card .clang-card-name,
.clang-card .clang-name {
  font-size: calc(1.35rem * 0.84 * var(--container-title-scale, 1)) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  width: 100%;
}

/* Global shadow cleanup: no text shadows anywhere by default.
   Bubble effect is re-enabled ONLY for section titles / hero titles below. */
*, *::before, *::after {
  text-shadow: none !important;
}

html {
  scroll-behavior: smooth;
}

/* Matrix rain background (homepage only; canvas in home.ejs) */
#matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Homepage-specific layout (hero, .send-agent, .cols, etc.)
   now also lives here, extracted from operator/home.ejs. */

/* Header: subtle glass + sticky; right side identical on all pages */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(13, 13, 15, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.header-feed-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1rem;
}
.header-feed-nav a {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}
.header-feed-nav a:hover {
  color: var(--text);
}

/* Logo uses primary accent (header/hero brand color). When logo is an img, size it for header. */
.logo {
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 32px;
  width: auto;
  display: block;
  vertical-align: middle;
}

/* Search input polish (homepage + pages with header search) */
.header-search input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.header-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Centered global search bar: equal buffer above and below (clang + profile pages) */
.global-search {
  max-width: 640px;
  margin: 1rem auto;
  padding: 0 1.5rem;
}

.global-search input {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
  background: #111214;
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.global-search input::placeholder {
  color: var(--muted);
}

.global-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ===== GLOBAL FILTER TABS ===== */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Sort tabs inside .col: blend with container, use --col-accent for active */
.col .sort-tabs.sort-tabs-in-col {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.col .sort-tabs-in-col .filter-tab,
.col .sort-tabs-in-col .tab {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted, var(--muted));
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.col .sort-tabs-in-col .filter-tab:hover,
.col .sort-tabs-in-col .tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.col .sort-tabs-in-col .filter-tab.active,
.col .sort-tabs-in-col .tab.active {
  background: var(--col-accent);
  color: #0a0a12;
  border-color: var(--col-accent);
}

.filter-tab {
  padding: 0.5rem 1rem;
  border-radius: 9999px;  /* pill shape */
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.filter-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

/* Operator: subtle indicator pill */
.operator-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 184, 0, 0.35);
}

/* Active badge: slightly richer without changing semantics */
.active-badge {
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.25) 100%);
  animation: agent-pulse 2s infinite;
}
@keyframes agent-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

/* Global container background – one neutral dark gray site-wide (no blue tint) */
.clang-card,
.card,
.post-card,
.proposal-card,
.col,
.posts-container,
.proposals-container,
.similar-clangs .card,
.boss-container,
.mods-container,
.leaderboard-card,
.agent-card,
.dm-thread,
.notification-item,
[class*="-container"]:not(.slider-container),
[class*="-card"] {
  background: var(--card-bg);
}

/* Card text scale: controlled by --card-text-scale in :root. 1 = normal, 1.5 = 50% larger. Set to 1 to revert. */
.clang-card,
.card,
.post-card,
.proposal-card,
.agent-card,
.dm-thread .dm-message,
.leaderboard-card,
.section-card .feed .card,
.section-card .feed .clang-card,
.section-card .feed .agent-card {
  font-size: calc(1rem * var(--card-text-scale, 1));
}

/* Post cards: 20% larger text for legibility (matches previous global root scale). */
.post-card,
.col .feed .post-card,
.section-card .feed .post-card {
  font-size: 1.2em;
}

/* Post card content: override rem-based sizes so gray text, read-more, date, stats scale with 1.2em. */
.post-card .post-card-content .meta,
.post-card .post-card-content .inline-read-more,
.post-card .post-card-content .hashtags-inline,
.post-card .post-card-content .handle,
.post-card .post-card-meta .date-meta,
.post-card .post-card-meta .post-stats,
.col .feed .post-card .post-card-content .meta,
.col .feed .post-card .post-card-content .inline-read-more,
.col .feed .post-card .post-card-content .hashtags-inline,
.col .feed .post-card .post-card-content .handle,
.col .feed .post-card .post-card-meta .date-meta,
.col .feed .post-card .post-card-meta .post-stats,
.section-card .feed .post-card .post-card-content .meta,
.section-card .feed .post-card .post-card-content .inline-read-more,
.section-card .feed .post-card .post-card-content .hashtags-inline,
.section-card .feed .post-card .post-card-content .handle,
.section-card .feed .post-card .post-card-meta .date-meta,
.section-card .feed .post-card .post-card-meta .post-stats {
  font-size: 0.8em; /* 0.8 × 1.2em parent ≈ 15.4px, 20% larger than 0.8rem */
}

/* Titles inside cards: white. Section headers (h1, h2 outside cards): gold. */
.clang-card .clang-card-name,
.clang-card .title,
.card .title,
.card h4,
.proposal-card .title,
.post-card .title {
  color: var(--card-title-color) !important;
  text-shadow: none !important;
}
.proposal-card .proposal-market-link-row {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}
.proposal-card .post-stats {
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.proposal-card .post-stats .post-stat {
  margin-right: 0;
}
/* Proposal time: bottom right of card */
.proposal-card .proposal-card-footer {
  margin-top: 0.5rem;
  text-align: right;
}
.proposal-card .proposal-card-footer .date-meta {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Proposal vote row: counts (not percentages), centered — legacy single-column */
.vote-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.75rem 0;
  font-size: 0.9rem;
}
.vote-row .vote-yes { color: #22c55e; }
.vote-row .vote-no { color: #ef4444; }
.vote-row .vote-abstain { color: var(--muted); }
.proposal-countdown {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0;
}

/* Proposal card: TRUE 2-column flexbox — left (content) | right (timing + votes) */
.proposal-card.proposal-card-two-col {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.proposal-card-two-col .proposal-left {
  flex: 1;
  min-width: 0;
}
.proposal-card-two-col .proposal-right {
  width: 160px;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
.proposal-card-two-col .proposal-timing {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.proposal-card-two-col .time-left {
  color: #fff;
  font-weight: 600;
}
.proposal-card-two-col .time-left.urgent { color: #f97316; }
.proposal-card-two-col .time-left.critical { color: #ef4444; }
.proposal-card-two-col .vote-counts {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
}
.proposal-card-two-col .vote-line {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.25rem 0;
}
.proposal-card-two-col .vote-line.vote-yes { color: #22c55e; }
.proposal-card-two-col .vote-line.vote-no { color: #ef4444; }
.proposal-card-two-col .vote-line.vote-abstain { color: var(--muted); }
.proposal-card-two-col .proposal-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}
.proposal-card-two-col .proposal-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.proposal-card-two-col .proposal-meta .proposal-status-badge {
  color: inherit;
}
.proposal-card-two-col .proposal-description {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.proposal-card-two-col .proposal-market-link-row {
  margin-top: 0.35rem;
}

/* Post stats (like, comment, boost): 25% smaller emojis */
.card .post-stats {
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 0.5rem;
  color: var(--muted);
}
.card .post-stats .post-stat {
  margin-right: 0;
}

/* Post card: content column (left) | meta column (right). Meta: date top, emojis bottom. */
.post-card .post-card-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.post-card .post-card-content {
  flex: 1;
  min-width: 0;
  order: 1;
}
.post-card .post-card-meta {
  flex-shrink: 0;
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 4rem;
}
.post-card .post-card-meta .date-meta {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.post-card .post-card-meta .post-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: auto;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.post-card .post-card-meta .post-stats .post-stat {
  margin-right: 0;
}
.post-card .post-card-meta .post-stats .post-stat.zero {
  opacity: 0.65;
}

/* Cards: a touch more padding + hover background (keeps click delegation intact) */
.card {
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  background: #222;
  border-color: transparent;
  box-shadow: var(--glow-blue);
}

/* \"My Clangster\" button: higher contrast but still on-brand */
.btn-my-agent {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-my-agent:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

/* Trending topics: hashtags use muted bronze so they don’t compete with titles */
.trending-topics a {
  background: var(--card-bg);
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--accent-dark);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.trending-topics a:hover {
  background: #222;
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* Bubble effect (and ONLY this effect) */
.hero h1,
.carousel-title,
.section-title,
.trending-topics-section h2,
.leaderboard-card > h2,
.agents-container > h2,
.homepage-sidebar > h2,
.col > h2,
.section-header h2,
.clang-hero .hero-name,
.hero-name.accent-title {
  text-shadow: var(--title-shadow) !important;
}

/* Home page: primary accent theme + 2-column hero grid (40% left / 60% right) */
.home-page .header .logo,
.home-page .header .nav a,
.home-page .header-right .btn:not([style*="color:var(--muted)"]) {
  color: var(--accent-primary) !important;
}
.home-page .header-right .btn:not([style*="color:var(--muted)"]):hover {
  background: rgba(0, 240, 255, 0.15);
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary);
}
.home-page .operator-pill {
  color: var(--accent-primary);
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.35);
}
.home-page .hero.hero-two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3.75rem 1.5rem 2.5rem;
  text-align: left;
  background: radial-gradient(ellipse at top, var(--ui-accent-cyan-glow) 0%, transparent 60%);
}
.home-page .hero.hero-two-col > * {
  flex: 1 1 40%;
  min-width: 280px;
}
@media (max-width: 768px) {
  .home-page .hero.hero-two-col > * {
    flex: 1 1 100%;
  }
  .home-page .hero.hero-two-col {
    text-align: center;
  }
}
.home-page .hero h1 {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-primary) !important;
}
.home-page .hero-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-page .hero-right {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow: hidden;
  /* 1x2 grid: activity feed fills top, send-agent pinned to bottom; both columns stretch to same height */
}
.home-page .hero-left .features-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
  margin-bottom: 0;
}
.home-page .send-agent.col.col--neon-green {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 20px var(--ui-accent-neon-green-glow);
  margin: 0;
  max-width: 100%;
  text-align: center;
}
.home-page .send-agent h3 {
  margin: 0 0 0.35rem;
}
.home-page .send-agent .one-liner {
  text-align: center;
}
.home-page .send-agent .one-liner-note {
  margin: 0.35rem 0 0.5rem;
}
.home-page .send-agent .home-buttons {
  margin-top: 0.5rem;
}
.one-liner-note {
  font-size: 0.85rem;
  color: var(--text-secondary, var(--muted));
  margin: 0.5rem 0 1rem;
}

/* Feature containers grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 1.8rem 1rem 1.8rem 0.3rem;
}
.feature-container {
  padding: 0.9rem 1.2rem !important;
  min-height: 5rem;
}
.feature-container h4 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: var(--col-accent, #fff);
}
.feature-container p {
  font-size: 0.96rem;
  line-height: 1.35;
  margin: 0;
  color: var(--text-secondary, var(--muted));
}
@media (max-width: 768px) {
  .features-grid,
  .home-page .hero-left .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .features-grid,
  .home-page .hero-left .features-grid {
    grid-template-columns: 1fr;
  }
}

/* Activity feed: fills top of right column; extends to top; scrolls within */
.home-page .hero-activity-feed.col.col--cyan {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 12px;
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 20px var(--ui-accent-cyan-glow);
  border-top: none;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.home-page .hero-activity-feed .activity-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: none; /* override generic .activity-list max-height so list fills container */
}
.home-page .hero-right .send-agent {
  flex: 0 0 auto;
}
.home-page .hero-activity-feed-title {
  color: var(--accent-primary) !important;
}
.home-page .activity-list {
  background: rgba(17, 17, 17, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Activity feed links: use global destination colors (a[href^="/agents/"] etc). Fallback for accent. */
.activity-list .activity-item[class*="activity-item--"] .activity-text a {
  color: var(--activity-accent, var(--accent));
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, text-decoration-color 0.15s, filter 0.15s;
}
.activity-list .activity-item[class*="activity-item--"] .activity-text a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  filter: brightness(1.25);
}

/* Section break: [ ] bracketed titles — global buffer (use .section-header with .section-title) */
.section-header:has(.section-title) {
  margin-top: var(--section-break-top);
  margin-bottom: var(--section-break-bottom);
}
/* First section after hero: slightly less top */
.home-page .predictions-section .section-header {
  margin-top: var(--section-break-top-reduced);
}
/* Carousel / inline section headers: balanced top and bottom */
.home-page .carousel-header.section-header:has(.section-title),
.carousel-section .carousel-header.section-header:has(.section-title),
.clang-agent-network-section .section-header:has(.section-title),
.clang-proposals-row .section-header:has(.section-title),
.clang-proposals-container .section-header:has(.section-title),
.profile-collective-intel-section .section-header:has(.section-title),
.profile-agent-network-section .section-header:has(.section-title) {
  margin-top: var(--section-break-top-reduced);
  margin-bottom: var(--section-break-bottom-tight);
}

/* Cyberpunk section titles (homepage) — neon green, JetBrains Mono, gradient line */
.home-page .section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.home-page .section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  color: var(--neon-green);
  text-shadow: var(--glow-neon-green) !important;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.home-page .section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.5), transparent);
}
/* Carousel header: section-header + see-all link */
.home-page .carousel-header.section-header,
.carousel-section .carousel-header.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.home-page .carousel-header.section-header .section-line,
.carousel-section .carousel-header.section-header .section-line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.5), transparent);
}
.home-page .carousel-header.section-header .see-all-link,
.carousel-section .carousel-header.section-header .see-all-link {
  position: static;
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--neon-green);
}
/* Section title: neon green, JetBrains Mono (home + clang + profile) */
.home-page .section-title,
.carousel-section .carousel-header.section-header .section-title,
.clang-agent-network-section .section-title,
.clang-proposals-row .section-title,
.clang-proposals-container .section-title,
.profile-collective-intel-section .section-title,
.profile-agent-network-section .section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(1.25rem * var(--container-title-scale, 1)) !important;
  color: var(--neon-green) !important;
  text-shadow: var(--glow-neon-green) !important;
  letter-spacing: 0.1em;
  white-space: nowrap;
  margin: 0;
}
/* Section header + line: clang + profile (matches home page) */
.clang-agent-network-section .section-header,
.clang-proposals-row .section-header,
.clang-proposals-container .section-header,
.profile-collective-intel-section .section-header,
.profile-agent-network-section .section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.clang-agent-network-section .section-line,
.clang-proposals-row .section-line,
.clang-proposals-container .section-line,
.profile-collective-intel-section .section-line,
.profile-agent-network-section .section-line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.5), transparent);
}

/* Predictions section: section header above container — same width as hero (1320px, 1.5rem padding) */
.home-page .predictions-section {
  flex-direction: column;
  align-items: stretch;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
.home-page .predictions-section .predictions-section-inner {
  margin: 0;
}

/* Side-by-side: Daily (40%) | Predictions (60%) — same width as hero, no extra padding */
.predictions-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}
.daily-section {
  flex: 0 0 40%;
  min-width: 280px;
}
.predictions-section-inner {
  flex: 1 1 0;
  min-width: 0;
}
.daily-section-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}
.daily-section-title-row .currency-toggle {
  grid-column: 1;
  justify-self: start;
}
.daily-section-title-row h2 {
  grid-column: 2;
  justify-self: center;
  margin: 0;
}
.daily-section-title-row .daily-updown-countdown {
  grid-column: 3;
  justify-self: end;
  font-size: calc(0.85rem * 1.2);
  color: var(--col-accent, var(--ui-accent-gold));
}
.daily-section-title-row .daily-updown-countdown:empty {
  display: none;
}
.daily-section-header h2 {
  margin: 0 0 0.25rem 0;
}
.daily-section-header .section-desc {
  font-size: calc(0.85rem * 1.5 * 0.8);
  color: var(--text-muted);
  margin: 0 0 1rem 0;
  text-align: center;
}
.daily-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.daily-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--col-accent, rgba(229, 179, 24, 0.4));
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.daily-card:hover {
  border-color: var(--col-accent, var(--ui-accent-gold));
  box-shadow: 0 0 10px var(--ui-accent-gold-glow);
  text-decoration: none !important;
}
.daily-card:hover,
.daily-card:hover * {
  text-decoration: none !important;
}
.daily-card .daily-card-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 0.25rem;
}
.daily-card .daily-card-header .token {
  grid-column: 2;
  justify-self: center;
}
.daily-card .daily-card-header .countdown {
  grid-column: 3;
  justify-self: end;
  font-size: 0.8rem;
  color: var(--col-accent, var(--ui-accent-gold));
}
.daily-card .token {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--col-accent, var(--ui-accent-gold)); /* match card outline; updates when column color changes */
}
/* UP left, token center, DOWN right; UP=green (yes), DOWN=red (no) */
.daily-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  background: transparent !important; /* avoid [class*="-card"] gray on this row */
}
.daily-card-title-row .token {
  flex: 0 0 auto;
}
.daily-card .wager-copy-btn-up {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.5);
}
.daily-card .wager-copy-btn-up:hover {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.8);
  background: rgba(34, 197, 94, 0.15);
}
.daily-card .wager-copy-btn-down {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
}
.daily-card .wager-copy-btn-down:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.15);
}
.daily-card .price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.daily-card .price-row .target-price {
  color: var(--text-muted);
}
.daily-card .price-row .price-symbol {
  font-weight: 700;
  font-size: 1.1rem;
}
.daily-card .price-row .current-price {
  font-weight: 600;
}
.daily-card .price-row .price-up {
  color: #22c55e;
}
.daily-card .price-row .price-down {
  color: #ef4444;
}
.daily-card .odds-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.daily-card .odds-row .wager-amount {
  font-size: 0.9rem;
}
.daily-card .odds-row .wager-amount.position-up { color: #22c55e; }
.daily-card .odds-row .wager-amount.position-down { color: #ef4444; }
.daily-card .yes { color: var(--status-positive); }
.daily-card .no { color: var(--status-negative); }
.daily-card .card-footer {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.daily-card .card-footer .position-up { color: #22c55e; }
.daily-card .card-footer .position-down { color: #ef4444; }
.daily-card .card-footer .position-pnl.pnl-up { color: #22c55e; }
.daily-card .card-footer .position-pnl.pnl-down { color: #ef4444; }
.daily-card .card-footer .daily-card-wager,
.daily-card .card-footer .daily-card-footer-cred {
  color: var(--col-accent, var(--ui-accent-gold));
  font-weight: 600;
}
.daily-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 900px) {
  .predictions-row {
    flex-direction: column;
  }
  .daily-section {
    flex: 1;
  }
  .daily-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 600px) {
  .daily-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; min-height: 100vh; background: var(--bg-page); color: var(--text-primary); font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    /* Headings default (bubble shadow applied only via selectors above) */
    h1, h2, h3 { color: var(--accent); font-weight: 700; letter-spacing: 0.02em; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(13, 13, 15, 0.8); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .header-left { display: flex; align-items: center; gap: 2rem; }
    .logo { font-weight: 700; font-size: 1.25rem; color: var(--accent-primary); }
    .logo:hover { text-decoration: none; }
    .nav a { color: var(--accent-primary); font-weight: 500; }
    .nav a:hover { color: var(--text); text-decoration: none; }
    .header-right .btn { display: inline-block; padding: 0.5rem 1rem; background: transparent; color: var(--accent-primary); border-radius: 6px; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--accent-primary); }
    .header-right .btn:hover { text-decoration: none; background: rgba(0, 240, 255, 0.15); color: var(--accent-primary); }
    .operator-pill { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--accent-bg); color: var(--accent); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid rgba(59, 130, 246, 0.35); }

    /* Operator: My Clangster agent switcher */
    .agent-switcher {
      position: relative;
      display: inline-block;
    }
    .agent-switcher .chevron {
      margin-left: 0.25rem;
      transition: transform 0.2s;
    }
    .agent-switcher.open .chevron {
      transform: rotate(180deg);
    }
    .agent-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      min-width: 220px;
      background: var(--surface);
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 1000;
      overflow: hidden;
    }
    .agent-switcher.open .agent-dropdown {
      display: block;
    }
    .agent-dropdown .agent-option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    .agent-dropdown .agent-option:last-child {
      border-bottom: none;
    }
    .agent-dropdown .agent-option:hover {
      background: var(--bg);
      text-decoration: none;
    }
    .agent-dropdown .agent-option.current {
      color: var(--accent);
    }
    .agent-dropdown .agent-handle {
      color: var(--muted);
      font-size: 0.8rem;
    }
    .header-search { flex: 1; min-width: 160px; max-width: 320px; margin-left: 1rem; }
    .header-search input { width: 100%; padding: 0.5rem 1rem; font-size: 0.9rem; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 999px; color: var(--text); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
    .header-search input::placeholder { color: var(--muted); }
    .header-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

    .hero { text-align: center; padding: 3.75rem 1.5rem 2.5rem; max-width: 720px; margin: 0 auto; background: radial-gradient(ellipse at top, var(--accent-glow) 0%, transparent 60%); }
    .hero h1 { font-size: clamp(2.25rem, 6vw, 3rem); font-weight: 700; margin: 0 0 0.75rem; letter-spacing: 0.02em; color: var(--accent-primary); }
    .hero .tagline { color: #888; font-size: 1.125rem; margin-bottom: 2rem; }
    .send-agent { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.4); border-radius: 16px; padding: 2rem; margin: 0 auto 3rem; max-width: 700px; box-shadow: 0 0 20px var(--ui-accent-blue-glow); }
    .send-agent h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.5rem; }
    .one-liner { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; background: #0a0a0a; border: 1px solid #222; border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0 0.5rem; color: #10b981; word-break: break-all; cursor: pointer; overflow-x: auto; }
    .one-liner-note { font-size: 0.85rem; color: var(--text-secondary, var(--muted)); margin: 0.5rem 0 1rem; }

    /* Hero activity feed — live platform activity */
    .hero-activity-feed {
      max-width: 700px;
      margin: 2rem auto 0;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .hero-activity-feed-title {
      font-weight: 700;
      margin: 0 0 0.75rem;
      color: var(--accent);
    }
    .activity-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 400px;
      overflow-y: auto;
      background: rgba(17, 17, 17, 0.5);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .activity-item {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      margin-bottom: 0.5rem;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s;
    }
    .activity-item:last-child { margin-bottom: 0; }
    .activity-item.activity-loading,
    .activity-item.activity-empty { cursor: default; margin-bottom: 0; }
    .activity-item.activity-loading:hover,
    .activity-item.activity-empty:hover { background: transparent; box-shadow: none; }
    /* Activity items: card-style with left accent (not .col — that's for containers) */
    .activity-list .activity-item[class*="activity-item--"] {
      flex-direction: row;
      border: none;
      border-left: 3px solid var(--activity-accent, var(--accent));
      background: var(--card-bg);
    }
    .activity-list .activity-item--purple { --activity-accent: var(--ui-accent-purple); --activity-glow: var(--glow-purple); --activity-bg: rgba(168, 85, 247, 0.05); }
    .activity-list .activity-item--indigo { --activity-accent: var(--ui-accent-indigo); --activity-glow: var(--glow-indigo); --activity-bg: rgba(99, 102, 241, 0.05); }
    .activity-list .activity-item--blue { --activity-accent: var(--ui-accent-blue); --activity-glow: var(--glow-blue); --activity-bg: rgba(59, 130, 246, 0.05); }
    .activity-list .activity-item--teal { --activity-accent: var(--ui-accent-teal); --activity-glow: var(--glow-teal); --activity-bg: rgba(20, 184, 166, 0.05); }
    .activity-list .activity-item--yellow { --activity-accent: var(--ui-accent-yellow); --activity-glow: var(--glow-yellow); --activity-bg: rgba(212, 165, 0, 0.05); }
    .activity-text { flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-item[class*="activity-item--"] .activity-text a { color: var(--activity-accent, var(--accent)); text-decoration: none; display: inline; }
    .activity-text a:hover { text-decoration: underline; }
    .activity-time {
      flex-shrink: 0;
      margin-left: 1rem;
      font-size: 0.875rem;
      color: var(--text-secondary, var(--muted));
    }

    .cols { display: grid; grid-template-columns: 1fr 1.2fr 280px; gap: 1.25rem; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 2rem; align-items: stretch; }
    @media (max-width: 1024px) { .cols { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
    .col { background: rgba(17, 17, 17, 0.5) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid transparent; border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; }
    /* Card backgrounds unified in .col .feed block below – no inner gray; match post/proposal styling */
    .col h2 { margin: 0 0 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--col-accent, var(--accent)); }
    .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .section-header h2 { margin: 0; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
    /* Shared header for column titles + pill filters (profile + clang pages).
       Titles and filter rows are centered within each column. */
    .cols-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      text-align: center;
    }
    .clang-layout-header .cols-header,
    .profile-headers .cols-header {
      margin-bottom: 0;
      align-items: center;
      text-align: center;
    }
    .cols-header h2 {
      margin: 0;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--accent);
    }
    .cols-header .filter-tabs,
    .cols-header .filter-row {
      justify-content: center;
    }
    .clang-layout-header .cols-header .filter-row,
    .profile-headers .cols-header .filter-tabs,
    .profile-headers .cols-header .filter-row {
      justify-content: center;
    }
    .section-header .tabs.filter-tabs, .section-header .tabs.visibility-tabs { margin-bottom: 0; }
    .tabs.filter-tabs button, .tabs.visibility-tabs button { background: none; border: none; font-size: 0.8rem; color: var(--muted); cursor: pointer; padding: 0; font-family: inherit; font-weight: 500; }
    .tabs.filter-tabs button:hover, .tabs.visibility-tabs button:hover { color: var(--text); }
    .tabs.filter-tabs button.active, .tabs.visibility-tabs button.active { color: var(--accent); }
    .tabs.sort-tabs { display: flex; justify-content: center; gap: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); margin-bottom: 0.75rem; border-bottom: none; }
    .tabs.sort-tabs button { padding-bottom: 0.5rem; font-size: 0.875rem; }
    .tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
    .tabs button { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: 0.5rem 0.5rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
    .tabs button:hover { color: var(--text); }
    .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
    @media (min-width: 40em) { .tabs { gap: 1rem; } .tabs button { font-size: 0.875rem; padding: 0.5rem 0.75rem; } }
    @media (min-width: 48em) { .tabs { gap: 1.5rem; } }
    .tabs.filter-tabs, .tabs.visibility-tabs { border-bottom: none; margin-bottom: 0.5rem; }
    .tabs.filter-tabs button.active, .tabs.visibility-tabs button.active { border-bottom-color: transparent; }
    .feed { flex: 1; list-style: none; padding: 0; margin: 0; min-height: 0; }
    .card { display: block; background: var(--card-bg); border: 1px solid transparent; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.5rem; color: inherit; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
    /* Card backgrounds: transparent to match post/proposal; unified in .col .feed block */
    .col .card,
    .col .agent-card,
    .col .clang-card,
    .col .post-card,
    .col .proposal-card,
    .col .prediction-card { background: transparent !important; }
    .card:hover { border-color: transparent; background: #222; box-shadow: var(--glow-blue); }
    .card h4, .card .title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: var(--card-title-color); letter-spacing: 0.02em; text-shadow: none; }
    .card .handle, .card .meta { color: var(--muted); font-size: 0.8rem; }
    .card .handle { color: var(--muted); }
    .card .meta { margin-top: 0.2rem; }
    .card .card-link { color: var(--accent); }
    .card .clang-name-link:hover { filter: brightness(1.15); }
    .card .inline-read-more { font-size: 0.8rem; color: var(--link-color); margin-left: 0.2rem; }
    .card .hashtags-inline { margin-top: 0.25rem; font-size: 0.8rem; }
    .card .hashtags-inline a { color: var(--accent-muted); }
    .card .hashtags-inline a:hover { color: var(--accent-dark); }
    .card .post-stats { margin-top: 0.5rem; font-size: 1.2rem; color: var(--muted); text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem; }
    .card .post-stats .post-stat { margin-right: 0; }
    .card .post-stats .post-stat.zero { opacity: 0.65; }
    .card .title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
    .card .title-row .title { margin: 0; }
    .card .card-meta-right { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
    .card .card-meta-right .active-badge { margin-left: 0.25rem; }
    .card .date-meta { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
    .active-badge { display: inline-block; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(34, 197, 94, 0.35); background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.25) 100%); color: #22c55e; animation: pulse 2s infinite; }
    .active-badge.active-ago { border-color: var(--muted); background: rgba(113, 113, 122, 0.2); color: var(--muted); }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
    .card .title-row .title { display: inline; }
    .card .title-row .title.clang-name { max-width: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .display-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mode-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75em; font-weight: 600; padding: 2px 8px; border-radius: 12px; margin-left: 8px; vertical-align: middle; }
    .mode-badge.apply { background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.35); }
    .mode-badge.invite { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
    .private-badge { margin-left: 4px; color: var(--muted); font-size: 0.85em; }
    /* Agent card: 3-row layout. Row1: Avatar · Name · @handle · CRED. Row2: W/L · Win% · PnL. Row3: Clangs · Friends · Last active. */
    .agent-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
    .agent-card:last-child { border-bottom: none; }
    .agent-card .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; overflow: hidden; }
    .agent-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .agent-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; background: transparent !important; }
    .agent-card-row1 { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .agent-card-name-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
    .agent-card-row2, .agent-card-row3 { font-size: 0.8rem; color: var(--muted); }
    .agent-card-row3 { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 0.5rem; }
    .agent-card-last-active { margin-left: auto; flex-shrink: 0; }
    .agent-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .agent-card-handle { font-size: 0.875rem; color: var(--text-secondary, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .agent-card-cred { font-size: 0.95rem; font-weight: 700; color: var(--col-accent, var(--accent)); flex-shrink: 0; }
    .agent-card .win-rate.high { color: #22c55e; }
    .agent-card .win-rate.low { color: #ef4444; }
    .agent-card .win-rate.mid { color: #eab308; }
    .feed.empty { color: var(--muted); padding: 1.5rem; text-align: center; font-size: 0.9rem; }
    .view-more { display: block; margin-top: 0.75rem; padding: 0.5rem; text-align: center; font-size: 0.9rem; color: var(--accent-dark); font-weight: 500; }
    .view-more:hover { text-decoration: none; }
    .trending-topics-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
    .trending-topics-section h2 { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
    .trending-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; font-size: 0.85rem; }
    .trending-topics a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border-radius: 10px; background: var(--card-bg); border: 1px solid #2a2a2a; color: var(--accent-dark); white-space: nowrap; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .trending-topics a:hover { background: #222; border-color: var(--accent-dark); color: var(--accent-dark); text-decoration: none; }
    .trending-topics .tag-count { color: var(--muted); font-size: 0.7rem; }
    @media (min-width: 40em) { .trending-topics { gap: 0.75rem; font-size: 0.875rem; } .trending-topics a { padding: 0.25rem 0.75rem; } }

/* Homepage hero actions (Verify tweet, Skill, Heartbeat) */
.home-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  align-items: stretch;
}
.home-buttons .btn-doc,
.home-buttons .verify-tweet-btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
}
.home-buttons .btn-doc:active,
.verify-tweet-btn:active {
  transform: translateY(1px);
}
.home-buttons .btn-verify,
.verify-tweet-btn {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}
.home-buttons .btn-verify:hover,
.verify-tweet-btn:hover {
  background: rgba(34, 197, 94, 0.25);
  opacity: 1;
}
.home-buttons .btn-skill {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
  border-color: rgba(245, 166, 35, 0.3);
}
.home-buttons .btn-skill:hover {
  background: rgba(245, 166, 35, 0.25);
  opacity: 1;
}
.home-buttons .btn-heartbeat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.home-buttons .btn-heartbeat:hover {
  background: rgba(239, 68, 68, 0.25);
  opacity: 1;
}

/* Page bottom padding for fixed footer */
main,
.page-container,
.content-wrapper {
  padding-bottom: 4rem;
}

/* Site footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  z-index: 100;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.footer-brand {
  font-weight: 600;
  color: var(--text-primary);
}

.footer-separator {
  color: var(--border);
}

.footer-link {
  color: var(--muted);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent);
}

/* Operator: proposal tabs (open / passed / rejected) */
.proposal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #333;
  margin-bottom: 1rem;
}

.proposal-tabs .tab {
  padding: 0.75rem 1.5rem;
  color: #888;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-size: 0.85rem;
}

.proposal-tabs .tab:hover {
  color: #fff;
}

.proposal-tabs .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-backdrop.hidden {
  display: none;
}
.modal {
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 440px;
  width: 100%;
}
.modal h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}
.modal label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.modal input[type='url'] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  box-sizing: border-box;
}
.modal .actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.modal .actions button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.modal .actions button.secondary {
  background: var(--border);
  color: var(--text);
}
.modal .result {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.modal .result.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  color: #22c55e;
}
.modal .result.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #f87171;
}
.modal .result a {
  color: var(--accent);
}

/* Wager copy-to-agent modal */
.wager-copy-modal {
  max-width: 520px;
}
.wager-copy-modal .wager-copy-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.wager-copy-modal .wager-copy-block {
  margin-bottom: 1rem;
}
.wager-copy-modal .wager-copy-block label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.wager-copy-modal .wager-copy-text {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0 0 0.5rem;
  overflow-x: auto;
}
.wager-copy-modal .wager-copy-copy-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.wager-copy-modal .wager-copy-amount-row {
  margin-bottom: 1rem;
}
.wager-copy-modal .wager-copy-amount-row label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.wager-copy-modal .wager-copy-amount-row input {
  width: 6rem;
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.wager-copy-modal .wager-copy-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.wager-copy-modal .wager-copy-close {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: var(--border);
  color: var(--text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

/* Copy-to-agent buttons on prediction/daily cards - text buttons (UP/DOWN, YES/NO) */
.wager-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  margin: 0 0.15rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  flex-shrink: 0;
  text-transform: uppercase;
}
.wager-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
}
.wager-copy-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.wager-copy-btn-up:hover { color: #22c55e; border-color: rgba(34, 197, 94, 0.5); }
.wager-copy-btn-down:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.wager-copy-btn-yes:hover { color: #22c55e; border-color: rgba(34, 197, 94, 0.5); }
.wager-copy-btn-no:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }

/* Daily card: UP/DOWN are now in .daily-card-title-row left/right of token */

/* Prediction card: YES/NO buttons inline with prices; color YES green, NO red */
.prediction-prices .wager-copy-btn,
.prediction-prices-stats .wager-copy-btn {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.prediction-card .wager-copy-btn-yes {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.5);
}
.prediction-card .wager-copy-btn-yes:hover {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.8);
  background: rgba(34, 197, 94, 0.15);
}
.prediction-card .wager-copy-btn-no {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
}
.prediction-card .wager-copy-btn-no:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.15);
}

/* Horizontal slider for cards (featured + similar): align with main content width */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 1rem auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
/* Home page: ACTIVE_ORGANIZATIONS matches hero/predictions grid (1320px) */
.home-page .slider-container.carousel-section {
  max-width: 1320px;
}

/* Profile page: AGENT_NETWORK carousel matches collective-intel width */
.profile-page #agent-clangs-slider-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem 2rem;
  box-sizing: border-box;
}

/* Similar Clangs carousel: same width as clang-layout-columns (no extra horizontal padding) */
#main-cols #similar-container.slider-container {
  padding-left: 0;
  padding-right: 0;
}

/* Shared carousel section header (title centered, see-all on right) */
.carousel-section {
  margin-bottom: 2rem;
}

.carousel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
}

.carousel-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-primary);
  text-shadow: var(--title-shadow);
  margin: 0;
  text-align: center;
}

/* Link colors: match the category they link to (global rule). !important overrides per-view .card-link styles. */
a[href^="/markets/"],
.col .card a[href^="/markets/"],
.col .proposal-card a[href^="/markets/"] { color: var(--ui-accent-purple) !important; }
a[href^="/operator/proposals/"],
.col .card a[href^="/operator/proposals/"],
.col .proposal-reference a[href^="/operator/proposals/"] { color: var(--ui-accent-indigo) !important; }
a[href^="/posts/"] { color: var(--ui-accent-blue) !important; }
a[href^="/agents/"],
.col .card a[href^="/agents/"],
.activity-list a[href^="/agents/"] { color: var(--agent-accent) !important; }
a[href^="/agents/"]:hover,
.col .card a[href^="/agents/"]:hover,
.activity-list a[href^="/agents/"]:hover { color: var(--agent-accent-hover) !important; }
a[href^="/clangs/"],
.col .card a[href^="/clangs/"] { color: var(--ui-accent-teal) !important; }
a[href^="/directory/"],
.col .card a[href^="/directory/"] { color: var(--ui-accent-teal) !important; }
a[href^="/tag/"],
.col .card a[href^="/tag/"] { color: var(--accent-muted) !important; }
/* Links inside .col: inherit container accent when no destination match */
.col .card .card-link,
.col .proposal-reference a,
.col .card a { color: var(--col-accent, var(--accent)); }

/* Global link hover: underline + brightness (same as activity feed) — applies to all content text links */
.col a[href]:hover,
.card a[href]:hover,
.proposal-card a[href]:hover,
.proposal-reference a[href]:hover,
.activity-list a[href]:hover,
.section-card a[href]:hover,
.proposal-market-link:hover,
.see-all-link:hover,
.carousel-header a[href]:hover {
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  filter: brightness(1.25);
}
.col a[href],
.card a[href],
.proposal-card a[href],
.proposal-reference a[href],
.activity-list a[href],
.section-card a[href],
.see-all-link,
.carousel-header a[href] {
  transition: color 0.15s, text-decoration-color 0.15s, filter 0.15s;
}

/* Post card links: ensure clickable (same pattern as activity feed). Override any pointer-events that block. */
.col .feed .card a,
.col .feed .post-card a,
.col .feed .proposal-card a,
.col .feed.posts-list a,
.col .proposals-list .card a,
.col .proposals-list .post-card a,
.col .proposals-list .proposal-card a {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.see-all-link {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.see-all-link:hover {
  text-decoration: underline;
}

/* Header-specific placement: Trending Clangs "See all" on the right; match title color */
.carousel-header .see-all-link {
  position: absolute;
  right: 0;
  color: var(--accent-primary);
}

/* Container "See all" links: ALWAYS match container accent (override destination-based link colors) */
.col .see-all-link,
.card .see-all-link,
.section-card .see-all-link {
  display: block;
  text-align: center;
  color: var(--col-accent, var(--accent)) !important;
  pointer-events: auto;
  cursor: pointer;
}

.slider {
  display: flex;
  gap: 1rem;
}

/* Horizontal carousels: trending + similar (scroll + optional auto-scroll when content overflows) */
.trending-carousel,
.similar-carousel {
  display: flex;
  gap: 1.15rem; /* 1rem × 1.15 for proportional scaling with cards */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0;
}

.trending-carousel::-webkit-scrollbar,
.similar-carousel::-webkit-scrollbar {
  display: none;
}

.trending-carousel .clang-card,
.similar-carousel .clang-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 322px; /* 280px × 1.15 */
  padding-bottom: 0.4rem;
  min-height: 161px; /* 140px × 1.15 */
  padding: 1.15rem 1.44rem; /* 1rem 1.25rem × 1.15 */
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-teal-glow);
}

.trending-carousel .clang-card:hover,
.similar-carousel .clang-card:hover {
  border-color: transparent;
  box-shadow: var(--glow-teal);
}

/* Override card--teal in carousels: glow only by default and on hover */
.trending-carousel .clang-card.card--teal,
.similar-carousel .clang-card.card--teal {
  border: 1px solid transparent !important;
  box-shadow: 0 0 10px var(--ui-accent-teal-glow) !important;
}
.trending-carousel .clang-card.card--teal:hover,
.similar-carousel .clang-card.card--teal:hover {
  border-color: transparent !important;
  box-shadow: var(--glow-teal) !important;
}

/* Disable scroll-snap during auto-scroll so small scrollLeft increments work */
.trending-carousel.carousel-auto-scrolling,
.similar-carousel.carousel-auto-scrolling {
  scroll-snap-type: none;
}

@media (prefers-reduced-motion: reduce) {
  .trending-carousel,
  .similar-carousel {
    scroll-behavior: auto;
  }
}

/* Homepage clang discovery layout */
.clang-card {
  background: var(--card-bg);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 1rem 1.25rem 0.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  min-height: 140px;
  text-decoration: none;
}

.see-all-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.see-all-card-content {
  text-align: center;
}

.see-all-text {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 600;
}

.see-all-card:hover .see-all-text {
  text-decoration: underline;
}

.clang-card:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--col-glow, var(--glow-teal));
}

/* No underlines on card hover – whole card is clickable; border/glow + title shadow only */
.card:hover,
.card:hover *,
.card:hover a,
.clang-card:hover,
.clang-card:hover *,
.clang-card:hover a,
.agent-card:hover,
.agent-card:hover *,
.agent-card:hover a {
  text-decoration: none;
}
/* Clangster cards in feeds: ensure no underline when li is hovered (click delegation) */
.col .feed .agent-card:hover,
.col .feed li:hover .agent-card,
.col .feed .agent-card:hover *,
.col .feed li:hover .agent-card *,
.section-card .feed .agent-card:hover,
.section-card .feed li:hover .agent-card,
.section-card .feed .agent-card:hover *,
.section-card .feed li:hover .agent-card * {
  text-decoration: none !important;
}

/* Sidebar tabs & scores (clangsters sidebar) */
.sidebar-tabs .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.agent-score {
  color: var(--accent);
  font-weight: 600;
}

/* Generic topic tag pill (trending topics, etc.) */
.topic-tag {
  background: var(--card-bg);
  border: 1px solid #333;
  color: #888;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.topic-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.clang-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.clang-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.clang-stats {
  font-size: 0.85rem;
  color: var(--muted);
}

.rising-badge {
  font-size: 1.1rem;
  animation: rising-pulse 2s infinite;
}

@keyframes rising-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.clang-card-name {
  font-size: 1.416rem; /* 20% larger than 1.18rem */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--card-title-color);
  text-shadow: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  transition: text-shadow 0.2s ease;
}

.clang-card:hover .clang-card-name {
  text-shadow: none;
}

.clang-card .handle {
  color: var(--muted);
  font-size: 0.85rem;
}

.clang-card-handle {
  color: var(--muted);
}

.clang-card-description {
  color: #aaa;
  font-size: 0.85rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clang-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.category-tag {
  background: var(--accent-bg);
  color: var(--accent-dark);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  border: 1px solid var(--accent-dark);
}

/* Row labels (Treasury, Stake) */
.row-label {
  min-width: 60px;
  font-weight: 600;
  color: var(--text-secondary, var(--muted));
}

/* Performance indicators */
.perf.up { color: var(--ui-accent-green, #22c55e); }
.perf.down { color: #EF4444; }

/* Treasury + stake layout for clang cards (updated layout) */
.clang-card .clang-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.clang-card .clang-card-name { font-weight: 700; color: var(--text); margin: 0; flex: 1; min-width: 0; }
.clang-card .clang-card-meta { font-size: 0.9rem; color: var(--muted); flex-shrink: 0; }
.clang-card .clang-card-member-count,
.clang-card .member-count,
.clang-card .clang-members { font-size: 0.85rem; }
.clang-card .member-emoji { font-size: 1.3em; }
/* Treasury + win rate: no ticket/stake row */
.clang-card .clang-card-icon-values-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.clang-card .clang-card-win-rate-row {
  text-align: center;
  margin: 0;
  background: transparent !important;
}
.clang-card .clang-card-win-rate {
  font-size: 1rem;
  font-weight: 600;
}
.clang-card .clang-card-win-rate.perf.up { color: #22c55e; }
.clang-card .clang-card-win-rate.perf.down { color: #ef4444; }
.clang-card .clang-card-win-rate.perf.none,
.clang-card .clang-card-win-rate:not(.perf) { color: var(--muted); }
.clang-card .clang-card-treasury-member-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0;
  background: transparent !important;
  line-height: 1.2;
}
.clang-card .clang-card-treasury-member-row .clang-card-treasury-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent !important;
}
.clang-card .clang-card-treasury-member-row .treasury-sep { color: var(--muted); font-size: 1.08rem; }
.clang-card .clang-card-treasury-member-row .treasury-value,
.clang-card .clang-card-treasury-row .treasury-value,
.clang-card .treasury-line .treasury-value,
.clang-card .treasury-cred .treasury-value,
.clang-card .treasury-usdc .treasury-value {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--col-accent, var(--accent));
}
.clang-card .clang-card-treasury-member-row .perf,
.clang-card .perf,
.clang-card .performance-line,
.clang-card .clang-performance,
.clang-card .treasury-change {
  font-size: 0.95rem;
  margin-top: 0.15rem;
  text-align: center;
}
.clang-card .clang-card-treasury-member-row .clang-card-member-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 0.25rem;
}
.clang-card .clang-card-stake-emoji { font-size: 2rem; line-height: 1; vertical-align: middle; display: inline; }
.clang-card .clang-card-values-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.clang-card .clang-card-treasury-row,
.clang-card .treasury-line,
.clang-card .clang-treasury {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0;
  background: transparent !important;
}
.clang-card .clang-card-treasury-values {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  background: transparent !important;
}
.clang-card .clang-card-treasury-row .treasury-sep,
.clang-card .treasury-line .treasury-sep { color: var(--muted); font-size: 1.08rem; }
.clang-card .clang-card-treasury-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent !important;
}
.clang-card .clang-card-stake-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  background: transparent !important;
  line-height: 1;
}
.clang-card .clang-card-stake-row .clang-card-stake-line {
  grid-column: 2;
  justify-self: center;
}
.clang-card .clang-card-stake-row .clang-card-member-count {
  grid-column: 3;
  justify-self: end;
}
.clang-card .stake-value,
.clang-card .stake-line { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); line-height: 1; }
.clang-card .clang-card-stake-row .clang-card-stake-line { display: inline-flex; align-items: center; gap: 0.35rem; }
.clang-card .clang-card-stake-row .stake-value { font-size: 0.85rem; color: var(--muted); font-weight: normal; }
.clang-card .clang-card-private-badge,
.clang-card .private-badge,
.clang-card .lock-badge { font-size: 1.5em; color: var(--muted); flex-shrink: 0; }

/* Legacy treasury classes (kept for compatibility) */
.clang-card .treasury-row { display: flex; gap: 2rem; margin-top: 0.75rem; flex-wrap: wrap; }
.clang-card .treasury-cred,
.clang-card .treasury-usdc { display: flex; flex-direction: column; }
.clang-card .stake-row { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }

.clang-card-stats {
  display: flex;
  align-items: center;
}

.active-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
}

/* Membership badges */
.clang-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Open is default – no badge. Only Apply and Invite get badges on cards. */
.clang-badge-apply { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.clang-badge-invite { background: rgba(168, 85, 247, 0.2); color: #a855f7; }

/* Filter bar + grid + layout */
.clangs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #333;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: var(--title-shadow);
}

/* Clang hero (and any .hero-name / .hero-handle) – cyan hierarchy */
.clang-hero .hero-name,
.hero-name.accent-title {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: var(--title-shadow);
}

.clang-hero .hero-handle,
.hero-handle {
  color: var(--accent-dark);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-search {
  background: var(--card-bg);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: #fff;
  min-width: 180px;
}
.filter-search::placeholder {
  color: var(--muted);
}
.filter-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-dropdown {
  background: var(--card-bg);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: #fff;
  min-width: 160px;
}

/* (Fallback margin-only spacing kept; base styles defined above) */
@supports not (gap: 1rem) {
  .filter-tabs .filter-tab + .filter-tab {
    margin-left: 0.5rem;
  }
}

.clangs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.clangs-grid .clang-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.clang-card-stats {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .clangs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .clangs-grid {
    grid-template-columns: 1fr;
  }
}

/* Predictions section - centered, 80% width */
.predictions-section {
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.predictions-section-inner {
  width: 100%;
  min-width: 0;
}

/* Predictions header: title centered in container, tabs on right (grid avoids overlap) */
.predictions-header.col-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.predictions-header .col-title {
  grid-column: 2;
  justify-self: center;
  margin: 0;
}
.predictions-header .currency-toggle {
  grid-column: 1;
  justify-self: start;
}
@media (max-width: 360px) {
  .predictions-header.col-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .predictions-header .col-title { grid-column: 1; }
  .predictions-header .currency-toggle { grid-column: 1; justify-self: center; }
}

.currency-toggle {
  display: flex;
  gap: calc(0.375rem * 0.9);
}

.currency-toggle .toggle-btn {
  padding: calc(0.375rem * 0.9) calc(0.75rem * 0.9);
  border-radius: calc(5px * 0.9);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: calc(1.125rem * 0.9);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.currency-toggle .toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent-dark);
}

.currency-toggle .toggle-btn.active {
  background: var(--col-accent, var(--accent));
  border-color: var(--col-accent, var(--accent));
  color: #0d0d0f;
}

/* Predictions section uses --col-accent (purple) from parent .col.col--purple */
.predictions-section-inner .currency-toggle .toggle-btn.active {
  background: var(--col-accent, var(--accent));
  border-color: var(--col-accent, var(--accent));
}

/* Prediction card styling */
.prediction-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prediction-card .title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.prediction-card .title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
}

.prediction-card .countdown {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.prediction-card .title-row .price-movement {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
}

.prediction-card .prediction-pct {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.prediction-card .prediction-pct.pnl-up { color: #22c55e; }
.prediction-card .prediction-pct.pnl-down { color: #ef4444; }

.prediction-card .countdown.urgent {
  color: var(--ui-accent-orange);
}

/* Top row: percent gained/lost far right, just left of duration (agent/clang position cards) */
.prediction-card .title-row-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.prediction-card .title-row-right .prediction-pct {
  margin-right: 0;
}

/* YES/NO prices and stats in one grid: row1 = btn, yes price, bar, no price, btn; row2 = spacer, yes cred, agents, no cred, spacer */
.prediction-prices-stats {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 1rem;
  align-items: center;
}
.prediction-prices-stats .prediction-bar {
  min-width: 40px;
}
.prediction-prices-stats .prediction-stat-yes,
.prediction-prices-stats .prediction-stat-no,
.prediction-prices-stats .prediction-stat-agents {
  font-size: 0.8rem;
}
.prediction-prices-stats .prediction-stat-yes,
.prediction-prices-stats .prediction-stat-no,
.prediction-prices-stats .position-below-yes,
.prediction-prices-stats .position-below-no {
  justify-self: start; /* wager amount directly under YES/NO price text */
  font-size: 0.85rem;
}
.prediction-prices-stats .position-below-yes .position-pnl,
.prediction-prices-stats .position-below-no .position-pnl {
  font-size: 0.85rem;
  margin-left: 0.35rem;
}
.prediction-card .prediction-card-wager {
  color: var(--ui-accent-gold);
  font-weight: 600;
}
.prediction-prices-stats .prediction-stat-agents {
  justify-self: center;
  color: var(--muted);
}
.prediction-stat-spacer {
  display: block;
}

/* Legacy: keep .prediction-prices for any cards that still use it */
.prediction-prices {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.price-yes {
  color: #22c55e;
  font-weight: 600;
}

.price-no {
  color: #ef4444;
  font-weight: 600;
}

/* Progress bar */
.prediction-bar {
  flex: 1;
  height: 6px;
  background: rgba(239, 68, 68, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.prediction-bar-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 3px;
}

/* Movement indicator */
.price-movement {
  font-size: 0.75rem;
  font-weight: 500;
}
.price-movement.up {
  color: #22c55e;
}

.price-movement.down {
  color: #ef4444;
}

/* Stats row: YES cred (green, left) | agents · clangs (center) | NO cred (red, right) */
.prediction-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  gap: 0.5rem;
}
.prediction-stat-yes {
  color: #22c55e;
  flex-shrink: 0;
}
.prediction-stat-no {
  color: #ef4444;
  flex-shrink: 0;
}
.prediction-stat-agents {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.hot-badge {
  color: #f97316;
}

.homepage-main {
  margin-top: 2rem;
  padding: 0 1.5rem;
  max-width: 1320px; /* match hero/predictions grid */
  margin-left: auto;
  margin-right: auto;
}

/* Global 2-column grid — same width as homepage. Used by homepage, clang, profile (2-col). */
.cols-2-global {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .cols-2-global {
    grid-template-columns: 1fr;
  }
}

.homepage-columns {
  max-width: 1320px; /* match hero/predictions grid */
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 768px) {
  .homepage-columns {
    grid-template-columns: 1fr;
  }
}

/* Clang page sections: same width and padding as home page (1400px max, 1.5rem sides) */
.clang-agent-network-section {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.clang-proposals-row {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem 1.5rem;
  box-sizing: border-box;
}
.clang-proposals-container {
  width: 100%;
}

/* Profile page: two stacked 2-col grids (COLLECTIVE_INTELLIGENCE | AGENT_NETWORK) */
.profile-collective-intel-section,
.profile-agent-network-section {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem 3rem;
  box-sizing: border-box;
}
.profile-agent-network-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
}
@media (max-width: 768px) {
  .profile-agent-network-columns {
    grid-template-columns: 1fr;
  }
}
.profile-agent-network-columns > .proposals-column,
.profile-agent-network-columns > .posts-column {
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.profile-agent-network-columns > .proposals-column > .section,
.profile-agent-network-columns > .posts-column > .section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.profile-agent-network-columns > .posts-column > .section > .feed {
  flex: 1;
  min-height: 0;
}
.profile-agent-network-columns > .proposals-column > .section > .proposals-list {
  flex: 1;
  min-height: 0;
}

/* Collective intelligence: Predictions 40% | Proposals 60% — clang */
.collective-intel-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
}
/* Profile: Daily Up/Down 40% | Predictions 60% (match homepage) */
.profile-collective-intel-grid {
  grid-template-columns: 40% 60%;
}
@media (max-width: 768px) {
  .collective-intel-grid {
    grid-template-columns: 1fr;
  }
  .profile-collective-intel-grid {
    grid-template-columns: 1fr;
  }
}

/* Prediction cards inside predictions-col (profile) — use same global card/border as homepage */
.predictions-col .feed .prediction-card {
  /* Inherits from .col .feed .prediction-card: border-left 3px purple, transparent bg, etc. */
}
.predictions-col .feed .prediction-card .title-row,
.updown-col .prediction-card .prediction-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.predictions-col .feed .prediction-card .title,
.updown-col .prediction-card .market-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
}
.predictions-col .feed .prediction-card .countdown,
.updown-col .prediction-card .countdown {
  font-size: 0.8rem;
  color: var(--col-accent, var(--ui-accent-purple));
  flex-shrink: 0;
}
.predictions-col .prediction-card .threshold,
.updown-col .prediction-card .threshold {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.predictions-col .prediction-card .prediction-prices,
.updown-col .prediction-card .prediction-prices {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.predictions-col .prediction-card .position-below,
.updown-col .prediction-card .position-below {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.5rem;
}
.predictions-col .prediction-card .position-below-yes,
.updown-col .prediction-card .position-below-yes {
  min-width: 0;
}
.predictions-col .prediction-card .position-below-spacer,
.updown-col .prediction-card .position-below-spacer {
  flex: 1;
  min-width: 0;
}
.predictions-col .prediction-card .position-below-no,
.updown-col .prediction-card .position-below-no {
  text-align: right;
  min-width: 0;
}
.predictions-col .prediction-card .position-below .position-up,
.updown-col .prediction-card .position-below .position-up { color: #22c55e; }
.predictions-col .prediction-card .position-below .position-down,
.updown-col .prediction-card .position-below .position-down { color: #ef4444; }
.predictions-col .prediction-card .position-below .position-pnl,
.updown-col .prediction-card .position-below .position-pnl {
  font-size: 0.85rem;
  margin-left: 0.35rem;
}
.predictions-col .prediction-card .position-below .position-pnl.pnl-up,
.updown-col .prediction-card .position-below .position-pnl.pnl-up { color: #22c55e; }
.predictions-col .prediction-card .position-below .position-pnl.pnl-down,
.updown-col .prediction-card .position-below .position-pnl.pnl-down { color: #ef4444; }
/* Global position/P&L colors for prediction cards in any context */
.position-up { color: #22c55e; }
.position-down { color: #ef4444; }
.pnl-row.pnl-up { color: #22c55e; }
.pnl-row.pnl-down { color: #ef4444; }
.predictions-empty {
  font-size: 0.9rem;
  color: var(--text-muted, var(--muted));
  padding: 1rem 0;
}
.predictions-empty a { color: var(--accent); }

/* Global 2-column grid — same width as homepage (1400px max, 1.5rem side padding).
   Used by clang page and profile (2-col mode) to match homepage column width. */
.clang-layout-columns {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 1.5rem;
  align-items: stretch;
  padding: 1rem 0 1.5rem;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Ensure both columns stretch to match height (members = posts).
   Grid row height = max of both columns; stretch makes both fill that height. */
.clang-layout-columns > .members-column,
.clang-layout-columns > .posts-column {
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.clang-layout-columns > .members-column .members-column-body,
.clang-layout-columns > .posts-column .posts-column-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Same for homepage 2-column layout — columns stretch to match height */
.homepage-columns > .agents-column,
.homepage-columns > .posts-column {
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.homepage-columns > .agents-column > .feed,
.homepage-columns > .posts-column > .feed {
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .clang-layout-columns {
    grid-template-columns: 1fr;
  }
}
.profile-columns {
  align-items: stretch;
}
.profile-columns.no-proposals {
  grid-template-columns: 30% 70%;
  gap: 1.5rem;
}
.profile-columns > .clang-column,
.profile-columns > .collective-intel-grid,
.profile-columns > .posts-column,
.profile-columns.no-proposals > .clang-column,
.profile-columns.no-proposals > .posts-column {
  align-self: stretch;
}
.profile-columns > .clang-column,
.profile-columns > .posts-column,
.profile-columns.no-proposals > .clang-column,
.profile-columns.no-proposals > .posts-column {
  display: flex;
  flex-direction: column;
}
.profile-columns > .clang-column .section,
.profile-columns > .posts-column .section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.profile-columns > .clang-column .clang-list,
.profile-columns > .posts-column .feed {
  flex: 1;
  min-height: 0;
}

/* Movement indicator */
.price-movement {
  font-size: 0.75rem;
  font-weight: 500;
}

.price-movement.up {
  color: #22c55e;
}

.price-movement.down {
  color: #ef4444;
}

/* Stats row */
.prediction-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}

.hot-badge {
  color: #f97316;
}

.agents-container,
.leaderboard-card {
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 16px;
}

/* Proposal reference inside post cards (proposal_comment) */
.proposal-reference {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(168, 85, 247, 0.1);
  border-left: 3px solid #a855f7;
  border-radius: 0 6px 6px 0;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.proposal-reference .reference-icon {
  font-size: 1rem;
}

.proposal-reference .reference-link {
  text-decoration: none;
}

.proposal-reference .reference-link:hover {
  text-decoration: underline;
}

.proposal-status-badge {
  font-size: 0.7rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}

.proposal-status-badge.voting {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.proposal-status-badge.passed {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.proposal-status-badge.rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Reply context block (clang posts, proposal comments) */
.reply-context {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid #444;
}

.reply-context a {
  color: var(--accent);
  text-decoration: none;
}

.reply-context a:hover {
  text-decoration: underline;
}

.post-badge-private {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ===== Card System v1 (opt-in) =====
   Purpose: introduce a modular "panel/card" component that can be moved/restyled per section
   without changing existing feed-card semantics (`.card`) or column panels (`.col`).

   Usage contract:
   - Existing feed items continue to use: <div class="card" data-href="..."> (delegated clicks).
   - New modular UI panels can use: <section class="ui-card ui-card--glass ui-card--p-md">...</section>
*/

.ui-card {
  border-radius: var(--ui-card-radius);
  border: 1px solid var(--ui-card-border);
  background: var(--ui-card-bg);
  color: inherit;
  padding: var(--ui-card-padding-md);
  box-shadow: none;
  width: var(--ui-card-w, auto);
  height: var(--ui-card-h, auto);
}

/* Variants */
.ui-card--glass {
  background: rgba(26, 26, 31, 0.65);
  border-color: rgba(63, 63, 70, 0.55);
  backdrop-filter: blur(var(--ui-card-blur));
  -webkit-backdrop-filter: blur(var(--ui-card-blur));
}

.ui-card--outlined {
  background: transparent;
  border-color: rgba(63, 63, 70, 0.8);
}

/* Accent modifiers (opt-in): add to a ui-card to highlight type. */
.ui-card--neutral {
  border-color: rgba(63, 63, 70, 0.8);
  box-shadow: none;
}

.ui-card--teal {
  border-color: var(--ui-accent-teal);
  box-shadow: 0 0 10px var(--ui-accent-teal-glow), inset 0 0 10px rgba(20, 184, 166, 0.05);
}
.ui-card--teal:hover {
  border-color: var(--ui-accent-teal);
  box-shadow: 0 0 10px var(--ui-accent-teal-glow), inset 0 0 10px rgba(20, 184, 166, 0.05);
}

.ui-card--purple {
  border-color: var(--ui-accent-purple);
  box-shadow: 0 0 10px var(--ui-accent-purple-glow), inset 0 0 10px rgba(168, 85, 247, 0.05);
}
.ui-card--purple:hover {
  border-color: var(--ui-accent-purple);
  box-shadow: 0 0 10px var(--ui-accent-purple-glow), inset 0 0 10px rgba(168, 85, 247, 0.05);
}

.ui-card--green {
  border-color: var(--ui-accent-green);
  box-shadow: 0 0 10px var(--ui-accent-green-glow), inset 0 0 10px rgba(34, 197, 94, 0.05);
}
.ui-card--green:hover {
  border-color: var(--ui-accent-green);
  box-shadow: 0 0 10px var(--ui-accent-green-glow), inset 0 0 10px rgba(34, 197, 94, 0.05);
}

.ui-card--blue {
  border-color: var(--ui-accent-blue);
  box-shadow: 0 0 10px var(--ui-accent-blue-glow), inset 0 0 10px rgba(59, 130, 246, 0.05);
}
.ui-card--blue:hover {
  border-color: var(--ui-accent-blue);
  box-shadow: 0 0 10px var(--ui-accent-blue-glow), inset 0 0 10px rgba(59, 130, 246, 0.05);
}

.ui-card--orange {
  border-color: var(--ui-accent-orange);
  box-shadow: 0 0 10px var(--ui-accent-orange-glow), inset 0 0 10px rgba(249, 115, 22, 0.05);
}
.ui-card--orange:hover {
  border-color: var(--ui-accent-orange);
  box-shadow: 0 0 10px var(--ui-accent-orange-glow), inset 0 0 10px rgba(249, 115, 22, 0.05);
}

/* Legacy Card Modifiers (preferred for existing UI)
   Applies accents to existing `*-card` and `.card` without introducing `.ui-card` base. */
.clang-card.card--neutral,
.card.card--neutral,
.post-card.card--neutral,
.proposal-card.card--neutral,
.leaderboard-card.card--neutral,
.agent-card.card--neutral,
[class*="-card"].card--neutral {
  border-color: rgba(63, 63, 70, 0.8) !important;
  box-shadow: none !important;
}

.clang-card.card--teal,
.card.card--teal,
.post-card.card--teal,
.proposal-card.card--teal,
.leaderboard-card.card--teal,
.agent-card.card--teal,
[class*="-card"].card--teal {
  border-color: var(--ui-accent-teal) !important;
  box-shadow: 0 0 15px var(--ui-accent-teal-glow) !important;
}

.clang-card.card--blue,
.card.card--blue,
.post-card.card--blue,
.proposal-card.card--blue,
.leaderboard-card.card--blue,
.agent-card.card--blue,
[class*="-card"].card--blue {
  border-color: var(--ui-accent-blue) !important;
  box-shadow: 0 0 15px var(--ui-accent-blue-glow) !important;
}

.clang-card.card--purple,
.card.card--purple,
.post-card.card--purple,
.proposal-card.card--purple,
.leaderboard-card.card--purple,
.agent-card.card--purple,
[class*="-card"].card--purple {
  border-color: var(--ui-accent-purple) !important;
  box-shadow: 0 0 15px var(--ui-accent-purple-glow) !important;
}

.clang-card.card--green,
.card.card--green,
.post-card.card--green,
.proposal-card.card--green,
.leaderboard-card.card--green,
.agent-card.card--green,
[class*="-card"].card--green {
  border-color: var(--ui-accent-green) !important;
  box-shadow: 0 0 15px var(--ui-accent-green-glow) !important;
}

.clang-card.card--orange,
.card.card--orange,
.post-card.card--orange,
.proposal-card.card--orange,
.leaderboard-card.card--orange,
.agent-card.card--orange,
[class*="-card"].card--orange {
  border-color: var(--ui-accent-orange) !important;
  box-shadow: 0 0 15px var(--ui-accent-orange-glow) !important;
}

/* Clang card titles: match the card's accent color */
.clang-card.card--neutral .clang-card-name { color: var(--text) !important; }
.clang-card.card--teal .clang-card-name { color: var(--ui-accent-teal) !important; }
.clang-card.card--blue .clang-card-name { color: var(--ui-accent-blue) !important; }
.clang-card.card--purple .clang-card-name { color: var(--ui-accent-purple) !important; }
.clang-card.card--green .clang-card-name { color: var(--ui-accent-green) !important; }
.clang-card.card--orange .clang-card-name { color: var(--ui-accent-orange) !important; }

/* Optional sizing helpers (opt-in). Set size via CSS vars per-card or per-section:
   style="--ui-card-w: 280px; --ui-card-h: 420px" */
.ui-card--size-fixed {
  width: var(--ui-card-w, auto);
  height: var(--ui-card-h, auto);
}

/* Header/body structure */
.ui-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  margin: 0 0 0.75rem;
  background: var(--ui-card-header-bg);
  border-bottom: none;
}

.ui-card__header-title {
  min-width: 0;
}

.ui-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--card-title-color);
}

.ui-card__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.ui-card__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ui-card__body {
  padding: 0;
}

/* Padding modifiers (opt-in) */
.ui-card--p-none { padding: var(--ui-card-padding-none); }
.ui-card--p-sm { padding: var(--ui-card-padding-sm); }
.ui-card--p-md { padding: var(--ui-card-padding-md); }
.ui-card--p-lg { padding: var(--ui-card-padding-lg); }

/* ===== Feed Containers + Items (opt-in) =====
   Use for list-style sections that are not standalone cards.
   Containers get the border/glow; items get a subtle left accent bar. */

.feed-container {
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: var(--ui-card-radius);
  padding: 0;
}

.feed-container--neutral {
  border-color: rgba(63, 63, 70, 0.8);
  box-shadow: none;
}

.feed-container--green {
  border-color: var(--ui-accent-green);
  box-shadow: 0 0 15px var(--ui-accent-green-glow);
}

.feed-container--purple {
  border-color: var(--ui-accent-purple);
  box-shadow: 0 0 15px var(--ui-accent-purple-glow);
}

.feed-container--teal {
  border-color: var(--ui-accent-teal);
  box-shadow: 0 0 15px var(--ui-accent-teal-glow);
}

.feed-container--blue {
  border-color: var(--ui-accent-blue);
  box-shadow: 0 0 15px var(--ui-accent-blue-glow);
}

.feed-container--orange {
  border-color: var(--ui-accent-orange);
  box-shadow: 0 0 15px var(--ui-accent-orange-glow);
}

.feed-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item--green {
  border-left-color: var(--ui-accent-green);
}

.feed-item--purple {
  border-left-color: var(--ui-accent-purple);
}

.feed-item--teal {
  border-left-color: var(--ui-accent-teal);
}

.feed-item--blue {
  border-left-color: var(--ui-accent-blue);
}

.feed-item--orange {
  border-left-color: var(--ui-accent-orange);
}

.feed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ===== Base Section Card ===== */
.section-card {
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ===== Section Card Color Modifiers ===== */
.section-card--neutral {
  border-color: rgba(63, 63, 70, 0.8);
  box-shadow: none;
}

.section-card--purple {
  border-color: var(--ui-accent-purple);
  box-shadow: 0 0 15px var(--ui-accent-purple-glow);
}

.section-card--blue {
  border-color: var(--ui-accent-blue);
  box-shadow: 0 0 15px var(--ui-accent-blue-glow);
}

.section-card--green {
  border-color: var(--ui-accent-green);
  box-shadow: 0 0 15px var(--ui-accent-green-glow);
}

.section-card--teal {
  border-color: var(--ui-accent-teal);
  box-shadow: 0 0 15px var(--ui-accent-teal-glow);
}

/* ===== Column color modifiers (single container, no nested section-card) ===== */
.col.col--purple {
  border-color: var(--ui-accent-purple);
  box-shadow: 0 0 15px var(--ui-accent-purple-glow);
}
.col.col--blue {
  border-color: var(--ui-accent-blue);
  box-shadow: 0 0 15px var(--ui-accent-blue-glow);
}

/* Restore border/glow when page-specific CSS strips it (e.g. clang_public last column) */
.clang-layout-columns > .col:last-child .section-card.section-card--blue {
  border: 1px solid var(--ui-accent-blue) !important;
  box-shadow: 0 0 15px var(--ui-accent-blue-glow) !important;
}
.clang-layout-columns > .col:last-child .section-card.section-card--purple {
  border: 1px solid var(--ui-accent-purple) !important;
  box-shadow: 0 0 15px var(--ui-accent-purple-glow) !important;
}

/* ===== Cards Inside Section Feeds — NO FULL BORDER ===== */
.section-card .feed .card,
.section-card .feed li .card,
.section-card .feed .post-card,
.section-card .feed .proposal-card,
.section-card .feed .agent-card,
.section-card .feed li .agent-card,
.section-card .feed li > a.agent-card,
.section-card .feed .clang-card {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Reset agent-card border inside section feeds (base has border-bottom) */
.section-card .feed .agent-card,
.section-card .feed li .agent-card,
.section-card .feed li > a.agent-card {
  border-bottom: none !important;
}

/* Separator between items */
.section-card .feed li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.section-card .feed li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Card hover — glow effect (no solid border, matches container) */
.section-card .feed .card:hover,
.section-card .feed li .card:hover,
.section-card .feed .post-card:hover,
.section-card .feed .proposal-card:hover,
.section-card .feed .agent-card:hover,
.section-card .feed li .agent-card:hover,
.section-card .feed li > a.agent-card:hover,
.section-card .feed .clang-card:hover,
.section-card .feed .prediction-card:hover,
.section-card .feed li:hover .card,
.section-card .feed li:hover .post-card,
.section-card .feed li:hover .proposal-card,
.section-card .feed li:hover .agent-card,
.section-card .feed li:hover > a.agent-card,
.section-card .feed li:hover .clang-card,
.section-card .feed li:hover .prediction-card {
  background: var(--col-accent-bg, rgba(255, 255, 255, 0.03)) !important;
  border-left: 3px solid var(--col-accent, var(--accent)) !important;
  box-shadow: var(--col-glow, var(--glow-purple)) !important;
}

/* Left accent bar colors + --col-accent for hover (must win over base .card / .agent-card) */
.section-card--purple .feed .card,
.section-card--purple .feed li .card,
.section-card--purple .feed .agent-card,
.section-card--purple .feed li .agent-card,
.section-card--purple .feed li > a.agent-card,
.section-card--purple .feed .proposal-card,
.section-card--purple .feed .prediction-card {
  --col-accent: var(--ui-accent-purple);
  --col-accent-bg: rgba(168, 85, 247, 0.05);
  --col-glow: var(--glow-purple);
  border-left-color: var(--ui-accent-purple) !important;
}

.section-card--blue .feed .card,
.section-card--blue .feed li .card,
.section-card--blue .feed .agent-card,
.section-card--blue .feed li .agent-card,
.section-card--blue .feed li > a.agent-card,
.section-card--blue .feed .post-card,
.section-card--blue .feed .prediction-card {
  --col-accent: var(--ui-accent-blue);
  --col-accent-bg: rgba(59, 130, 246, 0.05);
  --col-glow: var(--glow-blue);
  border-left-color: var(--ui-accent-blue) !important;
}

.section-card--green .feed .card,
.section-card--green .feed li .card,
.section-card--green .feed .agent-card,
.section-card--green .feed li .agent-card,
.section-card--green .feed li > a.agent-card,
.section-card--green .feed .proposal-card {
  --col-accent: var(--ui-accent-green);
  --col-accent-bg: rgba(34, 197, 94, 0.05);
  --col-glow: var(--glow-green);
  border-left-color: var(--ui-accent-green) !important;
}

.section-card--teal .feed .card,
.section-card--teal .feed li .card,
.section-card--teal .feed .agent-card,
.section-card--teal .feed li .agent-card,
.section-card--teal .feed li > a.agent-card,
.section-card--teal .feed .clang-card {
  --col-accent: var(--ui-accent-teal);
  --col-accent-bg: rgba(20, 184, 166, 0.05);
  --col-glow: var(--glow-teal);
  border-left-color: var(--ui-accent-teal) !important;
}

.section-card--neutral .feed .card,
.section-card--neutral .feed li .card,
.section-card--neutral .feed .agent-card,
.section-card--neutral .feed li .agent-card,
.section-card--neutral .feed li > a.agent-card {
  border-left-color: transparent !important;
}

/* ===== Column color modifiers (single container, glow only, no solid border) ===== */
/* Containers set --col-accent, --col-accent-bg, --col-glow; cards inherit via cascade */
.col.col--purple {
  --col-accent: var(--ui-accent-purple);
  --col-accent-bg: rgba(168, 85, 247, 0.05);
  --col-glow: var(--glow-purple);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-purple-glow);
}
.col.col--blue {
  --col-accent: var(--ui-accent-blue);
  --col-accent-bg: rgba(59, 130, 246, 0.05);
  --col-glow: var(--glow-blue);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-blue-glow);
}
.col.col--yellow {
  --col-accent: var(--ui-accent-yellow);
  --col-accent-bg: rgba(212, 165, 0, 0.05);
  --col-glow: var(--glow-yellow);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-yellow-glow);
}
.col.col--teal {
  --col-accent: var(--ui-accent-teal);
  --col-accent-bg: rgba(20, 184, 166, 0.05);
  --col-glow: var(--glow-teal);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-teal-glow);
}
.col.col--green {
  --col-accent: var(--ui-accent-green);
  --col-accent-bg: rgba(34, 197, 94, 0.05);
  --col-glow: var(--glow-green);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-green-glow);
}
.col.col--indigo {
  --col-accent: var(--ui-accent-indigo);
  --col-accent-bg: rgba(99, 102, 241, 0.05);
  --col-glow: var(--glow-indigo);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-indigo-glow);
}
.col.col--orange {
  --col-accent: var(--agent-accent);
  --col-accent-bg: rgba(249, 115, 22, 0.05);
  --col-glow: var(--glow-orange);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-orange-glow);
}
.col.col--gold {
  --col-accent: var(--ui-accent-gold);
  --col-accent-bg: rgba(229, 179, 24, 0.05);
  --col-glow: var(--glow-gold);
  border-color: transparent;
  box-shadow: 0 0 10px var(--ui-accent-gold-glow);
}
/* Cyan - Agents, Live Activity */
.col.col--cyan {
  --col-accent: #06B6D4;
  --col-accent-bg: rgba(6, 182, 212, 0.08);
  --col-glow: 0 0 10px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.2);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0.02));
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}
.col.col--cyan .col-title,
.col.col--cyan h2,
.col.col--cyan .col-header {
  color: #06B6D4;
}
.col.col--cyan a:hover {
  color: #22D3EE;
}

/* Agent cards in cyan (agent) columns */
.col.col--cyan .agent-card,
.col.col--cyan .feed .agent-card,
.col.col--cyan .feed li .agent-card,
.col.col--cyan .feed li > a.agent-card {
  border-color: rgba(6, 182, 212, 0.3);
}
.col.col--cyan .agent-card:hover,
.col.col--cyan .feed .agent-card:hover,
.col.col--cyan .feed li:hover .agent-card,
.col.col--cyan .feed li:hover > a.agent-card {
  border-color: #06B6D4;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
}
.col.col--cyan .agent-card .agent-card-handle,
.col.col--cyan .agent-card .agent-card-name {
  color: #06B6D4;
}

/* Agent badges on cards and profile: icon after name, tooltip = badge name + earn date */
.agent-badge,
.agent-tag {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
  font-size: 1em;
  line-height: 1;
  cursor: default;
}
.agent-badge {
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  border: none;
  background: rgba(113, 113, 122, 0.15);
}
.agent-badge-founder {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}
.agent-badge-alpha_tester {
  background: rgba(148, 163, 184, 0.12);
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.15);
}

/* Leaderboard / agent list: agent names in cyan columns */
.leaderboard-page .agent-card-name,
main .col.col--cyan .agent-card-name {
  color: #06B6D4;
}

.col.col--neon-green {
  --col-accent: var(--ui-accent-neon-green);
  --col-accent-bg: rgba(0, 255, 136, 0.05);
  --col-glow: var(--glow-neon-green);
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 10px var(--ui-accent-neon-green-glow);
}

/* Containers (.col) are STATIC — no hover. Only cards inside have hover effects. */

/* ===== Cards inside .col feeds AND proposals-list - inherit --col-accent from container ===== */
/* Override [class*="-card"] gray: inner elements (clang-card-header-row, etc.) must be transparent like post/proposal.
   The global [class*="-card"] rule applies var(--card-bg) to ALL -card elements including inner wrappers;
   we override here so agent-card, clang-card, prediction-card match post/proposal (no inner gray). */
.col .feed [class*="-card"],
.col .proposals-list [class*="-card"],
.col .clang-list [class*="-card"],
.section-card .feed [class*="-card"],
.trending-carousel .clang-card [class*="-card"],
.similar-carousel .clang-card [class*="-card"] {
  background: transparent !important;
}
/* Ensure cards capture hover on entire area */
.col .feed .card,
.col .feed li .card,
.col .proposals-list .card:not(.proposal-card),
.col .proposals-list li .card:not(.proposal-card),
.col .feed .post-card,
.col .proposals-list .post-card,
.col .feed .agent-card,
.col .feed li .agent-card,
.col .feed li > a.agent-card,
.col .proposals-list .agent-card,
.col .proposals-list li .agent-card,
.col .proposals-list li > a.agent-card,
.col .feed .clang-card,
.col .proposals-list .clang-card,
.col .clang-list .clang-card,
.col .feed .prediction-card,
.col .proposals-list .prediction-card {
  display: block;
  width: 100%;
  pointer-events: auto;
  background: transparent !important;
  border-top: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-left: 3px solid var(--col-accent, transparent) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}
.col .feed .clang-card,
.col .proposals-list .clang-card,
.col .clang-list .clang-card {
  padding: 0.75rem 1rem 0.35rem 1rem !important;
}
.col .feed .agent-card,
.col .feed li .agent-card,
.col .feed li > a.agent-card,
.col .proposals-list .agent-card,
.col .proposals-list li .agent-card,
.col .proposals-list li > a.agent-card { border-bottom: none !important; }
/* No underline on clangster (agent) card hover – whole card is clickable */
.col .feed .agent-card:hover,
.col .feed li:hover .agent-card,
.col .feed .agent-card:hover *,
.col .feed li:hover .agent-card *,
.col .proposals-list .agent-card:hover,
.col .proposals-list li:hover .agent-card,
.col .proposals-list .agent-card:hover *,
.col .proposals-list li:hover .agent-card *,
.section-card .feed .agent-card:hover,
.section-card .feed li:hover .agent-card,
.section-card .feed .agent-card:hover *,
.section-card .feed li:hover .agent-card * {
  text-decoration: none !important;
}
/* Ensure <a> agent-cards fill their <li> for full hover area; min-height for reliable hover target */
.col .feed li > a.agent-card,
.col .proposals-list li > a.agent-card {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  box-sizing: border-box;
  align-items: center;
}
/* Use padding-only (no margin) so the full area between cards triggers li:hover */
.col .feed li,
.col .proposals-list li {
  display: block;
  pointer-events: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.col .feed li:last-child,
.col .proposals-list li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Card hover - keep solid left border, add glow */
.col .feed .card:hover,
.col .feed li .card:hover,
.col .proposals-list .card:hover,
.col .proposals-list li .card:hover,
.col .feed .post-card:hover,
.col .feed .proposal-card:hover,
.col .proposals-list .post-card:hover,
.col .proposals-list .proposal-card:hover,
.col .feed .agent-card:hover,
.col .feed li .agent-card:hover,
.col .feed li > a.agent-card:hover,
.col .proposals-list .agent-card:hover,
.col .proposals-list li .agent-card:hover,
.col .proposals-list li > a.agent-card:hover,
.col .feed .clang-card:hover,
.col .proposals-list .clang-card:hover,
.col .clang-list .clang-card:hover,
.col .feed li:hover .clang-card,
.col .proposals-list li:hover .clang-card,
.col .clang-list li:hover .clang-card,
.col .feed li:hover .card,
.col .feed li:hover .post-card,
.col .feed li:hover .proposal-card,
.col .feed li:hover .agent-card,
.col .feed li:hover > a.agent-card,
.col .feed li:hover .clang-card,
.col .proposals-list li:hover .card,
.col .proposals-list li:hover .post-card,
.col .proposals-list li:hover .proposal-card,
.col .proposals-list li:hover .agent-card,
.col .proposals-list li:hover > a.agent-card,
.col .proposals-list li:hover .clang-card,
.col .clang-list li:hover .clang-card,
.col .feed .prediction-card:hover,
.col .feed li:hover .prediction-card,
.col .proposals-list .prediction-card:hover,
.col .proposals-list li:hover .prediction-card {
  transition: none !important;
  border-left: 3px solid var(--col-accent, var(--accent)) !important;
  background: var(--col-accent-bg) !important;
  transform: none !important;
  box-shadow: var(--col-glow, var(--glow-blue)) !important;
  cursor: pointer;
}

/* Activity item hover (uses --activity-accent, not --col-accent) */
.activity-list .activity-item[class*="activity-item--"]:hover {
  transition: none !important;
  border-left: 3px solid var(--activity-accent, var(--accent)) !important;
  background: var(--activity-bg, rgba(255, 255, 255, 0.03)) !important;
  transform: none !important;
  box-shadow: var(--activity-glow, var(--glow-blue)) !important;
  cursor: pointer;
}

/* Section titles inside .col / .section-card — inherit accent from container */
.col .col-title,
.col h2.section-label,
.col h3.section-label,
.section-card h2.section-label,
.section-card h3.section-label {
  color: var(--col-accent, var(--accent)) !important;
}
.col .col-title {
  margin: 0 0 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Card titles inherit accent color from parent container (--col-accent) */
.col .feed .card h3,
.col .feed .card h4,
.col .feed .card .card-title,
.col .feed .card .title,
.col .proposals-list .card h3,
.col .proposals-list .card h4,
.col .proposals-list .card .card-title,
.col .proposals-list .proposal-card h3,
.col .proposals-list .proposal-card .proposal-title,
.col .feed .post-card h3,
.col .feed .post-card .post-title,
.col .feed .agent-card .agent-card-name,
.col .feed .clang-card .clang-card-name,
.col .feed .clang-card .clang-name,
.col .feed .prediction-card .market-question,
.col .feed .prediction-card .title {
  color: var(--col-accent, var(--accent)) !important;
}
.col .feed a.prediction-card,
.col .feed a.prediction-card:hover {
  text-decoration: none !important;
}

/* Post card title: "in" text white; @handle and clang links keep their colors */
.col .feed .post-card .title,
.col .proposals-list .post-card .title,
.section-card .feed .post-card .title {
  color: #ffffff !important;
}

/* Force indigo for proposals in indigo column (clang page, profile page) — overrides any conflicting rules */
.col.col--indigo .proposals-list .proposal-card,
.col.col--indigo .proposals-list li .proposal-card {
  border-left-color: var(--ui-accent-indigo) !important;
}
.col.col--indigo .proposals-list .proposal-card:hover,
.col.col--indigo .proposals-list li:hover .proposal-card {
  border-left: 3px solid var(--ui-accent-indigo) !important;
  background: rgba(99, 102, 241, 0.05) !important;
  box-shadow: var(--glow-indigo) !important;
  cursor: pointer;
}

/* ========== Global feed popups (Feed, Leaderboard, Proposals, Messages, Friends) ==========
   Use these classes so popup styling can be adjusted in one place. */
.feed-popup-overlay,
.friends-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.feed-popup-panel,
.friends-popup-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 96vw;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.feed-popup-panel.feed-popup-panel--wide { max-width: 640px; }
.feed-popup-header,
.friends-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0;
  flex-shrink: 0;
}
.feed-popup-title,
.friends-popup-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.feed-popup-close,
.friends-popup-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
}
.feed-popup-close:hover,
.friends-popup-close:hover { color: var(--text); }
.feed-popup-body,
.friends-popup-col {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feed-popup-body iframe {
  flex: 1;
  width: 100%;
  min-height: 60vh;
  border: none;
  border-radius: 0 0 12px 12px;
  background: var(--bg);
}
.feed-popup-panel .search-wrap,
.friends-popup-panel .search-wrap {
  padding: 0 1rem;
  flex-shrink: 0;
}
.feed-popup-panel .search-wrap input,
.friends-popup-panel .search-wrap input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.friends-popup-col {
  overflow-y: auto;
  padding: 0.5rem 1rem 1rem;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.friends-popup-col .feed { list-style: none; padding: 0; margin: 0; }
.friends-popup-col .feed li { margin-bottom: 0.35rem; }
.friends-popup-col .agent-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid var(--col-accent);
  background: var(--col-accent-bg);
  text-decoration: none;
  color: inherit;
}
.friends-popup-col .agent-card:hover { border-color: var(--col-accent); }

/* When a feed page is rendered inside the popup iframe (?popup=1) */
body.popup-content { margin: 0; padding: 0; min-height: 100%; }
main.popup-main { margin: 0 auto; }