/* =================================================================
   BTC Wires — Homepage v2 (Pulse Bar + Bento + Signal Wing)
   ================================================================= */

:root {
  --hp2-dark-bg: #0c1116;
  --hp2-dark-panel: #141a22;
  --hp2-dark-border: #1f2832;
  --hp2-dark-text: #e6edf3;
  --hp2-dark-text-mute: #8b98a5;
  --hp2-accent: #168fe9;
  --hp2-accent-2: #e97016;
  --hp2-green: #16c784;
  --hp2-red: #ea3943;
  --hp2-yellow: #f5a623;
  --hp2-purple: #a259ff;
}

/* ---------- 1. Pulse Bar (top of homepage) ---------- */
.pulse-bar {
  z-index: 200;
  background: var(--hp2-dark-bg);
  margin: -10px -10px 0;
  color: var(--hp2-dark-text);
  border-bottom: 1px solid var(--hp2-dark-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pulse-bar-track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 16px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.pulse-bar-track::-webkit-scrollbar { display: none; }

.pulse-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pulse-label {
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
}

.pulse-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pulse-meta {
  color: var(--hp2-dark-text-mute);
  font-size: 11px;
}

.pulse-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}

.pulse-delta.up   { color: var(--hp2-green); background: rgba(22,199,132,0.12); }
.pulse-delta.down { color: var(--hp2-red);   background: rgba(234,57,67,0.12); }

.pulse-whale {
  flex: 1;
  min-width: 240px;
  border-left: 1px solid var(--hp2-dark-border);
  padding-left: 14px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.pulse-whale-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
}

.pulse-whale-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
}

.pulse-whale-feed {
  display: inline-block;
  white-space: nowrap;
  animation: whale-marquee 80s linear infinite;
}

.pulse-whale-feed.is-paused { animation-play-state: paused; }

@keyframes whale-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.whale-tx {
  display: inline-block;
  padding: 0 28px;
  color: var(--hp2-dark-text);
}

.whale-tx-amount { color: var(--hp2-accent); font-weight: 600; }
.whale-tx-arrow  { color: var(--hp2-dark-text-mute); margin: 0 6px; }
.whale-tx-from, .whale-tx-to { color: var(--hp2-dark-text-mute); }

.pulse-mr-toggle {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  margin-right: 12px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.pulse-mr-toggle:hover { color: var(--hp2-dark-text); border-color: var(--hp2-accent); }
.pulse-mr-toggle.is-active { color: var(--hp2-accent); border-color: var(--hp2-accent); }

.pulse-blink {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp2-green);
  margin-right: 6px;
  animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- 2. Main Grid Layout ---------- */
.hp2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.hp2-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

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

/* ---------- 3. Hero (Alpha) ---------- */
.hp2-hero {
  background: var(--hp2-dark-panel);
  color: var(--hp2-dark-text);
  border-radius: 12px;
  border: 1px solid var(--hp2-dark-border);
  overflow: hidden;
}

.hp2-hero-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 780px) {
  .hp2-hero-card { grid-template-columns: 1fr; }
}

.hp2-hero-thumb {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.hp2-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.hp2-hero-thumb::after {
  content: "BREAKING";
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--hp2-red);
  color: white;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
}

.hp2-hero-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp2-hero-tags { display: flex; gap: 6px; }

.hp2-tag {
  background: rgba(22,143,233,0.15);
  color: var(--hp2-accent);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: ui-monospace, monospace;
}

.hp2-tag:hover { background: rgba(22,143,233,0.25); }

.hp2-hero-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; }
.hp2-hero-title a { color: var(--hp2-dark-text); text-decoration: none; }
.hp2-hero-title a:hover { color: var(--hp2-accent); }

.hp2-ai-summary {
  background: rgba(162,89,255,0.08);
  border-left: 3px solid var(--hp2-purple);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
}

.hp2-ai-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--hp2-purple);
  letter-spacing: 0.8px;
  margin-bottom: 5px;
  font-family: ui-monospace, monospace;
}

.hp2-ai-summary p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hp2-dark-text-mute);
}

