/* === variables.css === */
/* ====================================
   Whale Analyzer — Design Tokens
   mdldm-inspired: Clean white, bold black, yellow accent
   ==================================== */

:root {
  /* ── Color Palette ── */
  --bg-primary: #F5F5F0;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EEEEE8;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAFAF8;
  --bg-nav: rgba(245, 245, 240, 0.92);
  --bg-glass: rgba(0, 0, 0, 0.02);
  --bg-input: #F5F5F0;
  --bg-section-alt: #FAF9F6;

  --text-primary: #1A1A1A;
  --text-secondary: #555555;
  --text-tertiary: #888888;
  --text-muted: #BBBBBB;

  /* Accent — Yellow/Gold */
  --accent: #FFD600;
  --accent-dim: rgba(255, 214, 0, 0.12);
  --accent-hover: #FFDF33;
  --accent-dark: #E6C200;
  --accent-text: #1A1A1A;
  --accent-glow: rgba(255, 214, 0, 0.35);

  /* Status colors */
  --color-green: #22C55E;
  --color-green-dim: rgba(34, 197, 94, 0.08);
  --color-red: #EF4444;
  --color-red-dim: rgba(239, 68, 68, 0.08);
  --color-blue: #3B82F6;
  --color-blue-dim: rgba(59, 130, 246, 0.08);
  --color-orange: #F97316;
  --color-orange-dim: rgba(249, 115, 22, 0.08);
  --color-purple: #8B5CF6;
  --color-purple-dim: rgba(139, 92, 246, 0.08);

  /* Borders — thick, black, characteristic */
  --border-color: #E8E8E2;
  --border-color-hover: #D0D0C8;
  --border-bold: #1A1A1A;
  --border-width: 2px;
  --border-width-bold: 3px;

  /* ── Typography ── */
  --font-body: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-display: 'Inter', 'Noto Sans SC', sans-serif;

  --fs-2xs: 0.65rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.5rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing ── */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
  --sp-5xl: 96px;

  /* ── Border Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ── Shadows — refined depth ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 5px 5px 0px #1A1A1A;
  --shadow-card-sm: 3px 3px 0px #1A1A1A;
  --shadow-card-hover: 8px 8px 0px #1A1A1A;
  --shadow-btn: 3px 3px 0px #1A1A1A;
  --shadow-btn-hover: 4px 4px 0px #1A1A1A;
  --shadow-feedback: 4px 4px 0px var(--accent);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-feedback: 700;

  /* ── Layout ── */
  --nav-height: 64px;
  --content-max-width: 1280px;
  --card-min-width: 320px;
}

/* === base.css === */
/* ====================================
   Whale Analyzer — Base / Reset
   ==================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--text-secondary); }

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ── Selection ── */
::selection {
  background: var(--accent);
  color: var(--text-primary);
}

/* ── Focus ── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* === layout.css === */
/* ====================================
   Whale Analyzer — Layout
   mdldm-style: clean, bold, playful
   ==================================== */

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--bg-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--border-width) solid var(--border-color);
  z-index: var(--z-nav);
}

.nav-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-xl);
  gap: var(--sp-lg);
}

/* Brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.nav-brand:hover { transform: scale(1.02); }

.brand-icon { font-size: 1.5rem; line-height: 1; }

.brand-text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

/* Filter Tabs */
.nav-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: var(--sp-2xs) var(--sp-xs);
  border: var(--border-width) solid var(--border-bold);
  box-shadow: var(--shadow-card-sm);
}

.filter-btn {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.filter-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.filter-btn.active {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: none;
}

/* Page links (Pulse / Academy) — same pill style as filters */
.nav-page-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: var(--sp-2xs) var(--sp-xs);
  border: var(--border-width) solid var(--border-bold);
  box-shadow: var(--shadow-card-sm);
}

.filter-link {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.filter-link:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.filter-link.active {
  color: var(--accent-text);
  background: var(--accent);
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-shrink: 0;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-bold);
  background: var(--bg-secondary);
  transition: all var(--transition-fast);
  box-shadow: 2px 2px 0px var(--border-bold);
}
.nav-btn:hover {
  background: var(--accent);
  box-shadow: 3px 3px 0px var(--border-bold);
  transform: translate(-1px, -1px);
}
.nav-btn:active {
  box-shadow: 1px 1px 0px var(--border-bold);
  transform: translate(1px, 1px);
}

/* Mobile menu toggle — hidden on desktop */
.nav-mobile-toggle { display: none; }

/* ── Mobile Menu Overlay (backdrop) ── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--z-nav) - 2);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

/* ── Mobile Menu Panel ── */
.mobile-menu-panel {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-bottom: var(--border-width-bold) solid var(--border-bold);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 0px var(--border-bold);
  z-index: calc(var(--z-nav) - 1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0ms 300ms;
  overflow: hidden;
}
.mobile-menu-panel.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 300ms var(--ease-spring), opacity 200ms var(--ease-out), visibility 0ms;
}

.mobile-menu-inner {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-xl);
}

/* ── Mobile Sections ── */
.mobile-section {
  margin-bottom: var(--sp-lg);
}
.mobile-section:last-child {
  margin-bottom: 0;
}

.mobile-section-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-sm);
  padding-left: var(--sp-2xs);
}

/* ── Mobile Nav Links (page navigation) ── */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: var(--border-width) solid transparent;
}

.mobile-nav-item:hover {
  background: var(--bg-tertiary);
}

.mobile-nav-item:active {
  transform: scale(0.98);
}

.mobile-nav-item.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--border-bold);
  box-shadow: 2px 2px 0px var(--border-bold);
}

.mobile-nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  line-height: 1;
}

/* ── Mobile Filter Grid (category chips) ── */
.mobile-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}

.mobile-filter-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: var(--border-width) solid var(--border-color);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.mobile-filter-chip:hover {
  border-color: var(--border-bold);
  background: var(--bg-tertiary);
  box-shadow: 2px 2px 0px var(--border-bold);
  transform: translate(-1px, -1px);
}

.mobile-filter-chip:active {
  box-shadow: 1px 1px 0px var(--border-bold);
  transform: translate(0, 0);
}

.mobile-filter-chip.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--border-bold);
  box-shadow: 2px 2px 0px var(--border-bold);
  font-weight: var(--fw-extrabold);
}

/* ── Mobile Language Button ── */
.mobile-section-lang {
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border-color);
}

.mobile-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: var(--border-width) solid var(--border-bold);
  box-shadow: 2px 2px 0px var(--border-bold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-lang-btn:hover {
  background: var(--accent);
  box-shadow: 3px 3px 0px var(--border-bold);
  transform: translate(-1px, -1px);
}

.mobile-lang-btn:active {
  box-shadow: 1px 1px 0px var(--border-bold);
  transform: translate(1px, 1px);
}

/* ── Main Content ── */
.main-content {
  min-height: calc(100vh - var(--nav-height) - 120px);
  padding-top: calc(var(--nav-height) + var(--sp-xl));
  padding-bottom: var(--sp-2xl);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--sp-xl);
  padding-right: var(--sp-xl);
}

/* ── Loading State ── */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: var(--sp-lg);
  color: var(--text-tertiary);
}

/* ── Footer ── */
.app-footer {
  border-top: var(--border-width) solid var(--border-color);
  padding: var(--sp-3xl) var(--sp-xl);
  text-align: center;
  background: var(--bg-secondary);
}
.footer-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  margin-bottom: var(--sp-lg);
}
.footer-links a {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.footer-links a:hover {
  color: var(--text-primary);
}
.app-footer p {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-xs);
}
.footer-copy {
  margin-top: var(--sp-sm);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* ── Hero Section — clean, compact ── */
.hero-section {
  text-align: center;
  padding: var(--sp-xl) 0 var(--sp-lg);
  position: relative;
}

.hero-title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-lg);
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.hero-title .accent {
  color: var(--text-primary);
  background: var(--accent);
  padding: 4px var(--sp-md);
  border-radius: var(--radius-md);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
  position: relative;
  z-index: 1;
}

.hero-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xl);
  margin-top: var(--sp-2xl);
  background: var(--bg-secondary);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  padding: var(--sp-lg) var(--sp-2xl);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1;
}

.hero-stat {
  text-align: center;
  padding: 0 var(--sp-lg);
}
.hero-stat:not(:last-child) {
  border-right: 2px solid var(--border-color);
}
.hero-stat-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text-primary);
}
.hero-stat-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
}

/* ── Section dividers — mdldm style ── */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--border-color);
  margin: var(--sp-2xl) 0;
}

/* ── Back Navigation ── */
.back-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-bold);
  background: var(--bg-secondary);
  margin-bottom: var(--sp-xl);
  cursor: pointer;
  box-shadow: 2px 2px 0px var(--border-bold);
  transition: all var(--transition-fast);
}
.back-nav:hover {
  background: var(--accent);
  box-shadow: 3px 3px 0px var(--border-bold);
  transform: translate(-1px, -1px);
}
.back-nav:active {
  box-shadow: 1px 1px 0px var(--border-bold);
  transform: translate(1px, 1px);
}

/* ── Feedback Button (bottom-right) ── */
.feedback-btn {
  position: fixed;
  bottom: var(--sp-2xl);
  right: var(--sp-2xl);
  z-index: var(--z-feedback);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-2xl);
  background: var(--text-primary);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  box-shadow: 4px 4px 0px var(--accent);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.feedback-btn:hover {
  box-shadow: 6px 6px 0px var(--accent);
  transform: translate(-2px, -2px);
}
.feedback-btn:active {
  box-shadow: 2px 2px 0px var(--accent);
  transform: translate(2px, 2px);
}
.feedback-btn svg,
.feedback-btn i {
  width: 20px;
  height: 20px;
}

/* === cards.css === */
/* ====================================
   Whale Analyzer — Investor Cards
   mdldm-style: bold borders, offset shadow, playful
   ==================================== */

