/* IndiPoli theme — softened hybrid (was brutalist). Dark (default) + light.
   Phase 1 plan 01-08 (FND-04) + post-v1 UX overhaul.
   Body copy is now sans-serif; monospace is reserved for code / prices /
   addresses / tabular numeric data. Borders softened, rounded corners on
   cards / buttons / inputs, more breathing room, hover transitions. */

:root,
[data-theme="dark"] {
  /* v1.7 — dark theme contrast + spacing refresh. Old tokens produced
     muted gray cards on near-black bg that were hard to read. New tokens
     bump --bg slightly cooler, --card clearly distinct from --bg, --fg
     brighter, borders cooler and 1.5px, accent crisper sky-blue. */
  --bg: #0a0b0d;
  --bg-elevated: #12141a;
  --fg: #f5f6f8;
  --fg-muted: #a8acb5;
  --muted: #a8acb5;              /* legacy alias kept for existing selectors */
  --border: #2a2e38;
  --border-strong: #3d4150;
  --card: #111319;
  --card-elevated: #161920;
  --accent: #7dd3fc;
  --accent-strong: #38bdf8;
  --accent-soft: rgba(125,211,252,0.14);
  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --radius: 6px;
  --radius-lg: 8px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --transition: 0.15s ease;
}

[data-theme="light"] {
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --fg: #0b0b0b;
  --fg-muted: #555;
  --muted: #555;
  --border: #e2e2e2;
  --border-strong: #cccccc;
  --card: #ffffff;
  --card-elevated: #ffffff;
  --accent: #0052cc;
  --accent-strong: #0041a3;
  --accent-soft: rgba(0,82,204,0.08);
  --danger: #c0392b;
  --success: #16a34a;
  --warning: #d97706;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Monospace survives for prices, addresses, code, tabular data. */
code, pre, kbd, samp,
.mono, .wallet-addr, .brier-value, .brier-label,
.history-table, .positions-table, .opportunities,
.auto-trade-countdown-toast {
  font-family: var(--font-mono);
}

header {
  border-bottom: 1px solid var(--border);
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, var(--card), var(--bg));
}
header .brand {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--fg);
  font-family: var(--font-mono);
}
header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  line-height: 1;
}
header nav > a,
header nav > .link-btn,
header nav > .nav-logout-link {
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color var(--transition);
  background: none;
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
}
header nav > a:hover,
header nav > .link-btn:hover,
header nav > .nav-logout-link:hover { color: var(--accent); }
header nav form { margin: 0; padding: 0; display: inline-flex; align-items: center; }
header nav .link-btn { padding: 0.5rem 0.25rem; }

button#theme-toggle {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
  transition: all var(--transition);
  width: auto;
}
button#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Main content frame. */
main {
  width: min(92vw, 96rem);
  margin: 2.5rem auto;
  padding: 0 clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Narrow-form wrapper for single-column auth pages. */
.form-wrap { max-width: 34rem; margin: 0 auto; }
form.card {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.card {
  border: 1.5px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--border), 0 2px 4px rgba(0,0,0,0.3);
}
@media (min-width: 900px) {
  .card { padding: 2.5rem 3rem; }
}
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}

h1 {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--fg);
  text-transform: none;
}
h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 700;
  margin: 1rem 0 0.5rem;
}

label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0.9rem 0 0.35rem;
  font-weight: 600;
}

input, select, textarea {
  font: inherit;
  background: var(--card);
  color: var(--fg);
  border: 1.5px solid var(--border);
  padding: 0.7rem 0.85rem;
  width: 100%;
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===== Unified button system ===== */
.btn,
button[type="submit"],
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  width: auto;
  line-height: 1.2;
}
.btn:hover,
button[type="submit"]:hover,
button.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled,
button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--border-strong); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-full { width: 100%; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.78rem; }

input[type="checkbox"], input[type="radio"] { width: auto; }