.hp2-vote {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hp2-vote-prompt {
  font-size: 12px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: ui-monospace, monospace;
}

.hp2-vote-btn {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hp2-vote-btn .hp2-vote-pct {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

.hp2-vote-btn.hp2-bull:hover, .hp2-vote-btn.hp2-bull.is-voted {
  border-color: var(--hp2-green);
  background: rgba(22,199,132,0.12);
}

.hp2-vote-btn.hp2-bear:hover, .hp2-vote-btn.hp2-bear.is-voted {
  border-color: var(--hp2-red);
  background: rgba(234,57,67,0.12);
}

.hp2-vote-btn.hp2-bull.is-voted .hp2-vote-pct { color: var(--hp2-green); }
.hp2-vote-btn.hp2-bear.is-voted .hp2-vote-pct { color: var(--hp2-red); }

.hp2-read-more {
  margin-top: 4px;
  color: var(--hp2-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
}

.hp2-read-more:hover { text-decoration: underline; }

/* ---------- 3.5. Crowd & Franchise: 3 pillars ---------- */
.hp2-pillars {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 18px 20px 20px;
}

.hp2-pillars-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hp2-pillars-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--hp2-dark-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: ui-monospace, monospace;
}

.hp2-pillars-sub {
  font-size: 12px;
  color: var(--hp2-dark-text-mute);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

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

.pillar {
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.pillar-pro::before    { background: linear-gradient(90deg, var(--hp2-accent), #1da3ff); }
.pillar-alpha::before  { background: linear-gradient(90deg, var(--hp2-purple), #c98aff); }
.pillar-people::before { background: linear-gradient(90deg, var(--hp2-accent-2), #ffb066); }

.pillar-head { display: flex; flex-direction: column; gap: 4px; }

.pillar-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
  font-family: ui-monospace, monospace;
}

.pillar-badge-pro    { background: rgba(22,143,233,0.18);  color: var(--hp2-accent); }
.pillar-badge-alpha  { background: rgba(162,89,255,0.18);  color: var(--hp2-purple); }
.pillar-badge-people { background: rgba(233,112,22,0.18);  color: var(--hp2-accent-2); }

.pillar-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--hp2-dark-text);
}

.pillar-sub {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pillar-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 5px;
  border-left: 2px solid var(--hp2-dark-border);
}

.pillar-list li.bull { border-left-color: var(--hp2-green); }
.pillar-list li.bear { border-left-color: var(--hp2-red); }

.pillar-list .franchise-name { color: var(--hp2-dark-text); font-weight: 500; }
.pillar-list .franchise-score { font-family: ui-monospace, monospace; font-size: 11px; }
.pillar-list .franchise-score.bull { color: var(--hp2-green); }
.pillar-list .franchise-score.bear { color: var(--hp2-red); }

/* ----- dial (semicircle gauge) ----- */
.pillar-dial {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(22,143,233,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.dial-svg { width: 170px; height: 108px; flex-shrink: 0; }

#proDialNeedle {
  transform-box: view-box;
  transform-origin: 110px 110px;
  transition: transform 0.7s cubic-bezier(.4, 1.6, .5, 1);
  transform: rotate(-90deg);
}

.dial-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dial-label {
  font-size: 9px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: ui-monospace, monospace;
}
.dial-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.dial-value #proDialValue {
  font-size: 28px;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  color: var(--hp2-dark-text);
}
.dial-value-max {
  font-size: 13px;
  font-weight: 600;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
}
.dial-mood {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-family: ui-monospace, monospace;
  padding: 4px 9px;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 2px;
}
.dial-mood.bull    { color: var(--hp2-green);  background: rgba(22,199,132,0.18); }
.dial-mood.bear    { color: var(--hp2-red);    background: rgba(234,57,67,0.18); }
.dial-mood.neutral { color: var(--hp2-yellow); background: rgba(245,166,35,0.18); }

/* ----- expert takes ----- */
.pillar-takes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.pillar-takes li {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--hp2-purple);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expert-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.expert-handle {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--hp2-purple);
  font-weight: 600;
}

.expert-verified {
  font-size: 10px;
  background: rgba(22,143,233,0.18);
  color: var(--hp2-accent);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
}

.expert-take {
  font-size: 12px;
  line-height: 1.45;
  color: var(--hp2-dark-text);
}

.expert-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

.expert-follow {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.expert-follow:hover { border-color: var(--hp2-purple); color: var(--hp2-purple); }
.expert-follow.is-followed { border-color: var(--hp2-purple); background: rgba(162,89,255,0.12); color: var(--hp2-purple); }

/* ----- community pillar ----- */
.pillar-people-poll { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 10px; }

.people-poll-q { font-size: 13px; line-height: 1.4; margin-bottom: 10px; color: var(--hp2-dark-text); }

.people-poll-bars { display: flex; flex-direction: column; gap: 6px; }

.people-poll-bar {
  position: relative;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.people-poll-bar .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(22,143,233,0.35), rgba(22,143,233,0.15));
  transition: width 0.6s ease;
}

.people-poll-bar .bar-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  color: var(--hp2-dark-text);
}

.people-poll-bar .bar-pct { color: var(--hp2-dark-text-mute); }

.people-poll-meta {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
  margin-top: 8px;
}

.pillar-cast-btn {
  background: linear-gradient(135deg, var(--hp2-accent-2), #ff9c4d);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  transition: transform 0.15s;
  box-shadow: 0 0 14px rgba(233,112,22,0.25);
}

.pillar-cast-btn:hover { transform: translateY(-1px); }

.pillar-foot {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
  margin-top: auto;
  padding-top: 4px;
  line-height: 1.4;
}

/* ---------- 4. Chart with Predict & Earn ---------- */
.hp2-chart {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  overflow: hidden;
}

.hp2-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hp2-dark-border);
}

.hp2-chart-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--hp2-dark-text);
  font-family: ui-monospace, monospace;
}

.hp2-predict-btn {
  background: linear-gradient(135deg, var(--hp2-accent-2), #ff8c3b);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: 0 0 14px rgba(233,112,22,0.3);
  transition: transform 0.15s;
}

.hp2-predict-btn:hover { transform: translateY(-1px); }

.hp2-chart-frame {
  position: relative;
  height: 380px;
  background: #000;
}

.hp2-chart-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 5. Bento Grid ---------- */
.hp2-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .hp2-bento { grid-template-columns: 1fr; }
}

.bento {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--hp2-dark-text);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.bento-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 12px;
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
}

.bento-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
}

.bento-dot-live {
  background: var(--hp2-green);
  animation: blink 1.6s ease-in-out infinite;
}

.bento-foot {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
}

/* Bento A: Live Flow */
.bento-flow-cols { display: flex; gap: 14px; flex: 1; }

.bento-flow-col { flex: 1; min-width: 0; }

.bento-flow-label {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
}

.bento-flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bento-flow-list li {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.bento-flow-list .sym { font-weight: 600; }
.bento-flow-list .delta.up { color: var(--hp2-green); }
.bento-flow-list .delta.down { color: var(--hp2-red); }

/* Bento B: Heatmap */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1;
  min-height: 200px;
}

.heat-cell {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  color: white;
  overflow: hidden;
  cursor: default;
  transition: transform 0.15s;
}

.heat-cell:hover { transform: scale(1.04); z-index: 1; }

.heat-cell .heat-sym { font-weight: 700; font-size: 14px; }
.heat-cell .heat-pct { font-size: 12px; opacity: 0.95; }

/* Bento C: AI Assistant */
.ai-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-greeting {
  font-size: 12px;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 4px;
}

.ai-suggest {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ai-suggest:hover { border-color: var(--hp2-accent); background: rgba(22,143,233,0.08); }

.ai-form {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.ai-form input {
  flex: 1;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
}

.ai-form input:focus { outline: none; border-color: var(--hp2-accent); }

.ai-form button {
  background: var(--hp2-accent);
  border: none;
  color: white;
  width: 36px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.ai-msg {
  background: rgba(162,89,255,0.08);
  border-left: 2px solid var(--hp2-accent-2);
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 0 4px 4px 0;
  color: var(--hp2-dark-text-mute);
}

/* ---------- 6. Signal Wing (right sidebar) ---------- */
.hp2-wing {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 90px;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

@media (max-width: 1100px) {
  .hp2-wing { position: static; }
}

.wing-card {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--hp2-dark-text);
}

.wing-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 12px;
  font-family: ui-monospace, monospace;
}

.wing-signal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.wing-signal {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--hp2-yellow);
  padding: 8px 10px;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.45;
}

.wing-signal.tag-buy   { border-left-color: var(--hp2-green); }
.wing-signal.tag-sell  { border-left-color: var(--hp2-red); }
.wing-signal.tag-watch { border-left-color: var(--hp2-yellow); }
.wing-signal.tag-info  { border-left-color: var(--hp2-accent); }

.wing-signal-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.4px;
}

.wing-signal.tag-buy   .wing-signal-tag { background: rgba(22,199,132,0.18); color: var(--hp2-green); }
.wing-signal.tag-sell  .wing-signal-tag { background: rgba(234,57,67,0.18); color: var(--hp2-red); }
.wing-signal.tag-watch .wing-signal-tag { background: rgba(245,166,35,0.18); color: var(--hp2-yellow); }
.wing-signal.tag-info  .wing-signal-tag { background: rgba(22,143,233,0.18); color: var(--hp2-accent); }

.wing-signal-title { font-weight: 600; color: var(--hp2-dark-text); }
.wing-signal-meta { color: var(--hp2-dark-text-mute); font-size: 11px; margin-top: 2px; }

/* WireCredits */
.wing-credits-balance {
  font-size: 32px;
  font-weight: 700;
  color: var(--hp2-yellow);
  font-family: ui-monospace, monospace;
  margin: 4px 0 10px;
}

.wing-connect-wallet {
  width: 100%;
  background: linear-gradient(135deg, var(--hp2-accent), #1da3ff);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: transform 0.15s;
}

.wing-connect-wallet:hover { transform: translateY(-1px); }

.wing-credits-meta {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  margin-top: 10px;
  line-height: 1.4;
}

/* Quick Poll */
.poll-question { font-size: 13px; margin-bottom: 10px; line-height: 1.4; }

.poll-options { display: flex; flex-direction: column; gap: 6px; }

.poll-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s;
}

.poll-option:hover:not(.is-disabled) { border-color: var(--hp2-accent); }

.poll-option.is-voted {
  border-color: var(--hp2-accent);
  background: rgba(22,143,233,0.1);
}

.poll-option.is-disabled { cursor: default; }

.poll-option .poll-pct {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

.poll-option.is-voted .poll-pct { color: var(--hp2-accent); }

/* ---------- 7. News grid (below hero) ---------- */
.hp2-news {
  max-width: 1600px;
  margin: 20px auto 40px;
  padding: 0 20px;
}

.hp2-section-h {
  font-size: 22px;
  font-weight: 700;
  color: var(--hero-color, #2c3e50);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hp2-accent);
  display: inline-block;
}

.hp2-news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1100px) { .hp2-news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .hp2-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hp2-news-grid { grid-template-columns: 1fr; } }

.hp2-news-card {
  background: #fff;
  border: 2px solid #d8e2eb;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 0 #d8e2eb;
  position: relative;
}

.hp2-news-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 8px 0 0 var(--hp2-accent, #168fe9);
  border-color: var(--hp2-accent, #168fe9);
}

.hp2-news-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0c1116;
  overflow: hidden;
  display: block;
  border-bottom: 2px solid #d8e2eb;
}

.hp2-news-card:hover .hp2-news-thumb { border-bottom-color: var(--hp2-accent); }

.hp2-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.hp2-news-card:hover .hp2-news-thumb img { transform: scale(1.06); }

.hp2-news-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--hp2-accent);
  background: linear-gradient(135deg, #f2f6fa, #d8e2eb);
}

/* Pixel-styled category badge — overlay on thumbnail */
.hp2-news-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--hp2-dark-bg, #0c1116);
  color: var(--hp2-accent-2, #e97016);
  padding: 5px 9px 4px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.5);
  text-decoration: none;
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color per category — cycle through accent colors */
.hp2-news-card-tag[data-tag="c-buzz"]          { color: var(--hp2-purple); }
.hp2-news-card-tag[data-tag="round-the-block"] { color: var(--hp2-accent); }
.hp2-news-card-tag[data-tag="cryptalk"]        { color: var(--hp2-green); }
.hp2-news-card-tag[data-tag="analysis"]        { color: var(--hp2-yellow); }
.hp2-news-card-tag[data-tag="glossary"]        { color: #c98aff; }
.hp2-news-card-tag[data-tag="block-o-pedia"]   { color: var(--hp2-red); }
.hp2-news-card-tag[data-tag="opinions"]   { color: var(--hp2-accent-2); }
.hp2-news-card-tag[data-tag="press-release"]   { color: var(--hp2-accent-2); }

/* READ badge — fades in on hover */
.hp2-news-read {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--hp2-accent, #168fe9);
  color: #fff;
  padding: 5px 9px 4px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2;
  pointer-events: none;
}

.hp2-news-card:hover .hp2-news-read {
  opacity: 1;
  transform: translateY(0);
}

.hp2-news-body {
  padding: 14px 14px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hp2-news-title {
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}

.hp2-news-title a {
  color: #1a2330;
  text-decoration: none;
  background-image: linear-gradient(var(--hp2-accent, #168fe9), var(--hp2-accent, #168fe9));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.25s ease, color 0.15s ease;
  padding-bottom: 2px;
}

.hp2-news-card:hover .hp2-news-title a {
  color: var(--hp2-accent, #168fe9);
  background-size: 100% 2px;
}

.hp2-news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: #6c7886;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px dashed #e6eef5;
}

.hp2-news-meta-date { color: #4c5867; font-weight: 600; }
.hp2-news-meta-read::before { content: "⏱ "; opacity: 0.7; }
.hp2-news-meta-author { color: var(--hp2-accent, #168fe9); }
.hp2-news-meta-sep { color: #c0c8d2; }

/* ---------- 8. Predict & Earn modal ---------- */
.hp2-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.hp2-modal.is-open { display: flex; }

.hp2-modal-card {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  color: var(--hp2-dark-text);
  text-align: center;
}

.hp2-modal-card h3 { margin: 0 0 8px; font-size: 20px; }
.hp2-modal-card p  { color: var(--hp2-dark-text-mute); margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.hp2-modal-close {
  background: transparent; border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text); padding: 8px 18px; border-radius: 6px; cursor: pointer; font-family: inherit;
}
.hp2-modal-close:hover { border-color: var(--hp2-accent); }

/* ---------- 9. MR (Machine-Readable) banner ---------- */
.mr-banner {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-accent-2);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 20px;
  display: none;
  color: var(--hp2-dark-text);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.mr-banner.is-visible { display: block; }

.mr-banner pre { margin: 8px 0 0; max-height: 200px; overflow: auto; color: var(--hp2-dark-text-mute); font-size: 11px; }

/* =================================================================
   FOOTER v2 — Pixel Arcade
   ================================================================= */

.footer-v2 {
  --fv2-bg: #0a0e13;
  --fv2-bg-alt: #111720;
  --fv2-line: #1f2832;
  --fv2-text: #e6edf3;
  --fv2-mute: #7a8693;
  --fv2-pixel: 'Press Start 2P', ui-monospace, monospace;
  --fv2-term: 'VT323', ui-monospace, monospace;
  background: var(--fv2-bg);
  color: var(--fv2-text);
  position: relative;
  padding: 0 0 24px;
  font-family: inherit;
  border-top: 4px solid var(--hp2-accent, #168fe9);
  box-shadow: inset 0 8px 0 0 var(--fv2-bg-alt);
  margin-top: 60px;
}

/* Subtle pixel grid background */
.footer-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22,143,233,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,143,233,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.footer-v2 > * { position: relative; z-index: 1; }

/* ---------- 1. Banner ---------- */
.footer-banner {
  background: linear-gradient(135deg, #1a2330 0%, #0c1116 100%);
  border-bottom: 4px solid var(--hp2-accent, #168fe9);
  padding: 22px 32px;
  position: relative;
  overflow: hidden;
}

.footer-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.footer-banner-left { display: flex; align-items: center; gap: 18px; }

.footer-banner-pixel-coin {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--hp2-accent-2, #e97016);
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 -6px 0 0 #b35610,
    0 0 0 4px #0a0e13,
    0 0 0 6px var(--hp2-accent-2, #e97016),
    6px 6px 0 0 rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fv2-pixel);
  font-size: 18px;
  color: #fff;
  text-shadow: 2px 2px 0 #b35610;
}

.footer-banner-pixel-coin::before { content: "₿"; }

.footer-banner-eyebrow {
  font-family: var(--fv2-pixel);
  font-size: 9px;
  color: var(--hp2-accent-2, #e97016);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.footer-banner-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}

.footer-banner-sub {
  margin: 0;
  font-size: 13px;
  color: var(--fv2-mute);
}

.footer-newsletter {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: var(--fv2-bg);
  padding: 4px;
  box-shadow: 4px 4px 0 0 var(--hp2-accent, #168fe9);
  border: 2px solid var(--hp2-accent, #168fe9);
  min-width: 320px;
}

.footer-newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fv2-text);
  padding: 10px 12px;
  font-family: var(--fv2-term);
  font-size: 18px;
  outline: none;
  min-width: 0;
}

.footer-newsletter input::placeholder { color: var(--fv2-mute); }

.footer-newsletter-btn {
  background: var(--hp2-accent, #168fe9);
  color: #fff;
  border: none;
  padding: 0 18px;
  font-family: var(--fv2-pixel);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.1s;
}

.footer-newsletter-btn:hover { background: var(--hp2-accent-2, #e97016); }
.footer-newsletter-btn:active { transform: translate(2px,2px); }

.footer-banner-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 18px,
    rgba(22,143,233,0.04) 18px,
    rgba(22,143,233,0.04) 36px
  );
  pointer-events: none;
}

/* ---------- 2. Main grid ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 36px 32px 24px;
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-col-stats { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-banner-inner { flex-direction: column; align-items: flex-start; }
  .footer-newsletter { min-width: 0; width: 100%; }
}

.footer-col { display: flex; flex-direction: column; gap: 12px; }

.footer-col-h {
  margin: 0 0 10px;
  font-family: var(--fv2-pixel);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent, #168fe9);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--fv2-line);
}

/* Brand column */
.footer-col-brand { gap: 16px; }

.footer-logo-wrap {
  display: inline-block;
  padding: 10px 14px;
  background: var(--primary-color, #f5faf8);  /* match the header bg so the dark logo reads */
  border: 2px solid var(--hp2-accent, #168fe9);
  box-shadow: 4px 4px 0 0 var(--hp2-accent, #168fe9);
  align-self: flex-start;
  transition: transform 0.1s;
}

.footer-logo-wrap:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--hp2-accent-2, #e97016); }
.footer-logo-wrap:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 0 var(--hp2-accent-2, #e97016); }

.footer-logo {
  display: block;
  height: 44px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(22,143,233,0.10));
}

.footer-tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fv2-mute);
}

.footer-socials { display: flex; gap: 8px; flex-wrap: wrap; }

.footer-soc {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fv2-bg-alt);
  color: var(--fv2-text);
  text-decoration: none;
  font-family: var(--fv2-pixel);
  font-size: 13px;
  border: 2px solid var(--fv2-line);
  box-shadow: 3px 3px 0 0 #000;
  transition: all 0.1s;
}

.footer-soc:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 0 var(--hp2-accent, #168fe9);
  border-color: var(--hp2-accent, #168fe9);
  color: var(--hp2-accent, #168fe9);
}

.footer-soc:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--hp2-accent, #168fe9); }

.footer-soc-x  { font-size: 16px; }
.footer-soc-yt { color: #ff4d4d; }
.footer-soc-ig { font-size: 16px; }
.footer-soc-rd { color: #ff4500; font-size: 12px; font-weight: 700; letter-spacing: -0.5px; }
.footer-soc-md { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 900; font-style: italic; }

/* Link lists */
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }

.footer-links a {
  color: var(--fv2-text);
  text-decoration: none;
  font-size: 14px;
  font-family: var(--fv2-term);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  transition: all 0.1s;
  text-transform: capitalize;
}

.footer-links a::before {
  content: "▸ ";
  color: transparent;
  margin-right: 4px;
  transition: color 0.1s;
}

.footer-links a:hover {
  color: var(--hp2-accent-2, #e97016);
  background: rgba(233,112,22,0.08);
}

.footer-links a:hover::before { color: var(--hp2-accent-2, #e97016); }

/* Arcade / stats column */
.footer-col-stats { gap: 14px; }

.footer-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--fv2-bg-alt);
  border: 2px solid var(--fv2-line);
  font-family: var(--fv2-term);
}

.footer-stat-label {
  font-family: var(--fv2-pixel);
  font-size: 8px;
  color: var(--fv2-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-stat-value {
  font-size: 18px;
  color: var(--hp2-green, #16c784);
  font-weight: 700;
}

.footer-stat-value.footer-stat-sm { font-size: 14px; color: var(--fv2-text); }

.footer-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--hp2-purple, #a259ff), #d28aff);
  color: #fff;
  text-decoration: none;
  font-family: var(--fv2-pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  border: 2px solid #fff;
  box-shadow: 4px 4px 0 0 #000;
  text-align: center;
  transition: all 0.1s;
}

.footer-badge:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 0 var(--hp2-yellow, #f5a623);
}

/* ---------- 3. Bottom strip ---------- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 32px 0;
  border-top: 2px dashed var(--fv2-line);
  font-family: var(--fv2-term);
  font-size: 15px;
  color: var(--fv2-mute);
}

.footer-copy kbd {
  background: var(--fv2-bg-alt);
  color: var(--fv2-text);
  padding: 1px 7px;
  border: 1px solid var(--fv2-line);
  border-radius: 2px;
  font-family: var(--fv2-pixel);
  font-size: 9px;
  margin: 0 2px;
}

.footer-meta { font-family: var(--fv2-pixel); font-size: 9px; letter-spacing: 1px; color: var(--fv2-mute); }

.footer-blink { color: var(--hp2-green, #16c784); animation: blink 1.2s steps(2) infinite; }

.footer-up {
  background: var(--hp2-accent, #168fe9);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-family: var(--fv2-pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 #000;
  transition: all 0.1s;
}

.footer-up:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 var(--hp2-accent-2, #e97016); }
.footer-up:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--hp2-accent-2, #e97016); }

/* ---------- Hide legacy footer-* leftover scrollers ---------- */
.footer-wires, .footer-desc, #upArrow.upArrow { display: none !important; }

/* =================================================================
   HEADER v2 — sticky, clean, with WC pill + search trigger
   ================================================================= */
.hp2-body { display: block; margin: 0; padding: 0; }
.hp2-body .container { max-width: 100%; }

.hp2-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e6eef5;
  box-shadow: 0 1px 0 rgba(22,143,233,0.04);
}

.hp2-header-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 22px;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 60px;
}

.hp2-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 6px;
  margin: -10px 0;          /* let the oversized mark visually overflow the header line */
  text-decoration: none;
  transition: transform 0.15s;
}

.hp2-logo:hover { transform: scale(1.04) rotate(-1deg); }

.hp2-logo-img {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(22, 143, 233, 0.18));
}

@media (max-width: 720px) {
  .hp2-logo-img { height: 48px; }
  .hp2-logo { margin: -6px 0; }
}

.hp2-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hp2-nav::-webkit-scrollbar { display: none; }

.hp2-nav-link {
  color: #1a2330;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

.hp2-nav-link:hover {
  background: rgba(22,143,233,0.08);
  color: var(--hp2-accent, #168fe9);
}

.hp2-header-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Search trigger pill */
.hp2-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f2f6fa;
  border: 1px solid #e6eef5;
  color: #6c7886;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: all 0.15s;
  min-width: 200px;
}

.hp2-search-trigger:hover {
  border-color: var(--hp2-accent, #168fe9);
  color: var(--hp2-accent, #168fe9);
  background: #fff;
}

.hp2-search-icon { font-size: 16px; }
.hp2-search-text { flex: 1; text-align: left; }

.hp2-search-kbd {
  background: #fff;
  color: #6c7886;
  border: 1px solid #d8e2eb;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  padding: 1px 6px;
  font-weight: 600;
}

/* Combined Login/Join + WC pill */
.hp2-login-wc {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  background: var(--hp2-accent, #168fe9);
  box-shadow: 0 1px 2px rgba(22,143,233,0.25), 2px 2px 0 0 rgba(0,0,0,0.04);
  transition: transform 0.12s, box-shadow 0.12s;
}

.hp2-login-wc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,143,233,0.35), 3px 3px 0 0 rgba(0,0,0,0.06); }
.hp2-login-wc:active { transform: translateY(0); }

.hp2-wc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  padding: 9px 11px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.25);
}

.hp2-wc-gem { font-size: 13px; }
.hp2-wc-amount { font-variant-numeric: tabular-nums; }
.hp2-wc-unit { font-size: 11px; opacity: 0.9; }

.hp2-login-action {
  color: #fff;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Burger (mobile) */
.hp2-burger {
  display: none;
  width: 38px;
  height: 38px;
  background: #f2f6fa;
  border: 1px solid #e6eef5;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.hp2-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #1a2330;
  margin: 4px auto;
  transition: all 0.2s;
  border-radius: 1px;
}

.hp2-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hp2-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hp2-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav drawer */
.hp2-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 14px 14px;
  border-top: 1px solid #e6eef5;
  background: #fff;
  gap: 4px;
}

.hp2-mobile-nav[hidden] { display: none !important; }

.hp2-mobile-link {
  display: block;
  padding: 10px 12px;
  color: #1a2330;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: capitalize;
}

.hp2-mobile-link:hover { background: #f2f6fa; color: var(--hp2-accent, #168fe9); }

.hp2-mobile-cta {
  margin-top: 4px;
  background: var(--hp2-accent, #168fe9);
  color: #fff !important;
  text-align: center;
}

/* Responsive */
@media (max-width: 980px) {
  .hp2-nav { display: none; }
  .hp2-search-trigger { min-width: 0; padding: 7px 9px; }
  .hp2-search-text, .hp2-search-kbd { display: none; }
  .hp2-burger { display: block; }
  .hp2-mobile-nav { display: flex; }
}

@media (max-width: 560px) {
  .hp2-login-action { display: none; }
  .hp2-wc-pill { border-right: none; padding: 9px 12px; }
  .hp2-header-bar { padding: 8px 14px; gap: 10px; }
}

/* Remove main padding (we control spacing per section) */
.hp2-main-shell { padding: 0; min-height: 50vh; }

/* Reset the pulse bar margin since main no longer has padding */
.pulse-bar { margin: 0; }

/* =================================================================
   HEATMAP — full-width wide treemap-style grid
   ================================================================= */
.hp2-heatmap-wide {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp2-heatmap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.hp2-heatmap-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--hp2-dark-text);
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
}

.hp2-heatmap-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
}

.hp2-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--hp2-dark-text-mute);
}

.legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.legend-bear   { background: rgba(234,57,67,0.7); }
.legend-flat   { background: rgba(139,152,165,0.5); }
.legend-bull   { background: rgba(22,199,132,0.7); }

/* Squarified treemap: cells absolutely positioned with size proportional to market cap */
.hp2-heatmap-grid {
  position: relative;
  width: 100%;
  height: 560px;
  background: rgba(255,255,255,0.015);
  border-radius: 8px;
  overflow: hidden;
  color: var(--hp2-dark-text-mute);
  font-size: 12px;
  padding: 0;
}

.hp2-heatmap-grid .heat-cell {
  position: absolute;
  border-radius: 3px;
  padding: 7px 9px;
  overflow: hidden;
  cursor: pointer;
  transition: outline 0.15s, transform 0.15s;
  outline: 1px solid rgba(0,0,0,0.3);
  outline-offset: -1px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, monospace;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.18;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.hp2-heatmap-grid .heat-cell:hover {
  outline: 2px solid #fff;
  z-index: 5;
}

.hp2-heatmap-grid .heat-cell .heat-cell-top { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hp2-heatmap-grid .heat-cell .heat-cell-bot { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; }
.hp2-heatmap-grid .heat-cell .heat-sym    { font-weight: 800; line-height: 1.05; letter-spacing: -0.3px; }
.hp2-heatmap-grid .heat-cell .heat-name   { opacity: 0.78; }
.hp2-heatmap-grid .heat-cell .heat-price  { opacity: 0.93; }
.hp2-heatmap-grid .heat-cell .heat-pct    { font-weight: 700; }

/* Tier sizing — JS adds .tier-xs/sm/md/lg/xl based on cell area */
.hp2-heatmap-grid .heat-cell.tier-xl .heat-sym   { font-size: 30px; }
.hp2-heatmap-grid .heat-cell.tier-xl .heat-name  { font-size: 13px; }
.hp2-heatmap-grid .heat-cell.tier-xl .heat-price { font-size: 14px; }
.hp2-heatmap-grid .heat-cell.tier-xl .heat-pct   { font-size: 20px; }

.hp2-heatmap-grid .heat-cell.tier-lg .heat-sym   { font-size: 21px; }
.hp2-heatmap-grid .heat-cell.tier-lg .heat-name  { font-size: 11px; }
.hp2-heatmap-grid .heat-cell.tier-lg .heat-price { font-size: 12px; }
.hp2-heatmap-grid .heat-cell.tier-lg .heat-pct   { font-size: 14px; }

.hp2-heatmap-grid .heat-cell.tier-md .heat-sym   { font-size: 15px; }
.hp2-heatmap-grid .heat-cell.tier-md .heat-name  { display: none; }
.hp2-heatmap-grid .heat-cell.tier-md .heat-price { font-size: 11px; }
.hp2-heatmap-grid .heat-cell.tier-md .heat-pct   { font-size: 12px; }

.hp2-heatmap-grid .heat-cell.tier-sm .heat-sym   { font-size: 12px; }
.hp2-heatmap-grid .heat-cell.tier-sm .heat-name,
.hp2-heatmap-grid .heat-cell.tier-sm .heat-price { display: none; }
.hp2-heatmap-grid .heat-cell.tier-sm .heat-pct   { font-size: 10px; opacity: 0.85; }

.hp2-heatmap-grid .heat-cell.tier-xs .heat-name,
.hp2-heatmap-grid .heat-cell.tier-xs .heat-price,
.hp2-heatmap-grid .heat-cell.tier-xs .heat-pct  { display: none; }
.hp2-heatmap-grid .heat-cell.tier-xs .heat-sym  { font-size: 10px; }

@media (max-width: 980px) { .hp2-heatmap-grid { height: 640px; } }
@media (max-width: 560px) { .hp2-heatmap-grid { height: 700px; } }

/* Live Flow as a full-width card with wider columns */
.bento-flow-wide .bento-flow-cols { gap: 32px; }
.bento-flow-wide .bento-flow-list li { font-size: 13.5px; padding: 7px 4px; }
.bento-flow-wide .bento-flow-list .sym { font-size: 13.5px; }

/* =================================================================
   FAB (Wires AI) — floating button + side panel
   ================================================================= */
.hp2-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hp2-dark-bg, #0c1116);
  color: #fff;
  border: 2px solid var(--hp2-accent, #168fe9);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--hp2-accent, #168fe9), 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}

.hp2-fab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--hp2-accent-2, #e97016), 0 12px 24px rgba(0,0,0,0.3);
}

.hp2-fab:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 0 var(--hp2-accent-2, #e97016); }

.hp2-fab-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--hp2-accent-2, #e97016);
  color: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(233,112,22,0.5));
}

.hp2-fab-label { font-size: 13.5px; }

.hp2-fab.is-open { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Panel */
.hp2-fab-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 420px;
  max-width: calc(100vw - 44px);
  max-height: min(640px, calc(100vh - 44px));
  background: var(--hp2-dark-bg);
  color: var(--hp2-dark-text);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  z-index: 260;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  animation: hp2-fab-in 0.22s ease;
}

.hp2-fab-panel[hidden] { display: none; }

@keyframes hp2-fab-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (max-width: 560px) {
  .hp2-fab-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 88vh;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .hp2-fab { right: 14px; bottom: 14px; padding: 10px 14px 10px 10px; }
  .hp2-fab-label { display: none; }
}

.hp2-fab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hp2-dark-border);
  background: linear-gradient(180deg, rgba(233,112,22,0.10), transparent 70%), linear-gradient(180deg, rgba(22,143,233,0.06), transparent);
}

.hp2-fab-title {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hp2-fab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hp2-green);
  box-shadow: 0 0 10px var(--hp2-green);
  animation: blink 1.6s ease-in-out infinite;
}

.hp2-fab-close {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hp2-fab-close:hover { color: var(--hp2-dark-text); border-color: var(--hp2-accent); }

.hp2-fab-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hp2-dark-border);
  background: rgba(255,255,255,0.02);
}

.hp2-fab-search-icon { font-size: 18px; color: var(--hp2-dark-text-mute); }

.hp2-fab-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--hp2-dark-text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  min-width: 0;
}

.hp2-fab-search input::placeholder { color: var(--hp2-dark-text-mute); }

.hp2-fab-enter-hint {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.14);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(233,112,22,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.hp2-fab-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 100px;
}

.hp2-fab-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--hp2-dark-text-mute);
  line-height: 1.6;
}

.hp2-fab-empty kbd {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text);
}

.hp2-fab-result {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.1s;
  margin-bottom: 4px;
}

.hp2-fab-result:hover, .hp2-fab-result.is-active {
  background: rgba(22,143,233,0.08);
  border-color: rgba(22,143,233,0.3);
}

.hp2-fab-result-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hp2-fab-result-thumb {
  width: 56px;
  height: 42px;
  flex-shrink: 0;
  background: var(--hp2-dark-panel);
  border-radius: 4px;
  overflow: hidden;
}

.hp2-fab-result-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hp2-fab-result-body { flex: 1; min-width: 0; }

.hp2-fab-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hp2-dark-text);
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp2-fab-result-title mark {
  background: rgba(245,166,35,0.25);
  color: var(--hp2-yellow);
  padding: 0 2px;
  border-radius: 2px;
}

.hp2-fab-result-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  display: flex;
  gap: 8px;
  align-items: center;
}

.hp2-fab-result-tag {
  color: var(--hp2-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hp2-fab-result-score {
  margin-left: auto;
  color: var(--hp2-accent-2);
  font-size: 10px;
  background: rgba(233,112,22,0.12);
  padding: 1px 5px;
  border-radius: 2px;
}

.hp2-fab-ai-mode {
  padding: 24px 18px;
  text-align: center;
  font-size: 14px;
  color: var(--hp2-dark-text);
  background: linear-gradient(180deg, rgba(233,112,22,0.08), transparent);
  border-radius: 8px;
  margin: 8px;
}

.hp2-fab-ai-mode strong { display: block; margin-bottom: 6px; color: var(--hp2-accent-2); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; font-family: ui-monospace, monospace; }

.hp2-fab-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--hp2-dark-border);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--hp2-dark-text-mute);
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,0.02);
}

.hp2-fab-foot kbd {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
}

.hp2-fab-foot-sep { color: var(--hp2-dark-border); }

/* Hide legacy header / footer scroll-up button artefacts */
.nav-bar, .nav-bar-signIn-comp, #navCompSmall, #searchBox, #searchContainer { display: none !important; }

/* =================================================================
   LOGIN / DASHBOARD (custom /login/ — full-width gamification dash)
   ================================================================= */
.dash-shell {
  max-width: 1600px;
  margin: 20px auto 40px;
  padding: 0 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 560px) {
  .dash-shell { padding: 0 12px 24px; gap: 12px; }
}

.dash-banner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  background: linear-gradient(135deg, var(--hp2-dark-panel), var(--hp2-dark-bg));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 20px 24px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
}

.dash-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(22,143,233,0.16), transparent 55%);
  pointer-events: none;
}

.dash-banner-l { display: flex; align-items: center; gap: 18px; position: relative; }
.dash-banner-r { display: flex; flex-direction: column; gap: 8px; position: relative; }

.dash-avatar {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  background: var(--hp2-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(22,143,233,0.4), inset 0 -4px 0 rgba(0,0,0,0.2);
}
.dash-avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed rgba(22,143,233,0.5);
  animation: dash-ring 14s linear infinite;
}
@keyframes dash-ring { to { transform: rotate(360deg); } }

.dash-tag {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  background: rgba(233,112,22,0.18);
  color: var(--hp2-accent-2);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.dash-h { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.4px; }
.dash-sub { margin: 0; font-size: 13px; color: var(--hp2-dark-text-mute); line-height: 1.5; max-width: 540px; }

.dash-lvl-row { display: flex; justify-content: space-between; align-items: baseline; font-family: ui-monospace, monospace; }
.dash-lvl { font-size: 11px; color: var(--hp2-dark-text-mute); letter-spacing: 1px; text-transform: uppercase; }
.dash-lvl strong { font-size: 22px; color: var(--hp2-accent-2); margin-left: 6px; font-weight: 800; }
.dash-xp { font-size: 12px; color: var(--hp2-dark-text-mute); }
.dash-xp strong { color: var(--hp2-dark-text); font-weight: 700; }

.dash-xp-bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; position: relative; }
.dash-xp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--hp2-accent) 0%, var(--hp2-accent-2) 100%); border-radius: 6px; transition: width 0.5s ease; }