/* ── Section Header — mdldm-style bold titles ── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: var(--border-width-bold) solid var(--border-bold);
}

.section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.section-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: var(--sp-xs);
  font-weight: var(--fw-medium);
}

.home-academy-section {
  margin-top: var(--sp-3xl);
  margin-bottom: var(--sp-2xl);
}

.home-academy-header {
  align-items: center;
}

.home-academy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
  padding: 9px 14px;
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 2px 2px 0 var(--border-bold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.home-academy-link:hover {
  background: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--border-bold);
}

.home-academy-link svg {
  width: 15px;
  height: 15px;
}

.home-academy-grid {
  margin-bottom: 0;
}


/* ── Search & Sort Toolbar ── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}

.toolbar-search {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.toolbar-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.toolbar-search input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.toolbar-search input:focus {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-card-sm);
}

.toolbar-search input::placeholder {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.toolbar-sort {
  position: relative;
}

.toolbar-sort select {
  appearance: none;
  -webkit-appearance: none;
  padding: 11px 36px 11px 16px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  min-width: 160px;
}

.toolbar-sort select:focus {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.toolbar-sort-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  width: 16px;
  height: 16px;
}

.toolbar-result-count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  line-height: 1;
}

.toolbar-result-count strong {
  color: var(--text-primary);
  font-weight: var(--fw-black);
}

.toolbar-category-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-xl);
}

.toolbar-category-filters .filter-btn {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  box-shadow: none;
  padding: 9px 16px;
  min-height: 38px;
  color: var(--text-secondary);
}

.toolbar-category-filters .filter-btn:hover {
  border-color: var(--border-bold);
  box-shadow: 2px 2px 0 var(--border-bold);
}

.toolbar-category-filters .filter-btn.active {
  border-color: var(--border-bold);
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 2px 2px 0 var(--border-bold);
}

.toolbar-sort-dir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: 2px 2px 0px var(--border-bold);
}

.toolbar-sort-dir:hover {
  background: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--border-bold);
}

.toolbar-sort-dir:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--border-bold);
}

.toolbar-sort-dir svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-spring);
}

.toolbar-sort-dir.asc svg {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .home-academy-header {
    align-items: flex-start;
    gap: var(--sp-md);
  }

  .home-academy-link {
    padding: 8px 12px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
  }

  .toolbar-search {
    grid-column: 1 / -1;
    min-width: 100%;
  }

  .toolbar-search input {
    min-height: 48px;
    padding: 10px 12px 10px 40px;
    font-size: var(--fs-sm);
  }

  .toolbar-sort {
    grid-column: 1 / 2;
    min-width: 0;
  }

  .toolbar-sort select {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 10px 34px 10px 14px;
    border-width: 2px;
    border-radius: 16px;
    font-size: var(--fs-xs);
    box-shadow: none;
  }

  .toolbar-sort-dir {
    grid-column: 2 / 3;
    width: 46px;
    height: 46px;
    border-width: 2px;
    border-radius: 16px;
    box-shadow: 2px 2px 0 var(--border-bold);
  }

  .toolbar-result-count {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 0 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-tertiary);
  }

  .toolbar-result-count .result-count-label {
    display: none;
  }

  .toolbar-category-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 0 calc(-1 * var(--sp-md)) var(--sp-lg);
    padding: 2px var(--sp-md) var(--sp-xs);
    scrollbar-width: none;
  }

  .toolbar-category-filters::-webkit-scrollbar {
    display: none;
  }

  .toolbar-category-filters .filter-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    border-width: 1.5px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    box-shadow: none;
  }

  .toolbar-category-filters .filter-btn:hover,
  .toolbar-category-filters .filter-btn.active {
    box-shadow: none;
  }
}


/* ── Card Grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: var(--sp-xl);
}

/* ── Investor Card — elevated mdldm style ── */
.investor-card {
  position: relative;
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.investor-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-card-hover);
  background: var(--bg-card-hover);
}

.investor-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--border-bold);
}

/* Popularity rank badge — top right corner */
.card-rank-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--text-primary);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  box-shadow: 2px 2px 0px var(--accent);
  z-index: 2;
}
.card-rank-badge.top3 {
  background: var(--accent);
  color: var(--text-primary);
  box-shadow: 2px 2px 0px var(--border-bold);
}

/* Card Header */
.card-header-row {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-md);
}

.card-avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: var(--border-width-bold) solid var(--border-bold);
  flex-shrink: 0;
  background: var(--bg-tertiary);
  transition: transform 300ms var(--ease-spring);
}

.investor-card:hover .card-avatar {
  transform: scale(1.05);
}

.card-avatar-initials {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--accent-text);
  background: var(--accent);
  flex-shrink: 0;
  border: var(--border-width-bold) solid var(--border-bold);
}

.card-identity { flex: 1; min-width: 0; }

.card-person-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.card-fund-name {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-medium);
}

/* Tags */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  min-height: 0;
}

.card-tag {
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

/* Description */
.card-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* Data status */
.card-data-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 24px;
  margin: calc(-1 * var(--sp-sm)) 0 var(--sp-md);
}

.card-data-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-bold);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card-data-badge.available {
  background: var(--color-green-dim);
  color: var(--color-green);
  border-color: var(--color-green);
}

.card-data-badge.pending {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border-color: var(--border-color-hover);
}

.card-data-badge.stale {
  background: var(--color-orange-dim);
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.card-data-source {
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metrics Row */
.card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  padding: var(--sp-md) 0;
  border-top: 2px solid var(--bg-tertiary);
}

.card-metric { text-align: center; }

.card-metric-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.card-metric-value.positive { color: var(--color-green); }
.card-metric-value.negative { color: var(--color-red); }

.card-metric-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-bold);
}

/* Performance Metrics Row — gold accent area */
.card-perf-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
  background: linear-gradient(135deg, rgba(255, 214, 0, 0.08) 0%, rgba(255, 214, 0, 0.02) 100%);
  border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-sm);
  border: 1px solid rgba(255, 214, 0, 0.15);
}

.card-perf-metric { text-align: center; }

.card-perf-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.card-perf-value.highlight-gold {
  color: #b8860b;
  font-size: var(--fs-md);
}

.card-perf-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: var(--sp-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.card-perf-since {
  display: block;
  font-size: 9px;
  color: var(--text-quaternary, #aaa);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-normal);
  margin-top: 1px;
}

/* Card Footer */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-md);
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1.5px solid var(--border-bold);
}
.investor-card:hover .card-cta {
  box-shadow: 2px 2px 0px var(--border-bold);
  transform: translate(-1px, -1px);
}

/* Type Badges — refined colors */
.card-type-badge {
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid;
}
.card-type-badge.hedge-fund {
  color: var(--color-blue);
  border-color: var(--color-blue);
  background: var(--color-blue-dim);
}
.card-type-badge.institution {
  color: var(--color-purple);
  border-color: var(--color-purple);
  background: var(--color-purple-dim);
}
.card-type-badge.family-office {
  color: var(--color-orange);
  border-color: var(--color-orange);
  background: var(--color-orange-dim);
}
.card-type-badge.chinese {
  color: var(--color-red);
  border-color: var(--color-red);
  background: var(--color-red-dim);
}
.card-type-badge.holding-company {
  color: #7c3aed;
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}
.card-type-badge.sovereign-fund {
  color: #0369a1;
  border-color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
}
.card-type-badge.asset-manager {
  color: #4338ca;
  border-color: #4338ca;
  background: rgba(67, 56, 202, 0.08);
}
.card-type-badge.corporate {
  color: var(--color-green);
  border-color: var(--color-green);
  background: var(--color-green-dim);
}

/* ── No Results ── */
.no-results {
  text-align: center;
  padding: var(--sp-4xl) var(--sp-xl);
  color: var(--text-tertiary);
}
.no-results-icon {
  font-size: 3rem;
  margin-bottom: var(--sp-lg);
  opacity: 0.5;
}

/* ── Stale Data Badge ── */
.card-stale-badge {
  font-size: 0.7em;
  padding: 2px 8px;
  border-radius: 20px;
  background: #F9731615;
  color: #F97316;
  font-weight: 600;
}

/* === components.css === */
/* ====================================
   Whale Analyzer — Shared Components
   ==================================== */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border: var(--border-width) solid var(--border-bold);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: all var(--transition-fast);
}
.btn:hover {
  box-shadow: var(--shadow-btn-hover);
  transform: translate(-1px, -1px);
}
.btn:active {
  box-shadow: 1px 1px 0px var(--border-bold);
  transform: translate(1px, 1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-ghost {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
  border: 1.5px solid;
}
.badge-green { background: var(--color-green-dim); color: var(--color-green); border-color: var(--color-green); }
.badge-red { background: var(--color-red-dim); color: var(--color-red); border-color: var(--color-red); }
.badge-blue { background: var(--color-blue-dim); color: var(--color-blue); border-color: var(--color-blue); }
.badge-yellow { background: var(--color-orange-dim); color: var(--color-orange); border-color: var(--color-orange); }
.badge-orange { background: var(--color-orange-dim); color: var(--color-orange); border-color: var(--color-orange); }
.badge-purple { background: var(--color-purple-dim); color: var(--color-purple); border-color: var(--color-purple); }

/* ── Generic Cards ── */
.card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-card);
}
.card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--sp-xs);
}
.card-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* ── Tables ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table thead th {
  text-align: left;
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--border-width) solid var(--border-bold);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table thead th:hover { color: var(--text-primary); }
.data-table thead th .sort-arrow {
  margin-left: var(--sp-2xs);
  opacity: 0.3;
}
.data-table thead th.sorted .sort-arrow {
  opacity: 1;
  color: var(--text-primary);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}