.checkbox-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.checkbox-row input { width: auto; margin-top: 0.2rem; }
.checkbox-row label {
  margin: 0;
  text-transform: none;
  color: var(--fg);
  font-size: 0.85rem;
  letter-spacing: 0;
  font-weight: normal;
}

select option:disabled { color: var(--muted); font-style: italic; }

.error {
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  background: rgba(255,107,107,0.06);
}

a { color: var(--accent); transition: color var(--transition); }
a:hover { opacity: 0.85; }
code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.88em;
}

p { margin: 0 0 0.75rem; }

/* ===== 2-column settings form grid on desktop ===== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.settings-grid .col-span-2 { grid-column: 1 / -1; }
.settings-grid > .field { display: flex; flex-direction: column; }
.settings-grid > .field label { margin-top: 0; }

/* ===== Setup checklist banner ===== */
.setup-banner {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.setup-banner.complete {
  border-color: var(--success);
  background: rgba(74,222,128,0.06);
}
.setup-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.setup-banner-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-sans);
}
.setup-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.setup-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.setup-check .mark { font-family: var(--font-mono); font-weight: 700; width: 1.2rem; text-align: center; }
.setup-check.ok .mark { color: var(--success); }
.setup-check.missing .mark { color: var(--danger); }
.setup-check a { font-size: 0.78rem; margin-left: auto; }

/* ===== Dashboard grid + components (Phase 4 plan 04-04) ===== */
body:has(.dashboard-grid) main,
main:has(.dashboard-grid) { max-width: 84rem; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "status status"
    "opps sentiment";
  gap: 1rem;
  margin-bottom: 2rem;
}

.panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.panel-status       { grid-area: status; padding: 0; overflow: hidden; }
.panel-opportunities { grid-area: opps; }
.panel-sentiment    { grid-area: sentiment; }

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "opps"
      "sentiment";
  }
}