.dash-multi-row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.dash-multi-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
}
.dash-multi-pill strong { color: var(--hp2-yellow); font-weight: 700; font-size: 12px; }

@media (max-width: 880px) { .dash-banner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dash-banner-l { flex-direction: column; align-items: flex-start; } .dash-h { font-size: 22px; } }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .dash-stats { grid-template-columns: repeat(2, 1fr); } }

.dash-stat {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
}
.dash-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--hp2-accent), var(--hp2-accent-2)); opacity: 0.6; }
.dash-stat-ico {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
}
.dash-stat-meta { display: flex; flex-direction: column; min-width: 0; }
.dash-stat-lbl { font-size: 10px; color: var(--hp2-dark-text-mute); text-transform: uppercase; letter-spacing: 1px; font-family: ui-monospace, monospace; }
.dash-stat-val { font-size: 24px; font-weight: 800; font-family: ui-monospace, monospace; color: var(--hp2-dark-text); line-height: 1.1; margin: 2px 0; }
.dash-stat-sub { font-size: 11px; color: var(--hp2-dark-text-mute); font-family: ui-monospace, monospace; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-card-activity { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .dash-grid { grid-template-columns: 1fr; } }

.dash-card {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-card-h {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--hp2-accent);
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hp2-dark-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.dash-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hp2-green);
  box-shadow: 0 0 10px var(--hp2-green);
  animation: blink 1.6s ease-in-out infinite;
}

.dash-card-wallet { gap: 10px; }

.dash-quest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-quest {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hp2-dark-border);
  border-left: 3px solid var(--hp2-accent);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
}
.dash-quest-bonus { border-left-color: var(--hp2-yellow); background: rgba(245,166,35,0.06); }
.dash-q-ico {
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
}
.dash-q-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-q-title { font-size: 13px; font-weight: 700; color: var(--hp2-dark-text); }
.dash-q-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.dash-q-fill { height: 100%; background: var(--hp2-accent); transition: width 0.4s; }
.dash-q-meta { font-size: 11px; font-family: ui-monospace, monospace; color: var(--hp2-dark-text-mute); }
.dash-q-reward { background: rgba(22,199,132,0.15); color: var(--hp2-green); font-family: ui-monospace, monospace; font-weight: 700; font-size: 11px; padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.dash-q-reward-x2 { background: rgba(245,166,35,0.18); color: var(--hp2-yellow); }
.dash-quest-cta {
  display: inline-block;
  margin-top: auto;
  color: var(--hp2-accent);
  text-decoration: none;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-align: center;
  padding: 8px;
  border: 1px dashed var(--hp2-dark-border);
  border-radius: 6px;
  transition: all 0.15s;
}
.dash-quest-cta:hover { border-style: solid; border-color: var(--hp2-accent); background: rgba(22,143,233,0.06); }

.dash-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.dash-activity-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.dash-activity-list li:last-child { border-bottom: none; }
.act-time { color: var(--hp2-dark-text-mute); font-size: 11px; flex-shrink: 0; }
.act-text { color: var(--hp2-dark-text); line-height: 1.45; }
.act-text .act-handle { color: var(--hp2-accent); }
.act-text .act-amount { color: var(--hp2-green); font-weight: 700; }
.act-text .act-badge  { color: var(--hp2-yellow); font-weight: 700; }

.dash-card-achievements .dash-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.dash-badge {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  transition: all 0.15s;
}
.dash-badge.dash-badge-locked { opacity: 0.45; filter: grayscale(60%); }
.dash-badge.dash-badge-unlocked { border-color: var(--hp2-accent-2); background: rgba(233,112,22,0.06); }
.dash-badge:hover { transform: translateY(-2px); }
.badge-icon { font-size: 28px; line-height: 1; }
.badge-name { font-weight: 700; font-size: 12px; color: var(--hp2-dark-text); }
.badge-prog { font-size: 10px; color: var(--hp2-dark-text-mute); font-family: ui-monospace, monospace; }

.dash-card-lb { padding: 16px 0 0; }
.dash-card-lb .dash-card-h { padding-left: 18px; padding-right: 18px; }
.dash-lb-foot { color: var(--hp2-dark-text-mute); font-family: ui-monospace, monospace; font-size: 9px; margin-left: auto; }
.dash-lb-table { width: 100%; border-collapse: collapse; font-family: ui-monospace, monospace; font-size: 13px; }
.dash-lb-table th { text-align: left; padding: 10px 18px; color: var(--hp2-dark-text-mute); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--hp2-dark-border); background: rgba(255,255,255,0.02); }
.dash-lb-table td { padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--hp2-dark-text); }
.dash-lb-table tr:hover td { background: rgba(22,143,233,0.04); }
.dash-lb-table .lb-rank { color: var(--hp2-yellow); font-weight: 700; }
.dash-lb-table .lb-rank.gold   { color: #ffd24d; }
.dash-lb-table .lb-rank.silver { color: #c9d2dd; }
.dash-lb-table .lb-rank.bronze { color: #d9844a; }
.dash-lb-table .lb-handle { color: var(--hp2-accent); }
.dash-lb-table .lb-self { background: rgba(245,166,35,0.06); }
.dash-lb-table .lb-self td { color: var(--hp2-yellow); font-weight: 700; }
.dash-lb-table .lb-win-up   { color: var(--hp2-green); }
.dash-lb-table .lb-win-down { color: var(--hp2-red); }
.dash-lb-table .lb-wc { color: var(--hp2-green); font-weight: 700; }

.dash-foot { margin-top: 8px; padding: 14px 4px 0; border-top: 1px dashed rgba(255,255,255,0.06); font-size: 12px; line-height: 1.55; color: var(--hp2-dark-text-mute); font-family: ui-monospace, monospace; }
.dash-foot a { color: var(--hp2-accent); text-decoration: none; }
.dash-foot a:hover { text-decoration: underline; }

/* ---- Wallet panel within dashboard (reuses old login-* classes) ---- */
.dash-card-wallet .login-state,
.dash-card-wallet .login-wallets,
.dash-card-wallet .login-email,
.dash-card-wallet .login-divider { /* inherit styles below */ }

/* ---- legacy login-* (still used inside dash-card-wallet) ---- */
.login-card {
  background: var(--hp2-dark-panel);
  color: var(--hp2-dark-text);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 32px 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(162,89,255,0.18), transparent 50%);
  pointer-events: none;
}

.login-badge {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  background: rgba(233,112,22,0.18);
  color: var(--hp2-accent-2);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 5px 9px;
  border-radius: 4px;
  margin-bottom: 14px;
  position: relative;
}

.login-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  position: relative;
}

.login-sub {
  margin: 0 0 24px;
  color: var(--hp2-dark-text-mute);
  font-size: 14px;
  line-height: 1.55;
  position: relative;
}

.login-sub strong { color: var(--hp2-yellow); font-weight: 600; }

/* ---- Wallet buttons ---- */
.login-wallets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.login-wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 14px 16px;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.login-wallet:hover {
  border-color: var(--hp2-accent);
  background: rgba(22,143,233,0.06);
  transform: translateY(-1px);
}

.login-wallet:active { transform: translateY(0); }
.login-wallet.is-busy { opacity: 0.6; pointer-events: none; }

.wallet-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  background: rgba(255,255,255,0.04);
}