.data-table tbody tr:hover {
  background: var(--accent-dim);
}
.data-table tbody td {
  padding: var(--sp-md) var(--sp-lg);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.data-table .ticker-cell {
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  cursor: pointer;
}
.data-table .ticker-cell:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.data-table .sector-cell {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
  min-width: 150px;
}
.data-table .sector-cell span {
  display: block;
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}
.data-table .holding-industry {
  margin-top: 2px;
  color: var(--text-muted);
}
.data-table .positive { color: var(--color-green); font-weight: var(--fw-bold); }
.data-table .negative { color: var(--color-red); font-weight: var(--fw-bold); }
.data-table .text-right { text-align: right; }

/* ── Table wrapper ── */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--border-width-bold) solid var(--border-bold);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

/* ── Spinner ── */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: var(--sp-xl);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text-primary);
  color: #FFFFFF;
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-card);
  border: var(--border-width) solid var(--border-bold);
  z-index: var(--z-toast);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ── KPI Cards ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-lg);
}
.kpi-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-fast);
}
.kpi-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-card-hover);
}
.kpi-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-sm);
}
.kpi-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kpi-value.accent {
  background: var(--accent);
  padding: 0 var(--sp-sm);
  border-radius: var(--radius-sm);
  display: inline;
}
.kpi-value.green { color: var(--color-green); }
.kpi-value.red { color: var(--color-red); }
.kpi-sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-xs);
}

/* ── Chart Legend ── */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--border-bold);
}

/* ── Heatmap ── */
.heatmap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding: var(--sp-lg);
}
.heatmap-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-bold);
  padding: var(--sp-md);
  flex: 1 1 80px;
  min-width: 60px;
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
  background: var(--bg-secondary);
}
.heatmap-cell:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0px var(--border-bold);
}
.cell-ticker {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
}
.cell-change {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-2xs);
}

/* ── Tab Bar ── */
.tab-bar {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xl);
  background: var(--bg-secondary);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  padding: var(--sp-2xs) var(--sp-xs);
  box-shadow: var(--shadow-card-sm);
  overflow-x: auto;
  width: fit-content;
}
.tab-btn {
  padding: var(--sp-sm) var(--sp-xl);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tab-btn.active {
  color: var(--accent-text);
  background: var(--accent);
}

/* === detail.css === */
/* ====================================
   Whale Analyzer — Detail Page
   ==================================== */

/* ── Fund Banner ── */
.fund-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2xl);
  padding: var(--sp-2xl);
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-xl);
  box-shadow: var(--shadow-card);
  position: relative;
}

.fund-avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: var(--border-width-bold) solid var(--border-bold);
  flex-shrink: 0;
  background: var(--bg-tertiary);
}
.fund-avatar-initials {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--accent-text);
  background: var(--accent);
  flex-shrink: 0;
  border: var(--border-width-bold) solid var(--border-bold);
}

.fund-info { flex: 1; }
.fund-person {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2xs);
}
.fund-name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-sm);
}
.fund-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.fund-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-weight: var(--fw-medium);
}

/* ── Data Notices ── */
.data-notice {
  margin-bottom: var(--sp-xl);
  padding: var(--sp-lg) var(--sp-xl);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card-sm);
}

.data-notice-title {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  margin-bottom: var(--sp-xs);
}

.data-notice-meta {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
}

.data-notice p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-sm);
}

.data-notice.available {
  border-color: var(--color-green);
  background: var(--color-green-dim);
}

.data-notice.stale {
  border-color: var(--color-orange);
  background: var(--color-orange-dim);
}

.data-notice.pending {
  border-color: var(--border-bold);
  background: var(--bg-section-alt);
}

/* SEC EDGAR external link inside data notice */
.data-notice-sec-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-sm);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-green);
  background: transparent;
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.data-notice-sec-link:hover {
  background: var(--color-green);
  color: #000;
}
.data-notice.stale .data-notice-sec-link {
  color: var(--color-orange);
  border-color: var(--color-orange);
}
.data-notice.stale .data-notice-sec-link:hover {
  background: var(--color-orange);
  color: #000;
}

.pending-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-lg);
  align-items: start;
  padding: var(--sp-2xl);
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.pending-panel-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: var(--border-width-bold) solid var(--border-bold);
  color: var(--text-primary);
  flex-shrink: 0;
}

.pending-panel h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-sm);
}

.pending-panel p {
  line-height: var(--lh-relaxed);
}

.pending-panel-source {
  margin-top: var(--sp-md);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* ── Detail Sections ── */
.detail-section { margin-bottom: var(--sp-2xl); }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
}
.section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* ── Changes Cards ── */
.changes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
}
.changes-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.changes-card-header {
  padding: var(--sp-lg);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  border-bottom: var(--border-width) solid var(--border-bold);
}
.changes-card-header.buy {
  background: var(--color-green-dim);
  color: var(--color-green);
}
.changes-card-header.sell {
  background: var(--color-red-dim);
  color: var(--color-red);
}
.changes-list { padding: var(--sp-md); }
.change-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.change-item:hover { background: var(--accent-dim); }
.change-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-bold);
  color: var(--text-primary);
  margin-right: var(--sp-sm);
}
.change-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.change-ticker {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.change-name {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.change-value {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.change-value.positive { color: var(--color-green); }
.change-value.negative { color: var(--color-red); }

/* ── Chart Container ── */
.chart-container {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-card);
}
.chart-wrapper {
  position: relative;
  height: 320px;
}

/* ── Sector Breakdown ── */
.sector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
.sector-chart-col { min-height: 320px; }
.sector-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border-color);
}
.sector-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--border-bold);
}
.sector-name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.sector-pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Ad Slots ── */
.ad-slot {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  margin: var(--sp-xl) 0;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-color);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.ad-slot.ad-active {
  border: none;
  background: none;
  min-height: auto;
}

/* ====================================
   Stock Detail Page
   ==================================== */

/* ── Stock Header ── */
.stock-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-xl) var(--sp-2xl);
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-xl);
  box-shadow: var(--shadow-card);
}

.stock-header-left { flex: 1; }

.stock-ticker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.stock-ticker-name {
  font-size: 2.5rem;
  font-weight: var(--fw-black);
  letter-spacing: -1px;
  line-height: 1;
}

.stock-exchange-badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stock-company-name {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-top: var(--sp-xs);
}

.stock-classification-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}

.stock-header-right {
  text-align: right;
  flex-shrink: 0;
}

.stock-price-big {
  font-size: 2.2rem;
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}

.stock-price-change {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-xs);
}

/* ── KPI Grid ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}

.kpi-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-card-sm);
}

.kpi-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-xs);
}

.kpi-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.kpi-value.portfolio-value,
.kpi-value.accent {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
}

/* ── Whale Row List ── */
.whale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-color);
}

.whale-row:last-child {
  border-bottom: none;
}

.whale-row:hover {
  background: var(--accent-dim);
}

.whale-row-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex: 1;
  min-width: 0;
}

.whale-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 2px solid var(--border-bold);
  flex-shrink: 0;
}

.whale-row-initials {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--accent-text);
  background: var(--accent);
  flex-shrink: 0;
  border: 2px solid var(--border-bold);
}

.whale-row-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whale-row-fund {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whale-row-right {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-shrink: 0;
}

.whale-row-meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Ticker Link ── */
.ticker-link {
  color: var(--accent);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ticker-link:hover {
  color: var(--color-green, #00ff88);
  text-decoration: underline;
}

/* ── Responsive Stock Detail ── */
@media (max-width: 640px) {
  .stock-header {
    flex-direction: column;
    gap: var(--sp-md);
    padding: var(--sp-lg);
  }
  .stock-header-right {
    text-align: left;
  }
  .stock-price-big {
    font-size: 1.8rem;
  }
  .stock-ticker-name {
    font-size: 2rem;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .whale-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
  }
  .whale-row-right {
    flex-wrap: wrap;
    gap: var(--sp-sm);
  }
}

/* === academy.css === */
/* ====================================
   Whale Analyzer — Academy Hub Styles
   Investment Knowledge Hub main page
   MDLDM-inspired premium polish
   ==================================== */

/* ── Category Colors ── */
:root {
  --cat-experience: #FF6B35;
  --cat-philosophy: #7C3AED;
  --cat-tools: #059669;
  --cat-fundamentals: #2563EB;
  --cat-experience-dim: rgba(255, 107, 53, 0.10);
  --cat-philosophy-dim: rgba(124, 58, 237, 0.10);
  --cat-tools-dim: rgba(5, 150, 105, 0.10);
  --cat-fundamentals-dim: rgba(37, 99, 235, 0.10);
}

/* ── Academy Hero ── */
.academy-hero {
  text-align: center;
  padding: var(--sp-xl) 0 var(--sp-2xl);
  position: relative;
}

.academy-hero::before {
  content: none;
}

@keyframes heroGlow {
  from { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
  to { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

.academy-hero-icon {
  display: none;
}

@keyframes heroIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.academy-hero h1 {
  margin-bottom: var(--sp-lg);
}

.academy-hero .hero-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: var(--lh-relaxed);
}

/* ── Search Bar ── */
.academy-search {
  max-width: 500px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}

.academy-search input {
  width: 100%;
  padding: 14px 22px 14px 48px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card-sm);
}

.academy-search input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-card), 0 0 0 4px var(--accent-dim);
  transform: translateY(-1px);
}

.academy-search input::placeholder {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.academy-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 16px;
  transition: color var(--transition-fast);
}

.academy-search input:focus ~ .academy-search-icon,
.academy-search:focus-within .academy-search-icon {
  color: var(--accent-dark);
}

/* ── Category Tabs ── */
.academy-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.academy-tab {
  padding: 9px 20px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.academy-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: -1;
}

.academy-tab:hover {
  border-color: var(--border-bold);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 2px 2px 0 var(--border-bold);
}

.academy-tab.active {
  border-color: var(--border-bold);
  background: var(--text-primary);
  color: var(--bg-primary);
  box-shadow: var(--shadow-btn);
  font-weight: var(--fw-bold);
}

.academy-tab.active:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

/* ── Card Grid ── */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 60px;
}

/* ── Article Card (mdldm style) ── */
.academy-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
}

