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

:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2e3250;
  --text: #e2e8f0;
  --text-muted: #8892a4;
  --accent: #4f8ef7;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f97316;
  --yellow: #eab308;
  --radius: 10px;
  --shadow: 0 2px 16px rgba(0,0,0,0.4);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  overflow-anchor: none;
}

/* ===== Header ===== */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

header h1 {
  font-size: 0;
  white-space: nowrap;
  line-height: 1;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}




#leaderboard-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
}
#leaderboard-btn:hover { color: var(--text); border-color: var(--accent); }

#avatar-menu { flex-shrink: 0; }

/* Leaderboard drawer */
#leaderboard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
}
#leaderboard-overlay.open { display: block; }
#leaderboard-drawer {
  position: fixed;
  top: 0;
  right: -360px;
  width: 320px;
  max-width: 94vw;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 160;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
}
#leaderboard-drawer.open { right: 0; }
#leaderboard-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}
#leaderboard-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
#leaderboard-close:hover { color: var(--text); }
#leaderboard-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.lb-row {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-size: 11px; color: var(--text-muted); width: 20px; text-align: right; flex-shrink: 0; }
.lb-rank.gold   { color: #f59e0b; font-weight: 700; }
.lb-rank.silver { color: #94a3b8; font-weight: 700; }
.lb-rank.bronze { color: #b45309; font-weight: 700; }
.lb-handle { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-handle.is-me { color: var(--accent); }
.lb-gain { font-size: 12px; font-weight: 600; flex-shrink: 0; }
.lb-gain.pos { color: var(--green); }
.lb-gain.neg { color: var(--red); }
.lb-gain.none { color: var(--text-muted); }
.lb-lock { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.lb-view {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.lb-view:hover { opacity: 0.85; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-track::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(16px); }

.watchlist-add {
  display: flex;
  gap: 6px;
}
.watchlist-add input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  width: 110px;
  font-size: 13px;
  text-transform: uppercase;
}
.watchlist-add input:focus { outline: 1px solid var(--accent); }
.watchlist-add button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.watchlist-add button:hover { border-color: var(--accent); color: var(--accent); }

#live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}
#refresh-timer {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.35;
  flex-shrink: 0;
}
#live-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.5;
  transition: color 0.3s, opacity 0.3s;
}
#refresh-timer.live-flash {
  animation: live-dot-fade 0.9s ease-out forwards;
}
@keyframes live-dot-fade {
  0%   { opacity: 1; background: var(--green); }
  100% { opacity: 0.35; background: var(--text-muted); }
}

.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border-radius: 7px;
  padding: 3px;
  border: 1px solid var(--border);
}
.view-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.view-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* ===== Main ===== */
main { padding: 20px 24px; padding-top: 92px; }

#loading-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 48px;
  font-size: 15px;
}

/* ===== Cards View ===== */
#view-cards { display: none; }
#view-cards.active { display: block; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow); }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-ticker {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-held { background: rgba(79,142,247,0.15); color: var(--accent); border: 1px solid rgba(79,142,247,0.3); }
.badge-watching { background: rgba(234,179,8,0.15); color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); }

.remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
}
.remove-btn:hover { color: var(--red); }

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.price-main { font-size: 24px; font-weight: 700; }
.price-change { font-size: 13px; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.sparkline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sparkline-container { flex: 1; height: 40px; }
.sparkline-container canvas { width: 100% !important; height: 40px !important; }
.perf-30d { font-size: 12px; font-weight: 600; white-space: nowrap; }

.scores-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.score-block {
  flex: 1;
  background: var(--surface2);
  border-radius: 7px;
  padding: 8px 10px;
}
.score-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.score-val { font-size: 20px; font-weight: 700; }
.score-signal { font-size: 11px; margin-top: 2px; }
.strong-buy { color: var(--green); }
.buy { color: #86efac; }
.neutral { color: var(--yellow); }
.avoid { color: var(--red); }

.holding-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.holding-item {
  background: var(--surface2);
  border-radius: 6px;
  padding: 5px 8px;
}
.holding-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.holding-val {
  font-size: 12px;
  font-weight: 600;
}
.holding-pct {
  font-size: 10px;
  font-weight: 400;
}

@keyframes price-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); border-color: var(--border); background: var(--surface); }
  20%  { box-shadow: 0 0 20px 6px rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.07); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); border-color: var(--border); background: var(--surface); }
}
.card.price-flash {
  animation: price-pulse 1s ease-out forwards;
}

.play-type {
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.sector-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 20px 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sector-header:first-child { padding-top: 4px; }

.sector-count {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 10px;
  padding: 1px 7px;
  color: var(--text-muted);
  font-weight: 500;
}

.industry-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface2);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Portfolio View ===== */
#view-portfolio { display: none; }
#view-portfolio.active { display: block; }

#portfolio-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  text-align: center;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 28px 0 20px;
}
.hero-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
}
.hero-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hero-stat {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.hero-stat.pos { color: var(--green); }
.hero-stat.neg { color: var(--red); }
.hero-stat-label {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}
@media (max-width: 480px) {
  .hero-value { font-size: 36px; letter-spacing: -1px; }
}

#portfolio-sub-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border-radius: 7px;
  padding: 3px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  width: fit-content;
}
#portfolio-sub-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#portfolio-sub-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#portfolio-groups { display: none; }
#portfolio-groups.active { display: block; }

#portfolio-city { display: none; }
#portfolio-city.active { display: block; }

/* ── Portfolio zoom transition ── */

/* Outgoing: scale up + fade (zooming "into" the city) */
@keyframes portfolioZoomOutLeave {
  from { opacity: 1;   transform: scale(1);    }
  to   { opacity: 0;   transform: scale(1.07); }
}
/* Incoming city: starts normal scale, just fades in */
@keyframes portfolioZoomInEnter {
  from { opacity: 0;   transform: scale(1);    }
  to   { opacity: 1;   transform: scale(1);    }
}
/* Outgoing city: shrinks away */
@keyframes portfolioZoomOutLeaveReverse {
  from { opacity: 1;   transform: scale(1);    }
  to   { opacity: 0;   transform: scale(0.94); }
}
/* Incoming groups: scales up from slightly small + fades in */
@keyframes portfolioZoomInEnterReverse {
  from { opacity: 0;   transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1);    }
}

/* Applied during the transition so sub-views don't reflow each other */
#view-portfolio.is-transitioning {
  position: relative;
  overflow: hidden;
}
#view-portfolio.is-transitioning #portfolio-groups,
#view-portfolio.is-transitioning #portfolio-city {
  position: absolute;
  /* 46px = sub-toggle pill height + margin-bottom */
  top: 46px; left: 0; right: 0;
  pointer-events: none;
}

/* Groups→City: outgoing groups zooms out, incoming city fades in */
#view-portfolio.to-city #portfolio-groups.active-leave {
  display: block;
  animation: portfolioZoomOutLeave 320ms ease-in forwards;
}
#view-portfolio.to-city #portfolio-city.active-enter {
  display: block;
  animation: portfolioZoomInEnter 320ms ease-out forwards;
}

/* City→Groups: outgoing city shrinks, incoming groups zooms in */
#view-portfolio.to-groups #portfolio-city.active-leave {
  display: block;
  animation: portfolioZoomOutLeaveReverse 320ms ease-in forwards;
}
#view-portfolio.to-groups #portfolio-groups.active-enter {
  display: block;
  animation: portfolioZoomInEnterReverse 320ms ease-out forwards;
}

#groups-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#add-group-btn {
  background: var(--surface2);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#add-group-btn:hover { border-color: var(--accent); color: var(--accent); }

#refresh-groups-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#refresh-groups-btn:hover { border-color: var(--accent); color: var(--accent); }
#refresh-groups-btn:disabled { opacity: 0.5; cursor: default; }

#snapshots-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#snapshots-btn:hover { border-color: var(--accent); color: var(--accent); }

.toolbar-dropdown-wrap {
  position: relative;
}
#import-export-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#import-export-btn:hover { border-color: var(--accent); color: var(--accent); }

.toolbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 200;
  min-width: 150px;
  overflow: hidden;
}
.toolbar-dropdown-menu button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 9px 16px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.toolbar-dropdown-menu button:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
  color: var(--accent);
}

/* Tray */
#groups-tray {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 20px;
}
#tray-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
#tray-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 40px;
}
#tray-cards.drop-target-active {
  background: rgba(79,142,247,0.06);
  border-radius: 6px;
  outline: 1px dashed var(--accent);
}

/* Group lanes */
#groups-canvas {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.group-lane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.group-lane.lane-dragging {
  opacity: 0.45;
  box-shadow: none;
}

.group-lane.lane-drop-above {
  box-shadow: 0 -3px 0 0 var(--accent);
}

.group-lane.lane-drop-below {
  box-shadow: 0 3px 0 0 var(--accent);
}