.wallet-icon-mm { background: rgba(226,118,27,0.15); }
.wallet-icon-wc { background: rgba(59,153,252,0.15); }
.wallet-icon-cb { background: rgba(0,82,255,0.15); color: #4d8dff; font-size: 13px; }

.wallet-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wallet-text strong { font-size: 14.5px; font-weight: 700; }
.wallet-text span { font-size: 12px; color: var(--hp2-dark-text-mute); margin-top: 1px; }

.wallet-cta {
  color: var(--hp2-accent);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ---- Divider ---- */
.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  position: relative;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hp2-dark-border);
}

.login-divider span {
  padding: 0 12px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hp2-dark-text-mute);
}

/* ---- Email ---- */
.login-email { position: relative; }

.login-email-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
}

.login-email-row {
  display: flex;
  gap: 8px;
}

.login-email input {
  flex: 1;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  min-width: 0;
}

.login-email input:focus { outline: none; border-color: var(--hp2-accent); }

.login-email button {
  background: var(--hp2-accent);
  color: #fff;
  border: none;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.login-email button:hover { background: #1da3ff; }
.login-email button:disabled { opacity: 0.5; cursor: not-allowed; }

.login-email-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  min-height: 16px;
}

.login-email-msg.ok  { color: var(--hp2-green); }
.login-email-msg.err { color: var(--hp2-red); }

/* ---- Foot ---- */
.login-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--hp2-dark-border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--hp2-dark-text-mute);
  position: relative;
}

.login-foot a { color: var(--hp2-accent); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

/* ---- Connected state ---- */
.login-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(22,199,132,0.08);
  border: 1px solid rgba(22,199,132,0.3);
  border-radius: 10px;
  margin-bottom: 14px;
}

.login-state-icon {
  width: 36px;
  height: 36px;
  background: var(--hp2-green);
  color: #001a10;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}

.login-state-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--hp2-dark-text);
}

.login-state-addr {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--hp2-green);
  margin-top: 2px;
}

.login-state-hint {
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  margin-top: 2px;
}

.login-state-disconnect {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  margin-left: auto;
  flex-shrink: 0;
}

.login-state-disconnect:hover { color: var(--hp2-red); border-color: var(--hp2-red); }

/* ---- Perks rail ---- */
.login-perks {
  background: linear-gradient(180deg, rgba(22,143,233,0.06), rgba(162,89,255,0.06));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 24px;
  color: var(--hp2-dark-text);
}

.login-perks-h {
  margin: 0 0 16px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent);
  text-transform: uppercase;
}

.login-perks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }

.login-perks-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.perk-emoji { font-size: 22px; flex-shrink: 0; line-height: 1; }

.login-perks-list strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.login-perks-list span { display: block; font-size: 12px; color: var(--hp2-dark-text-mute); line-height: 1.4; }

.login-perks-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--hp2-dark-border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
}

.login-perks-foot strong { color: var(--hp2-green); }

/* =================================================================
   AUTH SHELL (/login/) — narrow centered login + perks rail
   ================================================================= */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  max-width: 1320px;
  margin: 28px auto 48px;
  padding: 0 28px 40px;
}

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 640px; margin-top: 24px; padding: 0 16px 32px; }
}

/* Ensure the [hidden] attr actually wins over the .login-state display:flex rule */
.login-state[hidden] { display: none !important; }

/* Login page body bg matches the dashboard so the dark cards sit on dark */
body:has(.auth-shell) { background: #060a0e; }

.auth-card {
  background: var(--hp2-dark-panel);
  color: var(--hp2-dark-text);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 30px 32px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% -10%, rgba(22,143,233,0.16), transparent 55%);
  pointer-events: none;
}

.auth-badge {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  background: rgba(233,112,22,0.18);
  color: var(--hp2-accent-2);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 5px 9px;
  border-radius: 4px;
  margin-bottom: 14px;
  position: relative;
}

.auth-h {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  position: relative;
}

.auth-sub {
  margin: 0 0 20px;
  color: var(--hp2-dark-text-mute);
  font-size: 14px;
  line-height: 1.55;
  position: relative;
}

.auth-sub strong { color: var(--hp2-yellow); font-weight: 600; }
.auth-sub strong:first-of-type { color: var(--hp2-dark-text); }

.auth-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--hp2-dark-border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--hp2-dark-text-mute);
  position: relative;
}

.auth-foot a { color: var(--hp2-accent); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* Perks rail — DARK panel matching the login card */
.auth-perks {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 28px 30px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

.auth-perks::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% -10%, rgba(233,112,22,0.14), transparent 55%);
  pointer-events: none;
}

.auth-perks-h h2 {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  position: relative;
}

.auth-perks-tag {
  position: relative;
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent);
  background: rgba(22,143,233,0.18);
  border: 1px solid rgba(22,143,233,0.4);
  padding: 5px 9px;
  border-radius: 4px;
}

.auth-perks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }

.auth-perks-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
  transition: all 0.15s;
}

.auth-perks-list li:hover {
  border-color: rgba(22,143,233,0.5);
  background: rgba(22,143,233,0.06);
  transform: translateX(2px);
}

.perk-ico {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border-radius: 10px;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-accent);
  font-size: 22px;
  line-height: 1;
}

.perk-ico svg { width: 24px; height: 24px; display: block; }

