:root {
  --bg: #0d1117;
  --card: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #29abe2;
  --accent-hover: #522785;
  --green: #3fb950;
  --red: #f85149;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
}
.topbar .pregman-nav { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #f15a24, #ed1e79, #522785);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
}
.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand h1 { margin: 0; font-size: 22px; }
.tagline { margin: 0; color: var(--muted); font-size: 13px; }
.status-line { font-size: 11px; color: var(--text); font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-btn:hover { border-color: var(--accent); color: var(--text); }
/* Brand-colored nav buttons */
.nav-btn.claude { background: #d97757; border-color: #d97757; color: #fff; }
.nav-btn.claude:hover { background: #c66544; border-color: #c66544; color: #fff; }
.nav-btn.solana { background: linear-gradient(135deg, #9945ff, #14f195); border-color: transparent; color: #fff; }
.nav-btn.solana:hover { border-color: #14f195; color: #fff; }
.nav-btn.perps { background: #22c55e; border-color: #22c55e; color: #052e14; }
.nav-btn.perps:hover { background: #16a34a; border-color: #16a34a; color: #052e14; }
.nav-btn.metals { background: #d4af37; border-color: #d4af37; color: #241a02; }
.nav-btn.metals:hover { background: #b8962e; border-color: #b8962e; color: #241a02; }
/* Ag: harvest gradient — green field to golden wheat */
.nav-btn.ag { background: linear-gradient(135deg, #65a30d, #eab308); border-color: transparent; color: #1a2e05; }
.nav-btn.ag:hover { border-color: #eab308; color: #1a2e05; }
/* Clef: Cloudflare orange */
.nav-btn.clef { background: #f6821f; border-color: #f6821f; color: #241203; }
.nav-btn.clef:hover { background: #d9731a; border-color: #d9731a; color: #241203; }
/* Ponies: saddle brown */
.nav-btn.ponies { background: #b45309; border-color: #b45309; color: #fff; }
.nav-btn.homes { background: #0f766e; border-color: #0f766e; color: #fff; }
.nav-btn.ponies:hover { background: #92400e; border-color: #92400e; color: #fff; }
/* Resume: Excel green */
.nav-btn.resume { background: #217346; border-color: #217346; color: #fff; }
.nav-btn.resume:hover { background: #1a5c38; border-color: #1a5c38; color: #fff; }

/* Uniform nav buttons: same width/height + tiny icons (family standard) */
.site-nav .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 80px;
  height: 32px;
  padding: 0 4px;
  font-size: 12px;
}
.nav-btn .nav-ico { font-size: 14px; line-height: 1; }
.nav-btn.news { background: #dc2626; border-color: #dc2626; color: #fff; }
.nav-btn.crypto{background:linear-gradient(135deg,#d4af37,#8a6a1c);border-color:#d4af37;color:#14100a}
.nav-btn.news:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.nav-btn.sports { background: #2563eb; border-color: #2563eb; color: #fff; }
.nav-btn.sports:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.nav-btn.random { background: #1f2937; border-color: #4b5563; color: #fff; }
.nav-btn.random:hover { background: #374151; border-color: #6b7280; color: #fff; }
.banner {
  background: #3b2f0b;
  border-bottom: 1px solid #8a6d1c;
  color: #f5d76e;
  padding: 10px 24px;
  font-size: 14px;
  display: flex; align-items: center; gap: 12px;
}
.banner.hidden { display: none; }
.btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.small-btn { padding: 6px 12px; font-size: 12px; }
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card-head h2 { margin: 0 0 8px; font-size: 18px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.note { margin: 4px 0; }
table.signals { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.signals th, table.signals td {
  text-align: center;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.signals th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.metal-cell { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.metal-cell > div:last-child { width: 100px; }
.metal-badge {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: #111; flex-shrink: 0;
}
.signal-buy, .signal-hold, .signal-sell {
  font-weight: 700; font-size: 13px;
  padding: 4px 12px; border-radius: 999px;
}
.signal-buy { color: #0d1117; background: var(--green); }
.signal-hold { color: var(--text); background: #30363d; }
.signal-sell { color: #fff; background: var(--red); }
footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .grid { padding: 12px; }
  table.signals th, table.signals td { padding: 8px 6px; font-size: 14px; }
}

/* Floating metal badges: simple bobbing coin discs in the margins beside the table */
.farm-float { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.farm-float .spr { position: absolute; transform: translate(-50%, -50%); }
.farm-float .bob { display: inline-block; animation: floaty 6s ease-in-out infinite; }
.farm-float .coin .bob {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #1c1c1c;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.farm-float .mascot .bob img { width: 52px; border-radius: 12px; display: block; }
.farm-float .spr.dying .bob { animation: none; filter: grayscale(1); opacity: .45; transform: rotate(28deg) scale(.92); }
.farm-float.mood-upbeat .mascot .bob { animation-duration: 2.6s; }
.farm-float.mood-mopey .mascot .bob { animation-duration: 10s; }
.farm-float.mood-mopey .mascot img { filter: saturate(.6); }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}
main.grid .card { position: relative; z-index: 2; }

/* All nav buttons on one line (desktop); wrap only on narrow screens */
@media (max-width: 1150px) {
  .site-nav, .topbar > .site-nav { flex-wrap: wrap !important; }
}

/* Nav layout: centered main group, Resume pinned at the far right */
.site-nav, .topbar > .site-nav { flex: 1 1 auto !important; }
.nav-spacer { flex: 1 1 0; }
.nav-main { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.nav-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 1150px) {
  .nav-spacer { display: none; }
  .nav-right { flex: none; }
  .nav-main { flex-wrap: wrap; justify-content: center; }
}


/* Auction nav button - eBay colors (2026-10-17) */
.nav-btn.auction { background: linear-gradient(90deg, #E53238 0 25%, #F5AF02 25% 50%, #86B817 50% 75%, #0064D2 75% 100%) bottom / 100% 3px no-repeat, #0064D2; border-color: #0064D2; color: #fff; }
.nav-btn.auction:hover { background: linear-gradient(90deg, #E53238 0 25%, #F5AF02 25% 50%, #86B817 50% 75%, #0064D2 75% 100%) bottom / 100% 3px no-repeat, #0053B3; border-color: #0053B3; color: #fff; }

/* HEARD nav button - X blue, HEARD brand color (2026-10-17) */
.nav-btn.heard { background: #1d9bf0; border-color: #1d9bf0; color: #fff; }
.nav-btn.heard:hover { background: #1a8cd8; border-color: #1a8cd8; color: #fff; }

/* Nav cluster spacing (2026-10-17) */
.site-nav .nav-main .nav-btn.cluster-start { margin-left: 10px; }

/* Header layout (Eddie, 2026-10-17): three-lane grid - brand in its own
   left lane, nav group centered in the middle lane on the same axis as the
   content table, Resume pinned to the zone's right edge. The brand stays in
   normal flow (never floated over the nav) and the tagline is hidden on
   desktop so the brand lane stays compact. */
.topbar { padding-left: max(20px, calc((100% - 1180px) / 2)); padding-right: max(20px, calc((100% - 1180px) / 2)); }
@media (min-width: 1001px) {
  .topbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .topbar .brand { position: static; transform: none; justify-self: start; }
  .pregman-nav { min-width: 0; justify-self: center; }
  .pnav-bar { position: static !important; justify-content: center !important; }
  .pnav-spacer { display: none !important; }
  .pnav-right { position: absolute !important; right: max(20px, calc((100% - 1180px) / 2)); top: 50%; transform: translateY(-50%); flex: none !important; }
  .topbar .brand .tagline, .topbar .brand p { display: none; }
}

/* ICP page: token badges */
.token-badge { color: #fff; }
table.signals td .sub { display: block; font-size: 11px; }