.group-drag-handle {
  color: var(--text-muted);
  font-size: 16px;
  cursor: grab;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
}
.group-drag-handle:hover { color: var(--text); }
.group-drag-handle:active { cursor: grabbing; }

.group-lane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.group-name {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
}
.group-name:hover { color: var(--accent); }

.group-name-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 6px;
}

.group-ticker-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 20px;
  padding: 1px 8px;
  border: 1px solid var(--border);
}

.group-header-stat,
.group-gain-summary {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.group-gain-summary.pos { color: var(--green); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.group-gain-summary.neg { color: var(--red); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }

.group-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.group-delete-btn:hover { color: var(--red); }

.group-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  min-height: 60px;
}
.group-cards.drop-target-active {
  background: rgba(79,142,247,0.06);
  outline: 1px dashed var(--accent);
  border-radius: 6px;
}
.group-empty-hint {
  color: var(--text-muted);
  font-size: 12px;
  align-self: center;
  padding: 8px;
}

/* Mini cards */
.mini-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  width: 155px;
  cursor: grab;
  transition: border-color 0.12s, box-shadow 0.12s;
  user-select: none;
}
.mini-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.mini-card.dragging { opacity: 0.4; cursor: grabbing; }
.mini-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,142,247,0.35); }

/* Score progress overlay */
#score-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,11,20,0.82);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spo-box {
  background: #1a1d2e;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 44px;
  text-align: center;
  width: min(420px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.spo-skyline { font-size: 48px; margin-bottom: 12px; animation: spo-pulse 2s ease-in-out infinite; }
@keyframes spo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.spo-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.spo-msg { font-size: 13px; color: var(--text-muted); min-height: 20px; margin-bottom: 10px; transition: opacity 0.4s; }
.spo-ticker { font-size: 12px; color: var(--accent); font-weight: 600; min-height: 18px; margin-bottom: 16px; letter-spacing: 0.04em; }
.spo-bar-wrap { background: var(--border); border-radius: 99px; height: 6px; overflow: hidden; margin-bottom: 10px; }
.spo-bar { height: 100%; background: var(--accent); border-radius: 99px; width: 0%; transition: width 0.4s ease; }
.spo-count { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.spo-dismiss { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; }
.spo-dismiss:hover { border-color: var(--accent); color: var(--text); }

/* Groups context menu */
#groups-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: #1a1d2e;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-size: 13px;
}
#groups-ctx-menu .ctx-label {
  padding: 6px 14px 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#groups-ctx-menu .ctx-item {
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#groups-ctx-menu .ctx-item:hover { background: rgba(79,142,247,0.12); color: var(--accent); }
#groups-ctx-menu .ctx-divider { border-top: 1px solid var(--border); margin: 4px 0; }
#groups-ctx-menu .ctx-item.ctx-remove { color: var(--text-muted); }
#groups-ctx-menu .ctx-item.ctx-remove:hover { color: var(--red, #ef4444); background: rgba(239,68,68,0.08); }

.mini-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.mini-card-ticker { font-size: 15px; font-weight: 700; }
.mini-badge { font-size: 9px !important; padding: 1px 5px !important; }

.mini-industry {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
}
.mini-price { font-size: 14px; font-weight: 600; }
.mini-change { font-size: 10px; }

.mini-sparkline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.mini-sparkline-container { flex: 1; height: 28px; }
.mini-sparkline-container canvas { width: 100% !important; height: 28px !important; }
.mini-perf { font-size: 10px; font-weight: 600; white-space: nowrap; }

.mini-scores-row {
  display: flex;
  gap: 6px;
}
.mini-score-block {
  flex: 1;
  background: var(--bg);
  border-radius: 5px;
  padding: 4px 6px;
  text-align: center;
}
.mini-score-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 1px; }
.mini-score-val { font-size: 14px; font-weight: 700; }
.mini-score-sig { font-size: 9px; }

/* After-hours / pre-market badge on regular cards */
.card-ah-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  margin-top: 4px;
}
.card-ah-badge.pos { color: var(--green); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.1); }
.card-ah-badge.neg { color: var(--red);   border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.1); }

/* After-hours / pre-market badge on mini-cards */
.mini-ah-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.mini-ah-badge.pos { color: var(--green); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.1); }
.mini-ah-badge.neg { color: var(--red);   border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.1);  }

.mini-position-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.mini-pos-item {
  background: var(--bg);
  border-radius: 5px;
  padding: 4px 6px;
  min-width: 0;
}
.mini-pos-wide { flex: 1 1 100%; }
.mini-pos-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 1px; }
.mini-pos-val { font-size: 11px; font-weight: 600; white-space: normal; word-break: break-word; }

/* ===== Detail Drawer ===== */
#drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
}
#drawer-overlay.open { display: block; }

#drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 301;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  padding: 24px;
}
#drawer.open { transform: translateX(0); }

/* ===== Wide Panel (Earnings / Trending) ===== */
#panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
#panel-overlay.open { display: block; }
#panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(780px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 201;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  padding: 24px;
}
#panel.panel-wide { width: min(1100px, 100vw); }
#panel.open { transform: translateX(0); }
.panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.panel-close:hover { color: var(--text); }
.panel-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-right: 40px;
  color: var(--text);
}
.panel-view-container { width: 100%; }

.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}
.drawer-close:hover { color: var(--text); }

.drawer-ticker { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.drawer-price { font-size: 20px; color: var(--text-muted); margin-bottom: 8px; }

.ticker-insight-box {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb, 99,102,241), 0.07);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: 0 6px 6px 0;
}
.ticker-insight-box.loading { opacity: 0.6; }

.ai-insight-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid rgba(139,92,246,0.6);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 8px;
  animation: fab-rainbow 4s linear infinite;
}
.ai-insight-btn:disabled { opacity: 0.5; cursor: default; animation: none; }
.ai-insight-icon { flex-shrink: 0; }

.drawer-section { margin-bottom: 20px; }
.drawer-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.drawer-refresh-btn:hover { color: var(--text); border-color: var(--accent); }

.chart-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.chart-toggle button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chart-toggle button.active { border-color: var(--accent); color: var(--accent); }

#detail-chart-container { height: 200px; position: relative; }
#detail-chart-container canvas { width: 100% !important; height: 200px !important; }

.reason-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reason-list li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
}
.reason-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Headline reasons — slightly larger, brighter */
.headline-reasons li {
  font-size: 13px;
  color: var(--text);
}

/* Expandable detail section */
.signal-details {
  margin-top: 8px;
}
.signal-details summary {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.signal-details summary:hover { color: var(--accent); }
.signal-details summary::before { content: '▶  '; font-size: 9px; }
.signal-details[open] summary::before { content: '▼  '; }
.signal-details .reason-list { margin-top: 6px; }

/* Acronym tooltips */
.signal-term {
  text-decoration: underline dotted var(--text-muted);
  cursor: help;
}

/* Company description in drawer */
.drawer-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.perf-item {
  background: var(--surface2);
  border-radius: 6px;
  padding: 8px 10px;
}
.perf-item .pkey { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.perf-item .pval { font-size: 16px; font-weight: 600; margin-top: 3px; }

/* ===== Verifier Modal ===== */
#verifier-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#verifier-modal.open { display: flex; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: min(400px, 90vw);
}
.modal-box h2 { font-size: 16px; margin-bottom: 10px; }
.modal-box p { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.modal-box input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.modal-box input:focus { outline: 1px solid var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-actions button {
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
}
.btn-cancel { background: transparent; color: var(--text-muted); }
.btn-submit { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Position lot rows */
.pos-lot-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.pos-lot-row input {
  flex: 1;
  min-width: 0;
}
.lot-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.lot-remove:hover { color: var(--red); }
#manual-pos-add-lot {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 10px;
  width: 100%;
  margin-bottom: 12px;
}
#manual-pos-add-lot:hover { border-color: var(--accent); color: var(--accent); }
#manual-pos-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 18px;
}

/* ===== Manual Position Modal ===== */
#remove-ticker-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#remove-ticker-modal.open { display: flex; }
#remove-ticker-modal .tax-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

#manual-pos-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#manual-pos-modal.open { display: flex; }
#manual-pos-modal input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 14px;
}
#manual-pos-modal input:focus { outline: 1px solid var(--accent); }

.edit-pos-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0 3px;
  line-height: 1;
  opacity: 0.6;
}
.edit-pos-btn:hover { color: var(--accent); opacity: 1; }
.badge-manual { background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }

/* ===== CSV Import Modal ===== */
#csv-import-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#csv-import-modal.open { display: flex; }
#csv-paste-area {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-family: monospace;
  resize: vertical;
  margin-bottom: 10px;
  box-sizing: border-box;
}
#csv-paste-area:focus { outline: 1px solid var(--accent); }
#csv-preview-table-wrap {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
#csv-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#csv-preview-table th {
  background: var(--surface2);
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;
  position: sticky;
  top: 0;
}
#csv-preview-table td {
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
#csv-parse-errors {
  font-size: 12px;
  color: var(--red);
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
}
.btn-upload {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}
.btn-upload:hover { border-color: var(--accent); color: var(--text); }