.auth-perks-list li:nth-child(1) .perk-ico { color: #5fb8ff; background: linear-gradient(180deg, rgba(22,143,233,0.15), rgba(22,143,233,0.03)); border-color: rgba(22,143,233,0.35); }
.auth-perks-list li:nth-child(2) .perk-ico { color: #ff8c3b; background: linear-gradient(180deg, rgba(233,112,22,0.15), rgba(233,112,22,0.03)); border-color: rgba(233,112,22,0.35); }
.auth-perks-list li:nth-child(3) .perk-ico { color: #c98aff; background: linear-gradient(180deg, rgba(162,89,255,0.15), rgba(162,89,255,0.03)); border-color: rgba(162,89,255,0.35); }
.auth-perks-list li:nth-child(4) .perk-ico { color: #16c784; background: linear-gradient(180deg, rgba(22,199,132,0.15), rgba(22,199,132,0.03)); border-color: rgba(22,199,132,0.35); }
.auth-perks-list li:nth-child(5) .perk-ico { color: #ffd24d; background: linear-gradient(180deg, rgba(245,166,35,0.15), rgba(245,166,35,0.03)); border-color: rgba(245,166,35,0.35); }
.auth-perks-list li:nth-child(6) .perk-ico { color: #ff5d70; background: linear-gradient(180deg, rgba(234,57,67,0.13), rgba(234,57,67,0.03)); border-color: rgba(234,57,67,0.35); }

.auth-perks-list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 2px;
  color: #fff;
  letter-spacing: -0.1px;
}
.auth-perks-list span {
  display: block;
  font-size: 12.5px;
  color: var(--hp2-dark-text-mute);
  line-height: 1.45;
}

.auth-perks-foot {
  margin-top: auto;
  padding: 12px 14px;
  background: rgba(22,199,132,0.08);
  border: 1px solid rgba(22,199,132,0.25);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
  position: relative;
}
.auth-perks-foot strong { color: var(--hp2-green); }

/* =================================================================
   DASHBOARD HEADER MODE — when /dashboard/ is active
   Triggers via body:has(.dash-shell), no JS toggling needed
   ================================================================= */

/* Hide the public-site category nav on dashboard */
body:has(.dash-shell) .hp2-nav { display: none; }

/* Show a dashboard-specific nav strip (slot rendered always; hidden unless dashboard) */
body:not(:has(.dash-shell)) .hp2-nav-dash { display: none !important; }

.hp2-nav-dash {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hp2-nav-dash::-webkit-scrollbar { display: none; }

.hp2-nav-dash a {
  color: #1a2330;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: ui-monospace, monospace;
}
.hp2-nav-dash a:hover { background: rgba(22,143,233,0.08); color: var(--hp2-accent); }
.hp2-nav-dash a.is-active { background: var(--hp2-accent); color: #fff; }

.hp2-nav-dash a.hp2-nav-back { color: var(--hp2-accent-2); }
.hp2-nav-dash a.hp2-nav-back:hover { background: rgba(233,112,22,0.08); }

/* Dashboard mode: convert the Login/Join WC pill into a Player widget */
body:has(.dash-shell) .hp2-login-wc {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  box-shadow: none;
  color: var(--hp2-dark-text);
}
body:has(.dash-shell) .hp2-login-wc:hover { border-color: var(--hp2-accent); transform: none; box-shadow: 0 2px 8px rgba(22,143,233,0.15); }
body:has(.dash-shell) .hp2-wc-pill { background: transparent; border-right: 1px solid var(--hp2-dark-border); }
body:has(.dash-shell) .hp2-login-action {
  background: var(--hp2-dark-bg);
  color: var(--hp2-dark-text);
}

/* When body is dashboard, give the header a dark theme too */
body:has(.dash-shell) .hp2-header {
  background: var(--hp2-dark-panel);
  border-bottom: 1px solid var(--hp2-dark-border);
}
body:has(.dash-shell) .hp2-search-trigger {
  background: rgba(255,255,255,0.04);
  border-color: var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
}
body:has(.dash-shell) .hp2-search-trigger:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--hp2-accent);
  color: var(--hp2-accent);
}
body:has(.dash-shell) .hp2-search-kbd {
  background: var(--hp2-dark-panel);
  border-color: var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
}
body:has(.dash-shell) .hp2-logo-img { filter: brightness(1.15); }

/* Body bg on dashboard */
body:has(.dash-shell) { background: #060a0e; }

/* Honest data-source labels in wing cards */
.wing-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wing-head-meta {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--hp2-yellow);
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.25);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: auto;
  cursor: help;
}

/* =================================================================
   Article sentiment vote (post.hbs bottom) — real DB-backed
   ================================================================= */
.article-vote {
  background: var(--hp2-dark-panel, #141a22);
  color: var(--hp2-dark-text, #e6edf3);
  border: 1px solid var(--hp2-dark-border, #1f2832);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 40px auto;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.article-vote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, rgba(22,143,233,0.12), transparent 55%);
  pointer-events: none;
}

.article-vote-head { position: relative; }

.article-vote-eyebrow {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hp2-accent, #168fe9);
  background: rgba(22,143,233,0.12);
  border: 1px solid rgba(22,143,233,0.3);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.article-vote-q {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--hp2-dark-text, #e6edf3);
  letter-spacing: -0.2px;
}

.article-vote-sub {
  margin: 0;
  font-size: 12px;
  color: var(--hp2-dark-text-mute, #8b98a5);
}

.article-vote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
}

.article-vote-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 2px solid var(--hp2-dark-border, #1f2832);
  border-radius: 10px;
  color: var(--hp2-dark-text, #e6edf3);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}

.article-vote-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
  opacity: 0.08;
  width: 0;
  transition: width 0.5s ease;
}

.article-vote-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.article-vote-label { flex: 1; text-align: left; }
.article-vote-pct {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp2-dark-text-mute, #8b98a5);
}

.article-vote-bull:hover, .article-vote-bull.is-voted {
  border-color: var(--hp2-green, #16c784);
  color: var(--hp2-green, #16c784);
}
.article-vote-bear:hover, .article-vote-bear.is-voted {
  border-color: var(--hp2-red, #ea3943);
  color: var(--hp2-red, #ea3943);
}
.article-vote-btn.is-voted .article-vote-pct { color: inherit; }
.article-vote-btn.is-voted::before { width: var(--vote-pct, 0%); }

.article-vote-btn:disabled { opacity: 0.7; }

.article-vote-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute, #8b98a5);
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}

.article-vote-meta-sep { color: var(--hp2-dark-border, #1f2832); }

@media (max-width: 560px) {
  .article-vote { padding: 18px; margin: 28px 12px; }
  .article-vote-row { grid-template-columns: 1fr; }
}

/* =================================================================
   POST PAGE — 2-col shell with sticky TOC + pixel cursor
   ================================================================= */
.post-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  align-items: start;
}

.post-shell .post-main { min-width: 0; }

@media (max-width: 1000px) {
  .post-shell { grid-template-columns: 1fr; padding: 18px 14px 32px; }
  .post-toc { display: none; }
}

/* ----- TOC sidebar ----- */
.post-toc {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.post-toc-inner {
  background: var(--hp2-dark-panel, #141a22);
  border: 1px solid var(--hp2-dark-border, #1f2832);
  border-radius: 12px;
  padding: 18px 16px 14px;
  color: var(--hp2-dark-text, #e6edf3);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 110px);
  overflow: hidden;
}

.post-toc-h { display: flex; flex-direction: column; gap: 6px; }
.post-toc-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent, #168fe9);
  background: rgba(22,143,233,0.15);
  border: 1px solid rgba(22,143,233,0.35);
  padding: 5px 8px;
  border-radius: 4px;
}
.post-toc-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: inherit;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Reading progress */
.post-toc-prog {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hp2-dark-border, #1f2832);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-toc-prog-bar {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.post-toc-prog-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--hp2-accent, #168fe9), var(--hp2-accent-2, #e97016));
  transition: width 0.15s linear;
  box-shadow: 0 0 8px rgba(22,143,233,0.5);
}
.post-toc-prog-meta {
  font-size: 10px;
  color: var(--hp2-dark-text-mute, #8b98a5);
  letter-spacing: 0.4px;
  font-family: inherit;
}
.post-toc-prog-meta span { color: var(--hp2-dark-text, #e6edf3); font-weight: 700; }

/* Nav list */
.post-toc-nav {
  flex: 1;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--hp2-dark-border, #1f2832) transparent;
}
.post-toc-nav::-webkit-scrollbar { width: 4px; }
.post-toc-nav::-webkit-scrollbar-thumb { background: var(--hp2-dark-border, #1f2832); border-radius: 2px; }

.post-toc-empty {
  font-size: 11px;
  color: var(--hp2-dark-text-mute, #8b98a5);
  text-align: center;
  padding: 14px 8px;
}

.post-toc-link {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 6px 6px 4px;
  color: var(--hp2-dark-text-mute, #8b98a5);
  text-decoration: none;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.post-toc-link.post-toc-h3 {
  padding-left: 18px;
  font-size: 11.5px;
  grid-template-columns: 14px 1fr;
}
.post-toc-link:hover {
  color: var(--hp2-dark-text, #e6edf3);
  background: rgba(255,255,255,0.03);
}
.post-toc-link.is-active {
  color: var(--hp2-accent-2, #e97016);
  background: rgba(233,112,22,0.08);
  border-left-color: var(--hp2-accent-2, #e97016);
}
.post-toc-link.is-active .post-toc-cursor { opacity: 1; transform: translateX(0); }

/* Pixel game cursor */
.post-toc-cursor {
  display: inline-block;
  width: 14px;
  height: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.2s ease-out;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--hp2-accent-2, #e97016);
  filter: drop-shadow(0 0 4px rgba(233,112,22,0.6));
}
.post-toc-cursor svg { width: 100%; height: 100%; display: block; }
.post-toc-link.is-active .post-toc-cursor svg { animation: cursorBob 1.1s ease-in-out infinite; }

@keyframes cursorBob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

.post-toc-text { font-weight: 500; }
.post-toc-link.is-active .post-toc-text { font-weight: 700; }

/* Foot */
.post-toc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hp2-dark-border, #1f2832);
  color: var(--hp2-dark-text-mute, #8b98a5);
}
.post-toc-top {
  color: var(--hp2-accent, #168fe9);
  text-decoration: none;
  font-weight: 700;
}
.post-toc-top:hover { color: var(--hp2-accent-2, #e97016); }
.post-toc-pixhint { font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 7px; letter-spacing: 0.5px; }

/* =================================================================
   POST PAGE — overrides for screen.css gh-canvas + sizing
   ================================================================= */
.post-shell {
  max-width: 1240px !important;
  padding: 18px 24px 32px !important;
  gap: 28px !important;
}

@media (max-width: 1000px) {
  .post-shell { padding: 14px 14px 24px !important; }
}

/* Kill the gh-canvas 720px grid constraint INSIDE .post-shell so content
   fills the available column. */
.post-shell .gh-canvas {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  --content-width: 100% !important;
  --container-width: 100% !important;
}

.post-shell .gh-canvas > * {
  grid-column: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Title — pixel display font, left aligned, sane size, tight rhythm */
.post-shell .article-title {
  font-family: 'Pixelify Sans', ui-monospace, 'Press Start 2P', monospace !important;
  text-align: left !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: #0c1116 !important;
  margin: 0 0 14px !important;
  max-width: 820px;
  word-spacing: 0 !important;
  text-rendering: geometricPrecision;
}

/* Excerpt — drop the 720 cap, left, smaller */
.post-shell .article-excerpt {
  text-align: left !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  margin: 0 0 18px !important;
  max-width: 720px !important;
  color: #4a5868 !important;
}

/* Article body — kill justify, normal text-align */
.post-shell .gh-content,
.post-shell .gh-content p,
.post-shell .article-excerpt,
.post-shell .article-title,
.post-shell .article-byline {
  text-align: left !important;
  hyphens: none !important;
}

/* Body type sized for readability in the wider column */
.post-shell .gh-content {
  font-size: 16.5px;
  line-height: 1.68;
  max-width: 720px;
}

/* Byline tighter */
.post-shell .article-byline {
  margin: 4px 0 18px !important;
  padding: 0 !important;
  border: none !important;
}

.post-shell .article-byline-content { padding: 0 !important; }

/* Feature image: respect column width, not the wide-start grid escape */
.post-shell .article-image {
  grid-column: auto !important;
  margin: 8px 0 24px !important;
  width: 100% !important;
  max-width: 880px;
}
.post-shell .article-image img { width: 100%; height: auto; border-radius: 8px; }

/* Body margins */
.post-shell .article { padding: 0 !important; margin: 0 !important; }
.post-shell .article-header { padding: 0 !important; margin: 0 0 8px !important; }
.post-shell .custom-class-ads { margin: 0 !important; }

/* Inner body container that screen.css gives default margins to */
.post-shell .gh-content {
  margin: 18px 0 32px !important;
  padding: 0 !important;
}

/* Top ad block: don't add huge padding around it */
.post-shell #ad-leaderboard-lg,
.post-shell #ad-leaderboard-md,
.post-shell #ad-leaderboard-sm { margin: 0 !important; }

/* =================================================================
   FULL-WIDTH vote + predict band (after .post-shell)
   ================================================================= */
.article-vote-band {
  width: 100%;
  background: linear-gradient(180deg, var(--hp2-dark-panel) 0%, var(--hp2-dark-bg) 100%);
  border-top: 4px solid var(--hp2-accent);
  border-bottom: 4px solid var(--hp2-accent-2);
  padding: 36px 24px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}

.article-vote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(22,143,233,0.12), transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(233,112,22,0.10), transparent 40%);
  pointer-events: none;
}

.article-vote-band-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .article-vote-band-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* Override the old article-vote box-styles since it's now inside the band */
.article-vote-band .article-vote {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-vote-band .article-vote::before { display: none; }

/* Predict card */
.article-predict {
  background: linear-gradient(135deg, rgba(233,112,22,0.12), rgba(22,143,233,0.08));
  border: 1px solid rgba(233,112,22,0.4);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.article-predict::after {
  content: "🎯";
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-size: 140px;
  opacity: 0.05;
  pointer-events: none;
}

.article-predict-text { display: flex; flex-direction: column; gap: 6px; position: relative; }

.article-predict-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.18);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.article-predict-h {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--hp2-dark-text);
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.article-predict-sub {
  margin: 0;
  font-size: 13px;
  color: var(--hp2-dark-text-mute);
  line-height: 1.5;
}

.article-predict-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}

.article-predict-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 14px 16px;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.article-predict-btn:hover {
  border-color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(233,112,22,0.18);
}

.article-predict-window {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 12px;
  color: var(--hp2-accent-2);
  letter-spacing: 1px;
}

.article-predict-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--hp2-dark-text);
}

/* =================================================================
   DASHBOARD: Profile card (replaces wallet form when connected)
   ================================================================= */
.dash-card-profile { gap: 14px; }
.profile-loading { padding: 24px; text-align: center; color: var(--hp2-dark-text-mute); font-family: ui-monospace, monospace; font-size: 12px; }

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0 14px;
  border-bottom: 1px dashed var(--hp2-dark-border);
}

.profile-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hp2-accent), var(--hp2-accent-2));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(22,143,233,0.4), inset 0 -3px 0 rgba(0,0,0,0.2);
}

.profile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.profile-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--hp2-green);
  background: rgba(22,199,132,0.15);
  border: 1px solid rgba(22,199,132,0.35);
  padding: 3px 6px;
  border-radius: 3px;
}
.profile-addr {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp2-dark-text);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.profile-addr-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-copy {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 2px 7px;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: all 0.15s;
}
.profile-copy:hover { color: var(--hp2-accent); border-color: var(--hp2-accent); }

.profile-rows { display: flex; flex-direction: column; gap: 8px; }
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 6px;
}
.profile-row-label { color: var(--hp2-dark-text-mute); }
.profile-row-value { color: var(--hp2-dark-text); font-weight: 700; }
.profile-row-value.good { color: var(--hp2-green); }
.profile-row-value.warn { color: var(--hp2-yellow); }

.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.profile-action {
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.profile-action:hover { border-color: var(--hp2-accent); color: var(--hp2-accent); }
.profile-action.danger:hover { border-color: var(--hp2-red); color: var(--hp2-red); }

/* =================================================================
   GAMES / ARCADE PAGE
   ================================================================= */
.games-shell {
  max-width: 1320px;
  margin: 24px auto 48px;
  padding: 0 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body:has(.games-shell) { background: #060a0e; }

.games-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  background: linear-gradient(135deg, var(--hp2-dark-panel), var(--hp2-dark-bg));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 24px 28px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
}
.games-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% -10%, rgba(233,112,22,0.18), transparent 50%),
    radial-gradient(circle at 0% 110%, rgba(22,143,233,0.14), transparent 50%);
  pointer-events: none;
}
.games-banner-l { position: relative; display: flex; flex-direction: column; gap: 6px; }
.games-banner-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.18);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 5px 9px; border-radius: 4px;
  margin-bottom: 6px;
}
.games-banner-h { margin: 0; font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -0.6px; text-transform: capitalize; }
.games-banner-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--hp2-dark-text-mute); line-height: 1.5; max-width: 640px; }

.games-banner-r {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: center;
}
.games-banner-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.games-banner-stat span { display: block; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 8px; letter-spacing: 1px; color: var(--hp2-dark-text-mute); margin-bottom: 6px; }
.games-banner-stat strong { display: block; font-size: 22px; font-weight: 800; color: var(--hp2-accent-2); font-family: ui-monospace, monospace; }

@media (max-width: 880px) {
  .games-banner { grid-template-columns: 1fr; }
}

.games-section-h {
  margin: 18px 0 4px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
}

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

.game-card {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 18px 20px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.game-card:hover { transform: translateY(-2px); border-color: var(--hp2-accent-2); }
.game-card.game-card-locked { opacity: 0.78; }
.game-card.game-card-locked:hover { transform: none; }

.game-card-icon { font-size: 36px; line-height: 1; }
.game-card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.game-card p { margin: 0; font-size: 13px; color: var(--hp2-dark-text-mute); line-height: 1.5; }

.game-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--hp2-dark-border);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.game-card-status { color: var(--hp2-yellow); }
.game-card-payout { color: var(--hp2-green); }

/* Playable trivia card */
.game-playable {
  border-left: 3px solid var(--hp2-green);
}
.game-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hp2-dark-border);
}
.game-tag {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 4px 7px;
  border-radius: 3px;
}
.game-tag-live { background: rgba(22,199,132,0.15); color: var(--hp2-green); border: 1px solid rgba(22,199,132,0.35); }
.game-card-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.game-card-meta { margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--hp2-dark-text-mute); }

.game-body { display: flex; flex-direction: column; gap: 12px; }

.game-start-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--hp2-accent), var(--hp2-accent-2));
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.game-start-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 rgba(0,0,0,0.4); }
.game-start-btn:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 0 rgba(0,0,0,0.35); }

/* Trivia Q layout */
.trivia-q {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.trivia-q-num {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--hp2-accent);
  margin-bottom: 8px;
}
.trivia-q-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--hp2-dark-text);
  line-height: 1.4;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.trivia-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .trivia-opts { grid-template-columns: 1fr; } }
.trivia-opt {
  background: var(--hp2-dark-bg);
  border: 2px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  transition: all 0.12s;
}
.trivia-opt:hover:not(:disabled) { border-color: var(--hp2-accent); transform: translateY(-1px); }
.trivia-opt.is-correct { border-color: var(--hp2-green); background: rgba(22,199,132,0.12); color: var(--hp2-green); }
.trivia-opt.is-wrong   { border-color: var(--hp2-red);   background: rgba(234,57,67,0.12); color: var(--hp2-red); }
.trivia-opt:disabled { cursor: default; }

.trivia-progress {
  display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--hp2-dark-text-mute);
}
.trivia-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.trivia-bar-fill { height: 100%; background: linear-gradient(90deg, var(--hp2-accent), var(--hp2-accent-2)); transition: width 0.3s; }

.trivia-score { display: flex; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
.trivia-score b { color: var(--hp2-yellow); }

.trivia-final {
  text-align: center;
  padding: 28px 18px;
}
.trivia-final h3 { margin: 0 0 8px; font-size: 28px; color: var(--hp2-accent-2); font-family: 'Pixelify Sans', ui-monospace, monospace; }
.trivia-final p { color: var(--hp2-dark-text-mute); margin: 0 0 14px; }
.trivia-final .trivia-final-wc {
  display: inline-block;
  background: rgba(245,166,35,0.15);
  color: var(--hp2-yellow);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.games-foot {
  padding: 14px 18px;
  background: rgba(22,199,132,0.05);
  border: 1px solid rgba(22,199,132,0.18);
  border-radius: 10px;
  color: var(--hp2-dark-text-mute);
  font-size: 12.5px;
  font-family: ui-monospace, monospace;
  text-align: center;
  line-height: 1.5;
}
.games-foot strong { color: var(--hp2-green); }

/* Dashboard nav: arcade link styling + show on games page too */
body:has(.games-shell) .hp2-nav { display: none; }
body:not(:has(.dash-shell)):not(:has(.games-shell)) .hp2-nav-dash { display: none !important; }
body:has(.games-shell) .hp2-header,
body:has(.games-shell) .hp2-search-trigger,
body:has(.games-shell) .hp2-search-kbd,
body:has(.games-shell) .hp2-login-wc {
  /* mirror dashboard-mode header treatment */
}
body:has(.games-shell) .hp2-header { background: var(--hp2-dark-panel); border-bottom: 1px solid var(--hp2-dark-border); }
body:has(.games-shell) .hp2-search-trigger { background: rgba(255,255,255,0.04); border-color: var(--hp2-dark-border); color: var(--hp2-dark-text-mute); }

.hp2-nav-arcade { color: var(--hp2-accent-2) !important; }
.hp2-nav-arcade:hover { background: rgba(233,112,22,0.1) !important; }

/* =================================================================
   DASHBOARD SUB-PAGES (badges / leaderboard / activity)
   ================================================================= */
.subpage-shell { gap: 18px; }

.subpage-head {
  background: linear-gradient(135deg, var(--hp2-dark-panel), var(--hp2-dark-bg));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 24px 28px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
}
.subpage-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, rgba(22,143,233,0.14), transparent 55%);
  pointer-events: none;
}
.subpage-tag {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.18);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 5px 9px;
  border-radius: 4px;
  margin-bottom: 8px;
  position: relative;
}
.subpage-h {
  margin: 4px 0 6px;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  font-family: 'Pixelify Sans', ui-monospace, monospace;
  position: relative;
}
.subpage-sub {
  margin: 0 0 12px;
  color: var(--hp2-dark-text-mute);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 720px;
  position: relative;
}
.subpage-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--hp2-dark-text-mute);
  position: relative;
}
.subpage-meta strong { color: var(--hp2-dark-text); }
.subpage-meta-sep { color: var(--hp2-dark-border); }

.subpage-foot {
  padding: 14px 18px;
  background: rgba(245,166,35,0.05);
  border: 1px solid rgba(245,166,35,0.2);
  border-radius: 10px;
  color: var(--hp2-dark-text-mute);
  font-size: 12.5px;
  font-family: ui-monospace, monospace;
  text-align: center;
  line-height: 1.5;
}

/* Filters (pills) */
.badge-filters, .lb-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.badge-filter, .lb-filter {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.badge-filter:hover, .lb-filter:hover { border-color: var(--hp2-accent); color: var(--hp2-accent); }
.badge-filter.is-active, .lb-filter.is-active {
  background: var(--hp2-accent);
  color: #fff;
  border-color: var(--hp2-accent);
  font-weight: 700;
}

/* Bigger badge grid on the dedicated page */
.subpage-shell .dash-badges {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Active dashboard nav (path-based) */
.hp2-nav-dash a.is-active {
  background: var(--hp2-accent);
  color: #fff !important;
}
.hp2-nav-dash a.hp2-nav-arcade.is-active {
  background: var(--hp2-accent-2);
  color: #fff !important;
}

/* =================================================================
   CATEGORY PAGE (page.hbs) — clean cards + widget sidebar
   ================================================================= */
.cat-shell {
  max-width: 1560px;
  margin: 16px auto 48px;
  padding: 0 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 560px) {
  .cat-shell { padding: 0 14px 28px; gap: 16px; }
}

/* Compact category header — slim strip, no big card */
.cat-header {
  padding: 14px 0 16px;
  border-bottom: 2px solid var(--hp2-accent);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-header-back {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #6c7886;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid #d8e2eb;
  border-radius: 4px;
  background: #fff;
  align-self: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cat-header-back:hover { color: var(--hp2-accent); border-color: var(--hp2-accent); background: rgba(22,143,233,0.04); }

/* Hidden pulse source IDs (JS reads/writes; mirrored into header ticker) */
.cat-pulse-source {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.cat-header-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.cat-header-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent);
  background: rgba(22,143,233,0.10);
  border: 1px solid rgba(22,143,233,0.3);
  padding: 5px 9px;
  border-radius: 4px;
}
.cat-h {
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  color: #0c1116;
  letter-spacing: -0.8px;
  text-transform: capitalize;
  line-height: 1;
}
.cat-sub {
  margin: 6px 0 0;
  max-width: 820px;
  font-size: 13.5px;
  color: #6c7886;
  line-height: 1.55;
}

/* Two-col content grid */
.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}
@media (max-width: 1080px) { .cat-grid { grid-template-columns: 1fr; } }

/* Card grid stretches with more space */
.cat-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.cat-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Featured hero (2-col on desktop) */
.cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 2px solid #d8e2eb;
  box-shadow: 6px 6px 0 0 var(--hp2-accent);
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 720px) { .cat-hero { grid-template-columns: 1fr; } }

.cat-hero-thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #0c1116;
  overflow: hidden;
  display: block;
}
.cat-hero-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s;
}
.cat-hero:hover .cat-hero-thumb img { transform: scale(1.04); }

.cat-hero-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--hp2-accent-2);
  color: #fff;
  padding: 5px 9px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.4);
}

