:root {
  --bg: #f6efe8;
  --panel: #fff9f3;
  --ink: #20130a;
  --muted: #6b5a4e;
  --stroke: #ddc9b8;
  --accent: #e06b2e;
  --accent-dark: #b9501d;
  --danger: #a12e13;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 15%, #ffd6ba 0, transparent 42%),
    radial-gradient(circle at 10% 80%, #ffc483 0, transparent 35%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

body.pro-plan-active:not(.dark-mode) {
  background:
    radial-gradient(circle at 80% 15%, #d7e8ff 0, transparent 45%),
    radial-gradient(circle at 10% 82%, #ffd8b9 0, transparent 36%),
    var(--bg);
}

.layout {
  width: min(1100px, calc(100vw - 24px));
  margin: 32px auto 50px;
  display: grid;
  gap: 18px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 55ch;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 28px -24px #2f13021a;
  overflow: hidden;
}

.pass-panel {
  position: relative;
  border-color: #52698b;
  background:
    radial-gradient(circle at 82% 14%, #324d73 0, transparent 42%),
    radial-gradient(circle at 14% 16%, #2a4264 0, transparent 44%),
    linear-gradient(165deg, #121a2b 0%, #16253b 58%, #111a2b 100%);
  box-shadow:
    0 22px 42px -30px #000000cf,
    inset 0 1px 0 #ffffff21;
  color: #e8eefb;
}

.pass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, #ffffff1a 0%, transparent 36%),
    repeating-linear-gradient(
      130deg,
      transparent 0,
      transparent 12px,
      #ffffff06 12px,
      #ffffff06 13px
    );
  pointer-events: none;
  z-index: 0;
}

.pass-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid #ffffff0f;
  border-radius: 13px;
  pointer-events: none;
  z-index: 0;
}

.pass-panel > * {
  position: relative;
  z-index: 1;
}

.pass-panel.pro-active {
  border-color: #7ca4d8;
  background:
    radial-gradient(circle at 82% 14%, #3a5d89 0, transparent 42%),
    radial-gradient(circle at 13% 18%, #304f79 0, transparent 44%),
    linear-gradient(165deg, #13253a 0%, #1b3452 58%, #172d49 100%);
  box-shadow:
    0 24px 44px -32px #001a3db8,
    inset 0 1px 0 #ffffff29;
}

.pass-panel.pro-active::after {
  border-color: #c2dbff33;
}

.pass-panel.pro-active .pass-kicker {
  color: #d1e3ff;
}

.pass-panel.pro-active .offer-pill {
  border-color: #7297c8;
  color: #e0ecff;
  background: #203a5b;
}

.pass-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.85fr);
  align-items: stretch;
}

.pass-main {
  min-width: 0;
  border: 1px solid #51698b;
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% -8%, #2a4060 0, transparent 44%),
    linear-gradient(180deg, #182841 0%, #16243b 100%);
  padding: 20px;
  box-shadow:
    inset 0 1px 0 #ffffff17,
    0 14px 26px -22px #000000bf;
}

.pass-panel.pro-active .pass-main {
  border-color: #6f95c8;
  background:
    radial-gradient(circle at 10% -8%, #2e4f77 0, transparent 44%),
    linear-gradient(180deg, #193151 0%, #182d48 100%);
}

.pass-headline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pass-panel h2 {
  margin: 2px 0 0;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #f4f8ff;
  text-shadow: 0 2px 10px #040b18ab;
}

.pass-kicker {
  margin: 0;
  font-size: 0.82rem;
  color: #a4c0e8;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
}

.pass-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #6988b4;
  background: linear-gradient(180deg, #273d5e 0%, #223551 100%);
  color: #d4e4fb;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.pass-panel.pro-active .pass-chip {
  border-color: #88b2ea;
  background: linear-gradient(180deg, #2a4972 0%, #254063 100%);
  color: #ebf3ff;
}

.pass-copy {
  margin: 12px 0 0;
  color: #d1def4;
  max-width: 58ch;
  font-size: clamp(1.03rem, 1.5vw, 1.07rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pass-panel.pro-active .pass-copy {
  color: #dfebff;
}

.pass-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.offer-pill {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #5f7da6;
  background: #1f314d;
  color: #d5e3f8;
  font-size: 0.78rem;
  font-weight: 600;
}

.pass-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pass-actions > * {
  flex: 1 1 160px;
  min-width: 0;
}

.pass-actions .pro-badge {
  flex: 0 0 auto;
}

.primary-btn,
.secondary-btn {
  height: 42px;
  border-radius: 9px;
  border: 1px solid #5f7da5;
  padding: 0 14px;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn {
  border: none;
  color: #f6fbff;
  font-weight: 700;
  background: linear-gradient(145deg, #84b6ff 0%, #507dc9 100%);
  box-shadow: 0 10px 24px -14px #274671d6;
}

.secondary-btn {
  color: #e6eefc;
  background: #1c2d47;
  border-color: #58749a;
}

.secondary-btn:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.secondary-btn:disabled,
.primary-btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.link-btn {
  border-style: dashed;
  color: #c9dcf8;
  background: #1a2a43;
}

#darkModeBtn {
  border-color: #6c89b3;
  background: #233756;
  color: #d5e4fb;
  font-weight: 600;
}

#darkModeBtn:disabled {
  border-color: #445a77;
  background: #1a273c;
  color: #8a9bb4;
}

.pass-panel.pro-active #darkModeBtn {
  border-color: #84aee6;
  background: #2a476d;
  color: #e5f0ff;
}

.status-grid {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.pro-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #41a593;
  background: #163631;
  color: #98eadb;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hidden {
  display: none;
}

.status-inline {
  margin: 0;
  color: #ccd9ef;
  background: #192b45cc;
  border: 1px solid #58749a;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.status-inline.error {
  color: #ffd0d0;
  border-color: #8f5f69;
  background: #362630dd;
}

.pass-side {
  border: 1px solid #58739a;
  border-radius: 12px;
  background:
    radial-gradient(circle at 84% 18%, #3c5a83 0, transparent 46%),
    linear-gradient(185deg, #141d2f 0%, #1b2a46 60%, #142033 100%);
  color: #e8edf8;
  padding: 16px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.side-kicker {
  margin: 0;
  color: #b5ccef;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.pass-side h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #f2f5fc;
  letter-spacing: -0.01em;
}

.perk-list {
  margin: 4px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: #e0e9f8;
}

.pass-proof {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #d9e7ff;
  background: #2d4469a8;
  border: 1px solid #82a6d171;
  border-radius: 8px;
  padding: 8px 10px;
}

.pass-side-note {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #c5d3ea;
  line-height: 1.35;
}

.controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  min-width: 0;
}

#chainSelect,
#assetInput,
#riskPreset,
#sortBy,
#minLiquidityUsd,
#minVolume24h,
#searchBtn {
  height: 44px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  font: inherit;
}

#chainSelect,
#assetInput,
#riskPreset,
#sortBy,
#minLiquidityUsd,
#minVolume24h {
  padding: 0 12px;
  background: #fffcf8;
}

#chainSelect,
#assetInput,
#riskPreset,
#sortBy,
#minLiquidityUsd,
#minVolume24h,
#searchBtn {
  width: 100%;
  min-width: 0;
}

.asset-field {
  grid-column: span 2;
}

#searchBtn {
  cursor: pointer;
  border: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(150deg, #f48b47, #d9652c);
}

#searchBtn:hover {
  filter: saturate(1.08);
}

#searchBtn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.status {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: var(--muted);
}

.stats-wrap {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  background: #fffefc;
  border: 1px solid #ead9cb;
  border-radius: 10px;
  padding: 12px;
}

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

.stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.1rem;
}

.section-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.best-summary {
  margin: 0;
  color: var(--ink);
}

.reasons {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}

.risk-high {
  color: var(--danger);
}

.risk-mid {
  color: #93570f;
}

.risk-low {
  color: #327a31;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

thead th {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 2px solid var(--stroke);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #eadfd4;
  vertical-align: top;
}

.pair {
  display: grid;
  gap: 4px;
}

.pair small {
  color: var(--muted);
  font-size: 0.72rem;
  line-break: anywhere;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #dcc6b2;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--muted);
  background: #fff6ed;
}

.small-note {
  color: var(--muted);
  font-size: 0.76rem;
}

a {
  color: var(--accent-dark);
}

.placeholder {
  color: var(--muted);
}

body.dark-mode {
  --bg: #10141c;
  --panel: #171d27;
  --ink: #ebf0f8;
  --muted: #a3afc0;
  --stroke: #2f3b4b;
  --accent: #5f9ff5;
  --accent-dark: #8bc0ff;
  --danger: #ff8f8f;
  background:
    radial-gradient(circle at 80% 14%, #1b2840 0, transparent 45%),
    radial-gradient(circle at 12% 84%, #172636 0, transparent 36%),
    var(--bg);
}

body.dark-mode .panel {
  box-shadow: 0 14px 30px -26px #000000c2;
}

body.dark-mode .pass-panel {
  border-color: #5e7aa0;
  background:
    radial-gradient(circle at 82% 18%, #2f4769 0, transparent 43%),
    radial-gradient(circle at 12% 14%, #253950 0, transparent 42%),
    linear-gradient(165deg, #10182a 0%, #15243a 58%, #101b2d 100%);
}

body.dark-mode .pass-panel::after {
  border-color: #d3e4ff1f;
}

body.dark-mode .pass-panel.pro-active {
  border-color: #81a9dd;
  background:
    radial-gradient(circle at 82% 18%, #376192 0, transparent 42%),
    radial-gradient(circle at 12% 18%, #2f4e78 0, transparent 41%),
    linear-gradient(165deg, #132842 0%, #1a3860 60%, #16304e 100%);
}

body.dark-mode .pass-panel.pro-active::after {
  border-color: #d2e6ff40;
}

body.dark-mode .pass-panel .pass-kicker,
body.dark-mode .pass-panel.pro-active .pass-kicker {
  color: #c0d7fa;
}

body.dark-mode .pass-chip {
  border-color: #7f9fca;
  background: linear-gradient(180deg, #2b466a 0%, #26405f 100%);
  color: #e3efff;
}

body.dark-mode .pass-main {
  border-color: #6180aa;
  background:
    radial-gradient(circle at 10% -8%, #2e4a6f 0, transparent 44%),
    linear-gradient(180deg, #192c49 0%, #172940 100%);
}

body.dark-mode .pass-copy,
body.dark-mode .pass-side-note,
body.dark-mode .perk-list {
  color: #d4e2f8;
}

body.dark-mode .offer-pill {
  border-color: #6a89b4;
  color: #dfebff;
  background: #25405f;
}

body.dark-mode .pass-side {
  border-color: #6484af;
  background:
    radial-gradient(circle at 84% 18%, #40628e 0, transparent 46%),
    linear-gradient(185deg, #151f33 0%, #1e3150 62%, #18283f 100%);
}

body.dark-mode .side-kicker {
  color: #c1d8fa;
}

body.dark-mode .pass-proof {
  color: #deebff;
  border-color: #8fb1db80;
  background: #2f4c74bf;
}

body.dark-mode .secondary-btn {
  color: #f0f5ff;
  background: #20324e;
  border-color: #6b8bb6;
}

body.dark-mode #darkModeBtn {
  border-color: #86aee4;
  background: #2a4671;
  color: #e8f2ff;
}

body.dark-mode #darkModeBtn:disabled {
  border-color: #5d7191;
  background: #243651;
  color: #93a5c2;
}

body.dark-mode .link-btn {
  color: #d9e9ff;
}

body.dark-mode .primary-btn {
  background: linear-gradient(140deg, #92c2ff 0%, #5e8ed8 100%);
  box-shadow: 0 10px 24px -14px #315ea4;
}

body.dark-mode .status-inline {
  color: #d4e3fa;
  background: #213754d9;
  border-color: #6d8fbf;
}

body.dark-mode .status-inline.error {
  color: #ffd7d7;
  border-color: #8d5e6a;
  background: #3c2933de;
}

body.dark-mode #chainSelect,
body.dark-mode #assetInput,
body.dark-mode #riskPreset,
body.dark-mode #sortBy,
body.dark-mode #minLiquidityUsd,
body.dark-mode #minVolume24h {
  color: #ebf0f8;
  border-color: #33455d;
  background: #141c2a;
}

body.dark-mode .stat {
  background: #131b29;
  border-color: #304258;
}

body.dark-mode thead th {
  color: #9fb3cf;
  border-bottom-color: #314154;
}

body.dark-mode tbody td {
  border-bottom-color: #253447;
}

body.dark-mode .pill {
  border-color: #3a4f68;
  color: #b4c8e2;
  background: #1d2a3b;
}

@media (max-width: 900px) {
  .pass-shell {
    grid-template-columns: 1fr;
  }

  .asset-field {
    grid-column: span 1;
  }

  .stats-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .pass-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .stats-wrap {
    grid-template-columns: 1fr;
  }
}