.killswitch-banner {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.75rem;
  text-transform: uppercase;
}
.killswitch-banner[data-enabled="0"] { display: none; }
.killswitch-banner.enabled,
.killswitch-banner[data-enabled="1"] { display: block; }

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
}
.status-item {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.killswitch-toggle {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  width: auto;
  margin: 0;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.killswitch-toggle:hover { border-color: var(--accent); color: var(--accent); }
.killswitch-toggle[data-enabled="1"] {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.sse-status { font-size: 0.72rem; color: var(--muted); }

table.opportunities {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.opportunities th,
table.opportunities td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
table.opportunities th {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 600;
}
table.opportunities tr.anomaly td { background: rgba(255,107,107,0.04); }
table.opportunities .empty-row td {
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.anomaly-badge {
  display: inline-block;
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  padding: 0.05rem 0.4rem;
  margin-left: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}

.trade-btn {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.75rem;
  width: auto;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
}
.trade-btn:hover { border-color: var(--accent); color: var(--accent); }
.trade-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg);
}

.edge-positive { color: #4ade80; font-family: var(--font-mono); }
.edge-negative { color: var(--danger); font-family: var(--font-mono); }
[data-theme="light"] .edge-positive { color: #16a34a; }

.sentiment-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 36rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* subtle custom scrollbar so the default chrome doesn't dominate */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #3a3a3a) transparent;
}
.sentiment-feed::-webkit-scrollbar { width: 6px; }
.sentiment-feed::-webkit-scrollbar-track { background: transparent; }
.sentiment-feed::-webkit-scrollbar-thumb {
  background: var(--border-strong, #3a3a3a);
  border-radius: 3px;
}

.sentiment-feed li {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  grid-template-areas:
    "ticker headline score"
    "ticker headline meta";
  column-gap: 0.9rem;
  row-gap: 0.1rem;
  padding: 0.85rem 1rem;
  background: var(--card-elevated, var(--card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius, 6px);
  font-size: 0.86rem;
  transition: border-color var(--transition, 0.15s), transform var(--transition, 0.15s), background var(--transition, 0.15s);
}
.sentiment-feed li:hover {
  border-color: var(--border-strong, #3a3a3a);
  transform: translateX(2px);
}

/* Colored left-rail + ticker pill by score sign. */
.sentiment-feed li[data-sign="pos"] { border-left-color: var(--success, #4ade80); }
.sentiment-feed li[data-sign="neg"] { border-left-color: var(--danger,  #ff6b6b); }
.sentiment-feed li[data-sign="pos"]:hover { border-color: rgba(74,222,128,0.35); }
.sentiment-feed li[data-sign="neg"]:hover { border-color: rgba(255,107,107,0.35); }

.sentiment-head { display: contents; }

.sentiment-entity {
  grid-area: ticker;
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.35rem 0.55rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
}
.sentiment-feed li[data-sign="pos"] .sentiment-entity {
  border-color: rgba(74,222,128,0.4);
  color: var(--success, #4ade80);
}
.sentiment-feed li[data-sign="neg"] .sentiment-entity {
  border-color: rgba(255,107,107,0.4);
  color: var(--danger, #ff6b6b);
}

.sentiment-news {
  grid-area: headline;
  align-self: center;
  margin: 0;
  color: var(--fg);
  line-height: 1.45;
  font-weight: 500;
}

.sentiment-score {
  grid-area: score;
  justify-self: end;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius, 6px);
  background: var(--bg);
  color: var(--muted);
  min-width: 3.5rem;
  text-align: right;
}
.sentiment-feed li[data-sign="pos"] .sentiment-score {
  color: var(--success, #4ade80);
  background: rgba(74,222,128,0.08);
}
.sentiment-feed li[data-sign="neg"] .sentiment-score {
  color: var(--danger, #ff6b6b);
  background: rgba(255,107,107,0.08);
}

.sentiment-foot {
  grid-area: meta;
  justify-self: end;
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  align-self: start;
}

@media (max-width: 640px) {
  .sentiment-feed li {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "ticker score"
      "headline headline"
      "meta meta";
    row-gap: 0.35rem;
  }
  .sentiment-news { margin-top: 0.1rem; }
  .sentiment-foot { justify-self: start; }
}
.opp-count-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 0.05rem 0.45rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  font-size: 0.7rem;
}
.no-match { color: var(--muted); font-style: italic; }

.settings-tabs .settings-tab { font-size: 0.8rem; }

.opp-rationale details summary { cursor: pointer; list-style: none; }
.opp-rationale details[open] .rationale-full {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  white-space: pre-wrap;
}

p.muted { color: var(--muted); font-size: 0.85rem; }

/* ===== Wallet widget ===== */
.wallet-status {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.wallet-addr { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
.wallet-wrong-chain { color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; }
.wallet-linked-badge {
  background: var(--border);
  color: var(--fg);
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  border-radius: 4px;
}
.low-gas-badge {
  background: var(--danger);
  color: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.allowance-ok { color: var(--accent); font-size: 0.78rem; }
.allowance-low { color: var(--danger); font-size: 0.78rem; }
.wallet-link-error { color: var(--danger); font-size: 0.7rem; text-transform: uppercase; }
.wallet-no-js { color: var(--muted); font-style: italic; }
.wallet-btn,
.approve-btn,
.disconnect-btn,
.link-wallet-btn {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: auto;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.wallet-btn:hover,
.approve-btn:hover,
.disconnect-btn:hover,
.link-wallet-btn:hover { border-color: var(--accent); color: var(--accent); }
.wallet-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.approve-btn { border-color: var(--accent); color: var(--accent); }
.disconnect-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ===== History page + open positions (Phase 6 plan 06-06) ===== */
.history-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.history-page h1 {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.4rem;
  text-transform: uppercase;
  font-size: 1.2rem;
}
.brier-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  border: 1px solid var(--border);
  padding: 1rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
}
.brier-metric {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.brier-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.brier-value {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.brier-footnote {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.history-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.history-table th,
.history-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
  text-align: left;
}
.history-table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  background: var(--card);
  font-family: var(--font-sans);
}
.history-row:hover { background: var(--card-elevated); }
.history-row .h-source a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}

.state-badge {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.state-badge.state-confirmed { color: var(--accent); border-color: var(--accent); }
.state-badge.state-failed    { color: var(--danger); border-color: var(--danger); }
.state-badge.state-cancelled { color: var(--muted); border-color: var(--muted); }

.pnl-pos { color: var(--success); font-family: var(--font-mono); }
.pnl-neg { color: var(--danger); font-family: var(--font-mono); }

/* Open positions panel on dashboard. */
.panel-positions {
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  grid-column: 1 / -1;
}
.panel-positions h2 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
}
.open-positions { overflow-x: auto; }
.positions-empty {
  color: var(--muted);
  font-style: italic;
  padding: 0.3rem 0;
}
.positions-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.positions-table th,
.positions-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.positions-table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  font-family: var(--font-sans);
}
.position-row[data-updated="1"] {
  background: var(--card-elevated);
  transition: background 0.6s linear;
}

/* ===== Auto-trade countdown (Phase 7 plan 07-03) ===== */
.limits-section-danger {
  border: 1px solid var(--danger, #c33);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.limits-section-danger legend {
  padding: 0 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
}
.danger-color { color: var(--danger, #c33); }
.auto-trade-countdown-toast {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  margin-left: 0.5rem;
  background: var(--accent, #ff0);
  color: var(--bg, #000);
  font-family: var(--font-mono, monospace);
  border: 1px solid var(--fg, #fff);
  border-radius: var(--radius);
}
.countdown-cancel-btn {
  background: var(--bg, #000);
  color: var(--fg, #fff);
  border: 1px solid var(--fg, #fff);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  border-radius: var(--radius);
}
.confirm-manually-btn {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  background: var(--bg, #000);
  color: var(--fg, #fff);
  border: 1px solid var(--fg, #fff);
  cursor: pointer;
  text-transform: uppercase;
  border-radius: var(--radius);
}

/* ===== Demo page specifics ===== */
.demo-banner {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.demo-banner strong { color: var(--accent); letter-spacing: 0.05em; }
.demo-live-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: demoPulse 1.8s infinite;
  vertical-align: middle;
  margin-right: 0.4rem;
}
@keyframes demoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ===== Health page ===== */
.health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.health-table th,
.health-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.health-table th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--font-sans);
}
.health-status {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}
.health-status.ok   { color: var(--success); }
.health-status.warn { color: var(--warning); }
.health-status.fail { color: var(--danger); }
.health-detail { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; }

/* Home / CTA */
.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

/* ===== v1.2 — opportunity filters, badges, analyze modal ================ */

.opp-filter-bar {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.opp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}
.opp-filter-label {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--font-sans);
  text-transform: uppercase;
  gap: 0.25rem;
  margin: 0;
}
.opp-filter-label input,
.opp-filter-label select {
  width: 12rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}
.opp-filter-label input[type="number"] { width: 8rem; }

.opp-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.opp-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--card);
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.opp-category-chip:hover { border-color: var(--accent); color: var(--accent); }
.opp-category-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Category + horizon badges on opportunity rows */
.opp-category-badge,
.opp-horizon-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-family: var(--font-sans);
  vertical-align: middle;
  border: 1px solid transparent;
  color: #fff;
}
.opp-category-politics      { background: #7c3aed; }
.opp-category-sports        { background: #ea580c; }
.opp-category-crypto        { background: #2563eb; }
.opp-category-business      { background: #15803d; }
.opp-category-entertainment { background: #db2777; }
.opp-category-science       { background: #0891b2; }
.opp-category-other         { background: #6b7280; }

.opp-horizon-badge {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
}
.opp-horizon-short { color: var(--warning); border-color: var(--warning); }
.opp-horizon-long  { color: var(--success); border-color: var(--success); }

.opp-volume, .opp-bidders {
  font-family: var(--font-mono);
  text-align: right;
  font-size: 0.85rem;
}
.opp-bidders.is-muted { color: var(--muted); }

.analyze-btn {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
}

/* ===== v1.2 — Analyze modal ============================================= */

.opp-modal {
  border: none;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--fg);
  max-width: min(46rem, 92vw);
  width: 100%;
  max-height: 86vh;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.opp-modal::backdrop {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
.opp-modal-content {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  max-height: 86vh;
  font-family: var(--font-sans);
  line-height: 1.6;
}
.opp-modal-content h1,
.opp-modal-content h2,
.opp-modal-content h3 {
  font-family: var(--font-sans);
  color: var(--fg);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: -0.01em;
}
.opp-modal-content h2 { font-size: 1rem; }
.opp-modal-content h3 { font-size: 0.9rem; color: var(--accent); }
.opp-modal-content p  { margin: 0.6rem 0; }
.opp-modal-content ul, .opp-modal-content ol { margin: 0.6rem 0 0.6rem 1.25rem; }
.opp-modal-content li { margin: 0.25rem 0; }
.opp-modal-content code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.88em;
}
.opp-modal-content a { color: var(--accent); }
.opp-modal-content strong { color: var(--fg); }

.opp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-elevated);
}
.opp-modal-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.opp-modal-subtitle {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--font-mono);
}
.opp-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
}
.opp-modal-close:hover { color: var(--danger); border-color: var(--danger); }
.opp-modal-loading {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
}
.opp-modal-error {
  padding: 1rem;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  margin: 1rem;
}
.opp-modal-demo-banner {
  padding: 0.5rem 1rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

body.modal-open { overflow: hidden; }

/* ============================================================
   v1.7 — dark theme contrast + hover polish refresh.
   Additive layer. Keeps all existing class names intact; only
   tunes visible color/spacing/hover feedback to fix the
   "muted gray cards on near-black" legibility complaint.
   ============================================================ */

/* Header nav: left-to-right underline animation on hover + thicker
   3px accent underline on .active (the settings tabs, Phase pages). */
header nav > a,
header nav > .link-btn,
header nav > .nav-logout-link {
  position: relative;
}
header nav > a::after,
header nav > .link-btn::after,
header nav > .nav-logout-link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
header nav > a:hover::after,
header nav > .link-btn:hover::after,
header nav > .nav-logout-link:hover::after {
  transform: scaleX(1);
}
header nav > a.active::after {
  transform: scaleX(1);
  height: 3px;
  background: var(--accent-strong);
}

/* Settings tab strip — thicker + brighter active underline. */
.settings-tabs .settings-tab.active {
  border-bottom: 3px solid var(--accent-strong) !important;
  color: var(--fg) !important;
  font-weight: 700;
}
.settings-tabs .settings-tab {
  transition: background var(--transition), color var(--transition);
}
.settings-tabs .settings-tab:hover {
  background: var(--card-elevated);
  color: var(--accent);
}

/* Row-hover feedback: dashboard opportunities, history rows, signal
   source rows. One unified elevated background so the user can tell
   exactly which row they're pointing at. */
.opportunities tr:hover td,
.history-row:hover,
.signal-source-row:hover,
tr.signal-source-row:hover td {
  background: var(--card-elevated);
}

/* Preset cards on /settings/signals — make them read as interactive. */
.preset-card,
.signal-preset-card,
button.preset-card {
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: border-color var(--transition), background var(--transition);
}
.preset-card:hover,
.signal-preset-card:hover,
button.preset-card:hover {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

/* Monospace surfaces (prices, addresses, tabular numerics) use the
   brightest fg so the numbers pop against the card background. */
.mono,
.wallet-addr,
.brier-value,
.history-table td,
.positions-table td,
.opportunities td,
code, pre, kbd, samp {
  color: var(--fg);
}

/* Light-theme override — keep the row-hover subtle. */
[data-theme="light"] .opportunities tr:hover td,
[data-theme="light"] .history-row:hover,
[data-theme="light"] .signal-source-row:hover {
  background: #f3f4f6;
}
[data-theme="light"] .settings-tabs .settings-tab:hover {
  background: #f3f4f6;
}