/* ===== Toast ===== */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 400;
  transition: transform 0.2s;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.error { border-color: var(--red); color: var(--red); }

/* ===== D3 bubble / heatmap tooltip ===== */
.bubble-tooltip {
  position: absolute;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  pointer-events: none;
  font-size: 12px;
  z-index: 500;
  max-width: 220px;
  line-height: 1.5;
}
.bubble-tooltip strong { font-size: 15px; display: block; margin-bottom: 4px; }

/* ===== Digest FAB ===== */
@keyframes fab-rainbow {
  0%   { box-shadow: 0 4px 20px rgba(139,92,246,0.5),  0 0 0 1px rgba(139,92,246,0.6); }
  20%  { box-shadow: 0 4px 20px rgba(59,130,246,0.5),  0 0 0 1px rgba(59,130,246,0.6); }
  40%  { box-shadow: 0 4px 20px rgba(16,185,129,0.5),  0 0 0 1px rgba(16,185,129,0.6); }
  60%  { box-shadow: 0 4px 20px rgba(234,179,8,0.5),   0 0 0 1px rgba(234,179,8,0.6); }
  80%  { box-shadow: 0 4px 20px rgba(249,115,22,0.5),  0 0 0 1px rgba(249,115,22,0.6); }
  100% { box-shadow: 0 4px 20px rgba(139,92,246,0.5),  0 0 0 1px rgba(139,92,246,0.6); }
}
#roast-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid rgba(139,92,246,0.6);
  color: #e2e8f0;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(139,92,246,0.35);
  animation: fab-rainbow 4s linear infinite;
  transition: width 0.22s ease, border-radius 0.22s ease, padding 0.22s ease, font-size 0.22s ease;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#roast-fab:hover {
  width: 120px;
  border-radius: 26px;
  font-size: 14px;
}
#roast-fab .fab-label {
  display: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#roast-fab:hover .fab-label { display: inline; }

/* ===== Roast Modal ===== */
#roast-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 300;
  transition: background 0.25s ease;
}
#roast-overlay.roast-visible { background: rgba(0,0,0,0.75); }

@keyframes roast-slide-up {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes roast-slide-down {
  from { transform: translateX(-50%) translateY(0);    opacity: 1; }
  to   { transform: translateX(-50%) translateY(100%); opacity: 0; }
}
#roast-modal {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 301;
  width: min(600px, 100vw);
  min-height: 160px;
  max-height: 82vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.6);
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#roast-modal.roast-visible {
  animation: roast-slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#roast-modal.roast-closing {
  animation: roast-slide-down 0.24s ease-in forwards;
}
#roast-modal.roast-streaming {
  animation: roast-fire-border 3s linear infinite;
}
@keyframes roast-fire-border {
  0%   { box-shadow: 0 -8px 48px rgba(139,92,246,0.35),  0 0 0 1px rgba(139,92,246,0.7); }
  25%  { box-shadow: 0 -8px 48px rgba(59,130,246,0.35),  0 0 0 1px rgba(59,130,246,0.7); }
  50%  { box-shadow: 0 -8px 48px rgba(16,185,129,0.35),  0 0 0 1px rgba(16,185,129,0.7); }
  75%  { box-shadow: 0 -8px 48px rgba(234,179,8,0.35),   0 0 0 1px rgba(234,179,8,0.7); }
  100% { box-shadow: 0 -8px 48px rgba(139,92,246,0.35),  0 0 0 1px rgba(139,92,246,0.7); }
}

#roast-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 15px;
}
#roast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
#roast-close:hover { color: var(--text); }
#roast-body {
  padding: 20px 32px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
#roast-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  min-height: 34px;
  flex-shrink: 0;
}
.roast-history-sel {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
}
.roast-cooldown-info { margin-left: 12px; white-space: nowrap; }
.roast-loading {
  color: var(--text-muted);
  font-style: italic;
  animation: roast-pulse 1.4s ease-in-out infinite;
}
@keyframes roast-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.roast-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: roast-blink 0.8s step-end infinite;
}
@keyframes roast-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.roast-error { color: var(--red); }
.roast-text p { margin: 0 0 10px; }
.roast-text p:last-child { margin-bottom: 0; }
.digest-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 16px 0 6px;
}
.digest-header:first-child { margin-top: 0; }
.digest-list {
  margin: 0 0 10px;
  padding-left: 16px;
}
.digest-list li { margin-bottom: 5px; }