.academy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 60%, var(--accent-dim) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
  pointer-events: none;
}

.academy-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-card-hover);
}

.academy-card:hover::before {
  opacity: 1;
}

.academy-card .card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.academy-card .card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  will-change: transform;
}

.academy-card:hover .card-cover img {
  transform: scale(1.06);
}

.academy-card .card-cover-overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  transition: opacity var(--transition-base);
  opacity: 0.5;
}

.academy-card:hover .card-cover-overlay {
  opacity: 0.3;
}

/* ── Cover Inner (emoji icon for related cards) ── */
.academy-card .card-cover-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform var(--transition-base);
}

.academy-card:hover .card-cover-inner {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ── Featured Badge ── */
.card-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fw-bold);
  background: var(--accent);
  color: var(--accent-text);
  border: 2px solid var(--border-bold);
  box-shadow: 2px 2px 0 var(--border-bold);
  letter-spacing: 0.5px;
  z-index: 2;
  text-transform: uppercase;
}

/* ── Reading Time Visual Dots ── */
.card-time-visual {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-dots {
  display: flex;
  gap: 3px;
}

.time-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background var(--transition-fast);
}

.time-dot.active {
  background: var(--accent-dark);
}

.academy-card .card-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.card-category-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-category-badge[data-cat="experience"] {
  background: rgba(255, 255, 255, 0.92);
  color: #b94400;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.card-category-badge[data-cat="experience"]::before {
  background: #FF6B35;
}

.card-category-badge[data-cat="philosophy"] {
  background: rgba(255, 255, 255, 0.92);
  color: #5b21b6;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.card-category-badge[data-cat="philosophy"]::before {
  background: #7C3AED;
}

.card-category-badge[data-cat="tools"] {
  background: rgba(255, 255, 255, 0.92);
  color: #047857;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.card-category-badge[data-cat="tools"]::before {
  background: #059669;
}

.card-category-badge[data-cat="fundamentals"] {
  background: rgba(255, 255, 255, 0.92);
  color: #1d4ed8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.card-category-badge[data-cat="fundamentals"]::before {
  background: #2563EB;
}

.academy-card .card-body {
  padding: 20px 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.academy-card .card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: 8px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.academy-card:hover .card-title {
  color: var(--accent-dark);
}

.academy-card .card-excerpt {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card Footer (new — clean separator + meta) ── */
.academy-card .card-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1.5px solid var(--border-color);
  margin-top: auto;
}

.academy-card .card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.academy-card .card-reading-time {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.academy-card .card-date {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.academy-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.academy-card .card-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
  letter-spacing: 0.2px;
}

.academy-card:hover .card-tag {
  background: var(--accent-dim);
  color: var(--accent-dark);
  border-color: rgba(255, 214, 0, 0.2);
}

/* ── Difficulty Badge ── */
.difficulty-badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.difficulty-badge.beginner {
  background: rgba(34, 197, 94, 0.10);
  color: var(--color-green);
  border: 1px solid rgba(34, 197, 94, 0.15);
}
.difficulty-badge.intermediate {
  background: rgba(59, 130, 246, 0.10);
  color: var(--color-blue);
  border: 1px solid rgba(59, 130, 246, 0.15);
}
.difficulty-badge.advanced {
  background: rgba(249, 115, 22, 0.10);
  color: var(--color-orange);
  border: 1px solid rgba(249, 115, 22, 0.15);
}

/* ── Featured Section ── */
.academy-featured-section {
  margin-bottom: 48px;
}

.academy-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.academy-section-header h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.5px;
}

.academy-section-header .section-icon {
  font-size: 22px;
}

/* ── No Results ── */
.academy-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
}

.academy-no-results .no-results-icon {
  display: none;
}

.academy-no-results p {
  font-size: var(--fs-sm);
  max-width: 360px;
  margin: 0 auto;
}

/* ── Result Count ── */
.academy-result-count {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Article Count Pill (hub footer) ── */
.academy-footer-stats {
  text-align: center;
  padding: 20px 0 0;
  margin-top: 0;
}

.academy-footer-stats .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .academy-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 639px) {
  .academy-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .academy-hero {
    padding: var(--sp-md) 0 var(--sp-lg);
  }

  .academy-hero .hero-title {
    font-size: var(--fs-xl);
  }

  .academy-hero .hero-subtitle {
    font-size: var(--fs-sm);
    padding: 0 16px;
  }

  .academy-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    flex-wrap: nowrap;
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
    scrollbar-width: none;
  }

  .academy-tabs::-webkit-scrollbar {
    display: none;
  }

  .academy-card .card-cover {
    aspect-ratio: 16 / 9;
  }

  .academy-card .card-body {
    padding: 16px 16px 14px;
  }

  .card-featured-badge {
    font-size: 9px;
    padding: 3px 8px;
  }

  .time-dots {
    display: none;
  }

  .academy-search {
    margin: 0 16px 32px;
  }

  .academy-tab {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* === article.css === */
/* ====================================
   Whale Analyzer — Article Detail Styles
   Premium reading experience
   MDLDM-inspired polish pass
   ==================================== */

/* ── Reading Progress Bar ── */
.reading-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent));
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  z-index: var(--z-sticky);
  transition: width 80ms linear;
  border-radius: 0 2px 2px 0;
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Article Container ── */
.article-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}

/* ── Breadcrumb ── */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 36px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
}

.article-breadcrumb a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}

.article-breadcrumb a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.article-breadcrumb .sep {
  color: var(--text-muted);
  font-size: 10px;
}

.article-breadcrumb span:last-child {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Article Header ── */
.article-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--border-color);
}

.article-header .article-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.article-header .article-category-badge {
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.article-header .article-reading-time,
.article-header .article-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.article-header .article-date::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: middle;
  margin-right: 0;
}

.article-header h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: var(--fw-black);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.article-header .article-title-en {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  margin-bottom: 20px;
  letter-spacing: 0.2px;
}

.article-header .article-excerpt {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.75;
  font-style: italic;
  padding: 16px 20px;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-header .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.article-header .article-tag {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.3px;
}

.article-header .article-tag:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--border-bold);
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--border-bold);
}

/* ── Article Body ── */
.article-body {
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.article-body h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--fw-extrabold);
  margin: 56px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  position: relative;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

/* Accent underline on h2 — like MDLDM section highlight */
.article-body h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.article-body h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin: 40px 0 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.article-body p {
  margin-bottom: 22px;
  color: var(--text-primary);
}

.article-body ul,
.article-body ol {
  padding-left: 24px;
  margin-bottom: 22px;
}

.article-body ul {
  list-style-type: disc;
}

.article-body ol {
  list-style-type: decimal;
}

.article-insight ul {
  list-style-type: '→  ';
}

.article-body li {
  margin-bottom: 10px;
  line-height: 1.75;
  position: relative;
}

.article-body strong {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: linear-gradient(transparent 60%, var(--accent-dim) 60%);
  padding: 0 2px;
}

.article-body em {
  font-style: italic;
  color: var(--text-secondary);
}

/* ── Quote Card — Premium ── */
.article-quote {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin: 36px 0;
  position: relative;
  box-shadow: var(--shadow-card-sm);
  transition: all var(--transition-base);
}

.article-quote:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.article-quote::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: 20px;
  font-size: 72px;
  color: var(--accent);
  opacity: 0.35;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  pointer-events: none;
}

/* Yellow accent stripe on left */
.article-quote::after {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.article-quote .quote-text {
  font-size: 17px;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  font-weight: var(--fw-medium);
}

.article-quote .quote-author {
  font-size: var(--fs-sm);
  color: var(--accent-dark);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-quote .quote-author::before {
  content: '——';
  letter-spacing: -2px;
  color: var(--text-muted);
}

/* ── Insight Card — Premium ── */
.article-insight {
  background: linear-gradient(135deg, rgba(255, 244, 178, 0.15) 0%, rgba(255, 214, 0, 0.08) 100%);
  border: 2px solid rgba(255, 214, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 36px 0;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.article-insight:hover {
  border-color: rgba(255, 214, 0, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 214, 0, 0.08);
}

/* Subtle left accent bar */
.article-insight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-radius: 0 2px 2px 0;
}

/* Decorative glow circle top-right */
.article-insight::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}

.article-insight .insight-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

.article-insight ul {
  padding-left: 22px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.article-insight li {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.75;
  padding-left: 4px;
}

.article-insight li::marker {
  color: var(--accent-dark);
}

/* ── KPI Data Cards — Premium ── */
.article-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 36px 0;
}

.article-kpi {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.article-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, var(--accent-dim) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.article-kpi:hover {
  border-color: var(--border-bold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-sm);
}

.article-kpi:hover::before {
  opacity: 1;
}

.article-kpi .kpi-value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: var(--fw-extrabold);
  color: var(--accent-dark);
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
}

/* Ensure inline color overrides remain readable in light mode */
[data-theme="light"] .article-kpi .kpi-value[style*="color"] {
  filter: brightness(0.7);
}

.article-kpi .kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 6px;
  font-weight: var(--fw-semibold);
  position: relative;
  z-index: 1;
}

/* ── Comparison Table — Premium ── */
.article-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  position: relative;
}

/* Scroll hint for mobile */
.article-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--bg-primary));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

@media (max-width: 768px) {
  .article-table-wrap::after {
    opacity: 1;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 480px;
}

.article-table th {
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 14px 18px;
  text-align: left;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: none;
  white-space: nowrap;
}

.article-table th:first-child {
  border-radius: 0;
}

.article-table th:last-child {
  border-radius: 0;
}

.article-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.article-table tr:last-child td {
  border-bottom: none;
}

.article-table tbody tr {
  transition: background var(--transition-fast);
}

.article-table tbody tr:nth-child(even) {
  background: var(--bg-section-alt);
}

.article-table tbody tr:hover {
  background: var(--accent-dim);
}

/* ── Serenity Data Sections ── */
.serenity-tier-board {
  display: grid;
  gap: 20px;
  margin: 36px 0;
}

.serenity-tier-group {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.01);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.serenity-tier-group:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

.serenity-tier-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  align-items: center;
  padding-bottom: var(--sp-md);
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.06);
}