.cat-hero-body {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.cat-hero-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.cat-hero-title a { color: #0c1116; text-decoration: none; }
.cat-hero-title a:hover { color: var(--hp2-accent); }
.cat-hero-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4a5868;
}
.cat-hero-meta {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #6c7886;
}
.cat-hero-by strong { color: var(--hp2-accent); }
.cat-meta-sep { color: #c0c8d2; margin: 0 4px; }
.cat-hero-cta {
  align-self: flex-start;
  color: var(--hp2-accent);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  margin-top: 4px;
}
.cat-hero-cta:hover { text-decoration: underline; }

/* Section header */
.cat-section-h {
  margin: 8px 0 0;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent);
  text-transform: uppercase;
  display: inline-block;
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hp2-accent);
}

/* Card grid */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.cat-card {
  background: #fff;
  border: 2px solid #d8e2eb;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 0 #d8e2eb;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  position: relative;
}
.cat-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 8px 0 0 var(--hp2-accent);
  border-color: var(--hp2-accent);
}
.cat-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0c1116;
  overflow: hidden;
  display: block;
  border-bottom: 2px solid #d8e2eb;
}
.cat-card:hover .cat-card-thumb { border-bottom-color: var(--hp2-accent); }
.cat-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.cat-card:hover .cat-card-thumb img { transform: scale(1.06); }
.cat-card-thumb-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; color: var(--hp2-accent);
  background: linear-gradient(135deg, #f2f6fa, #d8e2eb);
}

/* Tag chip overlaying thumbnail — WHITE text on dark bg for max contrast,
   category color as a 3px bottom border accent */
.cat-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(12, 17, 22, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 5px 10px 4px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 3px solid var(--hp2-accent-2);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45);
  text-decoration: none;
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-card-tag[data-tag="c-buzz"]          { border-bottom-color: var(--hp2-purple); }
.cat-card-tag[data-tag="round-the-block"] { border-bottom-color: var(--hp2-accent); }
.cat-card-tag[data-tag="cryptalk"]        { border-bottom-color: var(--hp2-green); }
.cat-card-tag[data-tag="analysis"]        { border-bottom-color: var(--hp2-yellow); }
.cat-card-tag[data-tag="glossary"]        { border-bottom-color: #c98aff; }
.cat-card-tag[data-tag="block-o-pedia"]   { border-bottom-color: var(--hp2-red); }
.cat-card-tag[data-tag="opinions"]   { border-bottom-color: var(--hp2-accent-2); }
.cat-card-tag[data-tag="press-release"]   { border-bottom-color: var(--hp2-accent-2); }

/* READ button is now a proper bottom CTA inside the card body (not a hover overlay) */
.cat-card-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  align-self: stretch;
  background: var(--hp2-yellow);
  color: #1a1100;
  padding: 10px 14px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #1a1100;
  border-radius: 4px;
  box-shadow: 3px 3px 0 0 #1a1100;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.cat-card-read:hover {
  background: #ffc857;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 #1a1100;
}
.cat-card-read:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 #1a1100; }
.cat-card-read::after { content: "▸"; font-size: 11px; }

.cat-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat-card-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: -0.1px; }
.cat-card-title a { color: #1a2330; text-decoration: none; }
.cat-card-title a:hover { color: var(--hp2-accent); }
.cat-card-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #6c7886;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed #e6eef5;
}
.cat-card-by { color: var(--hp2-accent); }

/* Widget rail */
.cat-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--hp2-dark-border) transparent;
}
@media (max-width: 1080px) { .cat-rail { position: static; max-height: none; } }

.cat-widget {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-widget-h {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hp2-dark-border);
}

/* Pulse mini rows */
.cat-pulse-rows { display: flex; flex-direction: column; gap: 4px; }
.cat-pulse-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.cat-pulse-row:last-child { border-bottom: none; }
.cat-pulse-label { color: var(--hp2-dark-text-mute); }
.cat-pulse-val { color: var(--hp2-dark-text); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.cat-pulse-meta { color: var(--hp2-dark-text-mute); font-weight: 400; font-size: 11px; }

/* =================================================================
   STATIC PAGE LAYOUT (/about/, /contact/, /privacy/, etc.)
   Used by page.hbs when @page is present (Ghost Page record).
   ================================================================= */
.static-page-shell {
  max-width: 820px;
  margin: 32px auto 64px;
  padding: 0 20px;
  color: var(--hp2-dark-text);
}
.static-page-hero {
  margin: 0 0 24px;
  border: 2px solid var(--hp2-dark-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--hp2-dark-panel);
}
.static-page-hero img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 360px;
  object-fit: cover;
}
.static-page-header {
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 2px solid var(--hp2-dark-border);
}
.static-page-back {
  display: inline-block;
  margin-bottom: 12px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--hp2-accent);
  text-decoration: none;
  text-transform: uppercase;
}
.static-page-back:hover { color: var(--hp2-accent-2); }
.static-page-title {
  margin: 0;
  font-family: 'Pixelify Sans', ui-monospace, monospace;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hp2-dark-text);
  letter-spacing: 0.5px;
}
.static-page-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hp2-dark-text);
}
.static-page-content h2,
.static-page-content h3,
.static-page-content h4 {
  margin: 32px 0 12px;
  color: var(--hp2-dark-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
}
.static-page-content h2 { font-size: 24px; }
.static-page-content h3 { font-size: 19px; color: var(--hp2-accent); }
.static-page-content h4 { font-size: 16px; }
.static-page-content p { margin: 0 0 16px; }
.static-page-content ul,
.static-page-content ol { margin: 0 0 16px; padding-left: 24px; }
.static-page-content li { margin: 0 0 6px; }
.static-page-content a {
  color: var(--hp2-accent);
  text-decoration: underline;
  text-decoration-color: rgba(22, 143, 233, 0.4);
  text-underline-offset: 3px;
}
.static-page-content a:hover { color: var(--hp2-accent-2); text-decoration-color: var(--hp2-accent-2); }
.static-page-content strong { color: #fff; font-weight: 700; }
.static-page-content em { color: var(--hp2-dark-text-mute); }
.static-page-content code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
  color: var(--hp2-accent-2);
}
.static-page-content blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--hp2-accent);
  background: rgba(22, 143, 233, 0.06);
  color: var(--hp2-dark-text-mute);
  font-style: italic;
}
@media (max-width: 640px) {
  .static-page-shell { margin: 16px auto 40px; padding: 0 16px; }
  .static-page-title { font-size: 26px; }
  .static-page-content { font-size: 15px; }
}

/* Cryptalk sidebar: featured voices */
.cat-voices-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cat-voice-row {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--hp2-green);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}
.cat-voice-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cat-voice-handle {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  color: var(--hp2-green);
  letter-spacing: 0.5px;
}
.cat-voice-tick {
  font-size: 10px;
  color: var(--hp2-accent);
  font-weight: 700;
}
.cat-voice-take {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hp2-dark-text);
}

/* Wires AI CTA */
.cat-widget-ai {
  background: linear-gradient(135deg, var(--hp2-accent-2), #ff8c3b);
  color: #fff;
  border-color: var(--hp2-accent-2);
}
.cat-widget-ai .cat-ai-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  background: rgba(255,255,255,0.2);
  padding: 4px 8px;
  border-radius: 3px;
  align-self: flex-start;
}
.cat-widget-ai h4 { margin: 0; font-size: 16px; font-weight: 800; text-transform: capitalize; letter-spacing: -0.2px; }
.cat-widget-ai p { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: 0.92; }
.cat-ai-btn {
  align-self: flex-start;
  background: rgba(0,0,0,0.25);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  margin-top: 4px;
  transition: all 0.15s;
}
.cat-ai-btn:hover { background: rgba(0,0,0,0.4); border-color: #fff; }

/* Hide legacy ad containers */
.cat-shell #ad-leaderboard-lg,
.cat-shell #ad-leaderboard-md,
.cat-shell #ad-leaderboard-sm,
.cat-shell #ad-container { display: none !important; }

/* Category header: inline live market ticker on the right */
.cat-header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}
.cat-header-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.cat-header-ticker {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.cat-tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hp2-dark-bg);
  color: var(--hp2-dark-text);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  min-height: 32px;
  box-sizing: border-box;
}

.cat-tick-label {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
}

.cat-tick-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-tick-meta  { color: var(--hp2-dark-text-mute); font-size: 11px; }

@media (max-width: 720px) {
  .cat-header-ticker { margin-left: 0; width: 100%; }
  .cat-tick { font-size: 11px; padding: 5px 8px; }
}

/* =================================================================
   COIN PAGE (/btc/, /eth/, /sol/, etc.)
   ================================================================= */

.coin-shell { gap: 20px; }

.coin-header {
  padding: 16px 0 18px;
  margin: 0;
  border-bottom: 2px solid var(--hp2-accent);
}

.coin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.coin-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coin-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hp2-accent), var(--hp2-accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 14px rgba(22,143,233,0.35), inset 0 -3px 0 rgba(0,0,0,0.18);
}

.coin-id-text { display: flex; flex-direction: column; gap: 2px; }
.coin-h {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #0c1116;
  letter-spacing: -0.8px;
  text-transform: capitalize;
  line-height: 1;
}
.coin-sub {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: #6c7886;
  letter-spacing: 0.4px;
}

.coin-price-block { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.coin-price {
  font-family: ui-monospace, monospace;
  font-size: 32px;
  font-weight: 800;
  color: #0c1116;
  letter-spacing: -0.5px;
  line-height: 1;
}
.coin-delta {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  align-self: flex-end;
  padding: 3px 8px;
  border-radius: 4px;
}
.coin-delta.up   { color: var(--hp2-green); background: rgba(22,199,132,0.12); }
.coin-delta.down { color: var(--hp2-red);   background: rgba(234,57,67,0.12); }

.coin-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 980px) { .coin-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .coin-stats { grid-template-columns: repeat(2, 1fr); } }

.coin-stat {
  background: #fff;
  border: 1px solid #d8e2eb;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coin-stat span {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: #6c7886;
  text-transform: uppercase;
}
.coin-stat strong {
  font-family: ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: #0c1116;
}

@media (max-width: 720px) {
  .coin-header-row { flex-direction: column; align-items: flex-start; }
  .coin-price-block { align-self: flex-start; text-align: left; }
  .coin-delta { align-self: flex-start; }
  .coin-h { font-size: 28px; }
  .coin-price { font-size: 26px; }
}

/* Chart */
.coin-chart {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  overflow: hidden;
}

.coin-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hp2-dark-border);
  flex-wrap: wrap;
  gap: 10px;
}
.coin-chart-title {
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--hp2-dark-text);
}
.coin-chart-actions { display: flex; gap: 4px; }
.coin-chart-tf {
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.15s;
}
.coin-chart-tf:hover { color: var(--hp2-dark-text); border-color: var(--hp2-accent); }
.coin-chart-tf.is-active { background: var(--hp2-accent); color: #fff; border-color: var(--hp2-accent); }

.coin-chart-frame {
  position: relative;
  height: 480px;
  background: #000;
}
.coin-chart-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

@media (max-width: 720px) {
  .coin-chart-frame { height: 360px; }
}

/* Empty-state card when no posts tagged */
.cat-card-empty {
  grid-column: 1 / -1;
  background: #fff;
  border: 2px dashed #d8e2eb;
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  color: #6c7886;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-card-empty strong { color: #1a2330; font-size: 15px; font-family: inherit; }
.cat-card-empty code { background: #f2f6fa; padding: 2px 6px; border-radius: 3px; color: var(--hp2-accent); font-size: 12px; }

/* Heatmap cells become real anchors when linked */
.hp2-heatmap-grid a.heat-cell {
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.hp2-heatmap-grid .heat-cell.is-linked::after {
  content: "↗";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
.hp2-heatmap-grid .heat-cell.is-linked:hover::after { opacity: 0.85; }

/* =================================================================
   COIN PAGE: action row (poll + predict) + latest + bull/bear
   ================================================================= */

.coin-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 880px) { .coin-action-row { grid-template-columns: 1fr; } }

/* Poll card */
.coin-poll {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.coin-poll::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, rgba(22,143,233,0.12), transparent 55%);
  pointer-events: none;
}
.coin-poll-h { display: flex; flex-direction: column; gap: 6px; position: relative; }
.coin-poll-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.5px;
  background: rgba(22,143,233,0.18);
  color: var(--hp2-accent);
  border: 1px solid rgba(22,143,233,0.4);
  padding: 4px 8px; border-radius: 4px;
}
.coin-poll h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--hp2-dark-text); }

.coin-poll-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }

.coin-poll-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 2px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.coin-poll-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--vote-pct, 0%);
  background: currentColor;
  opacity: 0.10;
  transition: width 0.5s ease;
}
.coin-poll-emoji { font-size: 20px; line-height: 1; }
.coin-poll-label { flex: 1; text-align: left; }
.coin-poll-pct { font-family: ui-monospace, monospace; font-size: 13px; color: var(--hp2-dark-text-mute); }
.coin-poll-bull:hover, .coin-poll-bull.is-voted { border-color: var(--hp2-green); color: var(--hp2-green); }
.coin-poll-bear:hover, .coin-poll-bear.is-voted { border-color: var(--hp2-red);   color: var(--hp2-red); }
.coin-poll-btn.is-voted .coin-poll-pct { color: inherit; }

.coin-poll-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  position: relative;
}
.coin-meta-sep { color: var(--hp2-dark-border); margin: 0 4px; }

/* Predict card */
.coin-predict {
  background: linear-gradient(135deg, rgba(233,112,22,0.10), rgba(22,143,233,0.06)), var(--hp2-dark-panel);
  border: 1px solid rgba(233,112,22,0.4);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.coin-predict::after {
  content: "🎯";
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-size: 130px;
  opacity: 0.04;
  pointer-events: none;
}
.coin-predict-h { display: flex; flex-direction: column; gap: 6px; position: relative; }
.coin-predict-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.18);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 4px 8px; border-radius: 4px;
}
.coin-predict h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--hp2-dark-text); }
.coin-predict h3 strong { color: var(--hp2-yellow); font-weight: 800; }

.coin-predict-windows { display: flex; gap: 6px; position: relative; }
.coin-predict-tf {
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}
.coin-predict-tf.is-active { background: var(--hp2-accent-2); color: #fff; border-color: var(--hp2-accent-2); }

.coin-predict-state { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
@media (max-width: 480px) { .coin-predict-state { grid-template-columns: 1fr; } }

.coin-predict-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin-predict-side {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: var(--hp2-dark-bg);
  border: 2px solid var(--hp2-dark-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: var(--hp2-dark-text);
  transition: all 0.15s;
}
.coin-predict-side .coin-predict-arrow { font-size: 22px; line-height: 1; }
.coin-predict-up:hover, .coin-predict-up.is-active { border-color: var(--hp2-green); color: var(--hp2-green); background: rgba(22,199,132,0.08); }
.coin-predict-down:hover, .coin-predict-down.is-active { border-color: var(--hp2-red); color: var(--hp2-red); background: rgba(234,57,67,0.08); }

.coin-predict-stake { display: flex; flex-direction: column; gap: 6px; }
.coin-predict-stake label {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 1px;
  color: var(--hp2-dark-text-mute);
}
.coin-predict-stake-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
  padding: 4px 10px;
}
.coin-predict-stake-row input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--hp2-dark-text);
  font-family: ui-monospace, monospace;
  font-size: 18px; font-weight: 700;
}
.coin-predict-stake-suffix { color: var(--hp2-yellow); font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }

.coin-predict-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--hp2-dark-text-mute);
  position: relative;
}

.coin-predict-lock-btn {
  margin-top: 4px;
  background: linear-gradient(135deg, var(--hp2-accent-2), #ff8c3b);
  color: #fff; border: none;
  padding: 12px 20px; border-radius: 8px;
  font-family: inherit; font-weight: 800; font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.3);
  transition: transform 0.12s;
}
.coin-predict-lock-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 rgba(0,0,0,0.35); }
.coin-predict-lock-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