/* Verdict stamp */
@keyframes roast-stamp {
  0%   { transform: scale(2.2) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(0.92) rotate(2deg); opacity: 1; }
  80%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.roast-verdict {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f97316;
  border: 2px solid #f97316;
  border-radius: 4px;
  padding: 1px 7px;
  margin-bottom: 12px;
  opacity: 0;
  animation: roast-stamp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.roast-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.roast-delete-btn {
  display: block;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}
.roast-delete-btn:hover { border-color: var(--red); color: var(--red); }
.roast-delete-confirm { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; }
.roast-delete-yes, .roast-delete-no { background: none; border: 1px solid; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.roast-delete-yes { border-color: var(--red); color: var(--red); }
.roast-delete-no { border-color: var(--text-muted); color: var(--text-muted); }
.roast-delete-yes:hover { background: var(--red); color: #fff; }
.roast-delete-no:hover { border-color: var(--text); color: var(--text); }

#roast-btn, .roast-rerun-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#roast-btn:hover, .roast-rerun-btn:hover { border-color: #f97316; color: #f97316; }
.roast-rerun-btn { padding: 2px 8px; font-size: 11px; }

/* ===== Earnings Badge (inline in mini-card) ===== */
.earn-badge {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.earn-badge-soon { color: var(--accent); }
.earn-badge-urgent { color: var(--orange, #f97316); font-weight: 600; }

/* ===== Drawer Context Strip ===== */
.drawer-context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 16px;
}
.drawer-ctx-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.drawer-ctx-pill.pos { color: var(--green); border-color: var(--green); }
.drawer-ctx-pill.neg { color: var(--red); border-color: var(--red); }
.drawer-ctx-pill.urgent { color: var(--orange, #f97316); border-color: var(--orange, #f97316); }

/* ===== Earnings View ===== */
#view-earnings { display: none; }
#view-earnings.active { display: block; }

#view-trending { display: none; }
#view-trending.active { display: block; }

#view-exposure { display: none; font-size: 12px; }
#view-exposure.active { display: block; }

#earnings-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.earnings-loading, .earnings-error, .earnings-empty {
  color: var(--text-muted);
  padding: 32px;
  text-align: center;
}

/* ── Trending view ── */
.trending-loading, .trending-empty {
  color: var(--text-muted);
  padding: 32px;
  text-align: center;
}
.trending-header {
  margin-bottom: 16px;
}
.trending-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trending-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.trending-as-of {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.trending-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
#trigger-scrape-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
#trigger-scrape-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
#trigger-scrape-btn:disabled { opacity: 0.4; cursor: default; }

/* Heatmap strip */
.trending-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: baseline;
}
.trending-hm-chip {
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
  letter-spacing: 0.02em;
}
.trending-hm-chip:hover { color: var(--text); opacity: 1 !important; }
.trending-hm-chip.hm-bull { color: var(--green); }
.trending-hm-chip.hm-bear { color: var(--red); }
.trending-hm-chip.hm-owned { text-decoration: underline dotted; }

/* Section labels */
.trending-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 16px 0 8px;
}

.trending-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.trending-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.15s;
}
.trending-card:hover { border-color: var(--accent); }
.trending-bubble-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
}
.trending-bubble-wrap .trending-rank {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}
.trending-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 32px;
  text-align: center;
  padding-top: 2px;
}
.trending-card-main { flex: 1; min-width: 0; }
.trending-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.trending-ticker {
  font-size: 15px;
  font-weight: 700;
}
.trending-sentiment { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--surface2); }
.trending-sentiment.pos { color: var(--green); }
.trending-sentiment.neg { color: var(--red); }
.trending-in-list {
  font-size: 11px;
  color: var(--accent);
  margin-left: auto;
}
.trending-holding {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.trending-holding.pos { color: var(--green); }
.trending-holding.neg { color: var(--red); }
.trending-holding:not(.pos):not(.neg) { color: var(--accent); }
.trending-source-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.trending-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.trending-quotes { display: flex; flex-direction: column; gap: 4px; }
.trending-quote {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-quote:hover { color: var(--accent); }
.trending-quote-score {
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 10px;
}

/* ── Card ── */
.earnings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.earnings-card.earnings-soon {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}

.earnings-brief-box {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 7px 10px;
  background: rgba(var(--accent-rgb, 99,102,241), 0.07);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: 0 5px 5px 0;
}
.earnings-brief-loading { opacity: 0.6; font-style: italic; }
.earnings-brief-text { flex: 1; }

/* ── Card header ── */
.earnings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.earnings-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earnings-ticker {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.earnings-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.earnings-soon-badge {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.earnings-days {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.earnings-date {
  font-size: 12px;
  color: var(--text-muted);
}

.earnings-timing {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.earnings-timing.bmo { background: rgba(79,142,247,0.18); color: var(--accent); }
.earnings-timing.amc { background: rgba(234,179,8,0.18); color: var(--yellow); }

/* ── Estimates row ── */
.earnings-estimates {
  display: flex;
  gap: 20px;
}

.earnings-est-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.est-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.est-val {
  font-size: 15px;
  font-weight: 600;
}

/* ── Analyst section ── */
.earnings-analyst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 6px;
}

.analyst-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rec-bar-wrap { flex: 1; max-width: 160px; }
.rec-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.rec-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.analyst-rec-label {
  font-size: 13px;
  font-weight: 600;
}

.analyst-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.analyst-target-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analyst-target-key {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 72px;
}

.analyst-target-val {
  font-size: 13px;
  font-weight: 600;
}

.analyst-target-range {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Surprises ── */
.earnings-surprises {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.surprises-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.surprise-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 4px 6px;
  background: var(--surface2);
  border-radius: 5px;
}

.surprise-date { color: var(--text-muted); min-width: 76px; }
.surprise-est  { color: var(--text-muted); }
.surprise-rep  { color: var(--text); font-weight: 500; }
.surprise-pct  { font-weight: 700; margin-left: auto; }

/* ── Headlines ── */
.earnings-headlines {}

.headlines-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.headlines-toggle:hover { border-color: var(--accent); color: var(--accent); }

.headlines-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.headline-item {
  padding: 7px 10px;
  background: var(--surface2);
  border-radius: 6px;
}

.headline-title {
  font-size: 13px;
  line-height: 1.4;
}

.headline-title a {
  color: var(--text);
  text-decoration: none;
}
.headline-title a:hover { color: var(--accent); text-decoration: underline; }

.headline-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── No-date collapsed section ── */
.earnings-no-date-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.earnings-no-date-section summary {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  list-style: none;
}
.earnings-no-date-section summary:hover { color: var(--text); }
.earnings-no-date-section summary::before { content: '▶  '; font-size: 10px; }
.earnings-no-date-section[open] summary::before { content: '▼  '; }

.earnings-no-date-grid {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== Exposure View ===== */
#portfolio-exposure {
  padding: 0;
}
#portfolio-exposure .exposure-header {
  padding-left: 24px;
  padding-right: 24px;
}
.exposure-empty {
  color: var(--text-muted);
  padding: 32px;
  font-size: 13px;
}
.exposure-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.exposure-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.exposure-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.exposure-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}
.exposure-info {
  font-size: 13px;
  color: var(--text-muted);
  cursor: default;
  margin-left: 4px;
  opacity: 0.6;
}
.exposure-info:hover { opacity: 1; }
.exposure-body {
  display: block;
}
.exposure-chart-wrap {
  /* Full-bleed: break out of main's horizontal padding */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
}
/* Inside the panel, constrain to panel width */
#panel .exposure-chart-wrap {
  width: 100%;
  left: 0;
  transform: none;
}
#panel #exp-detail {
  width: 100%;
  left: 0;
  transform: none;
}
.exposure-chart-wrap svg {
  display: block;
}
.exposure-chart-wrap .exp-flow:hover,
.exposure-chart-wrap .exp-node:hover {
  filter: brightness(1.25);
}
.exp-legend {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid transparent;
}
.exp-legend-row:hover { background: rgba(255,255,255,0.05); }
.exp-legend-row.active {
  background: rgba(255,255,255,0.07);
  border-color: var(--border);
}
.exp-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--theme-color, #475569);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--theme-color, transparent);
}
.exp-legend-name { flex: 1; color: var(--text); }
.exp-legend-count { color: var(--text-muted); font-size: 11px; min-width: 16px; text-align: right; }
.exp-legend-val { color: var(--text-muted); font-size: 11px; min-width: 44px; text-align: right; }
.exp-legend-pct { color: var(--text); font-size: 11px; min-width: 32px; text-align: right; font-weight: 600; }
/* Detail table */
#exp-detail {
  margin-top: 20px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.exp-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.exp-detail-count { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.exp-detail-total { color: var(--text-muted); font-size: 11px; font-weight: 400; margin-left: auto; }
.exp-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.exp-detail-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.exp-detail-row {
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.exp-detail-row:hover { background: rgba(255,255,255,0.04); }
.exp-detail-row td { padding: 8px 10px; color: var(--text); }
.exp-detail-ticker { font-weight: 700; }
.exp-detail-sub { color: var(--text-muted); font-size: 11px; }
.exp-detail-also { color: var(--text-muted); }

/* ===== Portfolio Dashboard (health + tiles row) ===== */
#portfolio-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}
#ph-col { display: flex; flex-direction: column; }
#dashboard-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#ph-col:empty + #dashboard-tiles {
  grid-column: 1 / -1;
  flex-direction: row;
}
.dash-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.dash-tile:hover { border-color: var(--accent); background: rgba(255,255,255,0.03); }
.dash-tile-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.dash-tile-body { flex: 1; min-width: 0; }
.dash-tile-label { font-size: 12px; font-weight: 700; color: var(--text); display: block; }
.dash-tile-sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile-arrow { color: var(--text-muted); font-size: 16px; flex-shrink: 0; }
.dash-tile--tax { flex-direction: column; align-items: stretch; padding: 14px 16px; }
.dash-tile-tax-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-tile-tax-header .dash-tile-label { flex: 1; }
.dash-tile-tax-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-tile-tax-stat { background: rgba(0,0,0,0.15); border-radius: 6px; padding: 7px 10px; }
.dash-tile-tax-stat-label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.dash-tile-tax-stat-val { font-size: 13px; font-weight: 700; display: block; color: var(--text); }
.dash-tile-tax-stat-val.pos { color: var(--green, #4caf7d); }
.dash-tile-tax-stat-val.neg { color: var(--red, #e05c5c); }

/* ===== Portfolio Health Filler ===== */
#ph-filler {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  opacity: 0.35;
  pointer-events: none;
}
.ph-filler-art { line-height: 0; }
.ph-filler-quote {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  max-width: 200px;
  line-height: 1.5;
}
.ph-filler-attr {
  display: block;
  font-style: normal;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.7;
}

/* ===== Portfolio Health ===== */
#portfolio-health {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ph-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.ph-header:hover { background: rgba(255,255,255,0.03); }
.ph-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ph-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(239,68,68,0.15);
  color: var(--red);
  border-radius: 10px;
  padding: 1px 7px;
}
.ph-chevron { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.ph-body {
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-alert {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  font-size: 12px;
}
.ph-alert.ph-warn  { border-left-color: var(--red); }
.ph-alert.ph-info  { border-left-color: var(--accent); }
.ph-alert.ph-clickable { cursor: pointer; }
.ph-alert.ph-clickable:hover { background: rgba(255,255,255,0.05); }
.ph-ticker {
  font-weight: 700;
  min-width: 50px;
  font-size: 12px;
}
.ph-alert.ph-warn .ph-ticker { color: var(--red); }
.ph-alert.ph-info .ph-ticker { color: var(--accent); }
.ph-ticker-sector { color: var(--text-muted); font-weight: 400; }
.ph-msg { color: var(--text-muted); }
.mini-card.ph-flag-warn { border-left: 3px solid var(--red); }
.mini-card.ph-flag-info { border-left: 3px solid var(--accent); }

/* ===== Portfolio Waterfall ===== */
#portfolio-waterfall {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.wf-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wf-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.wf-track {
  display: flex;
  gap: 2px;
  align-items: stretch;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.wf-segment {
  display: flex;
  flex-direction: column;
  min-width: 32px;
  cursor: pointer;
  transition: flex 0.6s ease, flex-grow 0.22s ease, filter 0.15s;
  border-radius: 4px;
  overflow: hidden;
}
.wf-segment:hover {
  filter: brightness(1.25);
  flex-grow: 150 !important;
  transition: flex-grow 0.22s ease, filter 0.15s;
}
.wf-segment:hover .wf-label { overflow: visible; padding: 3px 6px; }
.wf-segment:hover .wf-ticker { font-size: 11px; }
.wf-segment:hover .wf-val { font-size: 11px; }
.wf-segment.wf-flash { filter: brightness(1.6); transition: flex 0.6s ease, filter 0s; }
.wf-segment.wf-flash-out { filter: brightness(1.25); transition: flex 0.6s ease, filter 0.8s ease; }
.wf-bar {
  flex: 1;
}
.wf-pos .wf-bar { background: rgba(34,197,94,0.75); }
.wf-neg .wf-bar { background: rgba(239,68,68,0.75); }
.wf-watchlist .wf-bar { opacity: 0.45; }
.wf-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 3px;
  background: var(--surface2);
  white-space: nowrap;
  overflow: hidden;
}
.wf-ticker {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.2;
}
.wf-val {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}
.wf-pos .wf-val { color: var(--green); }
.wf-neg .wf-val { color: var(--red); }

/* ===== Radar chart in drawer ===== */
#drawer-radar-container {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  #portfolio-dashboard { grid-template-columns: 1fr; align-items: start; }
  #ph-filler { display: none; }
  #dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  #ph-col:empty + #dashboard-tiles { grid-template-columns: repeat(3, 1fr); }
  .dash-tile { padding: 10px 12px; }
  .dash-tile-sub { display: none; }
  .dash-tile-arrow { display: none; }
  .dash-tile--tax { flex-direction: row; align-items: center; padding: 10px 12px; }
  .dash-tile-tax-header { margin-bottom: 0; flex: 1; }
  .dash-tile-tax-nums { display: none; }

  header {
    padding: 8px 16px 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  header h1 { font-size: 15px; }
  .stonks-wordmark { display: none; }
  header h1 img { height: 36px !important; width: 36px !important; margin-right: 0 !important; }

  /* Top row: logo + controls fill one line */
  .header-controls {
    flex: 1;
    min-width: 0;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* Push watchlist input to its own second row */
  #watchlist-add-container {
    order: 10;
    width: 100%;
    flex-basis: 100%;
  }
  #watchlist-add-container input {
    flex: 1;
    min-width: 0;
  }

  /* Hide the refresh timer — saves horizontal space */
  #live-indicator { display: none; }

  /* View toggle: scrollable on mobile so 4 buttons fit */
  .view-toggle { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
  .view-toggle button { padding: 5px 8px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  main { padding: 12px; padding-top: 64px; }
  #portfolio-exposure .exposure-header { padding-left: 12px; padding-right: 12px; }

  /* Group lane header: wrap stats to a second row */
  .group-lane-header { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }

  /* Name + count stay on the first row with the drag handle */
  .group-name { font-size: 13px; }

  /* Push stats badges + delete button to a second line */
  .group-header-stat,
  .group-gain-summary { font-size: 11px; padding: 1px 6px; }

  /* Give the delete button a larger tap target */
  .group-delete-btn { font-size: 18px; padding: 2px 6px; }

  /* Mini cards: slightly narrower so 2 fit side-by-side on phones */
  .mini-card { width: 140px; }
  .mini-scores-row { flex-direction: column; gap: 4px; }
  .mini-score-block { text-align: left; padding: 3px 6px; }
  .mini-score-label { display: inline; margin-right: 4px; }
  .mini-score-val { display: inline; }

  /* Tray & cards row: tighten up */
  #groups-toolbar { gap: 8px; }

  /* Cards grid: single column on mobile */
  .cards-grid { grid-template-columns: 1fr; gap: 10px; }
  .card { min-width: 0; }
  /* Holding row: 2-col → 2-col still fine but allow wrap on tiny screens */
  .holding-row { grid-template-columns: repeat(2, 1fr); }
  .holding-pct { display: block; font-size: 10px; }

  /* Drawer: full width on mobile */
  #drawer { padding: 16px 14px; }
  .drawer-ticker { font-size: 22px; }
  .drawer-price  { font-size: 17px; }

  /* Trending: single column on mobile */
  .trending-grid { grid-template-columns: 1fr; }
  .trending-rank { font-size: 15px; min-width: 24px; }
}

/* ===== City View ===== */

:root {
  --sector-tech:        #3b82f6;
  --sector-finance:     #d97706;
  --sector-health:      #0d9488;
  --sector-energy:      #f59e0b;
  --sector-consumer:    #ec4899;
  --sector-industrial:  #6366f1;
  --sector-materials:   #84cc16;
  --sector-comm:        #8b5cf6;
  --sector-utilities:   #06b6d4;
  --sector-realestate:  #f97316;
  --sector-default:     #475569;
}

#city-sky {
  position: relative;
  width: 100%;
  /* Subtract header (64px) + main padding top (20px) + sub-toggle bar (~46px) + main padding bottom (20px) */
  height: calc(100vh - 150px);
  overflow: hidden;
  transition: background 1.4s ease;
}

/* Weather gradient backgrounds */
#city-sky.weather-sunny,
#uv-city-sky.weather-sunny {
  background: linear-gradient(180deg, #1e3a5f 0%, #2d6ea8 35%, #4a90c4 60%, #f4c87a 85%, #e8925a 100%);
}
#city-sky.weather-cloudy,
#uv-city-sky.weather-cloudy {
  background: linear-gradient(180deg, #1a2a3a 0%, #2c3e50 30%, #4a5a6a 60%, #6b7a8a 85%, #7a8595 100%);
}
#city-sky.weather-rainy,
#uv-city-sky.weather-rainy {
  background: linear-gradient(180deg, #0f1a24 0%, #1a2a38 30%, #243040 60%, #2e3b48 85%, #354250 100%);
}
#city-sky.weather-stormy,
#uv-city-sky.weather-stormy {
  background: linear-gradient(180deg, #080d12 0%, #111820 30%, #181f28 60%, #1e2730 85%, #222c36 100%);
}

/* Weather effects overlay */
.city-weather-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

/* Drifting clouds for cloudy/rainy */
.city-weather-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.weather-cloudy .city-weather-fx::before,
.weather-rainy  .city-weather-fx::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 320px 80px at 20% 15%, rgba(180,190,200,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 260px 60px at 65% 25%, rgba(160,170,180,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 200px 50px at 45% 10%, rgba(190,200,210,0.12) 0%, transparent 70%);
  animation: cityCloudDrift 28s linear infinite;
}

@keyframes cityCloudDrift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 200px 0, -150px 0, 100px 0; }
}

/* Rain drops (JS-injected spans, GPU-composited via will-change: transform) */
.city-raindrop {
  position: absolute;
  top: -12px;
  width: 1.5px;
  border-radius: 1px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: cityDropFall linear infinite;
}
@keyframes cityDropFall {
  0%   { transform: translateY(0px)    translateX(0px);    opacity: 0; }
  8%   {                                                   opacity: 1; }
  92%  {                                                   opacity: 1; }
  100% { transform: translateY(600px)  translateX(-24px);  opacity: 0; }
}

/* Lightning bolt (injected by JS during stormy weather) */
.city-lightning {
  filter: drop-shadow(0 0 6px rgba(180,210,255,0.9)) drop-shadow(0 0 14px rgba(140,180,255,0.6));
}

/* Stats bar */
.city-stats-bar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
#city-total-gain.pos { color: #86efac; }
#city-total-gain.neg { color: #fca5a5; }
#city-weather-label  { color: rgba(255,255,255,0.55); font-weight: 400; font-size: 12px; }

/* Skyline strip */
#city-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 16px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 5;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#city-skyline.city-skyline-centered,
#uv-city-skyline.city-skyline-centered {
  justify-content: center;
}
#city-skyline::-webkit-scrollbar,
#uv-city-skyline::-webkit-scrollbar       { height: 4px; }
#city-skyline::-webkit-scrollbar-thumb,
#uv-city-skyline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
#city-skyline:has(.city-building.is-zoomed),
#uv-city-skyline:has(.city-building.is-zoomed) {
  overflow: visible;
}

.city-skyline-empty {
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  padding-bottom: 60px;
  align-self: center;
}

/* Individual buildings */
.city-building {
  position: relative;
  width: 56px;
  flex-shrink: 0;
  background: var(--building-color, var(--sector-default));
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  transition: height var(--tl-day-duration, 600ms) cubic-bezier(.2,.8,.2,1), transform 200ms ease, filter 200ms ease;
  transform-origin: bottom center;
  will-change: height, transform;
}
.city-building:hover {
  filter: brightness(1.25);
  transform: translateY(-4px);
}
.city-building.is-watchlist {
  width: 36px;
  opacity: 0.45;
}
.city-building.is-zoomed {
  transform-origin: bottom center;
  transform: scale(1.1);
  filter: brightness(1.3);
  z-index: 20;
  cursor: default;
  overflow: visible;
}

/* Sector color classes */
.city-building.sector-tech        { --building-color: var(--sector-tech); }
.city-building.sector-finance      { --building-color: var(--sector-finance); }
.city-building.sector-health       { --building-color: var(--sector-health); }
.city-building.sector-energy       { --building-color: var(--sector-energy); }
.city-building.sector-consumer     { --building-color: var(--sector-consumer); }
.city-building.sector-industrial   { --building-color: var(--sector-industrial); }
.city-building.sector-materials    { --building-color: var(--sector-materials); }
.city-building.sector-comm         { --building-color: var(--sector-comm); }
.city-building.sector-utilities    { --building-color: var(--sector-utilities); }
.city-building.sector-realestate   { --building-color: var(--sector-realestate); }
.city-building.sector-default      { --building-color: var(--sector-default); }

/* Continuous road band at the base of the skyline */
#city-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 4;
  background: rgba(18,18,26,0.82);
  border-top: 1px solid rgba(255,255,255,0.1);
  /* Dashed yellow center line */
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 14px,
    rgba(255,210,50,0.3) 14px,
    rgba(255,210,50,0.3) 24px
  );
  background-size: 38px 2px;
  background-position: 0 50%;
  background-repeat: repeat-x;
}

/* Group name labels — transparent text over the road */
.city-group-label {
  position: absolute;
  bottom: 0;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
  box-sizing: border-box;
}

/* Group divider — thin curb line between sections */
.city-group-divider {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 24px;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
  z-index: 6;
}

/* Ticker label at top of building */
.city-building-label {
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.city-building-mv {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0;
}

/* Window grid */

.city-window-grid {
  position: absolute;
  inset: 4px 4px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  align-content: start;
  overflow: hidden;
}

.city-window {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(30,40,60,0.7);
  border-radius: 1px;
}

.city-window.lit {
  background: rgba(255,235,150,0.85);
  box-shadow: 0 0 4px rgba(255,220,100,0.5);
  animation: cityWindowFlicker var(--flicker-dur, 3.5s) ease-in-out infinite alternate;
}

@keyframes cityWindowFlicker {
  0%   { opacity: 1;    background: rgba(255,235,150,0.95); }
  30%  { opacity: 0.4;  background: rgba(255,200,80,0.50);  }
  60%  { opacity: 0.9;  background: rgba(255,240,160,0.90); }
  80%  { opacity: 0.55; background: rgba(255,210,100,0.60); }
  85%  { opacity: 0.95; }
  100% { opacity: 1;    background: rgba(255,235,150,0.85); }
}

/* Shared-view legend mirrors main legend */
#uv-city-legend        { position: absolute; top: 20px; right: 14px; z-index: 30; }
#uv-city-legend-toggle { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1; backdrop-filter: blur(4px); transition: background 0.2s; padding: 0; }
#uv-city-legend-toggle:hover { background: rgba(255,255,255,0.25); }
#uv-city-legend-panel  { display: none; position: absolute; top: 28px; right: 0; width: 240px; background: rgba(10,15,25,0.82); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 14px; backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
#uv-city-legend-panel.open { display: block; }

/* Timelapse button */
#city-timelapse-btn {
  position: absolute;
  top: 20px;
  right: 70px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 20;
  transition: background 0.15s;
}
#city-timelapse-btn:hover { background: rgba(255,255,255,0.25); }

/* Timelapse overlay */
#city-timelapse-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

/* Date badge + scrubber — sits just below the today's-gain stats bar */
#city-tl-top {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}

#city-tl-date-badge {
  background: rgba(10,15,25,0.72);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}