.serenity-tier-heading h3 {
  border: 0 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.serenity-tier-heading p {
  margin: 0 !important;
  color: var(--text-secondary);
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}

.serenity-tier-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.serenity-tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.serenity-tier-chip {
  min-height: 168px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.serenity-tier-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

.serenity-tier-chip-top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  align-items: center;
  margin-bottom: 6px;
}

.serenity-tier-chip-top strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.2px;
  color: #111827;
}

.serenity-tier-chip-top span,
.serenity-metrics .positive,
.serenity-tier-chip .positive {
  color: #10B981 !important;
  font-weight: var(--fw-bold);
}

.serenity-tier-chip-top span.negative,
.serenity-metrics .negative,
.serenity-tier-chip .negative {
  color: #EF4444 !important;
  font-weight: var(--fw-bold);
}

.serenity-tier-chip-meta,
.serenity-tier-reason {
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.serenity-tier-chip p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 0 !important;
  color: var(--text-secondary);
  font-size: var(--fs-xs) !important;
  line-height: 1.6 !important;
  flex-grow: 1;
}

.serenity-tier-more {
  margin-top: 20px;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: 6px;
}

.serenity-tier-more::before {
  content: '✦';
  color: var(--accent-dark);
}

/* Tier specific gradients and enhancements */
.serenity-tier-group.top_recommendation {
  background: linear-gradient(135deg, rgba(255, 253, 245, 0.8) 0%, rgba(255, 248, 220, 0.6) 100%);
  border: 1px solid rgba(217, 119, 6, 0.15);
}
.serenity-tier-group.top_recommendation .serenity-tier-heading > span {
  background: #FEF3C7;
  color: #D97706;
  border-color: rgba(217, 119, 6, 0.2);
}
.serenity-tier-group.top_recommendation .serenity-tier-chip {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: rgba(217, 119, 6, 0.08);
}
.serenity-tier-group.top_recommendation .serenity-tier-chip:hover {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.08);
}

.serenity-tier-group.high_conviction_support {
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.8) 0%, rgba(238, 235, 253, 0.6) 100%);
  border: 1px solid rgba(124, 58, 237, 0.15);
}
.serenity-tier-group.high_conviction_support .serenity-tier-heading > span {
  background: #EDE9FE;
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.2);
}
.serenity-tier-group.high_conviction_support .serenity-tier-chip {
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
  border-color: rgba(124, 58, 237, 0.08);
}
.serenity-tier-group.high_conviction_support .serenity-tier-chip:hover {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.08);
}

.serenity-tier-group.negative_caution {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.8) 0%, rgba(254, 226, 226, 0.6) 100%);
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.serenity-tier-group.negative_caution .serenity-tier-heading > span {
  background: #FEE2E2;
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
}
.serenity-tier-group.negative_caution .serenity-tier-chip {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
  border-color: rgba(239, 68, 68, 0.08);
}
.serenity-tier-group.negative_caution .serenity-tier-chip:hover {
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.08);
}

.serenity-tier-mini {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  background: #FFFBEB;
  color: #D97706;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.serenity-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 36px 0;
}

.serenity-chart-card {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.01);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.serenity-chart-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
}

.serenity-card-head {
  margin-bottom: var(--sp-sm);
}

.serenity-avatar {
  width: 52px;
  height: 52px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  overflow: hidden;
  background: #111827;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.serenity-card-head .card-person-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.3px;
  color: #111827;
}

.serenity-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ECFDF5;
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.05);
}

.serenity-return.negative {
  background: #FEF2F2;
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.05);
}

.serenity-return.positive {
  background: #ECFDF5;
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.2);
}

.serenity-return.neutral {
  background: #F9FAFB;
  color: #6B7280;
  border-color: rgba(107, 114, 128, 0.2);
}

.serenity-return:where(:not(:empty)) {
  min-width: 72px;
}

.serenity-card-flags {
  margin: 0 0 16px;
  display: flex;
  gap: 6px;
}

.serenity-chart-frame {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  background: #fffdf7;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.serenity-chart-frame img,
.serenity-chart-card > img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: #fffdf7;
}

.serenity-metrics {
  margin-top: var(--sp-sm);
  padding: var(--sp-md) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.serenity-metrics .card-metric-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.serenity-metrics .card-metric-label {
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: uppercase;
}

.serenity-card-meta {
  margin: var(--sp-md) 0 var(--sp-xs);
  font-size: var(--fs-xs) !important;
  color: var(--text-tertiary);
  font-weight: var(--fw-semibold);
  line-height: 1.6 !important;
}

.serenity-card-thesis {
  margin-bottom: var(--sp-md) !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-secondary);
  line-height: 1.7 !important;
}

.serenity-card-footer {
  margin-top: 16px;
}

.serenity-card-footer .card-type-badge {
  color: var(--text-tertiary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #F9FAFB;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}

.serenity-source-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.serenity-source-primary {
  text-decoration: none !important;
}

.serenity-source-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-decoration: none !important;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.serenity-source-fallback:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.serenity-source-actions.compact {
  gap: var(--sp-xs);
  flex-wrap: nowrap;
}

.serenity-source-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #FEF3C7;
  color: #D97706 !important;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.serenity-source-link.secondary {
  background: #ffffff;
  color: #6B7280 !important;
  border-color: rgba(0,0,0,0.08);
}

.serenity-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 32px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.serenity-table-wrap .article-table {
  min-width: 980px;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.serenity-appendix-table td {
  vertical-align: top;
}

@media (max-width: 640px) {
  .serenity-tier-group {
    padding: var(--sp-md);
  }

  .serenity-tier-heading {
    flex-direction: column;
  }

  .serenity-tier-list {
    grid-template-columns: 1fr;
  }

  .serenity-tier-chip {
    min-height: 0;
  }

  .serenity-chart-card {
    padding: var(--sp-md);
    box-shadow: var(--shadow-card-sm);
  }

  .serenity-chart-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

  .serenity-avatar {
    width: 56px;
    height: 56px;
    font-size: var(--fs-sm);
  }

  .serenity-card-head {
    align-items: flex-start;
    gap: var(--sp-sm);
  }

  .serenity-card-head .card-person-name {
    font-size: var(--fs-lg);
  }

  .serenity-return {
    font-size: var(--fs-xs);
    min-width: auto;
  }

  .serenity-metrics {
    grid-template-columns: 1fr;
    gap: var(--sp-xs);
  }

  .serenity-metrics .card-metric {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-sm);
    text-align: left;
  }

  .serenity-card-footer {
    align-items: flex-start;
  }
}

/* ── Article Image ── */
.article-image {
  margin: 36px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width-bold) solid var(--border-bold);
  box-shadow: var(--shadow-card-sm);
  transition: all var(--transition-base);
}

.article-image:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.article-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-image .image-caption {
  padding: 12px 18px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  text-align: center;
  font-style: italic;
  letter-spacing: 0.2px;
}

/* ── Divider — Premium ── */
.article-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: 48px 0;
  position: relative;
}

.article-divider::after {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-primary);
  padding: 0 12px;
  color: var(--accent);
  font-size: 10px;
}

/* ── Related Articles ── */
.article-related {
  margin-top: 64px;
  padding-top: 40px;
  border-top: var(--border-width-bold) solid var(--border-bold);
}

.article-related h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  margin-bottom: 24px;
  border-bottom: none;
  letter-spacing: -0.5px;
}

.article-related h2::after {
  display: none;
}

.article-related .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* ── Back Button — Premium ── */
.article-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  margin-top: 48px;
  letter-spacing: 0.3px;
}

.article-back-btn:hover {
  background: var(--accent);
  color: var(--accent-text);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-btn-hover);
}

.article-back-btn:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--border-bold);
}

/* ── Article Footer / Source Note ── */
.article-source-note {
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
  border: 1px solid var(--border-color);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .article-container {
    padding: 20px 16px 60px;
  }

  .article-body {
    font-size: 15px;
    line-height: 1.85;
  }

  .article-table-wrap {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: var(--radius-sm);
  }

  .article-table {
    font-size: 12px;
    min-width: 420px;
  }

  .article-table th {
    padding: 10px 12px;
    font-size: 10px;
  }

  .article-table td {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
  }

  .article-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .article-kpi {
    padding: 16px 12px;
  }

  .article-kpi .kpi-value {
    font-size: var(--fs-xl);
  }

  .article-related .related-grid {
    grid-template-columns: 1fr;
  }

  .article-quote {
    padding: 22px 24px;
    margin: 28px 0;
  }

  .article-insight {
    padding: 20px 22px;
    margin: 28px 0;
  }

  .article-body h2 {
    margin-top: 40px;
  }
}