.coin-predict-locked {
  padding: 14px 16px;
  background: rgba(245,166,35,0.10);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coin-predict-locked-row {
  display: flex; justify-content: space-between;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.coin-predict-locked-row strong { color: var(--hp2-yellow); }

/* =================================================================
   COIN PAGE: latest analysis hero
   ================================================================= */

.coin-latest {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 2px solid #d8e2eb;
  box-shadow: 6px 6px 0 0 var(--hp2-accent);
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 720px) { .coin-latest { grid-template-columns: 1fr; } }

.coin-latest-thumb {
  display: block;
  background: #0c1116;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.coin-latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.coin-latest-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.coin-latest-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.12);
  border: 1px solid rgba(233,112,22,0.3);
  padding: 4px 8px; border-radius: 3px;
  margin-bottom: 4px;
}
.coin-latest h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; }
.coin-latest h2 a { color: #0c1116; text-decoration: none; }
.coin-latest h2 a:hover { color: var(--hp2-accent); }
.coin-latest p { margin: 0; font-size: 14px; color: #4a5868; line-height: 1.5; }
.coin-latest-meta { font-family: ui-monospace, monospace; font-size: 11.5px; color: #6c7886; margin-top: 4px; }
.coin-latest-meta strong { color: var(--hp2-accent); }
.coin-latest-cta { color: var(--hp2-accent); font-weight: 700; font-size: 13px; text-decoration: none; align-self: flex-start; margin-top: 4px; }
.coin-latest-cta:hover { text-decoration: underline; }

/* =================================================================
   COIN PAGE: Bull vs Bear split
   ================================================================= */

.coin-bb {
  background: #fff;
  border: 2px solid #d8e2eb;
  border-radius: 8px;
  padding: 22px 26px;
}

.coin-bb-head { margin-bottom: 16px; }
.coin-bb-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0c1116;
  text-transform: capitalize;
}
.coin-bb-head h2 span { color: var(--hp2-accent); }
.coin-bb-sub { margin: 0; font-size: 13px; color: #6c7886; max-width: 780px; line-height: 1.5; }

.coin-bb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 880px) { .coin-bb-grid { grid-template-columns: 1fr; } }

.coin-bb-col {
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid transparent;
}
.coin-bb-bull { background: rgba(22,199,132,0.06); border-color: rgba(22,199,132,0.25); }
.coin-bb-bear { background: rgba(234,57,67,0.06);  border-color: rgba(234,57,67,0.25); }

.coin-bb-col-h {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.coin-bb-bull .coin-bb-col-h { color: var(--hp2-green); }
.coin-bb-bear .coin-bb-col-h { color: var(--hp2-red); }
.coin-bb-count {
  background: #0c1116;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: ui-monospace, monospace;
}

.coin-bb-list { display: flex; flex-direction: column; gap: 8px; }
.coin-bb-empty {
  padding: 22px 14px;
  text-align: center;
  color: #6c7886;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.5);
  border: 1px dashed #d8e2eb;
  border-radius: 6px;
}

.coin-bb-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  background: #fff;
  border: 1px solid #d8e2eb;
  border-radius: 6px;
  padding: 8px;
  text-decoration: none;
  color: #0c1116;
  transition: all 0.15s;
  align-items: center;
}
.coin-bb-row:hover { border-color: var(--hp2-accent); transform: translateX(2px); }
.coin-bb-row-thumb {
  width: 70px; height: 50px; border-radius: 4px; overflow: hidden; background: #0c1116;
}
.coin-bb-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coin-bb-row-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.coin-bb-row-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.coin-bb-row-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: ui-monospace, monospace; font-size: 11px; color: #6c7886;
}
.coin-bb-row-pct {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.coin-bb-bull .coin-bb-row-pct { color: var(--hp2-green); background: rgba(22,199,132,0.12); }
.coin-bb-bear .coin-bb-row-pct { color: var(--hp2-red);   background: rgba(234,57,67,0.12); }

.coin-bb-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
  padding: 10px 14px;
  background: #f2f6fa;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #6c7886;
}
.coin-bb-pending strong { color: #0c1116; }
.coin-bb-pending-link { color: var(--hp2-accent); text-decoration: none; font-weight: 700; }
.coin-bb-pending-link:hover { text-decoration: underline; }

.coin-bb-neutral { margin-top: 14px; }
.coin-bb-neutral header h3 {
  margin: 0 0 10px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #6c7886;
}

.coin-source { display: none; }

/* =================================================================
   COIN PAGE — Hero header (replaces .coin-header)
   ================================================================= */
.coin-hero {
  background: linear-gradient(135deg, var(--hp2-dark-panel) 0%, var(--hp2-dark-bg) 100%);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 18px 22px 16px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.coin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 95% -20%, rgba(22,143,233,0.18), transparent 50%),
    radial-gradient(circle at -10% 110%, rgba(233,112,22,0.14), transparent 50%);
  pointer-events: none;
}
.coin-hero > * { position: relative; }

/* Top strip: back link + live indicator */
.coin-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coin-hero-back {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--hp2-dark-text-mute);
  text-decoration: none;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--hp2-dark-border);
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  transition: all 0.15s;
}
.coin-hero-back:hover { color: var(--hp2-accent); border-color: var(--hp2-accent); }

.coin-hero-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-green);
}
.coin-hero-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hp2-green);
  box-shadow: 0 0 8px var(--hp2-green);
  animation: blink 1.4s ease-in-out infinite;
}

/* Main row: logo + name on left, price + sparkline on right */
.coin-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.coin-hero-id {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coin-hero-logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hp2-accent), var(--hp2-accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: -0.5px;
  box-shadow:
    0 0 0 4px var(--hp2-dark-bg),
    0 0 0 5px rgba(22,143,233,0.4),
    0 8px 24px rgba(22,143,233,0.3),
    inset 0 -4px 0 rgba(0,0,0,0.25);
  position: relative;
}
.coin-hero-logo::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(22,143,233,0.35);
  animation: dash-ring 18s linear infinite;
  pointer-events: none;
}

.coin-hero-name {
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.8px;
  text-transform: capitalize;
  line-height: 1;
}

.coin-hero-sub {
  margin-top: 6px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--hp2-dark-text-mute);
  letter-spacing: 0.4px;
}

/* Price block */
.coin-hero-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.coin-hero-price-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.coin-hero-price {
  font-family: ui-monospace, monospace;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.6px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(22,143,233,0.25);
}
.coin-hero-spark {
  width: 160px;
  height: 56px;
  flex-shrink: 0;
  overflow: visible;
}
.coin-hero-spark path.spark-fill { fill: rgba(22,199,132,0.18); }
.coin-hero-spark path.spark-line {
  fill: none;
  stroke: var(--hp2-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(22,199,132,0.4));
}
.coin-hero-spark.is-down path.spark-fill { fill: rgba(234,57,67,0.18); }
.coin-hero-spark.is-down path.spark-line { stroke: var(--hp2-red); filter: drop-shadow(0 0 4px rgba(234,57,67,0.4)); }

.coin-hero-delta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.coin-hero-7d { color: var(--hp2-dark-text-mute); font-size: 12px; }

@media (max-width: 720px) {
  .coin-hero-main { flex-direction: column; align-items: flex-start; }
  .coin-hero-price-wrap { align-items: flex-start; }
  .coin-hero-name { font-size: 30px; }
  .coin-hero-price { font-size: 32px; }
  .coin-hero-spark { width: 120px; height: 44px; }
}

/* Stats strip — compact pill row */
.coin-hero-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 980px) { .coin-hero-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .coin-hero-stats { grid-template-columns: repeat(2, 1fr); } }

.coin-hero-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.coin-hero-stat span {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
}
.coin-hero-stat strong {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* Inline sentiment poll inside the hero */
.coin-hero-poll {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coin-hero-poll-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.coin-hero-poll-tag {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-dark-text-mute);
}
.coin-hero-poll-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

.coin-hero-poll-bar {
  display: flex;
  height: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.coin-hero-poll-bull, .coin-hero-poll-bear {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: width 0.5s ease;
  min-width: 0;
  white-space: nowrap;
}
.coin-hero-poll-bull { background: linear-gradient(90deg, rgba(22,199,132,0.5), rgba(22,199,132,0.85)); }
.coin-hero-poll-bear { background: linear-gradient(90deg, rgba(234,57,67,0.85), rgba(234,57,67,0.5)); }
.coin-hero-poll-bull span, .coin-hero-poll-bear span { padding: 0 6px; }

.coin-hero-poll-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Reuse coin-poll-btn for hero poll buttons (keep dark hero look) */
.coin-hero-poll .coin-poll-btn {
  padding: 9px 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--hp2-dark-border);
}

/* === Predict standalone row (full width) === */
.coin-predict-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  position: relative;
}
@media (max-width: 720px) {
  .coin-predict-row { grid-template-columns: 1fr; }
}

/* =================================================================
   COIN PAGE: merged ENGAGE section (poll + predict)
   ================================================================= */
.coin-engage {
  background: linear-gradient(135deg, var(--hp2-dark-panel), var(--hp2-dark-bg));
  border: 1px solid var(--hp2-dark-border);
  border-radius: 14px;
  padding: 20px 22px 22px;
  color: var(--hp2-dark-text);
  position: relative;
  overflow: hidden;
}
.coin-engage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 5% -20%, rgba(22,143,233,0.10), transparent 50%),
    radial-gradient(circle at 95% 110%, rgba(233,112,22,0.10), transparent 50%);
  pointer-events: none;
}
.coin-engage > * { position: relative; }

.coin-engage-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.coin-engage-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.18);
  border: 1px solid rgba(233,112,22,0.4);
  padding: 4px 8px; border-radius: 4px;
  margin-bottom: 4px;
}
.coin-engage-h { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.coin-engage-h span { color: var(--hp2-accent); text-transform: capitalize; }
.coin-engage-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--hp2-dark-text-mute); }

.coin-engage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 880px) { .coin-engage-grid { grid-template-columns: 1fr; } }

.coin-engage-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coin-engage-poll    { border-color: rgba(22,143,233,0.30); }
.coin-engage-predict { border-color: rgba(233,112,22,0.30); }

.coin-engage-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.coin-engage-card-tag {
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.3px;
  padding: 4px 7px; border-radius: 3px;
}
.coin-engage-card-tag-blue   { background: rgba(22,143,233,0.18);  color: var(--hp2-accent);    border: 1px solid rgba(22,143,233,0.35); }
.coin-engage-card-tag-orange { background: rgba(233,112,22,0.18);  color: var(--hp2-accent-2);  border: 1px solid rgba(233,112,22,0.35); }
.coin-engage-card-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

/* Make predict card columns stack inside the smaller engage frame */
.coin-engage-predict .coin-predict-state {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 500px) {
  .coin-engage-predict .coin-predict-state { grid-template-columns: 1fr; }
}

/* Analysis empty-state */
.coin-latest-empty {
  background: linear-gradient(135deg, #fff, #f7fafd);
  border: 2px dashed #c5d2e0;
  box-shadow: none;
}
.coin-latest-empty-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f2f6fa, #e5edf5);
  font-size: 60px;
}
.coin-latest-empty h2 { font-size: 22px; }
.coin-latest-empty code {
  background: rgba(22,143,233,0.10);
  color: var(--hp2-accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

/* Hero header — remove the stripped-out poll padding gap */
.coin-hero { gap: 14px; }

/* Heatmap controls row — windows + legend */
.hp2-heatmap-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hm-windows {
  display: flex;
  gap: 4px;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 6px;
  padding: 3px;
}
.hm-window {
  background: transparent;
  border: none;
  color: var(--hp2-dark-text-mute);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.3px;
}
.hm-window:hover { color: var(--hp2-dark-text); }
.hm-window.is-active { background: var(--hp2-accent); color: #fff; }

/* =================================================================
   FEATURED BREAKING STRIP (above hero)
   ================================================================= */
.hp2-breaking {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.hp2-breaking::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(233,112,22,0.10), transparent 50%);
  pointer-events: none;
}

.hp2-breaking-h {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.hp2-breaking-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hp2-red);
  box-shadow: 0 0 10px var(--hp2-red);
  animation: blink 1.2s ease-in-out infinite;
}
.hp2-breaking-tag {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-red);
  background: rgba(234,57,67,0.15);
  border: 1px solid rgba(234,57,67,0.35);
  padding: 3px 7px;
  border-radius: 3px;
}
.hp2-breaking-meta {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--hp2-dark-text-mute);
  margin-left: auto;
}

.hp2-breaking-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}
@media (max-width: 880px) {
  .hp2-breaking-track { grid-template-columns: 1fr; }
}

.hp2-breaking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 8px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--hp2-dark-text);
  transition: all 0.15s;
  min-width: 0;
}
.hp2-breaking-item:hover {
  border-color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.06);
  transform: translateY(-1px);
}

.hp2-breaking-thumb {
  width: 52px;
  height: 36px;
  flex-shrink: 0;
  background: var(--hp2-dark-bg);
  border-radius: 4px;
  overflow: hidden;
}
.hp2-breaking-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hp2-breaking-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.hp2-breaking-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hp2-dark-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp2-breaking-time {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--hp2-dark-text-mute);
}
.hp2-breaking-tagchip { color: var(--hp2-accent); }

/* FEATURED chip on hero card thumbnail */
.hp2-hero-featured-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg, var(--hp2-accent-2), #ff8c3b);
  color: #fff;
  padding: 5px 9px;
  border-radius: 4px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.4);
  z-index: 2;
}

/* =================================================================
   READER VERDICT CHIP — surfaces on post cards + article hero
   ================================================================= */
.hp2-verdict-chip {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  width: fit-content;
}
.hp2-verdict-chip.is-bull,
.hp2-verdict-chip.is-bear,
.hp2-verdict-chip.is-undecided { display: inline-flex; }

.hp2-verdict-chip.is-bull {
  background: rgba(22,199,132,0.10);
  border-color: rgba(22,199,132,0.30);
  color: var(--hp2-green);
}
.hp2-verdict-chip.is-bear {
  background: rgba(234,57,67,0.10);
  border-color: rgba(234,57,67,0.30);
  color: var(--hp2-red);
}
.hp2-verdict-chip.is-undecided {
  background: rgba(139,152,165,0.10);
  border-color: rgba(139,152,165,0.25);
  color: var(--hp2-dark-text-mute);
}

.hp2-verdict-icon { font-size: 13px; line-height: 1; }
.hp2-verdict-total { opacity: 0.75; font-weight: 500; }

/* Hero variant — bigger, sits next to AI Summary */
.hp2-verdict-chip-hero {
  font-size: 13px;
  padding: 6px 12px;
  margin: 8px 0 14px;
}
.hp2-verdict-chip-hero .hp2-verdict-icon { font-size: 16px; }

/* =================================================================
   PRICE PROPHET game (60s spot UP/DOWN, +25 WC win)
   ================================================================= */
.prophet-pick { display: flex; flex-direction: column; gap: 10px; }
.prophet-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prophet-pick-row label {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--hp2-dark-text-mute);
  text-transform: uppercase;
  min-width: 70px;
}
.prophet-pick-row select,
.prophet-pick-row input {
  flex: 1;
  background: var(--hp2-dark-bg);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
}
.prophet-suffix { color: var(--hp2-yellow); font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }

.prophet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.prophet-btn {
  background: var(--hp2-dark-bg);
  border: 2px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.12s;
}
.prophet-btn span { font-size: 20px; line-height: 1; }
.prophet-up:hover    { border-color: var(--hp2-green); color: var(--hp2-green); background: rgba(22,199,132,0.08); }
.prophet-down:hover  { border-color: var(--hp2-red);   color: var(--hp2-red);   background: rgba(234,57,67,0.08); }
.prophet-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.prophet-hint {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}

.prophet-live {
  background: rgba(22,143,233,0.06);
  border: 1px solid rgba(22,143,233,0.25);
  border-radius: 8px;
  padding: 14px 16px;
}
.prophet-live-row { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; font-size: 13px; }
.prophet-live-row + .prophet-live-row { margin-top: 6px; }
.prophet-live strong { color: var(--hp2-dark-text); }

.prophet-result {
  padding: 18px;
  border-radius: 8px;
  text-align: center;
}
.prophet-result.win { background: rgba(22,199,132,0.10); border: 1px solid rgba(22,199,132,0.35); color: var(--hp2-green); }
.prophet-result.loss { background: rgba(234,57,67,0.10); border: 1px solid rgba(234,57,67,0.35); color: var(--hp2-red); }
.prophet-result h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-family: 'Pixelify Sans', monospace;
  letter-spacing: 0.3px;
}
.prophet-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.prophet-result p { margin: 0 0 12px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--hp2-dark-text-mute); }
.prophet-result button {
  background: var(--hp2-accent);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
}