#city-tl-scrubber {
  width: 160px;
  height: 3px;
  accent-color: var(--green);
  cursor: pointer;
}

#city-tl-controls {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,15,25,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 7px 12px;
  backdrop-filter: blur(10px);
}

#city-tl-play-btn,
#city-tl-close-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
#city-tl-play-btn:hover,
#city-tl-close-btn:hover { background: rgba(255,255,255,0.22); }


#city-tl-speed-wrap {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.city-tl-speed-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.city-tl-speed-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.city-tl-speed-btn.active { background: var(--green); border-color: var(--green); color: #000; font-weight: 700; }

/* Ambient toggle button */
#city-ambient-toggle,
#uv-city-ambient-toggle {
  position: absolute;
  top: 20px;
  right: 44px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.2s, opacity 0.2s;
  z-index: 30;
  padding: 0;
}
#city-ambient-toggle:hover,
#uv-city-ambient-toggle:hover { background: rgba(255,255,255,0.25); }
#city-ambient-toggle.ambient-off,
#uv-city-ambient-toggle.ambient-off { opacity: 0.4; }

/* Hide ambient elements when no-ambient is set */
#city-sky.no-ambient .city-weather-fx::before,
#uv-city-sky.no-ambient .city-weather-fx::before { display: none; }

/* Pause all city animations when tab is hidden */
#city-sky.city-paused .city-window.lit,
#city-sky.city-paused .city-cloud,
#city-sky.city-paused .city-bird,
#city-sky.city-paused .city-bear,
#city-sky.city-paused .city-bull,
#city-sky.city-paused .city-weather-fx::before,
#city-sky.city-paused .city-weather-fx::after {
  animation-play-state: paused;
}