@media (max-width: 639px) {
  .article-container {
    margin-left: calc(-1 * var(--sp-md));
    margin-right: calc(-1 * var(--sp-md));
    padding: 12px 16px 60px;
  }

  .article-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
  }

  .article-header h1 {
    font-size: 24px;
    letter-spacing: -0.8px;
  }

  .article-header .article-excerpt {
    font-size: var(--fs-sm);
    padding: 12px 14px;
  }

  .article-header .article-tags {
    gap: 6px;
    margin-top: 18px;
  }

  .article-header .article-tag {
    padding: 4px 10px;
    font-size: 10px;
  }

  .article-body {
    font-size: 14.5px;
    line-height: 1.8;
  }

  .article-body h2 {
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 16px;
  }

  .article-body h3 {
    font-size: var(--fs-lg);
    margin-top: 28px;
  }

  .article-body p {
    margin-bottom: 18px;
  }

  /* Tables — extend to full viewport width */
  .article-table-wrap {
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0;
  }

  .article-table {
    font-size: 11px;
    min-width: 360px;
  }

  .article-table th {
    padding: 8px 10px;
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  .article-table td {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
  }

  .article-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .article-kpi {
    padding: 14px 10px;
  }

  .article-kpi .kpi-value {
    font-size: var(--fs-lg);
  }

  .article-kpi .kpi-label {
    font-size: 9px;
    letter-spacing: 0.8px;
  }

  .article-related .related-grid {
    grid-template-columns: 1fr;
  }

  .article-quote {
    padding: 18px;
    margin: 24px 0;
  }

  .article-quote .quote-text {
    font-size: 14.5px;
  }

  .article-insight {
    padding: 14px 16px;
    margin: 24px 0;
  }

  .article-insight li {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .article-divider {
    margin: 36px 0;
  }

  .article-breadcrumb span:last-child {
    max-width: 160px;
  }

  .article-back-btn {
    padding: 10px 20px;
    font-size: var(--fs-xs);
    margin-top: 36px;
  }

  .article-related {
    margin-top: 48px;
    padding-top: 28px;
  }
}

/* === pulse.css === */
/* ====================================
   Whale Analyzer — Institutional Pulse
   ==================================== */

.pulse-hero {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.pulse-eyebrow,
.pulse-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-xs);
}

.pulse-hero .hero-title {
  margin-bottom: var(--sp-sm);
}

.pulse-hero .hero-subtitle {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.pulse-meta-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.pulse-quarter-badge,
.pulse-sample-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-bold);
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-btn);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
}

.pulse-sample-badge {
  background: var(--color-orange-dim);
  color: var(--color-orange);
  border-color: var(--color-orange);
  box-shadow: none;
}

.pulse-panel {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-xl);
}

.pulse-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}

.pulse-panel-header h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  margin: 0;
}

.pulse-ticker-select {
  min-width: 120px;
  padding: var(--sp-sm) var(--sp-md);
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  box-shadow: var(--shadow-card-sm);
}

.pulse-ticker-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.pulse-ticker-btn,
.pulse-overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  min-height: 40px;
  padding: var(--sp-sm) var(--sp-md);
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  cursor: pointer;
  box-shadow: var(--shadow-card-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.pulse-ticker-btn:hover,
.pulse-overlay-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-btn-hover);
}

.pulse-ticker-btn.active,
.pulse-overlay-btn.active {
  background: var(--accent);
  color: var(--accent-text);
}

.pulse-ticker-btn small {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
}

.pulse-ticker-btn.active small {
  background: var(--text-primary);
  color: #fff;
}

.pulse-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

.pulse-kpi {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.pulse-kpi .kpi-value {
  font-size: var(--fs-xl);
  line-height: 1.1;
  word-break: break-word;
}

.pulse-kpi .kpi-value.green { color: var(--color-green); }
.pulse-kpi .kpi-value.red { color: var(--color-red); }
.pulse-kpi .kpi-value.blue { color: var(--color-blue); }
.pulse-kpi .kpi-value.accent {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0 var(--sp-xs);
  border-radius: var(--radius-sm);
}

.pulse-overlay-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-sm);
}

.pulse-chart-wrap {
  position: relative;
  height: 360px;
  min-height: 260px;
}

.pulse-axis-note {
  margin-top: var(--sp-md);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.pulse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: var(--sp-xl);
  align-items: start;
}

.pulse-grid .pulse-panel {
  margin-bottom: 0;
}

.pulse-table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-md);
}

.pulse-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.pulse-table th,
.pulse-table td {
  padding: var(--sp-md);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.pulse-table th {
  text-align: left;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  background: var(--bg-section-alt);
}

.pulse-table tr:last-child td {
  border-bottom: 0;
}

.pulse-manager-name {
  color: var(--text-primary);
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
}

.pulse-manager-cik {
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  margin-top: 2px;
}

.pulse-value {
  color: var(--text-primary);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pulse-coverage-list {
  display: grid;
  gap: var(--sp-sm);
}

.pulse-coverage-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.pulse-coverage-list span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.pulse-coverage-list strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-align: right;
}

.pulse-cusip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
}

.pulse-cusip-list span {
  display: inline-flex;
  padding: var(--sp-2xs) var(--sp-sm);
  border: 1.5px solid var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.pulse-notes {
  margin-top: var(--sp-lg);
  padding-left: 18px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.pulse-empty {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: var(--sp-xl);
  text-align: center;
  border: var(--border-width) dashed var(--border-color-hover);
  border-radius: var(--radius-md);
}

@media (max-width: 1100px) {
  .pulse-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pulse-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .pulse-panel {
    padding: var(--sp-lg);
  }

  .pulse-panel-header {
    flex-direction: column;
  }

  .pulse-ticker-select {
    width: 100%;
  }

  .pulse-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pulse-chart-wrap {
    height: 300px;
  }

  .pulse-overlay-controls {
    justify-content: flex-start;
  }

  .pulse-table th:nth-child(3),
  .pulse-table td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 440px) {
  .pulse-kpi-row {
    grid-template-columns: 1fr;
  }

  .pulse-ticker-btn {
    flex: 1 1 calc(50% - var(--sp-sm));
  }
}

/* === trump.css === */
/* ====================================
   Whale Analyzer - Trump Concept Stocks
   ==================================== */

.trump-hero {
  text-align: center;
  margin-bottom: var(--sp-2xl);
  padding: var(--sp-xl) 0 var(--sp-lg);
}

.trump-hero .hero-title {
  margin-bottom: var(--sp-lg);
}

.trump-hero .hero-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  max-width: 760px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

.trump-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  border: var(--border-width) solid var(--border-bold);
  box-shadow: var(--shadow-btn);
  margin-top: var(--sp-md);
}

.trump-source-dot {
  color: var(--text-muted);
}

.trump-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}

.trump-kpi {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  padding: 18px 16px;
  text-align: center;
}

.trump-kpi-value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: var(--fw-black);
  color: var(--text-primary);
}

.trump-kpi-value.green { color: var(--color-green); }
.trump-kpi-value.red { color: var(--color-red); }
.trump-kpi-value.accent { color: var(--accent-dark); }

.trump-kpi-label {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.trump-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-bottom: var(--sp-lg);
}

.trump-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 0;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card-sm);
  min-width: min(760px, 100%);
}

.trump-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  border: none;
  border-right: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  cursor: pointer;
}

.trump-tab:last-child {
  border-right: none;
}

.trump-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  opacity: 0.72;
}

.trump-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.trump-tab.active {
  background: var(--accent);
  color: var(--accent-text);
}

.trump-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.trump-sort-controls {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
}

.trump-sort {
  background: var(--bg-card);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
}

.trump-sort-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  padding: 8px 12px;
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  cursor: pointer;
}

.trump-sort-dir:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-card-hover);
}

.trump-results-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin: -4px 0 var(--sp-lg);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.trump-results-meta span {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
}

.trump-results-meta b {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
}

.trump-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}

.trump-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  padding: 24px;
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trump-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-card-hover);
}

.trump-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}

.trump-symbol {
  min-width: 0;
}

.trump-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1;
  font-weight: var(--fw-black);
  text-decoration: none;
}

.trump-company {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.trump-price-now {
  flex: 0 0 auto;
  min-width: 150px;
  text-align: right;
}

.trump-price-big {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  font-weight: var(--fw-black);
}

.trump-price-sub {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.trump-return {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-bold);
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.trump-return.green {
  color: var(--color-green);
  background: rgba(20, 184, 106, 0.12);
  border-color: var(--color-green);
}

.trump-return.red {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--color-red);
}

.trump-return.muted {
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.trump-card-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-sm);
}

.trump-card-metric {
  min-width: 0;
  padding: 14px 12px;
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: var(--shadow-card-sm);
  text-align: center;
}

.trump-card-metric b {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: clamp(15px, 2vw, 21px);
  font-weight: var(--fw-black);
  overflow-wrap: anywhere;
}

.trump-card-metric b.green { color: var(--color-green); }
.trump-card-metric b.red { color: var(--color-red); }
.trump-card-metric b.muted { color: var(--text-muted); }

.trump-card-metric span {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.trump-chart-panel {
  background: var(--bg-secondary);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  padding: 18px;
  min-width: 0;
}

.trump-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.trump-chart-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--fw-black);
}

.trump-chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.trump-chart-frame {
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.trump-chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 920 / 420;
}

.trump-summary {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.trump-links {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-top: auto;
}

.trump-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: var(--border-width) solid var(--border-bold);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
  box-shadow: var(--shadow-btn);
}

.trump-link-soft {
  background: var(--bg-card);
  color: var(--accent-dark);
  border-color: var(--accent);
}

.trump-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.trump-source-note {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

@media (max-width: 860px) {
  .trump-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trump-card-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .trump-toolbar {
    align-items: stretch;
  }

  .trump-tabs,
  .trump-sort-wrap,
  .trump-sort-controls,
  .trump-sort {
    width: 100%;
  }

  .trump-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-tab:nth-child(2n) {
    border-right: none;
  }

  .trump-sort-wrap {
    justify-content: space-between;
  }

  .trump-sort {
    flex: 1 1 auto;
  }

  .trump-sort-dir {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .trump-hero {
    padding-top: var(--sp-md);
  }

  .trump-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  .trump-tabs {
    grid-template-columns: 1fr;
  }

  .trump-sort-wrap {
    align-items: stretch;
    flex-direction: column;
  }

  .trump-tab {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .trump-tab:last-child {
    border-bottom: none;
  }

  .trump-card {
    padding: 16px;
  }

  .trump-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trump-price-now {
    min-width: 0;
    text-align: left;
  }

  .trump-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-chart-panel {
    padding: 12px;
  }

  .trump-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .trump-chart-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .trump-kpi-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .trump-card-metrics {
    grid-template-columns: 1fr;
  }
}

/* ====================================
   Trump Board — Enhancements
   search, time range, distribution,
   share button, skeleton, dual-column,
   compact view
   ==================================== */

/* --- Skeleton (loading) --- */
.trump-skeleton-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
}

.trump-skeleton-card {
  height: 220px;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.trump-skeleton-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bg-secondary) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: trump-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes trump-skeleton-shimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .trump-skeleton-card::before { animation: none; }
}

/* --- Toolbar rows --- */
.trump-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-bottom: var(--sp-sm);
}

