:root {
  --bg: #0d1117;
  --card: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #ff007a;
  --accent-hover: #d60068;
  --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, #ff007a, #8a0040);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.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; }
.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: #fff;
  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; }
.pair-cell { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.pair-cell > div:last-child { width: 130px; }
.pair-badge {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; 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; }
}

/* Header layout (family standard): three-lane grid — brand in its own left
   lane, nav group centered in the middle lane, Resume pinned right. The
   brand stays in normal flow 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; }
}