/* City legend */
#city-legend {
  position: absolute;
  top: 20px;
  right: 14px;
  z-index: 30;
}
#city-legend-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
#city-legend-toggle:hover { background: rgba(255,255,255,0.25); }
#city-legend-panel {
  display: none;
  position: absolute;
  top: 28px;
  right: 0;
  width: 240px;
  background: rgba(10,15,25,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#city-legend-panel.open { display: block; }
.city-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}
.city-legend-row:last-child { margin-bottom: 0; }
.city-legend-row svg { flex-shrink: 0; margin-top: 1px; }
.city-legend-row strong { color: rgba(255,255,255,0.95); }

/* Zoom overlay */
#city-zoom-overlay,
#uv-city-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 15;
  display: none;
  pointer-events: none;
  transition: background 0.25s ease;
}
#city-zoom-overlay.active,
#uv-city-zoom-overlay.active {
  display: block;
  pointer-events: auto;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}

/* Zoom info card */
.city-zoom-card {
  position: absolute;
  z-index: 25;
  background: rgba(15,17,23,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 200px;
  max-width: 240px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
}
.city-zoom-card-ticker {
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
}
.city-zoom-card-price {
  font-size: 15px;
  color: #8892a4;
  margin-bottom: 10px;
}
.city-zoom-card-scores {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.city-zoom-score {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}
.city-zoom-score-label { font-size: 9px; color: #8892a4; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.city-zoom-score-val   { font-size: 16px; font-weight: 700; }
.city-zoom-pos {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.city-zoom-pos-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 4px;
}
.city-zoom-pos-row:last-child { margin-bottom: 0; }
.city-zoom-pos-label { color: #8892a4; }
.city-zoom-pos-val   { font-weight: 600; color: rgba(255,255,255,0.9); }
.city-zoom-pos-val.pos { color: var(--green); }
.city-zoom-pos-val.neg { color: var(--red); }
.city-zoom-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.city-zoom-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  color: #8892a4;
  background: rgba(255,255,255,0.05);
}
.city-zoom-pill.pos   { color: #4ade80; border-color: rgba(74,222,128,0.35); }
.city-zoom-pill.neg   { color: #f87171; border-color: rgba(248,113,113,0.35); }
.city-zoom-pill.soon  { color: #60a5fa; border-color: rgba(96,165,250,0.35); }
.city-zoom-pill.urgent { color: #fb923c; border-color: rgba(251,146,60,0.35); font-weight: 600; }
.city-zoom-pill.trending { color: #e879f9; border-color: rgba(232,121,249,0.35); }
.city-zoom-headline {
  font-size: 11px;
  color: #8892a4;
  margin-bottom: 12px;
  line-height: 1.45;
  min-height: 16px;
}
.city-zoom-actions {
  display: flex;
  gap: 8px;
}
.city-zoom-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #8892a4;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.city-zoom-close:hover { color: #e2e8f0; background: rgba(255,255,255,0.14); }
.city-zoom-open-drawer {
  flex: 1;
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.city-zoom-open-drawer:hover { opacity: 0.88; }

/* ── Avatar menu ─────────────────────────────────────────────────────────── */
#avatar-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}
#avatar-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
#avatar-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 160px;
  z-index: 200;
  padding: 4px 0;
}
#avatar-dropdown.open { display: block; }
#avatar-username-display {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#avatar-dropdown button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
#avatar-dropdown button:hover { background: var(--surface2); }
#avatar-logout-btn { color: var(--red) !important; }

/* ── Profile modal ───────────────────────────────────────────────────────── */
#profile-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#profile-modal.open { display: flex; }

#snapshots-modal,
#admin-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
#snapshots-modal.open, #admin-modal.open { display: flex; }

/* ── Tutorial overlay ────────────────────────────────────────────────────── */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  display: none;
}
#tutorial-overlay.open { display: block; }

#tutorial-spotlight {
  position: absolute;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  transition: left 220ms ease, top 220ms ease, width 220ms ease, height 220ms ease;
}

#tutorial-tooltip {
  position: absolute;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  pointer-events: auto;
  z-index: 501;
}
.tutorial-step-counter {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.tutorial-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.tutorial-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tutorial-skip {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.tutorial-skip:hover { color: var(--text); }
.tutorial-next {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
}
.tutorial-next:hover { opacity: 0.88; }

.tour-anchor-highlight {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
  transition: outline 200ms ease;
  position: relative;
  z-index: 502;
}

/* ── Tax view ─────────────────────────────────────────────────────────────── */
.tax-row-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 4px;
}
.tax-row-label span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tax-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.tax-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tax-summary-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tax-card-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.tax-card-val   { font-size: 16px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; }
.tax-card-note  { font-size: 10px; color: var(--text-muted); }
.tax-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 0 10px;
}
.tax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.tax-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.tax-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tax-table tr:hover td { background: var(--surface2); }
.tax-date-input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  padding: 2px 4px;
  width: 120px;
  color-scheme: dark;
}
.tax-date-input:focus { outline: none; border-color: var(--accent); }
.tax-lt-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 5px; background: rgba(34,197,94,0.15); color: var(--green); }
.tax-st-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 5px; background: rgba(251,191,36,0.15); color: #fbbf24; }
.tax-realized-field { display:flex; flex-direction:column; gap:4px; }
.tax-realized-label { font-size:11px; color:var(--text-muted); }
.tax-unk-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 5px; background: rgba(148,163,184,0.15); color: var(--text-muted); }
.tax-ws-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-left: 5px; background: rgba(251,146,60,0.15); color: #fb923c; cursor: help; }
.tax-expand-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 10px; padding: 0 4px 0 0; vertical-align: middle; }
.tax-expand-btn:hover { color: var(--text); }
.tax-lot-row td { background: rgba(0,0,0,0.1); }
.tax-lots-table { border-top: none; }
.tax-lots-table td { padding: 4px 8px; }
.icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 3px; }
.icon-btn:hover { background: rgba(239,68,68,0.15); color: var(--red); }
.tax-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 4px 8px; font-size: 12px; font-family: inherit; }
.tax-input:focus { outline: none; border-color: var(--accent); }
select.tax-input { cursor: pointer; }
.btn-small { background: var(--accent); border: none; color: #fff; border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.btn-small:hover { opacity: 0.85; }

/* ── Admin user list ──────────────────────────────────────────────────────── */
#admin-users-list { margin-top: 16px; }
.snapshot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 6px;
  font-size: 13px;
}
.snapshot-row-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-row-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.snapshot-row-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.snapshot-restore-btn,
.snapshot-delete-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.snapshot-restore-btn { border: 1px solid var(--accent); background: none; color: var(--accent); }
.snapshot-delete-btn  { border: 1px solid var(--border); background: none; color: var(--text-muted); }