.trump-toolbar-row:last-child {
  margin-bottom: 0;
}

/* --- Search input --- */
.trump-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 480px;
}

.trump-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.trump-search {
  width: 100%;
  padding: 10px 36px 10px 36px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.trump-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-btn), 0 0 0 3px var(--accent-dim);
}

.trump-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.trump-search-clear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
}

.trump-search-clear:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* --- View mode toggle --- */
.trump-view-toggle {
  display: inline-flex;
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card-sm);
}

.trump-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: var(--bg-card);
  color: var(--text-tertiary);
  cursor: pointer;
}

.trump-view-btn + .trump-view-btn {
  border-left: 1px solid var(--border-color);
}

.trump-view-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.trump-view-btn.active {
  background: var(--accent);
  color: var(--accent-text);
}

/* --- Time range selector --- */
.trump-range-row {
  flex-wrap: nowrap;
}

.trump-range-label {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.trump-range-group {
  display: inline-flex;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-card);
}

.trump-range-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  cursor: pointer;
  white-space: nowrap;
}

.trump-range-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.trump-range-btn.active {
  background: var(--accent);
  color: var(--accent-text);
}

/* --- Distribution summary --- */
.trump-distribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--sp-xl);
  padding: 14px 18px;
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
}

.trump-dist-bars {
  display: flex;
  width: 100%;
  height: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.trump-dist-bar {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}

.trump-dist-bar.green { background: var(--color-green); }
.trump-dist-bar.red { background: var(--color-red); }
.trump-dist-bar.muted { background: var(--text-muted); opacity: 0.4; }

.trump-dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.trump-dist-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trump-dist-item b {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: var(--fw-black);
}

.trump-dist-item b.green { color: var(--color-green); }
.trump-dist-item b.red { color: var(--color-red); }

.trump-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.trump-dot.green { background: var(--color-green); }
.trump-dot.red { background: var(--color-red); }
.trump-dot.muted { background: var(--text-muted); opacity: 0.5; }

/* --- Share button --- */
.trump-share-btn {
  cursor: pointer;
  font-family: inherit;
}

.trump-share-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* --- Dual-column grid on wider screens --- */
.trump-grid[data-view="comfy"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
}

@media (min-width: 1100px) {
  .trump-grid[data-view="comfy"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1500px) {
  .trump-grid[data-view="comfy"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Compact view (denser grid, smaller cards) --- */
.trump-grid[data-view="compact"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-md);
}

.trump-grid[data-view="compact"] .trump-card {
  padding: 16px;
  gap: var(--sp-md);
}

.trump-grid[data-view="compact"] .trump-ticker {
  font-size: 22px;
}

.trump-grid[data-view="compact"] .trump-price-big {
  font-size: 22px;
}

.trump-grid[data-view="compact"] .trump-card-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trump-grid[data-view="compact"] .trump-chart-panel {
  padding: 12px;
}

.trump-grid[data-view="compact"] .trump-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Mobile adjustments for new controls --- */
@media (max-width: 860px) {
  .trump-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .trump-search-wrap {
    max-width: none;
  }

  .trump-range-row {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trump-range-group {
    flex-wrap: nowrap;
  }
}

@media (max-width: 560px) {
  .trump-dist-legend {
    gap: var(--sp-sm);
  }
}

/* ====================================
   Trump Card — Interactive Chart (Chart.js)
   Matches the stock detail page chart card style.
   ==================================== */

.trump-chart-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  padding: 18px;
  min-width: 0;
}

.trump-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.trump-chart-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.trump-chart-range {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-left: 4px;
}

.trump-yahoo-link {
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.trump-yahoo-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-card-hover);
}

/* Frame holds both the static fallback SVG (visible until Chart.js mounts)
   and the canvas (positioned on top once mounted). */
.trump-chart-frame {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.trump-chart-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.trump-chart-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: transparent;
}

/* Once Chart.js mounts, hide fallback and reveal the canvas. */
.trump-chart-frame.chart-mounted .trump-chart-fallback {
  opacity: 0;
}

.trump-chart-frame.chart-mounted .trump-chart-canvas {
  opacity: 1;
}

/* Loading indicator while Chart.js / history JSON is fetched */
.trump-chart-frame.chart-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2.5px solid var(--border-bold);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: trump-spin 0.8s linear infinite;
  z-index: 2;
}

@keyframes trump-spin {
  to { transform: rotate(360deg); }
}

/* Return pill in card header (compact) */
.trump-return-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  margin-right: 6px;
}

.trump-return-pill.green {
  color: var(--color-green);
  background: var(--color-green-dim);
}

.trump-return-pill.red {
  color: var(--color-red);
  background: var(--color-red-dim);
}

.trump-return-pill.muted {
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Make the big price show return color */
.trump-price-big.green { color: var(--color-green); }
.trump-price-big.red { color: var(--color-red); }
.trump-price-big.muted { color: var(--text-primary); }

/* Compact view: shorter chart */
.trump-grid[data-view="compact"] .trump-chart-frame {
  height: 180px;
}

.trump-grid[data-view="compact"] .trump-chart-card {
  padding: 12px;
}

@media (max-width: 560px) {
  .trump-chart-frame {
    height: 220px;
  }

  .trump-chart-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trump-chart-actions {
    width: 100%;
  }
}

/* ====================================
   Trump Board — Layout Refresh
   ==================================== */

.trump-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: var(--sp-md);
  align-items: stretch;
  margin-bottom: var(--sp-lg);
}

.trump-overview-panel .trump-kpi-row,
.trump-overview-panel .trump-distribution {
  margin-bottom: 0;
}

.trump-overview-panel .trump-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-sm);
}

.trump-overview-panel .trump-kpi {
  min-height: 100%;
  padding: 16px 12px;
}

.trump-overview-panel .trump-distribution {
  justify-content: center;
}

.trump-toolbar {
  display: block;
  padding: 16px;
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
}

.trump-toolbar-head,
.trump-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.trump-toolbar-head {
  margin-bottom: var(--sp-md);
}

.trump-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  flex: 0 1 auto;
  min-width: 0;
}

.trump-search-wrap {
  max-width: none;
  flex: 1 1 340px;
}

.trump-tabs {
  flex: 1 1 620px;
  min-width: 0;
}

.trump-tab {
  min-height: 46px;
}

.trump-range-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding: 6px 8px 6px 12px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  min-width: 0;
}

.trump-range-group {
  gap: 3px;
  border: none;
  background: transparent;
}

.trump-range-btn {
  border-radius: var(--radius-pill);
}

.trump-results-meta {
  margin-top: 0;
}

.trump-grid[data-view="comfy"] {
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
}

.trump-card {
  gap: var(--sp-md);
  padding: 22px;
}

.trump-card-head {
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border-color);
}

.trump-ticker {
  font-size: clamp(28px, 4vw, 40px);
}

.trump-card-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.trump-card-metric {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: none;
}

.trump-card-metric b {
  font-size: clamp(15px, 1.8vw, 20px);
}

.trump-chart-card {
  background: var(--bg-secondary);
}

.trump-chart-frame {
  height: 330px;
}

.trump-summary {
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.trump-links {
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border-color);
}

.trump-grid[data-view="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.trump-grid[data-view="compact"] .trump-card-head {
  padding-bottom: 0;
  border-bottom: none;
}

.trump-grid[data-view="compact"] .trump-card-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trump-grid[data-view="compact"] .trump-chart-frame {
  height: 210px;
}

.trump-grid[data-view="compact"] .trump-links {
  padding-top: 0;
  border-top: none;
}