/* =================================================================
   SIGNALS PAGE (/signals/)
   ================================================================= */
.signals-shell { gap: 20px; }

.signals-header {
  padding: 14px 0 16px;
  border-bottom: 2px solid var(--hp2-accent);
}
.signals-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.signals-header-l {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.signals-h {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #0c1116;
  letter-spacing: -0.6px;
  line-height: 1;
}
.signals-header-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233,112,22,0.10);
  border: 1px solid rgba(233,112,22,0.3);
  padding: 4px 8px;
  border-radius: 4px;
}
.signals-header-stats {
  display: flex;
  gap: 8px;
}
.signals-stat {
  background: #fff;
  border: 1px solid #d8e2eb;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 90px;
}
.signals-stat span {
  display: block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 1px;
  color: #6c7886;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.signals-stat strong {
  font-family: ui-monospace, monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--hp2-accent);
}
.signals-sub {
  margin: 12px 0 0;
  font-size: 13px;
  color: #4a5868;
  line-height: 1.6;
  max-width: 880px;
}
.signals-sub strong { color: #0c1116; font-weight: 700; }

.signals-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.signals-filter {
  background: #fff;
  border: 1px solid #d8e2eb;
  color: #4a5868;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.signals-filter:hover { border-color: var(--hp2-accent); color: var(--hp2-accent); }
.signals-filter.is-active { background: var(--hp2-accent); color: #fff; border-color: var(--hp2-accent); font-weight: 700; }

.signals-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signals-loading {
  padding: 32px;
  text-align: center;
  color: #6c7886;
  background: #fff;
  border: 1px dashed #d8e2eb;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
}
.signals-empty {
  padding: 28px;
  text-align: center;
  color: #6c7886;
  background: #f7fafd;
  border: 1px dashed #d8e2eb;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

.signals-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-left: 4px solid var(--hp2-accent);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--hp2-dark-text);
  transition: transform 0.15s, border-color 0.15s;
}
.signals-card:hover { transform: translateY(-1px); }
.signals-card.tag-buy   { border-left-color: var(--hp2-green); }
.signals-card.tag-sell  { border-left-color: var(--hp2-red); }
.signals-card.tag-watch { border-left-color: var(--hp2-yellow); }
.signals-card.tag-info  { border-left-color: var(--hp2-accent); }

.signals-card-tag {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 6px 10px;
  border-radius: 4px;
  align-self: flex-start;
  white-space: nowrap;
}
.signals-card.tag-buy   .signals-card-tag { background: rgba(22,199,132,0.18); color: var(--hp2-green); }
.signals-card.tag-sell  .signals-card-tag { background: rgba(234,57,67,0.18);  color: var(--hp2-red); }
.signals-card.tag-watch .signals-card-tag { background: rgba(245,166,35,0.18); color: var(--hp2-yellow); }
.signals-card.tag-info  .signals-card-tag { background: rgba(22,143,233,0.18); color: var(--hp2-accent); }

.signals-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.signals-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.1px;
  margin: 0;
}
.signals-card-body p {
  margin: 0;
  font-size: 13px;
  color: var(--hp2-dark-text-mute);
  line-height: 1.5;
}
.signals-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
}
.signals-card-meta-sep { color: var(--hp2-dark-border); }
.signals-card-source {
  display: inline-block;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp2-dark-border);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--hp2-dark-text-mute);
}

.signals-card-score {
  text-align: right;
  font-family: ui-monospace, monospace;
}
.signals-card-score span {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--hp2-dark-text-mute);
  font-family: 'Press Start 2P', monospace;
  margin-bottom: 4px;
}
.signals-card-score strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--hp2-yellow);
}

.signals-card-link {
  color: var(--hp2-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  font-family: ui-monospace, monospace;
}
.signals-card-link:hover { color: var(--hp2-accent-2); }

/* Rules section (light bg) */
.signals-rules {
  background: #fff;
  border: 1px solid #d8e2eb;
  border-radius: 12px;
  padding: 22px 24px;
  margin-top: 8px;
}
.signals-rules-h {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--hp2-accent);
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px dashed #d8e2eb;
  margin-bottom: 14px;
}
.signals-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.signals-rule {
  padding: 14px;
  background: #f7fafd;
  border-radius: 8px;
  border: 1px solid #e6eef5;
}
.signals-rule-tag {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #0c1116;
  margin-bottom: 6px;
}
.signals-rule p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a5868;
}
.signals-rule p strong { color: var(--hp2-accent); font-weight: 700; }
.signals-rules-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e6eef5;
  font-size: 12px;
  color: #6c7886;
  font-family: ui-monospace, monospace;
}
.signals-rules-foot code { background: #f2f6fa; padding: 1px 6px; border-radius: 3px; color: var(--hp2-accent); }

/* Wing card header link */
.wing-head-link {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  text-transform: none;
  color: var(--hp2-accent);
  text-decoration: none;
  letter-spacing: 0.3px;
}
.wing-head-link:hover { color: var(--hp2-accent-2); }

/* Make wing-head a flex row to push the link to the right */
.wing-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ----- Wing F&G gauge widget ----- */
.wing-fng { padding: 14px 16px 16px; }
.wing-fng .wing-head-meta {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--hp2-dark-text-mute);
  font-weight: 500;
}
.wing-fng-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wing-fng-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
#wingFngNeedle {
  transform-box: view-box;
  transform-origin: 110px 110px;
}
.wing-fng-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: -8px;
}
.wing-fng-value {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 22px;
  color: var(--hp2-dark-text);
  letter-spacing: 1px;
  line-height: 1;
}
.wing-fng-mood {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hp2-dark-text-mute);
}

/* =================================================================
   POLLS PAGE (/polls/)
   ================================================================= */
.polls-shell { gap: 20px; }
.polls-header { padding: 14px 0 16px; border-bottom: 2px solid var(--hp2-accent); }
.polls-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.polls-header-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.polls-h { margin: 0; font-size: 36px; font-weight: 900; color: #0c1116; letter-spacing: -0.6px; line-height: 1; }
.polls-header-tag {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent);
  background: rgba(22,143,233,0.10);
  border: 1px solid rgba(22,143,233,0.3);
  padding: 4px 8px;
  border-radius: 4px;
}
.polls-header-stats { display: flex; gap: 8px; }
.polls-sub {
  margin: 12px 0 0;
  font-size: 13px;
  color: #4a5868;
  line-height: 1.6;
  max-width: 880px;
}

.polls-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.polls-filter {
  background: #fff;
  border: 1px solid #d8e2eb;
  color: #4a5868;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.polls-filter:hover { border-color: var(--hp2-accent); color: var(--hp2-accent); }
.polls-filter.is-active { background: var(--hp2-accent); color: #fff; border-color: var(--hp2-accent); font-weight: 700; }

.polls-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.poll-card {
  background: var(--hp2-dark-panel);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--hp2-dark-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poll-card-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--hp2-dark-text-mute);
}
.poll-card-tag.cat-market    { color: var(--hp2-green);    background: rgba(22,199,132,0.12); }
.poll-card-tag.cat-sentiment { color: var(--hp2-accent-2); background: rgba(233,112,22,0.12); }
.poll-card-tag.cat-macro     { color: var(--hp2-accent);   background: rgba(22,143,233,0.12); }
.poll-card-q {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -0.1px;
}
.poll-card-options { display: flex; flex-direction: column; gap: 6px; }

.poll-opt {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text);
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  overflow: hidden;
  transition: all 0.12s;
}
.poll-opt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--vote-pct, 0%);
  background: var(--hp2-accent);
  opacity: 0.12;
  transition: width 0.5s ease;
}
.poll-opt-content { position: relative; display: flex; justify-content: space-between; align-items: center; }
.poll-opt-pct { font-family: ui-monospace, monospace; font-size: 12px; color: var(--hp2-dark-text-mute); }
.poll-opt:hover:not(.is-mine) { border-color: var(--hp2-accent); }
.poll-opt.is-mine { border-color: var(--hp2-accent); }
.poll-opt.is-mine .poll-opt-pct { color: var(--hp2-accent); font-weight: 700; }

.poll-card-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  display: flex;
  justify-content: space-between;
}

/* Pillars note */
.hp2-pillars-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--hp2-yellow);
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
}

/* "Sample" mini-tag for individual pillar headers (Pro + Alpha) */
.pillar-badge::after { content: ""; }
.pillar-pro .pillar-badge::after,
.pillar-alpha .pillar-badge::after {
  content: " · SAMPLE";
  font-size: 7px;
  color: rgba(255,255,255,0.5);
  margin-left: 2px;
}

/* =================================================================
   Homepage section reshuffle (drag-drop)
   ================================================================= */
.hp2-section {
  position: relative;
}

.hp2-section::before {
  content: "⋮⋮";
  position: absolute;
  top: 8px;
  left: -22px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--hp2-dark-panel);
  color: var(--hp2-dark-text-mute);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  z-index: 5;
}
.hp2-section:hover::before { opacity: 0.7; }
.hp2-section::before:hover { color: var(--hp2-accent); opacity: 1; }
.hp2-section-chosen::before, .hp2-section-drag::before { opacity: 1; color: var(--hp2-accent-2); }

.hp2-section-ghost { opacity: 0.35; outline: 2px dashed var(--hp2-accent-2); border-radius: 12px; }
.hp2-section-drag { transform: rotate(0.4deg); }

@media (max-width: 1100px) {
  /* On mobile, hide the drag handle (touchscreens fight with horizontal scroll) */
  .hp2-section::before { display: none; }
}

.hp2-layout-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(22,143,233,0.04);
  border: 1px dashed rgba(22,143,233,0.25);
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  margin-bottom: 8px;
}
.hp2-layout-ctrl-hint { color: var(--hp2-accent); }
.hp2-layout-ctrl-btn {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-dark-text-mute);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hp2-layout-ctrl-btn:hover { color: var(--hp2-accent-2); border-color: var(--hp2-accent-2); }

/* =================================================================
   ONE-TIME WELCOME MODAL
   ================================================================= */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6, 10, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: welcomeFade 0.25s ease;
}
.welcome-modal[hidden] { display: none; }

@keyframes welcomeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomePop {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.welcome-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--primary-color, #f5faf8);  /* same mint-white as the site behind the header logo */
  border: 1px solid #e0e8ee;
  border-radius: 18px;
  padding: 30px 30px 22px;
  color: #1a2330;
  box-shadow:
    0 30px 80px rgba(8, 18, 30, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: welcomePop 0.32s cubic-bezier(.4, 1.6, .5, 1);
}
.welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% -20%, rgba(22, 143, 233, 0.10), transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(233, 112, 22, 0.08), transparent 55%);
  pointer-events: none;
}

.welcome-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  color: #6c7886;
  border: 1px solid #d8e2eb;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
  z-index: 2;
}
.welcome-close svg { display: block; }
.welcome-close:hover { color: var(--hp2-red); border-color: var(--hp2-red); }

/* Logo stamp at top */
.welcome-stamp {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 6px auto 16px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e0e8ee;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(22,143,233,0.15), 0 0 0 4px #f5faf8;
}
.welcome-stamp-img {
  width: 62px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(22,143,233,0.12));
}
.welcome-stamp-ring {
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  border: 1.5px dashed rgba(22,143,233,0.35);
  animation: welcomeRing 18s linear infinite;
  pointer-events: none;
}
@keyframes welcomeRing { to { transform: rotate(360deg); } }

.welcome-badge {
  position: relative;
  display: inline-block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--hp2-accent-2);
  background: rgba(233, 112, 22, 0.10);
  border: 1px solid rgba(233, 112, 22, 0.35);
  padding: 4px 9px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.welcome-h {
  position: relative;
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  color: #0c1116;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.welcome-lead {
  position: relative;
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5868;
}
.welcome-lead strong { color: var(--hp2-accent-2); font-weight: 700; }

.welcome-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.welcome-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e6eef5;
  border-radius: 10px;
  padding: 11px 13px;
}
.welcome-list li:hover { border-color: var(--hp2-accent); box-shadow: 0 4px 12px rgba(22,143,233,0.10); }
.welcome-list li > span.welcome-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f5faf8;
  border: 1px solid #e6eef5;
}
.welcome-ico svg { width: 18px; height: 18px; display: block; }
.welcome-ico-blue   { color: var(--hp2-accent);   background: rgba(22,143,233,0.10); border-color: rgba(22,143,233,0.25); }
.welcome-ico-green  { color: var(--hp2-green);    background: rgba(22,199,132,0.10); border-color: rgba(22,199,132,0.25); }
.welcome-ico-orange { color: var(--hp2-accent-2); background: rgba(233,112,22,0.10); border-color: rgba(233,112,22,0.25); }
.welcome-ico-purple { color: var(--hp2-purple);   background: rgba(162,89,255,0.10); border-color: rgba(162,89,255,0.25); }
.welcome-list strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0c1116;
  margin-bottom: 2px;
  letter-spacing: -0.1px;
}
.welcome-list div span {
  display: block;
  font-size: 12.5px;
  color: #4a5868;
  line-height: 1.5;
}

.welcome-actions {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.welcome-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.welcome-btn-primary {
  background: linear-gradient(135deg, var(--hp2-accent), var(--hp2-accent-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 143, 233, 0.28);
}
.welcome-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 143, 233, 0.4); }
.welcome-btn-ghost {
  background: #fff;
  border-color: #d8e2eb;
  color: #1a2330;
}
.welcome-btn-ghost:hover { border-color: var(--hp2-accent); color: var(--hp2-accent); }

.welcome-foot {
  position: relative;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #d8e2eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6c7886;
  font-family: ui-monospace, monospace;
  text-align: center;
}
.welcome-skip {
  background: transparent;
  border: none;
  color: #99a3ad;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.welcome-skip:hover { color: var(--hp2-red); }

@media (max-width: 560px) {
  .welcome-card { padding: 24px 20px 20px; }
  .welcome-h    { font-size: 22px; }
  .welcome-confetti { font-size: 22px; }
  .welcome-actions { flex-direction: column; }
}

/* =================================================================
   Hide Ghost Members 'Subscribe' portal pill (clashes with theme).
   The portal will still mount and signup forms still work — only the
   floating widget is suppressed.
   ================================================================= */
#ghost-portal-root,
[data-portal="default"],
.gh-portal-triggerbtn-container,
[data-membersjs] [data-portal] { display: none !important; }

/* =================================================================
   Thinner heatmap so it doesn't dominate the page
   ================================================================= */
.hp2-heatmap-grid { height: 420px; }
@media (max-width: 980px) { .hp2-heatmap-grid { height: 540px; } }
@media (max-width: 560px) { .hp2-heatmap-grid { height: 620px; } }

/* =================================================================
   Per-pillar hide / restore controls
   ================================================================= */
.pillar { position: relative; }

.pillar-hide-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.04);
  color: var(--hp2-dark-text-mute);
  border: 1px solid var(--hp2-dark-border);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11px;
  transition: all 0.15s;
  z-index: 4;
  opacity: 0;
}
.pillar:hover .pillar-hide-btn { opacity: 1; }
.pillar-hide-btn:hover { color: var(--hp2-red); border-color: var(--hp2-red); background: rgba(234,57,67,0.10); }
.pillar-hide-btn svg { width: 11px; height: 11px; display: block; }

.pillar.is-hidden { display: none; }

.pillars-restore {
  display: none;
  margin-top: 8px;
  padding: 8px 14px;
  background: rgba(245,166,35,0.08);
  border: 1px dashed rgba(245,166,35,0.30);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hp2-dark-text-mute);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pillars-restore.is-visible { display: flex; }
.pillars-restore-btn {
  background: transparent;
  border: 1px solid var(--hp2-dark-border);
  color: var(--hp2-yellow);
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pillars-restore-btn:hover { border-color: var(--hp2-yellow); }