.admin-flag-section { margin-bottom: 18px; }
.admin-flag-section:last-child { margin-bottom: 0; }
.admin-flag-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.admin-flag-header::before,
.admin-flag-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}

/* ── Brokerage connection list ────────────────────────────────────────────── */
.broker-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 6px;
}
.broker-disconnect-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}

@media (max-width: 600px) {
  .tax-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #tutorial-tooltip {
    max-width: calc(100vw - 32px);
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .wf-track {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .wf-track::-webkit-scrollbar { display: none; }
  .wf-segment {
    min-width: 48px !important;
    flex-shrink: 0;
  }
}

/* ── City ambient life ───────────────────────────────────────────────────────── */

/* Clouds */
.city-cloud {
  position: absolute;
  left: -220px;
  width: 180px;
  height: 60px;
  pointer-events: none;
  z-index: 2;
  animation: cityCloudFloat linear infinite;
  /* Fluffy cloud shape via layered box-shadows */
  background: rgba(255,255,255,0.18);
  border-radius: 50px;
  filter: blur(2px);
}
.city-cloud::before,
.city-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.city-cloud::before {
  width: 80px;
  height: 80px;
  top: -30px;
  left: 30px;
}
.city-cloud::after {
  width: 60px;
  height: 60px;
  top: -20px;
  left: 90px;
}
.city-cloud-heavy {
  background: rgba(180,190,200,0.22);
  filter: blur(3px);
}
.city-cloud-heavy::before,
.city-cloud-heavy::after {
  background: rgba(170,180,195,0.22);
}
@keyframes cityCloudFloat {
  from { left: -220px; }
  to   { left: 110%; }
}

/* Birds */
.city-bird {
  position: absolute;
  left: -20px;
  width: 10px;
  height: 4px;
  pointer-events: none;
  z-index: 3;
  animation: cityBirdFly linear infinite;
}
/* V-shape wings via CSS borders */
.city-bird::before,
.city-bird::after {
  content: '';
  position: absolute;
  top: 0;
  width: 5px;
  height: 4px;
  border-top: 2px solid rgba(255,255,255,0.55);
  border-radius: 50% 50% 0 0;
}
.city-bird::before { left: 0;  border-right: none; transform: rotate(-15deg); transform-origin: right center; }
.city-bird::after  { right: 0; border-left: none;  transform: rotate(15deg);  transform-origin: left center; }
@keyframes cityBirdFly {
  0%   { left: -20px;  transform: translateY(0px); }
  20%  { transform: translateY(-6px); }
  40%  { transform: translateY(2px); }
  60%  { transform: translateY(-4px); }
  80%  { transform: translateY(1px); }
  100% { left: 110%;   transform: translateY(0px); }
}

/* Trees — scale via --tree-scale CSS var set per-element by JS */
.city-tree {
  position: absolute;
  bottom: 24px;
  width: calc(16px * var(--tree-scale, 1));
  height: calc(40px * var(--tree-scale, 1));
  pointer-events: none;
  z-index: 6;
}
/* Trunk */
.city-tree::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc(6px * var(--tree-scale, 1));
  width: calc(4px * var(--tree-scale, 1));
  height: calc(16px * var(--tree-scale, 1));
  background: rgba(120,80,40,0.7);
}
/* Crown */
.city-tree::before {
  content: '';
  position: absolute;
  bottom: calc(14px * var(--tree-scale, 1));
  left: 0;
  width: 0;
  height: 0;
  border-left:  calc(8px * var(--tree-scale, 1)) solid transparent;
  border-right: calc(8px * var(--tree-scale, 1)) solid transparent;
  border-bottom: calc(26px * var(--tree-scale, 1)) solid rgba(40,130,60,0.75);
}

/* ── Pixel art critters & people ─────────────────────────────────────────────
   Technique: a 2×2px ::before block as the "pixel unit", box-shadows paint
   the rest of the sprite. Each shadow is (col*2px, row*2px) from origin.     */

/* Bear — upright teddy bear, ~28×44px (7 wide × 11 tall at 4px each).
   Round head, round ears on top, chubby round body, stubby legs.            */
.city-bear {
  position: absolute;
  bottom: 24px;
  width: 28px;
  height: 44px;
  pointer-events: none;
  z-index: 7;
}
.city-bear::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: transparent;
  box-shadow:
    /* row 0 — ear tops */
    4px  0px 0 0 rgba(150,90,50,0.95),
    16px 0px 0 0 rgba(150,90,50,0.95),
    /* row 1 — ear inner + head top */
    0px  4px 0 0 rgba(150,90,50,0.95),
    4px  4px 0 0 rgba(180,120,70,0.95),
    8px  4px 0 0 rgba(150,90,50,0.95),
    12px 4px 0 0 rgba(150,90,50,0.95),
    16px 4px 0 0 rgba(180,120,70,0.95),
    20px 4px 0 0 rgba(150,90,50,0.95),
    /* row 2 — head */
    0px  8px 0 0 rgba(150,90,50,0.95),
    4px  8px 0 0 rgba(150,90,50,0.95),
    8px  8px 0 0 rgba(150,90,50,0.95),
    12px 8px 0 0 rgba(150,90,50,0.95),
    16px 8px 0 0 rgba(150,90,50,0.95),
    20px 8px 0 0 rgba(150,90,50,0.95),
    /* row 3 — eyes + brow */
    0px  12px 0 0 rgba(150,90,50,0.95),
    4px  12px 0 0 rgba(20,10,5,0.95),
    8px  12px 0 0 rgba(150,90,50,0.95),
    12px 12px 0 0 rgba(20,10,5,0.95),
    16px 12px 0 0 rgba(150,90,50,0.95),
    20px 12px 0 0 rgba(150,90,50,0.95),
    /* row 4 — snout */
    0px  16px 0 0 rgba(150,90,50,0.95),
    4px  16px 0 0 rgba(150,90,50,0.95),
    8px  16px 0 0 rgba(210,165,120,0.95),
    12px 16px 0 0 rgba(210,165,120,0.95),
    16px 16px 0 0 rgba(150,90,50,0.95),
    20px 16px 0 0 rgba(150,90,50,0.95),
    /* row 5 — arms out + body top */
    0px  20px 0 0 rgba(130,75,40,0.95),  /* left arm */
    4px  20px 0 0 rgba(150,90,50,0.95),
    8px  20px 0 0 rgba(150,90,50,0.95),
    12px 20px 0 0 rgba(150,90,50,0.95),
    16px 20px 0 0 rgba(150,90,50,0.95),
    20px 20px 0 0 rgba(130,75,40,0.95),  /* right arm */
    /* row 6 — body + belly patch */
    0px  24px 0 0 rgba(150,90,50,0.95),
    4px  24px 0 0 rgba(150,90,50,0.95),
    8px  24px 0 0 rgba(210,165,120,0.95),/* belly */
    12px 24px 0 0 rgba(210,165,120,0.95),
    16px 24px 0 0 rgba(150,90,50,0.95),
    20px 24px 0 0 rgba(150,90,50,0.95),
    /* row 7 — body + belly */
    0px  28px 0 0 rgba(150,90,50,0.95),
    4px  28px 0 0 rgba(150,90,50,0.95),
    8px  28px 0 0 rgba(210,165,120,0.95),
    12px 28px 0 0 rgba(210,165,120,0.95),
    16px 28px 0 0 rgba(150,90,50,0.95),
    20px 28px 0 0 rgba(150,90,50,0.95),
    /* row 8 — stubby legs */
    0px  32px 0 0 rgba(120,70,35,0.95),
    4px  32px 0 0 rgba(120,70,35,0.95),
    12px 32px 0 0 rgba(120,70,35,0.95),
    16px 32px 0 0 rgba(120,70,35,0.95),
    /* row 9 — legs */
    0px  36px 0 0 rgba(120,70,35,0.95),
    4px  36px 0 0 rgba(120,70,35,0.95),
    12px 36px 0 0 rgba(120,70,35,0.95),
    16px 36px 0 0 rgba(120,70,35,0.95),
    /* row 10 — paws */
    0px  40px 0 0 rgba(100,55,25,0.95),
    4px  40px 0 0 rgba(100,55,25,0.95),
    8px  40px 0 0 rgba(100,55,25,0.95),
    12px 40px 0 0 rgba(100,55,25,0.95),
    16px 40px 0 0 rgba(100,55,25,0.95),
    20px 40px 0 0 rgba(100,55,25,0.95);
}
.city-bear::after { content: none; }
.city-bear.flip { transform: scaleX(-1); }