@media (max-width: 1100px) {
  .trump-overview-panel {
    grid-template-columns: 1fr;
  }

  .trump-search-wrap,
  .trump-tabs {
    flex: 1 1 auto;
    width: 100%;
  }

  .trump-toolbar-actions,
  .trump-sort-wrap,
  .trump-sort-controls {
    flex: 1 1 auto;
  }

  .trump-sort {
    flex: 1 1 auto;
  }

  .trump-range-row {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .trump-overview-panel .trump-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-toolbar {
    padding: 12px;
  }

  .trump-toolbar-head,
  .trump-filter-row,
  .trump-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .trump-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .trump-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .trump-price-now {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .trump-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-chart-frame {
    height: 250px;
  }

  .trump-chart-actions,
  .trump-chart-actions .trump-link,
  .trump-chart-actions .badge {
    width: 100%;
    justify-content: center;
  }

  .trump-grid[data-view="compact"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .trump-overview-panel .trump-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trump-tabs {
    grid-template-columns: 1fr;
  }

  .trump-chart-frame {
    height: 220px;
  }
}

@media (max-width: 340px) {
  .trump-overview-panel .trump-kpi-row,
  .trump-card-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .trump-toolbar-head,
  .trump-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .trump-toolbar-actions {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  .trump-sort-wrap {
    flex: 1 1 auto;
  }

  .trump-view-toggle {
    flex: 0 0 auto;
  }

  .trump-tabs {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trump-tab {
    flex: 0 0 auto;
    min-width: 138px;
    border-right: 1px solid var(--border-color);
    border-bottom: none;
  }

  .trump-tab:last-child {
    border-right: none;
  }

  .trump-range-row {
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .trump-toolbar-actions {
    flex-direction: column;
  }

  .trump-sort-controls {
    flex-direction: column;
  }

  .trump-sort-controls,
  .trump-sort,
  .trump-sort-dir {
    width: 100%;
  }
}

/* === animations.css === */
/* ====================================
   Whale Analyzer — Animations
   ==================================== */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.1); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 53, 0.25); }
}

/* ── Animation Classes ── */
.anim-fade-in-up {
  animation: fadeInUp 0.5s var(--ease-out) forwards;
  opacity: 0;
}

.anim-fade-in {
  animation: fadeIn 0.4s var(--ease-out) forwards;
  opacity: 0;
}

.anim-slide-in {
  animation: slideInRight 0.5s var(--ease-out) forwards;
  opacity: 0;
}

/* Stagger delays for card grid */
.stagger-1 { animation-delay: 0.03s; }
.stagger-2 { animation-delay: 0.06s; }
.stagger-3 { animation-delay: 0.09s; }
.stagger-4 { animation-delay: 0.12s; }
.stagger-5 { animation-delay: 0.15s; }
.stagger-6 { animation-delay: 0.18s; }
.stagger-7 { animation-delay: 0.21s; }
.stagger-8 { animation-delay: 0.24s; }
.stagger-9 { animation-delay: 0.27s; }
.stagger-10 { animation-delay: 0.30s; }
.stagger-11 { animation-delay: 0.33s; }
.stagger-12 { animation-delay: 0.36s; }
.stagger-13 { animation-delay: 0.39s; }
.stagger-14 { animation-delay: 0.42s; }
.stagger-15 { animation-delay: 0.45s; }
.stagger-16 { animation-delay: 0.48s; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Number count animation */
.count-anim {
  animation: countUp 0.6s var(--ease-out) forwards;
  opacity: 0;
}

/* Glow effect for highlighted cards */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === responsive.css === */
/* ====================================
   Whale Analyzer — Responsive
   Mobile-first, card-focused layout
   ==================================== */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .nav-page-links { display: none; }
  .nav-mobile-toggle { display: flex; }

  /* Hide desktop lang button — language toggle is in mobile menu */
  #btn-lang { display: none; }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .hero-title { font-size: var(--fs-3xl); }

  .changes-grid { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: 1fr; }

  .fund-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-lg);
  }
  .fund-meta { justify-content: center; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  :root {
    --nav-height: 52px;
    --card-min-width: 100%;
  }

  .nav-container { padding: 0 var(--sp-md); }
  .brand-text { font-size: var(--fs-base); }
  #lang-label { display: none; }
  .nav-filters { display: none; }

  .main-content {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
    padding-top: calc(var(--nav-height) + var(--sp-lg));
    padding-bottom: var(--sp-xl);
  }

  /* Hero — compact on mobile */
  .hero-section {
    padding: var(--sp-md) 0 var(--sp-sm);
  }
  .hero-title {
    font-size: var(--fs-xl);
  }
  .hero-title .accent {
    padding: 2px var(--sp-sm);
  }
  .hero-subtitle {
    font-size: var(--fs-sm);
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 0;
    margin-top: var(--sp-lg);
    padding: var(--sp-sm);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-sm);
  }
  .hero-stat {
    padding: 0 var(--sp-xs);
  }
  .hero-stat-value {
    font-size: var(--fs-md);
  }
  .hero-stat-label {
    font-size: 8px;
    letter-spacing: 0;
  }

  /* Card grid — single column, tighter gap */
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  /* Cards — more compact on mobile */
  .investor-card {
    padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-sm);
  }
  .investor-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-card);
  }

  /* Avatars — slightly smaller on mobile but still prominent */
  .card-avatar, .card-avatar-initials {
    width: 64px;
    height: 64px;
  }
  .card-avatar-initials {
    font-size: var(--fs-lg);
  }

  .card-header-row {
    gap: var(--sp-md);
  }

  .card-person-name {
    font-size: var(--fs-md);
  }
  .card-fund-name {
    font-size: var(--fs-xs);
  }
  .card-desc {
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-md);
    -webkit-line-clamp: 2;
  }
  .card-data-row {
    margin-top: calc(-1 * var(--sp-xs));
  }
  .card-metric-value { font-size: var(--fs-sm); }
  .card-perf-value { font-size: var(--fs-xs); }
  .card-perf-value.highlight-gold { font-size: var(--fs-sm); }
  .card-perf-label { font-size: 9px; }

  .card-footer { margin-top: var(--sp-sm); }
  .card-type-badge { font-size: 9px; padding: 1px var(--sp-xs); }
  .card-cta { font-size: var(--fs-xs); padding: var(--sp-2xs) var(--sp-sm); }

  /* Rank badge — smaller on mobile */
  .card-rank-badge {
    font-size: 10px;
    padding: 1px 6px;
    top: -6px;
    right: 8px;
  }

  /* Toolbar — handled in cards.css mobile breakpoint */

  /* KPI */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: var(--fs-xl); }

  /* Detail page */
  .fund-avatar, .fund-avatar-initials {
    width: 56px;
    height: 56px;
    font-size: var(--fs-xl);
  }
  .fund-name { font-size: var(--fs-lg); }
  .data-notice {
    padding: var(--sp-md);
    box-shadow: var(--shadow-card-sm);
  }
  .pending-panel {
    grid-template-columns: 1fr;
    padding: var(--sp-xl);
    text-align: center;
    box-shadow: var(--shadow-card-sm);
  }
  .pending-panel-icon {
    margin: 0 auto;
  }

  .tab-bar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn { padding: var(--sp-sm) var(--sp-lg); }

  .data-table { font-size: var(--fs-xs); }
  .data-table thead th,
  .data-table tbody td {
    padding: var(--sp-sm) var(--sp-md);
  }

  /* Feedback button — icon only on mobile */
  .feedback-btn {
    bottom: var(--sp-lg);
    right: var(--sp-lg);
    padding: var(--sp-md) var(--sp-lg);
    font-size: var(--fs-sm);
  }
  .feedback-btn span.fb-text { display: none; }

  /* Extra bottom padding to prevent browser chrome hiding content */
  .main-content {
    padding-bottom: 120px;
  }
}

/* ── Small Mobile (≤380px) ── */
@media (max-width: 380px) {
  .hero-title { font-size: var(--fs-lg); }

  .card-header-row { gap: var(--sp-sm); }
  .card-avatar, .card-avatar-initials {
    width: 52px;
    height: 52px;
  }
  .card-avatar-initials { font-size: var(--fs-md); }
  .card-person-name { font-size: var(--fs-sm); }

  .card-metrics { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2xs); }
  .card-perf-metrics { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2xs); padding: var(--sp-sm); }
}

/* === cookie-consent.css === */
/* ====================================
   Whale Analyzer — Cookie Consent Banner
   GDPR / ePrivacy compliant
   ==================================== */

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out);
  font-family: var(--font-body);
}

.cookie-consent.visible {
  transform: translateY(0);
}

.cookie-consent-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-consent-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.85);
  flex: 1;
  min-width: 280px;
}

.cookie-consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.cookie-consent-text a:hover {
  color: var(--accent-hover);
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 2px solid transparent;
}

.cookie-btn-accept {
  background: var(--accent);
  color: var(--text-primary);
  border-color: var(--accent);
}

.cookie-btn-accept:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 214, 0, 0.3);
}

.cookie-btn-reject {
  background: transparent;
  color: rgba(245, 245, 240, 0.7);
  border-color: rgba(245, 245, 240, 0.25);
}

.cookie-btn-reject:hover {
  border-color: rgba(245, 245, 240, 0.5);
  color: rgba(245, 245, 240, 1);
}

@media (max-width: 639px) {
  .cookie-consent-inner {
    flex-direction: column;
    text-align: center;
    padding: 16px 20px;
    gap: 14px;
  }
  .cookie-consent-actions {
    width: 100%;
    justify-content: center;
  }
  .cookie-btn {
    flex: 1;
    max-width: 160px;
  }
}

/* === legal.css === */
/* ====================================
   Whale Analyzer - Static Legal Pages
   ==================================== */

.legal-body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.legal-shell {
  width: min(900px, calc(100% - 32px));
  margin: 0 auto;
  padding: var(--sp-xl) 0 var(--sp-4xl);
}

.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-lg) 0 var(--sp-2xl);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
}

.legal-brand-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}

.legal-nav a {
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-pill);
}

.legal-nav a:hover {
  background: var(--accent);
  color: var(--text-primary);
}

.legal-card {
  background: var(--bg-card);
  border: var(--border-width-bold) solid var(--border-bold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 5vw, 56px);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: 2px solid var(--border-bold);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: var(--sp-lg);
}

.legal-card h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-black);
  letter-spacing: 0;
  margin-bottom: var(--sp-sm);
}

.legal-updated {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2xl);
}

.legal-card h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-2xl) 0 var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--border-color);
}

.legal-card h3 {
  font-size: var(--fs-md);
  margin: var(--sp-xl) 0 var(--sp-sm);
}

.legal-card p,
.legal-card li {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.legal-card p + p {
  margin-top: var(--sp-md);
}

.legal-card ul,
.legal-card ol {
  list-style: disc;
  padding-left: var(--sp-xl);
  margin: var(--sp-md) 0;
}

.legal-card ol {
  list-style: decimal;
}

.legal-card li + li {
  margin-top: var(--sp-sm);
}

.legal-callout {
  margin: var(--sp-xl) 0;
  padding: var(--sp-lg);
  border: 2px solid var(--border-bold);
  border-radius: var(--radius-md);
  background: var(--bg-section-alt);
}

.legal-callout strong {
  color: var(--text-primary);
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}

.legal-footer a {
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .legal-shell {
    width: min(100% - 24px, 900px);
    padding-top: var(--sp-md);
  }

  .legal-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-nav {
    justify-content: flex-start;
  }

  .legal-card {
    padding: var(--sp-xl);
    box-shadow: var(--shadow-card-sm);
  }
}