/* Bull — ~44×36px (11×9 pixels at 4px each). Golden/tan, horns up front.   */
.city-bull {
  position: absolute;
  bottom: 24px;
  width: 44px;
  height: 36px;
  pointer-events: none;
  z-index: 7;
}
.city-bull::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: transparent;
  box-shadow:
    /* row 0 — horns */
    4px  0px 0 0 rgba(220,180,60,0.95),
    12px 0px 0 0 rgba(220,180,60,0.95),
    /* row 1 — horns */
    4px  4px 0 0 rgba(220,180,60,0.95),
    8px  4px 0 0 rgba(220,180,60,0.95),
    12px 4px 0 0 rgba(220,180,60,0.95),
    /* row 2 — head */
    0px  8px 0 0 rgba(190,150,70,0.95),
    4px  8px 0 0 rgba(190,150,70,0.95),
    8px  8px 0 0 rgba(190,150,70,0.95),
    12px 8px 0 0 rgba(190,150,70,0.95),
    16px 8px 0 0 rgba(190,150,70,0.95),
    /* row 3 — head + eye + snout */
    0px  12px 0 0 rgba(190,150,70,0.95),
    4px  12px 0 0 rgba(30,20,10,0.9),
    8px  12px 0 0 rgba(190,150,70,0.95),
    12px 12px 0 0 rgba(220,190,130,0.95),
    16px 12px 0 0 rgba(220,190,130,0.95),
    /* row 4 — neck + body */
    0px  16px 0 0 rgba(190,150,70,0.95),
    4px  16px 0 0 rgba(190,150,70,0.95),
    8px  16px 0 0 rgba(190,150,70,0.95),
    12px 16px 0 0 rgba(190,150,70,0.95),
    16px 16px 0 0 rgba(190,150,70,0.95),
    20px 16px 0 0 rgba(190,150,70,0.95),
    24px 16px 0 0 rgba(190,150,70,0.95),
    28px 16px 0 0 rgba(190,150,70,0.95),
    32px 16px 0 0 rgba(190,150,70,0.95),
    36px 16px 0 0 rgba(190,150,70,0.95),
    /* row 5 — body */
    4px  20px 0 0 rgba(190,150,70,0.95),
    8px  20px 0 0 rgba(190,150,70,0.95),
    12px 20px 0 0 rgba(190,150,70,0.95),
    16px 20px 0 0 rgba(190,150,70,0.95),
    20px 20px 0 0 rgba(190,150,70,0.95),
    24px 20px 0 0 rgba(190,150,70,0.95),
    28px 20px 0 0 rgba(190,150,70,0.95),
    32px 20px 0 0 rgba(190,150,70,0.95),
    36px 20px 0 0 rgba(190,150,70,0.95),
    /* row 6 — legs */
    4px  24px 0 0 rgba(160,120,50,0.95),
    8px  24px 0 0 rgba(160,120,50,0.95),
    16px 24px 0 0 rgba(160,120,50,0.95),
    20px 24px 0 0 rgba(160,120,50,0.95),
    28px 24px 0 0 rgba(160,120,50,0.95),
    32px 24px 0 0 rgba(160,120,50,0.95),
    /* row 7 — legs */
    4px  28px 0 0 rgba(160,120,50,0.95),
    8px  28px 0 0 rgba(160,120,50,0.95),
    16px 28px 0 0 rgba(160,120,50,0.95),
    20px 28px 0 0 rgba(160,120,50,0.95),
    28px 28px 0 0 rgba(160,120,50,0.95),
    32px 28px 0 0 rgba(160,120,50,0.95),
    /* row 8 — hooves */
    4px  32px 0 0 rgba(80,60,30,0.95),
    8px  32px 0 0 rgba(80,60,30,0.95),
    16px 32px 0 0 rgba(80,60,30,0.95),
    20px 32px 0 0 rgba(80,60,30,0.95),
    28px 32px 0 0 rgba(80,60,30,0.95),
    32px 32px 0 0 rgba(80,60,30,0.95);
}
.city-bull::after { content: none; }
.city-bull.flip { transform: scaleX(-1); }

/* Roblox-style blocky people */
.city-person {
  position: absolute;
  bottom: 24px;
  width: 14px;
  height: 28px;
  pointer-events: none;
  z-index: 7;
}
.city-person.flip { transform: scaleX(-1); }

/* Head */
.cp-head {
  position: absolute;
  top: 0; left: 2px;
  width: 10px; height: 8px;
  background: rgba(255,213,170,0.97);
  border-radius: 2px;
}
.cp-head::before,
.cp-head::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 2px; height: 2px;
  background: rgba(40,25,15,0.85);
  border-radius: 50%;
}
.cp-head::before { left: 2px; }
.cp-head::after  { right: 2px; }

/* Torso */
.cp-torso {
  position: absolute;
  top: 9px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 1px;
}

/* Arms */
.cp-arm {
  position: absolute;
  top: 9px;
  width: 3px; height: 8px;
  border-radius: 1px;
  transform-origin: top center;
  animation: cp-arm-swing var(--walk-rate, 0.42s) ease-in-out infinite alternate;
}
.cp-arm-l { left: 0; }
.cp-arm-r { right: 0; animation-direction: alternate-reverse; }

/* Legs */
.cp-leg {
  position: absolute;
  top: 18px;
  width: 3px; height: 10px;
  border-radius: 0 0 2px 2px;
  background: rgba(35,45,85,0.92);
  transform-origin: top center;
  animation: cp-leg-swing var(--walk-rate, 0.42s) ease-in-out infinite alternate;
}
.cp-leg-l { left: 4px; }
.cp-leg-r { right: 4px; animation-direction: alternate-reverse; }

@keyframes cp-arm-swing {
  from { transform: rotate(20deg); }
  to   { transform: rotate(-20deg); }
}
@keyframes cp-leg-swing {
  from { transform: rotate(-22deg); }
  to   { transform: rotate(22deg); }
}

/* Speech bubble */
.cp-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.96);
  color: #111;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
}
.cp-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-top-color: rgba(255,255,255,0.96);
}
.city-person.is-shouting .cp-bubble {
  opacity: 1;
}
.city-person.flip .cp-bubble {
  transform: translateX(-50%) scaleX(-1);
}

/* Raised arms when shouting */
.city-person.is-shouting .cp-arm {
  animation: none;
  transform: rotate(-75deg);
  transition: transform 0.15s ease-out;
}

/* Excited little hop */
@keyframes cp-shout-hop {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
@keyframes cp-shout-hop-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%       { transform: scaleX(-1) translateY(-3px); }
}
.city-person.is-shouting        { animation: cp-shout-hop      0.3s ease-in-out infinite; }
.city-person.is-shouting.flip   { animation: cp-shout-hop-flip 0.3s ease-in-out infinite; }

/* Shirt + arm color variants */
.city-person[data-variant="0"] .cp-torso,
.city-person[data-variant="0"] .cp-arm { background: rgba(80,140,255,0.92); }
.city-person[data-variant="1"] .cp-torso,
.city-person[data-variant="1"] .cp-arm { background: rgba(255,100,100,0.92); }
.city-person[data-variant="2"] .cp-torso,
.city-person[data-variant="2"] .cp-arm { background: rgba(90,205,120,0.92); }
.city-person[data-variant="3"] .cp-torso,
.city-person[data-variant="3"] .cp-arm { background: rgba(240,185,60,0.92); }